The premise
We understand the design idea of React. Let’s create a tic-Tac-toe function based on the official document to experience how React is implemented.
The initial template
<! DOCTYPE html><html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>.document.getElementById('root'));</script>
</body>
</html>
Copy the codeStyle:
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;
}
.square:focus {
outline: none;
}
.kbd-navigation .square:focus {
background: #ddd;
}
.game {
display: flex;
flex-direction: row;
}
.game-info {
margin-left: 20px;
}
Copy the codeTrain of thought
1. Let’s draw the interface of tic-Tac-toe first. 2. Implement the winning rule. 4. Save the execution status
interface
// Define the tic-tac-toe grid
function Square(props) {
return (
<button className="square" >
{props.value}
</button>
);
}
// Build interface,return () is why JSX compiles syntax
class Board extends React.Component {
renderSquare(i) {
return (
<Square
value={i}
/>
);
}
render() {
let res = 0;
return (
<div>
{
Array.from(Array(3), (e, i) => {
return (
<div className="board-row">
{Array.from(Array(3), (r, j) => {
res++
return (
this.renderSquare(res)
)
})}
</div>)})}</div>)}}// The main implementation
class Game extends React.Component {
render() {
return (
<div className="game">
<div className="game-board">
<Board />
</div>
</div>); }}/ / a mount
ReactDOM.render(<Game />.document.getElementById("root"));
Copy the codeRules to determine
function calculateWinner(squares) {
const lines = [ // Define an array of terminating conditions
[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]) {
returnsquares[a]; }}return null;
}
Copy the codeThe interactive behavior
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
}
]),
stepNumber: history.length,
xIsNext:!this.state.xIsNext
});
}
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);
const moves = history.map((step, move) = > {
const desc = move ?
'the first' + move + "Step" :
'开始';
return (
<li key={move}>
<button onClick={()= > this.jumpTo(move)}>{desc}</button>
</li>
);
});
let status = winner ? "Win." + winner : "Next contestant:" + (this.state.xIsNext ? "X" : "O");
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>); }}Copy the codeThe overall code
<! DOCTYPE html><html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/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;
}
.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="root"></div>
<script type="text/babel">
// Define the tic-tac-toe grid
function Square(props) {
return (
<button className="square" onClick={props.onClick}>
{props.value}
</button>
);
}
// Build interface,return () is why JSX compiles syntax
class Board extends React.Component {
renderSquare(i) {
return (
<Square
value={this.props.squares[i]}
onClick={()= > this.props.onClick(i)}
/>
);
}
render() {
let res = 0;
return (
<div>
{
Array.from(Array(3), (e, i) => {
return (
<div className="board-row">
{Array.from(Array(3), (r, j) => {
res++
return (
this.renderSquare(res)
)
})}
</div>)})}</div>)}}// The main implementation
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
}
]),
stepNumber: history.length,
xIsNext:!this.state.xIsNext
});
}
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);
const moves = history.map((step, move) = > {
const desc = move ?
'the first' + move + "Step" :
'开始';
return (
<li key={move}>
<button onClick={()= > this.jumpTo(move)}>{desc}</button>
</li>
);
});
let status = winner ? "Win." + winner : "Next contestant:" + (this.state.xIsNext ? "X" : "O");
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>); }}/ / a mount
ReactDOM.render(<Game />.document.getElementById("root"));
// Determine the rule
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]) {
returnsquares[a]; }}return null;
}
</script>
</body>
</html>
Copy the code