Это девятая статья в серии статей, посвященных вводным концепциям React.

В предыдущей статье мы узнали, как настроить нашу среду разработки с помощью таких инструментов, как Webpack и Babel. Хотя эти инструменты значительно улучшают наш опыт разработчиков, их установка и настройка может быть неприятной для новичка и отнимать много времени как для опытных разработчиков. Хотя важно правильно настроить нашу среду разработки перед созданием наших приложений React, это может сильно отвлекать при обучении созданию приложений React, а также отнимает много времени, если все, что мы хотим сделать, - это быстро создать макет простого Приложение React для прототипа.

Вот почему команда Facebook создала инструмент командной строки под названием Create React App (CRA), который представляет собой мета-пакет, который позволяет нам создавать новые приложения React, которые поставляются с такими инструментами, как Webpack и Babel, которые уже предварительно настроены и скрыты от нас, чтобы упростить нам создание и начало работы над новыми проектами React.

ПРИМЕЧАНИЕ. Несмотря на то, что CRA создает для нас предварительно настроенный проект React, по-прежнему очень важно изучить и понять, как настраивать наши приложения. Это позволит нам понять, что происходит за кулисами наших приложений React, и мы сможем лучше исправить любые ошибки, связанные с конфигурацией, в наших приложениях. Мы уже узнали, как настроить простое приложение React с помощью Webpack и Babel аналогично тому, как работает CRA. Однако, как и Дэн Абрамов в своем выступлении Плавильный котел JavaScript, Конфигурация не должна мешать началу работы.

CRA позволяет нам создать современное веб-приложение, запустив одну команду, что позволяет нам сосредоточиться на коде, а не на создании таких инструментов, как Webpack и Babel. Таким образом, он отлично подходит для изучения React в удобной и многофункциональной среде разработки.

Чтобы создать новый проект React с именем my-app с использованием CRA, мы запускаем эту команду в терминале:

npx create-react-app my-app

Npx

В предыдущих статьях мы узнали о npm. Мы узнали, что если пакет, который мы загружаем из npm, будет использоваться в качестве инструмента командной строки, например create-react-app, то мы должны установить его глобально, используя флаг -g (npm install -g create-react-app). После этого установленный пакет можно использовать как create-react-app my-app.

Однако, поскольку мы обычно используем create-react-app один раз в синюю луну, к тому времени, когда мы запустим его снова, он уже будет сильно устаревшим, поэтому нам придется запускать установку / обновление каждый раз, когда мы хотим его использовать. . Чтобы помочь решить эту проблему, npm v5.2 и выше вместе с ним поставляются с новым двоичным файлом под названием npx. npx позволяет нам выполнять create-react-app как разовую команду, не устанавливая ее глобально на нашем компьютере. Потрясающие!

После завершения установки мы можем переключиться в папку нашего проекта и запустить приложение с помощью команды npm start:

cd my-app
npm start

Затем мы открываем http: // localhost: 3000 / в браузере, чтобы увидеть наше приложение.

Когда мы готовы к развертыванию в производственной среде, мы создаем минифицированный пакет с npm run build.

Структура папки

CRA создает начальную структуру папок, показанную ниже:

my-app
├── README.md 
├── node_modules 
├── package.json 
├── .gitignore 
├── public 
│   ├── favicon.ico 
│   ├── index.html 
│   └── manifest.json 
└── src 
    ├── App.css 
    ├── App.js 
    ├── App.test.js 
    ├── index.css 
    ├── index.js 
    ├── logo.svg 
    └── serviceWorker.js

Мы можем удалить и переименовать все файлы, кроме public/index.html (шаблон страницы) и src/index.js (точка входа JavaScript), которые должны существовать с точными именами файлов. Мы разрабатываем наше приложение React, добавляя новые файлы JS и CSS в папку src. Мы также можем создавать подкаталоги внутри папки src.

Обратите внимание, насколько эта структура похожа на структуру папок, к которой мы пришли в нашей предыдущей статье. Помимо нескольких дополнительных файлов (public/favicon.ico, public/manifest.json, src/App.test.js и src/serviceWorker.js), основное различие между этими двумя структурами папок заключается в том, что в структуре папок CRA файл webpack.config.js скрыт от нас, и у нас есть только те файлы, которые нам нужны. создать наше приложение.

Так где же конфигурация Webpack? Если мы посмотрим на package.json файл нашего my-app проекта, мы заметим одну зависимость разработчика react-scripts. react-scripts - это пакет npm, специально предназначенный для использования с create-react-app, и именно здесь указываются зависимости, такие как Webpack и Babel, и определяются файлы конфигурации для Webpack и Babel. Он также содержит дополнительную конфигурацию для еще более расширенного взаимодействия с разработчиками.

Теперь мы можем продолжить и начать создавать наши приложения React!

Подробнее об использовании Create React App см. В официальной документации.

Это девятая часть серии статей, посвященных вводным концепциям React.