Створыце фронтэнд на 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.