React arenduskeskkonna seadistamine tehtud lihtsaks

React-iga veebiarenduses esimesi samme astudes võib see olla põnev väljakutse. Oled siin selleks, et õppida, kuidas kiiresti ja tõhusalt seadistada oma arenduskeskkond ning alustada oma esimese projekti käivitamist. See juhend viib sind läbi sammude, mis on vajalikud Reacti rakenduse loomiseks Vite'i kasutades Build-Tool'ina.

Olulisemad teadmised

Reacti arenduskeskkonna seadistamiseks vajad Visual Studio Code'i, Node.js'i ja NPM-i. Õigete käskude ja tööriistadega saad oma esimese Reacti rakenduse luua ning brauseris kuvada lühikese aja jooksul.

Samm-sammult juhend

Arenduskeskkonna seadistamine

Enne tegeliku arendusega alustamist veendu, et sul oleksid õiged tööriistad. Esiteks peaksid installima Visual Studio Code'i. See on Microsofti populaarne ja tasuta arenduskeskkond, mis on spetsiaalselt loodud JavaScripti arendamiseks. Visual Studio Code'i saad alla laadida ametlikult veebisaidilt ja järgida seal toodud juhiseid allalaadimise ja installimise jaoks.

Lisaks Visual Studio Code'ile vajad Node.js-i, mis pakub JavaScripti tööaja keskkonda, ja NPM-i, pakkede haldurit. Node.js'i saad alla laadida Node.js'i veebisaidilt. Mine allalaadimislehele ning vali LTS-versioon (pikaajaline tugi), et saada stabiilne ja usaldusväärne versioon.

Node.js'i ja NPM-i installimine ning kontrollimine

Pärast Node.js'i installimist kontrolli, kas kõik on korralikult paigaldatud. Ava selleks terminal. Seda saad teha otse Visual Studio Code'is, minnes "Terminal" ja seejärel "Uus terminal". Terminalis sisesta käsk npm -v. Kui versiooninumbrit ei kuvata, võib sul olla installimisega probleem.

Veendu ka, et Node.js töötab korralikult. Seda saad teha, sisestades terminali käsu node -v. Mõlemad käsud peaksid tagastama NPM-i ja Node.js'i installitud versiooni.

Uue projekti loomine Vite'iga

Järgmine samm on luua uus projekt. Selleks kasuta käsku npm create vite, järgituna sinu rakenduse nimele. Selles näites töötame "Tegevuste rakenduse"ga. See käivitab viiburi, mis pakub erinevaid valikuid. Küsitakse, kas soovid kasutada Reacti või mõnda muud raamistikku. Vali "React".

Seejärel küsitakse, kas soovid kasutada Reacti TypeScriptiga. Alustuseks on mõistlik töötada ilma TypeScriptita, seega vali vaikimisi "React".

Liikumine projekti kausta

Pärast edukat projekti loomist liigu oma rakenduse vastloodud kausta. Seda saad teha käsklusega cd todo-app. Kohale jõudes pead installima vajalikud paketid. Sisesta käsk npm install terminalisse. See installeerib kõik vajalikud sõltuvused, sealhulgas React.

Arendusserveri käivitamine

Nüüd saabub põnev osa: saad käivitada arendusserveri! Sisesta käsk npm run dev. See käivitab Vite'i arendusserveri ning annab sulle URL-i, mille kaudu saad oma rakendust brauseris vaadata.

Ava ajakohane veebibrauser ja sisesta antud aadress. Peaksid nägema lihtsat veebisaiti keerleva logoga ja mõne tekstiga, samuti nuppu, mis näitab loendurit.

Rakenduse kohandamine

Esimese ülevaate funktsionaalsusest saamiseks saad teha väikeseid kohandusi oma rakenduses. Ava fail src/main.jsx ja muuda teksti App komponendis. Salvesta fail ja jälgi, kuidas muudatused värskendatakse kohe brauseris, ilma et peaksid lehte uuesti laadima. See näitab sulle, kui tõhus on Vite'is Hot Reloading - suurepärane funktsioon kiireks tagasisideks arenduse käigus.

Märgi, et loenduri seisund jääb puutumatuks, isegi kui teksti ajakohastatakse. See on üks Reacti tugevusi: olek jääb püsima, isegi kui kasutajaliidet ajakohastatakse.

Kokkuvõte

Oled edukalt seadistanud oma arenduskeskkonna, installinud Node.js ja NPM-i, loonud uue React-projekti ja teinud seda oma brauseris töötavaks. React-rakenduse seadistamise põhimõtted Vite'iga on paigas ning võid nüüd alustada oma esimese rakendusega.