Renderização de Elementos no React

Componentes React descrevem como a interface do usuário deve ser, 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 pega 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 mostrar como o React conecta os componentes à página.

Após a renderização, o React atualiza automaticamente a interface do usuário quando a saída do componente muda. Isso permite que você se concentre em descrever a interface em vez de atualizar a página manualmente.