Glossar

Jeder Fachbegriff aus dem Tutorial – in normaler Sprache erklärt. Im Text sind diese Wörter gestrichelt unterstrichen und lassen sich anklicken.

React

Batching: React sammelt mehrere Änderungen und zeichnet danach einmal neu, statt nach jeder einzelnen.
Cleanup: Aufräumen: die Funktion, die du am Ende eines Effects zurückgibst, um Gestartetes wieder zu beenden. Zum Beispiel einen Timer stoppen oder eine Verbindung schließen.
Client-Komponente: Eine Komponente, die im Browser läuft und deshalb State, Hooks und Klicks kann. Erkennbar an "use client" oben in der Datei.
Commit: Der Schritt, in dem React die Seite tatsächlich anpasst – nachdem es vorher nur überlegt hat, was sich ändern muss.
Context: Eine Art Rohrpost: Ein Wert wird oben eingelegt und kann überall weiter unten herausgeholt werden.
Dependency-Array: Die eckige Klammer am Ende von useEffect & Co.: die Liste der Werte, auf die React achten soll. Ändert sich einer davon, läuft der Code erneut. Ist die Liste leer, läuft er nur einmal.
flacher Vergleich: React schaut nur, ob die Werte oberflächlich dieselben sind – nicht, ob zwei Objekte denselben Inhalt haben.
Hook: Eine eingebaute Funktion, deren Name mit „use“ beginnt und die deiner Komponente eine Fähigkeit gibt – etwa sich etwas zu merken. Hooks dürfen nur ganz oben in einer Komponente stehen, nicht in einer if-Abfrage oder Schleife.
JSX: Die HTML-artige Schreibweise mitten im JavaScript-Code, also Zeilen wie <p>Hallo</p>. Es ist kein echtes HTML. Ein Werkzeug übersetzt es vor dem Ausführen in normale Funktionsaufrufe.
key: Ein Namensschild an Listeneinträgen, damit React erkennt, welcher Eintrag welcher ist – auch wenn sich die Reihenfolge ändert.
Komponente: Eine Funktion, die beschreibt, wie ein Stück Oberfläche aussehen soll – zum Beispiel ein Button oder eine ganze Seite. Sie beginnt immer mit einem Großbuchstaben und gibt JSX zurück. Du benutzt sie dann wie ein eigenes HTML-Element: <MeinButton />.
Memoisierung: Ein Ergebnis aufheben, statt es noch einmal auszurechnen. Nach dem Motto: „Solange sich die Zutaten nicht ändern, bleibt das Ergebnis gleich.“
Mounten: Der Moment, in dem eine Komponente zum ersten Mal auf der Seite erscheint.
Prop Drilling: Wenn ein Wert durch mehrere Komponenten durchgereicht wird, die ihn selbst gar nicht brauchen.
Props: Die Werte, die eine Komponente von außen mitbekommt – wie Argumente einer Funktion. Kurz für „properties“. Sie kommen von oben herein und dürfen von der Komponente nicht verändert werden.
Provider: Die Komponente, die einen Context-Wert bereitstellt. Alles, was in ihr steckt, kommt an den Wert heran.
Re-Render: React ruft die Komponentenfunktion noch einmal auf, weil sich etwas geändert hat. Das heißt nicht, dass die Seite neu gebaut wird. Kommt dasselbe heraus wie vorher, ändert sich im Browser gar nichts.
Reconciliation: Der Vergleich zwischen „wie sah es aus“ und „wie soll es aussehen“, aus dem React ableitet, was es ändern muss. Deutsch etwa „Abgleich“. Dabei entscheidet React auch, welche Elemente es wiederverwendet und welche es wegwirft.
Ref: Ein kleiner Merkzettel, den React zwischen den Renders aufhebt – ohne dass eine Änderung daran etwas neu zeichnet.
rein (pure): Eine Funktion ist „rein“, wenn sie bei gleicher Eingabe immer dasselbe zurückgibt und sonst nichts anfasst. Deine Komponenten sollen beim Rendern rein sein – dann darf React sie gefahrlos mehrfach aufrufen.
Render: React ruft deine Komponentenfunktion auf und schaut sich an, was sie zurückgibt. Mehr passiert dabei noch nicht. Das Ergebnis ist eine Beschreibung („so soll es aussehen“). Erst danach entscheidet React, was auf der Seite wirklich geändert wird.
Seiteneffekt: Alles, was über das reine Berechnen hinaus nach außen wirkt: etwas laden, einen Timer starten, den Seitentitel ändern.
Server-Komponente: Eine Komponente, die nur auf dem Server läuft. Sie kann keine Hooks und keine Klicks verarbeiten. In Next.js sind Komponenten standardmäßig Server-Komponenten. Mit "use client" ganz oben in der Datei wird eine Client-Komponente daraus.
State: Ein Wert, den sich eine Komponente merkt und der sich ändern darf – zum Beispiel der Text in einem Eingabefeld. Ändert sich State, zeichnet React die Komponente neu. Genau das unterscheidet ihn von einer normalen Variablen.
StrictMode: Ein Prüfmodus, der während der Entwicklung absichtlich manches doppelt ausführt, um Fehler früh sichtbar zu machen. In der fertigen, veröffentlichten App passiert das nicht.
Suspense: Ein Bereich, der eine Zwischenanzeige („lädt …“) zeigt, solange etwas darin noch nicht fertig ist.
Teilbaum: Eine Komponente samt allem, was in ihr steckt. Komponenten stecken ineinander wie Ordner. Ein Teilbaum ist ein Ordner mit allem Inhalt.
Unmounten: Der Moment, in dem eine Komponente von der Seite verschwindet.

