Pradėti naują „React“ projektą yra labai sudėtinga, nes yra tiek daug kūrimo įrankių. Prieš rašydamas vieną „React“ kodo eilutę, jis naudoja daugybę priklausomybių, konfigūracijos failų ir kitų reikalavimų, pvz., „Babel“, „Webpack“, „ESLint“. Sukurti React App CLI įrankis pašalina visus sudėtingumus ir padaro React programą paprastą. Norėdami tai padaryti, turite įdiegti paketą naudodami NPM, tada paleiskite kelias paprastas komandas, kad gautumėte naują „React“ projektą.

The kurti-reaguoti-programėlę yra puikus įrankis pradedantiesiems, leidžiantis labai greitai sukurti ir paleisti React projektą. Tai nereikalauja jokios konfigūracijos rankiniu būdu. Šis įrankis apvynioja visas reikalingas priklausomybes, pvz Webpack , Babelis pačiam „React“ projektui, tada jums reikia sutelkti dėmesį tik į „React“ kodo rašymą. Šis įrankis nustato kūrimo aplinką, suteikia puikią kūrėjo patirtį ir optimizuoja programą gamybai.

Reikalavimai

„Create React“ programą prižiūri Facebook ir gali veikti ant bet kurio platforma , pavyzdžiui, „macOS“, „Windows“, „Linux“ ir kt. Norėdami sukurti „React“ projektą naudodami „create-react-app“, savo sistemoje turite įdiegti toliau nurodytus dalykus.

1. Mazgo versija >= 8.10
2. NPM versija >= 5.6

Leiskite mums patikrinti dabartinę versiją Mazgas ir NPM sistemoje.

Vykdykite šią komandą, kad patikrintumėte mazgo versiją komandų eilutėje.

 $ node -v 

Vykdykite šią komandą, kad patikrintumėte NPM versiją komandų eilutėje.

 $ npm -v 

Montavimas

Čia mes sužinosime, kaip galime įdiegti „React“ naudodami CRA įrankis. Norėdami tai padaryti, turime atlikti toliau nurodytus veiksmus.

Įdiekite „React“.

Mes galime įdiegti „React“ naudodami „npm“ paketų tvarkyklę naudodami šią komandą. Nereikia jaudintis dėl „React“ diegimo sudėtingumo. Sukurti-reaguoti-app npm paketų tvarkyklė valdys viską, ko reikia React projektui.

 C:Usersjavatpoint> npm install -g create-react-app 

Sukurkite naują „React“ projektą

Sėkmingai įdiegus „React“, galime sukurti naują „React“ projektą naudodami komandą „create-react-app“. Čia savo projektui pasirenku „reaguotiprojekto“ pavadinimą.

 C:Usersjavatpoint> create-react-app reactproject 

PASTABA:Aukščiau nurodytus du veiksmus galime sujungti vienoje komandoje naudodaminpx. „npx“ yra paketo vykdymo įrankis, pateikiamas su npm 5.2 ir naujesne versija.

 C:Usersjavatpoint> npx create-react-app reactproject 

Aukščiau pateikta komanda užtruks šiek tiek laiko, kol bus įdiegta „React“ ir sukurtas naujas projektas pavadinimu „reactproject“. Dabar galime matyti terminalą taip, kaip nurodyta toliau.

Aukščiau pateiktame ekrane nurodoma, kad „React“ projektas sėkmingai sukurtas mūsų sistemoje. Dabar turime paleisti serverį, kad galėtume pasiekti programą naršyklėje. Terminalo lange įveskite šią komandą.

 $ cd Desktop $ npm start 

NPM yra paketų tvarkyklė, kuri paleidžia serverį ir pasiekia programą numatytajame serveryje http://localhost:3000. Dabar gausime tokį ekraną.

Tada atidarykite projektą kodo rengyklėje. Čia aš naudoju Visual Studio kodą. Mūsų projekto numatytoji struktūra atrodo taip, kaip žemiau esančiame paveikslėlyje.

Programoje „React“ šakniniame kataloge yra keli failai ir aplankai. Kai kurie iš jų yra tokie:

node_modules:Jame yra „React“ biblioteka ir visos kitos reikalingos trečiųjų šalių bibliotekos.vieša:Jame yra viešasis paraiškos turtas. Jame yra index.html, kur „React“ pagal numatytuosius nustatymus įdiegs programą prie elemento.src:Jame yra App.css, App.js, App.test.js, index.css, index.js ir serviceWorker.js failai. Čia App.js failas visada atsakingas už išvesties ekrano rodymą React.package-lock.json:Jis generuojamas automatiškai visoms operacijoms, kai npm paketas modifikuoja medį node_modules arba package.json. Jis negali būti paskelbtas. Jis bus ignoruojamas, jei suras kitą vietą, o ne aukščiausio lygio paketą.package.json:Jame saugomi įvairūs projektui reikalingi metaduomenys. Tai suteikia informaciją npm, kuri leidžia identifikuoti projektą ir valdyti projekto priklausomybes.README.md:Jame pateikiami dokumentai, skirti skaityti apie „React“ temas.

Reaguoti aplinkos sąranka

Dabar atidarykite src >> App.js failą ir atlikite pakeitimus, kuriuos norite rodyti ekrane. Atlikę norimus pakeitimus, sutaupyti failas. Kai tik išsaugome failą, „Webpack“ iš naujo sukompiliuoja kodą ir puslapis bus atnaujintas automatiškai, o pakeitimai bus rodomi naršyklės ekrane. Dabar galime sukurti tiek komponentų, kiek norime, importuoti naujai sukurtą komponentą viduje App.js failas ir tas failas bus įtrauktas į mūsų pagrindinį index.html failą sukompiliavus Webpack.

Tada, jei norime sukurti projektą gamybos režimui, įveskite šią komandą. Ši komanda sugeneruos gamybos versiją, kuri yra geriausiai optimizuota.

 $ npm build