Erste Komponente

Was ist eine Komponente?

Eine React-Komponente ist im einfachsten Fall eine JavaScript-Funktion, die JSX zurückgibt. Diese Funktion wird wie ein HTML-Tag aufgerufen, und React rendert das zurückgegebene Markup ins DOM.

Drei Regeln gelten immer:

1. Der Funktionsname beginnt mit einem Großbuchstaben. Sonst hält React den Aufruf für ein normales HTML-Element.
2. Die Funktion gibt JSX (oder null) zurück.
3. Die Komponente wird importiert und eingebunden, bevor sie sichtbar wird.

Schritt 1 – Eine Datei pro Komponente

In einem typischen Vite-Projekt liegt der Quellcode unter src/. Lege dort einen Ordner für Komponenten an und erstelle eine neue Datei.

src/
  components/
    Greeting.jsx
  App.jsx
  main.jsx

Konventionell trägt die Datei den gleichen Namen wie die Komponente und beginnt mit Großbuchstaben (Greeting.jsx).

Schritt 2 – Die Komponente schreiben

function Greeting() {
    return <h1>Hallo, React!</h1>;
}

export default Greeting;

Was hier passiert:

• function Greeting() – Definition als JavaScript-Funktion. Großbuchstabe ist Pflicht.
• return <h1>...</h1> – JSX wird zurückgegeben.
• export default Greeting; – die Komponente wird als Standard-Export verfügbar gemacht.

Statt der klassischen Funktionsdeklaration sind auch Arrow-Functions üblich. Beide Varianten sind gleichwertig:

const Greeting = () => {
    return <h1>Hallo, React!</h1>;
};

export default Greeting;

Schritt 3 – Komponente einbinden

Die Komponente existiert jetzt – aber niemand verwendet sie. Importiere sie dort, wo sie sichtbar werden soll. In einem frischen Vite-Projekt ist das die App.jsx:

import Greeting from './components/Greeting';

function App() {
    return (
        <main>
            <Greeting />
        </main>
    );
}

export default App;

Wichtig: Die Komponente wird wie ein HTML-Tag verwendet – <Greeting />. Da die Komponente keine Kinder hat, wird sie als selbstschließendes Tag geschrieben.

Schritt 4 – Den Render-Einstiegspunkt verstehen

Wo wird die App-Komponente eigentlich ins DOM gerendert? In main.jsx (oder main.tsx):

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

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

Hier passiert die Verbindung zwischen React und dem realen DOM:

• document.getElementById('root') – sucht das <div id="root"> aus der index.html.
• createRoot(...) – erzeugt einen React-Root für genau dieses DOM-Element.
• .render(<App />) – rendert die App in diesen Root.

StrictMode aktiviert zusätzliche Konsistenz-Prüfungen während der Entwicklung und hat im Production-Build keinen Einfluss.

Schritt 5 – Komponente mit Props erweitern

Statische Komponenten sind selten interessant. Realistische Komponenten erhalten Daten von außen – über Props.

function Greeting({ name }) {
    return <h1>Hallo, {name}!</h1>;
}

export default Greeting;

Die Komponente nimmt jetzt einen Wert name entgegen und nutzt ihn im JSX. Die Verwendung sieht so aus:

import Greeting from './components/Greeting';

function App() {
    return (
        <main>
            <Greeting name="Anna" />
            <Greeting name="Bernd" />
            <Greeting name="Carla" />
        </main>
    );
}

export default App;

Damit hast du das wichtigste Prinzip von React in der Hand: Eine Komponente einmal schreiben, beliebig oft mit unterschiedlichen Daten verwenden. Tiefer geht es im Artikel zu Props.

Komponente vs. Element vs. Instanz

Drei Begriffe, die im React-Kosmos schnell durcheinandergehen:

• Komponente: Die Funktion (oder Klasse) selbst. function Greeting() { ... }.
• Element: Das Ergebnis eines JSX-Aufrufs – ein Plain-Object, das beschreibt, was gerendert werden soll. <Greeting name="Anna" /> ergibt zur Laufzeit ein React-Element.
• Instanz: Der gerenderte Knoten im virtuellen DOM-Baum. Pro Verwendungsstelle entsteht eine Instanz.

Eine Komponente kann beliebig oft als Element instanziiert werden. Jede Instanz hat ihren eigenen lokalen State.

Weiterführende Ressourcen

Externe Quellen

• Your First Component – react.dev
• Importing and Exporting Components – react.dev

Verwandte Artikel

• Was ist React?
• JSX – Syntax und Regeln
• Props
• Komponenten-Denken