Aprende React con el editor enriquecido
Componentes, props, hooks y patrones. Editor con Monaco, autocompletado TypeScript/React, vista previa en vivo y verificación—aprende practicando.
- Paso 1
React 1: Tu primer componente
Un componente es una función que devuelve JSX. Usa App y export default App como raíz....
Comenzar lección - Paso 2
React 2: Props
Los componentes pueden recibir props (propiedades). Las props permiten pasar datos al componente....
Comenzar lección - Paso 3
React 3: JSX y anidación
En React usamos JSX para describir la interfaz. Puedes anidar elementos dentro de divs y fragmentos....
Comenzar lección - Paso 4
React 4: Múltiples props
Los componentes pueden recibir varias props. Desestructúralas en la lista de parámetros....
Comenzar lección - Paso 5
Composición I: Componentes dentro de componentes
**Composición** es poner componentes dentro de otros. Crea Title, Body y Card que los use con JSX....
Comenzar lección - Paso 6
Composición II: Pasar props al componer
Al componer, el **padre** pasa props a los **hijos**. Crea Greeting que reciba name y Page que use <...
Comenzar lección - Paso 7
React 5: className
Usa **className** en JSX (en lugar de 'class') para dar estilo a los componentes....
Comenzar lección - Paso 8
React 6: Estilos en línea
Los componentes pueden tener **estilos en línea** con objetos JavaScript. Usa style={{ color: 'pink'...
Comenzar lección - Paso 9
React 7: Listas con map
Puedes usar **arrays** en JSX para renderizar listas. Usa map para transformar cada elemento en JSX....
Comenzar lección - Paso 10
React 8: Condicionales en JSX
Los componentes pueden usar **condicionales** con && o ? :. Renderiza contenido distinto según props...
Comenzar lección - Paso 11
React 9: useState
**useState** es un hook que recuerda valores. El componente se vuelve a renderizar cuando el estado ...
Comenzar lección - Paso 12
React 10: Eventos (onClick)
Los componentes pueden tener **eventos** como onClick. Pasa una función (no una llamada). Usa un man...
Comenzar lección - Paso 13
React 11: Efectos secundarios con useEffect
**useEffect** ejecuta código después del render: datos, timers, suscripciones. Úsalo para efectos se...
Comenzar lección - Paso 14
React 12: Eventos y formularios (componentes controlados)
Los **componentes controlados** vinculan el valor del input al estado con `value={state}` y `onChang...
Comenzar lección - Paso 15
React 13: Listas, keys y rendimiento
Usa siempre una **key** al renderizar listas (p. ej. `key={item.id}`). Las keys ayudan a React a emp...
Comenzar lección - Paso 16
React 14: Refs con useRef
**useRef** devuelve un objeto ref mutable: úsalo para **acceso al DOM** (focus, scroll, medir) o par...
Comenzar lección - Paso 17
React 15: useReducer
**useReducer** es como useState pero para estado complejo: envías **actions** y un **reducer** devue...
Comenzar lección - Paso 18
React 16: useMemo, useCallback y React.memo
**useMemo** cachea un valor calculado; **useCallback** cachea una función (para que los hijos no re-...
Comenzar lección - Paso 19
React 19: Límites de error (concepto)
Los **límites de error** capturan errores de JavaScript en el árbol debajo y muestran una UI de resp...
Comenzar lección - Paso 20
React 18: Hooks personalizados
Los **hooks personalizados** extraen lógica reutilizable (useState + useEffect + etc.) en una funció...
Comenzar lección - Paso 21
React 19: Límites de error (concepto)
Los **límites de error** capturan errores de JavaScript en el árbol debajo y muestran una UI de resp...
Comenzar lección - Paso 22
React 19 (1): Actions
Las **Actions** son transiciones asíncronas de primera clase en React 19. Pasas una función async a ...
Comenzar lección - Paso 23
React 19 (2): useActionState
**useActionState** une una action con estado (pending, datos, error). Úsalo para formularios que env...
Comenzar lección - Paso 24
React 19 (3): useFormStatus
**useFormStatus** devuelve el estado del formulario padre (pending, data, method). Úsalo dentro de c...
Comenzar lección - Paso 25
React 19 (4): useOptimistic
**useOptimistic** permite mostrar una actualización optimista en la UI antes de que el servidor resp...
Comenzar lección - Paso 26
React 19 (5): useTransition
**useTransition** marca actualizaciones de estado como transiciones no urgentes. La UI sigue respond...
Comenzar lección - Paso 27
React 19 (6): useDeferredValue
**useDeferredValue** difiere un valor: React puede seguir mostrando el valor anterior mientras calcu...
Comenzar lección - Paso 28
React 19 (7): Suspense para datos
**Suspense** permite mostrar un fallback mientras se cargan datos o componentes. En React 19 puedes ...
Comenzar lección - Paso 29
React 19 (8): Precarga de recursos
La **precarga de recursos** (preload) permite cargar scripts, hojas de estilo o datos antes de que s...
Comenzar lección - Paso 30
React 19 (9): Strict Mode y efectos idempotentes
En **Strict Mode**, React monta, desmonta y vuelve a montar componentes para detectar efectos no ide...
Comenzar lección - Paso 31
React 19 (10): Mentalidad de migración
**No reescribes** toda la app. Adopta **actions** y **flujos optimistas** donde ya tengas formulario...
Comenzar lección - Paso 32
React 19 (11): Hook use() para Promises
The **use()** hook is React 19's new primitive for reading async resources. Unlike useEffect, use() ...
Comenzar lección - Paso 33
React 19 (12): ref como prop
React 19 allows passing **ref** as a regular prop to function components—no more forwardRef! This si...
Comenzar lección - Paso 34
React 19 (13): metadatos del documento
React 19 supports rendering **<title>**, **<meta>**, and **<link>** tags directly in your components...
Comenzar lección - Paso 35
React 19 (14): carga de assets con Suspense
React 19 integrates **asset preloading** with Suspense. Use APIs like **preload()**, **preconnect()*...
Comenzar lección - Paso 36
React 19 (15): conceptos de Server Components
**React Server Components (RSC)** run on the server and send HTML to the client. They can access dat...
Comenzar lección - Paso 37
React 19 (16): conceptos del React Compiler
The **React Compiler** (formerly React Forget) automatically optimizes your components. It adds memo...
Comenzar lección - Paso 38
React 19 (17): reto avanzado — dashboard en tiempo real
Build a **real-time dashboard** combining multiple React 19 patterns: useTransition for search, useD...
Comenzar lección - Paso 39
React 32: testing básico con React Testing Library
**React Testing Library (RTL)** lets you test components the way users interact with them. Instead o...
Comenzar lección - Paso 40
React 33: probando interacciones de usuario
Real users don't just view your app—they click, type, hover, and navigate. **fireEvent** and **userE...
Comenzar lección - Paso 41
React 34: probando custom hooks
Custom hooks encapsulate reusable logic, but they can't be called outside components. **renderHook**...
Comenzar lección - Paso 42
React 35: patrón Compound Components
**Compound Components** let related components share implicit state. Like HTML's `<select>` and `<op...
Comenzar lección - Paso 43
React 36: patrón Render Props
**Render Props** share code between components using a prop whose value is a function. The component...
Comenzar lección - Paso 44
React 37: patrón Headless UI
**Headless components** provide behavior without styling. They handle complex logic (keyboard naviga...
Comenzar lección - Paso 45
React 38: fundamentos de TypeScript con React
**TypeScript** adds static types to React, catching errors at compile time instead of runtime. You g...
Comenzar lección - Paso 46
React 39: patrones avanzados de TypeScript
Advanced TypeScript patterns make your components more flexible and type-safe: **generics** for reus...
Comenzar lección - Paso 47
React 40: gestión de formularios con React Hook Form
**React Hook Form** minimizes re-renders and simplifies validation. Instead of controlled inputs, it...
Comenzar lección - Paso 48
React 41: patrones de fetching de datos
Modern data fetching uses **SWR** or **TanStack Query** (React Query) instead of raw useEffect. Thes...
Comenzar lección - Paso 49
React 42: profiling de rendimiento
React DevTools **Profiler** reveals why your components render. It shows render times, what triggere...
Comenzar lección - Paso 50
React 43: accesibilidad en React
**Accessibility (a11y)** ensures everyone can use your app—including people using screen readers, ke...
Comenzar lección - Paso 51
React 44: useReducer — Shopping Cart
A real **useReducer** shines when state has many actions. A shopping cart adds items, changes quanti...
Comenzar lección - Paso 52
React 45: useContext — Auth Provider + custom hook
Real-world Context wraps a **Provider component** that owns state and a **custom hook** (`useAuth`) ...
Comenzar lección - Paso 53
React 46: Custom hook — useLocalStorage
A **useLocalStorage** hook gives you `useState` that **persists** across page reloads. It reads the ...
Comenzar lección - Paso 54
React 47: Custom hook — useFetch with AbortController
A robust **useFetch** hook tracks `data`, `loading` and `error`, and **cancels** stale requests with...
Comenzar lección - Paso 55
React 48: Portals — Modal that escapes overflow
**createPortal** renders children into a different DOM node — usually `document.body` — while keepin...
Comenzar lección - Paso 56
React 49: useId for accessible form fields
**useId** generates a stable, unique id that's identical on server and client — perfect for linking ...
Comenzar lección - Paso 57
React 50: Controlled vs Uncontrolled inputs
A **controlled** input stores its value in React state (`value` + `onChange`) — React is the single ...
Comenzar lección - Paso 58
React 51: Debounced search box
Searching on every keystroke hammers your API. **Debouncing** waits until the user stops typing for ...
Comenzar lección