Deine erste Komponente

Komponenten sind das Herztueck von React. Sie sind wie Lego-Bausteine, aus denen du deine gesamte App zusammensetzt. In diesem Tutorial baust du deine erste eigene Komponente.

Was ist eine Komponente?

Eine Komponente ist eine JavaScript-Funktion, die JSX zurueckgibt:

function Welcome() {
  return <h1>Willkommen bei React!</h1>;
}

Das ist es schon! Eine Funktion, die UI beschreibt. Einfach, oder?

Deine erste Komponente erstellen

Schritt 1: Datei anlegen

Erstelle eine neue Datei src/components/Greeting.jsx:

function Greeting() {
  return (
    <div>
      <h1>Hallo, React-Welt!</h1>
      <p>Das ist meine allererste Komponente.</p>
    </div>
  );
}

export default Greeting;

Schritt 2: Komponente verwenden

Oeffne src/App.jsx und importiere deine Komponente:

import Greeting from './components/Greeting';

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

export default App;

Fertig! Deine Komponente wird jetzt im Browser angezeigt.

Regeln fuer Komponenten

1. Grossbuchstabe am Anfang

Komponentennamen muessen mit einem Grossbuchstaben beginnen:

// Richtig - wird als Komponente erkannt
function MyButton() {
  return <button>Klick mich</button>;
}

// Falsch - wird als HTML-Element interpretiert
function myButton() {
  return <button>Klick mich</button>;
}

2. Ein Rueckgabewert

Jede Komponente muss genau ein JSX-Element zurueckgeben:

// Richtig
function Card() {
  return (
    <div className="card">
      <h2>Titel</h2>
      <p>Inhalt</p>
    </div>
  );
}

// Auch richtig - mit Fragment
function Card() {
  return (
    <>
      <h2>Titel</h2>
      <p>Inhalt</p>
    </>
  );
}

3. Export nicht vergessen

Damit andere Dateien deine Komponente nutzen koennen, musst du sie exportieren:

// Default Export (eine Komponente pro Datei)
export default function Greeting() {
  return <h1>Hallo!</h1>;
}

// Named Export (mehrere Exports moeglich)
export function Greeting() {
  return <h1>Hallo!</h1>;
}

export function Farewell() {
  return <h1>Tschuess!</h1>;
}

Der Import unterscheidet sich je nach Export-Art:

// Default Import
import Greeting from './Greeting';

// Named Import
import { Greeting, Farewell } from './Greeting';

Komponenten verschachteln

Die wahre Staerke von Komponenten zeigt sich beim Verschachteln:

function Header() {
  return (
    <header>
      <h1>Meine Website</h1>
      <nav>
        <a href="/">Home</a>
        <a href="/about">Ueber uns</a>
      </nav>
    </header>
  );
}

function MainContent() {
  return (
    <main>
      <h2>Willkommen!</h2>
      <p>Das ist der Hauptinhalt unserer Seite.</p>
    </main>
  );
}

function Footer() {
  return (
    <footer>
      <p>2026 - Meine React App</p>
    </footer>
  );
}

function App() {
  return (
    <div>
      <Header />
      <MainContent />
      <Footer />
    </div>
  );
}

Siehst du, wie uebersichtlich das ist? Jede Komponente kuemmert sich um einen Teil der Seite.

Komponenten wiederverwenden

Ein riesiger Vorteil: Du kannst Komponenten mehrfach verwenden:

function Badge({ text }) {
  return (
    <span style={{
      background: '#3498db',
      color: 'white',
      padding: '4px 12px',
      borderRadius: '12px',
      fontSize: '0.875rem'
    }}>
      {text}
    </span>
  );
}

function SkillList() {
  return (
    <div>
      <h2>Meine Skills</h2>
      <Badge text="JavaScript" />
      <Badge text="React" />
      <Badge text="CSS" />
      <Badge text="Node.js" />
    </div>
  );
}

Eine Komponente, viermal verwendet – mit verschiedenen Inhalten!

Ein praktisches Beispiel: Profilkarte

Lass uns eine Profilkarte als Komponente bauen:

function ProfileCard() {
  const name = 'Max Mustermann';
  const role = 'Frontend-Entwickler';
  const skills = ['React', 'JavaScript', 'CSS', 'TypeScript'];

  return (
    <div style={{
      maxWidth: '300px',
      padding: '1.5rem',
      borderRadius: '12px',
      boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
      textAlign: 'center'
    }}>
      <div style={{
        width: '80px',
        height: '80px',
        borderRadius: '50%',
        background: '#3498db',
        color: 'white',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: '2rem',
        margin: '0 auto 1rem'
      }}>
        {name.charAt(0)}
      </div>
      <h2 style={{ margin: '0 0 0.25rem' }}>{name}</h2>
      <p style={{ color: '#666', margin: '0 0 1rem' }}>{role}</p>
      <div>
        {skills.map((skill, index) => (
          <span key={index} style={{
            display: 'inline-block',
            background: '#e8f4f8',
            color: '#2980b9',
            padding: '4px 10px',
            borderRadius: '8px',
            margin: '2px',
            fontSize: '0.8rem'
          }}>
            {skill}
          </span>
        ))}
      </div>
    </div>
  );
}

export default ProfileCard;

Dateien organisieren

Fuer eine saubere Projektstruktur empfehlen wir:

src/
├── components/
│   ├── Header.jsx
│   ├── Footer.jsx
│   ├── ProfileCard.jsx
│   └── Badge.jsx
├── App.jsx
└── main.jsx

Eine Komponente pro Datei – das haelt alles uebersichtlich.

Uebungen

1. Erstelle eine Header-Komponente mit einem Logo-Text und einer Navigation mit 3 Links
2. Baue eine ProductCard-Komponente, die einen Produktnamen, Preis und eine Beschreibung anzeigt
3. Erstelle eine App-Komponente, die Header, drei ProductCards und einen Footer zusammensetzt

Was kommt als Naechstes?

Du hast gelernt, wie Komponenten funktionieren und wie du sie erstellst. Im naechsten Kapitel tauchen wir tiefer in Funktionskomponenten ein und lernen Best Practices fuer die Komponentenentwicklung.

Zusammenfassung

• Eine Komponente ist eine Funktion, die JSX zurueckgibt
• Komponentennamen beginnen immer mit einem Grossbuchstaben
• Komponenten koennen verschachtelt und wiederverwendet werden
• Jede Komponente sollte in einer eigenen Datei leben
• Exportiere Komponenten mit export default, um sie in anderen Dateien zu verwenden

---