Instalacija

Prije nego započnemo sa radom, potrebno je postaviti razvojno okruženje te se upoznati sa alatima koje ćemo koristiti u ostatku tečaja.

Node.js

Jedan od glavnih preduvjeta nam je instalacija "Node.js" okruženja koje će nam biti potrebno za konfiguraciju React aplikacije i za pokretanje lokalnog razvojnog poslužitelja. Node.js možete instalirati sa službene stranice (opens in a new tab) pri čemu se preporučuje instalacija LTS (Long-term support) verzije, naravno za odgovarajući OS.

Razvojno okruženje

Kako bi lakše razvijali našu aplikaciju moramo postaviti i razvojno okruženje - tu se primarno misli na odabir uređivača kôda (code editor). U primjerima će se koristiti VS Code (link za instalaciju (opens in a new tab)) koji je ujedno i preporučeni editor. Naravno, uvijek možete koristiti i neki od alternativnih uređivača kao što su:

• Sublime Text (opens in a new tab)
• Reactide (opens in a new tab)
• WebStorm (opens in a new tab) (Nije besplatan!)

Online okruženje

Alternativno, možete odabrati neku od online (cloud) razvojnih platformi koje vam omogućuju udaljeni pristup razvojnom okruženju neovisno na kojem računalu se nalazite. Ovakvi alati također često imaju i dodatne mogućnosti poput olakšanog dijeljenja kôda i kolaboracije na projektima. Većina online okruženja ima unaprijed pripremljene početne projekte - uključujući i React pa ukoliko ste već koristili jedno od takvih okruženje provjerite možete li u njemu pokrenuti prazni React predložak. Dva trenutno popularna online okruženja su CodeSandbox (opens in a new tab) i StackBlitz (opens in a new tab) - detaljnije o njima možete pročitati na službenim stranicama, a ukoliko želite započeti sa radom možete otvoriti:

• novi React projekt (opens in a new tab) u Codesandbox okruženju
• novi React projekt (opens in a new tab) u StackBlitz okruženju

Novi React projekt

Službena React dokumentacija preporučuje korištenje "Create React App" za stvaranje i konfiguriranje nove React aplikacije. Većina primjera koje možete naći na Internetu također koristi ovaj pristup. Ovaj način stvaranja React aplikacija ima određenih nedostataka, te u zadnje vrijeme se često spominju alternative kao Vite (opens in a new tab), Astro (opens in a new tab) ili Nx (opens in a new tab), pri čemu je Vite najbliži direktnoj zamjeni za "Create React App". Iako te razlike dolaze do izražaja tek kod složenijih aplikacija i naprednih koncepata, u primjerima na ovim stranicama ćemo koristiti Vite jer nudi neke prednosti i za početnike kao što je brže početno postavljanje i prevođenje (kompajliranje) aplikacije za vrijeme razvoja.

Pokretanje projekta

Otvorite VS Code (ili neki drugi uređivač kôda) i pokrenite ugrađeni Terminal. Nakon što ste odabrali direktorij unutar kojega želite stvoriti novi projekt pokrenite naredbu (posljednji dio naredbe je ime aplikacije pa umjesto "novi-projekt" možete po želji navesti neko drugo ime):

npm create vite@latest novi-projekt

Kod instalacije Vite projekta kao okvir (framework) odaberite "React" opciju, te zatim željeni početni jezik (JavaScript ili TypeScript). Također možete i odabrati SWC varijantu (prevoditelj i bundler napisan u programskom jeziku "Rust", puno brži od klasičnih JS alternativa).

Nakon instalacije novog projekta prikazati će se upute za njegovo pokretanje. Uz pomoć Terminala moramo ući u novo stvoreni direktorij, pokrenuti naredbu za instaliranje svih potrebnih povezanih (dependency) biblioteka, te nakon toga pokrenuti samu aplikaciju sa naredbom "npm run dev". U slučaju da ste koristili "Create React App" verziju, upute su gotovo identične (bez npm install koraka) i također su prikazane na Terminalu te ih možete bez problema ispratiti.

cd novi-projekt
npm install
npm run dev

Ukoliko smo sve ispravno napravili, posljednja naredba će pokrenuti lokalni razvojni poslužitelj koji će nam u stvarnom vremenu prikazivati našu aplikaciju dok je modificiramo. U samom Terminalu je prikazana adresa (localhost sa nekim zadanim PORT-om, najčešće 5173). Nakon što otvorimo tu lokaciju u svom pregledniku, na zaslonu bi trebala biti prikazana stranica kao na slici ispod. Upravo smo napravili našu prvu React aplikaciju!

Ovaj početni primjer sadrži određene funkcionalnosti na koje ćemo se tek kasnije osvrnuti, a za početak ćemo se osvrnuti na samu strukturu aplikacije.

Početna struktura aplikacije

Predložak početne React aplikacije stvorene sa Vite izgleda otprilike ovako:

novi-projekt/
├── node_modules/
│   └── ...
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   │   └── react.svg
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── .gitignore
├── index.html
├── package-lock.json
├── package.json
└── vite.config.js

Pogledajmo čemu služe pojedini dijelovi aplikacije:

• node_modules - direktorij u kojem se nalaze sve Node.js dependency biblioteke koje su potrebe za pokretanje naše React aplikacije
• public - direktorij koji služi za statičke elemente koji će biti dostupni na root razini aplikacije. Trenutno sadrži samo jednu .svg datoteku.
• src - direktorij sa izvornim kôdom (source code) naše React aplikacije. Tijekom razvoja aplikacije, najviše promjena (i novih datoteka) ćemo raditi unutar ovog direktorija.
• .gitignore - posebna datoteka koja navodi iznimke za sustav upravljanja verzijama. Trenutno se nećemo osvrtati na taj dio.
• index.html - početna točka (entry point) cijele naše aplikacije. Sadrži jedan prazni div element i script element koji učitava React funkciju za prikaz (renderiranje) naše aplikacije (datoteka main.jsx koja se nalazi unutar već spomenutog "src" direktorija).
• package(-lock).json - dvije (glavne) konfiguracijske datoteke za cijelu aplikaciju.
• vite.config.js - konfiguracijska datoteka za Vite okruženje.

Sada se možemo upoznati sa osnovnim konceptima React-a. Za početak ćemo se osvrnuti detaljnije na datoteke koje se nalaze unutar "src" direktorija, te ćemo za početak malo pojednostaviti početnu strukturu aplikacije.