TUTORIJAL O REACTJS

FREJMVORKU

Domai zadatak iz Sistema za elektronsko

Nemanja
poslovanje
Zori

Nemanja Zori

1.

O ReactJS

ReactJS je front-end biblioteka razvijena od strane Facebook-a. Koristi se za

view komponentu web i mobilnih aplikacija. ReactJS nam omoguava
kreiranje UI komponenti spremnih za ponovno korienje. Trenutno je jedna
od najpopularnijih JavaScript biblioteka.
Kako bi radili sa ReactJS, potrebno je dobro znanje JavaScript-a, HTML5 i
CSS. Iako ReactJS ne koristi HTML, JSX mu je veoma slian, tako da je HTML
znanje od velike pomoi.
React je biblioteka za graenje korisnikih interfejsa. On ohrabruje
kreiranje UI komponenti koje se mogu iznova koristiti, a koje predstavljaju
podatke koji se mijenjaju u toku vremena. Puno ljudi koristi React kao V u
MVC (Model View Controller). React abstrahuje DOM, i daje jednostavniji
programerski model i bolje performanse. React moe renderovati i na
serveru koristei Node.
React ima sljedea svojstva:

JSX JavaScript ekstenzija sintakse. Nije neophodno koristiti JSX u

razvoju React, ali je preporuljivo.

Komponente React je sav o komponentata. O svemu se mora

misliti kao o komponenti. Ovo pomae u odravanju koda kada se

radi na velikim projektima.
Jednosmjerni tok podataka i FLUX React implementira jednosmjerni
tok podataka koji omoguava lake shvatanje aplikacije. Flux je
obrazac koji pomae odravanje podataka jednosmjernim.

React ima nekoliko prednosti:

React koristi virtuelni DOM koji je zapravo JavaScript objekat. Ovo

poboljava performanse aplikacije jer je JavaScript virtuelni DOM bri

od regularnog DOM-a.
React se moe koristiti na klijentskoj i serverskoj strani.
Kopmonente i Data obrasci poboljavaju itljivost
React se moe koristiti sa drugim frejmvorcima.

S druge strane, React ima i nekih limitacija:

React pokriva samo view dio aplikacije, tako da se i dalje moraju

odabrati druge tehnologije kako bi upotpunili set alata za razvoj

aplikacije.
React koristi inline ablone i JSX. Ovo moe izgledati udno nekim
developerima.

2.

Instalacija

Kako bi instalirali ReactJS bie nam potreban NodeJS kao i NPM, tj. Node
Package Manager. Potrebno je instalirati nekoliko paketa. Bie nam
potrebni neki babel pluginovi tako da emo prvo instalirati babel koristei
sledei kod:
C:\Users\username>npm install -g babel
C:\Users\username>npm install -g babel-cli

Zatim, moramo kreirati korjenski folderr po imenu reactApp i postaviti ga

na Desktop. Nakon to je folder kreiran, potrebno ga je otvoriti i u njemu
kreirati prazan package.json fajl, izvravajuu npm init komandu:
C:\Users\username\Desktop>mkdir reactApp
C:\Users\username\Desktop\reactApp>npm init

Dalje, koristiemo webpack bundler u ovom tutorijalu, tako da emo

instalirati webpack i webpack-dev-server.
C:\Users\username>npm install webpack --save
C:\Users\username>npm install webpack-dev-server --save

Kako elimo da koristimo React, moramo ga prvo instalirati. Komanda

save e dodati ove pakete u package.json fajl.
C:\Users\username\Desktop\reactApp>npm install react --save
C:\Users\username\Desktop\reactApp>npm install react-dom --save

Ve smo napomenuli da emo koristiti neke babel pluginove, pa bi i njih

trebali instalirati:
C:\Users\username\Desktop\reactApp>npm install babel-core

C:\Users\username\Desktop\reactApp>npm install babel-loader

C:\Users\username\Desktop\reactApp>npm install babel-preset-react
C:\Users\username\Desktop\reactApp>npm install babel-preset-es2015

Sada moemo kreirati nekoliko fajlova koji su nam potrebni:

C:\Users\username\Desktop\reactApp>touch
C:\Users\username\Desktop\reactApp>touch
C:\Users\username\Desktop\reactApp>touch
C:\Users\username\Desktop\reactApp>touch

