React es un lenguaje de programación enorme y es una opción muy sólida para los desarrolladores, especialmente para aquellos que trabajan en el campo de la pila completa. Creó un nuevo paradigma de opciones de programación al integrar el marcado de front-end con la lógica de back-end. La combinación de las tecnologías utilizadas para desarrollar software en un proceso simplificado reduce el tiempo de desarrollo.
Esta publicación cubrirá React Staple conocido como JSX. Aprenderá para qué sirve y cómo usarlo para crear el software React. También aprenderá la sintaxis relacionada con JSX y cómo se diferencia de JavaScript. Finalmente, verá algunos ejemplos de código JSX para ayudar a resaltar el tema y llevarlo a casa.
Puede usar los enlaces a continuación para navegar a través de esta publicación.
Sin más preámbulos, comencemos.
¿Qué es JSX en React?
React es un lenguaje de programación basado en componentes que se ejecuta en el tiempo de ejecución de Node.js. La popularidad de React se deriva de su objetivo de simplificar el proceso de desarrollo y proporcionar un entorno de software más seguro.
Una herramienta popular utilizada para este propósito es JSX, una extensión de sintaxis de JavaScript utilizada para acelerar y simplificar aún más la programación de React. Dado que es una extensión de JavaScript, cada expresión de JavaScript válida se considera código válido, lo que amplía aún más sus beneficios. Vale la pena señalar que, si bien las expresiones JS útiles son útiles en JSX, lo contrario no es cierto. Mira el siguiente video para aprender más sobre este concepto.
La sintaxis JSX parece una mezcla de JavaScript y HTML. Sin embargo, JSX debe compilarse en JS para que el software funcione correctamente. Por lo tanto, las expresiones JSX se convierten en cadenas y se compilan en equivalentes JS.
Estas características y comportamientos dan como resultado un lenguaje que puede mejorar la programación, pero que también es muy estricto en términos de sintaxis. Analicemos las diferencias entre JS y JSX para explicar la sintaxis y el comportamiento de JSX.
JSX contra JS
Como se mencionó anteriormente, la sintaxis de JSX y JS es diferente y, dado que JSX se compila en JS, su sintaxis debe ser estricta. El resultado de la compilación JSX es JS que se comunica con React para construir los elementos. Finalmente, cada expresión JSX da como resultado una llamada a React.createElement() que crea la estructura del elemento. La imagen a continuación es una buena representación visual de lo que JSX es en realidad.
A continuación, veamos la sintaxis para crear una etiqueta de elemento JSX en el código siguiente.
const element = <h1>All of time and space, you interested?</h1>;
El código anterior no es una cadena ni un código HTML. En cambio, es una expresión almacenada en una variable que se compilará en una cadena y luego se traducirá a JS, creando un elemento React.
Debido al hecho de que JSX es una extensión de JS, puede ejecutar varias expresiones JS en su JSX. Primero, veamos un ejemplo del uso de una variable en un archivo JSX para crear un código más dinámico.
const name="The Doctor";
const element = <h1>Hello, I’m {name}</h1>;
Las líneas de código anteriores crean una variable con el valor de cadena «The Doctor», que luego se usa en la expresión JSX. Las llaves se utilizan para la interpolación, lo que ayuda a crear un código muy dinámico. Cuando se compila este código, la variable se reemplazará con el valor que tenga.
Ahora veamos un ejemplo de cómo se vería el mismo código en JavaScript.
const name="The Doctor";
const element = `<h1>Hello, I’m ${name}</h1>`;
let main = document.querySelector(“main”);
main.innerHTML = element;
Si bien este es un ejemplo simple, revela dos problemas en los que está trabajando JSX. El primero es simplificar el código; reducir la complejidad significa un código más limpio y legible por humanos. El segundo problema es la inyección de datos, un intento malicioso de romper la seguridad del software.
Con JSX, las preocupaciones sobre los ataques de inyección, también conocidos como secuencias de comandos entre sitios (XSS), se alivian ya que todos los valores incrustados se omiten antes de la representación.
A continuación, veamos algunos ejemplos de cómo usar JSX con y sin expresiones JS.
Cómo usar JSX
Por lo general, JSX se usa junto con React; sin embargo, no son interdependientes. Ambos se pueden utilizar independientemente el uno del otro. Sin embargo, JSX requiere JavaScript para funcionar correctamente; esto se debe a que JSX no es más que azúcar de sintaxis. Eso significa que todo lo que hace JSX es extender la sintaxis de JS para ayudarlo a desarrollar software de manera más eficiente.
A continuación, veamos el equivalente de JavaScript de un elemento JSX. En JSX, cada elemento creado es un objeto de JavaScript con claves, valores, propiedades y métodos.
Compare el siguiente ejemplo de JSX con su equivalente JS.
const element = (
<h1>
Hello, I’m The Doctor!
</h1>
);
El código anterior es idéntico al siguiente código JS.
const element = document.createElement('h1', 'Hello, I’m The Doctor!');
Como puede ver, es probable que utilice código JS estándar con su JSX. Para esto, es imperativo entender cómo hacer esto. Así que veámoslo más a fondo.
let userInput = "The Doctor";function formatName(userInput) {
if (userInput) {
return `Hello, ${userInput}!`;
}
return "Hello, Doctor Strang-er.";
}
const element = (
<h1>
{formatName(userInput)}
</h1>
);
El bloque de código anterior muestra JS estándar junto con JSX, específicamente cómo usar la interpolación JS estándar y las declaraciones if. También puede anidar niños dentro de un elemento JSX, lo que le permite modularizar el contenido. Al combinar estos conceptos, puede crear un software muy robusto que esté listo para cualquier cosa.
Comience a usar JSX en el desarrollo de software
La extensión de sintaxis JSX es un tema extenso que requiere mucho aprendizaje, y ha aprendido los conceptos básicos para comenzar. Sin embargo, como se mencionó anteriormente, JSX se usa más comúnmente en la programación de React debido a la estructura y el propósito de React.
Si bien no es obligatorio, aprender a usar JSX en React es probablemente la mejor manera de comprender JSX y cómo puede usarlo. Continuando, puede que le resulte beneficioso practicar JSX con servicios como CodePen y probar las restricciones de sintaxis de JSX.
