Download presentation
Presentation is loading. Please wait.
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> ); }
Similar presentations
© 2025 SlidePlayer.com Inc.
All rights reserved.