> ## Documentation Index
> Fetch the complete documentation index at: https://docs.baenninger.me/llms.txt
> Use this file to discover all available pages before exploring further.

# Root-Komponente

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

```tsx theme={null}
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.

<Warning>
  Diese Datei heisst je nach Bundler anders:

  * **Vite**: `main.jsx` bzw. `main.tsx`
  * **Webpack**: `index.jsx` bzw. `index.tsx`
</Warning>

## `<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.