ЭУМК React

Создаём новое 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 не ниже версии 14.0.0 и npm не ниже версии 5.6 на вашем компьютере. Для создания проекта выполните команды:

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

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 из его официального руководства и галереи стартовых комплектов.