JSX

JSX (JavaScript XML) es una extensión de la sintaxis de JavaScript que permite escribir código HTML dentro de archivos de JavaScript en React. JSX hace que escribir y trabajar con interfaces de usuario en React sea más intuitivo y eficiente al permitir la definición de la estructura de la interfaz de usuario de manera similar a como se haría en HTML. Aquí hay una explicación más detallada junto con ejemplos:

1. Sintaxis de JSX: En JSX, puedes escribir etiquetas HTML directamente dentro de tu código JavaScript. Por ejemplo, puedes escribir un elemento <div> como lo harías en HTML, pero dentro de un archivo de JavaScript:

   const miElemento = <div>Hola Mundo!</div>;
   

   Aquí, miElemento es una variable que contiene un elemento <div> con el texto “Hola Mundo!”.

2. Expresiones JavaScript en JSX: JSX también te permite incorporar expresiones JavaScript dentro de las llaves {}. Esto te permite generar dinámicamente contenido en función de variables y expresiones JavaScript. Por ejemplo:

   const nombre = "Juan";
   const saludo = <h1>Hola, {nombre}!</h1>;
   

   En este ejemplo, la variable nombre se interpola dentro del elemento <h1> para generar un saludo personalizado.

3. Renderizado de Componentes en JSX: En React, puedes renderizar componentes dentro de otros componentes usando JSX. Por ejemplo:

   import React from 'react';
   
   const SubComponente = () => {
       return <p>Este es un subcomponente.</p>;
   }
   
   const ComponentePadre = () => {
       return (
           <div>
               <h1>Componente Padre</h1>
               <SubComponente />
           </div>
       );
   }
   
   export default ComponentePadre;
   

   En este ejemplo, ComponentePadre renderiza el componente SubComponente dentro de su propio JSX.

4. Uso de atributos y eventos en JSX: En JSX, puedes usar atributos y eventos de la misma manera que lo harías en HTML. Por ejemplo:

   const handleClick = () => {
       console.log('¡El botón fue clickeado!');
   };
   
   const miBoton = <button onClick={handleClick}>Haz clic aquí</button>;
   

   Aquí, se define un botón que tiene un evento onClick que ejecuta la función handleClick cuando se hace clic en él.

En resumen, JSX es una extensión de JavaScript que te permite escribir código HTML dentro de archivos de JavaScript en React. Esto hace que la creación y el mantenimiento de interfaces de usuario en React sean más fáciles y legibles al permitirte definir la estructura de la interfaz de usuario de manera similar a como lo harías en HTML, junto con la capacidad de usar expresiones JavaScript y renderizar componentes de manera eficiente.

https://fullstackopen.com/es/part1/introduccion_a_react#jsx

https://www.w3schools.com/react/react_jsx.asp

https://react.dev/learn/writing-markup-with-jsx