Udemy

Platform

Español

Language

Web Development

Category

React Hooks & Firebase & Material Design : Fullstack Extremo

React Hooks y Redux, Enviar push notifications con ReactJS y Firebase, crear web services y base de datos con NodeJS

4.30 (308 reviews)

Students

23.5 hours

Content

Jul 2020

Last Update
Regular Price

EXCLUSIVE SKILLSHARE OFFER
Exclusive  SkillShare  Offer
Unlimited access to 30 000 Premium SkillShare courses
30-DAY FREE TRIAL

What you will learn

Crear componentes con React Hooks

Enviar Mensajes de Texto a cualquier movil con React Login

Creacion de interfaces graficas con Material Design

Implementacion de Redux

Mantenimiento de base de datos en firebase con Firestore

Mantenimiento de archivos en firebase

Functions - Creacion de Web Services End Points

Enviar e-mails con Firebase Functions

Manejo de la seguridad de tu aplicacion con React y Firebase

Manejar la sesion de tu app con React Context

Crear componentes React con Hooks

Manejo de tokens de seguridad para acceder a los web services end points de firebase

Enviar y Recibir Push Notifications desde React Hooks


Description

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


Ademas de contar con el soporte de un grupo de arquitectos y seniors developers que responderan todas las dudas del curso! y entregarte todo el codigo fuente del proyecto!


Screenshots

React Hooks & Firebase & Material Design : Fullstack Extremo
React Hooks & Firebase & Material Design : Fullstack Extremo
React Hooks & Firebase & Material Design : Fullstack Extremo
React Hooks & Firebase & Material Design : Fullstack Extremo

Content

Instalación de herramientas

Que es NodeJS?

Instalar NodeJS

Instalar Visual Code

Creacion de proyecto en firebase

Instalación de herramientas del proyecto

Crear Proyecto React usando el npx

Agregar material design a mi proyecto

Agregar Theme de Material Design - Parte 1

Agregar Theme de Material Design - Parte 2

Agregar Theme de Material Design - Parte 3

Navegacion entre componentes React - Parte 1

Navegacion entre componentes React - Parte 2

Implementar barra de navegacion y el Router - Parte 1

Implementar barra de navegacion y el Router - Parte 2

Guardar datos en Firebase

Crear Formulario para Registrar Usuarios - Parte 1

Crear Formulario para Registrar Usuarios - Parte 2

Crear Formulario para Registrar Usuarios - Parte 3

Manejar estados de un componente React

Dar de alta servicios de base de datos en Firebase

Instalacion y configuracion de Firebase en React

Creacion de instancia de Firebase en el proyecto

Que es el React Context?

Crear React Context en nuestro Proyecto

Firestore y React Context trabajando juntos

Firestore y React Context trabajando juntos - Parte 2

Guardar en Firestore desde React

Mantenimiento de Seguridad y data de la sesion del usuario

Crear Componente Login con Material Design - Parte 1

Crear Componente Login con Material Design - Parte 2

React Login Firebase Authentication - Parte 1

React Login Firebase Authentication - Parte 2

React Login Firebase Authentication - Parte 3

React Login Firebase Authentication - Parte 4

React Hook Components y Context API

Que son los componentes Hook?

Crear procedimiento para validar la sesion del usuario en mi proyecto

Crear el Context Provider para la sesion de mi proyecto

Crear React Hooks - Reducers

Crear React Hooks - Actions Parte 1

Crear React Hooks - Actions Parte 2

Crear React Hooks - Actions Parte 3

Crear multiple reducers para mensajes en pantalla

Crear Reducers con React Context API - Parte 1

Crear Reducers con React Context API - Parte 2

Implementar Snackbar en Login - Parte 1

Implementar Snackbar en Login - Parte 2

Crear mensaje de notificacion en Login - Parte 1

Crear mensaje de notificacion en Login - Parte 2

Agregar logica en sesion del componente Registrar Usuario

Trabajando en la barra de navegacion

Agregar componentes a la barra de navegacion - Parte 1

Agregar componentes a la barra de navegacion - Parte 2

Agregar componentes a la barra de navegacion - Parte 3

Trabajando en la session de la barra de navegacion

Agregar lista de menus en la seccion derecha de la barra de navegacion - Parte 1

Agregar lista de menus en la seccion derecha de la barra de navegacion - Parte 2

Agregar lista de menus en la seccion derecha de la barra de navegacion - Parte 3

Agregar lista de menus en la seccion izquierda - Parte 1

Agregar lista de menus en la seccion izquierda - Parte 2

Crear Hook React Componente Perfil de Usuario

Crear componente Router de seguridad

Crear Hook Componente Perfil de Usuario - Parte 1

Crear Hook Componente Perfil de Usuario - Parte 2

Agregar Logica al Hook Componente - Parte 1

Agregar Logica al Hook Componente - Parte 2

Imagenes en el Storage de Firebase

Configuracion de Firebase Storage para manejo de archivos

Guardar imagen de perfil de usuario - Parte 1

Guardar imagen de perfil de usuario - Parte 3

Creacion de componentes React para administrar Inmuebles

