nmk

Практична робота №14 (2 години). Налаштування проекту за допомогою Vite.

Мета: Навчитися розгортати сучасне середовище для розробки React-додатку за допомогою збірка Vite та розуміти структуру створеного проекту.

План практичної роботи

Ініціалізація React-проекту за допомогою Vite.
Розбір структури файлів та папок (знайомство зі Scaffold).
Робота з пакетним менеджером (package.json) та встановлення залежностей.
Запуск локального сервера розробки (Dev Server) та огляд HMR.
Створення базового компонента “з чистого аркуша”.

Хід роботи

1. Ініціалізація проекту за допомогою Vite

Вимоги: На комп’ютері має бути встановлений Node.js (версія 18+). Студенти відкривають термінал у своїй робочій папці (де вони тримають проекти) та виконують інтерактивну команду:

npm create vite@latest

Project name: Ввести назву проекту, наприклад my-react-app.
Select a framework: За допомогою стрілок обрати React.
Select a variant: Обрати JavaScript (або JavaScript + SWC для додаткової швидкості компіляції).

2. Розбір структури файлів та папок

Студенти переходять у щойно створену папку та відкривають її в редакторі коду (VS Code):

cd my-react-app
code .

Викладач разом зі студентами аналізує призначення ключових файлів та вузлів:

index.html: Головна і єдина HTML-сторінка (Single Page Application). Знайти всередині <div id="root"></div> та підключений скрипт <script type="module" src="/src/main.jsx"></script>.
public/: Папка для статичних файлів, що не підлягають обробці (наприклад, vite.svg чи favicon.ico).
src/: Папка, де розміщується весь вихідний код проекту.
src/main.jsx: Точка входу в React. Тут він підключається до DOM.
src/App.jsx: Головний (кореневий) компонент додатку.
vite.config.js: Конфігурація збірка Vite (дозволяє налаштовувати порт, плагіни, аліаси).
.gitignore: Перелік файлів і папок, які повинен ігнорувати Git (включаючи node_modules).

3. Робота з `package.json` та встановлення залежностей

Студенти повинні звернути увагу, що папки node_modules (де лежить сам React) спочатку немає. Відомості про те, що потрібно скачати, знаходяться у package.json (в секціях dependencies та devDependencies). Для завантаження всіх потрібних бібліотек студенти виконують команду в терміналі:

npm install

(Або скорочено npm i). Почекати, доки Node Package Manager (NPM) завершить інсталяцію, та перевірити появу папки node_modules.

4. Запуск локального сервера розробки (Dev Server)

Щоб побачити створений додаток у дії, студенти запускають скрипт (описаний у package.json в розділі “scripts”):

npm run dev

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

5. Очищення компонента та HMR (Hot Module Replacement)

Завдання: розібрати і прибрати зайвий “шаблонний” код.

Відкрити файл src/App.jsx.
Видалити код лічильника (useState), імпорти SVG-логотипів та CSS-файлів (можна видалити App.css).
Залишити чисту функціональну компоненту App, що повертає простий заголовок:

function App() {
  return (
    <div>
      <h1>Привіт, React та Vite!</h1>
      <p>Мій перший проект налаштовано.</p>
    </div>
  );
}

export default App;

Зберегти файл (Ctrl+S / Cmd+S). Студенти повинні переконатися, що браузер миттєво оновив сторінку після збереження (без повного оновлення “колесиком” завантаження вкладки). Це демонстрація принципу HMR (Гаряча заміна модулів).

Результат (Вимоги до здачі):

До кінця заняття студент повинен продемонструвати викладачеві локально розгорнутий і працюючий на localhost проект, очищений від базового шаблону. Студент також повинен ініціалізувати цей проект як Git-репозиторій та зробити початковий коміт:

git init
git add .
git commit -m "Init Vite React project"

Контрольні запитання:

Що таке Vite і чому він вважається швидшим за старіші збірки (на кшталт Create React App чи Webpack)?
Яка різниця між dependencies та devDependencies у файлі package.json? Які модулі потрібні тільки під час розробки, а які підуть у фінальну (production) версію?
Чому папку node_modules ніколи не включають у Git-репозиторій?
Для чого потрібен файл package-lock.json?
Що таке HMR (Hot Module Replacement) механізм і яку перевагу він надає розробнику?
Яку роль відіграє div з атрибутом id="root", знайдений у файлі index.html?

nmk