¿Conoces cuáles son las dos excepciones en JSX? ¡Aquí te lo contamos!
React es una librería JavaScript desarrollada y publicada por Facebook que nos permite crear interfaces de usuario en el proceso del desarrollo de una SPA. SPA viene de las siglas en inglés de single page aplication, que se refiere a aplicaciones de una sola página. Para desarrollar estas interfaces, React usa la extensión de JavaScript JSX, caracterizada por combinar los lenguajes HTML y JavaScript. En este post, te enseñaremos las 2 excepciones en JSX que diferencian esta extensión de la sintaxis HTML.
¿Qué es JSX?
JSX es una extensión de JavaScript que tiene una sintaxis muy similar a HTML, pero con el acceso a todo el poder de JavaScript. Esta extensión es particularmente utilizada en la librería React. Para conocer más sobre ella, te recomendamos leer el post presentando JSX en la página oficial reactjs.org.
Como has podido ver en nuestro artículo sobre react declarativo y JSX, esta extensión tiene el poder de simplificar la ejecución de una acción HTML a una sola línea. Además, como también puedes leer en nuestro post sobre abrir una ventana a JavaScript en React, esta extensión nos permite escribir código JavaScript dentro de un archivo de código HTML, combinando el poder de ambas sintaxis. Esto nos ayuda a desarrollar aplicaciones mucho más complejas.
Además, React tiene acceso a las extensiones ReactDOM y React Native, las cuales complementan el código core de React y nos dan acceso a elementos que nos permiten crear aplicaciones para dispositivos específicos. Mientras ReactDOM nos permite desarrollar aplicaciones para la web, React Native nos permite desarrollar aplicaciones para dispositivos móviles.
¿Cuáles son las excepciones en JSX?
Como podrás haber leído en la documentación sobre JSX en reactjs.org, JSX tiene una sintaxis muy similar a HTML. Sin embargo, en tu proceso de aprendizaje encontrarás que algunas de las instrucciones que insertas en formato HTML no hacen lo que deseas que hagan. Esto es porque hay algunas excepciones en JSX a la sintaxis. A continuación, te presentamos las 2 excepciones que existen en esta extensión.
className
Si has leído un poco sobre HTML y la creación de clases, sabrás que la etiqueta class nos permite otorgarle una clase a un elemento para poder identificarlo y manipularlo posteriormente. Esta estrategia es muy usada para llamar a un elemento desde el código CSS y editarlo directamente desde ahí.
Con JSX, podemos insertar una clase a un elemento del mismo modo que en HTML. Sin embargo, deberemos utilizar la etiqueta className en vez de la etiqueta class. Es decir, en JSX no podemos utilizar la etiqueta class. ¿Por qué? Recuerda que JSX, a pesar de tener una sintaxis muy similar a HTML, es una extensión de JavaScript, y la palabra class en JavaScript es reservada. Por ello, los creadores de JSX decidieron utilizar la palabra className.
A lo largo de tu proceso de aprendizaje con JSX notarás que mucho de su código está escrito en términos de camelCase. Este es un estándar de escritura en el que, en el nombre de los elementos con más de una palabra, reemplazamos los espacios con una mayúscula. Esto sucede para evitar que los programas lean el espacio como un nuevo elemento.
for
Otra de las excepciones en JSX que debes tener en cuenta antes de empezar a escribir tu proyecto tiene que ver con el atributo for. En JSX, cuando tenemos un label asociado con este atributo, deberemos usar la sintaxis forHtml. Es decir, en vez de utilizar la palabra for como clave en un objeto, deberemos usar esta sintaxis. La razón detrás de esta excepción es la misma que en el caso de className, JSX viene de JavaScript y la palabra for en este lenguaje está reservada para los bucles for.
Las anteriores excepciones son la única diferencia que encontrarás entre la sintaxis de JSX y la sintaxis de HTML, ya que estos dos lenguajes se diferencian más en su estructura que en sus palabras.
¿Te animas a seguir aprendiendo?
Después de leer este post, sabes exactamente cuáles son las 2 excepciones en JSX más importantes. Este conocimiento te ayudará para evitar cometer errores en tu código y hacer que tu proyecto tenga sentido. Sin embargo, ¡todavía queda mucho por aprender para dominar la librería React! Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, donde aprenderás a dominar lenguajes y herramientas de programación como React, JavaScript, HTML y CSS. ¿Te animas a seguir aprendiendo con nosotros? ¡Te esperamos!
