📚Curso disponible
Desarrollo Frontend: React + Typescript
Domina el desarrollo de interfaces modernas y dinámicas con React y TypeScript. Aprende a crear componentes reutilizables, gestionar el estado y construir aplicaciones web profesionales desde el lado del cliente.
29
Módulos
Contenido del curso
Tema 1 - Introducción al desarrollo frontend moderno
10 lecciones
1.1. ¿Qué es el desarrollo frontend?
1.2. La evolución del frontend hasta React
1.3. ¿Por qué React + TypeScript?
1.4. Alternativas a React y su comparación
1.5. ¿Qué aprenderemos en este curso?
MANUAL I - Fundamentos del desarrollo Frontend Moderno
MANUAL II - React y TypeScript en la web moderna
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 2 - Configuración Inicial del Proyecto con React + Typescript
15 lecciones
2.1 Elegir la Herramienta de Inicio: Vite o Create React App
2.2. Crear un Proyecto React + Typescript con Vite
2.3. Inicialización del Repositorio Git
2.4. Scripts Útiles en el Package.json
2.5. Configuración Inicial de ESLint y Prettier
2.6. Ejecutar el Primer NPM RUN DEV
2.7. Revisión Inicial del tsconfig.json
2.8. Buenas Prácticas para el Arranque del Proyecto
2.9. CheckList Final Antes de Comenzar a Desarrollar
MANUAL I - Primeros pasos en un proyecto React
MANUAL II - Primeras pruebas
MANUAL III - Buenas prácticas
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 3 - Fundamentos de JSX y Componentes Funcionales en React + Typescript
16 lecciones
3.1. ¿Qué es JSX y Por Qué se Usa en React?
3.2. Primer Componente Funcional
3.3. Props Tipadas en Typescript
3.4. Renderizaco Condicional en JSX
3.5. Aplicar Estilos en JSX
3.6. Fragments en JSX
3.7. Children en Componentes
3.8. Default Props y Props Opcionales
3.9. Buenas prácticas en JSX y Componentes
3.10. Prueba Práctica con un Componente
MANUAL I - JSX, Componentes, Props y Renderizado
MANUAL II - JSX
MANUAL III - Props y buenas prácticas
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 4 - Estado y Eventos en React + Typescript
15 lecciones
4.1. Introducción al Estado en React
4.2. Declarar estado con useState
4.3. Modificar el Estado con el Setter
4.4. Estado con Tipos Complejos
4.5. Eventos en React y Tipado en Typescript
4.6. Estado Controlado de Inputs
4.7. Múltiples Estados en un Mismo Componente
4.8. Funciones Actualizadoras con UseState
4.9. Buenas Prácticas con useState y Eventos
MANUAL I - Estado
MANUAL II - Eventos y estados
MANUAL III - Funciones actualizadoras y buenas prácticas
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 5 - useEffect, Ciclo de Vida y Side Effects en React + Typescript
16 lecciones
5.1. ¿Qué es un Side Effect y Por Qué Gestionarlo?
5.2. Sintaxis Básica de useEffect
5.3. Efectos con Dependencias
5.4. Limpieza de Efectos
5.5. Ciclo de Vida y useEffect
5.6. Tipado Correcto de Efectos
5.7. Evitar Bucles Infinitos en useEffect
5.8. Efectos Asíncronos
5.9. Efectos Múltiples en un Mismo Componente
5.10. Prueba Práctica de un Componente con UseEffect
MANUAL I - useEffect, Side Effects y ciclo de vida
MANUAL II - Tipado de efectos, evitar bucles infinitos
MANUAL III - Efectos asíncronos y múltiples
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 6 - useRef y manejo de Referencias en React + Typescript
16 lecciones
6.1. ¿Qué es useRef y para qué se usa?
6.2. Referencias al DOM
6.3. Tipado de useRef en TypeScript
6.4. Almacenar valores persistentes entre renders
6.5. Evitar recreación de objetos y funciones
6.6. UseRef combinado con useEffect
6.7. Referencias en componentes controlados vs no controlados
6.8. Crear un focus manager con useRef
6.9. Buenas prácticas con useRef
6.10. Prueba práctica con useRef
MANUAL I - ¿Qué es useRef?
MANUAL II - DRY y Uso combinado de useRef y useEffect
MANUAL III - Creación de un Focus Manager y buenas prácticas
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 7 - useContext y Gestión de Contexto GLobal en React + Typescript
16 lecciones
7.1. ¿Qué es useContext y para qué sirve?
7.2. Crear un contexto en React + TypeScript
7.3. Proveedor de contexto (Context.Provider)
7.4. Consumir el contexto con useContext
7.5. Contexto con funciones en su valor
7.6. Contextos múltiples
7.7. Buenas prácticas con contextos
7.8. Contexto + TypeScript avanzado
7.9. Prueba práctica del contexto
7.10. Renderizados y performance
MANUAL I - useContext, Context.Provider y consumo
MANUAL II - Contexto con funciones, Contextos múltiples y buenas prácticas
Manual III - Context + Typescript Avanzado, Renderizados y Performance
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 8 - useReducer y gestión Avanzada del Estado en React + Typescript
16 lecciones
8.1. ¿Qué es useReducer y cuándo usarlo?
8.2. Sintaxis básica de useReducer
8.3. Tipado del estado y las acciones
8.4. Acciones con payload
8.5. Organización del reducer en un archivo externo
8.6. Crear un mini proyecto con useReducer
8.7. Combinación de useReducer con useContext
8.8. Optimizaciones y memoización
8.9. Buenas prácticas con useReducer
8.10. Prueba práctica con useReducer
MANUAL I - useReducer, sitaxis y tipado de estado y acciones
MANUAL II - Payload, organización en archivo externo y mini proyecto con useReducer
MANUAL III - useReducer con useContext, optimizaciones y buenas prácticas
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 9 - useMemo y useCallback - Optimización de Renders en React + Typescript
16 lecciones
9.1. ¿Por qué optimizar los renders en React?
9.2. Introducción a useMemo
9.3. Tipado de useMemo en TypeScript
9.4. Introducción a useCallback
9.5. Tipado de useCallback en TypeScript
9.6. useMemo y useCallback con dependencias
9.7. Ejemplo práctico combinado
9.8. Diferencias entre useMemo y useCallback
9.9. Impacto real en la performance
9.10. Buenas prácticas con useMemo y useCallback
MANUAL I - Optimizar Renders, useMemo y su tipado
MANUAL II - useCallback, tipado y dependencias
MANUAL III - useMemo vs useCallback, impacto en la performance y buenas practicas
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 10 - Renderizado de Listas y Uso Correcto de Keys en React + Typescript
16 lecciones
10.1. ¿Cómo renderizar listas en React?
10.2. Tipado de arrays y elementos en TypeScript
10.3. Uso de keys en listas
10.4. Keys incorrectas y sus riesgos
10.5. Renderizar listas anidadas
10.6. Condiciones y listas vacías
10.7. Listas dinámicas y estado
10.8. Separar lista en componente propio
10.9. Performance en listas largas
10.10. Buenas prácticas en renderizado de listas
MANUAL I - Renderizar en React, tipado de Arrays y uso de Keys en listas
MANUAL II - Renderizar listas anidadas, condiciones y listas dinamicas
MANUAL III - Separar la lista en componente propio, performance y buenas practicas
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 11 - Formularios Controlados y No Controlados en React + Typescript
16 lecciones
11.1. ¿Qué es un formulario controlado en React?
11.2. Tipado de inputs y eventos
11.3. Múltiples campos con un solo estado
11.4. Formularios no controlados con useRef
11.5. Validación básica de formularios
11.6. Gestión del submit del formulario
11.7. Formularios dinámicos
11.8. Radio buttons y checkboxes
11.9. Buenas prácticas en formularios React
11.10. Mini proyecto práctico de formulario
MANUAL I - Formulario controlado, tipado de inputs y eventos y múltiples campos
MANUAL II - Validación de formularios, gestión del submit y formularios dinámicos
MANUAL III - radio buttons y checkboxes, buenas practicas y mini proyecto
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 12 - Sistema de Enrutado con React Router + Typescript
16 lecciones
12.1. ¿Qué es React Router y por qué es necesario?
12.2. Instalación y configuración inicial de React Router
12.3. Crear rutas básicas
12.4. Enlaces de navegación con Link y NavLink
12.5. Rutas dinámicas y parámetros
12.6. Rutas anidadas
12.7. Navegación programática
12.8. Rutas protegidas (básicas)
12.9. Error boundaries y rutas no encontradas
12.10. Buenas prácticas en enrutado
MANUAL I - React Router, instalación y rutas básicas
MANUAL II - enlaces de navegación, rutas dinámicas, rutas anidadas
MANUAL III - Navegación programática, rutas protegidas, error boundaries y buenas prácticas
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 13 - Enrutado Avanzado y Patrones de Navegación en React + Typescript
16 lecciones
13.1. Rutas con query strings y búsqueda
13.2. Estado de navegación
13.3. Scroll y navegación
13.4. Rutas lazy (carga bajo demanda)
13.5. Gestión de títulos y metadatos de las páginas
13.6. Deep linking y enlaces compartibles
13.7. Parámetros opcionales y múltiples en la URL
13.8. Middleware-like navigation guards
13.9. Animaciones entre rutas
13.10. Buenas prácticas en navegación avanzada
MANUAL I - Dominando Rutas Avanzadas y Deep Linking en React y TypeScript
MANUAL II - Avanzando en React y TypeScript: Rutas, Parámetros y Navegación
MANUAL III - Optimización de Navegación y UX en React y Typescript
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 14 - Formularios Avanzado en React + Typescript
16 lecciones
14.1. Formularios controlados vs no controlados
14.2. Validación manual de formularios
14.3. Tipado de los valores de un formulario
14.4. Manejo de múltiples inputs y estado dinámico
14.5. Formularios con campos condicionales
14.6. Select, checkbox y radio buttons
14.8. Formularios con useRef (no controlados)
14.7. Subida de archivos en formularios
14.9. Buenas prácticas con formularios
14.10. Prueba práctica de formulario completo
MANUAL I - Manejo Profesional de Formularios en React y TypeScript
MANUAL II - Formularios Avanzados y Validación en React y Typescript
MANUAL III - Gestión Profesional de Formularios con React y TypeScript
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 15 - Fetch y Consumo de APIs Externas en React + Typescript
16 lecciones
15.1. Introducción al consumo de APIs
15.2. Fetch básico en useEffect
15.3. Tipado de respuestas de la API
15.4. Estados de loading y error
15.5. Fetch con async_await
15.6. Cancelación de peticiones
15.7. Consumo de APIs con axios
15.8. API paginada: gestionar parámetros dinámicos
15.9. Buenas prácticas al consumir APIs
15.10. Prueba práctica de consumo de API
MANUAL I - Gestión Profesional de APIs con React y Typescript
MANUAL II - Manejo Avanzado de APIs con React y Typescript
MANUAL III - Manejo Profesional de Fetch y useEffect en React con TypeScript
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 16 - Custom Hooks - Cómo Crear y Reutilizar Lógica en React + Typescript
16 lecciones
16.1. ¿Qué es un custom hook?
16.2. Sintaxis básica de un custom hook
16.3. Tipado de custom hooks
16.5. Hook para gestión de formularios
16.4. Hook para lógica de contador
16.6. Hook para fetch
16.7. Composición de hooks
16.8. Buenas prácticas al crear custom hooks
16.9. Uso de custom hooks en proyectos grandes
16.10. Prueba práctica con custom hooks
MANUAL I - Creación y Gestión de Custom Hooks en React y TypeScript
MANUAL II - Creación y Gestión de Custom Hooks en React y TypeScript
MANUAL III - Creación y Gestión de Custom Hooks en React y TypeScript
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 17 - Peticiones HTTP con Axios y Gestión Avanzada de Promesas en React + Typescript
16 lecciones
17.1. ¿Por qué usar Axios en React?
17.2. Instalación y configuración básica de Axios
17.3. Realizar peticiones GET y POST
17.4. Uso de Promesas con Axios
17.5. Cancelación de peticiones con Axios
17.6. Suscripciones y comportamiento de peticiones asíncronas
17.7. Interceptores de Axios
17.8. Tipado avanzado de respuestas y errores
17.9. Buenas prácticas con Axios y Promesas en React
17.10. Prueba práctica de peticiones HTTP con Axios
MANUAL I - Dominando Axios y TypeScript en React: Peticiones HTTP y Manejo de Promesas
MANUAL II - Dominando Axios en React: Interceptores, Cancelación y Más
MANUAL III - Dominando Axios y Observables en TypeScript y React
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 18 - React Query + Axios - Gestión de Caché, Sincronización y Estados Avanzados de Peticiones
15 lecciones
18.1. ¿Qué es React Query y por qué usarlo?
18.2. Instalación y configuración inicial de React Query
18.3. Realizar una consulta básica (useQuery)
18.5. Mutaciones (useMutation)
18.4. Configuración de cache y refetch
18.6. Cancelación y control de peticiones
18.7. React Query Devtools
18.8. Optimistic updates
18.9. Buenas prácticas con React Query + Axios
MANUAL II - Dominando React Query y Axios: Prácticas Profesionales y Optimizaciones
MANUAL I - Gestión Avanzada de Peticiones con React Query y Typescript
MANUAL III - Gestión Avanzada de Datos con React Query y Axios
Ejercicio 1
Ejercicio 3
Ejercicio 2
Tema 19 - Formularios Avanzados en React + Typescript - React Hook Form + Zod para Validación Tipada
14 lecciones
19.1. ¿Por qué usar React Hook Form?
19.2. Instalación de React Hook Form y Zod
19.3. Crear un formulario básico con React Hook Form
19.4. Validación con Zod
19.5. Inputs controlados y no controlados
19.6. Formularios dinámicos (campos que se agregan o eliminan)
19.7. Validación condicional con Zod
19.8. Manejo de errores y feedback visual
MANUAL I - Creación y Validación de Formularios con React Hook Form y Zod
MANUAL II - Validación Avanzada con Zod y React Hook Form en TypeScript
MANUAL III - Gestión Avanzada de Formularios con React, TypeScript y Zod
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 20 - Accesibilidad (a11y) en React + Typescript
15 lecciones
20.1. ¿Qué es la accesibilidad web y por qué es importante?
20.2. Buenas prácticas básicas de accesibilidad en React
20.3. Roles ARIA y atributos accesibles
20.4. Manejo del focus en React
20.5. Testing básico de accesibilidad
20.6. Componentes reutilizables y a11y
20.7. Librerías que ayudan con a11y
20.8. Dark mode y contraste
20.9. Prueba práctica accesible
MANUAL I - Accesibilidad en React: Enfoque, A11y y Buenas Prácticas
MANUAL II - Creación de Componentes Accesibles y Contraste en Dark Mode con React y Typescript
MANUAL III - Mejorando la Accesibilidad Web con ARIA, React y Typescript
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 21 - Storybook y Documentación de Componentes en React + Typescript
14 lecciones
21.1. ¿Qué es Storybook y por qué usarlo?
21.2. Instalación y configuración inicial de Storybook
21.3. Primeros stories de un componente
21.4. Documentación automática y controles
21.5. Tipado de stories con TypeScript
21.6. Addons útiles para Storybook
21.7. Storybook como herramienta para diseño y QA
21.8. Exportar la documentación generada
MANUAL I - Desarrollo de Componentes con Storybook en React y TypeScript
MANUAL II - Dominando Storybook con React y TypeScript: Creación, Tipado y Buenas Prácticas
MANUAL III - Ampliando Storybook: Addons, Integración y Pruebas en React + TypeScript
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 22 - Gestión del estado Global en React - Context + reducer + Patrones de Compartición de Estado
15 lecciones
22.1. ¿Por qué necesitamos un estado global?
22.2. Crear un contexto tipado con TypeScript
22.3. Context + useReducer_ combinación potente
22.4. Patrón del custom hook useSafeContext
22.5. Separar Provider y lógica de estado
22.6. Contextos múltiples y su gestión
22.8. Composición con context + reducer + hooks
22.7. Performance_ evitar renders innecesarios
22.9. Buenas prácticas en estado global
MANUAL I - Gestión Avanzada del Estado en React y TypeScript
MANUAL II - Gestión Avanzada del Estado Global en React con TypeScript
MANUAL III - Optimización y Seguridad en React con TypeScript
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 23 - Web Vitals y Mediciones de Performance con React DevTools
15 lecciones
23.1. ¿Qué son los Web Vitals y por qué importan?
23.2. Medir Web Vitals en una app React
23.3. Introducción a React DevTools Profiler
23.4. Detectar renders innecesarios
23.5. Medición de tiempo de carga y first paint
23.6. Mejorar el rendimiento con React DevTools
23.7. Web Vitals y herramientas externas
23.8. Impacto de los bundles en las métricas
23.9. Buenas prácticas en medición de performance
MANUAL I - Optimización y Medición de Rendimiento en React y TypeScript
MANUAL II - Optimización del Rendimiento en Aplicaciones React y Web Vitals
MANUAL III - Optimización y Análisis de Rendimiento en Aplicaciones React
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 24 - Lazy Loading Avanzado y Splitting en React + Typescript
15 lecciones
24.1. ¿Qué es el lazy loading y el code splitting?
24.2. Uso básico de React.lazy y Suspense
24.3. Tipado de componentes lazy en TypeScript
24.4. Lazy loading de rutas en React Router
24.5. Dividir bundles con Vite_Webpack
24.6. Carga diferida de assets pesados
24.7. Error boundaries en lazy loading
24.8. Suspense en múltiples niveles
24.9. Buenas prácticas en lazy loading
MANUAL I - Gestión Profesional del Lazy Loading con React y TypeScript
MANUAL II - Optimización de Aplicaciones React con Lazy Loading y TypeScript
MANUAL III - Optimización de Aplicaciones React con Lazy Loading, Suspense y Splitting de Bundles
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 25 - Internacionalización (i18n) en React + Typescript
15 lecciones
25.1. ¿Qué es la internacionalización (i18n)?
25.2. Instalación y setup de i18next
25.3. Crear y organizar los archivos de traducción
25.4. Uso del hook useTranslation
25.5. Tipado y autocompletado en las traducciones
25.6. Carga perezosa de idiomas
25.7. Pluralización y interpolación
25.8. Internacionalización de fechas y números
25.9. Buenas prácticas en i18n
MANUAL I - Internacionalización y Localización en React con Typescript e i18next
MANUAL II - Implementación Profesional de i18n con React y TypeScript
MANUAL III - Internacionalización y Traducción en React y Typescript
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 26 - Despliegues en Vercel y Gestión de Variables de Entorno en React + Typescript
15 lecciones
26.1. ¿Por qué elegir Vercel para proyectos React?
26.2. Preparación del proyecto para el despliegue
26.3. Conexión con GitHub y Vercel
26.4. Configuración del dominio y HTTPS
26.5. Variables de entorno en Vercel
26.6. Variables locales y de producción
26.7. Revisión de los logs de Vercel
26.8. Rollback y control de versiones en Vercel
26.9. Optimización de builds en Vercel
MANUAL I - Gestión de Despliegues y Variables de Entorno en Vercel
MANUAL II - Implementación y Gestión de Variables de Entorno, Dominios y HTTPS en Vercel con GitHub
MANUAL III - Optimización y Despliegue de Aplicaciones React en Vercel
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 27 - Scripts NPM, Build y Automatización en React + Typescript
16 lecciones
27.1. ¿Por qué son importantes los scripts en React?
27.2. Scripts por defecto en proyectos React + Vite
27.3. Añadir scripts personalizados
27.4. Build del proyecto y carpeta de salida
27.5. Automatización de tareas básicas
27.6. Scripts para distintos entornos
27.7. Automatización con Husky y lint-staged (mención conceptual)
27.8. Scripts para despliegue
27.9. Buenas prácticas con scripts npm
27.10. Repaso final y visualización del flujo completo
MANUAL I - Automatización y Optimización de Scripts en React y Typescript
MANUAL II - Automatización de Despliegue y Scripts en React, Vite y Typescript
MANUAL III - Automatización de Tareas en React y Typescript con Scripts NPM
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 28 - Vite como Herramienta de Desarrollo para Proyectos React + Typescript
15 lecciones
28.1. ¿Qué es Vite y por qué es popular en React?
28.2. Configuración básica de Vite
28.3. Plugins útiles de Vite
28.4. Variables de entorno en Vite
28.5. Build y preview con Vite
28.6. HMR (Hot Module Replacement) y DX mejorada
28.7. Integración con herramientas externas
28.8. Buenas prácticas con Vite
28.9. Repaso final y visualización de flujo con Vite
MANUAL I - Dominando Vite: Configuración, Plugins y Buenas Prácticas en React y TypeScript
MANUAL II - Dominando Vite en React y TypeScript: HMR, DX y Optimización de Producción
MANUAL III - Gestión Avanzada y Herramientas de Integración en Vite
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 29 - Depuración y Herramientas en React + Typescript
16 lecciones
29.1. ¿Por qué es importante depurar correctamente en React?
29.2. Configuración de VSCode para React + TypeScript
29.3. Uso de React Developer Tools
29.4. Breakpoints y debugger en el código
29.6. Depuración de props y state en tiempo real
29.5. Console.log y variantes inteligentes
29.7. Errores comunes y cómo resolverlos
29.8. Debug en hooks y efectos
29.9. Debug del build y entorno de producción
29.10. Buenas prácticas al depurar
MANUAL I - Depuración y Solución de Errores en React y TypeScript
MANUAL II - Depuración Profesional y Optimización en React y TypeScript
MANUAL III - Optimización y Depuración en React y TypeScript con VSCode
Ejercicio 1
Ejercicio 2
Ejercicio 3
¿Listo para empezar?
Aprende a desarrollar desde 0 con IA integrada. Practica, resuelve retos reales, con correcciones inmediatas y completamente tutorizado.