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?
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
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 = () => 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
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
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
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
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 🙂