Tutorial React: Introducción a JSX

¿Qué es JSX?

JSX, acrónimo de JavaScript XML, es una extensión de la sintaxis de JavaScript que te permite escribir código similar a HTML dentro de archivos JavaScript. No es HTML puro ni una cadena de texto; es una forma de escribir elementos de la interfaz de usuario de manera declarativa que React puede entender y convertir en elementos reales del DOM.

Su propósito principal es:

• Facilitar la creación de interfaces de usuario (UI) en React, ofreciendo una sintaxis intuitiva y legible para definir componentes y sus estructuras.
• Permitir que la lógica de renderizado y el marcado de la UI convivan en el mismo archivo de JavaScript, lo que mejora la cohesión y la legibilidad del código de un componente.

¿Cuál es la diferencia entre JSX y HTML?

Aunque JSX se parece mucho a HTML, hay diferencias clave:

• HTML es un lenguaje de marcado para estructurar contenido web directamente en el navegador.
• JSX es una extensión de JavaScript que se transpila a llamadas a funciones de React (como React.createElement()). No es interpretado directamente por el navegador.
• Atributos: En JSX, algunos atributos HTML se escriben en camelCase (ej. className en lugar de class, htmlFor en lugar de for). También puedes insertar expresiones JavaScript directamente dentro de las llaves {}.
• Elementos vacíos: En JSX, los elementos que no tienen contenido deben cerrarse explícitamente (ej. <img /> en lugar de <img>).
• Clases CSS: En JSX, se usa className para definir clases CSS, para evitar conflictos con la palabra reservada class de JavaScript.

JSX y su comportamiento en React 19: Server y Client Components

Con la llegada de React 19 y la arquitectura de Server Components (predeterminada en frameworks como Next.js App Router), el comportamiento de JSX tiene una distinción importante:

• En Server Components (por defecto): El JSX se renderiza completamente en el servidor. Esto significa que el navegador solo recibe el HTML final, sin necesidad de enviar ni ejecutar el JavaScript de ese componente en el cliente, a menos que se trate de un Client Component anidado. Esto optimiza el rendimiento inicial y reduce el JavaScript que se envía al navegador.
• En Client Components (marcados con “use client”): El JSX se compila y ejecuta en el navegador. Esto permite la interactividad completa con useState, useEffect y el acceso a APIs del navegador, como lo conocemos en React tradicional.

Nota Importante: Directivas "use client" y "use server"

Las directivas especiales como "use client" y “use server” son una novedad clave para la construcción de aplicaciones full-stack modernas con React.

No estaban presentes en React 18. Son una característica que React 19 consolida y habilita para frameworks como Next.js (App Router) y Remix, permitiendo definir explícitamente qué código se ejecuta en el navegador y cuál en el servidor. Esto es fundamental para la optimización del rendimiento y la seguridad en las aplicaciones actuales.

Para definir un Client Component, debe añadirse la directiva 'use client' al inicio del archivo:

'use client';

export function Boton({texto, mensaje}) {
  return (
      <button className="rojo" onClick={() => capturarClick(mensaje)}>{texto}</button>
  )
}

Sintaxis y estructura:

• En JSX, las etiquetas deben estar correctamente cerradas. Incluso las etiquetas que son autoconclusivas en HTML, como <img /> o <br />, deben cerrarse explícitamente en JSX.
• Los nombres de los atributos en JSX siguen la convención de camelCase en lugar del kebab-case utilizado en HTML. Por ejemplo, class en HTML se convierte en className en JSX, y onclick se convierte en onClick.

//Boton.jsx
import './boton.css'

export function Boton({texto, mensaje}) {
  return (
      <button className="rojo" onClick={() => capturarClick(mensaje)}>{texto}</button>
  )
}

function capturarClick(mensaje) {
    alert(mensaje)
}

//App.jsx
import './App.css'
import { Boton } from './components/boton'

export default function App() {
  return (
    <Boton texto="Soy un Boton" mensaje={"Boton cliqueado"}></Boton>
  )
}

.rojo{
    background-color: red;
    color: white;
    padding: 10px;
    border-radius: 10px;
    font-weight: bold;
}

Expresiones JavaScript:

• JSX permite la inclusión de expresiones JavaScript dentro de su sintaxis utilizando llaves {}. Esto permite la interpolación de variables y la ejecución de funciones directamente dentro del marcado JSX.

export default function Titulo() {
  const texto = "Hello World"
  return (
      <h1>{texto}</h1>
  )
}

Diferencias semánticas:

