1. Should you Reat? Ivan Varga, Axilis d.o.o

2. React
React je UI JavaScript biblioteka koju održavaju Facebook i Instagram.

3. Komponente Komponete su gradivne jedinice React aplikacija.
class ExampleComponent extends React.Component{
render (){
return (
<h1>It works???<h1> ); }

4. 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) );

5. 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"));

6. 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"));

7. Flux

8. Redux
JavaScript state containter biblioteka koja implementira Flux arhitekturu
reducer(prevState, action)=(newSate)

9. Razvojno okruženje
Notepad  Visual studio code

10. Tic Tac Toe https://github.com/ivanvarga/ReactTicTacToe

11. Tic Tac Toe Store
{ board : ["E", "E", "E", "E", "E", "E", "E", "E", "E"], playing : "X", mode: null, winner : null }

12. Tic Tac Toe komponente TicTacToe ModeLink TicTacToeCell TicTacToeCell

13. 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> );

14. ModeLink
const ModeLink = (props) =>{ let {actions, mode, children} = props; return ( <span className="level" onClick={()=> actions.SetMode(mode)}>{children}</span> ); }

15. 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> ); }