Root-Komponente

Die Root-Komponente rendert unsere komplette Seite. Diese sieht wie folgt aus:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './components/App.jsx';
import './styles.css';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Hier wird also das Element mit der ID root aus unserem DOM genommen und daraus eine React-Root erstellt. Auf dieser root können wir jetzt unsere Standardkomponente <App /> rendern.

Diese Datei heisst je nach Bundler anders:

• Vite: main.jsx bzw. main.tsx

• Webpack: index.jsx bzw. index.tsx

<StrictMode>

Wir können unsere <App />-Component noch in eine <StrictMode />-Component legen. Strict-Mode rendert unsere Komponenten zweimal, um Fehler zu finden. Ausserdem überprüft es, ob wir veraltete Teile der React-API nutzen.