¿Qué es React? La librería de JavaScript para interfaces

React es una librería de JavaScript para construir interfaces de usuario a partir de componentes. Describes cómo debe verse la pantalla para los datos actuales, y cuando los datos cambian, React actualiza la página para que coincida. React, React JS y ReactJS son lo mismo: una librería de código abierto creada en Facebook (hoy Meta).

import { useState } from 'react';

function Counter({ label }) {
    const [count, setCount] = useState(0);

    return (
        <p>
            {label}: {count}{' '}
            <button onClick={() => setCount(count + 1)}>Add one</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <h3>Fruit basket</h3>
            <Counter label="Apples" />
            <Counter label="Pears" />
        </div>
    );
}

Haz clic en ambos botones. Cada Counter guarda su propio número, porque cada uno es una copia separada del componente con su propio estado. Agrega una tercera línea, <Counter label="Plums" />, y aparece un nuevo contador independiente.

Ese ejemplo corto ya muestra las tres ideas sobre las que se construye React: componentes (Counter y App son funciones que devuelven UI), JSX (la sintaxis parecida a HTML dentro de return) y estado (count, un valor que hace que React vuelva a dibujar el componente cuando cambia).

El problema que resuelve React

Una interfaz de usuario es una imagen de ciertos datos. Cuando los datos cambian, la imagen tiene que cambiar también, y cada parte de la pantalla que depende de esos datos tiene que cambiar con ella. Sin una librería, escribes ese código a mano: buscas cada elemento y luego cambias tú mismo su texto, su clase o su visibilidad. Cada nueva funcionalidad agrega otro lugar que tienes que acordarte de actualizar.

React le da la vuelta a esto. Escribes una función que dice cómo debe ser la pantalla para un estado dado, y React calcula qué partes de la página tienen que cambiar. Esto se llama UI declarativa, en contraste con el código imperativo que enumera cada cambio del DOM paso a paso. Aquí tienes ambos estilos juntos en un mismo ejemplo:

import { useEffect, useRef, useState } from 'react';

function ByHand() {
    const boxRef = useRef(null);

    useEffect(() => {
        // Plain DOM code: no React state, no JSX.
        const box = boxRef.current;
        box.innerHTML = 'By hand: <span class="num">0</span> is <span class="parity">even</span> <button>+1</button>';
        let count = 0;
        const button = box.querySelector('button');

        function handleClick() {
            count += 1;
            box.querySelector('.num').textContent = count;
            box.querySelector('.parity').textContent = count % 2 === 0 ? 'even' : 'odd';
        }

        button.addEventListener('click', handleClick);
        return () => button.removeEventListener('click', handleClick);
    }, []);

    return <p ref={boxRef} />;
}

function Declarative() {
    const [count, setCount] = useState(0);

    return (
        <p>
            Declarative: {count} is {count % 2 === 0 ? 'even' : 'odd'}{' '}
            <button onClick={() => setCount(count + 1)}>+1</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <ByHand />
            <Declarative />
        </div>
    );
}

ByHand le entrega su párrafo a código DOM puro (el efecto solo ejecuta ese código cuando React ya creó el párrafo). Guarda el número en una variable, busca cada elemento con querySelector y cambia su texto a mano. Declarative solo dice "muestra el contador y muestra si es par". Borra la línea de handleClick que cambia .parity y haz clic unas cuantas veces: la primera fila ahora afirma que 3 es par, mientras que la segunda no puede desincronizarse, porque el texto se calcula a partir de count en cada renderizado.

Cómo actualiza React la página

Cuando el estado cambia, React vuelve a llamar a tu función de componente. Esa llamada es un renderizado. La función devuelve una descripción nueva de la UI, React la compara con la anterior y luego cambia solo las partes de la página real que son distintas. A esa descripción en memoria se le suele llamar DOM virtual.

import { useState } from 'react';

export default function App() {
    const [name, setName] = useState('');

    console.log('App rendered, name is', JSON.stringify(name));

    return (
        <div>
            <input
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="Type your name"
            />
            <p>Hello, {name || 'stranger'}!</p>
        </div>
    );
}

Abre la consola bajo la vista previa y escribe algunas letras. Cada pulsación registra un renderizado con el nuevo valor. El input conserva el foco y la posición del cursor, porque React solo tocó el texto del párrafo y el valor del input, no toda la página. La página sobre renderizado explica exactamente cuándo un componente vuelve a renderizarse.

