Renderização de Elementos no React

Componentes React descrevem como a interface do usuário deve se apresentar, mas ainda precisam ser renderizados para aparecerem na tela.

Em uma aplicação React típica, existe um único elemento raiz no arquivo HTML. O React utiliza essa raiz como ponto de entrada onde toda a aplicação é renderizada.

Abaixo está um exemplo simplificado de como um componente é renderizado:

import ReactDOM from "react-dom/client";

function App() {
  return <h1>Hello, React</h1>;
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

Neste exemplo, o React utiliza o componente App e o renderiza dentro do elemento HTML com o id root. Não é necessário memorizar este código agora. Ele está aqui para demonstrar como o React conecta componentes à página.

Após a renderização, o React atualiza automaticamente a interface quando a saída do componente é alterada. Isso permite focar na descrição da interface em vez de atualizar a página manualmente.