Should you Reat?
Ivan Varga, Axilis d.o.o
React
React je UI JavaScript biblioteka koju održavaju
Facebook i Instagram.
Komponente
Komponete su gradivne jedinice React
aplikacija.
class ExampleComponent extends React.Component{
render (){
return (
<h1>It works???<h1>
);
}
JSX
JSX je React proširenje JavaScripta koje
dozvoljava korištenje XML sinktakse unutar
koda
var profile = <div>
<img src="avatar.png"
className="profile" />
<h3>{user.firstName}</h3>
</div>;
var profile = React.createElement("div", null,
React.createElement("img",
{ src: "avatar.png", className: "profile" }),
React.createElement("h3", null, user.firstName)
);
Grocery list
import { Component } from 'react';
// Parent Component
class GroceryList extends Component {
render() {
return (
<ul>
<ListItem quantity="1" name="Bread" />
<ListItem quantity="6" name="Eggs" />
<ListItem quantity="2" name="Milk" />
</ul>
);
}
}
// Child Component
class ListItem extends Component {
render() {
return (
<li>
{this.props.quantity}×
{this.props.name}
</li>
);
}
}
React.render(<GroceryList />, document.getElementById("root"));
Stateless function components
const GroceryList = () => {
return (
<ul>
<ListItem quantity="1“ name="Bread" />
<ListItem quantity="6" name="Eggs" />
<ListItem quantity="2" name="Milk" />
</ul>
);
}
const ListItem = (props) => {
return (
let {quantity, name } = props;
<li>{quantity} × {name}</li>
);
}
React.render(<GroceryList />, document.getElementById("root"));
Flux
Redux
• JavaScript state containter biblioteka koja
implementira Flux arhitekturu
• reducer(prevState, action)=(newSate)
Razvojno okruženje
Notepad 
Visual studio code
Tic Tac Toe
https://github.com/ivanvarga/ReactTicTacToe
https://cdn.rawgit.com/ivanvarga/ReactTicTacToe/master/test/index.html
Tic Tac Toe Store
{
board : ["E", "E", "E", "E", "E", "E", "E", "E", "E"],
playing : "X",
mode: null,
winner : null
}
Tic Tac Toe komponente
TicTacToe
TicTacToeCell
TicTacToeCell
TicTacToeCell
TicTacToeCell
TicTacToeCell
TicTacToeCell
TicTacToeCell
TicTacToeCell
TicTacToeCell
ModeLink
ModeLink
ModeLink
ModeLink
TicTacToeCell
const TicTacToeCell = (props) => {
let clickHandler;
let {actions, Id, running, tick} = props;
if(running)
{
clickHandler = () => actions.ThickCell(Id);
}
return (
<div className="cell" onClick={clickHandler} >{tick}</div>
);
}
ModeLink
const ModeLink = (props) =>{
let {actions, mode, children} = props;
return (
<span className="level" onClick={()=>
actions.SetMode(mode)}>{children}</span>
);
}
TicTacToe
const TicTacToe = (props) => {
let options = [{value:Modes.HUMAN, text:"Human"} ... ].map((el)=>
{ return <ModeLink key={el.value} mode={el.value}>{el.text}</ModeLink>; });
let selectMenu = <div className="ingame">Select: {options}</div>;
let cells = board.map((el, idx) =>
{ return (<TicTacToeCell tick={el} Id={idx} key={idx}></TicTacToeCell>);});
}
return (<div>
<div className="board">{cells}</div>
<div className="control">{selectMenu}</div>
</div> );
Nagrađujemo vas sa
100 WinCoin bodova što
ste posjetili predavanje.
HVALA!
Osvojite dodatnih
100 WinCoin bodova
ukoliko popunite službeni
upitnik.