Gengivelse af Elementer i React

React-komponenter beskriver, hvordan brugergrænsefladen skal se ud, men de skal stadig gengives for at blive vist på skærmen.

I en typisk React-applikation findes der et enkelt rodfelt i HTML-filen. React bruger denne rod som indgangspunkt, hvor hele applikationen gengives.

Nedenfor ses et forenklet eksempel på, hvordan en komponent gengives:

import ReactDOM from "react-dom/client";

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

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

I dette eksempel tager React App-komponenten og gengiver den inde i HTML-elementet med id'et root. Du behøver ikke at huske denne kode endnu. Den er her for at vise, hvordan React forbinder komponenter til siden.

Når komponenten er gengivet, opdaterer React automatisk brugergrænsefladen, når komponentens output ændres. Dette gør det muligt for dig at fokusere på at beskrive brugergrænsefladen i stedet for manuelt at opdatere siden.