react 生命挂钩_了解如何使用React挂钩构建井字游戏

最新推荐文章于 2024-11-07 09:43:57 发布

cumifi2519

最新推荐文章于 2024-11-07 09:43:57 发布

阅读量372

点赞数

文章标签：游戏 react javascript 编程语言 vue ViewUI

原文链接：https://www.freecodecamp.org/news/learn-how-to-build-tic-tac-toe-with-react-hooks/

版权

react 生命挂钩

If you have a good understanding of HTML, CSS, JavaScript, and React you might be wondering where to go next on your learning journey. So why not check out Scrimba's brand new, free tutorial on how to build the classic tic-tac-toe game in React?

如果您对HTML，CSS，JavaScript和React有了很好的了解，那么您可能想知道学习旅程的下一步。那么，为什么不查看Scrimba的全新免费教程，了解如何在React中构建经典的井字游戏呢？

Click above to go to the tutorial.

单击上方转到该教程。

The example game is pulled from React's official tutorials but is brought up to date using React hooks - the latest hot topic in the React world.

该示例游戏取自React的官方教程，但使用React hooks进行了更新(React hooks)-React世界中最新的热门话题。

This article gives you an overview of the tutorial and lets you click through to the screencasts and play with the code at any time.

本文为您提供了本教程的概述，并允许您单击以观看截屏视频并随时使用代码。

If your HTML, CSS, JavaScript or React skills feel shaky, never fear - Scrimba offers a huge range of tutorials to bring you up to speed. We recommend the following courses to get you ready for the tic-tac-toe tutorial:

如果您HTML，CSS，JavaScript或React技能感到不稳定，请别担心-Scrimba提供了许多教程来帮助您快速入门。我们推荐以下课程，以帮助您准备tic-tac-toe教程：

HTML & CSS Crash Course with Kevin Powell
Kevin Powell的HTML和CSS速成课程
Introduction to Javascript with Dylan C. Israel
Dylan C. Israel的Java语言介绍
Learn React for Free with Bob Ziroll
与Bob Ziroll 免费学习React

In true Scrimba style, the Build Tic-Tac-Toe with React Hooks tutorial contains loads of interactive challenges along the way, so you'll embed your learning and feel like a hooks wizard by the end of it.

以真正的Scrimba风格，“使用React Hooks构建井字游戏”教程在此过程中包含许多交互式挑战，因此您可以将自己的学习内容嵌入其中，并在学习结束时感觉像是一个钩子向导。

The course is led by Thomas Weibenfalk, a passionate developer, designer, and coding instructor from Sweden. Thomas loves teaching people about front-end development, especially React, making him the ideal teacher to take you through this learning experience.

该课程由来自瑞典的热情的开发人员，设计师和编码讲师Thomas Weibenfalk主持。托马斯(Thomas)喜欢教人们有关前端开发的知识，尤其是React(React)，使他成为带您学习这种学习经验的理想老师。

Assuming you're ready to go with tic-tac-toe, let's get started!

假设您已经准备好使用井字游戏，那就开始吧！

介绍 (Introduction)

In the first scrim, Thomas tells us about his plans for the tutorial and shares the Official React Documentation, which we can refer to for a more detailed explanation of the features used to build the game.

在第一个稀松布中，Thomas向我们介绍了他的教程计划，并分享了官方的React文档，我们可以参考该文档以更详细地说明用于构建游戏的功能。

As well as talking us through the file structure he has implemented for the app, Thomas also gives us our first glimpse of the finished product. Click the image above to visit the cast.

除了向我们介绍他为该应用程序实现的文件结构外，Thomas还向我们展示了成品的第一印象。点击上面的图片访问演员表。

脚手架组件 (Scaffolding Components)

Next up, Thomas talks us through setting up the Board.js, Game.js and Square.js files needed to create the game. We also see how to import Game.js into the App.js file.

接下来，Thomas通过设置创建游戏所需的Board.js，Game.js和Square.js文件与我们交谈。我们还将看到如何将Game.js导入App.js文件。

import React from "react";
import Game from "./components/Game";

const App = () => <Game />;

export default App;

方形组件和销毁道具 (Square Component and Destructuring Props)

In the next scrim, we create our square component using JSX to add a button:

在下一个scrim中，我们使用JSX创建一个正方形组件以添加一个按钮：

const Square = (props) => (
	<button onClick={props.onClick}>{props.value}</button>
);

For our first challenge, Thomas encourages us to destructure out the props in our component. Click through to the cast to give the challenge a try.

对于我们的第一个挑战，托马斯(Thomas)鼓励我们分解组件中的道具。点击进入演员表，尝试挑战。

电路板组件和脚手架功能 (Board Component and Scaffolding Functions)

Now it's time to create the board component by importing the square component and adding nine instances of it to the board (note that we will refactor this with a loop to improve the code later):

现在是时候通过导入方形组件并将其添加到木板中的九个实例来创建木板组件 (请注意，我们将通过循环对其进行重构，以在以后改进代码)：

<div>
	<Square value="1" onClick={() => onClick("dummy value")} />
	<Square value="2" onClick={() => onClick("dummy value")} />
	<Square value="3" onClick={() => onClick("dummy value")} />
	<Square value="4" onClick={() => onClick("dummy value")} />
	<Square value="5" onClick={() => onClick("dummy value")} />
	<Square value="6" onClick={() => onClick("dummy value")} />
	<Square value="7" onClick={() => onClick("dummy value")} />
	<Square value="8" onClick={() => onClick("dummy value")} />
	<Square value="9" onClick={() => onClick("dummy value")} />
</div>

