Kreiranje

Napomena: Morate imati instaliran node.js

Za kreiranje React projekta potreban vam je jedan od vaših omiljenih razvojnih alata. U ovome primjeru koristit će se VS Code. Kada otvorite VS Code unutar padajuće izbornika pod Terminal odaberete New Terminal kako bi vam se otvorio terminal i unutar njega možete upisati komandu za kreiranje novoga React projekta.

Komanda: npx create-react-app .

Navedena komanda je primjer kreiranja React projekta unutar direktorija koji ste otvorili. Ukoliko želite kreirati negdje dalje projekt dovoljno je umjesto točke navesti putanju. Primjer može biti npx create-react-app prvi-react-projekt, ova komanda unutar trenutnog direktorija kreira dodatni direktorij unutar kojega kreira React projekt.

Struktura

Nakon uspješnog kreiranja projekta njegova struktura izgleda ovako:

Pošto se radi o web aplikaciji moramo imati neku html datoteku koja će služiti za prikaz svega što se želi prikazati. Unutar direktorija public možemo vidijeti da postoji datoteka index.html. Slobodno je otvorite. Kao što vidite unutar nje se nalazi jedan div element čiji id je root. Točno taj element nam služi za prikazivanje svega unutar aplikacije. Unutar direktorija src u datoteci index.js dohvaćamo taj element prema id-u te u njega smještamo inicijalnu komponentu App čija se implementacija nalazi unutar datoteke App.js.

Unutar App.js nalazi se naša prva mala aplikacija koja se inicijalno kreira. Služi za prikaz React loga. Otvorite terminal te u njega upišite: npm start Kako bite pokrenuli aplikaciju. Vašu aplikaciju možete vidjeti na adresi http://www.localhost:3000

Promijenimo tekst "Edit src/App.js and save to reload." u "Moja prva promjena." Unutar datoteke App.js na liniji 10 obrišimo sve te upišimo "Moja prva promjena." Izmjene spremite s CTRL+s te će te odmah vidjeti promijenu.

Kako biste zaustavili aplikaciju dovoljno je u terminalu pritisnuti CTRL+c te nakon toga Y.