Funktionale Komponenten und Props
Erstellen Sie Komponenten als Funktionen, nehmen und destrukturieren Sie Props und verwenden Sie PropTypes oder TypeScript-Typen, um erwartete Datenstrukturen zu dokumentieren.
Funktionale Komponenten und Props ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist eine React-Komponente?
Eine React-Komponente ist eine JavaScript-Funktion, die JSX zurückgibt. Komponenten sind die Bausteine von React-Anwendungen – wiederverwendbare und kombinierbare Teile der Benutzeroberfläche.
function Welcome() {
return <h1>Welcome to CoddyKit!</h1>;
}
// Arrow function style:
const Welcome = () => <h1>Welcome to CoddyKit!</h1>;Props — Daten nach unten übergeben
Props (Eigenschaften) dienen dazu, Daten vom übergeordneten an das untergeordnete Element zu übergeben. Die Komponente erhält sie als erstes Argument in Form eines einfachen Objekts.
function Greeting({ name, role }: { name: string; role: string }) {
return <p>Hello, {name}! Your role is {role}.</p>;
}
// Usage:
<Greeting name="Alice" role="admin" />TypeScript-Interface für Props
Definieren Sie ein benanntes Interface für Props, um Autovervollständigung, Typprüfung und Dokumentation zu erhalten.
interface ButtonProps {
label: string;
onClick: () => void;
disabled?: boolean;
variant?: 'primary' | 'secondary' | 'ghost';
}
function Button({ label, onClick, disabled = false, variant = 'primary' }: ButtonProps) {
return (
<button
onClick={onClick}
disabled={disabled}
className={`btn btn-${variant}`}
>
{label}
</button>
);
}children-Prop
Die children-Prop enthält den Inhalt zwischen dem öffnenden und dem schließenden Tag der Komponente. Typisieren Sie sie als React.ReactNode, damit beliebiger renderbarer Inhalt akzeptiert wird.
interface CardProps {
title: string;
children: React.ReactNode;
}
function Card({ title, children }: CardProps) {
return (
<div className="card">
<h2>{title}</h2>
<div className="card-body">{children}</div>
</div>
);
}
// Usage:
<Card title="Hello">
<p>Card content goes here.</p>
</Card>Standard-Props mit Destrukturierung
Legen Sie Standardwerte direkt im Destrukturierungsmuster fest. Das ist der moderne Ansatz – die veraltete defaultProps-API wird nicht mehr empfohlen.
function Alert({ type = 'info', message, onClose }: AlertProps) {
return (
<div className={`alert alert-${type}`}>
<span>{message}</span>
<button onClick={onClose}>×</button>
</div>
);
}Komponenten kombinieren
Komponenten lassen sich kombinieren: Eine Page verwendet ein Layout, das wiederum ein Nav und eine Sidebar verwendet, die jeweils kleinere Atome wie Button und Icon einsetzen. Dieser Komponentenbaum ist der React-Komponentenbaum.
Namenskonventionen
Komponentennamen müssen mit einem Großbuchstaben beginnen. Namen in Kleinbuchstaben werden als HTML-Elemente behandelt. <div> ist ein HTML-div; <Div> ist eine React-Komponente namens Div.
Reine Komponenten
Eine Komponente ist rein, wenn dieselben Props stets dieselbe Ausgabe erzeugen und während des Renderns keine Seiteneffekte auftreten. Reine Komponenten lassen sich leichter nachvollziehen und optimieren.
// Pure:
const Greeting = ({ name }: { name: string }) => <h1>Hi, {name}</h1>;
// Impure (side effect in render):
const Bad = ({ id }: { id: string }) => {
localStorage.setItem('id', id); // SIDE EFFECT in render — avoid
return <p>{id}</p>;
};Funktionen als Props übergeben
Funktionen (Callbacks) werden als Props übergeben, damit untergeordnete Komponenten mit übergeordneten Komponenten kommunizieren können. Die übergeordnete Komponente definiert die Funktion, die untergeordnete ruft sie auf.
function TodoItem({ text, onDelete }: { text: string; onDelete: () => void }) {
return (
<li>
{text}
<button onClick={onDelete}>Delete</button>
</li>
);
}Props mit Spread übergeben
Der Spread-Operator übergibt alle Props eines Objekts an eine Komponente. Das ist für Wrapper- und Pass-through-Komponenten nützlich, sollte aber mit Bedacht eingesetzt werden – unerwartete Props können weitergereicht werden.
function InputWrapper(props: React.InputHTMLAttributes<HTMLInputElement>) {
return <input {...props} className={`input-base ${props.className || ''}`} />;
}Fragment und Keys im Props-Kontext
Wenn Sie eine Liste von Komponenten als Children rendern, muss jede Komponente eine eindeutige key-Prop besitzen. Keys helfen React dabei zu erkennen, welche Elemente geändert, hinzugefügt oder entfernt wurden.
Schnelltest
Wie geben Sie in einer modernen React-Funktionskomponente einen Standardwert für eine Prop an?
Zusammenfassung: Komponenten und Props
Funktionale Komponenten sind JavaScript-Funktionen, die JSX zurückgeben. Props übergeben Daten von der übergeordneten an die untergeordnete Komponente. Verwenden Sie TypeScript-Interfaces für Prop-Typen. children: React.ReactNode für Inhalte von Slots. Standardwerte werden bei der Destrukturierung festgelegt. Übergeben Sie Callbacks als Props für die Kommunikation von der untergeordneten zur übergeordneten Komponente. Namen beginnen mit Großbuchstaben.
Häufig gestellte Fragen
Ist die Lektion „Funktionale Komponenten und Props“ kostenlos?
Ja — der vollständige Text von „Funktionale Komponenten und Props“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Funktionale Komponenten und Props“?
Erstellen Sie Komponenten als Funktionen, nehmen und destrukturieren Sie Props und verwenden Sie PropTypes oder TypeScript-Typen, um erwartete Datenstrukturen zu dokumentieren. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Funktionale Komponenten und Props“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- JSX: Syntax und Transpilierung
- Funktionale Komponenten und Props
- useState-Hook: State und erneute Renderings
- Listen, Keys und bedingtes Rendern