Componentes, JSX y estado de un vistazo

Los componentes son funciones de JavaScript cuyos nombres empiezan con mayúscula. Devuelven lo que debe aparecer en pantalla, y los usas como etiquetas HTML: <Counter />. Una página es un árbol de componentes, desde los pequeños como un botón hasta los grandes como toda una pantalla de ajustes. Consulta componentes.

JSX es la sintaxis que te permite escribir marcado dentro de JavaScript. Las llaves te devuelven a JavaScript, así que {count} muestra un valor y {items.map(...)} convierte un array en una lista. Una herramienta de build compila JSX a llamadas de función normales antes de que el navegador lo ejecute.

El estado son datos que un componente recuerda entre renderizados. Lo creas con el hook useState, y llamar a su setter es la forma de decirle a React que algo cambió. Los datos fluyen de padres a hijos mediante props, que son los argumentos de un componente.

Este ejemplo usa todo eso: una lista renderizada a partir de un array en el estado y un formulario que le agrega elementos.

import { useState } from 'react';

function TaskList({ tasks }) {
    if (tasks.length === 0) return <p>Nothing to do.</p>;
    return (
        <ul>
            {tasks.map((task) => (
                <li key={task}>{task}</li>
            ))}
        </ul>
    );
}

export default function App() {
    const [tasks, setTasks] = useState(['Learn JSX', 'Learn props']);
    const [draft, setDraft] = useState('');

    function addTask() {
        if (draft.trim() === '') return;
        setTasks([...tasks, draft.trim()]);
        setDraft('');
    }

    return (
        <div>
            <input value={draft} onChange={(e) => setDraft(e.target.value)} />
            <button onClick={addTask}>Add</button>
            <TaskList tasks={tasks} />
            <p>{tasks.length} tasks</p>
        </div>
    );
}

Agrega una tarea y cambian dos cosas a la vez: la lista y el conteo debajo. Nunca le dijiste al conteo que se actualizara. Ambos leen de tasks, así que ambos lo siguen. Cambia el array inicial por [] y la lista muestra "Nothing to do." en su lugar.

Lo que React no es

React es una librería, no un framework completo. Cubre los componentes, el estado y su conversión en UI, y deja fuera a propósito varias cosas que necesita una app completa:

• Enrutamiento. No hay una forma integrada de asociar URLs con páginas. React Router y los routers de los frameworks cubren ese hueco.
• Obtención de datos y renderizado en el servidor. React te da herramientas como los efectos y Suspense, pero no opina sobre de dónde vienen los datos ni cómo se renderizan las páginas en un servidor.
• Una configuración de build. Los navegadores no entienden JSX, así que necesitas una herramienta como Vite para compilarlo.

Los frameworks se construyen sobre React para aportar estas piezas. Next.js y el modo framework de React Router agregan enrutamiento, renderizado en el servidor y carga de datos, y el equipo de React recomienda empezar una app completa con uno de ellos. Para una app del lado del cliente o para aprender, Vite con React puro es un punto de partida pequeño y rápido; consulta cómo instalar React.

React vs React Native

React por sí solo describe componentes y cómo cambian. Un renderizador aparte los convierte en algo que puedes ver. React DOM renderiza en páginas web, que es lo que usan todos los ejemplos de este sitio. React Native renderiza el mismo tipo de componentes en vistas nativas de iOS y Android, así que escribes <View> y <Text> en lugar de <div> y <p>, y no hay archivos HTML ni CSS. Los componentes, props, estado y hooks funcionan igual en ambos, así que lo que aprendas aquí te sirve directamente.

Cuándo aprender React

Aprende React después de lo básico de JavaScript, porque todo en React es JavaScript. Antes de empezar, debes sentirte cómodo con:

• variables, funciones y funciones flecha
• arrays y sus métodos map y filter
• objetos, desestructuración y la sintaxis de propagación (...)
• import y export
• promesas y async/await, para cargar datos

Si eso te resulta familiar, empieza con JSX y componentes, luego props y estado. Los efectos, refs, contexto y herramientas de rendimiento vienen después, cuando construir componentes interactivos pequeños se sienta natural.