Створюємо новий React-додаток

Для більш комфортної роботи використовуйте вбудований набір інструментів.

Ця сторінка описує декілька популярних наборів інструментів для роботи з React, що допоможуть вам з такими задачами як:

• Масштабування великої кількості компонентів та файлів.
• Використання сторонніх бібліотек з npm.
• Раннє виявлення розповсюджених помилок.
• Миттєве відстеження змін у CSS та JS файлах.
• Оптимізація коду для продакшну.

Набори інструментів описані на цій сторінці не потребують додаткового налаштування для початку роботи з ними.

Чи додаткові інструменти необхідні для вас?

Якщо у вас не виникає проблем з вище описаними ситуаціями, або ж якщо ви ще не відчуваєте себе достатньо впевнено для використання інструменів для роботи з JavaScript, розгляньте можливість додання React за допомогою тегу <script> на HTML-сторінку, при необхідності за допомогою JSX.

Також це найпростіший спосіб додати бібліотеку React до існуючого сайту. Ви завжди можете розширити набір інструментів, за потребою!

Рекомендований набір інструментів

В першу чергу команда React рекомендує наступні рішення:

• Якщо ви вивчаєте React або створюєте новий односторінковий додаток, використовуйте Create React App.
• Якщо ви створюєте серверний сайт з допомогою Node.js, спробуйте Next.js.
• Якщо ви створюєте статичний контент-орієнтований вебсайт, спробуйте Gatsby.
• Якщо ви створюєте бібліотеку компонентів або інтегруєте існуючий код, спробуйте більш гнучкий набір інструментів.

Create React App

Create React App — це комфортний осередок для вивчення React, а також це найкращий шлях щоб почати будувати нові односторінкові додатки за допомогою React.

Він встановлює осередок для розробки таким чином, щоб ви могли використовувати найновіші можливості JavaScript, робить розробку комфортнішою, а також оптимізує ваш додаток для продакшну. Вам знадобиться Node версії >= 8.10 та npm версії >= 5.6 на вашому комп’ютері. Для створення проекту виконайте:

npx create-react-app my-app
cd my-app
npm start

Примітка

npx на першому рядку це не одрук. Це інструмент для запуску пакетів, що з’явився в npm версії 5.2+.

Create React App не опрацьовує бекенд логіку чи логіку баз данних, а лише надає команди для побудови фронтенду, тому ви можете використовувати його з будь-яким бекендом. Під капотом він використовує Babel та webpack, але вам не треба нічого знати про них.

Коли ваш додаток буде готовий для розгортання на продакшн, запустіть команду npm run build, це створить оптимізовану версію вашого додатку у папці build. Ви можете дізнатись більше про Create React App з його README та його керівництва користувача.

Next.js

Next.js це популярний й легкий фреймворк для статичних та серверних додатків, створений з допомогою React. Він включає готові рішення для стилізації та маршрутизації й передбачає, що ви використовуєте Node.js як серверний осередок.

Дізнайтесь більше про Next.js з його офіційного керівництва.

Gatsby

Gatsby це найкращий спосіб створити статичний вебсайт з React. Він дозволяє використовувати React-компоненти, але виводить попередньо відрендеренний HTML та CSS, щоб гарантувати найшвидший час завантаження.

Дізнайтесь більше про Gatsby з його офіційного керівництва та галереї стартових наборів.

Більш гнучкі набори інструментів

Наступні набори пропонують більше гнучкості та вибору. Ми рекомендуємо їх для більш досвідчених розробників:

• Neutrino поєднує у собі webpack з простотою його пресетів та включає в себе пресети для React-додатків й React-компонентів.
• Nx це інструментарій для повноцінної розробки в єдиному репозиторії, який має вбудовану підтримку для React, Next.js, Express, та інших.
• Parcel — швидкий бандлер веб-додатків з нульовою конфігурацією, який працює з React.
• Razzle — це фреймворк для серверного рендерингу, що не потребує ніякої конфігурації, але більш гнучкий ніж Next.js.

Створення набору інструментів з нуля

Набір інструментів JavaScript зазвичай включає:

• Менеджер пакетів, такий як Yarn або npm. Він дозволяє отримати переваги великої екосистеми сторонніх пакетів, а також легкість їх встановлення чи оновлення.
• Бандлер, такий як webpack або Parcel. Він надає можливість писати модульний код та збирати його у невеликі пакети з метою оптимізації часу завантаження.
• Компілятор, такий як Babel. Він дозволяє писати сучасний JavaScript код, що буде працювати у старіших браузерах.

Якщо ви віддаєте перевагу написанню власного набору JavaScript-інструментів з нуля, ознайомтесь з цим керівництвом, в якому відтворюється деяка функціональність Create React App.

Не забудьте переконатись, що ваш власний набір інструментів правильно налаштований для продакшну.