A tu propio ritmo

Explora nuestra extensa colección de cursos diseñados para ayudarte a dominar varios temas y habilidades. Ya seas un principiante o un aprendiz avanzado, aquí hay algo para todos.

Bootcamp

Aprende en vivo

Únete a nosotros en nuestros talleres gratuitos, webinars y otros eventos para aprender más sobre nuestros programas y comenzar tu camino para convertirte en desarrollador.

Próximos eventos en vivo

Catálogo de contenidos

Para los geeks autodidactas, este es nuestro extenso catálogo de contenido con todos los materiales y tutoriales que hemos desarrollado hasta el día de hoy.

Tiene sentido comenzar a aprender leyendo y viendo videos sobre los fundamentos y cómo funcionan las cosas.

Buscar en lecciones


IngresarEmpezar

Regístrate en 4Geeks

← Volver a Proyectos

TicTacToe con React.js

Dificultad

  • easy

Duración promedio

16 hrs

Tecnologías

  • javascript

  • reactjs

Dificultad

  • easy

Duración promedio

16 hrs

Tecnologías

  • javascript

  • reactjs

alt text TicTacToe Con React

Es hora de empezar a construir cosas geniales, ¡codifiquemos nuestro primer juego!

Preview for tictactoe

🌱 Cómo iniciar este proyecto

El primer paso para comenzar a codificar es clonar el react.js boilerplate en tu computador local o con Gitpod.

a) Si usas Gitpod (recomendado) puedes clonar el boilerplate clic aquí.

b) Si trabajas localmente, escribe el siguiente comando en tu terminal: 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:

  1. Diseña tu sitemap: ¿Cuántas páginas / vistas?
  2. Diseñando tu estructura (wireframe): ¿Qué componentes y dónde?
  3. Comienza a codificar tus componentes solo para mostrar "Hola mundo" en cada uno de ellos (para asegurarse de que funcionan).
  4. 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)
  5. Crea unas funciones de javascript que manejen cada uno de esos eventos.
  6. Console.log en cada una de esas funciones para asegurarse de que se están llamando.
  7. 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 a proyectos similares

Lo usaremos para darte acceso a la comunidad.
¿Ya tienes una cuenta? Inicia sesión aquí.

Dificultad

  • easy

Duración promedio

16 hrs

Tecnologías

  • javascript

  • reactjs

Dificultad

  • easy

Duración promedio

16 hrs

Tecnologías

  • javascript

  • reactjs

Dificultad

  • easy

Duración promedio

16 hrs

Tecnologías

  • javascript

  • reactjs

Dificultad

  • easy

Duración promedio

16 hrs

Tecnologías

  • javascript

  • reactjs

Regístrate para obtener acceso a proyectos similares

Lo usaremos para darte acceso a la comunidad.
¿Ya tienes una cuenta? Inicia sesión aquí.

Dificultad

  • easy

Duración promedio

16 hrs

Tecnologías

  • javascript

  • reactjs

Dificultad

  • easy

Duración promedio

16 hrs

Tecnologías

  • javascript

  • reactjs

Material de apoyo

Para prepararte mejor para completar estos ejercicios, sugerimos los siguientes materiales

Lección

Hooks de React

Ejercicio

Curso de React.js desde cero y ejercicios interactivos

Lección

Aprender React Aquí: Tutorial de React Js