Page Title class ShoppingList extends React.Component { render() { return (

Shopping List for {this.props.name}

Instagram
WhatsApp
Oculus

); } }return React.createElement('div', {className: 'shopping-list'}, React.createElement('h1', /* ... h1 children ... */), React.createElement('ul', /* ... ul children ... */) );class Board extends React.Component { renderSquare(i) { return ; } }class Square extends React.Component { render() { return ( ); } } class Square extends React.Component { render() { return ( ); } }class Square extends React.Component { render() { return ( ); } }class Square extends React.Component { constructor(props) { super(props); this.state = { value: null, }; } render() { return ( ); } }class Square extends React.Component { constructor(props) { super(props); this.state = { value: null, }; } render() { return ( ); } }class Board extends React.Component { constructor(props) { super(props); this.state = { squares: Array(9).fill(null), }; } renderSquare(i) { return ; } [ 'O', null, 'X', 'X', 'X', 'O', 'O', null, null, ]renderSquare(i) { return ; }renderSquare(i) { return ; }renderSquare(i) { return ( this.handleClick(i)} /> ); }class Square extends React.Component { render() { return ( ); } }class Board extends React.Component { constructor(props) { super(props); this.state = { squares: Array(9).fill(null), }; } handleClick(i) { const squares = this.state.squares.slice(); squares[i] = 'X'; this.setState({squares: squares}); } renderSquare(i) { return ( this.handleClick(i)} /> ); }render() { const status = 'Next player: X'; return (

{status}

{this.renderSquare(0)} {this.renderSquare(1)} {this.renderSquare(2)}

{this.renderSquare(3)} {this.renderSquare(4)} {this.renderSquare(5)}

{this.renderSquare(6)} {this.renderSquare(7)} {this.renderSquare(8)}

); } }var player = {score: 1, name: 'Jeff'}; player.score = 2; // Now player is {score: 2, name: 'Jeff'} var player = {score: 1, name: 'Jeff'}; var newPlayer = Object.assign({}, player, {score: 2}); // Now player is unchanged, but newPlayer is {score: 2, name: 'Jeff'} // Or if you are using object spread syntax proposal, you can write: // var newPlayer = {...player, score: 2}; function Square(props) { return ( ); }class Board extends React.Component { constructor(props) { super(props); this.state = { squares: Array(9).fill(null), xIsNext: true, }; }handleClick(i) { const squares = this.state.squares.slice(); squares[i] = this.state.xIsNext ? 'X' : 'O'; this.setState({ squares: squares, xIsNext: !this.state.xIsNext, }); }render() { const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); return ( // the rest has not changed class Board extends React.Component { constructor(props) { super(props); this.state = { squares: Array(9).fill(null), xIsNext: true, }; } handleClick(i) { const squares = this.state.squares.slice(); squares[i] = this.state.xIsNext ? 'X' : 'O'; this.setState({ squares: squares, xIsNext: !this.state.xIsNext, }); } renderSquare(i) { return ( this.handleClick(i)} /> ); } render() { const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); return (

{status}

{this.renderSquare(0)} {this.renderSquare(1)} {this.renderSquare(2)}

{this.renderSquare(3)} {this.renderSquare(4)} {this.renderSquare(5)}