• Mientras que HTML se utiliza para definir la estructura y el contenido de una página web, JSX se utiliza para definir la estructura de componentes de React. Esto significa que JSX es más flexible y puede contener lógica de renderizado más compleja que la permitida en HTML.

Compilación:

• JSX no es entendido directamente por los navegadores. JSX es procesado por React Compiler que optimiza automáticamente las renderizaciones, analizando las dependencias de componentes y eliminando la necesidad de memoización manual.

export default function Titulo() {
const texto = "Hello World"
return (
<h1>{texto}</h1>
)
}
// El compilador de React analiza las dependencias automáticamente
// y optimiza las renderizaciones

Fragmentos:

• A diferencia de HTML, donde todas las etiquetas deben estar contenidas dentro de un único nodo raíz, JSX permite el uso de React.Fragment para agrupar un conjunto de elementos sin añadir nodos extra al DOM.

return (
  <React.Fragment>
    <h1>Título</h1>
    <p>Parrafo</p>
  </React.Fragment>
);

// Alternativa abreviada
return (
  <>
    <h1>Título</h1>
    <p>Parrafo</p>
  </>
);

Elementos y atributos en JSX

En JSX, los elementos y atributos son fundamentales para la creación y manipulación de interfaces de usuario. A continuación, se detallan los aspectos clave de los elementos y atributos en JSX, junto con ejemplos de código para ilustrar su uso.

Elementos en JSX

Los elementos en JSX son las unidades básicas de la interfaz de usuario. Al igual que en HTML, se utilizan etiquetas para definir estos elementos. Sin embargo, existen diferencias importantes que deben tenerse en cuenta:

Elementos HTML y componentes React:

• En JSX, las etiquetas en minúsculas representan elementos HTML nativos, mientras que las etiquetas en mayúsculas representan componentes de React.

return (
  <>
    <h1>Hola mundo</h1> // Elemento HTML
    <Boton texto="Clickeame" mensaje="Hola mundo" /> // Componente React
  </>
)

Elementos anidados:

• Los elementos pueden anidarse unos dentro de otros, formando estructuras más complejas.

return (
  <div>
    <h1>Título</h1>
    <p>Esto es un párrafo dentro de un div.</p>
  </div>
)

Atributos en JSX

Los atributos en JSX se utilizan para configurar los elementos, de manera similar a como se hace en HTML, pero con algunas diferencias clave:

Nombres de atributos:

• Los nombres de los atributos en JSX siguen la convención de camelCase en lugar del kebab-case utilizado en HTML.

return (
      <button className="rojo" onClick={() => capturarClick(mensaje)}>{texto}</button>
  )

Valores de atributos:

• Los valores de los atributos en JSX pueden ser expresiones JavaScript, no solo cadenas de texto.

const isActive = true;
return (
    <button disabled={!isActive} className="rojo" onClick={() => capturarClick(mensaje)}>{texto}</button>
)

Atributos booleanos:

• Los atributos booleanos en JSX se especifican solo con el nombre del atributo cuando su valor es true. Si el valor es false, el atributo debe ser omitido.

return (
  <>
    <input type="checkbox" checked />
    <input type="checkbox" checked={false} />
  </>
)

Propiedades de estilo:

• Los estilos en línea se definen utilizando un objeto JavaScript, con las propiedades en camelCase.

const divStyle = {
  backgroundColor: 'lightblue',
  padding: '10px'
};
return(
  <div style={divStyle}>Div con estilo en línea</div>
)

Propiedades personalizadas y spread attributes

Propiedades personalizadas:

• Además de los atributos estándar, los componentes pueden aceptar propiedades personalizadas que se pasan como atributos.

//Titulo.jsx
export default function Titulo({ titulo }) {
    return (
        <h1>{titulo}</h1>
    )
}

//App.jsx u otro fichero .jsx
return(
  <Titulo titulo={"Titulo personalizado"}></Titulo>
)

Spread attributes:

• Los operadores de propagación (...) se pueden utilizar para pasar múltiples propiedades a un componente de una sola vez.

const boton = {
  texto: "Soy un botón",
  mensaje: "Esto es un mensaje de alerta"
}
return(
  <Boton {...boton}></Boton>
)

Interpolación en JSX

En JSX, la interpolación te permite insertar expresiones JavaScript directamente dentro del marcado JSX utilizando llaves {}. Esta característica es fundamental para crear interfaces dinámicas y reactivas en React, mezclando la lógica de JavaScript con la estructura de la UI de forma fluida.

A continuación, se detallan los aspectos clave de la interpolación en JSX, junto con ejemplos prácticos:

Interpolación de variables:

• Puedes insertar variables JavaScript directamente en el JSX. Esto es muy útil para mostrar datos almacenados en variables dentro de los elementos de la interfaz.

const nombre = 'María';
return(
  <h1>Hola, {nombre}</h1>
)

Evaluación de expresiones:

• No solo puedes interpolar variables, sino también expresiones JavaScript completas. Esto incluye operaciones matemáticas, llamadas a funciones y cualquier expresión válida que devuelva un valor.

const [numero1, numero2] = [5, 10];
const getSaludo = (nombre) => `Hola, ${nombre}`;
return (
  <>
    <p>El resultado es: {numero1 + numero2}</p>
    <h2>{getSaludo('Carlos')}</h2>
  </>
)

Operadores ternarios:

• Los operadores ternarios son ideales para renderizar contenido condicionalmente dentro de JSX. Esto te permite mostrar u ocultar elementos o cambiar su contenido en función de condiciones lógicas.

const esUsuarioRegistrado = true;
return (
  <>
    {esUsuarioRegistrado ? (
      <p>Bienvenido de nuevo!</p>
    ) : (
      <p>Por favor, regístrate.</p>
    )}
  </>
)

Interpolación de objetos y arrays:

Mientras que los arrays se manejan de forma muy potente, los objetos tienen sus particularidades:

• Objetos: No puedes interpolar un objeto de JavaScript directamente dentro de JSX a menos que sea un elemento React válido (como un componente o el resultado de React.createElement). Si necesitas mostrar datos de un objeto, debes acceder a sus propiedades y convertirlas a un formato legible, como cadenas de texto.

// Objetos
const usuario = {
  nombre: 'Ana',
  edad: 28
};
return (
  <p>{`Nombre: ${usuario.nombre}, Edad: ${usuario.edad}`}</p>
);

• Arrays: Puedes interpolar arrays de datos. React renderizará cada elemento del array. Esto es especialmente útil para generar listas de elementos JSX usando el método .map().

