Se você tem um bom entendimento de HTML, CSS, JavaScript e React e está se perguntando para onde ir em seguida na sua jornada de aprendizado, por que não conferir Novo tutorial grátis do Scrimba sobre como construir o clássico jogo Tic Tac Toe no React?

Jogo totalmente funcional


Clique acima para ir para o tutorial.

O jogo de exemplo é extraído dos tutoriais oficiais do React, mas é atualizado com os ganchos do React – o tópico mais recente do mundo do React. Este artigo fornece uma visão geral do tutorial e permite clicar nos screencasts e jogar com o código a qualquer momento.

Se suas habilidades em HTML, CSS, JavaScript ou React parecerem instáveis, não tenha medo – o Scrimba oferece uma enorme variedade de tutoriais para você se atualizar. Recomendamos os seguintes cursos para você se preparar para o tutorial Tic Tac Toe:

No verdadeiro estilo Scrimba, o tutorial Build Tic Tac Toe with React Hooks contém muitos desafios interativos ao longo do caminho, para que você incorpore seu aprendizado e se sinta como um assistente de ganchos no final.

O curso é liderado por Thomas Weibenfalk, um desenvolvedor apaixonado, designer e instrutor de codificação da Suécia. Thomas adora ensinar as pessoas sobre o desenvolvimento front-end, especialmente o React, tornando-o o professor ideal para levá-lo nessa experiência de aprendizado.

Supondo que você esteja pronto para usar o Tic Tac Toe, vamos começar!

Introdução

Tic Tac Toe com ganchos React slide

No o primeiro scrim, Thomas nos conta sobre seus planos para o tutorial e compartilha as Documentação oficial de reação, ao qual podemos nos referir para obter uma explicação mais detalhada dos recursos usados ​​para criar o jogo.

Além de nos falar sobre a estrutura de arquivos que ele implementou para o aplicativo, Thomas também nos oferece um primeiro vislumbre do produto final. Clique na imagem acima para visitar o elenco.

Componentes do andaime

Próximo, Thomas fala conosco através da configuração dos arquivos Board.js, Game.js e Square.js necessários para criar o jogo. Também vemos como importar o Game.js para o arquivo App.js.

import React from "react";import Game from "./components/Game";const App = () => ;export default App;

Componente quadrado e suportes de desestruturação

No o próximo scrim, criamos nosso componente quadrado usando JSX para adicionar um botão:

const Square = (props) => (	);

Para o nosso primeiro desafio, Thomas nos incentiva a desestruturar os adereços em nosso componente. Clique através ao elenco para tentar o desafio.

Funções de andaimes e componentes da placa

Agora é hora de criar o componente da placa importando o componente quadrado e adicionando nove instâncias ao quadro (observe que refatoraremos isso com um loop para melhorar o código posteriormente):

onClick("dummy value")} /> onClick("dummy value")} /> onClick("dummy value")} /> onClick("dummy value")} /> onClick("dummy value")} /> onClick("dummy value")} /> onClick("dummy value")} /> onClick("dummy value")} /> onClick("dummy value")} />

Thomas também detalha as funções que precisamos no Game.js, que concluiremos mais adiante.

Estilo quadrado

aplicativo com quadrados estilizados
Clique na imagem para acessar o elenco.

Próximo, estilizamos nossos quadrados usando o style prop padrão:

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

Estilo da placa

aplicativo com placa estilizada
Clique na imagem para acessar a tela.

Agora que nossos quadrados estão prontos, é hora de estilizar o quadro. Thomas nos inicia criando mais uma vez um objeto de estilo, desta vez com a grade 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)",};

Nosso desafio agora é aplicar o objeto de estilo ao quadro. Head over para o scrim para tentar.

Não se esqueça, enquanto Thomas oferece ótimas opções de estilo, o Scrimba é totalmente interativo, portanto você pode personalizar seu jogo da maneira que preferir – deixe sua imaginação correr solta!

A função calculWinner explicada

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

Próximo, Thomas explica o importante calculateWinner() , que é retirada do tutorial original de reactjs.org. Head over para o elenco para explorar a função e ouvir como ela funciona.

Criar estados e preencher com dados iniciais

Na próxima scrim, começamos a criar a lógica do jogo.

Começamos adicionando um gancho chamado usedState no Game.js e na criação de estados para definir um tabuleiro vazio e especificar o próximo jogador. Por fim, adicionamos const winner, que nos informa se a última ação foi vencedora:

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

No Board.js, excluímos nossos quadrados renderizados manualmente e os substituímos por quadrados mapeados, conforme prometido anteriormente. Clique através para ver isso em detalhes:

const Board = ({ squares, onClick }) => (	
{squares.map((square, i) => ( onClick(i)} /> ))}
);

Criar a função handleClick

Próximo, criamos o handleClick() , que realiza os cálculos quando fazemos um movimento:

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

Função renderMoves e o último JSX

Jogo totalmente funcional
Clique acima para ir para o tutorial.

Neste scrim, criamos o JSX que torna o jogo jogável.

<>    

{winner ? "Winner: " + winner : "Next Player: " + (xIsNext ? "X" : "O")}

Agora temos todo o conhecimento necessário para criar um jogo Tic Tac Toe totalmente funcional com ganchos React!

BÔNUS: Implementar viagem no tempo

Recurso de viagem no tempo em ação
Clique na imagem para acessar o tutorial de bônus.

No scrim bônus, levamos nosso jogo ao próximo nível, implementando a viagem no tempo para revisar as jogadas feitas ao longo do jogo. Clique para obter os presentes neste tutorial bônus.

Então, aqui está - um jogo Tic Tac Toe totalmente funcional, usando ganchos React! Espero que você tenha achado este tutorial útil. Não se esqueça, você pode consultá-lo a qualquer momento para atualizar sua memória dos tópicos abordados ou brincar com o código nos screencasts interativos.

A seguir, por que não conferir alguns dos muitos tutoriais disponíveis em Scrimba? Com uma enorme variedade de tópicos, há algo para todos.

Feliz aprendizado 🙂



Fonte