{this.renderSquare(6)} {this.renderSquare(7)} {this.renderSquare(8)}

); } } function calculateWinner(squares) { const lines = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6], ]; for (let i = 0; i < lines.length; i++) { const [a, b, c] = lines[i]; if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) { return squares[a]; } } return null; } render() { const winner = calculateWinner(this.state.squares); let status; if (winner) { status = 'Winner: ' + winner; } else { status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); } return ( // the rest has not changed handleClick(i) { const squares = this.state.squares.slice(); if (calculateWinner(squares) || squares[i]) { return; } squares[i] = this.state.xIsNext ? 'X' : 'O'; this.setState({ squares: squares, xIsNext: !this.state.xIsNext, }); } history = [ // Before first move { squares: [ null, null, null, null, null, null, null, null, null, ] }, // After first move { squares: [ null, null, null, null, 'X', null, null, null, null, ] }, // After second move { squares: [ null, null, null, null, 'X', null, null, null, 'O', ] }, // ... ] class Game extends React.Component { constructor(props) { super(props); this.state = { history: [{ squares: Array(9).fill(null), }], xIsNext: true, }; } render() { return (

{/* status */}

{/* TODO */}

); } } class Board extends React.Component { handleClick(i) { const squares = this.state.squares.slice(); if (calculateWinner(squares) || squares[i]) { return; } squares[i] = this.state.xIsNext ? 'X' : 'O'; this.setState({ squares: squares, xIsNext: !this.state.xIsNext, }); } renderSquare(i) { return ( this.props.onClick(i)} /> ); } render() { render() { const winner = calculateWinner(this.state.squares); let status; if (winner) { status = 'Winner: ' + winner; } else { status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); } return (

{status}

{this.renderSquare(0)} {this.renderSquare(1)} {this.renderSquare(2)}

{this.renderSquare(3)} {this.renderSquare(4)} {this.renderSquare(5)}

{this.renderSquare(6)} {this.renderSquare(7)} {this.renderSquare(8)}

); } } render() { const history = this.state.history; const current = history[history.length - 1]; const winner = calculateWinner(current.squares); let status; if (winner) { status = 'Winner: ' + winner; } else { status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); } return (

this.handleClick(i)} />

{status}

{/* TODO */}

); } render() { return (

{this.renderSquare(0)} {this.renderSquare(1)} {this.renderSquare(2)}

{this.renderSquare(3)} {this.renderSquare(4)} {this.renderSquare(5)}

{this.renderSquare(6)} {this.renderSquare(7)} {this.renderSquare(8)}

); } handleClick(i) { const history = this.state.history; const current = history[history.length - 1]; const squares = current.squares.slice(); if (calculateWinner(squares) || squares[i]) { return; } squares[i] = this.state.xIsNext ? 'X' : 'O'; this.setState({ history: history.concat([{ squares: squares, }]), xIsNext: !this.state.xIsNext, }); } const numbers = [1, 2, 3]; const doubled = numbers.map(x => x * 2); // [2, 4, 6] render() { const history = this.state.history; const current = history[history.length - 1]; const winner = calculateWinner(current.squares); const moves = history.map((step, move) => { const desc = move ? 'Go to move #' + move : 'Go to game start'; return (

); }); let status; if (winner) { status = 'Winner: ' + winner; } else { status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); } return (

this.handleClick(i)} />

{status}

{moves}

); }

Alexa: 7 tasks left

Ben: 5 tasks left

Ben: 9 tasks left

Claudia: 8 tasks left

Alexa: 5 tasks left

{user.name}: {user.taskCount} tasks left

const moves = history.map((step, move) => { const desc = move ? 'Go to move #' + move : 'Go to game start'; return (

); }); class Game extends React.Component { constructor(props) { super(props); this.state = { history: [{ squares: Array(9).fill(null), }], stepNumber: 0, xIsNext: true, }; } handleClick(i) { // this method has not changed } jumpTo(step) { this.setState({ stepNumber: step, xIsNext: (step % 2) === 0, }); } render() { // this method has not changed } handleClick(i) { const history = this.state.history.slice(0, this.state.stepNumber + 1); const current = history[history.length - 1]; const squares = current.squares.slice(); if (calculateWinner(squares) || squares[i]) { return; } squares[i] = this.state.xIsNext ? 'X' : 'O'; this.setState({ history: history.concat([{ squares: squares }]) stepNumber: history.length, xIsNext: !this.state.xIsNext, }); } render() { const history = this.state.history; const current = history[this.state.stepNumber]; const winner = calculateWinner(current.squares); // the rest has not changed

chemaxrus212exe