Si tiene un buen conocimiento de HTML, CSS, JavaScript y React, es posible que se pregunte a dónde ir en su viaje de aprendizaje. Entonces, ¿por qué no echa un vistazo al nuevo tutorial gratuito de Scrimba sobre cómo construir el clásico juego de tic-tac-toe en React?
Haga clic arriba para ir al tutorial.
El juego de ejemplo se extrae de los tutoriales oficiales de React, pero se actualiza utilizando los ganchos de React, el último tema candente en el mundo de React.
Este artículo le brinda una descripción general del tutorial y le permite hacer clic en los screencasts y jugar con el código en cualquier momento.
Si sus habilidades de HTML, CSS, JavaScript o React se sienten inestables, no temas: Scrimba ofrece una amplia gama de tutoriales para ponerlo al día. Recomendamos los siguientes cursos para prepararte para el tutorial de tic-tac-toe:
- Curso intensivo de HTML y CSS con Kevin Powell
- Introducción a Javascript con Dylan C. Israel
- Aprenda React gratis con Bob Ziroll
En el verdadero estilo de Scrimba, el tutorial de Build Tic-Tac-Toe con React Hooks contiene muchos desafíos interactivos en el camino, por lo que incorporará su aprendizaje y se sentirá como un asistente de hooks al final.
El curso está dirigido por Thomas Weibenfalk, un apasionado desarrollador, diseñador e instructor de codificación de Suecia. A Thomas le encanta enseñar a las personas sobre el desarrollo front-end, especialmente React, lo que lo convierte en el maestro ideal para guiarlo a través de esta experiencia de aprendizaje.
Suponiendo que esté listo para usar tic-tac-toe, ¡comencemos!
Introducción
En la primera malla, Thomas nos cuenta sus planes para el tutorial y comparte la documentación oficial de React, a la que podemos consultar para obtener una explicación más detallada de las características utilizadas para construir el juego.
Además de hablarnos sobre la estructura de archivos que ha implementado para la aplicación, Thomas también nos da nuestro primer vistazo del producto terminado. Haga clic en la imagen de arriba para visitar el elenco.
Componentes de andamios
A continuación, Thomas nos explica cómo configurar los archivos Board.js, Game.js y Square.js necesarios para crear el juego. También vemos cómo importar Game.js en el archivo App.js.
import React from "react"; import Game from "./components/Game"; const App = () => ; export default App; Componentes cuadrados y accesorios de desestructuración
En la siguiente malla, creamos nuestro componente cuadrado usando JSX para agregar un botón:
const Square = (props) => ( {props.value} ); Para nuestro primer desafío, Thomas nos anima a desestructurar los puntales de nuestro componente. Haz clic en el elenco para probar el desafío.
Funciones de componentes de placa y andamios
Ahora es el momento de crear el componente del tablero importando el componente cuadrado y agregando nueve instancias del mismo al tablero (tenga en cuenta que lo refactorizaremos con un bucle para mejorar el código más adelante):
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 también amplía las funciones que necesitamos en Game.js, que completaremos más adelante.
Estilo cuadrado
Haga clic en la imagen para acceder al elenco.
A continuación, diseñamos nuestros cuadrados usando el styleaccesorio predeterminado:
const style = { background: "lightblue", border: "2px solid darkblue", fontSize: "30px", fontWeight: "800", cursor: "pointer", outline: "none", }; const Square = ({ value, onClick }) => ( {value} ); Estilo de tablero
Haga clic en la imagen para acceder a la malla.
Ahora que nuestros cuadrados están listos, es hora de darle estilo al tablero. Thomas nos inicia creando una vez más un objeto de estilo, esta vez con CSS grid:
const style = { border: "4px solid darkblue", borderRadius: "10px", width: "250px", height: "250px", margin: "0 auto", display: "grid", gridTemplate: "repeat(3, 1fr) / repeat(3, 1fr)", }; Nuestro desafío ahora es aplicar el objeto de estilo al tablero. Dirígete a la malla para probarlo.
No lo olvides, aunque Thomas ha proporcionado excelentes opciones de estilo, Scrimba es completamente interactivo, por lo que puedes personalizar tu juego como prefieras, ¡deja volar tu imaginación!
Explicación de la función calculateWinner
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; } A continuación, Thomas explica la calculateWinner()función más importante , que se tomó del tutorial original de reactjs.org. Dirígete al elenco para explorar la función y escuchar cómo funciona.
Crear estados y completar con datos iniciales
En la siguiente malla, comenzamos a crear la lógica del juego.
Comenzamos agregando un gancho llamado usedStateen Game.js y creando estados para establecer un tablero vacío y especificar el siguiente jugador. Por último, agregamos const winner, que nos dice si el último movimiento fue ganador:
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:
const Board = ({ squares, onClick }) => ( {squares.map((square, i) => ( onClick(i)} /> ))} ); Create the handleClick Function
Next, we create the handleClick() function, which carries out the calculations when we make a move:
const handleClick = (i) => const boardCopy = [...board]; // If user click an occupied square or if game is won, return if (winner ; 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.
{winner ? "Winner: " + winner : "Next Player: " + (xIsNext ? "X" : "O")}
We now have the all knowledge needed to create a fully working tic-tac-toe game with React hooks!
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.
Así que ahí lo tenemos: ¡un juego de tic-tac-toe completamente funcional que usa React hooks! Espero que este tutorial le haya resultado útil. No lo olvide, puede consultarlo en cualquier momento para refrescar su memoria de los temas tratados o jugar con el código en los screencasts interactivos.
A continuación, ¿por qué no echa un vistazo a algunos de los muchos otros tutoriales disponibles en Scrimba? Con una amplia gama de temas, hay algo para todos.
Feliz aprendizaje :)