Настройка фронтенда на React с использованием Node, npm и Vite

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

Python изолирует пакеты в виртуальной среде и фиксирует их список в файле requirements. Фронтенд на 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, подходящими для работы с фронт-эндом. В файле ignore обязательно должны быть указаны:

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.js, может показаться неясной, пока не станет очевидна роль каждого инструмента. Как только Node.js, npm, React и Vite будут на своих местах, путь к созданию портфолио становится коротким:

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

После настройки этой цепочки среда фронтенда на React готова к работе над портфолио и к добавлению дополнительных библиотек через npm.