Свайпніть щоб показати меню

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

У цьому розділі ви дізнаєтеся, як створити та запустити проєкт React за допомогою Vite — сучасного інструменту збірки, який є швидким, легким і часто використовується у продакшн-проєктах.

Створення проєкту React за допомогою Vite

Щоб створити новий проєкт React, відкрийте термінал і виконайте наступну команду:

npm create vite@latest

Вас попросять:

Ввести назву проєкту;
Вибрати фреймворк → оберіть React;
Вибрати варіант → оберіть JavaScript.

Після завершення налаштування перейдіть у папку проєкту:

cd project-name

Встановіть залежності проєкту:

npm install

Запуск сервера розробки

Щоб запустити сервер розробки React, виконайте команду:

npm run dev

Після виконання цієї команди:

Vite запускає локальний сервер розробки;
У терміналі з’явиться локальна URL-адреса (зазвичай http://localhost:5173);
Відкривши цю адресу у браузері, ви побачите свій React-додаток.

Будь-які зміни у коді автоматично оновлюються у браузері.

Розуміння того, що відбулося

Коли ви запустили сервер розробки:

Vite зібрав ваш React-код;
React відобразив застосунок у браузері;
Додаток перейшов у режим розробки, оптимізований для швидкого зворотного зв'язку.

Тепер у вас є справжній React-проєкт, що працює локально.

Поширені команди, які ви будете використовувати

npm install: встановлює залежності проєкту;
npm run dev: запускає сервер розробки;
Ctrl/Cmd + C: зупиняє запущений сервер.

Ці команди є частиною повсякденної роботи з React.

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 1. Розділ 23

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Налаштування та Запуск Проєкту React за Допомогою Vite