Chaves

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

O JSX fica interessante assim que você mistura JavaScript. As chaves { } abrem uma janela da sua marcação de volta para o JavaScript:

const name = 'Ada';

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

Tudo o que está dentro das chaves é avaliado como JavaScript, e o resultado aparece na página: aqui, o parágrafo exibe Hello, Ada!.

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

Esta é a parte de JSX mais usada: 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 exibe 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.

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>