✨ Expresiones y operadores dentro de JSX en React correctamente

✨ Expresiones en JSX

En JSX, puedes usar expresiones de JavaScript directamente dentro del marcado utilizando { }. Esto permite insertar valores dinámicos, ejecutar funciones o realizar operaciones lógicas sin salir del JSX.

---

1️⃣ Uso básico de expresiones

Cualquier expresión válida de JavaScript (como una variable, operación o llamada de función) puede ser usada dentro de llaves.

// Ejemplo básico
const nombre = "Jorge";
const edad = 30;

const element = <h2>Hola, {nombre}! Tienes {edad} años.</h2>;

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

💡 React evalúa las expresiones {nombre} y {edad} antes de renderizar.

---

2️⃣ Operaciones matemáticas y lógicas

Puedes realizar cálculos o condiciones dentro del JSX:

const a = 10;
const b = 20;

const element = <h2>La suma de a + b es {a + b}</h2>;

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

Resultado: La suma de a + b es 30

---

3️⃣ Expresiones con funciones

Puedes llamar funciones dentro de JSX:

function saludar(nombre) {
  return `¡Hola, ${nombre}!`;
}

const element = <h2>{saludar("Ana")}</h2>;

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

---

4️⃣ Condicionales con operador ternario

Puedes usar expresiones condicionales directamente en JSX con ?:

const isLoggedIn = true;

const element = <h2>
  {isLoggedIn ? "Bienvenido de nuevo" : "Por favor inicia sesión"}
</h2>;

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

---

🧠 Resumen

• ✅ Usa { } para cualquier expresión de JavaScript.
• ✅ Puedes incluir variables, operaciones, funciones o condicionales.
• ✅ Facilita la generación de contenido dinámico en React.

← Volver al índice