1.3 Создать новое React приложение


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


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

  • Масштабирование множества файлов и компонентов.

  • Использование сторонних библиотек из npm.

  • Раннее обнаружение распространенных ошибок.

  • Отслеживаемое редактирование CSS и JS в режиме разработки.

  • Оптимизация кода для релиза.

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



1.3.1 Возможно вам не нужен набор инструментов


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

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



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


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


1.3.2.1 Create React App


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

Оно настраивает вашу среду разработки, так что вы можете использовать новейшие функции JavaScript, обеспечивает удобство разработки и оптимизирует ваше приложение для продакшен. Вам потребуются Node >= 6 и npm >= 5.2. Чтобы создать проект, запустите:


Код
    
  npx create-react-app my-app
  cd my-app
  npm start



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

Когда ваше приложение готово для разворачивания на продакшене, нужно запустить команду npm run build. Она создаст оптимизированный билд вашего приложения в папке build. Больше информации по Create React App можно получить по ссылкам Read Me и User Guide.


1.3.2.2 Next.js


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

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


1.3.2.3 Gatsby


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

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


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


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



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


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

  • Менеджера пакетов, такого как Yarn или npm. Он позволяет вам воспользоваться преимуществом обширной экосистемы сторонних пакетов, легко устанавливать и обновлять их.

  • Сборщика, такого как webpack или Parcel. Он позволяет вам писать модульный код и объединять его в небольшие пакеты для оптимизации времени загрузки.

  • Компилятора, такого как Babel. Он позволяет писать современный JS код, который также будет работать и в старых браузерах.

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

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