JSX y React: Una combinación poderosa

React construye la interfaz del usuario desde piezas individuales llamadas componentes. Estos componentes son funciones de JavaScript que tienen su propia lógica y apariencia, devolviendo como resultado cierto markup, como puede ser un botón o un texto. Veamos el siguiente componente Greeting como ejemplo:

import React from 'react';
  
function Greeting() {
  return (
    <p className='greeting'>Hello world!</p>
  );
};

La sintaxis de markup con la que escribimos nuestro componente Greeting, no es HTML (aunque se parezca mucho) sino que es JSX.

JSX es una extensión de sintaxis para JavaScript que nos permite escribir markup dentro de un archivo JavaScript. En esencia, JSX es una manera de insertar código HTML en JavaScript sin tener que crear elementos HTML utilizando métodos como document.createElement(). Por ejemplo, para crear un texto solo con JavaScript sería así:

const paragraph = document.createElement('p');
paragraph.textContent = 'Hello world!';

En cambio, con JSX simplemente escribimos:

const paragraph = <p>Hello world!</p>;

Esto nos ofrece ciertas ventajas, como escribir un código más legible y fácil de entender.

En los componentes de React, si omitimos el uso de la sintaxis de JSX, crear el componente Greeting sería de la siguiente forma:

const Greeting = React.createElement( 'p', { className: 'greeting' } , 'Hello world!' );

ReactDOM.render(Greeting, document.getElementById("app"));

Como puedes ver es mucho más práctica la forma en que escribimos el componente Greeting con JSX. Se verá cómo escribir HTML pero lo que hacemos en realidad es escribir JavaScript. Esta sintaxis no es más que sugar syntax para crear un elemento llamando a la función React.createElement().

Al tener la lógica y la apariencia dentro de una misma función de JavaScript, podemos relacionarlos para crear componentes dinámicos en los que devolvemos cierto markup según el valor de una entrada que recibimos. Por ejemplo para customizar el componente Greeting vamos a recibir un nombre y según su valor será un saludo u otro. Para hacer esto utilizaremos las llaves para escapar del markup e insertar JavaScript.

import React from 'react';
  
function Greeting({name}) {
  return (
    <p className='greeting'>Hello {name || 'world'}!</p>
   );
};

También podemos renderizar un componente completo según el valor que recibamos, por ejemplo:

import React from 'react';
import { Goodmorning, Goodnight } from './Greetings';

function Greeting({ time }) {

  const components = {
    morning: Goodmorning,
    night: Goodnight
  };

  const CustomGreenting = component[time];

  return (
    <CustomGreeting />
  );
};

Esta sintaxis se vuelve cada vez más útil a medida que nuestra aplicación crece y tenemos más componentes, haciendo que nuestro código sea más legible y fácil de mantener.

Para utilizar JSX en nuestro código hay ciertas reglas a tener en cuenta:

1. Un componente no puede retornar múltiples etiquetas, ya que estamos llamando a una función React.createElement que espera un solo type.

Si tenemos más de una etiqueta que retornar en nuestro componente, las envolvemos en una etiqueta padre como un <div></div> o <section></section> por ejemplo, o un contenedor vacío como lo es <React.Fragment></React.Fragment> o su forma corta <></>. Y así las demás etiquetas pasarían a ser children en esta función. Veamos un ejemplo:

import React from 'react';
  
// Para la función Greeting en la que necesitamos dos etiquetas (h1 y p)
❌ function Greeting() {
  return (
    <h1 className='greeting'>Hello world!</h1>
    <p>Have a nice day!</p>
  );
};

// Envolvemos en una etiqueta padre div a nuestras etiquetas h1 y p que ahora serán children de este elemento div.

✅ function Greeting() {
  return (
    <div>
      <h1 className="greeting">Hello world!</h1>
      <p>Have a nice day!</p>
    </div>
  );
};

Lo que estamos escribiendo entonces es:

React.createElement(
  'div',
  null,
  createElement('h1', { className: 'greeting' }, 'Hello World!'),
  createElement('p', null, 'Have a nice day!')
);

2. Todas las etiquetas necesitan un cierre explícito.

Una etiqueta <img> que tiene un cierre automático en HTML, deberá tener un cierre de la forma <img />.

3. Los atributos que asignamos en nuestro JSX deben escribirse en camelCase, debido a que JavaScript tiene palabras reservadas.

Por ejemplo en el caso de class, en el JSX de nuestro componente de React sería className o el onclick sería onClick.

4. Los nombres de los componentes siempre deben empezar con mayúscula.

Esto se debe a que la función React.createElement() no solo recibe el nombre de una etiqueta HTML en su type sino también el nombre de un componente que hemos creado en nuestra aplicación, y de esta forma puede distinguir entre los elementos de HTML y los componentes creados.
La única condición adicional es que este componente se encuentre al alcance de la función. Esto lo logramos con la importación del componente que queremos renderizar. Veamos el ejemplo de la función React.createElement() si el componente Greeting renderiza el componente Goodmorning.

import React from 'react';
import { Goodmorning } from './Goodmorning';

function Greeting() {
  return (
    <Goodmorning />
  );
};

// Entonces JSX estaría llamando React.createElement() de la siguiente manera:

React.createElement(
  'Goodmorning',
  null,
);

En resumen, JSX es una extensión de sintaxis para JavaScript. Si bien su uso es opcional, la legibilidad y flexibilidad que ofrece son importantes ventajas al permitir entender fácilmente cómo en nuestros componentes se relacionan los elementos HTML con el código JavaScript que los manipula, haciendo que sea casi imposible pensar en escribir nuestra aplicación sin usar esta sintaxis.