Rendering degli elementi in React

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

In una tipica applicazione React, esiste un unico elemento radice nel file HTML. React utilizza questa radice come punto di ingresso dove viene renderizzata l'intera applicazione.

Di seguito 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.