Pokretanje novog React projekta vrlo je komplicirano, s toliko mnogo alata za izgradnju. Koristi mnoge ovisnosti, konfiguracijske datoteke i druge zahtjeve kao što su Babel, Webpack, ESLint prije nego što napiše jedan red React koda. Create React App CLI alat uklanja sve te složenosti i čini React aplikaciju jednostavnom. Za ovo morate instalirati paket koristeći NPM, a zatim pokrenuti nekoliko jednostavnih naredbi da biste dobili novi React projekt.

The kreiraj-reagiraj-aplikaciju je izvrstan alat za početnike, koji vam omogućuje vrlo brzo kreiranje i pokretanje React projekta. Ne zahtijeva nikakvu konfiguraciju ručno. Ovaj alat omotava sve potrebne ovisnosti poput Webpack , Babel za sam React projekt i tada se morate usredotočiti samo na pisanje React koda. Ovaj alat postavlja razvojno okruženje, pruža izvrsno iskustvo programera i optimizira aplikaciju za proizvodnju.

Zahtjevi

Aplikaciju Create React održava Facebook i može raditi na bilo kojem platforma , na primjer, macOS, Windows, Linux, itd. Da biste stvorili React projekt pomoću create-react-app, trebate imati instalirane sljedeće stvari u vašem sustavu.

1. Verzija čvora >= 8.10
2. NPM verzija >= 5.6

Provjerimo trenutnu verziju Čvor i NPM u sustavu.

Pokrenite sljedeću naredbu da provjerite verziju čvora u naredbenom retku.

 $ node -v 

Pokrenite sljedeću naredbu da provjerite verziju NPM-a u naredbenom retku.

 $ npm -v 

Montaža

Ovdje ćemo naučiti kako možemo instalirati React koristeći CRA alat. Za to moramo slijediti korake navedene u nastavku.

Instalirajte React

React možemo instalirati pomoću npm upravitelja paketa pomoću sljedeće naredbe. Nema potrebe brinuti o složenosti React instalacije. Create-react-app npm upravitelj paketa upravljat će svime što je potrebno za React projekt.

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

Napravite novi React projekt

Nakon što je instalacija Reacta uspješna, možemo kreirati novi React projekt pomoću naredbe create-react-app. Ovdje biram naziv 'reactproject' za svoj projekt.

 C:Usersjavatpoint> create-react-app reactproject 

BILJEŠKA:Gornja dva koraka možemo kombinirati u jednoj naredbi koristećinpx. Npx je alat za pokretanje paketa koji dolazi s npm 5.2 i novijom verzijom.

 C:Usersjavatpoint> npx create-react-app reactproject 

Gornjoj naredbi trebat će neko vrijeme da se instalira React i stvori novi projekt pod nazivom 'reactproject.' Sada možemo vidjeti terminal kao ispod.

Gornji zaslon govori da je React projekt uspješno kreiran na našem sustavu. Sada moramo pokrenuti poslužitelj kako bismo mogli pristupiti aplikaciji u pregledniku. Unesite sljedeću naredbu u prozor terminala.

 $ cd Desktop $ npm start 

NPM je upravitelj paketa koji pokreće poslužitelj i pristupa aplikaciji na zadanom poslužitelju http://localhost:3000. Sada ćemo dobiti sljedeći ekran.

Zatim otvorite projekt u uređivaču koda. Ovdje koristim Visual Studio Code. Zadana struktura našeg projekta izgleda kao na slici ispod.

U aplikaciji React postoji nekoliko datoteka i mapa u korijenskom direktoriju. Neki od njih su sljedeći:

čvor_moduli:Sadrži biblioteku React i sve druge potrebne biblioteke treće strane.javnost:Sadrži javnu imovinu aplikacije. Sadrži index.html gdje će React prema zadanim postavkama montirati aplikaciju na element.src:Sadrži datoteke App.css, App.js, App.test.js, index.css, index.js i serviceWorker.js. Ovdje je datoteka App.js uvijek odgovorna za prikaz izlaznog zaslona u Reactu.paket-lock.json:Generira se automatski za sve operacije u kojima paket npm modificira stablo node_modules ili package.json. Ne može se objaviti. Bit će zanemaren ako pronađe bilo koje drugo mjesto umjesto paketa najviše razine.package.json:Sadrži razne metapodatke potrebne za projekt. Daje informacije npm-u, što omogućuje prepoznavanje projekta kao i rukovanje ovisnostima projekta.README.md:Pruža dokumentaciju za čitanje o React temama.

Postavljanje React okruženja

Sada otvorite src >> App.js datoteku i napravite promjene koje želite prikazati na zaslonu. Nakon uvođenja željenih promjena, uštedjeti Datoteka. Čim spremimo datoteku, Webpack ponovno kompajlira kod i stranica će se automatski osvježiti, a promjene se odražavaju na zaslonu preglednika. Sada možemo stvoriti onoliko komponenti koliko želimo, uvesti novostvorenu komponentu unutar App.js datoteku i ta će datoteka biti uključena u naš glavni index.html datoteku nakon kompajliranja pomoću Webpacka.

Dalje, ako želimo napraviti projekt za produkcijski način, upišite sljedeću naredbu. Ova naredba će generirati proizvodnu verziju, koja je najbolje optimizirana.

 $ npm build