Создаём новое React-приложение¶

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

На этой странице описано несколько популярных наборов инструментов React, которые помогают в таких задачах как:

Масштабирование до большого количества файлов и компонентов.
Использование сторонних библиотек из npm.
Раннее обнаружение распространённых ошибок.
Отражение изменений CSS и JS на лету в процессе разработки.
Оптимизация кода для продакшена.

Рекомендованные на этой странице инструменты не требуют дополнительной настройки для начала работы.

Возможно, вам не нужен дополнительный набор инструментов¶

Если у вас нет проблем, описанных выше, или пока не чувствуете себя уверенно, используя инструменты JavaScript, рассмотрите возможность добавления React в виде простого тега <script> на HTML странице, при необходимости с JSX.

Также это самый простой способ добавить React в существующий веб-сайт. Вы всегда можете расширить набор инструментов, если посчитаете это нужным.

Рекомендуемый набор инструментов¶

Команда React в первую очередь рекомендует следующие решения:

Если вы изучаете React или создаёте новое одностраничное приложение, используйте Create React App.
Если вы создаёте серверный сайт с Node.js, попробуйте Next.js.
Если вы создаёте статический контент-ориентированный сайт, попробуйте Gatsby.
Если вы создаёте библиотеку компонентов или интегрируетесь с существующей кодовой базой, попробуйте более гибкие наборы инструментов.

Create React App¶

Create React App – удобная среда для изучения React и лучший способ начать создание нового одностраничного приложения на React.

Инструмент настраивает среду для использования новейших возможностей JavaScript, оптимизирует приложение для продакшена и обеспечивает комфорт во время разработки. Вам понадобятся Node.js не ниже версии 6 и npm не ниже версии 5.2 на вашем компьютере. Для создания проекта выполните команды:

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

Примечание

npx в первой строке не является опечаткой. Это инструмент запуска пакетов, доступный в версиях npm 5.2 и выше.

Create React App не обрабатывает бэкенд логику или базы данных, он только предоставляет команды для сборки фронтенда, поэтому вы можете использовать его с любым бэкэндом. «Под капотом» используются Babel и webpack, но вам не нужно ничего знать о них.

Когда ваше приложение готово к развёртыванию в продакшене, запуск команды npm run build создаст оптимизированную сборку вашего приложения в папке build. Вы можете узнать больше о Create React App из его README и его пользовательского руководства.

Next.js¶

Next.js – это популярный легковесный фреймворк для статических и серверных приложений, использующих React. Он включает в себя готовые решения для стилизации и маршрутизации и предполагает, что вы используете Node.js в качестве серверной среды.

Узнайте больше о Next.js из его официального руководства.

Gatsby¶

Gatsby – лучший способ для создания статических сайтов с помощью React. Он позволяет использовать React-компоненты, но выводит предварительно отрендеренный HTML и CSS, чтобы гарантировать минимальное время загрузки.

Узнайте больше о Gatsby из его официального руководства и галереи стартовых комплектов.

Более гибкие наборы инструментов¶

Следующие наборы инструментов предлагают больше гибкости и выбора. Мы рекомендуем их более опытным разработчикам:

Neutrino сочетает в себе возможности webpack и простоту пресетов. Инструмент включает в себя пресеты для React-приложений и React-компонентов.
nwb хорошо подходит для публикации React-компонентов в npm. Его также можно использовать для создания React-приложений.
Parcel – быстрый упаковщик веб-приложений с нулевой конфигурацией, который работает с React.
Razzle – это фреймворк для серверного рендеринга, более гибкий чем Next.js, но не требующий обязательной настройки.

Создание набора инструментов с нуля¶

В набор инструментов для сборки JavaScript обычно входят:

Менеджер пакетов, такой как Yarn или npm. Он позволяет вам использовать обширную экосистему сторонних пакетов и легко устанавливать или обновлять их.
Сборщик, такой как webpack или Parcel. Он позволяет писать модульный код и объединять его в небольшие пакеты, чтобы оптимизировать время загрузки.
Компилятор, такой как Babel. Он позволяет писать современный код JavaScript, который будет работать даже в старых браузерах.

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

Не забудьте убедиться, что ваш набор инструментов правильно настроен для продакшена.