Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "Should you Reat? Ivan Varga, Axilis d.o.o"— Presentation transcript:

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

16

17

18


Download ppt "Should you Reat? Ivan Varga, Axilis d.o.o"

Similar presentations


Ads by Google