JSX

 ¿Qué es JSX?

JSX significa JavaScript XML.

JSX nos permite escribir HTML en React.

JSX hace que sea más fácil escribir y agregar HTML en React.

Codificación JSX

JSX nos permite escribir elementos HTML en JavaScript y colocarlos en el DOM sin ningún método createElement()  y/o appendChild().

JSX convierte etiquetas HTML en elementos React.

No es necesario utilizar JSX, pero JSX facilita la escritura de aplicaciones React.

A continuación se muestran dos ejemplos. El primero utiliza JSX y el segundo no:

Ejemplo 1

Con JSX:

const myElement = <h1>I Love JSX!</h1>;

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(myElement);

Ejemplo 2

Sin JSX:

const myElement = React.createElement('h1', {}, 'I do not use JSX!');

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(myElement);

Como puedes ver en el primer ejemplo, JSX nos permite escribir HTML directamente dentro del código JavaScript. JSX es una extensión del lenguaje JavaScript basada en ES6 y se traduce a JavaScript normal en tiempo de ejecución.

Expresiones en JSX

Con JSX puedes escribir expresiones dentro de llaves { }.

La expresión puede ser una variable o propiedad de React, o cualquier otra expresión válida de JavaScript. JSX ejecutará la expresión y devolverá el resultado:

Ejemplo

Ejecutar la expresión 5 + 5:

const myElement = <h1>React is {5 + 5} times better with JSX</h1>;

Insertar un bloque grande de HTML

Para escribir HTML en varias líneas, coloque el HTML entre paréntesis:

Ejemplo

Crea una lista con tres elementos de lista:

const myElement = (

  <ul>

    <li>Apples</li>

    <li>Bananas</li>

    <li>Cherries</li>

  </ul>

);

Un elemento de nivel superior

El código HTML debe estar envuelto en UN elemento de nivel superior.
Entonces, si deseas escribir dos párrafos, debes colocarlos dentro de un elemento padre, como un div elemento .

Ejemplo

Envuelva dos párrafos dentro de un elemento DIV:

const myElement = (

  <div>

    <p>I am a paragraph.</p>

    <p>I am a paragraph too.</p>

  </div>

);

JSX arrojará un error si el HTML no es correcto o si el HTML carece de un elemento padre. Como alternativa, puede utilizar un "fragmento" para encapsular varias líneas. Esto evitará agregar nodos adicionales al DOM de manera innecesaria.

Un fragmento parece una etiqueta HTML vacía: <></>.

Ejemplo

Envuelva dos párrafos dentro de un fragmento:

const myElement = (

  <>

    <p>I am a paragraph.</p>

    <p>I am a paragraph too.</p>

  </>

);

Los elementos deben estar cerrados

JSX sigue las reglas XML y, por lo tanto, los elementos HTML deben cerrarse correctamente.

Ejemplo

Cerrar elementos vacíos con</>

const myElement = <input type="text" />;

JSX arrojará un error si el HTML no se cierra correctamente.

Clase de atributo = nombreClase

El class atributo es un atributo muy utilizado en HTML, pero como JSX se representa como JavaScript y la class palabra clave es una palabra reservada en JavaScript, no está permitido utilizarla en JSX.

Utilice el atributo classNameen su lugar.

JSX resolvió este problema utilizando classNameen su lugar. Cuando se renderiza JSX, traduce className atributos en classatributos.

Ejemplo

Utilice el atributo className en lugar de class en JSX:

const myElement = <h1 className="myclass">Hello World</h1>;

Condiciones - declaraciones if

React admite if declaraciones, pero no dentro de JSX.

Para poder usar declaraciones condicionales en JSX, debes colocar las if declaraciones fuera de JSX, o puedes usar una expresión ternaria en su lugar:

Opción 1:

Escribe if declaraciones fuera del código JSX:

Ejemplo

Escribe "Hola" si x es menor a 10, de lo contrario "Adiós":

const x = 5;

let text = "Goodbye";

if (x < 10) {

  text = "Hello";

}

const myElement = <h1>{text}</h1>;

Opción 2:

Utilice expresiones ternarias en su lugar:

Ejemplo

Escribe "Hola" si x es menor a 10, de lo contrario "Adiós":

const x = 5;

const myElement = <h1>{(x) < 10 ? "Hello" : "Goodbye"}</h1>;