React ist das meistgenutzte JavaScript-Framework und der Standard für moderne Web-Apps. In 20 Minuten lernst du die Kernkonzepte — Komponenten, JSX, State und Hooks — indem du eine einfache Bucket-List-App baust. Voraussetzung: grundlegende JavaScript-Kenntnisse und ein Laptop mit Node.js.
Warum du React lernen solltest
React ist das beliebteste JavaScript-Framework — zum siebten Mal in Folge laut Stack Overflow Developer Survey. Auch die ganzen KI-Tools wie Claude Code, ChatGPT Codex oder Lovable bauen standardmäßig mit React, wenn du ihnen nichts anderes sagst. Wenn du als Web Developer arbeiten willst, kommst du an React nicht vorbei.
Dieser Artikel führt dich durch die Grundlagen, indem wir gemeinsam eine kleine Bucket-List-App bauen. Du tippst ein Ziel ein, klickst auf “Hinzufügen”, und der Eintrag erscheint in der Liste. Klingt simpel, deckt aber alle wichtigen React-Konzepte ab.
Ein wichtiger Hinweis vorab: Du solltest JavaScript-Grundkenntnisse mitbringen. React ist ein Framework für JavaScript. Wenn du noch gar nicht programmieren kannst, lern erst die Basics mit HTML, CSS und JavaScript. Sonst wird das hier frustrierend.
Was du installieren musst
Drei Dinge brauchst du, um loszulegen:
- Visual Studio Code als Code-Editor
- Node.js mit npm (npm wird automatisch mitinstalliert)
- Vite als Build-Tool (musst du nicht extra installieren, holst du dir per Befehl)
Visual Studio Code lädst du dir auf der offiziellen Seite herunter, Node.js genauso. Beides ist kostenlos.
Projekt aufsetzen
Erstell einen neuen Ordner auf deinem Desktop. Öffne ihn in VS Code über “Open Folder”. Dann öffnest du das Terminal über das Menü und tippst:
npm create vite
Du wirst nach einem Projektnamen gefragt, nimm zum Beispiel “bucket-list”. Dann wählst du React und JavaScript aus. Vite legt dir den Ordner an. Wechsle hinein und installier die Pakete:
cd bucket-list
npm install
npm run dev
Im Browser öffnet sich dein erstes React-Projekt. Geschafft.
Die Struktur verstehen
In deinem Projekt findest du verschiedene Dateien. Die index.html rührst du nicht an, Vite kümmert sich um den Rest. Den Großteil deiner Arbeit machst du im src-Ordner.
Spannend wird es in der App.jsx. Das .jsx steht für “JavaScript in XML”. Damit kannst du HTML-ähnlichen Code direkt in JavaScript schreiben. Die App-Funktion gibt einfach JSX zurück, also genau das, was später im Browser angezeigt wird.
React arbeitet mit Komponenten. Jede Komponente ist eine Funktion, die JSX zurückgibt. Komponentennamen schreibst du immer groß. Das ist Konvention.
Bevor du loslegst, räum auf. Lösch die index.css, den Assets-Ordner und das Default-Styling in der App.css. Entferne auch die zugehörigen Imports, sonst meckert React.
Das Layout für die Bucket-List
Innerhalb der App-Komponente brauchst du ein Fragment, weil React immer nur ein Parent-Element zurückgeben darf. Fragmente sind diese leeren spitzen Klammern <>...</>.
Darin packst du eine Überschrift, ein Input-Feld, einen Button und ein Div für die Liste. Sieht fast aus wie normales HTML. Ein Detail ist anders: Statt class schreibst du className. Der Grund ist, dass class in JavaScript schon als Schlüsselwort vergeben ist.
Beim Styling läuft alles wie gewohnt über CSS in der App.css. Hintergrundfarbe, Padding, Schriftart, alles wie immer. Da gibt es nichts Neues zu lernen.
Listen dynamisch rendern
Jetzt wird es interessant. Du definierst ein Array mit deinen Bucket-List-Einträgen. Um die Werte in JSX einzubauen, nutzt du geschweifte Klammern. Damit kannst du JavaScript-Variablen direkt im Markup verwenden.
Für eine Liste verwendest du die map-Funktion, die du aus normalem JavaScript schon kennst:
{
bucketList.map((item, index) => (
<div key={index} className="list-item">
{item}
</div>
));
}
Wichtig: Jedes Element in einer gemappten Liste braucht einen key. Sonst bekommst du eine Warnung in der Konsole. Der Index reicht für den Anfang, ist aber technisch nicht ideal.
State mit useState
Hier kommt das Herzstück von React. Wenn du einen Wert hast, der sich ändern soll, kannst du keine normale Variable nehmen. Sonst merkt React die Änderung nicht und zeigt nichts Neues an.
Stattdessen nutzt du den useState-Hook:
const [bucketList, setBucketList] = useState([
"Fallschirm springen",
"Weltreise",
]);
Du bekommst zwei Dinge zurück: den aktuellen Wert und eine Setter-Funktion. Den Wert verwendest du wie eine ganz normale Variable. Aber zum Ändern musst du immer die Setter-Funktion aufrufen.
Genauso machst du es für das Input-Feld:
const [input, setInput] = useState("");
Im Input-Feld setzt du dann value={input} und onChange={(e) => setInput(e.target.value)}. Ohne das onChange lässt sich das Feld nicht beschreiben. Klingt komisch, ist aber so.
Einträge hinzufügen
Du brauchst eine Funktion, die ans Array anhängt. Aber Achtung: kein push. Stattdessen baust du mit dem Spread-Operator ein neues Array:
function addItem() {
if (input === "") return;
setBucketList([...bucketList, input]);
setInput("");
}
Diese Funktion hängst du dann an den Button per onClick={addItem}. Wenn das Feld leer ist, passiert nichts. Sonst landet der neue Eintrag in der Liste, und das Input-Feld wird zurückgesetzt.
Das war es. Du hast eine funktionierende React-App mit State, Listen und User-Input.
Wie es weitergeht
Das hier war ein Crash-Kurs. In der Praxis arbeitest du mit eigenen Komponenten in separaten Dateien, gibst Werte über Props weiter und kombinierst React mit TypeScript, Tailwind und Component Libraries. Das Ganze wird dann deutlich komplexer und auch professioneller.
Genau das lernst du in unserer Web-Developer-Weiterbildung bei DevKarriere. Wir bauen mit dir Schritt für Schritt von den Basics bis zu produktionsreifer Software auf Industrielevel auf. Egal ob Vollzeit gefördert über die Agentur für Arbeit oder nebenberuflich als Fullstack-Kurs. Hol dir ein kostenloses Erstgespräch und finde raus, ob das was für dich ist.
Häufige Fragen
Welche Voraussetzungen brauche ich, um React zu lernen?
Du solltest JavaScript-Grundlagen beherrschen: Variablen, Funktionen, Arrays, Objekte und einfache DOM-Manipulation. HTML und CSS solltest du ebenfalls kennen. React selbst baut direkt auf JavaScript auf — ohne diese Basis wirst du schnell frustriert sein.
Soll ich React mit JavaScript oder direkt mit TypeScript lernen?
Fang mit JavaScript an. React verstehen ist der erste Schritt. TypeScript kommt danach und macht mehr Sinn, wenn du die Grundkonzepte schon im Griff hast. Viele Einsteiger überfordern sich, indem sie beides gleichzeitig lernen wollen.
Wie lange dauert es, React wirklich zu beherrschen?
Die Grundlagen — Komponenten, Props, State, Hooks — verstehst du in wenigen Wochen. Komplexere Themen wie Routing, globaler State und Performance-Optimierung brauchen Monate Praxis. Rechne damit, dass du nach einem Jahr täglichem Üben und eigenen Projekten gut aufgestellt bist für den Arbeitsmarkt.