Використання 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 і зберігаєте зміни, вони автоматично відобразяться у браузері.
У випадку, якщо в коді будуть помилки, ви також побачите попередження в браузері.
Стиль коду та тестування
Якщо вам знайоме написання тестів для коду, у вашому розпорядженні – 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. Я впевнений вам це сподобається!