React Desde Cero
Aprenderás React de la mano con PWA, React Hooks, Firebase, React Router v5 y v6, Optimizaciones, Redux, SASS, Frameworks CSS, Testing y mucho más
Lo que aprenderás
Este curso cuenta con:
Soporte del instructor
Videos en Full HD
Certificado de Finalización
Garantía de Reembolso
Contenido del Curso
Introducción
Disponible en
días
días
después de inscribirte
Nivelación: JavaScript Para React
Disponible en
días
días
después de inscribirte
- Introducción a la sección (1:04)
- LiveServer: Loopback y Localhost (6:55)
- Creación Rápida de Archivos en VS Code (2:31)
- Var, Let y Const (13:10)
- FatArrow Functions (8:44)
- Operador Ternario (7:31)
- JSON: JavaScript Object Notation (6:37)
- Object Destructuring (4:06)
- Función Map (7:52)
- Array Destructuring (3:44)
- Spread Operator (3:58)
- Template String (8:45)
- Intervalos (6:09)
- TimeOut (5:59)
- Promesas (10:40)
- Fetch API con Promesas (10:36)
- Axios con Promesas (6:29)
- Async y Await (7:52)
- Fetch con Async y Await (6:02)
- Axios con Async y Await (3:38)
React - CDN
Disponible en
días
días
después de inscribirte
- Introducción a la sección (1:34)
- Importar React con un CDN (6:11)
- Hola mundo con React (9:09)
- Problema sin JSX (4:24)
- Babel y JSX (6:24)
- Introducción a los Componentes (3:26)
- Class Components - (Legacy) (7:50)
- Functional Components (2:28)
- Interpolar Variables (9:28)
- Introducción a los estados (10:05)
Proyecto 1: Contador
Disponible en
días
días
después de inscribirte
Introducción a PWA
Disponible en
días
días
después de inscribirte
- PWA - ¿Qué es? (8:56)
- Demostración de PWA (3:53)
- Modelo Cliente-Servidor (7:17)
- HTTP y HTTPS (2:51)
- ServiceWorker (4:10)
- Sección de Aplication y Network (6:47)
- Registrar SW (6:47)
- Install - SW (13:18)
- Active - SW (11:19)
- Fetch - SW (12:22)
- Metadata para PWA (10:37)
- Icons (6:48)
- Archivo Manifest (16:07)
- Generando Iconos Automáticamente (16:25)
- Arreglando el SW (2:08)
Despliegue en GH Pages: Contador
Disponible en
días
días
después de inscribirte
Fundamentos de React - CRA
Disponible en
días
días
después de inscribirte
- Creando un Proyecto con CRA (8:14)
- Creando un Proyecto con Vite.js (10:09)
- Estructura de un Proyecto - CRA (12:50)
- Estructura de un Proyecto - Vite.js (8:10)
- Archivos Principales (5:32)
- Directivas IMPORT, EXPORT y Snippets (9:40)
- Importación de React (4:14)
- Más sobre useState - React HOOK (4:42)
- Props (7:21)
WebComponents Avanzados
Disponible en
días
días
después de inscribirte
Despliegue - React App
Disponible en
días
días
después de inscribirte
Proyecto: Calculadora App
Disponible en
días
días
después de inscribirte
- CRA Template (5:27)
- PWA Template (2:06)
- Archivo SWRegister (6:46)
- Archivo SW (3:35)
- Estructura básica del proyecto (5:28)
- Analizando el Componente (4:25)
- Modularidad en componentes (3:56)
- React Devtools (4:20)
- Componente Resultado (4:05)
- Capturando Valores de un Input (7:35)
- Convirtiendo tipos de datos (6:29)
- Capturando Un Formato (5:27)
- Formatos Automaticos (6:58)
- Manipulando Información (8:15)
- Handle - Suma (7:34)
- Handle - Otros (2:11)
- Helpers (8:32)
- Agregando Bootstrap en React (6:43)
Despliegue - Netlify
Disponible en
días
días
después de inscribirte
BONUS: Despliegue de PWA con Vite.js
Disponible en
días
días
después de inscribirte
React Hooks - Detallados
Disponible en
días
días
después de inscribirte
- Introducción a la sección (1:16)
- Generando Proyecto (3:55)
- useState - Hook (9:49)
- useEffect - Hook (5:26)
- Creando un Formulario (6:29)
- Prevent Default (6:35)
- asyncEffects - Uso y Mal Uso (10:28)
- useEffect - Dependency (11:33)
- Peligro de useEffect (10:24)
- Clean Up - useEffect (5:00)
- useLayoutEffect - Hook (2:19)
- Ejemplo - useLayoutEffect (11:24)
- useRef - Hook (6:48)
- React Memo - Función (8:35)
- useMemo - Hook (7:25)
- useCallback - Hook (13:12)
- CustomHooks (11:11)
- Practica - CustomHook (9:36)
Proyecto - Galería de Imágenes
Disponible en
días
días
después de inscribirte
- Introducción a la sección (2:47)
- Servicio - Unsplash API (1:13)
- Postman Web Client (5:21)
- Primeros Pasos en la API (5:54)
- Create App y Access Key (4:28)
- [Authorization] Header (4:06)
- [Authorization] URL (4:09)
- Configurar Index del Proyecto (4:50)
- Componente Principal (3:41)
- Container (5:44)
- Obtener una Imagen (8:05)
- Pintar Imagen Dinámicamente (4:20)
- Pintar Lista de Imágenes (4:04)
- Formulario de Búsqueda (1/3) (7:20)
- Formulario de Búsqueda (2/3) (7:49)
- Formulario de Búsqueda (3/3) (8:47)
- Estilos generales de la Aplicación (12:20)
- Header y Footer (11:41)
- Introducción al Loading (1:32)
- Componente Loading (8:01)
- Loading Dinámico (3:17)
- Optimización - Buscador (3:08)
- Optimización - CustomHook (5:19)
- Configurando Manifest (6:51)
- Bundle del Proyecto (2:16)
- Despliegue del Proyecto (5:27)
Agenda de Contactos: Reducer + useReducer + localStorage
Disponible en
días
días
después de inscribirte
- Introducción al Reducer (6:30)
- Explicación Gráfica del Reducer (3:50)
- Demostración del Resultado Final (5:48)
- Explicación: Reducer en Código (8:45)
- Preparando el Proyecto (5:01)
- Componente: Header (4:49)
- Estilos: Tabla de Contactos (5:49)
- Estilos: Simulando Contactos (5:55)
- Estilos: Formulario Agregar Contacto (6:25)
- Creando Primer Reducer (6:30)
- Pintando el State (3:40)
- Enviando Dispatch (7:03)
- Primer Action y Dispatch (4:59)
- Capturando Información del Formulario (10:04)
- Generando ID's Aleatorios (5:59)
- Formateando ID (6:00)
- Capturando Contacto por ID (3:05)
- Creando Action DELETE (3:51)
- Función Filter (4:06)
- Grabando en LocalStorage (11:45)
- Formulario Dinámico (7:41)
- Configurando MANIFEST (3:23)
- Despliegue a Internet (4:32)
Context API - Estado Global
Disponible en
días
días
después de inscribirte
- Introducción al Context (4:23)
- Demostración Objetivo de la Sección (2:19)
- Preparando el Proyecto (5:32)
- Componente: Header (11:09)
- Primera vista a React Router (v5) (6:19)
- Nota IMPORTANTE
- Generando mi primer ruta (10:43)
- Rutas Exact (5:40)
- Link Component (5:36)
- Obteniendo Datos para Usar (2:07)
- Creando un Context (6:52)
- Consumiendo el Context (7:25)
- Finalizando la App (10:28)
React Router v5 a Detalle
Disponible en
días
días
después de inscribirte
- Introducción a la sección (7:05)
- Archivos y configuraciones importantes (6:53)
- NOTA IMPORTANTE (3:56)
- Configuración del Proyecto (4:46)
- Nota
- Configurando Notas Básicas (5:53)
- Creando Login Screen (3:14)
- Router: App Router (5:42)
- Componente Navbar (5:17)
- Diferencia entre Link y Navlink (3:52)
- History (7:22)
- Método Push (3:29)
- Leyendo Fichero de Personajes (4:17)
- Componente Card (9:15)
- Rutas con Parametros y useParam (6:11)
- Método goBack (11:04)
- [Tarea y Solución] - Womans Screen (4:18)
- Search Screen (5:23)
- Query Params (5:34)
- Location y QueryString (6:23)
- Effect en la Query (8:32)
- Renderizando Resultados de Búsqueda (6:12)
- Componente: Private Router (5:35)
- Auth Reducer (9:15)
- Compartiendo y Persistiendo Estado (10:10)
- Componente: Public Router (4:56)
- Configurando Public Router (7:41)
- Configurando el Private Router (3:42)
- Redirect (2:33)
- Dispatch: Auth Actions (8:06)
- Protección de Rutas (7:34)
Optimizaciones en React
Disponible en
días
días
después de inscribirte
React Router v6
Disponible en
días
días
después de inscribirte
SASS y React
Disponible en
días
días
después de inscribirte
Firebase, Redux y Materialize
Disponible en
días
días
después de inscribirte
Auth Service - Firebase
Disponible en
días
días
después de inscribirte
- Demostración Objetivo de la Sección (3:28)
- Actualización del Router
- Formulario de Login (9:52)
- Google Auth Button (7:19)
- Redux Devtools (3:08)
- Configurando Redux (7:18)
- Store (3:29)
- Activar Redux Devtools (1:44)
- Primer Dispatch Redux (7:54)
- Redux Thunk - Middleware (8:24)
- Configurando Firebase (9:26)
- Firebase 9 (6:13)
- OAuth: Autenticación con Google (12:14)
- Estilos: Register Screen (7:38)
- Capturando datos del formulario (7:53)
- Validación Básica (8:13)
- Registro de Usuarios en Firebase (8:18)
- Agregar DisplayName al Registrar (6:30)
- Autenticación con Email y Password (10:01)
- Capturando Sesiones Iniciadas (10:33)
- Componente Navbar (11:40)
- Action: Logout (8:16)
- Protección de Rutas [1/2] (15:50)
- Protección de Rutas [2/2] (15:23)
Firestore Database - Firebase
Disponible en
días
días
después de inscribirte
- Demostración de la sección (4:14)
- Bienvenida Personalizada (5:28)
- App Reducer (5:54)
- Guardar Datos en Firestore (19:39)
- Capturando datos del formulario (15:41)
- Terminando Lógica del Formulario (7:26)
- Leyendo Información de Firestore (11:36)
- Leyendo información valida de Firestore (7:08)
- Dispatch: Leer Datos (10:22)
- Pintando Datos Dinámicamente (13:34)
- Detalles Visuales y Formato de Fechas (10:56)
- Action: Crear Registro (13:54)
- Arreglar Error con Fechas (6:20)
- Action: Eliminar Registro (16:26)
- Action: Limpiar datos al cerrar sesión (7:27)
- Detalles Finales de la Aplicación (8:20)
- Agregar Animaciones a la Aplicación (11:54)
- Despliegue del Proyecto (12:37)
React Testing - Testing Library
Disponible en
días
días
después de inscribirte
- Introducción a la sección (5:28)
- Testing Library y React Testing Library (7:36)
- Porque NO usar Enzyme (2:56)
- Entendiendo las pruebas (9:49)
- Mi Primer Prueba (9:07)
- Wrapper (9:19)
- Expect - ToBe (7:22)
- Describe - IT (9:23)
- Screen (8:13)
- FireEvent (7:47)
- ByRole y ByLabelText (7:53)
- userEvent (5:53)
- Simulando el comportamiento de un usuario (7:05)
- REFACTOR : CustomHooks (7:50)
- REFACTOR: Reset (6:58)
- REFACTOR: ButtonComponent (10:47)
- Levantando la aplicación (6:14)
React Testing - Spy, Mocks, Coverage, Snapshots
Disponible en
días
días
después de inscribirte
- Introducción a la sección (2:28)
- Spy Functions (12:16)
- After y Before (8:49)
- Snapshots (10:20)
- Más de Snapshots (2:37)
- JEST Coverage (10:45)
- Manipulando pruebas (6:03)
- UI Coverage Report (10:23)
- GalleryApp - Configurando (12:10)
- Container (7:07)
- Find All - Async Test (10:14)
- Probando Contenido Dinámico y Asíncrono (6:41)
- Porque usar Mocks (7:18)
- MOCKS - Peticiones HTTP (9:09)
- Recomendación Final (7:12)
React con Docker
Disponible en
días
días
después de inscribirte
Final
Disponible en
días
días
después de inscribirte