Seu primeiro componente

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

Hora de escrever seu primeiro componente. Olhe para App.jsx. É uma função que retorna JSX:

export default function App() {
    return (
        <div>

        </div>
    );
}

Neste momento ele retorna um <div> vazio, então a visualização está em branco. Qualquer JSX que você colocar dentro é renderizado (títulos, parágrafos, botões, qualquer coisa):

<h1 id="title">Hello, React!</h1>

Observe o atributo id: ele funciona exatamente como no HTML, e nossos testes usam ids para encontrar seus elementos. Os outros dois arquivos são a estrutura do app: index.html hospeda o app e main.jsx monta o App na página. Eles estão bloqueados. App.jsx é onde você trabalha.

Desafio

Iniciante

Faça seu app cumprimentar o mundo.

Dentro da <div> em App.jsx, adicione um <h1> com id="title".
Seu texto deve ser exatamente Hello, React!

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>