JavaScript & Browser

Callback: Eine Funktion, die du jemand anderem übergibst, damit er sie zum passenden Zeitpunkt aufruft.
Closure: Eine Funktion merkt sich die Variablen von der Stelle, an der sie geschrieben wurde – auch wenn sie später woanders ausgeführt wird.
Debounce: Erst handeln, wenn kurz Ruhe war – zum Beispiel erst suchen, wenn 300 ms nicht getippt wurde.
DOM: Die Seite, wie der Browser sie tatsächlich im Speicher hält – jedes <div>, jeder Text ist dort ein Eintrag. Wenn React „die Seite ändert“, ändert es Einträge im DOM.
Mutation: Ein vorhandenes Objekt oder Array direkt verändern, statt ein neues zu erzeugen – zum Beispiel mit push().
Object.is: Die Vergleichsfunktion, mit der React prüft, ob sich ein Wert geändert hat. Sie arbeitet wie === (bei Objekten also über die Adresse).
Race Condition: Zwei Vorgänge laufen gleichzeitig, und wer zuerst fertig wird, ist Zufall – mit unterschiedlichem Ergebnis je nach Ausgang.
Referenz: Bei Objekten und Arrays speichert JavaScript nicht den Inhalt, sondern die Adresse. Zwei Adressen sind verschieden, auch wenn der Inhalt gleich aussieht. Deshalb ist { a: 1 } === { a: 1 } in JavaScript false.
Stale Closure: Eine Funktion arbeitet mit veralteten Werten, weil sie in einem früheren Durchlauf entstanden ist und die alten Werte festhält.
unveränderlich: Nichts am Alten ändern, sondern immer eine geänderte Kopie erzeugen. In React die Regel für State.

TypeScript

Discriminated Union: Mehrere Varianten mit einem gemeinsamen Erkennungsfeld – daran sieht TypeScript, welche Variante gerade vorliegt. Beispiel: { status: "laden" } oder { status: "fehler", text: string }. Fragst du status ab, weiß TypeScript, welche Felder es gibt.
Generic: Ein Platzhalter für einen Typ, der erst beim Benutzen festgelegt wird – das <T> in Array<T>.
Inferenz: TypeScript errät den Typ selbst, ohne dass du ihn hinschreibst.
Literal-Typ: Nicht irgendein String, sondern genau dieser: "admin" als Typ erlaubt nur exakt das Wort admin.
Narrowing: TypeScript grenzt einen Typ ein, wenn du ihn abfragst: nach if (typeof x === "number") weiß es, dass x eine Zahl ist.
Typ: Eine Beschreibung, welche Form ein Wert haben darf – etwa „eine Zeichenkette“ oder „ein Objekt mit id und name“.
Union: „Eines von diesen“: string | number heißt, der Wert ist entweder eine Zeichenkette oder eine Zahl.
Utility Type: Ein fertiger Helfer, der aus einem Typ einen neuen macht – etwa Partial<T> (alle Felder optional).

Drumherum

Bundle: Die zusammengepackte JavaScript-Datei, die der Browser laden muss, bevor deine App funktioniert.
Hydration: Der Moment, in dem React das vom Server gelieferte HTML im Browser „übernimmt“ und zum Leben erweckt. Passt das HTML nicht zu dem, was React im Browser erzeugen würde, gibt es einen Hydration-Fehler.
Linter: Ein Werkzeug, das deinen Code beim Schreiben prüft und auf typische Fehler hinweist.
Profiler: Ein Messwerkzeug in den React DevTools, das zeigt, welche Komponente wie lange gebraucht hat.
Server-Rendering (SSR): Die Seite wird schon auf dem Server als fertiges HTML erzeugt, damit der Browser sofort etwas anzeigen kann.
Testing Library: Ein Werkzeug, das eine Komponente unsichtbar rendert und prüft, ob das Richtige darin steht. Genau das läuft, wenn du in einer Übung auf „Lösung prüfen“ klickst.
Virtualisierung: Bei sehr langen Listen nur die Zeilen wirklich anzeigen, die gerade sichtbar sind.

Hirefullstack

Ihr braucht React-Verstärkung im Team?

Wir bauen seit Jahren React- und Next.js-Anwendungen für Kunden in ganz Deutschland – als einzelner Experte, als Verstärkung fürs Bestandsteam oder als komplettes Scrum-Team.

Projekt besprechen →