React construye la interfaz del usuario desde piezas individuales llamadas componentes. Estos componentes son funciones de JavaScript que tienen su propia lógica y apariencia, devolviendo como resultado cierto markup, como puede ser un botón o un texto. Veamos el siguiente componente Greeting como ejemplo:
La sintaxis de markup con la que escribimos nuestro componente Greeting, no es HTML (aunque se parezca mucho) sino que es JSX.
JSX
es una extensión de sintaxis para JavaScript que nos permite escribir markup dentro de un archivo JavaScript.
En esencia, JSX es una manera de insertar código HTML en JavaScript sin tener que crear elementos HTML utilizando métodos como document.createElement(). Por ejemplo, para crear un texto solo con JavaScript sería así:
En cambio, con JSX simplemente escribimos:
Esto nos ofrece ciertas ventajas, como escribir un código más legible y fácil de entender.
En los componentes de React, si omitimos el uso de la sintaxis de JSX, crear el componente Greeting sería de la siguiente forma:
Como puedes ver es mucho más práctica la forma en que escribimos el componente Greeting con JSX. Se verá cómo escribir HTML pero lo que hacemos en realidad es escribir JavaScript. Esta sintaxis no es más que sugar syntax
para crear un elemento llamando a la función React.createElement().
Al tener la lógica y la apariencia dentro de una misma función de JavaScript, podemos relacionarlos para crear componentes dinámicos en los que devolvemos cierto markup según el valor de una entrada que recibimos. Por ejemplo para customizar el componente Greeting vamos a recibir un nombre y según su valor será un saludo u otro. Para hacer esto utilizaremos las llaves para escapar del markup e insertar JavaScript.
También podemos renderizar un componente completo según el valor que recibamos, por ejemplo:
Esta sintaxis se vuelve cada vez más útil a medida que nuestra aplicación crece y tenemos más componentes, haciendo que nuestro código sea más legible y fácil de mantener.
Para utilizar JSX en nuestro código hay ciertas reglas a tener en cuenta:
Si tenemos más de una etiqueta que retornar en nuestro componente, las envolvemos en una etiqueta padre como un <div></div>
o <section></section>
por ejemplo, o un contenedor vacío como lo es <React.Fragment></React.Fragment>
o su forma corta <></>
. Y así las demás etiquetas pasarían a ser children en esta función. Veamos un ejemplo:
Lo que estamos escribiendo entonces es:
Una etiqueta <img>
que tiene un cierre automático en HTML, deberá tener un cierre de la forma <img />
.
Por ejemplo en el caso de class, en el JSX de nuestro componente de React sería className o el onclick sería onClick.
Esto se debe a que la función React.createElement() no solo recibe el nombre de una etiqueta HTML en su type sino también el nombre de un componente que hemos creado en nuestra aplicación, y de esta forma puede distinguir entre los elementos de HTML y los componentes creados.
La única condición adicional es que este componente se encuentre al alcance de la función. Esto lo logramos con la importación del componente que queremos renderizar.
Veamos el ejemplo de la función React.createElement() si el componente Greeting renderiza el componente Goodmorning.
En resumen, JSX es una extensión de sintaxis para JavaScript. Si bien su uso es opcional, la legibilidad y flexibilidad que ofrece son importantes ventajas al permitir entender fácilmente cómo en nuestros componentes se relacionan los elementos HTML con el código JavaScript que los manipula, haciendo que sea casi imposible pensar en escribir nuestra aplicación sin usar esta sintaxis.