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

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

Калі гэты ланцуг будзе створаны, среда фронтэнда на React будзе гатовая для роботы над портфэлам і додавання новых бібліятэкаў через npm.