React Production: TypeScript, Next.js y testing
React ·Frontend
Curso para llevar aplicaciones React a producción con criterios profesionales de calidad y rendimiento. Trabajas con TypeScript para tipar componentes y hooks, Next.js para SSR y server components, testing con Vitest y Testing Library para regresiones, pruebas de extremo a extremo con Playwright y patrones de rendimiento. Al terminar puedes diseñar y mantener frontends robustos para dashboards SaaS, e-commerce y portales empresariales.
¿Prefieres verlo en directo? Agenda una demo sin compromiso.
Formación corporativa: este curso se activa bajo pedido para tu organización. Adaptamos temario, calendario y modalidad (teleformación, aula virtual o mixto).
Contenido del curso
Librería de Meta para construir interfaces de usuario en la web.
-
Introducción a React y su ecosistema Lección
-
Introducción a React y su ecosistema Test
-
Instalar React y crear nuevo proyecto Lección
-
Instalar React y crear nuevo proyecto Puzle
Detalles del curso
Público objetivo
- Desarrolladores React con conocimientos básicos que quieren dar el salto a roles senior y a proyectos en producción.
- Desarrolladores frontend que migran aplicaciones SPA hacia Next.js y el modelo de Server Components.
- Ingenieros full-stack que usan React en el front y necesitan dominar rendering híbrido, TypeScript y testing.
- Tech leads frontend que deben definir convenciones, tipado, testing y rendimiento para su equipo.
Prerrequisitos: conocimientos solidos de JavaScript ES moderno y HTML/CSS, familiaridad básica con React (componentes, hooks) y con la terminal. Recomendable experiencia previa con cualquier framework frontend.
Contenido del roadmap
Fundamentos React modernos
- Componentes funcionales, props, renderizado condicional e iterativo.
- Hooks nucleares (useState, useReducer, useEffect, useContext) y hooks modernos (useOptimistic, useActionState, useFormStatus, use).
- Patrones de composición y custom hooks para reutilizar lógica.
TypeScript en React
- Tipado de props con interfaces, tipos utilitarios y genéricos.
- Tipado de hooks, eventos y formularios.
- Integración con React Router y Redux Toolkit tipado de principio a fin.
Enrutamiento y gestión de estado
- React Router con rutas anidadas, rutas dinámicas, loaders y actions.
- Estado local (useState, useReducer), estado global (Context API, Redux Toolkit) y servicios con custom hooks.
- Peticiones HTTP con fetch y Axios y patrones de cache del lado del cliente.
Next.js 15: App Router y Server Components
- File-system routing, layouts anidados, loading y error boundaries, rutas dinámicas y route groups.
- React Server Components vs Client Components, data fetching en servidor, streaming y Suspense.
- Server Actions con use server, formularios, revalidatePath y revalidateTag, optimistic updates.
Rendering y performance
- Estrategias SSR, SSG, ISR y Partial Prerendering para elegir el modelo óptimo por página.
- Cache multicapa de Next.js: Request Memoization, Data Cache, Full Route Cache y Router Cache.
- Imagenes con next/image, fuentes con next/font y metadata con la Metadata API.
Testing en React y Next.js
- Vitest y React Testing Library para tests de componentes y hooks.
- Tests de servicios y custom hooks con mocking.
- Playwright para tests end-to-end de la aplicación completa.
Despliegue
- Despliegue en Vercel con preview deployments por PR y gestión de variables de entorno.
- Despliegue self-hosted con Docker multi-stage y output standalone.
Proyecto integrador
Un dashboard SaaS B2B con TypeScript, Next.js App Router, Server Components, Server Actions, autenticación con Auth.js, Redux Toolkit para estado global, TanStack Query para estado de servidor, Tailwind CSS para estilos y una bateria de tests con Vitest y Playwright.
Objetivos de aprendizaje
Al completar este roadmap seras capaz de:
- Construir aplicaciones React 19 con componentes funcionales, hooks modernos y patrones de composición.
- Tipar en profundidad con TypeScript props, hooks, eventos y formularios en toda la aplicación.
- Desarrollar con Next.js 15 usando App Router, Server Components y Server Actions.
- Elegir la estrategia de rendering adecuada (SSR, SSG, ISR, PPR) y aprovechar la cache multicapa.
- Implementar testing profesional con Vitest, React Testing Library y Playwright.
- Desplegar en Vercel y en contenedores Docker con configuración por entorno y preview deployments.
- Liderar proyectos frontend B2B con convenciones solidas de tipado, testing y rendimiento.
Otros cursos de React
React: SPA con rutas, datos remotos y estado global
Curso de React orientado a construir SPAs reales con rutas, datos remotos y estado global disciplinado para proyectos empresariales. Aprendes ruteo cliente con rutas anidadas y navegación programática, consumo de APIs REST con Fetch y Axios y manejo de errores, y patrones de estado global con Context, Redux Toolkit y custom hooks compartidos. Al terminar pasas de pantallas aisladas a productos completos con varias vistas, persistencia remota y estado compartido mantenible.
React: TypeScript y testing con Vitest
Curso de React centrado en profesionalizar componentes y hooks con TypeScript y en asegurar regresiones con testing automatizado. Aprendes a tipar props, hooks, eventos y formularios con TypeScript, y a escribir pruebas unitarias y de integración con Vitest y Testing Library centradas en comportamiento observable. Al terminar puedes definir contratos de tipos sólidos, garantizar la estabilidad de los refactors y elevar el listón de calidad del frontend en proyectos empresariales.
React: UI con JSX, componentes y hooks
Curso de React moderno centrado en dominar la interfaz antes de abordar arquitecturas de datos mayores en proyectos empresariales. Cubre ecosistema y arranque con Vite, JSX y componentes funcionales, eventos, props, listas y estilos, y a continuación hooks para estado y efectos, Context para compartir datos y patrones recientes de optimización y formularios. Al terminar construyes interfaces modulares y mantenibles con coherencia de hooks y patrones de composición.
React
Curso integral de React para profesionales que construyen interfaces y aplicaciones web modernas en proyectos empresariales. Cubre JSX y componentes, hooks y gestión de estado, ruteo cliente, consumo de APIs REST con Fetch y Axios, estado global con Context y Redux Toolkit, custom hooks y proyectos integradores con buenas prácticas. Al terminar entregas SPAs y dashboards completos, dominas el patrón de hooks y eres autónomo en cualquier proyecto frontend con React.
¿Formación para tu equipo en esta tecnología?
Tú nos dices a quién formar y nosotros configuramos la plataforma con tu marca, damos de alta a tu gente, evaluamos las entregas con IA y te entregamos los certificados y los informes técnicos para tu gestor FUNDAE. Catálogo amplio con teleformación, aula virtual o mixto. Sin permanencia, sin coste de setup.
¿Prefieres verlo en directo? Agenda una demo.
Preguntas frecuentes
- ¿React Production: TypeScript, Next.js y testing es bonificable por FUNDAE para mi empresa?
- Puede ser bonificable cuando la acción cumple los requisitos aplicables. La plataforma aporta evidencias técnicas: seguimiento de tiempos, registro de conexiones, foros, encuestas y certificados para que tu entidad organizadora o gestoría revise la documentación.
- ¿En qué modalidades se imparte React Production: TypeScript, Next.js y testing?
- En tres modalidades: teleformación (online asíncrona), aula virtual privada en directo y mixta. Adaptamos temario, calendario y modalidad al equipo.
- ¿Se adapta React Production: TypeScript, Next.js y testing al nivel de mi equipo?
- Sí. Adaptamos temario, calendario y modalidad al nivel y al stack del equipo, con ejercicios evaluados por IA y certificado verificable.
- ¿Cuánto tarda en activarse para mi empresa?
- La activación corporativa estándar es rápida, sin coste de setup ni permanencia.