nmk

Практична робота №1 (2 години)

Тема: Налаштування оточення та робота з Git На практиці студенти ініціалізують проєкти, налаштовують ESLint та Prettier, а також відпрацьовують флоу роботи з гілками в Git. Налаштування середовища розробки (Development Environment), ініціалізація React-проєкту та організація командної роботи через Git.

Мета: Навчитися створювати сучасні React-додатки за допомогою Vite, налаштовувати інструменти контролю якості коду (ESLint, Prettier) та відпрацювати базовий робочий процес (workflow) з гілками в Git

Необхідні інструменти: редактор коду (VS Code).

План заняття

  1. Перевірка та налаштування Node.js оточення.
  2. Ініціалізація проєкту за допомогою Vite (сучасна альтернатива CRA).
  3. Налаштування ESLint та Prettier для форматування коду.
  4. Робота з системою контролю версій Git: гілкування та злиття.

Хід виконання роботи

1. Підготовка середовища (Node.js & npm)

1.1 Перевірка версій:

Відкрийте термінал і виконайте команди:

node -v
npm -v

Якщо Node.js не встановлено, завантажте LTS версію з офіційного сайту.

1.2. Розуміння інструментарію:

Використовуємо npm (або yarn/pnpm) для завантаження бібліотек React та інструментів збірки, які виконуються у середовищі Node.js

2. Створення React-проєкту через Vite

Відмовляємося від застарілого Create React App на користь Vite, оскільки він забезпечує швидший запуск сервера завдяки Native ESM та ефективнішу збірку

2.1. Ініціалізація:

У терміналі перейдіть до папки, де зберігатимуться ваші проєкти, та виконайте:

npm create vite@latest my-react-app -- --template react

Назва my-react-app може бути довільною.

2.2 Запуск:

cd my-react-app npm install npm run dev

Vite не збирає весь бандл одразу, а дозволяє браузеру запитувати модулі по мірі необхідності, що робить старт миттєвим

3. Налаштування якості коду (ESLint + Prettier)

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

3.1. Встановлення Prettier:

Prettier автоматично форматує код, щоб уникнути суперечок про стиль (відступи, коми тощо).

npm install --save-dev prettier

3.2. Конфігурація Prettier:

Створіть файл .prettierrc у корені проєкту: { “semi”: true, “singleQuote”: true, “tabWidth”: 2, “trailingComma”: “es5” }

3.3 Інтеграція з ESLint:

Сучасні шаблони Vite вже містять базовий ESLint. Щоб уникнути конфліктів між ESLint (логіка) та Prettier (стиль), встановіть плагін:

npm install --save-dev eslint-config-prettier

Додайте “prettier” у масив extends у файлі eslint.config.js (або .eslintrc.cjs):

extends: [ // інші налаштування... 'prettier' ]

3.4. Перевірка:

Додайте скрипт у package.json:

"scripts": { "format": "prettier --write ." }

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

npm run format

4. Робота з Git та гілками (Branching Workflow)

Відпрацювання сценарію командної роботи, де зміни не вносяться напряму в main

4.1. Ініціалізація репозиторію:

git init git add .
git commit -m "Initial commit: Vite + React setup"

4.2. Створення нової гілки (Feature Branch):

Уявіть, що ви отримали завдання змінити заголовок на головній сторінці.

git checkout -b feature/header-update

4.3. Внесення змін:

Відкрийте src/App.jsx і змініть текст

4.4. Фіксація змін (Commit):

git status
git add .
git commit -m "Update homepage header text"

4.5. Злиття гілок (Merge):

Повертаємося до основної гілки та вливаємо зміни.

git checkout master (або main, перевірте головну гілку самостійно)
git merge feature/header-update

Після успішного злиття гілку feature/header-update можна видалити

git branch -d feature/header-update

Завдання для самостійного виконання

  1. Очистка проєкту: Видаліть зайві файли, згенеровані Vite (логотипи, дефолтні CSS стилі в App.css), залишивши чистий компонент App, що повертає Hello World.
  2. Створення компонента: Створіть у папці src нову папку components, а в ній файл Header.jsx.
  3. Експорт/Імпорт: Напишіть функціональний компонент у Header.jsx та імпортуйте його в App.jsx.
  4. Git-практика: Виконайте пункти 1-3 в окремій гілці feature/cleanup-and-header, зробіть коміт, і злийте зміни в main.

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

  1. Чому ми використовуємо Vite замість Create React App у 2025 році? (Див. лекцію: Native ESM, швидкість збірки).
  2. Яка різниця між dependencies та devDependencies у package.json?
  3. Для чого потрібен файл .gitignore і що туди обов’язково треба додати?
  4. У чому різниця між ESLint та Prettier? - deprecated question