¿Qué es React? Guía para principiantes

01¿Qué es React y para qué sirve, en pocas palabras?

La respuesta más breve a qué es React es esta: una biblioteca de JavaScript que se usa para construir interfaces de usuario que se ejecutan en el navegador. Usted define por separado las piezas de una página web, como el menú, la ficha de producto, el carrito o el formulario, y luego las combina para formar la página entera.

React no es un framework, sino una biblioteca. Para el enrutamiento, la obtención de datos o las tareas del lado del servidor hacen falta herramientas adicionales. Gracias a esta flexibilidad puede usarse a cualquier escala, desde un pequeño widget hasta un gran panel de administración.

Para entender React hay que conocer primero el propio lenguaje. Si le faltan las bases, le recomendamos empezar con el artículo qué es JavaScript; todo lo que escriba en React acaba siendo JavaScript.

02¿Para qué sirve React?

La verdadera fuerza de React es que actualiza la interfaz automáticamente a medida que cambian los datos. Al añadir un producto al carrito aumenta el contador y al elegir un filtro se renueva la lista; el desarrollador no tiene que escribir a mano cada una de esas actualizaciones.

Otra ventaja es la facilidad de mantenimiento. Como la interfaz está dividida en componentes, si quiere cambiar el aspecto de un botón toca un único archivo; el cambio se refleja en todos los lugares donde se usa ese componente. En los equipos grandes, como cada persona puede trabajar en un componente distinto, el reparto del trabajo también queda más claro.

Que React tenga una comunidad amplia es otra ventaja práctica. Para necesidades como selectores de fecha, tablas, gráficos o validación de formularios existen paquetes de código abierto maduros; pero cada dependencia añade una carga de mantenimiento al proyecto, así que la elección de paquetes debe hacerse con criterio.

Por eso React destaca en las pantallas con mucha interacción con el usuario. Sus usos típicos son estos:

• Paneles de administración y pantallas de informes
• Listados de productos, filtros y flujos de carrito en e-commerce
• Flujos de varios pasos, como formularios de reserva, cita y presupuesto
• Pantallas en vivo que muestran datos en tiempo real (pedidos, stock, mensajería)
• Aplicaciones móviles con React Native (el mismo modelo mental, otra plataforma)

03¿Cómo funciona la estructura de componentes de React?

En React todo es un componente (component). Un componente es una función que contiene una pieza de la interfaz y su comportamiento. Usted escribe una vez un componente “FichaProducto” y lo utiliza cientos de veces en la página con datos distintos.

Los componentes reciben datos desde fuera mediante props y guardan internamente la información cambiante con state. Las props son como los parámetros de una función; el state es la memoria del componente. Cuando el state cambia, React vuelve a dibujar el componente.

import { useState } from "react";

function Sayac({ baslik }) {
  const [adet, setAdet] = useState(0);

  return (
    <div>
      <h3>{baslik}</h3>
      <p>Adet: {adet}</p>
      <button onClick={() => setAdet(adet + 1)}>Aumentar</button>
    </div>
  );
}

export default Sayac;

¿Qué es JSX?

En el ejemplo anterior, la parte que se parece a HTML es JSX. JSX es una sintaxis que permite describir la interfaz de forma legible dentro de JavaScript. El navegador no entiende JSX directamente; las herramientas de compilación lo convierten en llamadas normales de JavaScript.

¿Qué aportan los hooks?

Los hooks, como useState y useEffect, dan a los componentes de función la capacidad de guardar estado, obtener datos y gestionar efectos secundarios. Para quien empieza, basta con dominar bien primero useState y useEffect.

04DOM virtual y rendimiento

La estructura de la página en el navegador se llama DOM, y modificar el DOM con frecuencia es costoso. React mantiene en memoria una copia ligera de la interfaz, llamada DOM virtual. Cuando los datos cambian, compara la nueva copia con la anterior y aplica al DOM real solo la diferencia.

Este enfoque libera al desarrollador de escribir una a una las operaciones sobre el DOM. Aun así, el DOM virtual por sí solo no garantiza velocidad. Un tamaño de paquete grande, redibujados innecesarios e imágenes sin optimizar pueden ralentizar también un sitio hecho con React.

La velocidad que percibe el usuario se mide con los Core Web Vitals: se consideran buenos un LCP ≤ 2,5 s, un INP ≤ 200 ms y un CLS ≤ 0,1. Para alcanzar estos umbrales, la gestión de velocidad y rendimiento debe abordarse como una partida aparte, con independencia de la tecnología.

05¿En qué proyectos se prefiere React?

No todos los sitios web requieren React. Para un sitio de presentación de unas pocas páginas, el HTML y el CSS sencillos con un poco de JavaScript suelen ser más rápidos y económicos. El valor de React se hace evidente a medida que aumentan la interacción y el volumen de datos.

La tabla siguiente ofrece un marco general para facilitar la decisión:

06Hoja de ruta para aprender React

El error más frecuente de quienes quieren aprender React es pasar directamente a la biblioteca sin tener asentadas las bases de JavaScript. El orden siguiente ofrece un camino sólido para un aprendizaje duradero:

1. Aprenda con HTML y CSS el esqueleto de la página y la lógica de la maquetación.
2. Domine en JavaScript las variables, arrays, objetos, funciones, map/filter y async/await.
3. Practique los conceptos de componente, props y state con el tutorial de la documentación oficial.
4. Haga un proyecto pequeño: una lista de tareas, el tiempo o un filtro de productos.
5. Pase a la gestión de formularios, la obtención de datos y el enrutamiento.
6. Añada TypeScript para dar seguridad de tipos a los proyectos que crecen.

Cómo iniciar el primer proyecto

Para un proyecto React nuevo, el método habitual es usar una herramienta de compilación como Vite. En su equipo debe estar instalada la versión LTS actual de Node.js. Para las recomendaciones vigentes, siga la documentación oficial en react.dev.

npm create vite@latest ilk-react-projem -- --template react
cd ilk-react-projem
npm install
npm run dev

07React, TypeScript y el ecosistema

React por sí solo es la capa de interfaz; en un proyecto real también se eligen las herramientas que lo rodean. Se usan con frecuencia frameworks como Next.js para el renderizado en el servidor y el enrutamiento, TypeScript para la seguridad de tipos y herramientas como Testing Library para las pruebas.

A medida que crece el equipo, TypeScript se vuelve casi un estándar; en el código se escribe de forma explícita qué props espera cada componente y los errores se detectan al compilar. Para más detalles puede consultar nuestro artículo qué es TypeScript.

También es importante tener claro en qué capa del proyecto se sitúa React. La parte de interfaz es el frontend, y la base de datos y las reglas de negocio son el backend; el límite entre ambos lo explicamos en el artículo diferencia entre frontend y backend.

08Para una buena interfaz no basta con React

React es una buena forma de programar la interfaz, pero no determina qué se muestra, en qué orden ni a quién. Esas decisiones son tarea del diseño de la experiencia de usuario. Programar con la tecnología más moderna una pantalla con un flujo poco claro solo significa producir el problema más deprisa.

Por eso, en los proyectos se planifican primero el recorrido del usuario, los bocetos de pantalla y la biblioteca de componentes; el código se construye sobre ello. Un trabajo de diseño UI/UX dibuja además el mapa natural de los componentes de React.

En las páginas en las que importa la visibilidad en los buscadores, hay que pensar a la vez en la infraestructura técnica y en la estructura del contenido. En el enfoque del diseño web SEO, la jerarquía de títulos, el HTML generado en el servidor y la velocidad se abordan al mismo tiempo.