JSX es una extensión de sintaxis para JavaScript que permite escribir código similar a HTML dentro de los archivos de JavaScript. Fue desarrollado por Facebook y es ampliamente utilizado en el framework de JavaScript React.

En React, JSX se utiliza para definir la estructura de los componentes que se renderizarán en la página web. JSX es transformado en JavaScript por un transpilador antes de ser interpretado por el navegador.

Veamos estos dos ejemplos

Ejemplo 1: Mostrando información de un sitio turístico

Supongamos que queremos crear un componente de React que muestre información sobre el Parque Nacional Nahuel Huapi, uno de los principales atractivos turísticos de la Patagonia argentina. El código en JSX para este componente podría ser el siguiente:

import React from 'react';

function ParqueNacional() {
  return (
    <div>
      <h2>Parque Nacional Nahuel Huapi</h2>
      <p>El Parque Nacional Nahuel Huapi es uno de los parques nacionales más grandes y antiguos de Argentina. Se encuentra ubicado en la Patagonia y cuenta con una superficie de 710.000 hectáreas. Entre sus principales atractivos se encuentran el lago Nahuel Huapi, el Cerro Catedral y el bosque andino-patagónico.</p>
    </div>
  );
}

export default ParqueNacional;

Ejemplo 2: Mostrando datos de un equipo de fútbol

Para mostrar información sobre un equipo de fútbol argentino, podríamos utilizar JSX para crear un componente que muestre los nombres de los jugadores, sus posiciones y sus estadísticas. El siguiente código en JSX muestra cómo podríamos crear un componente para River Plate.

import React from 'react';

function RiverPlate() {
  return (
    <div>
      <h2>River Plate</h2>
      <ul>
        <li>Franco Armani - Arquero - Campeon del Mundo</li>
        <li>Leandro Gonzalez Pirez - Defensor - Solidas actuaciones</li>
        <li>Lucas Beltran - Delantero - Futuro europeo</li>
      </ul>
    </div>
  );
}

export default RiverPlate;

Como podes ver en los ejemplos, estamos trabajando de forma diferente a otras veces. Estamos creando funciones que pareciera que retornan elementos HTML pero en realidad lo hacen retornando JavaScript. (no te enganches tanto con esto, es solo para explicarte que no estas escribiendo HTML sino JavaScript, no te olvides). Ahora, por ejemplo, puedo importar la funcion en nuestro main.jsx y empezar a trabajar

ReactDOM.createRoot(document.getElementById('root')).render(
  <RiverPlate></RiverPlate>
)

Atributos dentro de JSX

Supongamos que queremos agregarle un data-name a cada li con su posicion. En simple HTML sería asi

<div>
      <h2>River Plate</h2>
      <ul>
        <li data-name="armani">Franco Armani - Arquero - Campeon del Mundo</li>
        <li data-name="gonzalezpirez">Leandro Gonzalez Pirez - Defensor - Solidas actuaciones</li>
        <li data-name="beltran">Lucas Beltran - Delantero - Futuro europeo</li>
      </ul>
    </div>

Sin embargo, en JSX recorda que no estamos escribiendo HTML, sino JavaScript. Por lo que los argumentos deben escribirse como si estuvieramos en JS, es decir en camelCase

import React from 'react';

function RiverPlate() {
  return (
    <div>
      <h2>River Plate</h2>
      <ul>
        <li dataName="armani">Franco Armani - Arquero - Campeon del Mundo</li>
        <li dataName="gonzalezpirez">Leandro Gonzalez Pirez - Defensor - Solidas actuaciones</li>
        <li dataName="beltran">Lucas Beltran - Delantero - Futuro europeo</li>
      </ul>
    </div>
  );
}

export default RiverPlate;

Ingresar variables en JSX

Supongamos que queremos mostrar el valor de una variable en un componente que renderizamos. Parecido a como hacemos en JavaScript, con solo envolverlo entre llaves va a funcionar.

import React from 'react';
const teamName="River Plate (Argentina)"

function RiverPlate() {
  return (
    <div>
      <h2>{teamName}</h2>
      <ul>
        <li dataName="armani">Franco Armani - Arquero - Campeon del Mundo</li>
        <li dataName="gonzalezpirez">Leandro Gonzalez Pirez - Defensor - Solidas actuaciones</li>
        <li dataName="beltran">Lucas Beltran - Delantero - Futuro europeo</li>
      </ul>
    </div>
  );
}

export default RiverPlate;

Podes utilizar la forma que tiene JS para pasar valores por defecto inclusive. Esto sirve para asegurarte que por lo menos recibira un valor. Por ejemplo: