Začetek novega projekta React je zelo zapleten s toliko orodji za gradnjo. Uporablja številne odvisnosti, konfiguracijske datoteke in druge zahteve, kot so Babel, Webpack, ESLint, preden napiše eno vrstico kode React. Orodje CLI za ustvarjanje aplikacije React odstrani vse te zapletenosti in poenostavi aplikacijo React. Za to morate namestiti paket z uporabo NPM in nato zagnati nekaj preprostih ukazov, da dobite nov projekt React.

The create-react-aplikacija je odlično orodje za začetnike, ki vam omogoča zelo hitro izdelavo in zagon React projekta. Ne potrebuje ročne konfiguracije. To orodje zavije vse zahtevane odvisnosti, kot je Spletni paket , Babel za sam projekt React in potem se morate osredotočiti samo na pisanje kode React. To orodje nastavi razvojno okolje, nudi odlično izkušnjo za razvijalce in optimizira aplikacijo za proizvodnjo.

Zahteve

Aplikacijo Create React vzdržuje Facebook in lahko deluje na katerem koli platforma , na primer macOS, Windows, Linux itd. Če želite ustvariti projekt React z aplikacijo create-react-app, morate imeti v sistemu nameščene naslednje stvari.

1. Različica vozlišča >= 8.10
2. Različica NPM >= 5.6

Preverimo trenutno različico Vozlišče in NPM v sistemu.

Zaženite naslednji ukaz, da preverite različico vozlišča v ukaznem pozivu.

 $ node -v 

Zaženite naslednji ukaz, da preverite različico NPM v ukaznem pozivu.

 $ npm -v 

Namestitev

Tukaj se bomo naučili, kako lahko namestimo React z uporabo CRA orodje. Za to moramo slediti spodnjim korakom.

Namestite React

React lahko namestimo z uporabo upravitelja paketov npm z uporabo naslednjega ukaza. Ni vam treba skrbeti za zapletenost namestitve React. Upravitelj paketov create-react-app npm bo upravljal vse, kar je potrebno za projekt React.

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

Ustvarite nov projekt React

Ko je namestitev Reacta uspešna, lahko ustvarimo nov projekt React z ukazom create-react-app. Tukaj izberem ime 'reactproject' za svoj projekt.

 C:Usersjavatpoint> create-react-app reactproject 

OPOMBA:Zgornja dva koraka lahko združimo v enem ukazu z uporabonpx. Npx je orodje za zagon paketov, ki je priloženo različici npm 5.2 in novejšo.

 C:Usersjavatpoint> npx create-react-app reactproject 

Zgornji ukaz bo potreboval nekaj časa, da namestite React in ustvarite nov projekt z imenom 'reactproject.' Zdaj lahko vidimo terminal kot spodaj.

Zgornji zaslon pove, da je bil projekt React uspešno ustvarjen v našem sistemu. Zdaj moramo zagnati strežnik, da lahko dostopamo do aplikacije v brskalniku. V terminalsko okno vnesite naslednji ukaz.

 $ cd Desktop $ npm start 

NPM je upravitelj paketov, ki zažene strežnik in dostopa do aplikacije na privzetem strežniku http://localhost:3000. Zdaj bomo dobili naslednji zaslon.

Nato odprite projekt v urejevalniku kode. Tukaj uporabljam Visual Studio Code. Privzeta struktura našega projekta je videti kot na spodnji sliki.

V aplikaciji React je v korenskem imeniku več datotek in map. Nekateri od njih so naslednji:

node_modules:Vsebuje knjižnico React in vse druge potrebne knjižnice tretjih oseb.javno:Hrani javna sredstva aplikacije. Vsebuje index.html, kjer bo React privzeto namestil aplikacijo na element.src:Vsebuje datoteke App.css, App.js, App.test.js, index.css, index.js in serviceWorker.js. Tu je datoteka App.js vedno odgovorna za prikaz izhodnega zaslona v Reactu.package-lock.json:Ustvari se samodejno za vse operacije, kjer paket npm spremeni drevo node_modules ali package.json. Ni ga mogoče objaviti. Če najde katero koli drugo mesto namesto paketa najvišje ravni, bo prezrt.package.json:Vsebuje različne metapodatke, potrebne za projekt. Zagotavlja informacije npm, ki omogoča identifikacijo projekta in obravnavanje odvisnosti projekta.README.md:Ponuja dokumentacijo za branje o temah React.

Nastavitev okolja React

Zdaj odprite src >> App.js datoteko in naredite spremembe, ki jih želite prikazati na zaslonu. Po izvedbi želenih sprememb, shraniti datoteka. Takoj ko shranimo datoteko, Webpack znova prevede kodo in stran se samodejno osveži, spremembe pa se odražajo na zaslonu brskalnika. Zdaj lahko ustvarimo poljubno število komponent, uvozimo novo ustvarjeno komponento znotraj App.js in ta datoteka bo vključena v našo glavno datoteko index.html datoteko po prevajanju s strani Webpack.

Nato, če želimo narediti projekt za produkcijski način, vnesite naslednji ukaz. Ta ukaz bo ustvaril produkcijsko zgradbo, ki je najbolje optimizirana.

 $ npm build