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

Lista de Contactos usando React & Context

Meta

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

Dificultad

intermediate

Repositorio

Clic para abrir

Video

No disponible

Demo en vivo

No disponible

Duración promedio

24 hrs

Tecnologías

Tecnologías: HTML, CSS, JS, React, React Router y Context.

¡Hola! Es hora de empezar a hacer aplicaciones frontales profesionales. Esta vez Crearemos una pequeña aplicación de gestión de contactos que permitirá a los usuarios: Leer, crear, actualizar y eliminar contactos.

Puedes usar este gif: Compruébalo aquí!

O bien estas imágenes: Imagen 1 y Imagen 2!

🌱 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-webapp

👉 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.

  1. Instala /nodes_modules
$ npm install
  1. Ejecuta el servidor webpack development
$ npm run start

Este boilerplate no tiene funcionalidades, pero si tiene el 99.9 % del HTML/CSS que necesitarás en este proyecto, lo que te permitirá enfocarte en las funcionalidades.

Por favor, use el Contexto para este proyecto: La plantilla viene con el Contexto configurado. Verifique la carpeta / store.

Nota: necesitarás codificar todas las funcionalidades.

📝 El proyecto se divide en:

2️⃣ vistas diferentes:

  1. Contacto: Contiene la lista de contactos.
  2. AddContact: es solo un formulario utilizado para crear o actualizar contactos.

Un componente:

Tarjeta de contacto: muestra solo un contacto.

TO-DO funcionalidades

  • Debes agregar el código necesario para que su aplicación maneje los contactos, específicamente:
    • crea,
    • actualiza,
    • y elimina.
  • (Opcional) Solicite al usuario una confirmación antes de eliminarla, use el componente modal para eso.

Todas las funcionalidades deben implementarse en el objeto actions (store.js).

Sugerencia: comience con algún contenido ficticio en la tienda (store.js).

Fetch la data desde la API: https://playground.4geeks.com/apis/fake/contact/

Sugerencia: usa Postman para probar los puntos finales de la API antes de codificar.

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

intermediate

Repositorio

Clic para abrir

Video

No disponible

Demo en vivo

No disponible

Duración promedio

24 hrs