Fundamentos de React: JSX, Componentes y Props

Cuando empezamos con React, la forma de escribir código puede parecer extraña al principio. Vemos etiquetas de HTML mezcladas dentro de funciones de JavaScript y nos preguntamos: "¿Esto es válido?".

Hoy vamos a desmitificar los tres conceptos clave que usarás en absolutamente cualquier aplicación de React que construyas.

1. JSX: HTML con esteroides

La primera vez que ves código React, probablemente notes algo así:

const elemento = <h1>Hola, mundo!</h1>;

Eso no es un string ("...") ni tampoco es HTML puro. Es JSX (JavaScript XML).

JSX es una extensión de la sintaxis de JavaScript que nos permite describir cómo debería verse la interfaz visual. Aunque parece HTML, por debajo herramientas como Vite o Next.js lo transforman en llamadas a funciones de JavaScript que el navegador puede entender.

¿Por qué no es un string?

Porque es una expresión de JavaScript completa. Esto significa que puedes usar lógica dentro de él. Para insertar valores dinámicos, usamos llaves { }:

const nombre = "Victor";
const elemento = <h1>Hola, {nombre}!</h1>;

2. Componentes Funcionales

Si pensamos en una interfaz como un set de LEGO, los componentes son los ladrillos individuales.

En React moderno, un componente es simplemente una función de JavaScript que devuelve JSX.

Para que React reconozca que es un componente, debemos seguir una regla de oro: El nombre de la función debe empezar con Mayúscula (PascalCase).

// Esto es un componente válido
function Boton() {
  return (
    <button className="bg-blue-500 text-white px-4 py-2 rounded">
      Click aquí
    </button>
  );
}

Una vez definido, puedes usar este componente dentro de otros como si fuera una etiqueta HTML personalizada: <Boton />.

3. Props: Comunicación Padre e Hijo

Los componentes anteriores son útiles, pero son estáticos. Siempre muestran lo mismo. Para que sean reutilizables y dinámicos, necesitamos pasarles datos. Aquí entran las Props (propiedades).

Las props funcionan igual que los argumentos de una función. El componente "Padre" envía la información y el componente "Hijo" la recibe.

El componente Hijo (quien recibe)

// Recibimos 'props' como argumento
function Tarjeta({ titulo, descripcion }) {
  return (
    <div className="border p-4 shadow-md rounded-lg">
      <h2 className="text-xl font-bold">{titulo}</h2>
      <p className="text-gray-600 mt-2">{descripcion}</p>
    </div>
  );
}

El componente Padre (quien envía)

Ahora podemos reutilizar esa tarjeta con diferente información:

function App() {
  return (
    <main className="p-10 gap-4 grid">
      <Tarjeta
        titulo="Aprendiendo React"
        descripcion="React hace que crear interfaces sea divertido."
      />

      <Tarjeta
        titulo="Dominando Props"
        descripcion="Ahora nuestros componentes son dinámicos."
      />
    </main>
  );
}

Con solo estos tres conceptos, ya tienes la capacidad de fragmentar interfaces complejas en piezas pequeñas, manejables y reutilizables.