Tutorial de React con ejemplos en vivo
Un tutorial gratuito de React 19: componentes, JSX, props, estado, hooks y rendimiento. Cada ejemplo se ejecuta en la página, así que puedes editar el código y ver cómo cambian el componente y su consola.
Inicia un recorrido guiado de ReactPrimeros pasos
- Qué es ReactReact es una librería de JavaScript para construir interfaces de usuario a partir de componentes. Describes lo que la pantalla debe mostrar para los datos actuales, y React mantiene la página sincronizada cuando esos datos cambian.
- Instalar ReactInstala React creando un proyecto con Vite: revisa Node.js, ejecuta un comando de creación, instala las dependencias e inicia el servidor de desarrollo. También cubre los archivos generados, el build para producción y por qué Create React App está obsoleto.
- JSXJSX es una extensión de sintaxis de JavaScript que te permite escribir marcado parecido a HTML dentro de los componentes de React. Aprende sus reglas: un solo elemento raíz, etiquetas cerradas, className, atributos en camelCase, llaves, estilos en línea, comentarios y en qué se compila.
- ComponentesUn componente de React es una función de JavaScript que devuelve JSX. Aprende a escribir y nombrar componentes de función, combinarlos en un árbol, repartirlos en archivos, mantenerlos puros, y en qué se diferencian los componentes de los elementos.
- PropsLas props son las entradas de un componente de React: valores que un padre le pasa a un hijo como atributos JSX. Aprende a pasar y desestructurar props, definir valores por defecto, pasar funciones, propagar props y por qué las props son de solo lectura.
- Childrenchildren es la prop que contiene lo que pones entre las etiquetas de apertura y cierre de un componente. Aprende a construir componentes envoltorio y de layout con ella, pasar varios huecos como props con nombre, usar children como función, y cuándo la API Children es la herramienta equivocada.
- FragmentosUn Fragment de React agrupa varios elementos en un solo valor de retorno sin agregar un nodo a la página. Aprende la sintaxis corta <>...</>, cuándo necesitas <Fragment key> y por qué los fragmentos importan dentro de tablas y listas.
- Renderizado condicionalEl renderizado condicional en React es JavaScript normal: un if, un ternario o && deciden qué JSX devuelve un componente. Aprende cada patrón, el 0 suelto que puede imprimir &&, devolver null, y por qué ocultar un componente no es lo mismo que no renderizarlo.
- Listas y keysPara renderizar una lista en React llamas a map() sobre un array y devuelves JSX para cada elemento, dándole a cada uno una prop key. Aprende filter seguido de map, de dónde deben salir las keys y por qué usar el índice del array como key mezcla los elementos cuando la lista cambia.
- EventosLos eventos de React son props como onClick y onChange que reciben una función, que React llama con un objeto de evento cuando el usuario actúa. Aprende a pasar un manejador en lugar de llamarlo, pasar argumentos, leer e.target.value y e.key, evitar que el formulario recargue la página y detener la propagación.
- Estilos en ReactDas estilo a los componentes de React con className y CSS normal, con la prop style para valores calculados en JavaScript, con CSS Modules para nombres de clase con ámbito, o con clases utilitarias de Tailwind. Aprende cada uno, las clases condicionales y cuándo usar cuál.
Estado y formularios
- useStateuseState le da a un componente un valor que sobrevive a los renderizados y una función que vuelve a dibujar la pantalla cuando el valor cambia. Aprende la sintaxis, las funciones de actualización, objetos y arrays en el estado, y por qué un valor parece desactualizado justo después de cambiarlo.
- Actualizar arrays y objetosPara cambiar un array u objeto en el estado de React, crea uno nuevo y pásalo al setter. Aprende a agregar, quitar, reemplazar, insertar y ordenar elementos, actualizar objetos anidados y por qué mutar el estado deja la pantalla sin cambios.
- FormulariosConstruye formularios en React con inputs controlados: campos de texto, textarea, select, casillas y botones de radio, un objeto de estado para muchos campos, envío con onSubmit, mostrar errores de validación y las acciones de formulario de React 19.
- Controlados vs no controladosUn input controlado recibe su valor del estado de React y solo cambia mediante onChange. Un input no controlado guarda su propio valor en el DOM, y lo lees con una ref o con FormData. Aprende la diferencia, los avisos comunes y cuándo usar cada uno.
- Elevar el estadoElevar el estado significa sacar el estado de dos componentes y llevarlo a su padre común más cercano, que pasa el valor y un setter hacia abajo como props. Aprende cuándo elevarlo, cómo hacerlo en tres pasos y cuándo conviene dejar el estado local.
- useReduceruseReducer guarda estado y lleva cada actualización a una sola función reducer: despachas una acción y el reducer devuelve el siguiente estado. Aprende la sintaxis, cómo escribir un reducer puro, un ejemplo de lista de tareas, la inicialización diferida y cuándo elegirlo en lugar de useState.
Efectos y refs
- useEffectuseEffect ejecuta código después de que React actualizó la pantalla, para que un componente se sincronice con algo fuera de React: un temporizador, una suscripción, un event listener. Aprende las tres formas del array de dependencias, la limpieza, los bucles infinitos y cuándo no necesitas un efecto.
- Obtener datosObtén datos en React iniciando la petición en useEffect, guardando la carga, el error y los datos en el estado, e ignorando las respuestas que llegan después de que cambiaron las entradas. Cubre async/await en efectos, AbortController, condiciones de carrera y cuándo usar una librería.
- useRefuseRef le da a un componente una caja, `{ current }`, que conserva su contenido entre renderizados sin provocar un renderizado cuando la cambias. Úsalo para acceder a un nodo del DOM (foco, scroll, medidas) o para guardar el id de un temporizador o cualquier valor que la pantalla no muestra.
- forwardRefforwardRef permite que un componente reciba una ref de su padre y la conecte a un nodo del DOM interno. En React 19 los componentes de función reciben `ref` como una prop normal, así que el código nuevo ya no necesita forwardRef. Mira ambas versiones en funcionamiento, además de useImperativeHandle y los tipos de TypeScript.
- useLayoutEffectuseLayoutEffect funciona como useEffect, pero se ejecuta justo después de que React actualiza el DOM y antes de que el navegador pinte. Úsalo para medir un elemento y ajustar el layout sin un parpadeo visible, y deja useEffect para todo lo demás.
Hooks y contexto
- Hooks de ReactUn hook es una función cuyo nombre empieza con use y que permite a un componente usar una característica de React como el estado, el contexto, las refs o los efectos. Mira todos los hooks integrados agrupados por propósito, las dos reglas que sigue todo hook y cómo escribir el tuyo.
- useContextuseContext lee un valor que da un componente padre, así que un componente muy anidado lo recibe sin que cada componente intermedio lo pase como prop. Aprende createContext, los proveedores, cómo actualizar el contexto desde un hijo y cómo afecta el contexto a los renderizados.
- Prop drillingEl prop drilling es pasar una prop a través de componentes que no la usan, solo para que la pueda usar un componente más abajo. Míralo en un ejemplo ejecutable, por qué duele cuando la app crece, y las soluciones en el orden en que conviene probarlas: composición, contexto y luego una librería de estado.
- Hooks personalizadosUn hook personalizado es una función cuyo nombre empieza con use y que llama a otros hooks, para que varios componentes reutilicen la misma lógica con estado. Construye useToggle, useLocalStorage, useDebounce y useWindowWidth, y aprende por qué cada llamada recibe su propio estado.
- Reglas de los hooksLos hooks tienen dos reglas: llámalos en el nivel superior de un componente, nunca dentro de condiciones, bucles o funciones anidadas, y llámalos solo desde componentes de función o hooks personalizados. Aprende por qué React necesita el mismo orden de llamadas en cada renderizado y cómo arreglar los errores que aparecen cuando cambia.
- useIduseId devuelve un id único y estable para cada instancia de un componente, para que un label, un input y una pista con aria-describedby puedan apuntarse entre sí aunque el componente aparezca muchas veces. Aprende por qué Math.random y los contadores fallan con el renderizado en el servidor, y por qué useId no sirve para las keys de una lista.
- useSyncExternalStoreuseSyncExternalStore suscribe un componente a datos que viven fuera de React, como un pequeño módulo de store o una API del navegador como navigator.onLine, y lo vuelve a renderizar cada vez que esos datos cambian. Aprende subscribe y getSnapshot, por qué el snapshot debe estar en caché y getServerSnapshot.
Renderizado y rendimiento
- RenderizadoUn componente de React se vuelve a renderizar cuando cambia su estado, cuando su padre renderiza o cuando cambia un contexto que lee. Aprende la diferencia entre render y commit, qué significa de verdad el DOM virtual y cómo evitar los renderizados que no necesitas.
- useMemouseMemo guarda en caché el resultado de un cálculo entre renderizados y lo vuelve a calcular solo cuando cambian sus dependencias. Aprende la sintaxis, cómo mantener estable un objeto para un hijo con memo y cuándo useMemo no vale la pena.
- useCallbackuseCallback devuelve la misma función entre renderizados hasta que cambian sus dependencias. Solo ayuda cuando esa función se pasa a un hijo con memo o se usa como dependencia de un efecto. Aprende la sintaxis, la diferencia con useMemo y los errores que conviene evitar.
- React.memomemo envuelve un componente para que React se salte su nuevo renderizado cuando sus props son superficialmente iguales a las de la última vez. Aprende cuándo ayuda, por qué los objetos y funciones nuevos en las props lo anulan y lo que no impide.
- useTransitionuseTransition marca una actualización de estado como no urgente, para que React mantenga la página con buena respuesta mientras renderiza la parte lenta en segundo plano. Aprende isPending, startTransition, las transiciones async de React 19 y por qué no es un debounce.
- useDeferredValueuseDeferredValue te da una copia de un valor que puede quedarse atrás durante los renderizados pesados, para que un input mantenga una buena respuesta mientras una lista lenta se pone al día. Aprende cómo funciona, el valor inicial de React 19 y cómo se compara con useTransition y el debounce.
- Suspense y lazySuspense muestra un fallback mientras los componentes que contiene no están listos, y React.lazy carga el código de un componente solo cuando se renderiza por primera vez. Aprende code splitting, límites anidados, Suspense con use() en React 19 y el manejo de errores.
React 19 y temas avanzados
- React 19React 19 agregó Actions, useActionState, useOptimistic, use, ref como prop y metadatos del documento, y 19.2 agregó Activity y useEffectEvent. Mira cada novedad en funcionamiento, qué se eliminó y cómo actualizar.
- useActionStateuseActionState envuelve una acción async, guarda el último valor que devolvió y te dice si todavía se está ejecutando. Aprende la firma, las acciones de formulario, cómo devolver errores de validación y cómo llamarla fuera de un formulario.
- useOptimisticuseOptimistic muestra el resultado que esperas mientras una acción async todavía se ejecuta, y luego vuelve al estado real cuando termina, así que una petición fallida se deshace sola. Aprende la sintaxis, la forma con reducer y por qué debe ejecutarse dentro de una acción.
- useuse lee el valor de una promesa o de un contexto durante el renderizado. Con una promesa se suspende hasta que llegan los datos y muestra el fallback del Suspense más cercano. A diferencia de los demás hooks, puede ejecutarse dentro de sentencias if y bucles.
- Error BoundariesUn error boundary es un componente que captura los errores lanzados al renderizar los componentes que contiene y muestra un fallback en lugar de una pantalla en blanco. Aprende qué captura, cómo escribir uno como clase, cómo reiniciarlo y la librería react-error-boundary.
- PortalescreatePortal renderiza parte de un componente en otro nodo del DOM, como document.body, mientras sigue en el mismo lugar del árbol de React. Úsalo para modales, tooltips y menús que deben escapar de overflow hidden y del apilamiento de z-index.
- Strict ModeStrictMode es un envoltorio solo para desarrollo que renderiza los componentes dos veces, ejecuta los efectos como configuración, limpieza y configuración al montar, y avisa sobre APIs obsoletas, para que los renderizados impuros y las limpiezas que faltan aparezcan pronto. No hace nada en producción.
- Ciclo de vidaTodo componente de React se monta (aparece), se actualiza (vuelve a renderizarse) y se desmonta (se quita). Aprende cómo se relaciona cada fase con useEffect, los métodos de ciclo de vida de las clases y sus equivalentes en hooks, y las fases de render y commit.
- Componentes de claseUn componente de clase es una clase de JavaScript que extiende React.Component y devuelve JSX desde un método render. Aprende this.props, this.state y setState, cómo enlazar manejadores de eventos, los métodos de ciclo de vida, PureComponent y cómo convertir una clase en un componente de función.
Comparativas y entrevistas
- Preguntas de entrevista de ReactUnas 30 preguntas de entrevista de React, de nivel principiante a avanzado, cada una con una respuesta corta que un entrevistador aceptaría y código en vivo para las que se entienden mejor viéndolas que leyéndolas.
- React vs AngularReact es una librería de UI que combinas con otras herramientas; Angular es un framework completo con enrutamiento, formularios, HTTP e inyección de dependencias integrados. Compara los mismos componentes escritos en ambos, uno al lado del otro.
- React vs VueReact y Vue son herramientas de JavaScript para construir interfaces de usuario a partir de componentes. Se diferencian en el marcado (JSX vs plantillas), en cómo reaccionan a los cambios (estado inmutable y nuevos renderizados vs refs reactivas mutables) y en cuánto del ecosistema es oficial.
- React con TypeScriptCómo tipar una app de React con TypeScript: props y children, useState con uniones y null, useRef para elementos del DOM, manejadores de eventos, contexto, componentes genéricos y props de elementos nativos.
