Kako koristiti putanje u Reactu

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.