Gjengivelse av Elementer i React

React-komponenter beskriver hvordan brukergrensesnittet skal se ut, men de må fortsatt gjengis for å vises på skjermen.

I en typisk React-applikasjon finnes det ett enkelt rotnode-element i HTML-filen. React bruker denne roten som inngangspunkt der hele applikasjonen gjengis.

Nedenfor er et forenklet eksempel på hvordan en komponent gjengis:

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 eksemplet tar React App-komponenten og gjengir den inne i HTML-elementet med id root. Du trenger ikke å huske denne koden ennå. Den er her for å vise hvordan React kobler komponenter til siden.

Når komponenten er gjengitt, oppdaterer React automatisk brukergrensesnittet når komponentens utdata endres. Dette gjør at du kan fokusere på å beskrive brukergrensesnittet i stedet for å oppdatere siden manuelt.