7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. React

Использование Create React App

Read Time: 3 mins

Russian (Pусский) translation by Anton L (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

React стал популярным фреймворком, как для разработки на стороне клиента, так и сервера. Изначально react имел высокий порог вхождения, когда дело касалось инструментов сборки, помимо этого наблюдалось некоторое разочарование в JavaScript со стороны сообщества. create-react-app как раз и был создан, чтобы изменить положение вещей.

Начнём

Для начала убедитесь, что у вас установлен Node. Вам понадобится по крайней мере Node 4 версии, но рекомендуется 6 версия для быстрой загрузки пакетов и оптимизации дискового пространства. Можно использовать nvm для переключения между версиями Node.

После того как установите Node, откройте командную строку и поставьте глобально create-react-app, тем самым вы будете иметь возможность запустить команду где угодно на вашей системе.

npm install -g create-react-app

Как создать первое приложение

Сперва откройте командную строку и создайте или перейдите в директорию где вы планируете начать процесс разработки. Далее мы создадим приложение запустив create-react-app tuts-plus-react-app. Будет запущен инструмент командной строки и создано приложение tuts-plus-react-app.

The command-lineThe command-lineThe command-line

После того как работа инструмента командной строки завершится, будет показано сообщение с описанием, где было создано приложение и списком доступных команд.

The available toolsThe available toolsThe available tools

Далее вам следует перейти в директорию приложения выполнив команду cd tuts-plus-react-app.

Запускаем приложение

Вы можете запустить приложение локально выполнив npm start, после того как оно будет запущено, в браузере автоматически откроется http://localhost:3000/, где вы можете увидеть созданное приложение.

The basic React homepageThe basic React homepageThe basic React homepage

Приложение использует webpack для запуска локального сервера. Вам доступна функция watch, когда вы редактируете код React и сохраняете изменения, они автоматически отобразятся в браузере.

When you run the watch featureWhen you run the watch featureWhen you run the watch feature

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

An example of failing to compileAn example of failing to compileAn example of failing to compile

Стиль кода и тестирование

В вашем распоряжении имеется ESLint, он будет следить за тем, что приложение отвечает популярным стилям кода. Следовательно вы будете знать, что код стабильный, что особенно важно когда над проектом работают несколько человек. Я рекомендую использовать данную функцию, если вы начинающий React разработчик, изучите правильные React и JavaScript стили написания кода.

Если вам знакомо написание тестов для кода, в вашем распоряжении - Jest. Jest фреймворк для тестирования, который был создан и поддерживается Facebook, создателями React. Для запуска тестов, выполните npm test в командной строке. Запустятся тесты, после чего запустится watcher, для выполнения тестов, в то время, как ваш конечный код изменится. Можно добавить уже существующий файл с тестами в src/App.test.js.

Развёртывание приложение на сервере

Когда вы закончите разработку, время подготовить приложение к переносу на сервер. Всё что вам нужно сделать, так это выполнить npm run build в директории приложения. Данная команда запустит Babel для транспиляции React кода в код, который способен понимать браузер. Помимо этого, код будет минифицирован для лучшей производительности.

Пользовательский мануал

Если вы планируете и дальше использовать create-react-app, я предлагаю вам потратить время на изучение пользовательского мануала. В нём содержится огромное количество полезной информации о темах относящихся к представлению (view) приложения, к примеру добавление таблиц CSS стилей, импорт компонентов, импорт изображений и шрифтов и так далее. Здесь также содержится информация о популярных практиках веб-разработки, таких как использование HTTPS, соединение с Node бекендом, создание прогрессивных веб-приложений и много чего ещё.

Ко всему прочему - документация касательно тестирования и развёртывания приложения.

Приятного хакинга

Надеюсь вы поняли насколько просто создать React приложение с create-react-app. Надеюсь это поможет понизить порог вхождения и начать работу с React. Я уверен вам это понравится!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.