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.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post