Empezar tutorial interactivo
TicTacToe con React.js
Es hora de empezar a construir cosas geniales, ¡codifiquemos nuestro primer juego!
🌱 Cómo iniciar este proyecto
No clones este repositorio porque usaremos una plantilla diferente.
Recomendamos abrir el react.js boilerplate, utilizando una herramienta de aprovisionamiento como Codespaces (recomendado) o Gitpod. Alternativamente, puedes clonar el repositorio de GitHub en tu computadora local utilizando el comando git clone.
Este es el repositorio que necesitas abrir o clonar:
1$ git clone https://github.com/4GeeksAcademy/react-hello
💡 Importante: Recuerda actualizar el remote del proyecto con el de tu repositorio usando git remote set-url origin <your new url>, y luego guardar tu código en tu nuevo repositorio usando add, commit y push.
📝 Instrucciones
Crea un tictactoe en React.js al igual que este. Recuerda seguir el flujo de trabajo recomendado para comenzar la codificación:
- Diseña tu sitemap: ¿Cuántas páginas / vistas?
- Diseñando tu estructura (wireframe): ¿Qué componentes y dónde?
- Comienza a codificar tus componentes solo para mostrar "Hola mundo" en cada uno de ellos (para asegurarse de que funcionan).
- Crea una lista de todas las posibles interacciones (eventos) del usuario y del sistema que se producen durante el tiempo de ejecución (por ejemplo: el usuario hace clic en un botón para iniciar el juego)
- Crea unas funciones de javascript que manejen cada uno de esos eventos.
Console.logen cada una de esas funciones para asegurarse de que se están llamando.- Continúa... mira el video si tienes alguna otra duda.
Conceptos que debes aprender:
- State de los componentes (variables globales)
- Props
- Metódo de Renderizado
- La función para comprobar el ganador es un gran algoritmo de aprendizaje.
Video Tutorial:
Aquí hay un video que explica cómo hacerlo: https://www.youtube.com/watch?v=MQonrbY8Ezg&list=PLx0T51ydRO_7qabdLlT69keo68WmbXkrB
Regístrate para obtener acceso gratis a archivos y video de la solución
Regístrate para obtener acceso gratis a archivos y video de la solución
Material de apoyo
Para prepararte mejor para completar estos ejercicios, sugerimos los siguientes materiales