Chaves

Parte da seção Fundamentos do Journey de React da Coddy — lição 6 de 42.

O JSX fica interessante no momento em que você o mistura com JavaScript. Chaves { } abrem uma janela da sua marcação de volta para o JavaScript:

const name = 'Ada';

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

Tudo dentro das chaves é avaliado como JavaScript, e o resultado vai para a página: aqui o parágrafo renderiza Hello, Ada!.

Sem as chaves, o JSX trata o que você digita como texto simples. <p>Hello, name!</p> mostra literalmente a palavra name, o que provavelmente não é o que você queria.

Esta é a parte mais usada do JSX: defina seus dados como variáveis e, em seguida, insira-os na marcação com { }.

Desafio

Iniciante

O componente define const name = 'Ada', mas a saudação mostra a palavra literal name.

Corrija o parágrafo para que ele use a variável: ele deve renderizar Hello, Ada!.
Não altere a variável em si.

Experimente você mesmo

<!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>