Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

Kako koristiti putanje u Reactu

by
Difficulty:BeginnerLength:ShortLanguages:

Croatian (Hrvatski) translation by Davor Budimir (you can also view the original English article)

U jednom od mojih ranijih tutorijala, vidjeli smo kako započeti sa Reactom i JSX-om. U ovom tutorijalu, vidjet ćemo kako započeti sa postavljanjem i pravljenjem React aplikacije. Fokusirat ćemo se na to kako koristiti routing u React aplikaciji koristeći react-router.

Počnimo

Krenimo tako što ćemo inicijalizirati naš projekt koristeći Node Package Manager (npm).

Instalirajte potrebne react i react-dom biblioteke u projektu.

Koristiti ćemo webpack modul bundler za ovaj projekt. Instalirajte webpack i webpack development server.

Iskoristiti ćemo Babel da pretvorimo JSX sintaksu u JavaScript. Instalirajte sljedeće babel pakete u naš projekt.

webpack-dev-server zahtjeva config dokument gdje ćemo definirati početni dokument, izlazni dokument i babel učitavač. Evo kako će naš webpack.config.js dokument izgledati:

Zatim ćemo napraviti app.html gdje će se React aplikacija renderirati.

Napravimo početni dokument app.js za našu React aplikaciju.

Kao što se vidi u kodu iznad, uključili smo react i react-dom. Napravili smo komponentu App koja vraća naslov. render funkcija renderira komponente unutar elementa aplikacije u app.html stranici.

Pokrenimo webpack server i aplikacija bi se trebala pokrenuti i prikazati poruku komponente.

Otvorite http://localhost:8080/app.html u pregledniku i trebali biste vidjeti aplikaciju kako radi.

Pravljenje React pogleda

Sada imamo namještenu React aplikaciju. Krenimo dalje tako što ćemo dodati par pogleda u našu React routing aplikaciju. Zbog jednostavnosti ćemo napraviti sve komponente unutar app.js dokumenta.

Napravimo glavnu komponentu naziva navigation u app.js.

U Navigation komponenti iznad, imamo naziv aplikacije i tek napravljen izbornik za navigaciju kroz različite zaslone aplikacije. Komponenta je vrlo jednostavna sa malo osnovnog HTML koda. Napravimo zaslone za Contact i About.

Upravo smo napravili komponentu koja će renderirati About i Contact zaslone.

Spajanje pogleda koristeći react-router

Da bismo spojili različite poglede iskoristit ćemo react-router. Instalirajte react-router koristeći npm.

Uvezite potrebnu bibilioteku iz react-router u app.js.

Umjesto da specificiramo koju komponente da renderiramo, definirati ćemo različite putanje u našoj aplikaciji Za što ćemo koristiti react-router.

Definirajmo putanje za Home, Contact i About zaslon.

Kada posjetitelj otvori / putanju, Navigation komponenta će se renderirati, kada posjeti /about About komponenta će se renderirati, i /contact će renderirati Contact komponenta.

Izmijenite About i Contact zaslone da imaju povezicu do početne stranice. Za povezivanje zaslona, koristiti ćemo Link koji radi na sličan način kao i HTML anchor tag.

Izmijenite Navigation komponentu da sadrži povezicu do ostalih zaslona s početne stranice.

Spremite promjene i ponovno pokrenite webpack server.

Otvorite http://localhost:8080/app.html i trebali biste vidjeti pokrenutu aplikaciju sa osnovnim postavkama putanja.

Zaključak

U ovom tutorijalu smo vidjeli kako početi s pravljenjem React aplikacije i spajanjem različitih komponenti zajedno koristeći react-router. Naučili smo kako definirati različite putanje i povezati ih zajedno koristeći react-router.

Jeste li probali koristiti react-router ili neku drugu biblioteku za putanje? Slobodno napišite što mislite o ovome u komentarima ispod.

Izvorni kod ovog tutorijala je dostupan na GitHub-u.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.