4Geeks logo
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.

Full-Stack Software Developer

Data Science and Machine Learning - 16 wks

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

Continúa aprendiendo gratis sobre:

Aplicación de Todolist usando React y Fetch

Meta

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

Dificultad

beginner

Repositorio

Clic para abrir

Video

No disponible

Demo en vivo

No disponible

Duración promedio

8 hrs

Tecnologías

Debes hacer este ejercicio después de la aplicación de la TODO List porque la primera parte es el boilerplate perfecto para comenzar a usar API's.

Para esta segunda parte, sincronizaremos nuestra lista de tareas con una base de datos real, usando la siguiente RESTful y API pública realizada para este ejercicio.

🔗 Clic aquí para acceder a la documentación de la API del TODO-list .

👆Aqui hay un video explicando como usar el TodoList API con Fetch.

Todo este ejercicio se trata de la programación de asíncrona porque las interacciones from y to del servidor deben realizarse de forma asíncrona. De esa manera, el usuario no tiene que esperar a que llegue la información.

🌱 Cómo comenzar este proyecto

No clones este repositorio porque vamos a usar una plantilla diferente.

Recomendamos abrir el react boilerplate usando una herramienta de aprovisionamiento como Codespaces (recomendado) o Gitpod. Alternativamente, puedes clonarlo en tu computadora local usando el comando git clone.

Este es el repositorio que necesitas abrir o clonar:

https://github.com/4GeeksAcademy/react-hello

👉 Por favor sigue estos pasos cómo comenzar un proyecto de codificación.

💡 Importante: Recuerda guardar y subir tu código a GitHub creando un nuevo repositorio, actualizando el remoto (git remote set-url origin <your new url>) y subiendo el código a tu nuevo repositorio usando los comandos add, commit y push desde la terminal de git.

📝 Instrucciones:

  • Haz que tu TODO List se sincronice con la API de backend cada vez que se agregue o elimine una tarea.
  • Agregue un botón de limpieza de todas las tareas que eliminará toda la lista del servidor y actualizará la lista vacía en el front-end.

Hay 3 momentos críticos en la línea de tiempo de la aplicación (denominado tiempo de ejecución) para centrarse en su integración:

  • Después de que la lista se carga vacía por primera vez (componentDidMount): debes obtener (GET) los datos de la API y actualizar las tareas cuando la información finalmente llegue.
  • Cuando se agrega una nueva tarea: debes PONER (PUT) la nueva lista en el servidor.
  • Cuando se elimina una tarea: Debes PONER (PUT) la nueva lista en el servidor.

💡 Pista

Utiliza la siguiente fetch call para sincronizar tus tareas con el servidor cada vez que haya un cambio en la lista.

1fetch('https://assets.breatheco.de/apis/fake/todos/user/alesanchezr', { 2 method: "PUT", 3 body: JSON.stringify(todos), 4 headers: { 5 "Content-Type": "application/json" 6 } 7 }) 8 .then(resp => { 9 console.log(resp.ok); // Será true (verdad) si la respuesta es exitosa. 10 console.log(resp.status); // el código de estado = 200 o código = 400 etc. 11 console.log(resp.text()); // Intentará devolver el resultado exacto como cadena (string) 12 return resp.json(); // (regresa una promesa) will try to parse the result as json as return a promise that you can .then for results 13 }) 14 .then(data => { 15 //Aquí es donde debe comenzar tu código después de que finalice la búsqueda 16 console.log(data); //esto imprimirá en la consola el objeto exacto recibido del servidor 17 }) 18 .catch(error => { 19 //manejo de errores 20 console.log(error); 21 });

Para cualquier otra solicitud, debes seguir cambiando las variables en el fetch:El URL, el método y el payload (carga útil).

Este y otros proyectos son usados para aprender a programar por parte de los alumnos de 4Geeks Academy Coding Bootcamp realizado por Alejandro Sánchez y muchos otros contribuyentes. Conoce más sobre nuestros Curso de Programación para convertirte en Full Stack Developer, o nuestro Data Science Bootcamp.

Meta

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

Dificultad

beginner

Repositorio

Clic para abrir

Video

No disponible

Demo en vivo

No disponible

Duración promedio

8 hrs