Renderizzazione degli Elementi in React

I componenti React descrivono l'aspetto che dovrebbe avere l'interfaccia utente, ma devono ancora essere renderizzati per apparire sullo schermo.

In una tipica applicazione React, esiste un singolo elemento root nel file HTML. React utilizza questo root come punto di ingresso in cui viene renderizzata l'intera applicazione.

Di seguito è riportato un esempio semplificato di come viene renderizzato un componente:

import ReactDOM from "react-dom/client";

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

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

In questo esempio, React prende il componente App e lo rende all'interno dell'elemento HTML con l'id root. Non è necessario memorizzare subito questo codice. È presente per mostrare come React collega i componenti alla pagina.

Una volta renderizzato, React aggiorna automaticamente l'interfaccia utente quando cambia l'output del componente. Questo permette di concentrarsi sulla descrizione dell'interfaccia utente invece di aggiornare manualmente la pagina.