Thomas also scaffolds out the functions we need in Game.js, which we'll complete later.

Thomas还提供了Game.js中所需的功能，稍后我们将完成这些功能。

方形样式 (Square Styling)

Click the image to access the cast.

点击图片即可访问演员表。

Next up, we style our squares using the style default prop:

接下来，我们使用默认属性prop设置正方形的style ：

const style = {
	background: "lightblue",
	border: "2px solid darkblue",
	fontSize: "30px",
	fontWeight: "800",
	cursor: "pointer",
	outline: "none",
};

const Square = ({ value, onClick }) => (
	<button style={style} onClick={onClick}>
		{value}
	</button>
);

板样式 (Board Styling)

Click the image to access the scrim.

单击图像以访问稀松布。

Now that our squares are ready, it's time to the style the board. Thomas kicks us off by once again creating a style object, this time with CSS grid:

现在我们的方块已经准备好了，是时候为木板添加样式了。 Thomas再次通过创建样式对象开始我们，这次使用CSS网格：

const style = {
	border: "4px solid darkblue",
	borderRadius: "10px",
	width: "250px",
	height: "250px",
	margin: "0 auto",
	display: "grid",
	gridTemplate: "repeat(3, 1fr) / repeat(3, 1fr)",
};

Our challenge now is to apply the style object to the board. Head over to the scrim to give it a try.

现在，我们面临的挑战是将样式对象应用于木板。前往稀松布，尝试一下。

Don't forget, while Thomas has provided some great styling options, Scrimba is fully interactive, so you are free to customize your game however you prefer - let your imagination run wild!

别忘了，尽管Thomas提供了一些不错的样式选项，但是Scrimba是完全交互式的，因此您可以自由选择自己喜欢的游戏，让您的想象力疯狂！

calculateWinner函数解释 (The calculateWinner Function Explained)

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

Next up, Thomas explains the all-important calculateWinner() function, which is taken from the original tutorial from reactjs.org. Head over to the cast to explore the function and hear how it works.

接下来，托马斯解释了所有重要的calculateWinner()函数，该函数取自reactjs.org的原始教程。前往演员表探索该功能并了解其工作原理。

创建状态并填充初始数据 (Create States and Fill with Initial Data)

In the next scrim, we start creating the logic for the game.

在下一个scrim中，我们开始为游戏创建逻辑。

We begin by adding a hook called usedState in Game.js and creating states to set an empty board and specify the next player. Lastly, we add const winner, which tells us whether the latest move was a winning one:

我们首先在Game.js中添加一个名为usedState的钩子，并创建状态以设置一个空棋盘并指定下一个玩家。最后，我们添加const winner ，它告诉我们最近的举动是否是获胜的举动：

const [board, setBoard] = useState(Array(9).fill(null));
const [xIsNext, setXisNext] = useState(true);
const winner = calculateWinner(board);

Over in Board.js, we delete our manually-rendered squares and replace them with mapped squares as promised earlier. Click through to see this in detail:

在Board.js中，我们删除了手动渲染的正方形，并按照之前的承诺将其替换为映射的正方形。单击以查看详细信息：

const Board = ({ squares, onClick }) => (
	<div style={style}>
		{squares.map((square, i) => (
			<Square key={i} value={square} onClick={() => onClick(i)} />
		))}
	</div>
);

创建handleClick函数 (Create the handleClick Function)

Next, we create the handleClick() function, which carries out the calculations when we make a move:

接下来，我们创建handleClick()函数，该函数在进行移动时执行计算：

const handleClick = (i) => {
	const boardCopy = [...board];
	// If user click an occupied square or if game is won, return
	if (winner || boardCopy[i]) return;
	// Put an X or an O in the clicked square
	boardCopy[i] = xIsNext ? "X" : "O";
	setBoard(boardCopy);
	setXisNext(!xIsNext);
};

renderMoves函数和最后一个JSX (renderMoves Function and the Last JSX)

Click above to go to the tutorial.

单击上方转到该教程。

In this scrim, we create the JSX which makes the game playable.

在此稀松布艺中，我们创建了使游戏可玩的JSX。

<>
  <Board squares={board} onClick={handleClick} />
  <div style={styles}>
    <p>
      {winner ? "Winner: " + winner : "Next Player: " + (xIsNext ? "X" : "O")}
    </p>
  </div>
</>

We now have the all knowledge needed to create a fully working tic-tac-toe game with React hooks!

现在，我们拥有使用React钩子创建完全可用的井字游戏所需的全部知识！

奖励：实施时空旅行 (BONUS: Implement Time Travel)

Click the image to go to the bonus tutorial.

单击图像转到奖金教程。

In the bonus scrim, we take our game to the next level by implementing time travel to review the moves made throughout the game. Click through to get the goodies in this bonus tutorial.

在奖金争夺战中，我们通过进行时空旅行来回顾游戏中的所有动作，从而将游戏提升到一个新的水平。单击以获取此奖励教程中的好东西。

So there we have it - a fully working tic-tac-toe game using React hooks! I hope you found this tutorial helpful. Don't forget, you can refer back to it at any time to refresh your memory of the topics covered or play around with the code in the interactive screencasts.

因此，我们有了它-使用React钩子的完全可用井字游戏！希望本教程对您有所帮助。别忘了，您可以随时参考它以刷新您对所涵盖主题的记忆，或者在交互式截屏视频中使用代码。

Next up, why not check out some of many other tutorials available on Scrimba? With a huge range of topics, there is something for everyone.

接下来，为什么不查看Scrimba上的许多其他教程呢？主题众多，适合所有人。

Happy learning :)

快乐学习:)