Russian (Pусский) translation by Anton L (you can also view the original English article)
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.
После того как работа инструмента командной строки завершится, будет показано сообщение с описанием, где было создано приложение и списком доступных команд.
Далее вам следует перейти в директорию приложения выполнив команду cd tuts-plus-react-app.
Запускаем приложение
Вы можете запустить приложение локально выполнив npm start, после того как оно будет запущено, в браузере автоматически откроется http://localhost:3000/, где вы можете увидеть созданное приложение.
Приложение использует webpack для запуска локального сервера. Вам доступна функция watch, когда вы редактируете код React и сохраняете изменения, они автоматически отобразятся в браузере.
В том случае, если в коде будут ошибки, вы также увидите предупреждения в браузере.
Стиль кода и тестирование
В вашем распоряжении имеется 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. Я уверен вам это понравится!
