Это девятая статья в серии статей, посвященных вводным концепциям 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.
- Часть 1: Основы
- Часть 2: Состояние и жизненный цикл
- Часть 3: Обработка событий
- Часть 4: Работа с формами
- Часть 5: Работа с удаленными данными
- Часть 6: Среда разработки
- Часть 7: Вавилон и Webpack
- Часть 8: За пределами JavaScript
- Часть 9: Создать приложение React