Elementen Renderen in React

React-componenten beschrijven hoe de gebruikersinterface eruit moet zien, maar ze moeten nog steeds gerenderd worden om op het scherm te verschijnen.

In een typische React-toepassing is er één root-element in het HTML-bestand. React gebruikt deze root als het toegangspunt waar de volledige applicatie wordt weergegeven.

Hieronder volgt een vereenvoudigd voorbeeld van hoe een component wordt gerenderd:

import ReactDOM from "react-dom/client";

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

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

In dit voorbeeld neemt React de App-component en rendert deze binnen het HTML-element met het id root. Je hoeft deze code nog niet te onthouden. Dit voorbeeld laat zien hoe React componenten aan de pagina koppelt.

Na het renderen werkt React de gebruikersinterface automatisch bij wanneer de uitvoer van de component verandert. Hierdoor kun je je richten op het beschrijven van de gebruikersinterface in plaats van de pagina handmatig bij te werken.