Crear Componente Nuevo Inmueble - Parte 1

Crear Componente Nuevo Inmueble - Parte 2

Guardar inmueble en Firebase - Parte 1

Guardar inmueble en Firebase - Parte 2

Almacenar imagenes temporalmente en React

Eliminar imagenes temporales en React

Crear palabras clave - Keyworks para busquedas de inmuebles autocomplete

Guardar en Firestore y Storage - Parte 1

Guardar en Firestore y Storage - Parte 2

Crear componente Lista Inmueble

Importar Firebase a lista de inmuebles

Crear grid para lista de inmuebles

Buscar inmuebles por direccion - query condition Firestore

Eliminar Inmueble en Firebase

Solucionando warning sobre el Hook

Crear React Componente para Editar Inmueble

Crear React Componente Editar Inmueble - Parte 1

Crear React Componente Editar Inmueble - Parte 2

Agregar Logicar Editar Inmueble - Parte 1

Agregar Logicar Editar Inmueble - Parte 2

Agregar Logicar Editar Inmueble - Parte 3

Agregar Logicar Editar Inmueble - Parte 4

Agregar Logicar Editar Inmueble - Parte 5

Agregar Logicar Editar Inmueble - Parte 6

Publicar el proyecto React & Material Design & Firebase en la nube

Publicar mi proyecto en Firebase Cloud

Paginación en Firebase

Agregar botones de siguiente y anterior pagina

Logica de Paginación en Firebase

Creacion de metodo con consultas dinamicas

Agregar Logica para listar Inmuebles con Paginacion

Programacion del boton siguiente pagina

Programacion del boton anterior pagina

Evento de busqueda incluyendo Paginación

Envio de mensaje de texto a cualquier movil con React Login

Agregar nuevos componentes al Login

Enviar correo electronico para resetear contrasena

Como hacer el login con un numero de telefono?

Instalacion de firebaseui

Crear interface grafica para login con numero de telefono

Que es y como se crea un captcha?

Crear dialogs con material design

Dar de alta servicio de Login con numeros de telefono en Firebase

Enviar Mensaje de Texto a cualquier telefono en cualquier pais

Codigo para implementar login con numeros telefonicos y Firebase

Crear numeros de prueba y ajustar sesion de usuario

Setup del proyecto Inmuebles App

Descargar el proyecto del curso

Crear nuevo proyecto en la consola de firebase e iniciar servicios

Cambiar configuracion del proyecto en Visual Code

Cambiar colores del theme del proyecto

Visualizar solo inmuebles guardados por mi perfil

Functions en Firebase - Web Services End Points

Que son las web services?

Crear Proyecto Functions

Crear Web Service REST End Point para devolver todos los inmuebles

Functions en Firebase - Avanzado y Enviando Emails

Estructura para crear directorios con end points

Crear indice para multiples end points

Instalar librerias para crear end points

Que es express?

Crear web service end point para obtener usuarios de mi App

Crear Web Service para actualizar roles de usuario

Deploy Web Services al servidor de Firebase

Crear Web Service para Enviar Correos Electronicos

Creando end point enviar correo electronico

Deploy proyecto functions en Firebase incluyendo web service Enviar Email

Hooks y Redux trabajando juntos en nuestro proyecto

Que es Redux y como incorporarlo a nuestro proyecto

Creacion del redux store en nuestro proyecto

Creando el index reducer para nuestro proyecto

Creando Actions globales en nuestra carpeta Redux

Crear Provider global en el App.js Hook

Creando un Hook componente para Listar Usuarios de nuestra App

Crear Lista Usuario Hook Componente

Consumir el action y llamando evento para lista usuarios con Redux

Usando componentes Redux y Hooks functions para consumir web service

Enviar correos electronicos desde el Hook - Parte 1

Enviar correos electronicos desdel el Hook - Parte 2

Deploy la nueva version de mi proyecto al hosting de Firebase

Roles y Grupos con Firebase

Actualizando Action en Redux para agregar Roles y Grupos

Creando Material-UI Dialog para administrar Roles y Grupos

Logica para almacenar data de usuario y roles en el dialog

Administrar combobox de Roles de usuario

Agregando Roles de Usuario con CustomClaims y Firestore

Invocando al Action Redux para agregar roles

Crear Dialog tabla para mostrar los roles por usuario

Eliminar Roles de Usuario

Push Notifications - Como enviar notificaciones con Firebase y ReactJS

Push Notifications en Firebase

Crear Web Service para enviar Push Notifications

Crear la Function en la consola de Firebase

Agregando Servicio de Mensajeria en ReactJS

Creando Actions para recibir y enviar mensajes

Agregar Menu en ReactJS para recibir Notifications

Registrar servicio de Firebase Messaging en el Service Worker

Implementar codigo para recibir mensajes

Implementar codigo para enviar mensajes

Prueba de Enviar y Recibir Push Notifications

Authorization : Seguridad con Roles y Grupos usando React, Firebase y NodeJS

Seguridad en Web Services con NodeJS y Firebase Tokens

Crear metodo para validar token de seguridad

Implementar seguridad por Roles en React

