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

Crea un TodoList con React Context

Dificultad

  • intermediate

Duración promedio

8 hrs

Tecnologías

  • reactjs

Dificultad

  • intermediate

Duración promedio

8 hrs

Tecnologías

  • reactjs

alt text React TODO application

Crea una aplicación de un TODO list (lista de cosas por hacer) que le permita a los usuarios agregar y eliminar tasks (tareas), pero utilizando la API de contexto con un store (almacenamiento) centralizado y funciones de acción.

🌱 Como empezar este proyecto

No clones este repositorio.

El primer paso para empezar a codificar es clonando el react.js boilerplate en tu computador local, o abrirlo utilizando Gitpod.

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

b) Si estas trabajando localmente, escribe el siguiente comando desde tu línea de comandos: git clone https://github.com/4GeeksAcademy/react-hello-webapp.

🔎 Importante: recuerda crear un nuevo repositorio, actualiza el URL remoto (git remote set-url origin <your new url>), y sube el código a tu nuevo repositorio utilizando add (añadir), commit (realizar) y push (expulsar).

📝 Instrucciones:

  • Tu app debe verse así.

  • Las tareas son añadidas cuando el usuario presiona enter en el teclado, o también puedes tener tu propio botón.

  • El ícono de eliminar solo se muestra cuando se pasa el cursor sobre la tarea.

  • El usuario puede añadir cuantas tareas quiera.

  • Cuando no hay tareas, la lista deberia mostrar "sin tareas, agrega una tarea"

  • No hay manera de actualizar una traea, el usuario tendrá que eliminarla y crearla de nuevo.

💡 Tips para terminar este proyecto:

No vayas directo al código, piensa primero y ten una estrategia viable.

  • ¿Qué compnentes vas a crear? Dibuja el proyecto en una hoja blanca e identifica los componentes.

  • ¿Dónde se almacenarán las tareas en tu componente?

  • Lee acerca de controlled components inputs in react.js, necesitarás comprender el concepto.

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

  • intermediate

Duración promedio

8 hrs

Tecnologías

  • reactjs

Dificultad

  • intermediate

Duración promedio

8 hrs

Tecnologías

  • reactjs

Dificultad

  • intermediate

Duración promedio

8 hrs

Tecnologías

  • reactjs

Dificultad

  • intermediate

Duración promedio

8 hrs

Tecnologías

  • 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

  • intermediate

Duración promedio

8 hrs

Tecnologías

  • reactjs

Dificultad

  • intermediate

Duración promedio

8 hrs

Tecnologías

  • reactjs