Tutoriales y ejercicios de 4Geeks Coding Projects para personas que están aprendiendo a codificar o mejorando sus habilidades de codificación
Dificultad
beginnerRepositorio
Clic para abrirVideo
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.
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://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.
Tutoriales y ejercicios de 4Geeks Coding Projects para personas que están aprendiendo a codificar o mejorando sus habilidades de codificación
Dificultad
beginnerRepositorio
Clic para abrirVideo
No disponible
Demo en vivo
No disponible
Duración promedio
8 hrs
Tecnologías