Curso de React 19
Domina lo nuevo de React 19: Actions, useActionState, useFormStatus, useOptimistic, la API use(), ref como prop, metadata del documento y mejoras de Suspense — en el IDE Arena.
- Paso 1
Tu primer componente
Un componente de React es una función de JavaScript que devuelve JSX (marcado). Los nombres de compo...
Comenzar lección - Paso 2
Exportar componentes
Cada archivo tiene UNA exportación por defecto (tu componente raíz) y cualquier cantidad de exportac...
Comenzar lección - Paso 3
Escribir marcado con JSX
JSX se parece a HTML pero es más estricto: devuelve un único elemento padre, cierra cada etiqueta y ...
Comenzar lección - Paso 4
JavaScript en JSX: llaves
Las llaves { } abren una ventana a JavaScript dentro de JSX. Pon cualquier expresión allí — una vari...
Comenzar lección - Paso 5
Estilizar componentes
Estiliza React con className (clases CSS) o con la prop style, que recibe un objeto JavaScript: styl...
Comenzar lección - Paso 6
Props: pasar datos
Las props permiten que un padre pase datos a un componente hijo, como atributos en una etiqueta: <Us...
Comenzar lección - Paso 7
Props por defecto y children
Los valores por defecto de parámetros hacen opcionales las props, y la prop especial children contie...
Comenzar lección - Paso 8
Renderizado condicional
Muestra UI distinta según condiciones usando el operador ternario (cond ? a : b) y el AND lógico (co...
Comenzar lección - Paso 9
Renderizar listas
Convierte un arreglo en UI con .map(), devolviendo un elemento por ítem. Cada hermano necesita una k...
Comenzar lección - Paso 10
Mantener componentes puros
Un componente debe ser una función pura de sus props: mismas props de entrada, mismo JSX de salida, ...
Comenzar lección - Paso 11
Fragmentos: devolver hermanos
Un componente devuelve UN raíz. Para devolver varios hermanos sin agregar un <div> extra al DOM, env...
Comenzar lección - Paso 12
Capstone: lista de tarjetas de perfil
Combina todo: un componente que recibe props, una lista renderizada con .map() y keys, renderizado c...
Comenzar lección - Paso 13
React 19: Novedades
React 19 es la actualización más grande en años: Actions para transiciones asíncronas, nuevos hooks ...
Comenzar lección - Paso 14
Actions y useActionState
En React 19 pasas una función asíncrona a <form action={...}>. useActionState envuelve esa acción y ...
Comenzar lección - Paso 15
useFormStatus
useFormStatus (de react-dom) permite que un componente hijo lea el estado pendiente del <form> padre...
Comenzar lección - Paso 16
useOptimistic
useOptimistic muestra una actualización optimista e instantánea de la UI mientras la petición asíncr...
Comenzar lección - Paso 17
La API use(): Promesas
use(promise) lee una promesa durante el render y suspende el componente hasta que resuelve — Suspens...
Comenzar lección - Paso 18
La API use(): Contexto
use(Context) lee contexto como useContext, pero como use() puede ejecutarse condicionalmente, puedes...
Comenzar lección - Paso 19
ref como Prop (sin forwardRef)
En React 19 los componentes de función pueden recibir ref como una prop normal. Desestructura { ref ...
Comenzar lección - Paso 20
Metadata del Documento
React 19 eleva las etiquetas <title>, <meta> y <link> renderizadas en cualquier parte de tu árbol ha...
Comenzar lección - Paso 21
<Context> como Provider y limpieza de ref
React 19 te permite renderizar <MyContext value={...}> directamente como provider — sin más .Provide...
Comenzar lección - Paso 22
useTransition y Suspense
React 19 te permite pasar una función asíncrona a startTransition — las Actions. isPending permanece...
Comenzar lección