4Geeks logo
4Geeks logo

Courses

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.

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

Full-Stack Software Developer - 16w

Data Science and Machine Learning - 16 wks

Buscar en lecciones


IngresarEmpezar
← Volver a Proyectos

Lista de Contactos con React y Flux

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

Clic para abrir

Video de solución

Clic para abrir

Duración promedio

24 hrs

Tecnologías

  • HTTP

  • ReactJS

    Javascript

  • React useState

  • React Hooks

  • React Router

  • React useEffect

Weekly Coding Challenge

Todas las semanas escogemos un proyecto de la vida real para que construyas tu portafolio y te prepares para conseguir un trabajo. Todos nuestros proyectos están construidos con ChatGPT como co-pilot!

Únete al reto

Podcast: Code Sets You Free

Un podcast de cultura tecnológica donde aprenderás a luchar contra los enemigos que te bloquean en tu camino para convertirte en un profesional exitoso en tecnología.

Escuchar el podcast

alt text Contact Managment Application

Tecnologías: HTML, CSS, JS, React, React Router and Flux.

¡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: Crear, actualizar, eliminar y leer contactos. Compruébalo aquí!

Utiliza la arquitectura de Flux para esto: La arquitectura de Flux es una de las propuestas más utilizadas para las arquitecturas de aplicaciones web..

🌱 Cómo iniciar este proyecto

Este proyecto viene con los archivos necesarios para empezar a trabajar, pero tienes dos opciones para empezar:

a) Abrir este link con Gitpod (recomendada) en tu navegador: https://gitpod.io#https://github.com/breatheco-de/exercise-contact-list.git

b) Clonar este repositorio localmente en tu computador:

1$ git clone https://github.com/breatheco-de/exercise-contact-list.git
  1. Instala las dependencias del projecto $ npm install.

  2. Empieza el servidor de desarrollo $ npm run start.

💡 Importante: Recuerda actualizar el remote del proyecto con el de tu repositorio usando git remote set-url origin <your new url>, y luego guardar tu código en tu nuevo repositorio usando add, commit y push.

El proyecto se divide en:

Dos vistas diferentes:

  1. Contacto: Contiene la lista de contactos.
  2. Agregar contacto: es solo un formulario que puede usar para crear o actualizar contactos.

Hay un componente adicional:

Tarjeta de contacto: componente ideal para mostrar solo un contacto.

Funcionalidades esperadas

  • Debe agregar el código necesario para que su aplicación cree, edite, y eliminar contactos de la lista.

  • (Opcional, pero es un punto a favor) Pídale al usuario la confirmación antes de borrar, use la Componente modal para eso.

¡Eso es! Comience a codificar su aplicación ReactJS + Flux.

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 de solución

Clic para abrir

Duración promedio

24 hrs

Tecnologías

Weekly Coding Challenge

Todas las semanas escogemos un proyecto de la vida real para que construyas tu portafolio y te prepares para conseguir un trabajo. Todos nuestros proyectos están construidos con ChatGPT como co-pilot!

Únete al reto

Podcast: Code Sets You Free

Un podcast de cultura tecnológica donde aprenderás a luchar contra los enemigos que te bloquean en tu camino para convertirte en un profesional exitoso en tecnología.

Escuchar el podcast