Tutoriales y ejercicios de 4Geeks Coding Projects para personas que están aprendiendo a codificar o mejorando sus habilidades de codificación
Dificultad
unknownRepositorio
Clic para abrirVideo
No disponible
Demo en vivo
No disponible
Duración promedio
8 hrs
Tecnologías
ReactJS
Javascript
React useState
Fetch API
React Hooks
APIs
React useEffect
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.
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.
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:
Utiliza la siguiente fetch call para sincronizar tus tareas con el servidor cada vez que haya un cambio en la lista.
1fetch('https://playground.4geeks.com/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.
Tutoriales y ejercicios de 4Geeks Coding Projects para personas que están aprendiendo a codificar o mejorando sus habilidades de codificación
Dificultad
unknownRepositorio
Clic para abrirVideo
No disponible
Demo en vivo
No disponible
Duración promedio
8 hrs
Tecnologías
ReactJS
Javascript
React useState
Fetch API
React Hooks
APIs
React useEffect