Curso de React

Bienvenido al Curso de React. Empieza desde cero y llega hasta el nivel profesional: componentes, hooks, TypeScript, rendimiento, datos, formularios, pruebas, Server Components y despliegue. Cada módulo se apoya en una aplicación de gestión real, la EMPRESA de los demás cursos, y todos los ejemplos se han compilado y ejecutado con las versiones indicadas.

Es adecuado para el segundo curso de los ciclos formativos de DAW y DAM, para asignaturas universitarias de desarrollo web y para profesionales que quieran ponerse al día con React 19.

💡 Consejo: Necesitas saber JavaScript moderno. Si no es así, empieza por el Curso de JavaScript, y por el Curso de HTML5, CSS3 y Bootstrap si te falta la base. El curso usa TypeScript desde el módulo 02 y lo explica según lo necesita.

¿Qué vas a aprender?

Al finalizar este curso serás capaz de:

  • Crear interfaces con componentes, JSX, props y estado
  • Entender de verdad cómo renderiza React: render, commit, identidad y Strict Mode
  • Sincronizar con el exterior usando efectos y saber cuándo no hacen falta
  • Escribir hooks personalizados y tipar toda la aplicación con TypeScript
  • Optimizar con React Compiler, memo, división de código y el Profiler
  • Usar concurrencia, Suspense, Actions, <Activity> y View Transitions
  • Construir aplicaciones completas con React Router, TanStack Query, Zustand, Redux Toolkit, React Hook Form y Zod
  • Probar con Vitest, Testing Library, MSW y Playwright
  • Trabajar con Server Components y Next.js
  • Hacer aplicaciones accesibles, internacionalizadas y listas para desplegar

Versión del curso

El curso utiliza React 19.3 con TypeScript 7, Vite 8, React Router 8, TanStack Query 5, Vitest 5 y Next.js 16. Solo se enseñan versiones estables: ni canary ni experimentales.

¿Qué versión elegir?

React no tiene versiones LTS. Su política solo promete parches de seguridad para las versiones afectadas: hoy los reciben las líneas 19.0, 19.1, 19.2 y 19.3. Por eso el curso marca en cada apartado la versión exacta en la que apareció cada cosa.

Si usas Lo que no tendrás
React 19.2 <ViewTransition>, Fragment Refs, browser(), transiciones independientes, Trusted Types en srcDoc
React 19.1 Lo anterior, y además <Activity>, useEffectEvent, cacheSignal, Performance Tracks y React Router 8 (exige 19.2.7)
React 19.0 Lo anterior, y además captureOwnerStack y Owner Stacks
React 18.3 Lo anterior, y además Actions, use, useOptimistic, ref como prop, <Context> y metadatos de documento

La guía de versiones reúne todos los apartados afectados, con lo que tienes que hacer en cada caso.

Recursos para descargar

  • API de ejemplo para todo el curso: empresa-api.zip. Solo necesita Node 22 o superior: se arranca con node server.mjs.
  • Proyecto completo del módulo 26: empresa-react.zip.

Estructura del curso

El curso se divide en 27 módulos agrupados en 5 bloques:

Bloque 1: Fundamentos (Módulos 00-08)

Módulo Tema Descripción
00 Introducción a React Qué es React, versiones y novedades de 19.0 a 19.3
01 Entorno de desarrollo Node, Vite, TypeScript, oxlint, Fast Refresh y DevTools
02 JSX a fondo Cómo se transforma JSX, reglas, escapado y XSS
03 Componentes y props Componentes función, props tipadas, children y composición
04 Estado con useState Estado, función actualizadora, inmutabilidad y estado derivado
05 Eventos y ciclo de renderizado Eventos sintéticos, render y commit, identidad y Strict Mode
06 Renderizado condicional y listas Condicionales, key a fondo, filtros, orden y tablas
07 Estilos en React CSS Modules, Tailwind, tema oscuro y metadatos de documento
08 Formularios Controlados y no controlados, FormData, validación y <form action>

Bloque 2: Hooks y TypeScript (Módulos 09-13)

Módulo Tema Descripción
09 Efectos con useEffect Dependencias, limpieza, condiciones de carrera y useEffectEvent
10 Refs, DOM y portales useRef, DOM, portales, flushSync y Fragment Refs
11 useReducer y Context Reductores, Context y use
12 Hooks personalizados Extraer lógica, useSyncExternalStore y composición
13 TypeScript con React Tipar props, eventos, refs y genéricos; Zod

Bloque 3: React moderno (Módulos 14-17)

Módulo Tema Descripción
14 Rendimiento y React Compiler Cuándo se renderiza, memo, React Compiler y Profiler
15 Suspense y concurrencia Transiciones, Suspense, lazy, use y Error Boundaries
16 Actions useActionState, useFormStatus y useOptimistic
17 Activity, View Transitions y más <Activity>, <ViewTransition>, browser() y Trusted Types

Bloque 4: Ecosistema (Módulos 18-22)

Módulo Tema Descripción
18 React Router 8 Rutas anidadas, loader, action, rutas protegidas y middleware
19 Datos con TanStack Query Caché, mutaciones, paginación y actualizaciones optimistas
20 Estado global: Zustand y Redux Toolkit Zustand, Redux Toolkit y RTK Query
21 Formularios avanzados React Hook Form, Zod 4 y errores de servidor
22 Testing Vitest, Testing Library, MSW y Playwright

Bloque 5: Producción (Módulos 23-26)

Módulo Tema Descripción
23 Server Components y Next.js 16 SSR, hidratación, RSC, Server Functions y Next.js 16
24 Accesibilidad e internacionalización ARIA, foco, teclado, Intl, i18n y axe
25 Arquitectura y despliegue Estructura por funcionalidades, Docker, Nginx y CI
26 Proyecto final Aplicación EMPRESA completa, con login, panel, CRUD y pruebas

Requisitos

  • JavaScript moderno y nociones de HTML y CSS
  • Node 22.22 o superior y un editor (Visual Studio Code recomendado)
  • Docker para el módulo de despliegue (se explica cuándo hace falta)

Convenciones utilizadas

A lo largo del curso encontrarás estos indicadores:

📘 Concepto: Explicación teórica de un concepto importante.

💻 Ejemplo: Código de ejemplo que puedes copiar y ejecutar.

✏️ Ejercicio: Práctica para que resuelvas por tu cuenta.

⚠️ Importante: Información crucial que debes recordar.

💡 Consejo: Trucos y buenas prácticas profesionales.

Table of contents