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

Начать новый проект React не так-то просто. Вместо того, чтобы погружаться прямо в код и воплощать свое приложение в жизнь, вам нужно потратить время на настройку правильных инструментов сборки для настройки локальной среды разработки, модульного тестирования и производственной сборки. К счастью, помощь всегда под рукой в ​​виде приложения Create React.

Create-React-App — это инструмент командной строки от Facebook, который позволяет вам создать новый проект React и использовать предварительно настроенную сборку веб-пакета для разработки. Он давно стал неотъемлемой частью экосистемы React, которая устраняет необходимость поддерживать сложные конвейеры сборки в вашем проекте, позволяя вам сосредоточиться на самом приложении.

Как работает приложение Create React?

Create React App — это автономный инструмент, который можно запускать с помощью npm или Yarn.

Вы можете сгенерировать и запустить новый проект с помощью npm с помощью пары команд:

npx create-react-app new-app
cd new-app
npm start

Если вы предпочитаете Yarn, вы можете сделать это так:

yarn create react-app new-app
cd new app
yarn start

Create React App настроит следующую структуру проекта:

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

Он также добавит react-scriptsв ваш проект пакет, который будет содержать все сценарии конфигурации и сборки. Другими словами, ваш проект зависит от него react-scripts, а не от него create-react-appсамого. После завершения установки вы можете запустить сервер разработки и начать работу над своим проектом.

Основные характеристики

Локальный сервер разработки

Первое, что вам понадобится, это локальная среда разработки. Запуск npm startзапустит сервер разработки веб-пакетов со наблюдателем, который автоматически перезагрузит приложение, как только вы что-то измените. Начиная с версии 4, приложение Create React поддерживает быстрое обновление React в качестве альтернативы горячей замене модуля. Как и его предшественник, это позволяет нам быстро обновлять части приложения после внесения изменений в кодовую базу, но также имеет некоторые новые функции. Fast Reload попытается перезагрузить только измененную часть приложения. Сохранит состояние функциональных компонентов и хуков и автоматически перезагрузит приложение после исправления синтаксической ошибки.

Вы также можете обслуживать свое приложение через HTTPS, установив для HTTPSпеременной значение trueперед запуском сервера.

Приложение будет создано со многими встроенными функциями.

ES6 и ES7

Приложение поставляется с собственной предустановкой Babel — babel-preset-react-app — для поддержки набора функций ES6 и ES7. Некоторые из поддерживаемых функций:

• Асинхронный / ожидание
• Свойства объекта Rest / Spread
• Динамический импорт ()
• Поля классов и статические свойства

Обратите внимание, что приложение Create React не предоставляет никаких полифилов для функций времени выполнения, поэтому, если вам нужно что-то из них, вам нужно включить их самостоятельно.

Импорт активов

Вы можете импортировать файлы CSS, изображения или шрифты из модулей JavaScript, которые позволяют объединять файлы, используемые в вашем приложении. После сборки приложения Create React App скопирует эти файлы в папку сборки. Вот пример импорта изображения:

import image from './image.png';

console.log(image); // image will contain the public URL of the image

Вы также можете использовать эту функцию в CSS:

.image {
  background-image: url(./image.png);
}

Styling

Как упоминалось в предыдущем разделе, приложение Create React позволяет добавлять стили, просто импортируя необходимые файлы CSS. При сборке приложения все файлы CSS будут объединены в один пакет и добавлены в папку сборки.

Приложение Create React также поддерживает модули CSS. По соглашению файлы с именем as *.module.cssрассматриваются как модули CSS. Этот метод позволяет нам избежать конфликтов селекторов CSS, поскольку приложение Create React создаст уникальные селекторы классов в результирующих файлах CSS.

В качестве альтернативы, если вы предпочитаете использовать препроцессоры CSS, вы можете импортировать файлы Sass.scss. Однако вам потребуется установить node-sassпакет отдельно.

Кроме того, приложение Create React позволяет добавлять сбросы CSS, добавляя их в @import-normalize;любом месте ваших файлов CSS. Стили также проходят постобработку, которая минимизирует их, добавляет префиксы поставщиков с помощью Autoprefixer и полифицирует неподдерживаемые функции, такие как allсвойство, настраиваемые свойства и диапазоны медиа-запросов.

Запуск модульных тестов

При выполнении npm testбудут запускаться тесты с использованием Jest и запускаться наблюдатель, чтобы повторно запускать их всякий раз, когда вы что-то меняете:

