React v19 - Build Tools & Setup

React v19+ — Build Tools & Setup

0:00 Über Werkzeuge spricht man selten mit Begeisterung — sie sollen einfach funktionieren. Aber beim Entwickeln entscheidet die Geschwindigkeit der Werkzeuge darüber, wie man arbeitet. Wenn zwischen dem Speichern einer Datei und dem sichtbaren Ergebnis zehn Sekunden liegen, greift man zwangsläufig zum Handy oder zur nächsten Mail — und der Faden ist weg.

0:20 Liegen dazwischen Millisekunden, bleibt man drin. Das ist kein Luxus, sondern ein handfester Unterschied in der Arbeitsweise. Heute richten wir ein React-Projekt so ein, dass die Werkzeuge nicht im Weg stehen: vom ersten Aufsetzen bis zum Editor, der beim Speichern aufräumt.

Modernes React-Setup mit Vite

0:36 Vier Stationen liegen vor uns. Zuerst das Aufsetzen mit Vite — und die Einordnung, warum das, was jahrelang Standard war, heute keine Empfehlung mehr ist. Dann der Entwicklungsserver mit Hot Module Replacement, dem Herzstück der kurzen Rückmeldeschleife. Danach Konfiguration: Werte, die je nach Umgebung anders sind, gehören nicht in den Code. Und zum Schluss Linting und Formatierung samt sauberer Anbindung an den Editor.

1:01 Vom Projektgerüst bis zum eingerichteten Arbeitsplatz in einem Rutsch. Kurz zu Ihnen. Beim Aufsetzen von Projekten sind die Gewohnheiten sehr unterschiedlich — manche nutzen noch das alte Create React App, andere sind längst bei Vite, wieder andere arbeiten in einem Framework wie Next.js, das die Frage gar nicht erst stellt.

1:21 Und viele haben ein Setup geerbt, das irgendwann jemand gebaut hat und das seitdem niemand anfasst. Die zweite Frage ist deshalb besonders interessant: Wer hat eine Migration schon hinter sich, und woran hat es gehakt? Sagen Sie mir außerdem, was heute konkret sitzen soll.

Vite statt Create React App

1:38 Beginnen wir mit der Grundsatzfrage: Womit setzt man 2026 ein React-Projekt auf? Die Antwort hat sich in den letzten Jahren geändert, und zwar deutlicher, als viele mitbekommen haben. Schauen wir uns an, was Vite anders macht. Der Unterschied liegt darin, wann gebaut wird. Ältere Werkzeuge bündeln beim Start erst einmal Ihre gesamte Anwendung zu einem großen Paket — bei einem gewachsenen Projekt dauert das gern eine halbe Minute.

2:04 Vite dreht das um und nutzt aus, dass moderne Browser Module von sich aus verstehen. Es liefert im Entwicklungsbetrieb einfach die einzelne Datei aus, die gerade gebraucht wird. Wie ein Restaurant, das à la carte kocht, statt vorab ein komplettes Büfett aufzubauen. Für die Produktion wird trotzdem ordentlich gebündelt — dort zählt das fertige Ergebnis, nicht die Startzeit.

2:27 Der erste Punkt ist der spürbarste: Der Server steht praktisch sofort, unabhängig von der Projektgröße. Das ist der Unterschied zwischen "kurz mal starten" und "jetzt erst einmal Kaffee holen". Dazu kommt esbuild für das Übersetzen, geschrieben in Go und dadurch um Größenordnungen schneller als die klassischen Werkzeuge in JavaScript.

2:46 Der dritte Punkt ist allerdings der, der die Entscheidung abnimmt: Create React App ist seit 2025 offiziell abgekündigt und wird nicht mehr gepflegt — react.dev empfiehlt inzwischen ausdrücklich Vite und vergleichbare Werkzeuge. Und die Konfiguration ist schlank und lesbar statt in Voreinstellungen versteckt. Das Aufsetzen ist erfreulich unspektakulär geworden.

3:08 Ein Befehl legt das Gerüst an, Sie wählen die React-Vorlage — mit oder ohne TypeScript, und ich würde bei neuen Projekten immer zur TypeScript-Variante raten. Dann in den Ordner wechseln, Abhängigkeiten installieren, fertig. Zwei Befehle bleiben für den Alltag: einer startet den Entwicklungsserver, der andere baut die Produktionsfassung.

