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).
mkdir reactRoutingApp cd reactRoutingApp npm init
Instalirajte potrebne react i react-dom biblioteke u projektu.
npm install react react-dom --save
Koristiti ćemo webpack modul bundler za ovaj projekt. Instalirajte webpack i webpack development server.
npm install webpack webpack-dev-server --save-dev
Iskoristiti ćemo Babel da pretvorimo JSX sintaksu u JavaScript. Instalirajte sljedeće babel pakete u naš projekt.
npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015
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:
module.exports = {
entry: './app.js',
module: {
loaders: [
{
exclude: /node_modules/,
loader: 'babel-loader?presets[]=es2015&presets[]=react'
}
]
},
output: {
filename: 'bundle.js'
}
};
Zatim ćemo napraviti app.html gdje će se React aplikacija renderirati.
<html>
<head>
<title>TutsPlus - React Routing Basic</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
Napravimo početni dokument app.js za našu React aplikaciju.
import React from 'react';
import {render} from 'react-dom';
const App = () => {
return (
<h2>{'TutsPlus - Welcome to React Routing Basic!'}</h2>
);
};
render(
<App />,
document.getElementById('app')
);
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.
webpack-dev-server
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.
const Navigation = () => {
return (
<section>
<App />
<ul>
<li>{'Home'}</li>
<li>{'Contact'}</li>
<li>{'About'}</li>
</ul>
</section>
);
};
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.
const About = () => {
return (
<section>
<h2>{'Welcome to About!'}</h2>
</section>
);
};
const Contact = () => {
return (
<section>
<h2>{'Welcome to Contact!'}</h2>
</section>
);
};
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.
npm install react-router --save
Uvezite potrebnu bibilioteku iz react-router u app.js.
import {Link, Route, Router} from 'react-router';
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.
render(
<Router>
<Route
component={Navigation}
path="/"
/>
<Route
component={About}
path="/about"
/>
<Route
component={Contact}
path="/contact"
/>
</Router>,
document.getElementById('app')
);
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.
const About = () => {
return (
<section>
<h2>{'Welcome to About!'}</h2>
<Link to="/">{'Back to Home'}</Link>
</section>
);
};
const Contact = () => {
return (
<section>
<h2>{'Welcome to Contact!'}</h2>
<Link to="/">{'Back to Home'}</Link>
</section>
);
};
Izmijenite Navigation komponentu da sadrži povezicu do ostalih zaslona s početne stranice.
const Navigation = () => {
return (
<section>
<App />
<ul>
<li>{'Home'}</li>
<li>
<Link to="/contact">{'Contact'}</Link>
</li>
<li>
<Link to="/about">{'About'}</Link>
</li>
</ul>
</section>
);
};
Spremite promjene i ponovno pokrenite webpack server.
webpack-dev-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.
