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