Ustvarjanje razvojnega okolja za React narediti enostavno

Prvi koraki pri razvoju spletnih strani z React lahko predstavljajo zanimiv izziv. Tukaj si, ker se želiš naučiti, kako hitro in učinkovito nastaviti svoje razvojno okolje ter začeti s svojim prvim projektom. Ta vodnik te bo popeljal skozi korake, potrebne za ustvarjanje React aplikacije z orodjem Vite za izdelavo.

Najpomembnejše ugotovitve

Za nastavitev razvojnega okolja za React potrebuješ Visual Studio Code, Node.js in NPM. S pravilnimi ukazi in orodji lahko v zelo kratkem času ustvariš svojo prvo React aplikacijo ter jo prikažeš v brskalniku.

Korak za korakom vodnik

Nastavitev razvojnega okolja

Preden začneš s pravim razvojem, se prepričaj, da imaš na voljo potrebna orodja. Najprej namesti Visual Studio Code. Gre za priljubljeno in brezplačno razvojno okolje podjetja Microsoft, ki je posebej primerno za razvoj v JavaScript. Da preneseš Visual Studio Code, obišči uradno spletno stran in sledi navodilom za prenos in namestitev.

Poleg Visual Studio Code potrebuješ tudi Node.js, ki zagotavlja okolje za izvajanje JavaScripta, ter NPM, upravitelja paketov. Node.js lahko preneseš s spletne strani Node.js. Klikni na stran za prenos in izberi različico LTS (dolgoročna podpora), da dobiš stabilno in preizkušeno različico.

Namestitev in preverjanje Node.js in NPM

Ko namestiš Node.js, preveri, ali je vse pravilno nameščeno. Odpreš terminal. To lahko storiš neposredno v Visual Studio Code tako, da greš na "Terminal" in nato na "Novi terminal". V terminal vpiši ukaz npm -v. Če se ne prikaže številka različice, morda obstaja težava z namestitvijo.

Prav tako se prepričaj, da Node.js pravilno deluje. To lahko narediš tako, da v terminal vpišeš ukaz node -v. Oba ukaza bi morala vrniti nameščeno različico NPM in Node.js.

Ustvarjanje novega projekta z Vite

Naslednji korak je ustvariti nov projekt. Za to uporabiš npm create vite, sledi ime svoje aplikacije. V tem primeru bomo delali z aplikacijo „Seznam opravil“. S tem sprožiš čarovnika, ki ti ponuja različne možnosti. Vprašal te bo, ali želiš uporabiti React ali drug okvir. Izberi „React“.

Nato te bo vprašal, ali želiš uporabiti React s TypeScriptom. Za začetek je bolje delati brez TypeScripta, zato izberi privzeto možnost „React“.

Premik v imenik projekta

Ko je projekt uspešno ustvarjen, se premakni v novo ustvarjen imenik svoje aplikacije. To narediš z ukazom cd todo-app. Ko si tam, moraš namestiti potrebne pakete. V terminal vpiši ukaz npm install. To namesti vse potrebne odvisnosti, vključno z Reactom.

Zagon razvojnega strežnika

Sedaj pride napet del: zaženi razvojni strežnik! Vnesi ukaz npm run dev. Ta ukaz zažene razvojni strežnik Vite, in dobiš URL, prek katerega lahko odpreš svojo aplikacijo v brskalniku.

Odpri sodoben spletni brskalnik in vnesi naveden naslov. Dobil bi preprosto spletno stran z vrtečim se logotipom in nekaj besedila, ter gumb, ki prikazuje števec.

Prilagoditve aplikacije

Da bi dobil prvi vtis o funkcionalnosti, lahko narediš manjše prilagoditve svoji aplikaciji. Odpreš datoteko src/main.jsx in spremeniš besedilo v komponenti App. Shrani datoteko in opazuj, kako se spremembe takoj posodobijo v brskalniku, brez potrebe po osvežitvi strani. To kaže, kako učinkovito deluje vroče ponovno nalaganje v Vite - odlična funkcija za hitro povratno informacijo med razvojem.

Opazi, da števec ostane nespremenjen, tudi če se besedilo posodobi. To je ena od prednosti Reacta: stanje ostane, tudi ko se uporabniški vmesnik posodablja.

Povzetek

Uspešno ste namestili svoje razvojno okolje, namestili Node.js in NPM, ustvarili nov projekt React in ga pognali v svojem spletnem brskalniku. S tem so postavljeni temelji za namestitev aplikacije React z Vite, zdaj pa se lahko lotite svoje prve uporabe.