React: Aplicaciones en tiempo real con Socket-io

Curso enfocado en el manejo de React con Socket.io para crear aplicaciones.

Adquirir Ahora Vista previa gratis

Contenido del curso

1. Introducción al curso
  PRUEBA GRATIS
2. ¿Cómo funcionará el curso?
  PRUEBA GRATIS
3. ¿Cómo hacer preguntas?
  PRUEBA GRATIS
4. Instalaciones necesarias
  PRUEBA GRATIS
5. Instalar nodemon
  PRUEBA GRATIS
6. Configurar Git y Github
  PRUEBA GRATIS
7. ¡Únete a Nuestra Comunidad de DevTalles en Discord!
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo final de la sección
  PRUEBA GRATIS
4. Inicio del proyecto - BandNames socket server
5. Modelos para manejar nuestras bandas
6. Eventos de Sockets
7. Crear aplicación de React y los primeros componentes
8. Configurar socket.io en React
9. Mostrar las bandas actuales
10. Editar nombres en la tabla
11. Incrementar votos
12. Borrar banda
13. Cambiar nombre de la banda
14. Agregar una nueva banda
15. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Continuación de proyecto - BandNames
4. useSocket - CustomHook
5. Problema del useSocket
6. SocketContext y SocketProvider
7. Uso del ContextAPI para estado de la conexión
8. Context para trabajar con sockets
9. Agregar Banda mediante el Context
10. Gráfica en tiempo real
11. Conectar gráfica con la data del servidor
12. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del resultado final de la App
  PRUEBA GRATIS
4. Inicio de proyecto
5. Crear componentes necesarios
6. Router entre pantallas
7. Pantalla de Ingresar
8. Pantalla de Escritorio
9. Pantalla para crear un ticket
10. Pantalla de Cola de tickets
11. UI Context y customHook para ocultar el menú
12. Mantener el Agente y Escritorio
13. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Continuación de proyecto - TicketApp
4. Clases para el manejo de los Tickets
5. Conectar la aplicación de React con nuestro socket server
6. Obtener un nuevo ticket
7. Asignar un ticket para trabajar
8. Actualizar la cola de tickets en tiempo real
9. Crear servicio REST para obtener los tickets actuales
10. Consumir el servicio REST con los últimos tickets
11. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración de la sección
  PRUEBA GRATIS
4. Inicio de proyecto - MapasApp
5. Mostrar el mapa
6. Mantener la referencia de latitud, longitud y zoom del mapa
7. useRef en lugar de useState
8. CustomHook - useMapbox
9. Agregar Marcadores
10. Extraer callback para agregar marcadores
11. Obtener coordenadas al mover un marcador
12. RXJS - Subject - Emitir eventos
13. RXJS - Emitir movimientos de marcador
14. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Continuación de proyecto - MapasApp
4. Modelos necesarios en el backend
5. Conectar React con nuestro Socket Server
6. Socket: Nuevo Marcador y Marcadores Activos
7. Mostrar marcadores existentes en el backend
8. Mostrar nuevos marcadores en tiempo real
9. Actualizar marcadores en tiempo real
10. Código fuente de la sección
1. Introducción a la sección
2. Demostración del objetivo de la sección
  PRUEBA GRATIS
3. Explicación del proyecto y materiales descargables
1. Introducción a la sección
2. Temas puntuales de la sección
3. Inicio de proyecto - ChatBackend
4. Preparando la base de datos - MongoAtlas
5. Conectar nuestro backend con MongoDB Atlas
6. Modelos necesarios - Usuario y Mensaje
7. Definición de rutas de autenticación
8. Controladores de nuestros API Endpoints
9. Express Validator
10. Middleware personalizado - ValidarCampos
11. Crear usuario en base de datos
12. Encriptar la contraseña
13. Generar JsonWebToken
14. Login de usuario
15. Verificar el JWT
16. Revalidar el JWT
17. Bonus: Guardar Token en Postman
18. Obtener todos los mensajes de chat
19. Definición de los eventos de sockets necesarios
20. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Inicio de proyecto - ChatApp - React
4. Páginas y rutas
5. Rutas secundarias
6. Diseño de Login y Registro
7. Diseño del Chat y sus componentes
8. Diseño del Chat - Segunda Parte
9. Pantalla de selección de Chat
10. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Continuación de proyecto - Backend + Frontend
4. AuthProvider - AuthContext
5. Pantalla de Login
6. Bloquear botón y funcionalidad de recordar usuario
7. Login - Petición Http
8. Almacenar token y mensajes de error
9. Deshabilitar el botón si el formulario no está completo
10. Tarea: Pantalla de registro
11. Verificar estado de la autenticación
12. Rutas privadas y públicas
13. Cerrar sesión
14. Nota: Cambiar avatar y resumen
15. Inicio de autenticación de sockets
16. Conectar y desconectar sockets manualmente
17. Identificar persona conectada - Backend
18. Actualizar base de datos en base a la conexión del usuario
19. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Continuación de proyecto - ChatApp
4. Chat Context, Provider y Reducer
5. Obtener todos los usuarios del chat
6. Acción de cargar usuarios
7. Mostrar listado de los usuarios
8. Activar una sala de chat
9. Enviar un mensaje - Parte 1
10. Enviar un mensaje - Parte 2
11. Grabar chat en base de datos
12. Escuchar mensajes personales
13. Mostrar los mensajes enviados y recibidos
14. Fecha y hora de envío del mensaje
15. Cargar el historial del Chat
16. Scroll cuando llegan mensajes
17. Borrar el ChatState cuando cerramos sesión
18. Código fuente de la sección
1. Más información sobre nuestros otros cursos
2. Despedida del curso

Acerca de este curso

171 lecciones
16 horas de contenido en video
USD 50.00

Cursos que podrían interesarte

+DevTalles

Este segmento es exclusivo para sesiones en vivo con Fernando Herrera. Durante estas podrás realizar preguntas relacionadas al contenido de sus cursos y participar de forma interactiva con los panelistas. Se incluyen grabaciones de sesiones pasadas.

Pago único

Adquiere el curso con un único pago de forma vitalicia, con acceso a la comunidad y posibles actualizaciones futuras.

$50.00

Promociones y descuentos pueden aplicar.

Comprar ahora

Suscripción
Devtalles PRO Mensual

^USD16

Suscribirme ahora

Acceso ilimitado a toda la plataforma, cursos, clases en vivo, acceso anticipado a cursos durante el mes de vigencia.

Suscripción
DevTalles PRO Trimestral

^USD48

Suscribirme ahora

Acceso ilimitado a toda la plataforma, cursos, clases en vivo, acceso anticipado a cursos durante 3 meses de vigencia.

Suscripción
DevTalles PRO Semestral

^USD96

Suscribirme ahora

Acceso ilimitado a toda la plataforma, cursos, clases en vivo, acceso anticipado a cursos durante los 6 meses de vigencia.

Suscripción
DevTalles PRO Anual

^USD176

El mejor precio disponible

Suscribirme ahora

Adquiere 1 año entero de suscripción al precio de 11 meses. Obtienes acceso ilimitado a toda la plataforma, comunidades, cursos, clases en vivo, acceso anticipado a una comunidad exclusiva y cursos en construcción.

¿Cuál es el siguiente paso?

Si quieres profundizar tu conocimiento en React, te invitamos a seguir el Programa React Expert diseñado para que sigas aprendiendo.

Ver programas