Llaves

Parte de la sección Fundamentos del Journey de React de Coddy — lección 6 de 42.

JSX se vuelve interesante en el momento en que mezclas JavaScript. Las llaves { } abren una ventana desde tu marcado de vuelta a JavaScript:

const name = 'Ada';

return <p>Hello, {name}!</p>;

Todo lo que está dentro de las llaves se evalúa como JavaScript, y el resultado aparece en la página: aquí el párrafo renderiza Hello, Ada!.

Sin llaves, JSX trata lo que escribes como texto plano. <p>Hello, name!</p> muestra literalmente la palabra name, probablemente no es lo que querías decir.

Esta es la parte más utilizada de JSX: define tus datos como variables, después colócalos en el marcado con { }.

Desafío

Principiante

El componente define const name = 'Ada' pero el saludo muestra la palabra literal name.

Corrige el párrafo para que use la variable: debe renderizar Hello, Ada!.
No cambies la variable en sí.

Pruébalo tú mismo

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>