Stvaranje React aplikacije nikada nije bilo lakše uz pomoć create-react-app alata, razvojnog okruženja postavljenog za vas. Ovaj alat izradio je Facebookov tim i nudi modernu postavku izgradnje bez potrebe za konfiguracijom. S obzirom da je moćan alat, create-react-app vam daje šablon za izradu react aplikacije odmah bez trošenja previše vremena na konfiguraciju webpacka ili druge tehničke probleme.
U ovom članku provest ćemo vas kroz proces stvaranja nove React aplikacije putem create-react-app korak po korak. Također, dotaknut ćemo se kako koristiti neke od njegovih biblioteka i funkcija.
Izradite React aplikaciju
npx create-react-app my-new-app cd my-new-app npm start
Razumijevanje alata
Kada instalirate i pokrenete aplikaciju create-react-app, ona postavlja osnovnu strukturu direktorija s unaprijed definiranim skriptama u datoteci package.json. Ove skripte dolaze sa svime što vam je potrebno za izradu, testiranje i pokretanje vaše aplikacije. Ljepota ovog alata je u tome što su sve složenosti skrivene što vam omogućuje da se usredotočite na kôd, a ne na okolinu.
Ovaj alat također postavlja živi razvojni poslužitelj koji će automatski ponovno učitati vašu aplikaciju svaki put kada promijenite kod.
Struktura direktorija i važne datoteke
- package.json: Sve ovisnosti vašeg projekta zajedno sa skriptama za izgradnju, testiranje i pokretanje vaše aplikacije mogu se pronaći ovdje.
- čvor_moduli: Sadrži sve pakete o kojima ovisi vaš projekt.
- public/index.html: Glavna HTML datoteka koja se učitava kada netko posjeti vašu stranicu. Sadrži div s ID-om roota na koji će se montirati vaša React aplikacija.
- src/index.js: Ulazna točka vaše aplikacije React.
Dodavanje knjižnica
Dodavanje biblioteka vašem projektu ne može biti jednostavnije. Na primjer, ako želite dodati React Router svom projektu, jednostavno biste pokrenuli naredbu npm install react-router-dom i zatim je uvezli u svoje datoteke po potrebi. Skupljač modula u pozadini brine o tome da sve bude uključeno u konačnu verziju.
Prilagodba vaše aplikacije React
Prilagodba vaše novostvorene React aplikacije je jednostavna. Prvo, u datoteci src/App.js možete modificirati postojeći kod kako bi odgovarao potrebama vaše aplikacije. Nadalje, možete dodati nove .js datoteke za svoje komponente i uvesti ih u App.js za upotrebu.
Zaključno, create-react-app je zgodan alat za postavljanje novog React projekta bez konfiguracije izgradnje. Dolazi s modernim postavkama za izradu, razvojnim poslužiteljem i razumnim zadanim postavkama, što vam omogućuje da se usredotočite na pisanje koda, ostavljajući alate za izradu za create-react-app. Upamtite, ako trebate prilagoditi svoje postavke izgradnje, uvijek možete pokrenuti npm run eject da to učinite, ali za većinu aplikacija navedene zadane vrijednosti trebale bi biti više nego dovoljne.
