Conceptos Básicos de JSX en React

En React, utilizamos una extensión de sintaxis de JavaScript llamada JSX (JavaScript XML) para construir nuestras interfaces de usuario. JSX permite escribir componentes de React que describen cómo debe verse la interfaz de usuario. Para lograr esto, React utiliza una sintaxis llamada JSX.

JSX se parece al HTML, pero se escribe dentro de JavaScript. Permite describir elementos de la interfaz de usuario directamente en el código del componente en lugar de construirlos paso a paso con JavaScript.

Aunque JSX parece HTML, no es HTML. Internamente, JSX se convierte en JavaScript que React puede interpretar. Esto hace que JSX sea expresivo y potente, manteniéndose como parte del lenguaje JavaScript.

En JSX, se pueden insertar expresiones de JavaScript directamente dentro del marcado. Esto facilita mostrar datos dinámicos y controlar lo que aparece en pantalla. A continuación se muestra el mismo componente de antes, ahora presentado con JSX:

function Welcome() {
  const name = "React";
  return <h1>Welcome to {name}</h1>;
}

Aquí, JSX se utiliza para describir la interfaz de usuario. La sintaxis {name} permite insertar valores de JavaScript en la interfaz. React actualiza automáticamente la salida mostrada cuando los datos cambian.