Інструменти

Для розробки React-застосунку потрібно мати такі інструменти:

• Node.js

• Webpack

• Babel

• React

• DevTools для браузера

Можна створити свою Webpack-збірку або взяти будь-яку готову на GitHub.

Рекомендована збірка React App​

Розробники для маленьких та середніх проєктів радять використовувати їх збірку.

Переваги Create React App:

• Бере на себе всю конфігурацію, дозволяючи зосередитись на написанні коду

• Містить всі необхідні інструменти: Webpack, Babel, ESLint тощо.

• Можна розширити функціонал додатковими пакетами з екосистеми React

• Має функцію вилучення, яка видаляє абстракцію і відкриває конфігурацію

Щоб створити теку із застосунком потрібно в терміналі виконати наступну команду. Де ім'я-папки-проекту - це назва вашого проєкту.

terminal

npx create-react-app ім'я-папки-проекту

Щоб створити застосунок у поточній теці потрібно замість імені проєкту поставити крапку.

terminal

npx create-react-app .

Так, наприклад ініціалізують проєкт в склонованому репозиторії.

npx — інструмент, призначений для стандартизації використання npm-пакетів. Постачається з npm версії 5.2.0 та вище. npm спрощує встановлення та керування залежностями, розміщеними в реєстрі, a npx спрощує використання CLI-утиліт (Command Line Interface) та інших файлів, що виконуються, без необхідності їх встановлення в систему або проєкт.

React DevTools​

Стандартні інструменти розробника у браузері не дають всіх можливостей для роботи з React. Зокрема, у них не можливо переглянути дерево компонентів, стани і пропси.

Цю проблему вирішує розширення для браузера: Devtools в Chrome Web Store

Профайлер корисний під час оптимізації застосунку. А всі його переваги можна прочитати в офіційній документації: Introducing the New React DevTools

Покликання:

Документація Create React App

Devtools в Chrome Web Store

Introducing the New React DevTools