React Hooks & Firebase & Material Design : Fullstack Extremo 🚀
Aprende React Hooks y Redux, Enviar push notifications con ReactJS y Firebase, crear web services y base de datos con NodeJS
- ✅ Domina React Hooks
- ✅ Aprende Firebase
- ✅ Accede a una comunidad de mas de 20 000 estudiantes
- ✅ Implementacion de proyecto en Visual Studio Code
Beneficios de este Curso
Acerca de nuestro curso
Bienvenidos a nuestro curso!, que implementa todos los servicios de Firebase para proyectos Web basados en React Hooks creando las interfaces graficas de Material Design.
En el mercado actual mas del 90% de Apps estan desarrolladas por versiones de React usando class, los primeros capitulos del curso te explican como trabajarlos y luego enfocarnos en como implementar React Hooks y Redux en nuestro proyecto.
Este curso es un taller que tiene como principal objetivo la integracion de React y Firebase, usando como Framework UI Material Design, NO es un curso teorico de React o Material Design. Es recomendable tener conocimientos basicos de ES6.
Entregamos todo el codigo fuente del proyecto que puede ser reutilizado para sus proyectos personales.
Estos son algunos de los temas que desarrollaras en mas de 22 horas de curso :
✔ Crear un Proyecto React con Hooks
✔ Crear paginas/componentes web usando Material Design
✔ Implementar un Login con email usando las librerias de Firebase
✔ Enviar mensajes de texto a cualquier movil con React Login
✔ Subir archivos, imagenes al cloud usando React Hooks y el storage de Firebase
✔ Enviar correos electronicos desde tu React Hook App
✔ Crear Web Services End Points usando Firebase Functions
✔ Consumir Web Services en tu proyecto React Hook
✔ Implementar React Context en tu App
✔ Implementar toda la estructura Redux en tu App.
✔ Enviar y recibir PUSH NOTIFICATIONS en tu React Hook App
✔ Insertar, actualizar y eliminar data en la base de datos de Firebase desde tu proyecto React Hook
✔Subir tu proyecto React Hook al hosting de Firebase totalmente gratis
Curricula del Curso
Instalación de herramientas
Available in
days
days
after you enroll
React Hooks y Proyectos Web
Available in
days
days
after you enroll
- Proyecto Web Tradicionales y SPA (2:26)
- Arquitectura y Workflow de React (5:44)
- Creacion de Proyecto React Hooks (3:26)
- Descripcion de la estructura de un proyecto React (13:23)
- React Hooks y useState (9:06)
- Mensajes entre componentes React Hooks (8:48)
- React Hooks y useEffects (3:31)
- React Hooks consumiendo Web Service (15:29)
Instalación de herramientas del proyecto
Available in
days
days
after you enroll
- Creacion de proyecto en firebase (3:29)
- Crear Proyecto React usando el npx (3:39)
- Agregar material design a mi proyecto (3:10)
- Agregar Theme de Material Design - Parte 1 (4:07)
- Agregar Theme de Material Design - Parte 2 (8:52)
- Agregar Theme de Material Design - Parte 3 (12:39)
- Navegacion entre componentes React - Parte 1 (6:56)
- Navegacion entre componentes React - Parte 2 (8:20)
- Implementar barra de navegacion y el Router - Parte 1 (13:42)
- Implementar barra de navegacion y el Router - Parte 2 (9:57)
Guardar Datos en Firebase
Available in
days
days
after you enroll
- Crear Formulario para Registrar Usuarios - Parte 1 (7:58)
- Crear Formulario para Registrar Usuarios - Parte 2 (10:10)
- Crear Formulario para Registrar Usuarios - Parte 3 (7:36)
- Manejar estados de un componente React (13:53)
- Dar de alta servicios de base de datos en Firebase (8:44)
- Instalacion y configuracion de Firebase en React (8:47)
- Creacion de instancia de Firebase en el proyecto (9:33)
- Que es el React Context? (2:41)
- Crear React Context en nuestro Proyecto (9:26)
- Firestore y React Context trabajando juntos (9:49)
- Firestore y React Context trabajando juntos - Parte 2 (12:26)
- Guardar en Firestore desde React (10:13)
Mantenimiento de seguridad y data de la sesion del usuario
Available in
days
days
after you enroll
- Crear Componente Login con Material Design - Parte 1 (8:01)
- Crear Componente Login con Material Design - Parte 2 (8:12)
- React Login Firebase Authentication - Parte 1 (9:58)
- React Login Firebase Authentication - Parte 2 (10:54)
- React Login Firebase Authentication - Parte 3 (12:47)
- React Login Firebase Authentication - Parte 4 (7:46)
React Hook Components y Context API
Available in
days
days
after you enroll
- Que son los componentes Hook? (5:43)
- Crear procedimiento para validar la sesion del usuario en mi proyecto (11:37)
- Crear el Context Provider para la sesion de mi proyecto (13:26)
- Crear React Hooks - Reducers (11:23)
- Crear React Hooks - Actions Parte 1 (12:08)
- Crear React Hooks - Actions Parte 2 (12:00)
- Crear React Hooks - Actions Parte 3 (10:35)
- Crear multiple reducers para mensajes en pantalla (4:39)
- Crear Reducers con React Context API - Parte 1 (12:38)
- Crear Reducers con React Context API - Parte 2 (9:04)
- Implementar Snackbar en Login - Parte 1 (10:10)
- Implementar Snackbar en Login - Parte 2 (5:05)
- Crear mensaje de notificacion en Login - Parte 1 (10:02)
- Crear mensaje de notificacion en Login - Parte 2 (11:22)
- Agregar logica en sesion del componente Registrar Usuario (11:11)
Trabajando en la barra de navegación
Available in
days
days
after you enroll
- Agregar componentes a la barra de navegacion - Parte 1 (6:16)
- Agregar componentes a la barra de navegacion - Parte 2 (12:40)
- Agregar componentes a la barra de navegacion - Parte 3 (5:35)
- Trabajando en la session de la barra de navegacion (6:42)
- Agregar lista de menus en la seccion derecha de la barra de navegacion - Parte 1 (10:03)
- Agregar lista de menus en la seccion derecha de la barra de navegacion - Parte 2 (9:40)
- Agregar lista de menus en la seccion derecha de la barra de navegacion - Parte 3 (11:54)
- Agregar lista de menus en la seccion izquierda - Parte 1 (9:55)
- Agregar lista de menus en la seccion izquierda - Parte 2 (10:36)
Crear Hook React Componente Perfil de Usuario
Available in
days
days
after you enroll
Imagenes en el Storage de Firebase
Available in
days
days
after you enroll
Creación de componentes React para administrar Inmuebles
Available in
days
days
after you enroll
- Crear Componente Nuevo Inmueble - Parte 1 (9:50)
- Crear Componente Nuevo Inmueble - Parte 2 (13:31)
- Guardar inmueble en Firebase - Parte 1 (8:14)
- Guardar inmueble en Firebase - Parte 2 (9:01)
- Almacenar imagenes temporalmente en React (26:21)
- Eliminar imagenes temporales en React (5:26)
- Crear palabras clave - Keyworks para busquedas de inmuebles autocomplete (12:31)
- Guardar en Firestore y Storage - Parte 1 (9:08)
- Guardar en Firestore y Storage - Parte 2 (8:12)
- Crear componente Lista Inmueble (10:39)
- Importar Firebase a lista de inmuebles (10:13)
- Crear grid para lista de inmuebles (12:03)
- Buscar inmuebles por direccion - query condition Firestore (14:45)
- Eliminar Inmueble en Firebase (6:54)
- Solucionando warning sobre el Hook (1:29)
Crear React Componente para editar Inmueble
Available in
days
days
after you enroll
- Crear React Componente Editar Inmueble - Parte 1 (10:16)
- Crear React Componente Editar Inmueble - Parte 2 (13:51)
- Agregar Logicar Editar Inmueble - Parte 1 (10:05)
- Agregar Logicar Editar Inmueble - Parte 2 (9:52)
- Agregar Logicar Editar Inmueble - Parte 3 (5:59)
- Agregar Logicar Editar Inmueble - Parte 4 (10:36)
- Agregar Logicar Editar Inmueble - Parte 5 (11:54)
- Agregar Logicar Editar Inmueble - Parte 6 (12:27)
Publicar el proyecto React y Material Design y Firebase en la nube
Available in
days
days
after you enroll
Paginación en Firebase
Available in
days
days
after you enroll
- Agregar botones de siguiente y anterior pagina (6:05)
- Logica de Paginación en Firebase (2:45)
- Creacion de metodo con consultas dinamicas (13:42)
- Agregar Logica para listar Inmuebles con Paginacion (8:48)
- Programacion del boton siguiente pagina (7:58)
- Programacion del boton anterior pagina (6:57)
- Evento de busqueda incluyendo Paginación (8:12)
Envio de mensaje de texto a cualquier movil con React Login
Available in
days
days
after you enroll
- Agregar nuevos componentes al Login (8:42)
- Enviar correo electronico para resetear contrasena (7:38)
- Como hacer el login con un numero de telefono? (1:03)
- Instalacion de firebaseui (0:53)
- Crear interface grafica para login con numero de telefono (12:02)
- Que es y como se crea un captcha? (7:14)
- Crear dialogs con material design (9:38)
- Dar de alta servicio de Login con numeros de telefono en Firebase (0:59)
- Enviar Mensaje de Texto a cualquier telefono en cualquier pais (10:06)
- Codigo para implementar login con numeros telefonicos y Firebase (13:31)
- Crear numeros de prueba y ajustar sesion de usuario (14:46)
Setup del proyecto Inmuebles App
Available in
days
days
after you enroll
Functions en Firebase - Web Services End Point
Available in
days
days
after you enroll
Functions en Firebase - Avanzado y Enviando Emails
Available in
days
days
after you enroll
- Estructura para crear directorios con end points (6:15)
- Crear indice para multiples end points (7:21)
- Instalar librerias para crear end points (4:21)
- Que es express? (1:30)
- Crear web service end point para obtener usuarios de mi App (11:05)
- Crear Web Service para actualizar roles de usuario (11:36)
- Deploy Web Services al servidor de Firebase (4:32)
Crear Web Services para Enviar Correos Electrónicos
Available in
days
days
after you enroll
Hooks y Redux trabajando juntos en nuestro proyecto
Available in
days
days
after you enroll
Creando un Hook componente para Listar Usuarios de nuestra App
Available in
days
days
after you enroll
- Crear Lista Usuario Hook Componente (7:49)
- Consumir el action y llamando evento para lista usuarios con Redux (9:33)
- Usando componentes Redux y Hooks functions para consumir web service (10:35)
- Enviar correos electronicos desde el Hook - Parte 1 (9:24)
- Enviar correos electronicos desdel el Hook - Parte 2 (9:59)
- Deploy la nueva version de mi proyecto al hosting de Firebase (2:23)
Roles y Grupos con Firebase
Available in
days
days
after you enroll
- Actualizando Action en Redux para agregar Roles y Grupos (3:37)
- Creando Material-UI Dialog para administrar Roles y Grupos (10:30)
- Logica para almacenar data de usuario y roles en el dialog (2:33)
- Administrar combobox de Roles de usuario (3:36)
- Agregando Roles de Usuario con CustomClaims y Firestore (13:47)
- Invocando al Action Redux para agregar roles (13:29)
- Crear Dialog tabla para mostrar los roles por usuario (5:28)
- Eliminar Roles de Usuario (9:15)
Push Notifications - Como enviar notificaciones con Firebase y ReactJS
Available in
days
days
after you enroll
- Push Notifications en Firebase (5:36)
- Crear Web Service para enviar Push Notifications (10:31)
- Crear la Function en la consola de Firebase (5:51)
- Agregando Servicio de Mensajeria en ReactJS (5:33)
- Creando Actions para recibir y enviar mensajes (12:09)
- Agregar Menu en ReactJS para recibir Notifications (10:45)
- Registrar servicio de Firebase Messaging en el Service Worker (7:58)
- Implementar codigo para recibir mensajes (4:49)
- Implementar codigo para enviar mensajes (8:58)
- Prueba de Enviar y Recibir Push Notifications (4:25)
Authorization : Seguridad con Roles y Grupos usando React, Firebase y NodeJS
Available in
days
days
after you enroll