JSX en React.

JSX (JavaScript XML) es una extensión de sintaxis para JavaScript que se utiliza principalmente junto con React, una biblioteca de JavaScript para la creación de interfaces de usuario. JSX nos permite escribir código HTML en nuestro JavaScript, lo que facilita la creación y adición de elementos HTML y componentes de React en la página web.

El código JSX se parece al HTML, pero hay algunas diferencias notables. Por ejemplo, la propiedad class en HTML es className en JSX, y en lugar de usar for en las etiquetas HTML, en JSX usamos htmlFor.

Aquí hay algunos ejemplos de código JSX:

Ejemplo 1: Un elemento simple en JSX

jsxCopy code
const elemento = <h1>Hola, mundo!</h1>;

Este es un ejemplo de un elemento JSX muy simple, esencialmente un "hola mundo". Lo que sucede aquí es que se está creando una constante llamada "elemento" que es un elemento JSX, en este caso un encabezado de nivel 1 con el texto "Hola, mundo!".

Ejemplo 2: Un componente de React simple usando JSX

jsxCopy code
function Saludo(props) {
  return <h1>Hola, {props.nombre}!</h1>;
}

ReactDOM.render(
  <Saludo nombre="Juan"/>,
  document.getElementById('root')
);

En este ejemplo, se está definiendo un componente de React llamado "Saludo". Este componente es una función que toma un objeto "props" como parámetro y devuelve un elemento JSX.

La propiedad nombre en el objeto props se usa dentro de las llaves {} en el elemento JSX retornado. Esta es una forma de interpolación de variables en JSX, similar a cómo podrías hacerlo en una plantilla de string en JavaScript.

Finalmente, se usa ReactDOM.render() para renderizar una instancia del componente Saludo en el elemento con el ID 'root'. En este caso, se pasa una prop nombre con el valor 'Juan' a la instancia del componente.