Перейти к содержанию

Create React App

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

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
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 используется для выбора шаблона проекта.

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

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
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

Расширения для Google Chrome

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

1
2
3
4
5
6
7
8
"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:

1
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'". Выполняем анализ:

1
2
yarn build
yarn analyze

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
// 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;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
// 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:

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

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

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

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

1
2
3
4
5
6
{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

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

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

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

1
2
3
4
5
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.

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

1
2
3
4
5
6
<!-- public/index.html -->
<title>%REACT_APP_TITLE%</title>
<meta
  name="description"
  content="%REACT_APP_DESCRIPTION%"
/>

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

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

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

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

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

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

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

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

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

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

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

1
yarn add http-proxy-middleware

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
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:

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

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

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

Комментарии