Excelente, vamos con el Punto 4: Writing Markup with JSX

👉 Este punto es fundamental para escribir interfaces reales en React con fluidez.

✅ 4. Writing Markup with JSX — Lo esencial

💡 CONCEPTO CLAVE

JSX te permite escribir “HTML dentro de JavaScript”, pero con algunas diferencias clave.

✅ PARA EL DÍA A DÍA

  • Usás className en vez de class (porque class es palabra reservada en JS).
  • Todo el JSX tiene que estar dentro de un solo elemento padre.
  • Cerrás todas las etiquetas, incluso las que en HTML no se cierran (, ).
  • JSX acepta expresiones JS entre {} pero no sentencias (como if, for).

🧩 Ejemplo aplicado a tu carrito 

function ProductItem() {
  const price = 500;

  return (
    <div className="border p-4">
      <h2>Manzanah2>
      <p>Precio: ${price}p>
      <button>Agregar al carritobutton>
    div>
  );
}

🔥 Todo JSX está envuelto en un

y usamos className.

💼 PARA ENTREVISTAS TÉCNICAS

¿Qué es JSX?

“JSX es una extensión de JavaScript que permite escribir la UI como si fuera HTML, pero con la lógica de JS integrada.”

¿Qué diferencias hay entre HTML y JSX?

  • Se usa className en vez de class
  • Las etiquetas se cierran siempre
  • Las expresiones JS van entre { }

🧠 FRASE PARA RECORDAR

JSX parece HTML, pero es JavaScript.

Vamos con el Punto 5: JavaScript in JSX with Curly Braces