3:28 Diese Trennung ist wichtiger, als sie aussieht — im Entwicklungsbetrieb zählt Geschwindigkeit beim Ändern, beim Bauen zählt ein kleines, optimiertes Ergebnis. Zwei verschiedene Ziele, zwei verschiedene Wege. Vier Zeilen bis zur laufenden Anwendung — mehr braucht es nicht. Die erste ist die interessante: Der doppelte Bindestrich in der Mitte reicht die folgenden Angaben an das Gerüst-Werkzeug durch, statt sie an npm selbst zu richten.

3:54 Ohne die Vorlage würde Sie das Werkzeug interaktiv nach Framework und Sprache fragen; mit ihr läuft es ohne Rückfrage durch, was für Skripte und Anleitungen praktisch ist. Der Rest ist Routine. Was hier bemerkenswert fehlt, ist eine Konfigurationsdatei, die Sie anfassen müssten — das Gerüst läuft so, wie es ist. Jetzt Sie. Das Lernziel ist ein lauffähiges Projekt — bewusst niedrigschwellig, denn genau dieser erste Schritt soll nachher keine Hürde mehr sein.

4:21 Der Erfolg ist sichtbar: Die Startseite erscheint unter der Adresse, die Ihnen der Server nennt. Achten Sie einmal bewusst darauf, wie lange das Starten dauert. Für die Erweiterung lohnt sich der Blick in den Ausgabeordner nach dem Produktionsbau. Sie sehen dort die tatsächlich ausgelieferten Dateien mit ihren Größen — eine ganz andere Welt als das, was im Entwicklungsbetrieb durch die Leitung geht.

4:44 Die ersten beiden Punkte betreffen alle, die von Create React App kommen. Der Zugriff auf Umgebungsvariablen heißt in Vite anders — das kommt in Kapitel drei ausführlich. Und viele eingeschliffene Muster aus der alten Welt gibt es hier schlicht nicht mehr; kopieren Sie also nicht ungeprüft aus alten Projekten. Eine zu alte Node-Version bricht bereits beim Anlegen ab, immerhin mit klarer Meldung.

5:06 Und der letzte Punkt sorgt regelmäßig für Verwirrung: Der eine Ordner enthält Dateien, die Sie unverändert mitliefern, der andere entsteht beim Bauen und wird jedes Mal überschrieben. Der gehört nicht in die Versionsverwaltung.

Dev-Server & Hot Module Replacement

5:19 Das Projekt läuft — jetzt geht es um die Schleife, in der Sie den ganzen Tag verbringen: ändern, speichern, schauen. Wie kurz diese Schleife wird und was dabei im Browser genau passiert, klären wir jetzt. Der Entwicklungsserver liefert Module aus, sobald sie gebraucht werden. Hot Module Replacement geht noch einen Schritt weiter: Ändern Sie eine Datei, wird nicht die Seite neu geladen, sondern genau dieses eine Modul im laufenden Browser ausgetauscht.

5:46 Wie ein Bühnenbild, das während des Stücks gewechselt wird — die Schauspieler bleiben stehen. Und das ist der eigentliche Gewinn: Der Zustand Ihrer Komponenten bleibt meist erhalten. Sie haben ein Formular halb ausgefüllt, ein Menü geöffnet, sich zu einem tief verschachtelten Dialog geklickt — nach dem Speichern ist das alles noch da.

6:05 Nur der geänderte Teil sieht anders aus. Rechnen Sie das einmal hoch. Wenn Sie zweihundertmal am Tag speichern und jedes Mal drei Sekunden auf einen kompletten Neustart warten, sind das zehn Minuten reines Warten — aber das ist nicht der Schaden. Der Schaden ist, dass Sie in diesen drei Sekunden aus dem Gedanken fallen. Und wenn Sie sich nach jedem Neuladen wieder durch fünf Klicks zum getesteten Zustand zurückarbeiten müssen, sind es keine drei Sekunden mehr, sondern dreißig.

6:32 Genau das nimmt Ihnen der Zustandserhalt ab. Kurze Schleifen führen außerdem zu einer anderen Arbeitsweise — man probiert mehr aus, weil Ausprobieren nichts mehr kostet. Die ersten drei Punkte sind eher eine Beobachtungsaufgabe als eine Anleitung: starten, etwas ändern, hinschauen. Achten Sie darauf, was *nicht* passiert — kein Flackern, kein Fortschrittsbalken, kein Sprung nach oben.

