Las llaves son una sintaxis especial para que el analizador JSX sepa que necesita interpretar el contenido entre ellos como JavaScript en lugar de una cadena.

Los necesita cuando desea usar una expresión de JavaScript como una variable o una referencia dentro de JSX. Porque si usa la sintaxis estándar de comillas dobles así:

var css = { color: red }

<h1 style="css">Hello world</h1>

JSX no sabe que tenía la intención de usar la variable css en el atributo de estilo en lugar de la cadena. Y al colocar las llaves alrededor de la variable css , le está diciendo al analizador "tome el contenido de la variable css y póngalo aquí". (Técnicamente es evaluar el contenido)

Este proceso se denomina generalmente "interpolación".

Si no usa la variable css , el JSX podría verse así:

<h1 style={ {color: 'red'} }>Hello world</h1>

Supongo que estás confundido acerca de las llaves dobles.

entonces sabe que las llaves en JSX significan process the inner value in JavaScript , por lo que las llaves externas se usan exactamente para este propósito.

Pero la propiedad de style acepta un object . Y un objeto también necesita otro par de llaves para envolverlo. Ese es el propósito de los internos.

Las llaves exteriores le dicen al analizador JSX que la sintaxis debe interpretarse como javascript. Las llaves interiores se utilizan porque la variable de estilo acepta un objeto.

analicemos esto:

 <h1 style={interpret javascritp {interpret the object} }> hello </h1>