Rendering av element i React

React-komponenter beskriver hur användargränssnittet ska se ut, men de måste fortfarande renderas för att visas på skärmen.

I en typisk React-applikation finns det ett enda rootelement i HTML-filen. React använder denna rot som ingångspunkt där hela applikationen renderas.

Nedan är ett förenklat exempel på hur en komponent renderas:

import ReactDOM from "react-dom/client";

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

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

I det här exemplet tar React komponenten App och renderar den inuti HTML-elementet med id root. Du behöver inte memorera den här koden än. Den finns här för att visa hur React kopplar komponenter till sidan.

När den har renderats uppdaterar React automatiskt användargränssnittet när komponentens utdata ändras. Detta gör att du kan fokusera på att beskriva användargränssnittet istället för att manuellt uppdatera sidan.