📝 Introducción a JSX en React: sintaxis y ejemplos claros

📝 Introducción a JSX

JSX significa JavaScript XML. Es una extensión de la sintaxis de JavaScript utilizada en React para describir lo que la interfaz de usuario debe mostrar. JSX nos permite escribir estructuras HTML dentro del mismo archivo que el código JavaScript, haciendo el desarrollo más intuitivo y claro.

---

1️⃣ ¿Qué es JSX?

Normalmente, en JavaScript no podemos escribir HTML directamente dentro del código. Pero con JSX, podemos hacerlo sin problema:

// Ejemplo de JSX
const element = <h1>Hola, mundo!</h1>;

ReactDOM.createRoot(document.getElementById('root')).render(element);
  

En este ejemplo, el código <h1>Hola, mundo!</h1> parece HTML, pero en realidad es JSX. React transformará este código en llamadas a JavaScript que crean los elementos de la interfaz.

---

2️⃣ JSX vs. JavaScript puro

Sin JSX, el mismo ejemplo sería mucho más largo y difícil de leer:

// Sin JSX
const element = React.createElement("h1", {}, "Hola, mundo!");

ReactDOM.createRoot(document.getElementById('root')).render(element);
  

✅ JSX es más legible y se parece mucho al HTML tradicional.

---

3️⃣ Reglas básicas de JSX

• ✅ JSX debe tener un solo elemento raíz (envolver todo dentro de un <div> o <></>).
• ✅ Los elementos deben cerrarse correctamente (<img />, <br />).
• ✅ Los atributos usan camelCase (por ejemplo: className en lugar de class).

function App() {
  return (
    <div>
      <h1>¡Bienvenido a React!</h1>
      <p>JSX hace que tu código sea más claro y fácil de mantener.</p>
    </div>
  );
}
  

💡 JSX combina la potencia de JavaScript con la simplicidad de HTML.

---

4️⃣ Insertar expresiones JavaScript dentro de JSX

Puedes incluir cualquier expresión de JavaScript dentro de JSX usando llaves { }.

const name = "Jorge";
const element = <h1>Hola, {name}!</h1>;

ReactDOM.createRoot(document.getElementById('root')).render(element);
  

📘 Todo lo que esté dentro de { } será evaluado como una expresión JavaScript.

---

5️⃣ Atributos en JSX

JSX usa nombres de atributos ligeramente diferentes al HTML para evitar conflictos con palabras reservadas. Por ejemplo:

// Ejemplo de atributos en JSX
const element = (
  <img src="logo.png" alt="Logo de React" className="logo" />
);
  

• ✅ Usa className en lugar de class.
• ✅ Usa htmlFor en lugar de for (en etiquetas <label>).

---

6️⃣ JSX con funciones

Puedes usar funciones para generar partes dinámicas del JSX:

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Ana',
  lastName: 'García'
};

const element = (
  <h1>
    ¡Hola, {formatName(user)}!
  </h1>
);

ReactDOM.createRoot(document.getElementById('root')).render(element);
  

🔹 Aquí {formatName(user)} ejecuta la función y muestra el resultado dentro del JSX.

---

7️⃣ JSX y componentes

JSX es la base para definir componentes en React. Por ejemplo, este componente simple muestra un mensaje:

function Welcome() {
  return <h2>¡Hola desde un componente JSX!</h2>;
}

ReactDOM.createRoot(document.getElementById('root')).render(<Welcome />);
  

🔸 JSX te permite definir la estructura visual del componente directamente dentro de JavaScript.

---

8️⃣ JSX se compila a JavaScript

JSX no es comprendido directamente por el navegador. Durante la compilación, herramientas como Babel transforman el JSX a llamadas de JavaScript estándar como:

// JSX
const element = <h1>Hola Mundo</h1>;

// Babel lo convierte en:
const element = React.createElement("h1", null, "Hola Mundo");
  

⚙️ Este proceso ocurre automáticamente cuando usas Vite, Create React App u otras herramientas modernas.

---

9️⃣ Beneficios de JSX

• ✔️ Sintaxis clara y legible.
• ✔️ Facilita la combinación de lógica y presentación.
• ✔️ Mejora la productividad en proyectos React.

🚀 En resumen, JSX es la forma moderna, declarativa y elegante de construir interfaces con React.

---

← Volver al índice