Начать новый проект React не так просто. Вместо того, чтобы мгновенно погружаться в код и воплощать свое приложение в жизнь, вам придется потратить время на настройку правильных инструментов сборки для настройки локальной среды разработки, модульного тестирования и производственной сборки. Но есть проекты, в которых все, что вам нужно, — это простая настройка, позволяющая быстро и с минимальными усилиями запустить процесс, например Create React App.
Create-React-App — это инструмент CLI от Facebook, который позволяет вам генерировать новый проект React и использовать предварительно настроенную сборку Webpack для разработки. Используя его, вам больше никогда не придется просматривать конфигурацию Webpack.
Как работает приложение React?
Create React App — это автономный инструмент, который должен быть установлен глобально через npm , и вызывается каждый раз, когда вам нужно создать новый проект:
npm install -g create-react-app Чтобы создать новый проект, запустите:
create-react-app react-app
Приложение Create React создаст следующую структуру проекта:
. ├── .gitignore ├── README.md ├── package.json ├── node_modules ├── public │ ├── favicon.ico │ └── index.html └── src ├── App.css ├── App.js ├── App.test.js ├── index.css ├── index.js └── logo.svg
Он также добавит в ваш проект пакет react-scripts который будет содержать все скрипты конфигурации и сборки. Другими словами, ваш проект зависит от react-scripts , а не от самого create-react-app . После завершения установки вы можете начать работу над проектом.
Запуск локального сервера разработки
Первое, что вам нужно, это локальная среда разработки. Запуск npm start сервер разработки Webpack с наблюдателем, который автоматически перезагрузит приложение, когда вы что-то измените. Однако горячая перезагрузка поддерживается только для стилей.
Приложение будет создано с рядом встроенных функций.
ES6 и ES7
Приложение поставляется с собственным предустановленным приложением Babel, babel-preset-Reaction-app , для поддержки набора функций ES6 и ES7. Он даже поддерживает некоторые новые функции, такие как async / await и операторы импорта / экспорта. Однако некоторые функции, такие как декораторы, были намеренно исключены.
Импорт активов
Вы также можете импортировать CSS-файлы из ваших JS-модулей, которые позволяют связывать стили, относящиеся только к тем модулям, которые вы поставляете. То же самое можно сделать для изображений и шрифтов.
ESLint
Во время разработки ваш код также будет запускаться через ESLint , статический анализатор кода, который поможет вам обнаруживать ошибки во время разработки.
Переменные среды
Вы можете использовать переменные среды Node для вставки значений в ваш код во время сборки. React-скрипты будут автоматически искать любые переменные окружения, начиная с REACT_APP_ и делать их доступными в глобальном process.env . Эти переменные могут быть в файле .env для удобства:
REACT_APP_BACKEND=http://my-api.com REACT_APP_BACKEND_USER=root
Затем вы можете ссылаться на них в своем коде:
fetch({process.env.REACT_APP_SECRET_CODE}/endpoint)
Проксирование к бэкэнду
Если ваше приложение будет работать с удаленным бэкэндом, вам может понадобиться прокси-запросы во время локальной разработки, чтобы обойти CORS. Это можно настроить, добавив поле прокси в ваш файл package.json :
"proxy": "http://localhost:4000",
Таким образом, сервер будет пересылать любой запрос, который не указывает на статический файл с заданным адресом.
Запуск юнит-тестов
Выполнение npm test запустит тесты с использованием Jest и запустит наблюдателя, чтобы повторно запускать их всякий раз, когда вы что-то меняете
PASS src/App.test.js ✓ renders without crashing (7ms) Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 0.123s, estimated 1s Ran all test suites. Watch Usage › Press p to filter by a filename regex pattern. › Press q to quit watch mode. › Press Enter to trigger a test run.
Jest — это тестер, также разработанный Facebook как альтернатива Mocha или Karma. Он запускает тесты в среде Node вместо реального браузера, но предоставляет некоторые глобальные переменные для браузера, использующие jsdom .
Jest также поставляется с вашей VCS и по умолчанию будет запускать тесты только для файлов, измененных с момента вашей последней фиксации. Подробнее об этом см. « Как протестировать компоненты React с помощью Jest ».
Создание производственного комплекта
Когда вам, наконец, есть что развернуть, вы можете создать npm run build комплект, используя npm run build . Это создаст оптимизированную сборку вашего приложения, готовую к развертыванию в вашей среде. Сгенерированные артефакты будут помещены в папку сборки:
. ├── asset-manifest.json ├── favicon.ico ├── index.html └── static ├── css │ ├── main.9a0fe4f1.css │ └── main.9a0fe4f1.css.map ├── js │ ├── main.3b7bfee7.js │ └── main.3b7bfee7.js.map └── media └── logo.5d5d9eef.svg
Код JavaScript и CSS будет минимизирован, а CSS будет дополнительно запускаться через Autoprefixer для обеспечения лучшей кросс-браузерной совместимости.
развертывание
React-scripts предоставляет способ развертывания вашего приложения на страницах GitHub, просто добавив свойство домашней страницы в package.json . Также есть отдельный сборочный пакет Heroku .
Не принимая участия
Если в какой-то момент вы чувствуете, что предоставленных функций больше не достаточно для вашего проекта, вы всегда можете отказаться от использования ответных сценариев, выполнив npm run eject . Это скопирует конфигурацию Webpack и создаст скрипты из react-scripts в ваш проект и удалит зависимость. После этого вы можете изменять конфигурацию по своему усмотрению.
В заключение
Если вы хотите начать новый проект React, не смотрите дальше. Create React App позволит вам быстро начать работу над вашим приложением вместо того, чтобы писать еще одну конфигурацию Webpack.
Вы уже попробовали? Ваше мнение? Дай мне знать в комментариях!
Этот пост был рецензирован Джоан Инь . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!