index.html
App.jsx
main.js
webpack.config.js

Nakon ovoga, potrebno je da podesimo compiler, server i loader-e.

Otvorimo webpack-config.js i dodajmo kod:
var config = {
entry: './main.js',
output: {
path:'./',
filename: 'index.js',
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
module.exports = config;

Postavljamo webpack poetnu taku na main.js. Izlazni put je mjesto gdje

e aplikacija biti sluena. Takoe, postavljamo razvojni server na 8080
port, i na kraju, postavljamo babel loader-e da pretrauju js fajlove, i da
koriste es2015 i react presete koje smo instalirali ranije.
Dodajmo sledeu komandu unutar package.json:
"start": "webpack-dev-server --hot"

Sada moemo koristiti npm start komandu da startujemo server. hot

komanda e dodati reload svaki put kada se neto promijeni unutar naih

fajlova, tako da ne moramo da refreujemo na pretraiva svaki put kada

promjenimo kod.
Kreirajmo sada index.html fajl. Ovo je obian HTML fajl. Postavljamo div id
= app kao root element za nau aplikaciju i dodajemo index.js skriptu
koja je na izgraeni aplikacioni fajl:
<!DOCTYPE html>
<html lang = "en">

<head>
<meta charset = "UTF-8">
<title>React App</title>
</head>

<body>
<div id = "app"></div>
<script src = "index.js"></script>
</body>

</html>

Sada je potrebno kreirati App.jsx i main.js fajlove. Ovo su zapravo prve

react komponente. React komponente emo detaljnije objasniti kasnije.
Ova komponenta e renderovati Hello World!
import React from 'react';

class App extends React.Component {

render() {
return (
<div>
Hello World!!!
</div>
);
}
}

export default App;

Moramo da importujemo ovu komponentu i renderujemo je na na root

element tako da ga moemo vidjeti u pretraivau:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

Kada god elimo da koristimo neto, prvo moramo da ga importujemo. Ako

elimo da koristimo komponentu i u drugim djelovima aplikacije, moramo
da je eksportujemo nakon kreiranja, i importujemo u fajl gdje elimo da je
koristimo.
Osnovno postavljanje je gotovo, tako da sada moemo startovati server:
C:\Users\username\Desktop\reactApp>npm start

U pretraivau zatim ukucajte http://localhost:8080/, i dobiete sljedei

rezultat:
Hello World!

JSX
React koristi JSX za ablone umjesto obinog JavaScript-a. Nije neophodno
koristiti ga, ali postoje odreeni razlozi za njegovo korienje:

JSX je bri jer izvodi optimizaciju kada se kod kompajlira u JavaScript

Veina greaka se moe uhvatiti u toku kompajliranja
JSX ini pisanje ablona jednostavnijim i brim ukoliko ste upoznati
sa HTML.

JSX izgleda kao obini HTML u veini sluajeva. Za razliku od prethodnih

primjera, ukoliko elimo da vratimo vie elemenata, moramo ih obmotati

jednim kontejner elementom. Primijetimo kako koristimo div kao kontejner

za h1, h2 i p elemente:
import React from 'react';

class App extends React.Component {

render() {
return (
<div>
<h1>Header</h1>
<h2>Content</h2>
<p>This is the content!!!</p>
</div>
);
}
}

export default App;

Moemo koristiti sopstvene custom atribute kao dodatak klasinim HTML

svojstvima i atributima. Kada elimo da dodamo custom atribut,
koristimo data- prefiks. U primjeru ispod, dodali smo data-myattribute kao
atribut p elementa.
import React from 'react';

class App extends React.Component {

render() {
return (
<div>
<h1>Header</h1>
<h2>Content</h2>
<p data-myattribute = "somevalue">This is the content!!!</p>
</div>
);
}

export default App;

React preporuuje korienje inline stilova. Kada elite da postavite inline

stil, morate koristiti camelCase sintaksu. React e automatski dodati px
nakon brojne vrijednosti na odreenim lementima. Moete vidjeti kako smo
dodali myStyle inline h1 elementu:
import React from 'react';

class App extends React.Component {

render() {

var myStyle = {
fontSize: 100,
color: '#FF0000'
}

return (
<div>
<h1 style = {myStyle}>Header</h1>
</div>
);
}
}

export default App;

Kada se piu komentari morate koristiti velike zagrade {} kada \elite da

komentariete neto unutar djeje sekcije taga:
import React from 'react';

class App extends React.Component {

render() {

return (
<div>
<h1>Header</h1>
{//End of the line Comment...}
{/*Multi line comment...*/}
</div>
);
}
}

export default App;

HTML tagovi se uvijek piu malim slovima, dok imenovanje React

komponente poinje velikim slovom.

3.

Komponente

Naa prva komponenta u primjeru ispod je App. Ova komponenta je

vlasnik Header i Content komponenti. Kreiramo Header i Content
komponente odvojeno i samo ih dodajemo unutar JSX drveta u naoj App
komponenti. Samo App komponenta mora biti eksportovana.
import React from 'react';

class App extends React.Component {

render() {
return (
<div>
<Header/>
<Content/>
</div>
);
}
}

class Header extends React.Component {

render() {
return (
<div>
<h1>Header</h1>
</div>
);
}
}

class Content extends React.Component {

render() {
return (
<div>
<h2>Content</h2>
<p>The content text!!!</p>
</div>
);
}
}

export default App;

Kako bi modli da renderujemo ovaj kod na stranici, moramo ga prvo

importovati u main.js fajl i pozvati reactDom.render():
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

3.1. Primjer komponente

U ovom primjeru emo postaviti stanje za komponentu vlasnika App.

Header komponenta je dodata kao i u prethodnom primjeru jer joj nije
potrebno nikakvo stanje. Umjesto content taga, kreiramo table i tbody
elemente gdje dinamiki ubacujemo TableRow za svaki objekat iz data
niza.
import React from 'react';

class App extends React.Component {

constructor() {
super();

this.state = {
data:
[
{
"id":1,
"name":"Foo",
"age":"20"
},

{
"id":2,
"name":"Bar",
"age":"30"
},

{
"id":3,
"name":"Baz",
"age":"40"
}
]
}
}

render() {

return (
<div>
<Header/>
<table>
<tbody>
{this.state.data.map((person, i) => <TableRow key = {i} data = {person}
/>)}
</tbody>
</table>
</div>
);
}
}

class Header extends React.Component {

render() {
return (
<div>
<h1>Header</h1>
</div>
);
}
}

class TableRow extends React.Component {

render() {
return (
<tr>
<td>{this.props.data.id}</td>
<td>{this.props.data.name}</td>
<td>{this.props.data.age}</td>
</tr>
);
}
}

export default App;

//Main.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

3.2. Stanja
Stanje je mjesto odakle dolaze podaci. Praksa je da se uvijek pokua stanje
ostvariti to jednostavnije mogue i minimizirati broj takvih komponenti.
Ukoliko image, npr., deset komponenti kojima su potrebni podaci iz stanja,
trebali bi kreirati jednu kontejner komponentu koja e drati stanje za sve
njih:
import React from 'react';

class App extends React.Component {

constructor(props) {
super(props);

this.state = {
header: "Header from state...",
"content": "Content from state..."
}
}

render() {
return (
<div>
<h1>{this.state.header}</h1>
<h2>{this.state.content}</h2>
</div>
);

}
}

export default App;

A u main.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

3.3. Props (Rekviziti)

Glavna razlika izmeu stanja i props-a je ta to su props nepromjenljivi.
Zbog ovoga je potrebno da komponenta kontejner ima definisano stanje
koje se moe aurirati i promijeniti, dok djeja komponenta treba samo da
preda podatke iz stanja koristei props.
Kada su nam potrebni nepromjenljivi podaci u komponenti, moemo samo
dodati props u reactDom.render() funkciju unutar main.js i koristiti je
unutar nae komponente:
import React from 'react';

class App extends React.Component {

render() {
return (
<div>
<h1>{this.props.headerProp}</h1>
<h2>{this.props.contentProp}</h2>
</div>
);
}
}

export default App;

a u main.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App headerProp = "Header from props..." contentProp = "Content

from props..."/>, document.getElementById('app'));

export default App;

Takoe, moe se postaviti podrazumijevana vrijednost direktno na

konstruktor komponente umjesto dodavanja u reactDom.render() element:
import React from 'react';

class App extends React.Component {

render() {
return (
<div>
<h1>{this.props.headerProp}</h1>
<h2>{this.props.contentProp}</h2>
</div>
);
}
}

App.defaultProps = {
headerProp: "Header from props...",
contentProp:"Content from props..."
}

export default App;

a u main.js:

import React from 'react';

import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Rezultat je, naravno, isti.

Primjer ispod pokazuje kako se stanja i props mogu kombinovati u

aplikaciji. Postavljano stanje u naoj roditeljskoj komponenti i predajemo
ga niz drvo komponente koristei props. Unutar render funkcije,
postavljamo headerProp i contentProp koji se koriste u djejim
komponentama:
import React from 'react';

class App extends React.Component {

constructor(props) {
super(props);

this.state = {
header: "Header from props...",
"content": "Content from props..."
}
}

render() {
return (
<div>
<Header headerProp = {this.state.header}/>
<Content contentProp = {this.state.content}/>
</div>
);
}
}

class Header extends React.Component {

render() {
return (
<div>
<h1>{this.props.headerProp}</h1>
</div>
);
}
}

class Content extends React.Component {

render() {
return (
<div>
<h2>{this.props.contentProp}</h2>
</div>
);
}
}

export default App;

a u main.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Rezultat e ponovo biti isti kao u prethodna dva primjera, samo to je

jedina drugaija stvar izvor naih podataka, koji sada originalno dolaze iz
stanja. Kada elimo da ih auriramo, potrebno je da samo auriramo
stanje, i sve djeje komponente e biti aurirane.

3.4. Props Validacija

Validacija sojstava je korisan nain da se pravilno koriste komponente. Ovo
e nam pomoi u toku razvoja kako bi izbjegli budue greke i probleme
kada aplikacija postane vea. Ovo takoe ini kod itkijim jer moemo
vidjeti kako se svaka komponenta treba koristiti.
U ovom primjeru, kreiramo App komponentu sa svim props koji su nam
potrebni. App.propTypes se koristi za validaciju props-a. Ako neki od propsa ne koristi taan tip koji smo dodijelili, dobiemo upozorenje u konzoli.
import React from 'react';

class App extends React.Component {

render() {
return (
<div>
<h3>Array: {this.props.propArray}</h3>
<h3>Bool: {this.props.propBool ? "True..." : "False..."}</h3>
<h3>Func: {this.props.propFunc(3)}</h3>
<h3>Number: {this.props.propNumber}</h3>
<h3>String: {this.props.propString}</h3>
<h3>Object: {this.props.propObject.objectName1}</h3>
<h3>Object: {this.props.propObject.objectName2}</h3>
<h3>Object: {this.props.propObject.objectName3}</h3>
</div>
);
}
}

App.propTypes = {
propArray: React.PropTypes.array.isRequired,
propBool: React.PropTypes.bool.isRequired,
propFunc: React.PropTypes.func,
propNumber: React.PropTypes.number,
propString: React.PropTypes.string,
propObject: React.PropTypes.object

App.defaultProps = {
propArray: [1,2,3,4,5],
propBool: true,
propFunc: function(e){return e},
propNumber: 1,
propString: "String value...",

propObject: {
objectName1:"objectValue1",
objectName2: "objectValue2",
objectName3: "objectValue3"
}
}

export default App;

a u main.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

3.5. Komponent API

Ovdje emo pojasniti kako da se koristi React komponent API. Prikazaemo
tri metode: setState(), forceUpdate() i ReactDOM.findDOMNode().
setState() metod se koristi za auriranje stanja komponente. Ovaj metod
nee zamijeniti stanje, ve samo dodati promjene originalnom stanju:
import React from 'react';

class App extends React.Component {

constructor() {
super();

this.state = {
data: []
}

this.setStateHandler = this.setStateHandler.bind(this);
};

setStateHandler() {
var item = "setState..."
var myArray = this.state.data;
myArray.push(item)
this.setState({data: myArray})
};

render() {
return (
<div>
<button onClick = {this.setStateHandler}>SET STATE</button>
<h4>State Array: {this.state.data}</h4>
</div>
);
}
}

export default App;

Poeli smo sa praznim nizom. Svaki put kada kliknemo dugme, stanje se
aurira.
Ponekad elimo da komponentu auriramo runo. Ovo moemo postii
koristei forceUpdate() metod.
import React from 'react';

class App extends React.Component {

constructor() {
super();
this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
};

forceUpdateHandler() {
this.forceUpdate();
};

render() {
return (
<div>
<button onClick = {this.forceUpdateHandler}>FORCE UPDATE</button>
<h4>Random number: {Math.random()}</h4>
</div>
);
}
}

export default App;

Postavljamo nasumini broj koji e se aurirati svaki put kada se dugme

klikne.
Za manipulaciju DOM-om, moemo koristiti ReactDOM.findDOMNode()
metod. Prvo moramo importovati react-dom.
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {

constructor() {
super();
this.findDomNodeHandler = this.findDomNodeHandler.bind(this);
};

findDomNodeHandler() {
var myDiv = document.getElementById('myDiv');
ReactDOM.findDOMNode(myDiv).style.color = 'green';
}

render() {
return (
<div>
<button onClick = {this.findDomNodeHandler}>FIND DOME NODE</button>
<div id = "myDiv">NODE</div>
</div>
);
}
}

export default App;

Boja myDiv elementa se mijenja u zelenu, onda kada se dugme klikne.

3.6. ivotni ciklus komponente

U ovom dijelu emo prei kroz metode vezane za ivotni ciklus
komponente:

componentWillMount izvrava se prije renderovanja, i na serverskoj

i na klijentskoj strani.
componentDidMount izvrava se prije prvog renderovanja samo na

klijentskoj strani. Ovdje se AJAX zahtjevi i DOM ili stanja auriraju ako
se dese. Ovaj metod se takoe koristi za integraciju sa drugim
JavaScript frejmvorcima i bilo kojim drugim sa odloenim
izvravanjem kao to su setTimeout ili setInterval. Koristimo ga da bi
aurirali stanje kako bi mogli da pokrenemo druge metode ivotnog
ciklusa.
componentWillReceiveProps se poziva im su props aurirani prije
nego to je bilo koji drugi render pozvan. Pozvan je iz
setNewNumber im je aurirano stanje.

shouldComponentUpdate treba da vrati true ili false vrijednosti.

Ovim e se odrediti da li e se komponenta aurirati ili ne. Po

default-u je postavljen na true. Ako ste sigurni da koponenta ne
treba da renderuje nakon to su stanje ili props aurirani, moete
vratiti false vrijednosti.
componentWillUpdate poziva se prije renderovanja
componentDidUpdate poziva se odmah poslije renderovanja
componentWillUnmount poziva se nakon to se komponena odvoji
od dom-a. Ovo izvravamo u main.js.

U ovom primjeru postavljamo poetno stanje u konstruktoru funkcije.

setNewNumber se koristi da aurira stanje. Svi metodi ivotnog ciklusa se
nalaze unutar Content komponente.
import React from 'react';

class App extends React.Component {

constructor(props) {
super(props);

this.state = {
data: 0
}

this.setNewNumber = this.setNewNumber.bind(this)
};

setNewNumber() {
this.setState({data: this.state.data + 1})
}

render() {
return (
<div>
<button onClick = {this.setNewNumber}>INCREMENT</button>
<Content myNumber = {this.state.data}></Content>
</div>

);
}
}

class Content extends React.Component {

componentWillMount() {
console.log('Component WILL MOUNT!')
}

componentDidMount() {
console.log('Component DID MOUNT!')
}

componentWillReceiveProps(newProps) {
console.log('Component WILL RECIEVE PROPS!')
}

shouldComponentUpdate(newProps, newState) {
return true;
}

componentWillUpdate(nextProps, nextState) {
console.log('Component WILL UPDATE!');
}

componentDidUpdate(prevProps, prevState) {
console.log('Component DID UPDATE!')
}

componentWillUnmount() {
console.log('Component WILL UNMOUNT!')
}

render() {

return (
<div>
<h3>{this.props.myNumber}</h3>
</div>
);
}
}

export default App;

a main.js fajl izgleda ovako:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

setTimeout(() => {
ReactDOM.unmountComponentAtNode(document.getElementById('app'));}, 10000);

4.

Forme

U ovom poglavlju emo objasniti kako da koristimo forme u React-u.

U primjeru ispod, postavljamo input formme sa value = { this.state.data }.
Ovo nam omoguava da auriramo stanje kad god se vrijednost input-a
promijeni. Koristimo onChange event koji e posmatrati promjene unosa i
aurirati stanje.
import React from 'react';

class App extends React.Component {

constructor(props) {
super(props);

this.state = {
data: 'Initial data...'
}

this.updateState = this.updateState.bind(this);

};

updateState(e) {
this.setState({data: e.target.value});
}

render() {
return (
<div>
<input type = "text" value = {this.state.data}
onChange = {this.updateState} />
<h4>{this.state.data}</h4>
</div>
);
}
}

export default App;

a main.js izgleda ovako:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Sada emo obraditi neto kompleksniji primjer kako bi prikazili kako se

koriste forme iz djeije komponente.

onChange metod e pokrenuti auriranje stanja koje e biti predato djejoj

input vrijednosti i renderovano na ekran. Kada god auriramo stanje iz
djeije komponente, moramo da predamo funkciju koja e odraivati
auriranje (updateState) kao prop (updateStateProp).
import React from 'react';

class App extends React.Component {

constructor(props) {
super(props);

this.state = {
data: 'Initial data...'
}

this.updateState = this.updateState.bind(this);
};

updateState(e) {
this.setState({data: e.target.value});
}

render() {
return (
<div>
<Content myDataProp = {this.state.data}
updateStateProp = {this.updateState}></Content>
</div>
);
}
}

class Content extends React.Component {

render() {

return (
<div>
<input type = "text" value = {this.props.myDataProp}
onChange = {this.props.updateStateProp} />
<h3>{this.props.myDataProp}</h3>
</div>
);
}
}
export default App;

a main.js izgleda ovako:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

5.

Eventi

U sljedeem jednostavnom primjeru pokazaemo korienje samo jedne

komponente. Jednostavno dodajemo onClick even koji e pokrenuti
updateState funkciju onda kada se dugme klikne.
import React from 'react';

class App extends React.Component {

constructor(props) {
super(props);

this.state = {
data: 'Initial data...'
}

this.updateState = this.updateState.bind(this);

};

updateState() {
this.setState({data: 'Data updated...'})
}

render() {
return (
<div>
<button onClick = {this.updateState}>CLICK</button>
<h4>{this.state.data}</h4>
</div>
);
}
}

export default App;

a main.js izgleda ovako:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Kada je potrebno da auriramo stanje roditeljske komponente iz djeije,

moemo kreirati event handler (updateState) u roditeljskoj komponent, i
predati je kao prop (UpdateStateProp) naoj djeijoj komponenti gdje ga
samo moemo pozvati.
import React from 'react';

class App extends React.Component {

constructor(props) {
super(props);

this.state = {
data: 'Initial data...'
}

this.updateState = this.updateState.bind(this);
};

updateState() {
this.setState({data: 'Data updated from the child component...'})
}

render() {
return (
<div>
<Content myDataProp = {this.state.data}
updateStateProp = {this.updateState}></Content>
</div>
);
}
}

class Content extends React.Component {

render() {
return (
<div>
<button onClick = {this.props.updateStateProp}>CLICK</button>
<h3>{this.props.myDataProp}</h3>
</div>
);
}
}

export default App;

a main.js izgleda ovako:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

6.

ReactJS Refs

Ref se koristi da vrati referencu na element. Refs bi, generalno, trebali da

se izbjegavaju, ali mogu biti korisni kada su potrebna DOM mjerenja ili da
se dodaju metodi komponentama.
Na primjer prikazuje kako da se koriste refs da oiste input polje.
clearInput funkcija pretrauje element sa ref = myInput vrijednou,
resetuje stanje i dodaje fokus na njega nakon to je dugme kliknuto.
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {

constructor(props) {
super(props);

this.state = {
data: ''
}

this.updateState = this.updateState.bind(this);
this.clearInput = this.clearInput.bind(this);
};

updateState(e) {
this.setState({data: e.target.value});
}

clearInput() {
this.setState({data: ''});
ReactDOM.findDOMNode(this.refs.myInput).focus();
}

render() {
return (
<div>
<input value = {this.state.data} onChange = {this.updateState}
ref = "myInput"></input>
<button onClick = {this.clearInput}>CLEAR</button>
<h4>{this.state.data}</h4>
</div>
);
}
}

export default App;

a main.js izgleda ovako:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

7.

ReactJS Keys

ReactJS keys su korisni kada se radi sa dinamiki kreiranim komponentama

ili kada se lista mijenja od strane korisnika. Postavljanje vrijednosti kljua
e drati komponente jedinstveno identifikovanim poslije promjene.
Kreirajmo dinamiki Content elemente sa jedinstvenim indeksom (i).
Funkcija map e kreirati tri elementa iz naeg data niza. Kako vrijednost
kljua mora da bude jedinstvena za svaki element, dodijeliemo i kao klju
za svaki kreirani element.
import React from 'react';

class App extends React.Component {

constructor() {
super();

this.state = {
data:
[
{
component: 'First...',
id: 1
},

{
component: 'Second...',
id: 2
},

{
component: 'Third...',
id: 3
}
]
}

render() {
return (
<div>
<div>
{this.state.data.map((dynamicComponent, i) => <Content
key = {i} componentData = {dynamicComponent}/>)}
</div>
</div>
);
}
}

class Content extends React.Component {

render() {
return (
<div>
<div>{this.props.componentData.component}</div>
<div>{this.props.componentData.id}</div>
</div>
);
}
}

export default App;

a main.js e izgledati ovako:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Ako dodamo ili uklonimo neke elemente u budunosti ili promijenimo

redosljed dinamiki kreiranih elemenata, React e koristiti vrijednost kljua
kako bi pratio svaki element.

8.

ReactJS Ruter

Prvo se mora instalirati react-router. Jednostavno, izvrimo sledei kod u

komandnom prozoru:
C:\Users\username\Desktop\reactApp>npm install react-router

U sljedeem koraku kreiramo etiri komponente. App komponenta e se

koristiti kao tab meni. Sledee tri komponente Home, About i Contact, se
renderuju onda kada se ruta promijeni. Sve radimo unutar main.js fajla.
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router'

class App extends React.Component {

render() {
return (
<div>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>

{this.props.children}
</div>
)
}
}

export default App;

class Home extends React.Component {

render() {
return (

<div>
<h1>Home...</h1>
</div>
)
}
}

export default Home;

class About extends React.Component {

render() {
return (
<div>
<h1>About...</h1>
</div>
)
}
}

export default About;

class Contact extends React.Component {

render() {
return (
<div>
<h1>Contact...</h1>
</div>
)
}
}

export default Contact;

Sada elimo da dodamo rute naoj aplikaciji. Umjesto renderovanja App

elementa kao u prethodnim primjerima, ovog puta e se Router
renderovati. Takoe, postaviemo komponente za svaku rutu.

ReactDOM.render((
<Router history = {browserHistory}>
<Route path = "/" component = {App}>
<IndexRoute component = {Home} />
<Route path = "home" component = {Home} />
<Route path = "about" component = {About} />
<Route path = "contact" component = {Contact} />
</Route>
</Router>

), document.getElementById('app'))

Kada je aplikacija startovana, vidjeemo tri klikabilna linka koji se mogu

koristiti da se promijeni ruta.

Sadraj
1.

O ReactJS.................................................................................................................1

2.

Instalacija................................................................................................................2

JSX..................................................................................................................................5
3.

Komponente............................................................................................................8
3.1.

Primjer komponente.........................................................................................9

3.2.

Stanja.............................................................................................................11

3.3.

Props (Rekviziti)..............................................................................................12

3.4.

Props Validacija...............................................................................................16

3.5.

Komponent API...............................................................................................18

3.6.

ivotni ciklus komponente.............................................................................20

4.

Forme....................................................................................................................23

5.

Eventi....................................................................................................................26

6.

ReactJS Refs..........................................................................................................29

7.

ReactJS Keys.......................................................................................................30

8.

ReactJS Ruter......................................................................................................33