¿Qué es JSX?
JSX es una extensión de la sintaxis de JavaScript. Es una forma de escribir HTML en JavaScript. JSX puede recordarte a un lenguaje de plantillas, pero viene con todo el poder de JavaScript.
JSX produce elementos de React. Puedes guardar elementos de React en variables, devolverlos en funciones y pasarlos como argumentos.
JSX es una extensión de JavaScript creada por Facebook para el uso con la biblioteca React. No es necesario usar JSX con React, pero es muy recomendable.
JSX hace que tu código sea más legible y más fácil de escribir.
¿Por qué JSX?
Sin JSX, escribir React sería extremadamente tedioso. Por ejemplo, aquí hay un código que crea un elemento sin JSX:
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);Este código es difícil de leer, escribir y mantener. Con JSX, puedes escribir el mismo código de esta manera:
const element = <h1 className="greeting">Hello, world!</h1>;Ejemplos:
Estos ejemplos los vamos a trabajar en el archivo App.jsx de un proyecto en React.
import './App.css'
export default function App() {
return (
<>
<h1>Diego Saavedra</h1>
</>
)
}En el ejemplo anterior estamos creando un componente funcional que retorna un h1 con el nombre de Diego Saavedra.
Ahora con JSX podemos hacer uso de código javascript dentro de nuestro componente.
import './App.css'
export default function App() {
const nombre = 'Diego Saavedra'
return (
<>
<h1>{nombre}</h1>
</>
)
}En el ejemplo anterior estamos creando una constante nombre que contiene el valor de Diego Saavedra y lo estamos mostrando en el h1. Y el resultado sigue siendo el mismo.
Tambien podemo hacer uso de JSX para almacenar código html dentro de una variable.
import './App.css'
export default function App() {
const nombre = <h1>Diego Saavedra</h1>
return (
<>
{nombre}
</>
)
}En el ejemplo anterior estamos almacenando el código html en la variable nombre y lo estamos mostrando en el componente. Y seguimos obteniendo el mismo resultado.
Con esto podemos comprobar que podemos almacenar partes de código html en variables y mostrarlas en nuestros componentes. Y también podemos hacer uso de código javascript dentro de nuestros componentes.
Ahora compliquemos un poco el código anterior agregando más información.
import './App.css'
export default function App() {
const nombre = 'Diego Saavedra'
const edad = 36
const ciudad = 'Quito'
return (
<>
<h1>{nombre}</h1>
<p>Edad: {edad}</p>
<p>Ciudad: {ciudad}</p>
</>
)
}En el ejemplo anterior estamos creando tres constantes nombre, edad y ciudad y las estamos mostrando en el componente. Y el resultado sigue siendo el mismo.
Podemos almacenar toda la información dentro de otra variable que almacene todo el código html.
import './App.css'
export default function App() {
const info = (
<>
<h1>Diego Saavedra</h1>
<p>Edad: 36</p>
<p>Ciudad: Quito</p>
</>
)
return (
<>
{info}
</>
)
}En el ejemplo anterior estamos almacenando todo el código html en la variable info y lo estamos mostrando en el componente. Y el resultado sigue siendo el mismo.
¿Cuál es la diferencia con retornar algo en JSX que en JS?
Para ello vamos a utilizar un ejemplo.
export default function App() {
const MostrarNombre = () => {
return <h1>Diego Saavedra</h1>
}
const MostrarNombreJS = () => {
return 'Diego Saavedra'
}En el código anterior estamos creando dos funciones MostrarNombre y MostrarNombreJS. La primera retorna un h1 con el nombre de Diego Saavedra y la segunda retorna el nombre de Diego Saavedra.
Ahora vamos a mostrar el resultado de ambas funciones en el componente.
import './App.css'
export default function App() {
const MostrarNombre = () => {
return <h1>Diego Saavedra</h1>
}
const MostrarNombreJS = () => {
return 'Diego Saavedra'
}
return (
<>
<MostrarNombre />
<MostrarNombreJS />
</>
)
}En el ejemplo anterior estamos mostrando el resultado de ambas funciones en el componente. Y el resultado es el siguiente.
¿Qué paso?
Aparentemente no se ve nada, analicemos que está pasando.
Los componentes en React deben comenzar con una letra mayúscula, si no lo hacemos React no lo va a reconocer como un componente y no lo va a mostrar. Pero este no es el caso, ya que estamos retornando un h1 en la función MostrarNombre. Entonces, ¿Qué está pasando?
La respuesta es que la función MostrarNombre está retornando un h1 pero no lo está mostrando en el componente. Para que se muestre el h1 debemos hacer uso de JSX.
import './App.css'
export default function App() {
const MostrarNombre = () => {
return <h1>Diego Saavedra</h1>
}
const MostrarNombreJS = () => {
return 'Diego Saavedra'
}
return (
<>
{MostrarNombre}
{MostrarNombreJS}
</>
)
}Sin embargo tampoco vamos a ver nada, esto sucede porque la función MostrarNombreJS está retornando un string y no un elemento de React. Para que se muestre el string debemos hacer uso de JSX. Olvidemonos de la función MostrarNombreJS y hagamos uso de JSX en la función MostrarNombre.
import './App.css'
export default function App() {
const MostrarNombre = () => {
return <h1>Diego Saavedra</h1>
}
return (
<>
<div className='App'>
<MostrarNombre />
</div>
</>
)
}Como podemos observar en el ejemplo anterior estamos haciendo uso de JSX en la función MostrarNombre y estamos mostrando el resultado en el componente. Y el resultado es el siguiente.
Reto
En el archivo App.jsx vamos a crear un componente que muestre la siguiente información:
- Nombre: Su nombre
- Edad: Su edad
- Ciudad: Su ciudad
👀 Ver código
import './App.css'
export default function App() {
const nombre = 'Diego Saavedra'
const edad = 36
const ciudad = 'Quito'
return (
<>
<h1>Nombre: {nombre}</h1>
<p>Edad: {edad}</p>
<p>Ciudad: {ciudad}</p>
</>
)
}Conclusión
JSX es una extensión de la sintaxis de JavaScript. Es una forma de escribir HTML en JavaScript. JSX puede recordarte a un lenguaje de plantillas, pero viene con todo el poder de JavaScript.
Los componentes se escriben con mayusculas para que React los reconozca como componentes. Y para mostrar el resultado de una función en un componente debemos hacer uso de JSX.
En el siguiente capítulo vamos a analizar a fondo los Componentes en React y el uso de Props.