Formulario completo JSX

JSX significa JavaScript XML. Es simplemente una extensión de sintaxis de JavaScript. Nos permite escribir HTML directamente en React (dentro del código JavaScript). Es fácil crear una plantilla usando JSX en React, pero no es un lenguaje de plantilla simple, sino que viene con todo el poder de JavaScript.
Es más rápido que JavaScript normal, ya que realiza optimizaciones mientras se traduce a JavaScript normal. En lugar de separar el marcado y la lógica en archivos separados, React usa componentes para este propósito. Aprenderemos sobre los componentes en detalle en otros artículos. 

Sintaxis:

const element = <h1>Welcome to GeeksforGeeks.</h1>;

Características de JSX:

• JSX no es obligatorio de usar, hay otras formas de lograr lo mismo, pero el uso de JSX facilita el desarrollo de la aplicación de reacción.
• JSX permite escribir expresiones en { }. La expresión puede ser cualquier expresión JS o variable React.
• Para insertar un bloque grande de HTML tenemos que escribirlo entre paréntesis, es decir,().
• JSX produce elementos de reacción.
• JSX sigue la regla XML.
• Después de la compilación, las expresiones JSX se convierten en llamadas de función de JavaScript regulares.
• JSX usa notación camelcase para nombrar atributos HTML. Por ejemplo, tabindex en HTML se usa como tabIndex en JSX.

Ventajas de JSX:

• JSX facilita escribir o agregar HTML en React.
• JSX puede convertir fácilmente etiquetas HTML para reaccionar elementos.
• Es más rápido que JavaScript normal.
• JSX nos permite poner elementos HTML en DOM sin usar el método appendChild() o createElement() .
• Como JSX es una expresión, podemos usarla dentro de declaraciones if y bucles for, asignarla a variables, aceptarla como argumento o devolverla desde funciones.
• JSX previene los ataques XSS (cross-site-scripting), conocidos popularmente como ataques de inyección.
• Es de tipo seguro y la mayoría de los errores se pueden encontrar en el momento de la compilación.

Desventajas de JSX:

• JSX arroja un error si el HTML no es correcto.
• En JSX, el código HTML debe estar envuelto en un elemento de nivel superior; de lo contrario, dará un error.
• Si los elementos HTML no se cierran correctamente, JSX dará un error.

Ejemplo :

import React from 'react';
import ReactDOM from 'react-dom';
  
const name = "Learner";
  
const element = <h1>Hello,
{ name }.Welcome to GeeksforGeeks.< /h1>;
  
ReactDOM.render(
    element,
    document.getElementById("root")
);

Producción: