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

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

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

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

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

npm create vite@latest

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

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

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

cd project-name

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

npm install

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

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

npm run dev

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

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

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

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

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

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

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