Налаштуйте фронтенд на React за допомогою Node, npm та Vite

Перехід від інструментарію Python до портфоліо на React часто починається з простого запитання: які інструменти замінюють venv, pip та requirements.txt?

Python ізолює пакети у віртуальному середовищі та фіксує їх у файлі вимог. Фронтенд на React використовує іншу структуру. Node.js забезпечує середовище виконання, npm встановлює пакети, а Vite створює швидкий локальний додаток. Наведені нижче кроки дозволяють створити середовище React з Vite у порожній папці.

1. Встановіть Node.js

Інструментарій React вимагає Node.js, який постачається разом із npm (Node Package Manager). Після встановлення Node з офіційного дистрибутива для вашої ОС перевірте наявність обох бінарних файлів у терміналі:

node --version
npm --version

npm виконує функцію, схожу на pip: він завантажує бібліотеки та фіксує їхні версії для проекту. Для цього процесу не потрібно створювати окреме віртуальне середовище у стилі Python — Node та локальна структура node_modules забезпечують ізоляцію.

2. Створення репозиторію на GitHub

Створіть новий репозиторій на GitHub для сайту. Иніціалізуйте його файлом README.md та файлом .gitignore, придатними для роботи з фронт-ендом. Як мінімум, у файлі ігнорування мають бути вказані:

node_modules/
dist/
.env
.env.*

Ніколи не комітуйте файл node_modules. Ці пакети є локальними артефактами. Будь-хто, хто клонує репозиторій, може створити їх заново за допомогою команди npm install на основі файлу package.json. Також треба уникати зберігання конфіденційної інформації в Git: файли .env та .env.* мають бути в списку ігнорування, щоб ключі API ніколи не потрапляли до історії змін.

3. Клонування чи запуск проекту локально

Клонуйте репозиторій або створіть папку на диску, потім відкрийте її у VS Code (або іншому редакторі). Робота всередині цієї директорії забезпечує те, щоб скелет Vite та подальші команди npm залишалися у правильному місці.

4. Ініціалізація React з Vite

Vite надає сучасним фронт-енд додаткам швидкий старт та реактивний сервер для розробки. З кореня проекту виконайте:

npm create vite@latest .

Кінцева крапка . вказує інструменту створення скелета на розміщення файлів у поточній директорії, а не на створення вкладеної папки. Коли з’являться запитання, оберіть:

Framework: React
Variant: JavaScript

Деякі версії також запитують про інструмент для перевірки синтаксису. Його використання допомагає виявити проблеми з синтаксисом та стилем на ранніх етапах; правила можна доопрацювати пізніше.

5. Встановлення залежностей

Якщо інструмент створення скелета не встановив пакети автоматично, виконайте:

npm install

npm читає файл package.json, створює каталог node_modules та встановлює всі зазначені залежності. Цей каталог є великим та специфічним для конкретної машини, тому його не включають до контролю версій.

6. Запустіть сервер розробки

Запустіть локальний сервер за допомогою:

npm run dev

Vite виводить локальну URL, зазвичай:

http://localhost:5173/

Відкрийте цю адресу у браузері. Під час розробки редагування та збереження коду React мають оновлювати сторінку через функцію гарячого оновлення Vite, щоб ви бачили зміни інтерфейсу без необхідності щоразу повного ручного завантаження.

Python проти React: різниця, яка мені допомогла

Схема, яка розвіює плутанину, виглядає так. Типовий проект на Python працює наступним чином:

Python → venv → pip → requirements.txt

Проект на React разом із Vite працює так:

Node.js → npm → package.json → node_modules

Портфоліо на React не потребує Python venv. Node.js є середовищем виконання, npm — інсталятором, package.json — описом компонентів проекту, а node_modules містить встановлені пакети. Збереження цих функцій окремо допомагає уникнути змішування практик Python із фронтендом на JavaScript.

Заключні міркування

Якщо ви раніше працювали з Python чи наукою даних, інфраструктура, орієнтована на Node, може здатися не зовсім зрозумілою, поки не стане ясною роль кожного інструменту. Як тільки Node.js, npm, React та Vite будуть належним чином налаштовані, шлях до створення проекту буде коротким:

Create repository
        ↓
Open project in VS Code
        ↓
Initialize React + Vite
        ↓
Install dependencies
        ↓
npm run dev
        ↓
Build!

Після налаштування цього ланцюга середовище фронтенду на React готове до роботи над портфоліо та до використання додаткових бібліотек через npm.