Rendera 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 visas 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 App-komponenten och renderar den inuti HTML-elementet med id root. Du behöver inte memorera denna kod än. Den finns här för att visa hur React kopplar komponenter till sidan.

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