6:54 Punkt vier ist die praktische Anpassung: Port und Host stellen Sie in der Konfigurationsdatei ein, etwa wenn ein bestimmter Port vorgegeben ist oder Sie vom Handy im gleichen Netz zugreifen wollen. Und Punkt fünf ist der Erfahrungswert: Wenn das Nachladen einmal hängt — nach einem Wechsel des Branches etwa —, ist ein Neustart des Servers schneller als jede Fehlersuche.

7:16 Das ist die ganze Konfiguration, und ich zeige sie vor allem, um zu zeigen, wie wenig es ist. Ein Objekt, ein Abschnitt für den Server, zwei Einstellungen. Der Port ist der Klassiker — viele Teams legen sich auf einen festen Wert fest, damit Lesezeichen und Anleitungen für alle stimmen. Und die zweite Zeile ist eine Kleinigkeit mit erstaunlicher Wirkung im Alltag: Der Browser öffnet sich beim Starten von selbst mit der richtigen Adresse.

7:41 Denken Sie beim Vergleich daran, wie umfangreich eine gleichwertige Webpack-Konfiguration aussehen würde. Genau das meint der Punkt "schlanke Konfiguration" von vorhin. Diese Übung ist weniger Bauen als bewusstes Hinschauen. Das Lernziel: den Server konfigurieren und das Verhalten beim Nachladen wirklich beobachten. Das Erfolgskriterium ist genau formuliert — eine Textänderung erscheint ohne vollständiges Neuladen, und der sichtbare Zustand bleibt erhalten.

8:09 Bauen Sie sich dafür etwas Zustandsbehaftetes: einen Zähler, ein ausgefülltes Feld. Klicken Sie ihn hoch, ändern Sie dann den umgebenden Text und speichern Sie. Bleibt der Zähler stehen, haben Sie den Effekt gesehen, um den es geht. Als Erweiterung setzen Sie den Port auf einen eigenen Wert. Der erste Punkt klingt kurios, ist aber real: Wer ein vollständiges Neuladen erwartet, übersieht die Aktualisierung und hält sie für ausgeblieben.

8:35 Der zweite ist tückischer — ist der gewünschte Port belegt, weicht der Server still auf einen anderen aus. Sie schauen dann auf einen alten Tab mit der alten Anwendung und wundern sich, warum Ihre Änderung fehlt. Lesen Sie also die Startmeldung. Dateien außerhalb des Projektbaums werden nicht beobachtet, da hilft kein Speichern.

8:54 Und der letzte Punkt ist die klassische Fehlzuschreibung: Bevor Sie das Nachladen für kaputt erklären, machen Sie ein hartes Neuladen mit geleertem Zwischenspeicher.

Environment-Variablen & Konfiguration

9:04 Jede Anwendung hat Werte, die sich je nach Umgebung unterscheiden — die Adresse der Schnittstelle ist der Klassiker. Solche Werte gehören nicht in den Code. Wie das in Vite funktioniert und was dabei der wichtigste Unterschied zur alten Welt ist, sehen wir jetzt. Umgebungsvariablen halten alles aus dem Code heraus, was sich zwischen Ihrem Rechner, der Testumgebung und der Produktion unterscheidet.

9:28 In Vite kommen die Werte aus Dateien mit der Endung `env` und werden über `import.meta.env` gelesen. Und jetzt der Punkt, den Sie sich merken sollten: Nur Variablen mit dem `VITE_`-Präfix landen im ausgelieferten Code. Das ist eine bewusst eingebaute Sicherung. Alles, was in den Browser wandert, kann jeder lesen — das Präfix zwingt Sie zu einer aktiven Entscheidung dafür. Ohne es bleibt die Variable im Client schlicht leer.

9:54 Ein Stolperstein mit gutem Grund. Der erste Punkt ist gute Handwerkspraxis: Konfiguration und Code sind zwei verschiedene Dinge. Eine fest eingetragene Adresse bedeutet, dass Sie für einen Wechsel der Umgebung Code ändern müssen — und damit neu bauen und neu ausliefern. Mit ausgelagerten Werten bleibt dasselbe Artefakt überall gleich, nur die Konfiguration wechselt.

10:16 Der dritte Punkt ist der, den ich am meisten schätze: Das Präfix ist eine eingebaute Bremse gegen versehentliche Geheimnisse im Frontend. Und die lokale Variante der Datei bleibt auf Ihrem Rechner — jeder im Team kann eigene Werte haben, ohne dass sie sich gegenseitig überschreiben. Der Ablauf ist kurz: Datei anlegen, Variablen mit dem Präfix benennen, im Code über `import.meta.env` lesen.

