R
Roberto Aguilar Soto
Buen nivel y ejemplos muy concretos.
PRECIO DE LANZAMIENTO
Master en React: ReactJS, Hooks, MERN y Node.js
4.4706
(17)
|
410 Estudiantes
|
Certificación internacional
Acceso de por vida
Acceso multiplataforma
Info
USD 300.00
USD 300.00
USD 50.00
Descripcion
Conviertete en desarrollador React full-stack: domina ReactJS, Hooks, el stack MERN (MongoDB, Express, React, Node) y autenticacion con JWT.
Lo que aprenderas:
- ReactJS moderno: componentes, props, estado y Hooks
- Enrutamiento, context y manejo de estado
- Backend con Node.js, Express y MongoDB (MERN)
- Autenticacion y autorizacion con JWT
- Consumo de APIs REST y despliegue a produccion
Contenido del Curso
Introduccion al master en React desde cero
Introduccion al curso maestro de React paso a paso
Que vamos a aprender en este curso de React en Espanol
Repaso rapido de desarrollo web (opcional)
HTML - Parte 1
HTML - Parte 2
CSS - Parte 1
CSS - Parte 2
Flexbox
CSS Grid Layout
SASS
Repaso rapido de JavaScript basico (opcional)
JavaScript basico general
Objetos
Promesas
Clases
Herencia
Mas acerca de JavaScript nativo
Preparar el entorno de desarrollo
Preparar el entorno de desarrollo para React
Instalacion y primeros pasos en React
Instalar React y crear el primer proyecto
Plugin para navegadores
Estructura base de un proyecto de React.js
Componentes basicos en React.js
Que es un componente en React JS
Crear componentes paso a paso en React
Renderizar muchas etiquetas en JSX
Mostrar datos del componente en la vista o template
Vistas y JSX
Interpolar variables, condicionales y bucles en JSX
Comunicacion entre componentes
Props y comunicacion entre componentes
PropTypes y validacion de props
Default props y parametros por defecto
Eventos en React
Evento Click en React
Evento doble click
Evento Mouse Enter y Leave
Evento Focus y Blur
El estado - Hook useState
Crear un proyecto de ReactJS
El problema SI NO usamos useState
Como usar el Hook useState de React
Cambiando estilos
UseState, eventos de teclado y evento onChange
Repaso OPCIONAL de lo visto hasta ahora componentes, vistas y estados
Ejercicio con Componentes, Props, Eventos y Estado
Enunciado del ejercicio
Resolviendo el ejercicio - Parte 1
Resolviendo el ejercicio - Parte 2
El efecto desencadenado - Hook useEffect
Creando un proyecto de React
Aprendiendo el hook useEffect
Practica con useEffect
Montar y desmontar componentes
Servicios, HTTP y AJAX en React
AJAX y useEffect
Peticion AJAX con fetch y promesas
Peticion AJAX con Async y Await
Efecto de carga
Capturar y mostrar errores
Formularios y eventos
Creando un nuevo proyecto de React para practicar con formularios
Crear formulario y dar estilos
Formularios y onSubmit
Mas formularios y mas eventos
Proyecto #1 Introduccion
Introduccion al proyecto 1
Proyecto #1 Maquetacion con HTML5, CSS3, Flexbox y CSS Grid Layout (opcional)
Estructura HTML
Articulos HTML
Aplicando CSS Grid Layout
Estilos del header
Estilos de la barra de navegacion
Estilos de las tarjetas
Estilos de los botones
Estilos de la barra lateral
Estilos del pie de pagina
Mejorando los estilos
Proyecto #1 Aplicacion de peliculas con lo que sabemos hasta ahora
Creando un proyecto desde cero en React
Adaptando la maquetacion al proyecto de React
Creando los compononentes
Creando el formulario para crear peliculas
Guardar y persistir datos de la aplicacion
Creando un helper
Listado de peliculas
Actualizar listados instantaneamente
Eliminar peliculas de la app
Editar peliculas - Parte 1
Editar peliculas - Parte 2
Editar peliculas - Parte 3
Editar peliculas - Parte 4
Editar peliculas - Parte 5
Buscador en React con Eventos, Filtros y Hooks
Mensaje de cuando no encuentra un resultado la busqueda
Router y navegacion
Creando un nuevo proyecto de React.js
Instalar React Router DOM
Configurar el router y crear nuestras primeras rutas
Consideraciones a tener en cuenta con el router de react
Menu de navegacion
Solucion a warning createRoot de React 18
Marcar elementos del menu activados
Enlaces SPA
Parametros en la URL
Parametros opcionales en tus rutas + Hook useParams
Redireccionar con el routing de react
Hook useNavigate
Sub rutas y rutas anidadas
Proyecto #2 Crear un portafolio con React y React Router DOM
Crear un proyecto nuevo de React para empezar con el portafolio
Componentes y rutas del portfolio
Crear componentes para el Layout de la web
Creando la barra de navegacion para navegar entre rutas
Estilos menu de navegacion
Estilos para el logo y el header
Estilos para el pie de pagina
Marcando enlaces del menu como activados
Creando paginas del portafolio
Dando estilos a las paginas individuales
Dando estilos a formulario de contacto
Creando array objetos de proyectos
Mostrando proyectos
Mostrando imagenes y maquetacion
Pagina de detalle
Proyectos filtrados en la home
Las referencias - Hook useRef
Creando un proyecto de React para practicar con useRef
UseRef desde cero y paso a paso con Ejemplos
Mas ejemplos con useRef hook
La memorizacion - Hook useMemo
Creando proyecto de React para aprender el hook Memo
La funcion memo y los componentes
La funcion memo, peticiones asincronas y paginacion
Funcion memo, evitar renderizados innecesarios y listado de empleados
Mas de la memorizacion
El Hook useMemo - Parte 1
El Hook useMemo - Parte 2 - Aplicacion de tareas
El Hook useMemo - Parte 3 - Eliminar tareas
Hook useMemo - Mas ejemplos
Hook useCallback
Mas efectos - Hook useLayoutEffect y useEffect
Creando un nuevo proyecto para useLayoutEffect
UseEffect, UseLayoutEffect, valores previos en estados y mas
El reductor - Hook useReducer
Crear proyecto de react para practicar con el reducer
Crear componente, html, jsx y formulario
Recoger datos del formulario
Como trabajar con los estados usando Hook useReducer
Como usar useReducer - Parte 2
Mas casos en nuestro Reducer de React
CRUD completo reactivo - Hook useReducer y LocalStorage
El contexto - Hook useContext
Creando un proyecto para trabajar con Context
Configurando el routing de react para usar el api context
Menu de navegacion y estilos de la web
Create Context y useContext - Compartir informacion entre componentes
Create Context y useContext - Parte 2
Creando un login y logout con el API Context de React
El identificador - Hook useId - Hooks React 18
Creando proyecto para mas hooks de react 18
Probando el Hook useId de React 18
Hooks personalizados
Como crear un hook personalizado o hook custom
Hook personalizado usando estados de React
Formulario normal para usar un custom hook
Serializar formularios
OnChange en el formulario
Hook para Formularios
Peticion Ajax, Fetch, Async, Await - Parte 1
Peticion Ajax, Fetch, Async, Await - Parte 2
Hook para peticiones asincronas
Proyecto #3 API REST para desarrollar un Blog completo (Mongo, Express y Node)
Que es y como funciona MongoDB - Teoria de Mongo y NoSQL
Instalacion y configuracion de MongoDB
Como crear bases de datos, colecciones y objetos + las bases practicas de Mongo
Gestor visual de MongoDB - GUI Mongo
Soluciones a todos los posibles errores de MongoDB y Mongoose
Que software necesitamos para crear un API RESTful con NodeJS
Creando proyecto de Node
Instalando dependencias para crear el API REST
Creando la base de datos para el proyecto
Conexion a la base de datos desde NodeJS
Crear servidor de Node
Creando rutas y probandolas
Arquitectura del proyecto
Creando modelos en Mongoose
Controlador y rutas
Ruta para crear nuevos articulos
Guardar articulos - Parte 1
Guardar articulos - Parte 1
Conseguir listado de articulos
Filtros para consultas con Mongoose
Endpoint para sacar solo un articulo
Metodo para borrar articulos
Metodo para editar
Crear helper de validacion
Subir ficheros e imagenes con NodeJS
Actualizar y mostrar imagenes
Buscador de articulos
Proyecto #3 Desarrollando un Blog completo con React (MERN Stack, Frontend SPA)
VITE y crear proyecto de React
Script para aumentar productividad en proyectos MERN Stack
Estructura y componentes
Configurando el sistema de rutas (react routing)
Adaptar maquetacion para el proyecto del blog con ReactJS
Menu de navegacion
Creando la pagina home
Empezando con la seccion de articulos
Mostrando articulos - Parte 1
Mostrando articulos - Parte 2
URL Global
Helper para peticiones ajax con fetch
Efecto de carga
Mejorando el codigo y abstrayendo funcionalidades
Settimeout
Crear formulario
Estilos del formulario
Recogiendo datos del formulario
Guardado de articulos
Subir imagenes con React
Mostrar imagenes subidas en el front con reactjs
Correccion de error de mensaje
Eliminar articulos
Buscador y redirecciones
Pagina del buscador
Error de busqueda
Pagina individual del articulo
Mejorando estilos de la barra lateral
Componente de edicion de articulos
Edicion de articulos
Error en la pagina de articulos
Proyecto #4 API REST para desarrollar una Red Social (Node, Express y MongoDB)
Diseno de la base de datos
Inicializando el proyecto de NodeJS
Instalando dependencias en el backend
Script para ahorrar tiempo
Conexion a la base de datos de MongoDB
Soluciones a todos los posibles errores de MongoDB y Mongoose (opcional)
Configurando el servidor de NodeJS
Creando controladores de prueba
Configurando enrutamiento
Modelo de Usuarios
Accion y ruta de registro de usuarios
Registro de usuarios - Primera parte
Cifrar contrasena y guardar usuario
Ruta y accion de Login
Comprobar si existe el usuario antes de identificarlo
Comprobar si la contrasena es correcta
Generar token JWT para el login y autenticacion
Middleware de autenticacion
Solucion error middleware auth
Datos del perfil del usuario - Primera parte
Perfil del usuario - Segunda parte
Listado de usuario - Primera parte
Pagina del listado de usuarios - Segunda parte
Seccion listado de usuarios - Tercera parte
Actualizar datos de los usuarios
Modificacion de usuarios con Async y Await
Subir archivos en NodeJS
Subida de imagenes con Node - Segunda parte
Upload de ficheros con MERN - Parte 3
Endpoint para mostrar imagenes
Modelo y controlador de Seguimiento (Follows)
Accion de guardar follow y correccion de error subida imagenes
Seguir a un usuario
Dejar de seguir usuarios
Listado de usuarios - Siguiendo - Primera parte
Listado de usuarios - Siguiendo - Parte 3
Listado de usuarios - Siguiendo - Parte 3
Array de ids de usuarios que sigo y me siguen
Datos de seguimiento para el perfil
Info de follows en el listado de usuarios
Accion de mis seguidores
Modelo de publicaciones
Guardar publicaciones
Mostrar una publicacion
Borrar una publicacion
Listado publicaciones de perfil usuario
Subir imagen de publicaciones
Devolver una imagen de publicacion
Feed de publicaciones
Quitando email de select
Modificaciones al API REST
Actualizaciones y correcciones con MongoDB y Mongoose
Actualizaciones y correcciones con MongoDB y Mongoose
Proyecto #4 Desarrollando una Red Social completa con React
La maquetacion web del proyecto
Crear un proyecto de react para desarrollar la red social desde cero
Configurando el proyecto y anadiendo estilos CSS
Creando la barra de navegacion privada
Barra de navegacion pubilica
Configuracion de rutas y layouts
Navegacion y componentes
Rutas anidadas en la parte privada
Error 404
Formulario de registro
Hook de formulario
Registrar de usuarios
Dando estilos a alerta con CSS
Formulario de Login
Recoger datos del formulario de login
Identificar al usuario
Creando un contexto
Comprobar el token y sacar la informacion del usuario
Contadores y estadisticas del usuario identificado
Restringir acceso a la parte publica si estoy identificado
Restringir acceso a la parte privada si no estoy identificado
Cargando y redireccion
Cerrando sesion
Enlaces y rutas
Datos de la sesion en la barra de navegacion
Formulario de editar usuario
Rellenar el formulario con informacion real
Serializar formulario
Guardar usuario editado
Subir imagenes
Maquetacion seccion gente
Recorriendo los usuarios para mostrar
Paginacion de usuarios - Primera parte
Paginacion de usuarios - Segunda parte
Boton de ver mas usuarios
Efecto de carga
Botones de seguir y dejar de seguir
Solucion error ver mas usuarios
Seguir usuarios
Dejar de seguir usuarios
No poder seguir al usuario identificado
Abstraccion del listado de usuarios - separar en varios componentes
Pagina de usuarios que estoy siguiendo
Resolviendo el misterio de los usuario que estoy siguiendo
Pagina de seguidores
Guardar publicaciones
Subir imagenes a las publicaciones
Resetear formulario de publicaciones
Helper para perfiles de usuario
Creando componentes y rutas para el perfil de usuario
Maquetacion del perfil
Mostrando datos reales del perfil
Mostrando contadores en el perfil
Solucion a bugs con los contadores y perfiles
Boton de seguir y dejar de seguir
Guardar informacion de seguimiento
Listar publicaciones en el perfil
Paginacion de publicaciones
Boton de mas publicaciones
Mostrar las nuevas publicaciones del nuevo perfil
Solucion boton siguientes publicaciones
Borrar publicaciones
Mostrar imagenes en publicaciones
Abstraccion de publicaciones parte 1
Abstraccion de publicaciones parte 2
Feed de publicaciones
Actualizar nuevas publicaciones en el feed
Formateo de fechas - Hace cuanto tiempo - Hace x minutos
Validacion de datos
Validacion en el backend - parte 1
Validacion en el backend - parte 2
Creando un nuevo proyecto para formik
Instalar Formik
Formulario con React y Formik
Validacion con Yup y Formik
Requisitos
- Conocimientos basicos de HTML, CSS y JavaScript
- Computadora con conexion a Internet estable
- Node.js (se guia la instalacion)
Reseñas generales
4.4706 de 5
17 Puntuaciones
5 star
47%
4 star
53%
3 star
0%
2 star
0%
1 star
0%
Reseñas destacadas
M
Maicol Ramirez
Bien organizado y al grano.
L
Leonardo Larraguibel vivar
Una gran inversion para mi carrera.
M
Marco Rioja Valle
De cero a aplicarlo en proyectos reales.
D
daniela sady castro
Aprendi JWT y despliegue, genial.
J
JAVIER IGNACIO ROZAS GUTIERREZ
Excelente curso, muy completo y bien explicado.
C
Carlos Sebastian Torrico Rodriguez
Muy didactico, ideal para autoestudio.
J
juan hernandez
Lo aplique de inmediato en mi trabajo.
L
Lucas Fabian Alexis ortega
Ideal para reforzar conocimientos.
J
Juan carlos zuleta corcho
Contenido claro, ordenado y muy aplicable.
V
Visa
Supero mis expectativas, lo recomiendo.
V
Victor Guajardo Ávalos
Muy buen ritmo y explicaciones claras.
P
Pablo Alberto del Castillo Sandoval
La calidad del material es excelente.
D
Dannya Ivonne Calles Payan
Los ejercicios y casos reales son muy utiles.
O
Omar Febronio Molina
Cumplio todo lo que prometia y mas.
M
Maribel Paucara
Me ayudo a mejorar mis habilidades.
V
Victor rodrigo escalante
Recomendado al 100%, muy satisfecho.
USD 300.00
USD 50.00
PARA MAS INFORMACION
INGRESA TUS DATOS
Completa tus datos solo si estas evaluando inscribirte en este programa.
Parte de una ruta de especialización
Especialización en Desarrollo Web Full Stack Moderna
Inversion
USD 50.00
Duracion39 Horas
EvaluacionSi
CertificadoSi
WebinarsSi
IdiomaEspañol
Aprobacion89%