ReactJS - 02 - ReactJS之入门之00之示例
程序员文章站
2022-06-17 09:08:19
...
认识一个事物,最直接最感性的认识莫过于直截了当的拿过来看看是什么样子。
二话不说,直接看看 ReactJS DEMO 中的例子吧!
一、官网文档:
https://reactjs.org/tutorial/tutorial.html#completing-the-game
Throughout this tutorial, we touched on React concepts including elements, components, props, and state.
Next 1:
For a more detailed explanation of each of these topics, check out the rest of the documentation.
Next 2:
To learn more about defining components, check out the React.Component API reference.
二、在线运行:
http://www.runoob.com/try/try.php?filename=try_react_component
-
二话不说,直接看看 ReactJS DEMO 中的例子吧!
一、官网文档:
https://reactjs.org/tutorial/tutorial.html#completing-the-game
Throughout this tutorial, we touched on React concepts including elements, components, props, and state.
Next 1:
For a more detailed explanation of each of these topics, check out the rest of the documentation.
Next 2:
To learn more about defining components, check out the React.Component API reference.
二、在线运行:
http://www.runoob.com/try/try.php?filename=try_react_component
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>菜鸟教程 React 实例</title> <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script> <style> body { font: 14px "Century Gothic", Futura, sans-serif; margin: 20px; } ol, ul { padding-left: 30px; } .board-row:after { clear: both; content: ""; display: table; } .status { margin-bottom: 10px; } .square { background: #fff; border: 1px solid #999; float: left; font-size: 24px; font-weight: bold; line-height: 34px; height: 34px; margin-right: -1px; margin-top: -1px; padding: 0; text-align: center; width: 34px; box-sizing: border-box; display: inline-block; } .square:focus { outline: none; } .kbd-navigation .square:focus { background: #ddd; } .game { display: flex; flex-direction: row; } .game-info { margin-left: 20px; } </style> </head> <body> <div id="example"></div> <script type="text/babel"> function Square(props) { return ( <span> <button className="square" onClick={props.onClick}> {props.value} </button> <div className="square" onClick={props.onClick}> {props.value} </div> <i className="square" onClick={props.onClick}> {props.value} </i> <span className="square" onClick={props.onClick}> {props.value} </span> </span> ); } class Board extends React.Component { renderSquare(i) { return ( <Square value={this.props.squares[i]} onClick={() => this.props.onClick(i)} /> ); } render() { return ( <div> <div className="board-row"> {this.renderSquare(0)} {this.renderSquare(1)} {this.renderSquare(2)} </div> <div className="board-row"> {this.renderSquare(3)} {this.renderSquare(4)} {this.renderSquare(5)} </div> <div className="board-row"> {this.renderSquare(6)} {this.renderSquare(7)} {this.renderSquare(8)} </div> </div> ); } } class Game extends React.Component { constructor(props) { super(props); this.state = { history: [{ squares: Array(9).fill(null), }], stepNumber: 0, xIsNext: true, }; } 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, }]), xIsNext: !this.state.xIsNext, stepNumber: history.length }); } jumpTo(step) { this.setState({ stepNumber: step, xIsNext: (step % 2) === 0 }); } render() { const history = this.state.history; const current = history[this.state.stepNumber]; const winner = calculateWinner(current.squares); let status; if (winner) { status = 'Winner: ' + winner; } else { status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); } const moves = history.map((item, indexStep) => { const desc = indexStep ? 'Go to move #' + indexStep : 'Go to game start'; return ( <li key={indexStep}> <button onClick={() => this.jumpTo(indexStep)}>{desc}</button> </li> ); }); return ( <div className="game"> <div className="game-board"> <Board squares={current.squares} onClick={(i) => this.handleClick(i)} /> </div> <div className="game-info"> <div>{status}</div> <ol>{moves}</ol> </div> </div> ); } } // ======================================== ReactDOM.render( <Game />, document.getElementById('example') ); 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; } </script> </body> </html>
-