// Arrays
const lista = ['Elemento 1', 'Elemento 2', 'Elemento 3'];
return (
  <ul>
    {lista.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);

Interpolación de componentes

Los componentes de React pueden ser interpolados dentro de otros componentes, permitiendo la composición de la UI de manera modular y reutilizable. Esto es fundamental para construir aplicaciones complejas a partir de piezas más pequeñas.

const Titulo = ({ texto }) => <h1>{texto}</h1>;

// Puedes renderizarlos directamente:
return (
  <>
    <Titulo texto={'Este es un título interpolado 1'} />
    <Titulo texto={'Este es un título interpolado 2'} />
  </>
);

// O pasarlos como children o props para una composición más flexible:
const Contenedor = ({ children }) => (
  <div style={{ border: '1px solid gray', padding: '10px' }}>
    {children} {/* Aquí se interpolan los elementos hijos */}
  </div>
);

const MyHeader = () => <h2>Sección principal</h2>;

return (
  <Contenedor>
    <MyHeader />
    <p>Este contenido está dentro del contenedor.</p>
  </Contenedor>
);

Interpolación y fragmentos:

• Cuando necesitas devolver múltiples elementos desde una función de renderizado o un componente, pero no quieres añadir un nodo extra al DOM (como un div envolvente), puedes utilizar fragmentos junto con la interpolación.

const FragmentoEjemplo = () => (
  <> {/* Sintaxis abreviada para React.Fragment */}
    <h2>Encabezado del fragmento</h2>
    <p>Esto es un párrafo dentro de un fragmento.</p>
  </>
);
return (
  <FragmentoEjemplo />
);

La interpolación en JSX es una herramienta poderosa que te permite mezclar la lógica de JavaScript con el marcado de la UI de manera fluida. Esta capacidad de combinar código y presentación en una sola sintaxis es una de las características que hacen de JSX una opción preferida para el desarrollo de interfaces dinámicas con React.

Vista general de todo lo que puede hacer JSX

JSX es una extensión de la sintaxis de JavaScript diseñada específicamente para React. Permite escribir elementos de la interfaz de usuario de una manera que se asemeja al HTML, pero con toda la potencia de JavaScript. A continuación, se presenta una descripción detallada de las capacidades de JSX que son fundamentales para el desarrollo de aplicaciones React.

Creación de elementos:

• JSX te permite crear elementos React de manera intuitiva y declarativa. Cada elemento JSX se traduce internamente en una llamada a React.createElement()..

const elemento = <h1>Hola, mundo</h1>;
// Internamente, se traduce a:
// const elemento = React.createElement('h1', null, 'Hola, mundo');

Atributos y propiedades:

• Los atributos en JSX se asignan utilizando camelCase y pueden aceptar cualquier expresión JavaScript encerrada en llaves {}

return (
  <>
    <img src="imagen.jpg" alt="Descripción de la imagen" />
    {/* 'disabled' es un atributo booleano. Puedes usar {true} o simplemente 'disabled' */}
    <button disabled={true}>Botón deshabilitado</button>
    <input type="text" htmlFor="miInput" /> {/* 'htmlFor' en lugar de 'for' */}
  </>
);

Interpolación de expresiones:

• JSX permite la interpolación de variables y expresiones JavaScript dentro del marcado utilizando llaves {}.

const nombre = 'Ana';
return (
  <>
    <h1>Hola, {nombre}</h1>
    <p>El resultado es: {2 + 2}</p>
  </>
)

Condicionales:

• Se pueden utilizar operadores ternarios para renderizar elementos condicionalmente.

const esVisible = true;
return (
  <p>{esVisible ? 'Visible' : 'Oculto'}</p>
);

// Usando && para renderizar algo solo si la condición es verdadera
const mostrarAlerta = true;
return (
  <>
    {mostrarAlerta && <p>¡Advertencia!</p>}
  </>
);

Listas y mapeo:

JSX facilita la creación de listas dinámicas a partir de arrays de datos mediante el uso del método map().

¡Importante sobre las key! Cada elemento en una lista debe tener una prop key única y estable. Usar index como key solo es aceptable si los elementos de la lista no cambian de orden, no se añaden ni se eliminan. Para listas dinámicas, siempre usa un ID único y persistente de cada elemento como key.

// Mejor práctica: usar un ID único del elemento si está disponible
const itemsConId = [{ id: 1, text: 'Elemento 1' }, { id: 2, text: 'Elemento 2' }];
return (
  <ul>
    {itemsConId.map((item) => (
      <li key={item.id}>{item.text}</li>
    ))}
  </ul>
);

// Si no hay ID único y la lista es estática (solo para ejemplos simples):
const itemsSinId = ['Elemento A', 'Elemento B', 'Elemento C'];
return (
  <ul>
    {itemsSinId.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);

Fragmentos:

• Los fragmentos (<React.Fragment> o su sintaxis abreviada <>) permiten agrupar múltiples elementos sin añadir nodos extra al DOM.

return (
  <>
    <h1>Título</h1>
    <p>Parrafo dentro de un fragmento</p>
  </>
);

Componentes anidados:

• JSX permite la composición de componentes, lo que significa que puedes anidar componentes dentro de otros para crear estructuras de UI más complejas y reutilizables.

const Header = () => <h1>Encabezado de la Aplicación</h1>;
return (
  <div>
    <Header /> {/* El componente Header está anidado aquí */}
    <p>Contenido principal de la aplicación</p>
  </div>
);

Eventos:

• Las funciones de manejo de eventos se asignan a los elementos utilizando la convención camelCase (ej. onClick, onChange, onSubmit). El valor debe ser una función, no una cadena.

const handleClick = () => alert('¡Botón clicado!');
return (
  <button onClick={handleClick}>Haz clic</button>
);

Estilos en línea:

• Los estilos en línea se definen utilizando objetos JavaScript, donde las propiedades CSS se escriben en camelCase (ej. fontSize en lugar de font-size).

const estilo = {
  color: 'red',
  fontSize: '20px' // 'fontSize' en camelCase
};
return (
  <p style={estilo}>Texto estilizado</p>
);

Nota: Aunque los estilos en línea son posibles, para estilos más complejos o globales, se suelen preferir los archivos CSS tradicionales o librerías de CSS-in-JS (como Styled Components, Emotion, etc.) por su mejor organización y rendimiento.

Propagación de propiedades (spread attributes):

• Los operadores de propagación (...) te permiten pasar múltiples propiedades a un componente de una sola vez, lo cual es útil cuando tienes un objeto con varias propiedades que quieres "desempaquetar" y pasar como props.

// Componente.jsx
export default function Componente({ title, content }) {
  return (
    <div>
        <h1>{title}</h1>
        <p>{content}</p>
    </div>
  );
}

// App.jsx
export default function App() {
  const props = {
    title: 'Título del Componente',
    content: 'Contenido dinámico para el componente'
  };
  return (
    <Componente {...props} /> {/* Las propiedades 'title' y 'content' se pasan automáticamente */}
  );
}

JSX no solo facilita la creación de interfaces de usuario en React, sino que también permite una gran flexibilidad y potencia al integrar directamente las capacidades de JavaScript en el marcado. Esto lo convierte en una herramienta invaluable para el desarrollo de aplicaciones web modernas.