¿Qué es React? Guía para Principiantes

React es una biblioteca de JavaScript para construir interfaces de usuario interactivas y dinámicas. Fue creada por Facebook (ahora Meta) y se ha convertido en una de las tecnologías más populares para el desarrollo frontend moderno.

En este artículo aprenderás qué es React, cómo funciona su sintaxis y los conceptos básicos que necesitas para empezar.

---

¿Qué es React?

React es una biblioteca (no un framework completo) enfocada en la construcción de interfaces de usuario (UI). Su principal objetivo es permitirnos crear aplicaciones web rápidas, escalables y mantenibles.

React se basa en tres pilares fundamentales:

• Componentes reutilizables
• Estado (State)
• Renderizado declarativo

Gracias a estos conceptos, puedes dividir tu aplicación en pequeñas piezas independientes llamadas componentes.

---

Componentes: La Base de Todo

En React, todo se construye a partir de componentes.

Un componente es una función que devuelve código JSX (una mezcla entre JavaScript y HTML).

function Welcome() {
  return <h1>Hola, bienvenido a React</h1>;
}

Este componente puede reutilizarse en cualquier parte de la aplicación.

También puedes usar componentes dentro de otros:

function App() {
  return (
    <div>
      <Welcome />
      <p>Estamos aprendiendo React</p>
    </div>
  );
}

¿Qué es JSX?

JSX es una extensión de sintaxis que permite escribir algo muy parecido a HTML dentro de JavaScript.

Ejemplo:

const element = <h1>Hola mundo</h1>;

Aunque parece HTML, en realidad es JavaScript. React transforma ese código en llamadas que crean elementos virtuales.

Reglas importantes de JSX:

• Debe haber un solo elemento padre
• Las etiquetas deben cerrarse correctamente
• Se usa className en lugar de class
• Se pueden insertar expresiones JavaScript usando {}

Ejemplo con JavaScript dentro de JSX:

const name = "Diego";

function Greeting() {
  return <h1>Hola {name}</h1>;
}

Props: Comunicación entre Componentes

Las props (propiedades) permiten pasar información de un componente padre a un componente hijo.

function Greeting({ name }) {
  return <h1>Hola {name}</h1>;
}

function App() {
  return <Greeting name="Carlos" />;
}

Las props son de solo lectura. Un componente no debe modificar sus propias props.

Estado (State) en Componentes Funcionales

El estado permite que un componente recuerde información y reaccione a cambios.

import { useState } from "react";

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

  return (
    <div>
      <p>Contador: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Incrementar
      </button>
    </div>
  );
}

Cuando el estado cambia, React vuelve a renderizar el componente automáticamente.

Renderizado Declarativo

React utiliza un enfoque declarativo. Esto significa que tú describes cómo debería verse la interfaz según el estado actual, y React se encarga del resto.

function Message({ isLogged }) {
  return (
    <div>
      {isLogged ? <p>Bienvenido</p> : <p>Por favor inicia sesión</p>}
    </div>
  );
}

Aquí no manipulamos el DOM manualmente. Simplemente declaramos qué debe mostrarse.

Ventajas de React

• Componentes reutilizables
• Gran comunidad y ecosistema
• Virtual DOM para mejor rendimiento
• Fácil integración con otras tecnologías
• Ideal para aplicaciones SPA

Conclusión

React es una herramienta poderosa y flexible para crear interfaces modernas. Entender sus conceptos básicos —componentes, JSX, props y estado— es el primer paso para convertirte en desarrollador frontend profesional.

Si estás comenzando en el mundo del desarrollo web, aprender React es una excelente decisión.