JSX (JavaScript XML) es una extensión de sintaxis que permite escribir código similar a HTML directamente dentro de JavaScript. Es uno de los pilares fundamentales de React, ya que simplifica la creación y estructuración de interfaces de usuario de forma declarativa.

¿Qué es JSX?

JSX combina la potencia de JavaScript con la familiaridad del HTML. Aunque parece HTML, en realidad es una sintaxis que React transpila a código JavaScript puro utilizando funciones como React.createElement.

Ventajas de JSX

• Legibilidad: Hace que el código sea más legible y entendible al mezclar lógica y estructura.
• Declarativo: Permite describir claramente qué debería renderizarse en la interfaz.
• Integración: Facilita la manipulación de datos y la renderización condicional usando expresiones JavaScript.

Sintaxis de JSX

Elementos básicos

JSX permite usar etiquetas similares a HTML para crear elementos React. Cada etiqueta puede tener atributos, hijos y elementos anidados.

import React from 'react';

function MyComponent() {
  return (
    <div>
      <h1>Hola, soy JSX</h1>
      <p>Es fácil de usar y entender.</p>
    </div>
  );
}

Atributos en JSX

Los atributos en JSX utilizan camelCase en lugar de kebab-case. Además, algunos atributos de HTML tienen nombres diferentes en JSX.

• HTML vs JSX:
  • class se convierte en className.
  • for se convierte en htmlFor.

<input type="text" className="mi-clase" htmlFor="nombre" />

Expresiones en JSX

Puedes incluir código JavaScript dentro de JSX utilizando llaves {}. Esto permite combinar lógica y estructura.

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

<Greeting name="Juan" />;

También es posible realizar operaciones matemáticas, ejecutar funciones o evaluar condiciones directamente dentro de las llaves: