Create React App

Create React App - это интерфейс командной строки (Command Line Interface, CLI), позволяющий создавать предварительно настроенные React-проекты. Предварительная настройка включает в себя, но не исчерпывается, настройкой сборщика модулей Webpack и транспилятора Babel.

Создание и запуск проекта

"my-app" - произвольное название проекта.

yarn create react-app my-app
# или
npm init react-app my-app
# или
npx create-react-app my-app

# смена директории
cd my-app

# запуск в режиме разработки
yarn start
# или
npm run start

# производственная сборка
yarn build
# или
npm run build

Флаг "--template" используется для выбора шаблона проекта.

yarn create react-app my-app --template cra-template-typescript
# "cra-template" можно опустить
yarn create my-app --template typescript

Имеется возможность создавать собственные шаблоны.

Структура проекта

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
    └── setupTests.js

Самыми важными файлами являются следующие:

• public/index.html - шаблон страницы (приложения)
• src/index.js - "входная точка" JavaScript в терминологии "бандлеров"

Эти файлы удалять нельзя. Обратите внимание: Вебпак обрабатывает только файлы, находящиеся в директории src.

Вспомогательные инструменты

• Расширения для VSCode
  • ES7 React/Redux/GraphQL/React-Native snippets
  • Prettier - Code formatter
• Расширения для Google Chrome
  • React Developer Tools
  • Redux DevTools

Настройки VSCode для Prettier (settings.json):

"editor.defaultFormatter": "esbenp.prettier-vscode",
"prettier.endOfLine": "auto",
"prettier.jsxSingleQuote": true,
"prettier.packageManager": "yarn",
"prettier.singleQuote": true,
"prettier.semi": false,
"prettier.trailingComma": "none",
"prettier.useEditorConfig": false,

Полный список настроек смотрите здесь.

Для разработки компонентов в изоляции рекомендуется использовать Storybook:

npx -p @storybook/cli sb init

Для анализа бандла рекомендуется использовать source-map-explorer.

Устанавливаем пакет с помощью yarn add source-map-explorer. Добавляем в раздел scripts файла package.json строку "analyze": "source-map-explorer 'build/static/js/*.js'". Выполняем анализ:

yarn build
yarn analyze

Стили и другие статические ресурсы

Поскольку для сборки проекта используется Вебпак, все статические ресурсы (стили, изображения, шрифты и т.д.) должны импортироваться в JavaScript-файлы:

// Button.css или Button.modules.css
@font-face {
  font-family: 'Montserrat';
  src: url('./Montserrat-Regular.ttf');
}
.btn {
  padding: 0.25em 0.75em;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.25em;
  color: #1c1c1c;
}

// Button.js
import './Montserrat-Regular.ttf'
import './Button.css'
// или
import styles from './Button.module.css'

import likeImg from './like.png'

export default function Button() {
  return (
    <button className="btn" /*или*/ className={styles.btn} >
      <img className="btn_like" src={likeImg} alt="like" />
    </button>
  )
}

Для стилизации также можно использовать специальные библиотеки, например, styled-components. Шпаргалку по работе с данной библиотекой смотрите здесь.

Для сброса стилей в index.css нужно добавить строку @import-normalize;.

При сборке проекта CSS автоматически минифицируется и обрабатывается с помощью autoprefixer, автоматически добавляющего вендорные префиксы.

При большом количестве статических ресурсов, их можно поместить в директорию public. Ссылка на такие файлы делается с помощью process.env.PUBLIC_URL:

<img src={process.env.PUBLIC_URL + '/img/logo.png'} />

Обратите внимание: такие файлы не будут обрабатываться Вебпаком.

Абсолютный путь

Для использования абсолютных путей при импорте компонентов, необходимо в корневой директории (my-app) создать файл jsconfig.json или tsconfig.json (при использовании TypeScript) следующего содержания:

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

import Button from 'components/Button';
// вместо
import Button from '../../components/Button';

Пользовательские переменные среды окружения

Самый простой способ определения "кастомных" переменных среды окружения состоит в создании файла .env в корневой директории (my-app):

REACT_APP_TITLE="Some title"
REACT_APP_DESCRIPTION="Some description"
REACT_APP_BASE_URL=http://example.com/
# расширение переменной
REACT_APP_IMG_URL=$REACT_APP_BASE_URL/img/

Такие переменные должны начинаться с REACT_APP.

Использование:

<!-- public/index.html -->
<title>%REACT_APP_TITLE%</title>
<meta name="description" content="%REACT_APP_DESCRIPTION%" />

<img src={`${process.env.REACT_APP_IMG_URL}/logo.png`} />

Значения переменных заменяются при сборке проекта.

Прогрессивное приложение

CRA позволяет легко создавать прогрессивные веб-приложения:

yarn create react-app my-app --template pwa

// src/index.js
serviceWorker.register();

Обратите внимание: регистрацию сервис-воркера следует запускать только при сборке проекта.

Проксирование (перенаправление запросов)

По умолчанию все запросы отправляются к серверу, на котором запущено приложение (http://localhost:3000). Для перенаправления запросов к серверу, использующему другой порт, необходимо добавить в файл package.json следующую строку:

"proxy": "http://localhost:5000"

Также можно воспользоваться специальной библиотекой:

yarn add http-proxy-middleware

const { createProxyMiddleware } = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  )
}

Разворачивание (деплой) проекта

Существует множество различных вариантов разворачивания приложения. Это можно сделать как локально, так и с помощью генераторов статических сайтов, таких как Netlify, Heroku, Vercel и т.д.

На мой взгляд, самым простым способом является "деплой" SPA-приложения на Netlify:

# установка CLI
yarn global add netlify-cli
# авторизация
netlify login
# деплой демо-версии
netlify deploy
# окончательный деплой
netlify deploy --prod

Имеется возможность продолжительной/длящейся интеграции (CI/CD) с Netlify репозитория, размещенного на Github.

Другие варианты деплоя можно найти здесь.