Ajustes en el componente Hook Lista Usuarios


Reviews

E
Esmerdi7 October 2020

Porsupueto, es un curso de explican la teoría de como funciona react js para luego ir a la práctica. Además es una de las librerías mas demandadas en el mercado laboral.

L
Leonardo23 August 2020

su forma de explicar es poco entendible no fuersa los errores controlados simplemente se limita a hacerlos y no hay una secuencia entendible.

F
Fernando26 June 2020

EL CURSO SUPERO MIS EXPECTATIVAS Y EL SOPORTE ESTUPENDO TE RESPONDEN EL MISMO DÍA, FUE UNA GRAN ELECCIÓN. GRACIAS VAXI.

L
Luis1 June 2020

Hasta hace 1 mes venía leyendo teoría de React, viendo alguno que otro video, este curso me está ayudando a llevar esa teoría a la práctica, desde el ordenamiento del proyecto (carpetas creadas para los distintos componentes, etc), manejo de clases, hooks, etc, especialmente Firebase, ya que es la primera vez que lo uso puesto que siempre trabajé con MySQL; Además tanto el profesor como ayudante están atentos por si tenemos algún problema, merecidas 5 estrellas. Espero que con el pasar del tiempo sigan añadiendo cosas.

E
Emmanuel27 May 2020

Elegir este curso fue una gran desición, una buena inversión, aprendi muchisimo y la atención que te brindan los instructores magnifico, te responden lo antes posible cualquier duda! 5 estrellas!

J
Juan11 February 2020

Un excelente curso, de los más completos que he visto en udemy sobre React, se aprenden muchas cosas como Redux, Firebase, Context, useState, envió de correos y Push Notifications, logeo con telefono, etc, el profesor contesta muy pronto en cuestión de horas y siempre te da buena retroalimentación o respuestas, si acaso lo único que veo un poco en contra es en la aplicación de unas mejores practicas pero entiendo que el curso es didáctico y uno mismo puede ir mejorandolo.

O
Oscar6 February 2020

El curso es muy bueno, los temas se comprenden muy bien, aprendes bastante y si en algún momento tienes algún tipo de duda, el instructor te responde tan rápido como le sea posible.

G
Gerber6 February 2020

Hasta el momento me a parecido uno de los mejores cursos que eh visto, y se ve el esfuerzo que le han dedicado.

G
Gerardo6 February 2020

Para los que quieran tomar el curso, este no se enfoca a enseñarte como usar firebase y react, ya debes tener conocimiento del funcionamiento de estas tecnologías, pero si cuentas con estos requisitos le podrás sacar todo el jugo al curso, este taller puedo ayudarte ampliar tus conocimientos mucho más y la forma en la que van explicando es excelente, buen curso, espero que en el futuro saquen mas cursos de este estilo. Lo único que puede molestar para algunos pero no afecta son los cortes de los videos que se hacen, o algún ruido. Realmente no afecta pero el contenido esta muy bueno.

J
Jonathan5 February 2020

Me ha gustado el curso en términos generales, aunque creo que faltaría explicar un poco de donde salen algunas cosas, o porque se deben agregar

J
José5 February 2020

Excelente curso practico, uno de los mejores que he visto en la plataforma. Espero que sigan creando contenido de éste tipo para la comunidad y sigan creciendo como instructores.

J
Jose5 February 2020

Si fue una buena elección ya que en principio el curso esta desarrollando la aplicación en Firebase que es una tecnologia de la cual tenia poca información al respecto.

M
Manuel4 February 2020

Ha sido claro en los temas básicos del entorno, espero avanzar en los temas de la aplicación como tal...

F
Francisco31 January 2020

El temario en sí es verdad que enseña cosas que a lo mejor no vas a aprender en otros cursos de Udemy, PERO, se abstrae demasiado a la hora de dar explicaciones de como funciona las cosas por debajo. Por ejemplo, ya que se usa bastante Material UI se podría dar una explicación más profunda del por qué del comportamiento de cada uno de los componentes que se están utilizando. Se empiezan a utilizar demasiadas librerías y la explicación del por qué de cada cosa es mas bien vaga. Por el resto del temario ya digo, se aprende cosas nuevas que no hay en otros cursos de Udemy, pero definitivamente, este no es un curso que recomiende para los que nunca han tocado React ni tienen nociones de ES6. Espero que no se tome a mal mi reseña, intento ser constructivo porque la materia es bastante atractiva, pero lo dicho, te abstrae mucho de la lógica que ocurre por debajo. Tal vez algo tan simple como "una pizarra y un rotulador" podría ayudar bastante en el por qué de las cosas. Hay explicaciones que se dan sobre la marcha, cuando realmente necesitan una pausa para explicarlo en profundidad.

k
kenneth21 January 2020

Muy buen curso hasta ahora. El profesor explica bien, estoy aprendiendo y tengo grandes expectativas por los conocimientos que tendré al terminar el curso


Coupons

DateDiscountStatus
2/4/2020100% OFFExpired
4/28/202195% OFFExpired

2551297

Udemy ID

9/9/2019

Course created date

11/22/2019

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram