React es una biblioteca de JavaScript para construir interfaces de usuario. Su idea central invierte la forma tradicional: en vez de manipular la página a mano (buscar un elemento, cambiarle el texto, agregar otro), describís cómo se ve la interfaz según los datos, y React se encarga de actualizarla cuando esos datos cambian. Se apoya en tres conceptos. Los componentes son piezas reutilizables de interfaz (un botón, una tarjeta, una lista) que se combinan como bloques. Las props son los datos que un componente recibe de su «padre», para configurarlo. Y el estado son los datos que cambian con el tiempo dentro de un componente (lo que escribió el usuario, si un menú está abierto); cuando el estado cambia, React vuelve a dibujar lo que corresponde, automáticamente. El requisito que casi nadie respeta: hay que saber JavaScript —incluida la asincronía— antes de React, porque React es JavaScript, no algo aparte.
Ver índice de contenidos
Qué problema resuelve React
Antes de React, construir una interfaz que cambiaba mucho —datos que se actualizan, listas que crecen, formularios— significaba manipular la página a mano: buscar un elemento, cambiarle el contenido, agregar otro, borrar aquel. Con una interfaz simple es manejable; con una compleja se vuelve un caos difícil de seguir, donde es fácil que la pantalla y los datos dejen de coincidir.
El cambio de mentalidad
React invierte el problema. En vez de decir «cuando pase esto, cambiá aquello» (dar instrucciones paso a paso), decís «así se ve la interfaz para estos datos» (describir el resultado). Cuando los datos cambian, React calcula qué hay que actualizar en la pantalla y lo hace por vos. Vos te ocupás de los datos; React, de reflejarlos. Es el patrón observador llevado a la interfaz.
Es una biblioteca, no un lenguaje ni un marco completo: se enfoca en la interfaz, y se combina con otras piezas para una aplicación entera. Existen alternativas con la misma idea (Vue, Svelte, Angular); React es la más usada, y el concepto se transfiere entre todas.
Componentes: piezas reutilizables
Un componente es una pieza de interfaz reutilizable e independiente: un botón, una tarjeta de producto, una barra de navegación. La interfaz se arma combinando componentes como bloques, y se anidan: una página contiene tarjetas, una tarjeta contiene un botón.
// Un componente es una función que devuelve interfaz (en JSX).
function Saludo() {
return <h1>Hola, mundo</h1>;
}
// Se usan como si fueran etiquetas, y se combinan.
function Pagina() {
return (
<div>
<Saludo />
<p>Bienvenido a mi primera app.</p>
</div>
);
}Esa sintaxis parecida al HTML dentro de JavaScript se llama JSX, y es una de las cosas que más choca al principio: es JavaScript que parece HTML. Los componentes se escriben con la primera letra en mayúscula para distinguirlos de las etiquetas normales. La ventaja de pensar en componentes es la misma que la de las funciones pequeñas: cada pieza se entiende, se prueba y se reutiliza por separado.
Props: pasar datos hacia abajo
Un componente reutilizable necesita poder configurarse: la misma tarjeta de producto debe servir para cualquier producto. Para eso están las props (propiedades): los datos que un componente recibe de quien lo usa.
// El componente recibe props y las usa.
function Tarjeta(props) {
return <div>{props.nombre} — ${props.precio}</div>;
}
// Quien lo usa le pasa datos distintos a cada uno.
<Tarjeta nombre="Libro" precio={20} />
<Tarjeta nombre="Taza" precio={8} />Dos reglas de las props: fluyen hacia abajo, del componente padre al hijo, y son de solo lectura —un componente no modifica las props que recibe—. Ese flujo en una sola dirección hace que sea fácil rastrear de dónde viene cada dato, algo que en la manipulación manual de la página se perdía. Cuando un dato tiene que cambiar, no se toca la prop: entra el estado.
Estado: los datos que cambian
El estado son los datos que cambian con el tiempo dentro de un componente: lo que el usuario escribió en un campo, si un menú está abierto, cuántos elementos hay en el carrito. A diferencia de las props (que vienen de afuera y no se tocan), el estado es interno y sí cambia.
import { useState } from 'react';
function Contador() {
// cuenta es el estado; setCuenta es cómo se cambia.
const [cuenta, setCuenta] = useState(0);
return (
<button onClick={() => setCuenta(cuenta + 1)}>
Clics: {cuenta}
</button>
);
}Acá está el corazón de React: cuando llamás a setCuenta, el estado cambia, y React vuelve a dibujar el componente automáticamente para reflejar el nuevo valor. No buscás el botón ni le cambiás el texto a mano: cambiás el dato, y la interfaz se actualiza sola. Esa sincronización automática entre datos y pantalla es todo lo que React aporta, y es también por qué se necesita entender bien lo asíncrono: cargar datos de una API y guardarlos en el estado es el patrón más común de una app real.
Antes de empezar con React
La honestidad que casi ninguna guía da: el mayor error con React es intentarlo sin saber JavaScript. React es JavaScript —componentes que son funciones, props que son argumentos, estado que son variables, JSX que es JavaScript—, así que casi todo lo que «confunde de React» al principio es, en realidad, JavaScript que no se aprendió.
- Requisito previo: manejar bien funciones, objetos, arreglos y sus métodos, la desestructuración, y la programación asíncrona. Y tener claros HTML y CSS, porque React genera HTML.
- Cómo arrancar: la documentación oficial recomienda usar un marco de trabajo sobre React para proyectos reales, pero para aprender los conceptos alcanza con una herramienta de arranque que arma el proyecto y un servidor de desarrollo.
- Qué NO hacer al principio: saltar a bibliotecas de estado global, enrutadores y decenas de dependencias antes de entender componentes, props y estado. Esos tres conceptos son el 80 % de React.
Errores frecuentes
- Aprender React sin saber JavaScript. Lo que confunde de React casi siempre es JavaScript no aprendido.
- Modificar el estado directamente. Hay que usar la función que lo actualiza; cambiarlo a mano no vuelve a dibujar la interfaz.
- Intentar modificar las props. Son de solo lectura; lo que cambia es el estado.
- Componentes gigantes. Uno que hace de todo es tan difícil de mantener como una función enorme; dividir en piezas.
- Sumar dependencias antes de entender lo básico. Componentes, props y estado primero; el resto, después.
- Olvidar que la interfaz refleja los datos. Si algo no se ve bien, casi siempre el problema está en el estado, no en la pantalla.
- Confundir React con un lenguaje. Es una biblioteca de JavaScript enfocada en la interfaz.
Preguntas frecuentes
¿Qué es React y para qué sirve?
Es una biblioteca de JavaScript para construir interfaces de usuario, es decir, la parte visual con la que interactúa quien usa una aplicación web. Su idea central invierte la forma tradicional de trabajar: en lugar de manipular la página a mano —buscar un elemento, cambiarle el texto, agregar otro— uno describe cómo debe verse la interfaz según los datos, y React se encarga de actualizarla cuando esos datos cambian. Eso resuelve el caos que aparece en interfaces complejas, donde mantener sincronizados a mano lo que se muestra y los datos subyacentes se vuelve muy difícil y propenso a errores. React es la opción más usada para esto, pero existen alternativas con la misma idea, como Vue o Svelte, y el concepto de fondo se transfiere entre todas ellas, así que aprender React también facilita entender las demás.
¿Qué son los componentes, las props y el estado?
Son las tres ideas centrales de React. Los componentes son piezas de interfaz reutilizables e independientes, como un botón o una tarjeta, que se combinan y anidan como bloques de construcción para armar la interfaz completa; cada uno es una función que devuelve un trozo de interfaz. Las props son los datos que un componente recibe desde el componente que lo usa para configurarlo, fluyen siempre hacia abajo del padre al hijo, y son de solo lectura, de modo que el mismo componente sirve para muchos casos cambiando las props que recibe. El estado son los datos que cambian con el tiempo dentro de un componente, como lo que escribió el usuario o si un menú está abierto; a diferencia de las props, es interno y mutable. La mecánica que une todo es que cuando el estado cambia, React vuelve a dibujar automáticamente las partes de la interfaz que dependen de él.
¿Necesito saber JavaScript antes de aprender React?
Sí, y es probablemente el consejo más importante y el que más se ignora. React es JavaScript: los componentes son funciones, las props son argumentos, el estado son variables, y la sintaxis parecida al HTML que se usa es JavaScript por debajo. Por eso, la enorme mayoría de las cosas que confunden a quien intenta aprender React sin una base sólida del lenguaje no son en realidad conceptos de React, sino de JavaScript que no llegaron a aprenderse. Antes de React conviene manejar con soltura funciones, objetos, arreglos y sus métodos, la desestructuración y, muy especialmente, la programación asíncrona, porque cargar datos de una API es una de las tareas más frecuentes. También hay que tener claros el HTML y el CSS, porque React en definitiva genera HTML. Saltarse esta base hace que aprender React sea mucho más frustrante y lento.
¿Qué es JSX?
Es la sintaxis que usa React para describir cómo se ve un componente, y se caracteriza por parecerse mucho al HTML pero estar escrita dentro de JavaScript. Es una de las cosas que más choca al principio, porque uno ve algo que parece HTML mezclado con código, pero en realidad es JavaScript: esa sintaxis se transforma por debajo en llamadas normales del lenguaje. Permite escribir la estructura de la interfaz de una forma visual y familiar, e insertar valores y expresiones de JavaScript dentro de ella usando llaves. Gracias a JSX, un componente puede devolver algo que se lee casi como el HTML que va a producir, pero con todo el poder de JavaScript disponible para generar contenido dinámico, recorrer listas o mostrar cosas condicionalmente. No es obligatorio usar JSX técnicamente, pero en la práctica es la forma estándar de escribir React y conviene acostumbrarse a él desde el principio.
¿Por qué la interfaz se actualiza sola cuando cambia el estado?
Porque ese es exactamente el mecanismo central de React y la razón por la que existe. Cuando actualizás el estado de un componente a través de la función correspondiente, React detecta ese cambio y vuelve a ejecutar el componente para calcular cómo debería verse la interfaz con los nuevos datos, y luego actualiza en la página solo lo que efectivamente cambió. Vos no buscás el elemento ni le cambiás el contenido a mano: solo modificás el dato, y React se encarga de reflejarlo. Esta es la inversión que define a React frente a la forma tradicional de trabajar. Por eso es tan importante actualizar el estado siempre a través de la función que React provee y nunca modificándolo directamente, porque si lo cambiás por fuera, React no se entera y la interfaz no se vuelve a dibujar, que es una fuente de confusión muy común al empezar.
¿Cómo empiezo un proyecto de React?
Para aprender los conceptos, lo más simple es usar una herramienta de arranque que crea la estructura del proyecto y levanta un servidor de desarrollo que recarga los cambios automáticamente mientras trabajás, sin tener que configurar nada complejo a mano. Con eso alcanza de sobra para practicar componentes, props y estado, que son el corazón de React. La documentación oficial recomienda, para proyectos reales de producción, usar un marco de trabajo construido sobre React que resuelve cuestiones adicionales como el enrutado y el renderizado, pero eso es un paso posterior. Un error habitual es sumar desde el inicio muchas dependencias —bibliotecas de estado global, enrutadores, decenas de paquetes— antes de haber entendido lo fundamental; conviene resistir esa tentación y dominar primero las tres ideas centrales, que representan la mayor parte de lo que se usa a diario, para incorporar el resto cuando la necesidad concreta aparezca.
Fuentes
Documentación oficial y material de la comunidad consultados para esta guía. Fecha de consulta: 28 de julio de 2026.
Aportes de la comunidad Underc0de
- Underc0de, foro. Sección Desarrollo web. Consultas sobre React, frontend y frameworks de interfaz.
- Underc0de, foro. Sección Programación. Arquitectura de aplicaciones y componentes.
Documentación oficial
- React. Documentación oficial de React, en español. La referencia principal, citada en la guía.
- React. Describir la interfaz. Componentes, JSX y props.
- React. Añadir interactividad. El estado y cómo reacciona la interfaz.
- Mozilla. JavaScript en MDN. La base del lenguaje sobre el que corre React.