Tutorial React: Introducción a JSX

Definición de JSX y propósito, diferencias con HTML

JSX, acrónimo de JavaScript XML, es una extensión de la sintaxis de JavaScript que permite escribir código similar a HTML dentro de archivos JavaScript. 

Su propósito principal es facilitar la creación de estructuras de interfaz de usuario (UI) en React, proporcionando una sintaxis más intuitiva y legible para definir componentes y sus estructuras.

JSX no es HTML. Aunque su sintaxis se asemeja mucho a HTML, existen diferencias claves.

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. Antes de ser ejecutado, el código JSX debe ser transformado en llamadas a React.createElement(), que es lo que finalmente entiende el navegador. Esta transformación es manejada típicamente por herramientas como Vite, Babel u otros empaquetadores web.

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

// Compilado a JavaScript
const element = React.createElement(
  'h1',
  { className: 'greeting' },
  'Hola, mundo'
);

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 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. 

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

Interpolación de variables:

• Las variables JavaScript pueden ser interpoladas directamente en el JSX. Esto es ú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 se pueden interpolar variables, sino también expresiones completas. Esto incluye operaciones matemáticas, llamadas a funciones y cualquier expresión válida de JavaScript.

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 útiles para renderizar contenido condicionalmente dentro de JSX. Esto permite mostrar u ocultar elementos 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:

• Los objetos y arrays también pueden ser interpolados, pero deben ser convertidos a un formato legible, como cadenas de texto o listas de elementos JSX.

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

const Titulo = ({ texto }) => <h1>{texto}</h1>;
return (
  <>
    <Titulo texto={'Este es un titulo interpolado 1'}></Titulo>
    <Titulo texto={'Este es un titulo interpolado 2'}></Titulo>
  </>
)

Interpolación y fragmentos:

• Cuando se necesita devolver múltiples elementos desde una función de renderizado, se pueden utilizar fragmentos junto con la interpolación para evitar añadir nodos adicionales al DOM.

const FragmentoEjemplo = () => (
  <>
    <h2>Encabezado</h2>
    <p>Esto es un párrafo dentro de un fragmento.</p>
  </>
);
return (
  <FragmentoEjemplo />
)

La interpolación en JSX es una herramienta poderosa que permite mezclar 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 permite crear elementos React de manera intuitiva. Cada elemento JSX se traduce en una llamada a React.createElement().

const elemento = <h1>Hola, mundo</h1>;
// 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.

return (
  <>
    <img src="imagen.jpg" alt="Descripción de la imagen" />
    <button disabled={true}>Botón deshabilitado</button>
  </>
)

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>
)

Listas y mapeo:

• JSX facilita la creación de listas dinámicas mediante el uso de map().

const items = ['Elemento 1', 'Elemento 2', 'Elemento 3'];
return (
  <ul>
    {items.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, anidando componentes dentro de otros para crear estructuras más complejas.

const Header = () => <h1>Encabezado</h1>;
return (
  <div>
    <Header />
    <p>Contenido de la aplicación</p>
  </div>
);

Eventos:

• Las funciones de manejo de eventos se asignan a los elementos utilizando la convención camelCase.

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, con las propiedades en camelCase.

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

Propagación de propiedades (spread attributes):

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

//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',
    content: 'Contenido'
  };
  return (
    <Componente {...props} />
  )
}

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.