JavaScript en JSX con Llaves

JSX te permite escribir marcado similar a HTML dentro de un archivo JavaScript, manteniendo la lógica de renderizado y el contenido en el mismo lugar. A veces querrás añadir un poco de lógica de JavaScript o hacer referencia a una propiedad dinámica dentro de ese marcado. En esta situación, puedes usar llaves en tu JSX para abrir una ventana a JavaScript.

Pasando cadenas con comillas

Cuando quieres pasar un atributo de cadena a JSX, lo pones entre comillas simples o dobles:

Aquí,"https://i.imgur.com/7vQD0fPs.jpg" y "Gregorio Y. Zara"se están pasando como cadenas.

Pero, ¿qué pasa si quieres especificar dinámicamente elsrco el textoalt? Podríasusar un valor de JavaScript reemplazando" y "con{ y }:

Observa la diferencia entreclassName="avatar", que especifica un nombre de clase CSS"avatar"que hace que la imagen sea redonda, ysrc={avatar}que lee el valor de la variable de JavaScript llamadaavatar. ¡Eso es porque las llaves te permiten trabajar con JavaScript justo ahí en tu marcado!

Usando llaves: Una ventana al mundo de JavaScript

JSX es una forma especial de escribir JavaScript. Eso significa que es posible usar JavaScript dentro de él—con llaves{ }. El ejemplo siguiente primero declara un nombre para el científico,name, luego lo incrusta con llaves dentro del<h1>:

Intenta cambiar el valor dename de 'Gregorio Y. Zara' a 'Hedy Lamarr'. ¿Ves cómo cambia el título de la lista?

Cualquier expresión de JavaScript funcionará entre llaves, incluyendo llamadas a funciones comoformatDate():

Dónde usar llaves

Solo puedes usar llaves de dos maneras dentro de JSX:

1. Como textodirectamente dentro de una etiqueta JSX:<h1>{name}'s To Do List</h1>funciona, pero<{tag}>Gregorio Y. Zara's To Do List</{tag}>no funcionará.
2. Como atributosinmediatamente después del signo=: src={avatar}leerá la variableavatar, perosrc="{avatar}"pasará la cadena"{avatar}".

Usando “doble llaves”: CSS y otros objetos en JSX

Además de cadenas, números y otras expresiones de JavaScript, incluso puedes pasar objetos en JSX. Los objetos también se denotan con llaves, como{ name: "Hedy Lamarr", inventions: 5 }. Por lo tanto, para pasar un objeto JS en JSX, debes envolver el objeto en otro par de llaves:person={{ name: "Hedy Lamarr", inventions: 5 }}.

Puedes ver esto con estilos CSS en línea en JSX. React no requiere que uses estilos en línea (las clases CSS funcionan muy bien en la mayoría de los casos). Pero cuando necesitas un estilo en línea, pasas un objeto al atributostyle:

Intenta cambiar los valores debackgroundColor y color.

Puedes ver realmente el objeto JavaScript dentro de las llaves cuando lo escribes así:

La próxima vez que veas{{ y }}en JSX, ¡sabe que no es más que un objeto dentro de las llaves de JSX!

Más diversión con objetos JavaScript y llaves

Puedes mover varias expresiones a un objeto y referenciarlas en tu JSX dentro de llaves:

En este ejemplo, el objeto JavaScriptpersoncontiene una cadenanamey un objetotheme:

El componente puede usar estos valores depersonasí:

JSX es muy minimalista como lenguaje de plantillas porque te permite organizar datos y lógica usando JavaScript.

Recapitulación

Ahora sabes casi todo sobre JSX:

• Los atributos JSX dentro de comillas se pasan como cadenas.
• Las llaves te permiten incorporar lógica y variables de JavaScript en tu marcado.
• Funcionan dentro del contenido de la etiqueta JSX o inmediatamente después de=en los atributos.
• {{ y }}no es una sintaxis especial: es un objeto JavaScript metido dentro de las llaves de JSX.