Vienkārša React izstrādes vides iestatīšana

Pirmie soļi tīmekļa izstrādē ar React var būt aizraujošs izaicinājums. Jūs esat šeit, jo vēlaties uzzināt, kā ātri un efektīvi izveidot izstrādes vidi un sākt savu pirmo projektu. Šajā rokasgrāmatā jūs iepazīstināsim ar darbībām, kas nepieciešamas, lai izveidotu React lietojumprogrammu, izmantojot Vite kā salikšanas rīku.

Galvenās atziņas

Lai izveidotu React izstrādes vidi, jums ir nepieciešama Visual Studio Code, Node.js un NPM. Izmantojot pareizās komandas un rīkus, jūs varat ātri izveidot savu pirmo React lietotni un parādīt to pārlūkprogrammā.

Soli pa solim

Izstrādes vides iestatīšana

Pirms sākat faktisko izstrādi, jums jāpārliecinās, ka jums ir pareizie rīki. Pirmkārt, jums jāinstalē Visual Studio Code. Tā ir populāra un bezmaksas Microsoft izstrādes vide, kas ir īpaši piemērota JavaScript izstrādei. Lai lejupielādētu Visual Studio Code, apmeklējiet oficiālo vietni un sekojiet lejupielādes un instalēšanas norādījumiem.

Papildus Visual Studio Code jums būs nepieciešams arī Node.js, kas nodrošina JavaScript izpildes vidi, un pakotņu pārvaldnieks NPM. Node.js varat lejupielādēt no Node.js vietnes. Noklikšķiniet uz lejupielādes lapas un izvēlieties LTS (Long-Term Support) versiju, lai iegūtu stabilu un pārbaudītu versiju.

Node.js un NPM instalēšana un testēšana

Pēc Node.js instalēšanas jāpārbauda, vai viss ir pareizi instalēts. Lai to izdarītu, atveriet termināli. To var izdarīt tieši Visual Studio Code, atverot "Terminal" un pēc tam "New Terminal". Ievadiet terminālī komandu npm -v. Ja netiek parādīts versijas numurs, iespējams, ir problēmas ar instalāciju.

Tāpat jāpārliecinās, ka Node.js darbojas pareizi. To var izdarīt, ievadot terminālī komandu node -v. Abām komandām jāatgriež NPM un Node.js instalētās versijas.

Jauna projekta izveide ar Vite

Nākamais solis ir izveidot jaunu projektu. Lai to izdarītu, izmantojiet npm create vite, kam seko jūsu lietotnes nosaukums. Šajā piemērā mēs strādājam ar "To-Do App". Tas iedarbina vedni, kas piedāvā dažādas iespējas. Jums tiks jautāts, vai vēlaties izmantot React vai citu ietvaru. Izvēlieties "React".

Pēc tam jums tiks arī jautāts, vai vēlaties izmantot React ar TypeScript. Sākumā ir lietderīgāk strādāt bez TypeScript, tāpēc izvēlieties noklusējuma opciju "React".

Pārslēdzieties uz projekta direktoriju

Kad projekts ir veiksmīgi izveidots, pārslēdzieties uz jaunizveidoto lietotnes direktoriju. To veic ar komandu cd todo-app. Kad esat tur, ir jāinstalē nepieciešamās paketes. Ievadiet terminālī komandu npm install. Tādējādi tiks instalētas visas nepieciešamās atkarības, tostarp React.

Izstrādes servera palaišana

Tagad nāk aizraujošākā daļa: jūs varat palaist izstrādes serveri! Ievadiet komandu npm run dev. Tas iedarbinās Vite izstrādes serveri, un jūs saņemsiet URL, ko varēsiet izmantot, lai pārlūkprogrammā izsauktu savu lietotni.

Atveriet pašreizējo tīmekļa pārlūkprogrammu un ievadiet norādīto adresi. Jums jāredz vienkārša tīmekļa lapa ar rotējošu logotipu un nelielu tekstu, kā arī pogu, kas parāda skaitītāju.

Lietotnes pielāgošana

Lai gūtu pirmo iespaidu par funkcionalitāti, varat veikt nelielus pielāgojumus lietotnē. Atveriet src/main.jsx failu un mainiet tekstu lietotnes komponentēs. Saglabājiet failu un novērojiet, kā izmaiņas nekavējoties tiek atjauninātas pārlūkprogrammā, neveicot lapas pārlādēšanu no jauna. Tas parāda, cik efektīvi Vite darbojas karstā ielādēšana - lieliska funkcija ātrai atgriezeniskās saites iegūšanai izstrādes laikā.

Ņemiet vērā, ka skaitītāja statuss paliek nemainīgs pat tad, ja teksts tiek atjaunināts. Tā ir viena no React stiprajām pusēm: stāvoklis saglabājas pat tad, ja tiek atjaunināta lietotāja saskarne.

Kopsavilkums

Jūs esat veiksmīgi iestatījis izstrādes vidi, instalējis Node.js un NPM, izveidojis jaunu React projektu un nodrošinājis tā darbību pārlūkprogrammā. Tagad esat licis pamatus React lietojumprogrammas izveidei ar Vite un esat gatavs sākt darbu pie savas pirmās lietojumprogrammas.