4Geeks logo
Sobre Nosotros

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.

Data Science and Machine Learning - 16 wks

Full-Stack Software Developer - 16w

Buscar en lecciones

Aprendizaje social y en vivo

La forma más eficiente de aprender: Únete a una cohorte con compañeros, transmisiones en vivo, sesiones improvisadas de codificación, tutorías en vivo con expertos reales y mantenga la motivación.

← Volver a Proyectos

TicTacToe con React.js

Meta

Tutoriales y ejercicios de 4Geeks Coding Projects para personas que están aprendiendo a codificar o mejorando sus habilidades de codificación

Dificultad

easy

Repositorio

Clic para abrir

Video

Clic para abrir

Demo en vivo

No disponible

Duración promedio

16 hrs

Tecnologías

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

Meta

Tutoriales y ejercicios de 4Geeks Coding Projects para personas que están aprendiendo a codificar o mejorando sus habilidades de codificación

Dificultad

easy

Repositorio

Clic para abrir

Demo en vivo

No disponible

Duración promedio

16 hrs