10:39 Punkt vier ist der elegante Teil — es gibt eigene Dateien je Modus, und Vite wählt automatisch die passende, je nachdem ob Sie entwickeln oder bauen. Sie brauchen also keine Fallunterscheidung im Code. Und Punkt fünf ist kein Detail, sondern Pflicht: Die lokale Datei gehört in die Ignorierliste. Das kostet zehn Sekunden und erspart im Zweifel eine unangenehme Aufräumaktion in der Versionsgeschichte, denn ein einmal veröffentlichtes Geheimnis bekommen Sie da nur mühsam wieder heraus.

11:09 Oben die Datei, unten der Zugriff — zusammen die ganze Mechanik. Achten Sie auf das Präfix, es taucht an beiden Stellen auf und ist Teil des Namens, keine Abkürzung. Und schauen Sie auf die Art des Zugriffs: `import.meta.env`, nicht `process.env`. Der alte Weg stammt aus der Node-Welt und wurde von Create React App nachgebaut; Vite setzt auf den Standardweg für Module.

11:31 Das ist der häufigste Stolperstein bei einer Migration, weil der Code beim Umstellen ohne Fehlermeldung durchläuft — Sie bekommen einfach überall einen leeren Wert und suchen dann an der falschen Stelle. Jetzt lagern Sie selbst einen Wert aus. Das Lernziel ist, einen umgebungsabhängigen Wert über eine Variable zu führen statt fest im Code.

11:52 Nehmen Sie ruhig die Adresse einer Schnittstelle, das ist der realistischste Fall. Der Erfolg ist zweiteilig: Die Anwendung liest den Wert korrekt, und ein Wechsel des Modus ändert ihn tatsächlich. Genau dieser zweite Teil ist der Beweis, dass die Auslagerung etwas bringt. Als Erweiterung hinterlegen Sie je einen Wert für Entwicklung und Produktion und schauen sich an, welcher wann greift.

12:15 Die ersten beiden Punkte haben dasselbe stille Symptom — der Wert ist einfach leer, ohne Fehlermeldung, ohne Warnung. Entweder fehlt das Präfix oder Sie greifen noch auf dem alten Weg zu. Wenn also eine Variable partout nicht ankommt, prüfen Sie zuerst diese beiden Dinge. Der dritte Punkt ist der ernsteste: Was mit dem Präfix im Client landet, ist öffentlich — jeder kann es im ausgelieferten Code nachlesen.

12:39 Ein Schlüssel für eine Datenbank hat dort nichts zu suchen, egal wie das Präfix lautet. Und die lokale Datei ohne Eintrag in der Ignorierliste landet im Repository, oft ohne dass es jemand merkt.

ESLint, Prettier & VS-Code-Integration

12:51 Zum Abschluss der Arbeitsplatz selbst. Zwei Werkzeuge, die im Alltag ständig laufen und die man gern verwechselt — obwohl sie ganz verschiedene Aufgaben haben. Diese Trennung sauber zu verstehen, erspart Ihnen einiges an Ärger bei der Einrichtung. Die Rollentrennung ist der Kern dieses Kapitels. ESLint schaut auf den Inhalt: Es findet Fehler und fragwürdige Muster — eine Variable, die nie benutzt wird, ein Hook in einer Bedingung.

13:17 Prettier schaut ausschließlich auf die Form: Zeilenumbrüche, Anführungszeichen, Einrückung. Der eine ist der Lektor, der andere der Setzer. Und über die Anbindung an den Editor laufen beide beim Speichern automatisch — Sie bemerken sie im Alltag gar nicht mehr. Genau so soll es sein: Werkzeuge, die arbeiten, ohne dass man an sie denkt.

13:38 Der erste Punkt ist der handfeste Nutzen: ESLint findet echte Fehler, bevor Sie sie im Browser suchen — gerade bei den Hook-Regeln aus dem State-Modul ist es ein verlässliches Netz. Der zweite Punkt ist ein sozialer, und ich halte ihn für unterschätzt. Diskussionen über Einrückung und Anführungszeichen sind reine Zeitverschwendung, und Prettier beendet sie, indem es die Entscheidung schlicht abnimmt.

