Alle Lehrpfade6. React – Webseiten aus LEGO bauen
beginner+50 XP
Komponenten und Props (LEGO-Steine zusammenstecken)
💡 Die Kernidee im Alltag:
"Früher schrieb man riesige HTML-Dateien mit tausenden Zeilen. In React baust du kleine, wiederverwendbare LEGO-Steine (Komponenten) und steckst sie zusammen."
Wie es wirklich funktioniert (Erklärt für 12-Jährige)
Eine React-Komponente ist einfach eine JavaScript-Funktion, die HTML zurückgibt:
// Unser LEGO-Stein mit Props
function Begruessung(props) {
return <h2>Hallo, {props.name}! Schön, dass du da bist.</h2>;
}
// Wir verwenden ihn dreimal mit unterschiedlichen Namen:
function App() {
return (
<div>
<Begruessung name="Anna" />
<Begruessung name="Ben" />
<Begruessung name="Clara" />
</div>
);
}
KI-Power-Tipp für Entwickler
Empfohlener Assistent: v0.dev / Cursor
Golden Prompt für deinen Editor:
Erstelle eine wiederverwendbare Button-Komponente in React mit TypeScript. Sie soll Varianten für 'primary' und 'danger' unterstützen.
Qualitäts-Prüfung: Stelle sicher, dass die Props sauber als TypeScript-Type oder Interface deklariert sind.
Interaktive Übung & lokaler Testlauf
Erstelle eine React-Komponente `function Badge({ text }) { return <span className='badge'>{text}</span>; }`.