PASS  src/App.test.js
  ✓ renders learn react link (19 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.995 s
Ran all test suites.

Watch Usage
 › Press f to run only failed tests.
 › Press o to only run tests related to changed files.
 › Press q to quit watch mode.
 › Press p to filter by a filename regex pattern.
 › Press t to filter by a test name regex pattern.
 › Press Enter to trigger a test run.

Jest — это средство запуска тестов, также разработанное Facebook в качестве альтернативы Mocha или Karma. Он запускает тесты в среде Node, а не в реальном браузере, но предоставляет некоторые специфичные для браузера глобальные переменные с помощью jsdom.

Jest также интегрирован с вашей системой контроля версий и по умолчанию будет запускать тесты только для файлов, измененных с момента вашего последнего коммита. Подробнее об этом см. » Как тестировать компоненты React с помощью Jest «.

ESLint

Во время разработки ваш код также будет запускаться через ESLint, статический анализатор кода, который поможет вам выявлять ошибки во время разработки.

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

Когда у вас, наконец, есть что-то для развертывания, вы можете создать производственный пакет, используя npm run build. Это сгенерирует оптимизированную сборку вашего приложения, готовую к развертыванию в вашей среде. Сгенерированные артефакты будут помещены в папку сборки:

build
├── asset-manifest.json
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
├── robots.txt
└── static
    ├── css
    │   ├── main.ab7136cd.chunk.css
    │   └── main.ab7136cd.chunk.css.map
    ├── js
    │   ├── 2.8daf1b57.chunk.js
    │   ├── 2.8daf1b57.chunk.js.LICENSE.txt
    │   ├── 2.8daf1b57.chunk.js.map
    │   ├── 3.d75458f9.chunk.js
    │   ├── 3.d75458f9.chunk.js.map
    │   ├── main.1239da4e.chunk.js
    │   ├── main.1239da4e.chunk.js.map
    │   ├── runtime-main.fb72bfda.js
    │   └── runtime-main.fb72bfda.js.map
    └── media
        └── logo.103b5fa1.svg

Развертывание

Поскольку сборка вашего приложения Create React App состоит только из статических файлов, их можно развернуть в удаленной среде разными способами. Вы можете использовать сервер Node.js. Если вы работаете в среде Node.js, или обслуживать приложение с помощью другого веб-сервера, например NGINX.

В разделе развертывания официальной документации представлен обзор того, как развернуть приложение в Azure, AWS, Heroku, Netlify и других популярных средах хостинга.

Особенности разработки

Переменные среды

Вы можете использовать переменные среды Node для вставки значений в ваш код во время сборки. Create React App автоматически найдет любые переменные среды, начиная с, REACT_APP_и сделает их доступными в глобальном process.env..envДля удобства эти переменные могут быть в файле:

REACT_APP_BACKEND=http://my-api.com
REACT_APP_BACKEND_USER=root

Затем вы можете ссылаться на них в своем коде:

fetch({process.env.REACT_APP_SECRET_CODE}/endpoint)

Прокси на серверной части

Если ваше приложение будет работать с удаленной серверной частью, вам может потребоваться прокси-запросы во время локальной разработки, чтобы обойти CORS. Это можно настроить, добавив в package.jsonфайл поле прокси :

"proxy": "http://localhost:4000",

Таким образом, сервер будет перенаправлять любой запрос, не указывающий на статический файл, по заданному адресу.

Разделение кода

Приложение Create React поддерживает разделение кода с помощью директивы dynamic import (). Вместо того, чтобы возвращать значения, экспортированные модулем, он вместо этого возвращает Promise, который преобразуется в эти значения. В результате модули, импортированные таким образом, не будут включены в окончательный комплект. А будут встроены в отдельные файлы. Это позволяет уменьшить размер окончательного пакета и загружать контент по запросу.

Поддержка TypeScript

Вы можете включить TypeScript, чтобы получить преимущества статического анализа типов при создании нового проекта. Это можно сделать, используя другой шаблон не по умолчанию для создания проекта:

npx create-react-app my-app --template typescript

Вы также можете добавить поддержку TypeScript в существующий проект, как описано в документации.

Прогрессивные веб-приложения

Точно так же вы можете добавить поддержку прогрессивных веб-приложений. Вы можете использовать сервис-воркеров, добавив src/service-worker.jsфайл. Начиная с версии 4, это будет внедрено в приложение с помощью библиотеки Workbox.

Чтобы включить сервис-воркеров в новый проект, их нужно сгенерировать из настраиваемого шаблона:

npx create-react-app my-app --template cra-template-pwa

# or with TypeScript support
npx create-react-app my-app --template cra-template-pwa-typescript

Web Vitals

Create React App позволяет вам измерять производительность и скорость отклика вашего приложения. Это делается путем отслеживания показателей, определенных веб-Vitals и измеряемых с помощью библиотеки web-vitals. Метрики включают в себя самую крупную Contentful Paint, которая измеряет производительность загрузки, задержку первого ввода и совокупный сдвиг макета для скорости отклика.

Приложение Create React предоставляет удобную функцию для отслеживания всех доступных метрик:

// index.js

reportWebVitals(console.log);

Opting Out

Если в какой-то момент вы почувствуете, что предоставленных функций больше недостаточно для вашего проекта. Вы всегда можете отказаться от использования react-scripts, запустив npm run eject. Это скопирует конфигурацию веб-пакета и сценарии сборки из react-scriptsв ваш проект и удалит зависимость. После этого вы можете изменить конфигурацию по своему усмотрению.

В качестве альтернативы вы также можете разветвить react-scriptsи поддерживать свою ветку с необходимыми функциями. Это может быть проще, если вам нужно поддерживать много проектов.

В заключение

Если вы хотите начать новый проект React, не смотрите дальше. Create React App позволит вам быстро начать работу над своим приложением вместо того, чтобы писать еще одну конфигурацию веб-пакета. Это также упрощает обновление инструментов сборки с помощью одной команды ( npm install react-scripts@latest) — что обычно является сложной и трудоемкой задачей.

Приложение Create React стало неотъемлемой частью экосистемы React. Независимо от того, используете ли вы его для создания быстрого прототипа или для создания следующего крупного проекта, он сэкономит вам много часов рабочего времени.