14:00 Nicht weil sein Stil der beste wäre, sondern weil er einheitlich ist. Das automatische Formatieren beim Speichern sorgt dann dafür, dass niemand daran denken muss — und dass Änderungssätze nur echte Änderungen enthalten, keine Formatierungsspuren. Fünf Schritte, zwei davon mit Fallstricken. ESLint wird in aktuellen Versionen über die Flat-Config eingerichtet — das ist das neue Format, ältere Anleitungen im Netz zeigen noch das alte.

14:26 Bei Prettier müssen Sie die Regeln entschärfen, die gegen ESLint arbeiten würden, sonst formatieren beide gegeneinander. Dann die Erweiterungen im Editor und die Einstellung fürs Speichern. Und Punkt fünf ist der, den man gern weglässt: Verankern Sie beides zusätzlich als Skripte für die Pipeline. Denn eine Regel, die nur im Editor greift, gilt für jeden, der sie anders eingerichtet hat, eben nicht.

14:50 Zwei Zeilen in den Editor-Einstellungen, und der Rest passiert von allein. Die erste schaltet das Formatieren beim Speichern ein, die zweite legt fest, wer das übernimmt. Diese zweite Zeile ist wichtiger, als sie aussieht — ohne sie weiß der Editor bei mehreren installierten Formatierern nicht, wen er nehmen soll, und tut im Zweifel gar nichts.

15:09 Legen Sie diese Einstellungen am besten im Projekt ab, nicht nur in Ihrem persönlichen Profil: Dann bekommt jeder im Team dasselbe Verhalten, ohne dass es jemand einrichten muss. Das ist der kleine Unterschied zwischen "bei mir läuft's" und einem funktionierenden Setup für alle. Die letzte Übung richtet Ihren Arbeitsplatz ein. Das Lernziel ist das Zusammenspiel beider Werkzeuge beim Speichern.

15:32 Der Erfolg ist doppelt geprüft: Unsauber formatierter Code wird beim Speichern gerade gerückt, und Lint-Meldungen erscheinen direkt im Editor an der betroffenen Stelle. Probieren Sie beides gezielt aus — zerschießen Sie die Einrückung absichtlich und legen Sie eine unbenutzte Variable an. Sie sollten zwei verschiedene Reaktionen sehen, und daran verstehen Sie die Rollentrennung.

15:53 Als Erweiterung ergänzen Sie ein Skript und lassen es einmal über das ganze Projekt laufen. Der erste Punkt ist der bekannteste Ärger: Beide Werkzeuge formatieren gegeneinander, und Ihre Datei ändert sich bei jedem Speichern hin und her. Die Lösung ist die Konfiguration, die ESLints Stilregeln abschaltet — dann bleibt jedem sein Zuständigkeitsbereich.

16:14 Punkt zwei betrifft alle, die Anleitungen aus dem Netz kopieren: Seit ESLint 9 gilt die Flat-Config, das alte Format wird nicht mehr gelesen. Ein fehlender Standard-Formatierer sorgt dafür, dass das Speichern kommentarlos nichts tut — kein Fehler, nur Stille. Und der letzte Punkt schließt den Kreis: Prettier findet keine Fehler und soll das auch nicht. Dafür ist ESLint da.

16:37 Ziehen wir die Linie. Vite ersetzt das abgekündigte Create React App und ist sowohl beim Starten als auch beim Bauen deutlich schneller — kein Umbau Ihrer Anwendung nötig, nur ein anderes Werkzeug drumherum. Hot Module Replacement liefert Rückmeldung in Millisekunden und bewahrt dabei den Zustand, was die eigentliche Zeitersparnis ausmacht.

16:58 Umgebungsvariablen laufen über das `VITE_`-Präfix und `import.meta.env` — und was dort steht, ist öffentlich. ESLint findet Fehler, Prettier formatiert, beide beim Speichern. Vom Projektgerüst bis zum sauber eingerichteten Editor in einem Rutsch.

Fragen & Weiterarbeiten

17:14 Damit sind wir am Ende. Alle Beispiele und Konfigurationen liegen in der Freigabe — gerade die Lint- und Formatierungseinrichtung würde ich mir mitnehmen, die ist in jedem Projekt gleich und lohnt sich als Vorlage. Für alles Weitere: vite.dev für das Werkzeug selbst, dort gibt es auch eine gute Anleitung zur Migration von Create React App.

17:34 Und react.dev für die Empfehlungen zum Projektstart, die sich in den letzten Jahren spürbar verschoben haben. Wenn im Projektalltag Fragen auftauchen, erreichen Sie uns unter der Adresse auf der Folie. Vielen Dank für Ihre Aufmerksamkeit.