→ index.tml e div#root

→ JSX

Possibilidade de escrever html dentro do JavaScript

Sintaxe de XML dentro do JavaScript

Sempre que cirarmos componentes no React que vão utilizar o html, precisamos terminar o arquivo com .tsx para TypeScript, ou .jsx para JavaScript

→ Componente (Header)

Ato de conseguir separar a aplicação em pequenos blocos que podem ser separados, basicamente tudo que conseguimos e precisamos replicar.

Vamos trabalhar a ideia de componentização com o nosso header da aplicação que se replica em quase todas as páginas

Então em /src vamos comçar criando um arquivo Header.tsx

Todo o componente é com letra maiúscula no início, por isso no arquivo vamos utilizar com letra maiúscula também

No arquivo do componente sempre vamos iniciar importando o React e vamos armazenar esse componente em uma function com o nome do componente com letra Maiúsucula.

import React from 'react'

function Header() {
    return (
        <header>
            <h1>Ecoleta</h1>
        </header>
    )
}

export default Header

Agora no nosso App.tsx vamos importar esse componente Header que acabamos de fazer

E agora no retorno do função App() vamos passar o Header dentro de uma div, que pode receber mais coisas além do Header