Создание нового приложения React

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

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

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

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

Возможно, вам не нужна цепочка инструментов

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

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

Рекомендуемые цепочки инструментов

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

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

Create React App

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

Она настраивает вашу среду разработки, чтобы вы могли использовать самые последние возможности JavaScript, обеспечивает хороший пользовательский опыт разработчика и оптимизирует ваше приложение для производства. Вам понадобится Node >= 14.0.0 и npm >= 5.6 на вашем компьютере. Для создания проекта выполните:

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-компонентов.
• Nx — инструмент для разработки полнофункциональных монорепозиториев, с интегрированной поддержкой React, Next.js, Express и других.
• Parcel — быстрый, безконфигурационный инструмент сборки веб-приложений, который работает с React.
• Razzle — фреймворк серверной отрисовки, который не требует никакой конфигурации, но предлагает большую гибкость, чем Next.js.

Создание цепочки инструментов с нуля

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

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

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

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