Diferencias JSX yHTML

HTML y JSX tienen similitudes, ya que JSX (JavaScript XML) está inspirado en HTML, pero existen diferencias clave que los distinguen.

1. Sintaxis

• HTML: Es un lenguaje de marcado independiente que utiliza una sintaxis estricta de etiquetas HTML.

  <div class="container">
      <h1>Hello, World!</h1>
  </div>
  

• JSX: Es una extensión de sintaxis para JavaScript que permite escribir estructuras similares a HTML dentro del código JavaScript. Es procesado por herramientas como Babel para convertirse en código JavaScript puro.

  <div className="container">
      <h1>Hello, World!</h1>
  </div>
  

2. Atributos

• HTML: Utiliza atributos estándar del DOM, como class o for.

  <label for="input">Name:</label>
  <input class="form-control" />
  

• JSX: Algunos atributos se renombraron para evitar conflictos con palabras clave de JavaScript, como:
  • class → className
  • for → htmlFor

  <label htmlFor="input">Name:</label>
  <input className="form-control" />
  

3. Expresiones

• HTML: No soporta expresiones de JavaScript dentro del marcado.

  <p>This is plain HTML.</p>
  

• JSX: Permite incluir expresiones de JavaScript dentro de llaves {}.

  const name = "John";
  <p>Hello, {name}!</p>
  

4. Cierre de etiquetas

• HTML: Algunas etiquetas, como <img> o <input>, no requieren cierre explícito.

  <img src="image.jpg" alt="Image">
  

• JSX: Todas las etiquetas deben cerrarse explícitamente, incluso las vacías.

  <img src="image.jpg" alt="Image" />
  

5. Comentarios

• HTML: Usa <!-- ... --> para los comentarios.

  <!-- This is a comment -->
  

• JSX: Los comentarios deben estar dentro de llaves y utilizar la sintaxis de comentarios de JavaScript.

  {/* This is a JSX comment */}
  

6. Contexto de ejecución

• HTML: Es un lenguaje de marcado estático, interpretado por el navegador directamente.
• JSX: Es un lenguaje intermedio que se compila a JavaScript antes de ser interpretado por el navegador.

7. Interactividad

• HTML: Depende de JavaScript externo para manejar eventos e interactividad.

  <button onclick="handleClick()">Click Me</button>
  

• JSX: Permite manejar eventos directamente con funciones de JavaScript.

  <button onClick={handleClick}>Click Me</button>
  

En resumen, mientras que HTML es un lenguaje de marcado puro, JSX es una extensión de JavaScript diseñada para React que combina la apariencia de HTML con la potencia de JavaScript, lo que lo hace más dinámico y flexible.