Крок 6: Ініціалізація проєкту

Для налаштування проєкту використовуйте термінал. Відкрийте термінал у вашому редакторі коду (якщо він ще не відкритий), виконайте наступну команду та натисніть Enter:

npm create vite@latest .

Коли з'явиться запит, виберіть React як фреймворк за допомогою стрілок на клавіатурі:

Далі оберіть JavaScript або TypeScript залежно від ваших уподобань:

Після завершення налаштування Vite запропонує встановити залежності. Виконайте наступну команду:

npm install

Після завершення встановлення запустіть сервер розробки за допомогою команди:

npm run dev

Після виконання цих команд з’явиться локальна адреса для розробки — зазвичай: http://localhost:5173/. Відкрийте це посилання у браузері, щоб переглянути застосунок у реальному часі.

Крок 7: Початок налаштування

Проєкт налаштовано, тепер можна починати його налаштовувати:

• Основна робота відбуватиметься у папці src;
• Ви знайдете стандартні файли, такі як App.jsx та main.jsx, які можна змінювати або замінювати відповідно до потреб вашого проєкту;
• Якщо ви раніше працювали у CodeSandbox, відтворіть знайому структуру: переконайтеся, що у вас є main.jsx (аналог index.js у Vite) як точка входу, а основну логіку застосунку розміщуйте у App.jsx;
• Створюйте додаткові папки для організації компонентів, стилів та ресурсів за потреби.