Einrichtung einer React-Entwicklungsumgebung leicht gemacht

Die ersten Schritte in der Webentwicklung mit React können eine spannende Herausforderung sein. Du bist hier, weil du lernen möchtest, wie du schnell und effizient deine Entwicklungsumgebung einrichtest und dein erstes Projekt startest. Diese Anleitung führt dich durch die Schritte, die notwendig sind, um eine React-App mit Vite als Build-Tool zu erstellen.

Wichtigste Erkenntnisse

Um eine React-Entwicklungsumgebung einzurichten, benötigst du Visual Studio Code, Node.js sowie NPM. Mit den richtigen Befehlen und Tools kannst du in kürzester Zeit deine erste React-App erstellen und im Browser anzeigen.

Schritt-für-Schritt-Anleitung

Setup der Entwicklungsumgebung

Bevor du mit der eigentlichen Entwicklung beginnst, musst du sicherstellen, dass du über die richtigen Tools verfügst. Als Erstes solltest du Visual Studio Code installieren. Es ist eine beliebte und kostenlose Entwicklungsumgebung von Microsoft, die speziell für JavaScript-Entwicklung geeignet ist. Um Visual Studio Code herunterzuladen, besuchst du die offizielle Website und folgst den Anweisungen für den Download und die Installation.

Zusätzlich zu Visual Studio Code benötigst du Node.js, das die JavaScript-Laufzeitumgebung sowie NPM, den Package Manager, bereitstellt. Du kannst Node.js von der Node.js Website herunterladen. Klicke auf die Download-Seite und wähle die LTS-Version (Long-Term Support), um eine stabile und bewährte Version zu erhalten.

Installation und Überprüfung von Node.js und NPM

Nachdem du Node.js installiert hast, solltest du überprüfen, ob alles korrekt installiert wurde. Öffne dazu ein Terminal. Du kannst dies direkt in Visual Studio Code tun, indem du auf „Terminal“ und dann auf „Neues Terminal“ gehst. Gib im Terminal den Befehl npm -v ein. Wenn die Versionsnummer nicht angezeigt wird, hast du möglicherweise ein Problem mit der Installation.

Du solltest auch sicherstellen, dass Node.js ordnungsgemäß funktioniert. Dies kannst du tun, indem du den Befehl node -v in das Terminal eingibst. Beide Befehle sollten die installierte Version von NPM und Node.js zurückgeben.

Erstellung des neuen Projekts mit Vite

Der nächste Schritt besteht darin, ein neues Projekt zu erstellen. Dafür verwendest du npm create vite, gefolgt von dem Namen deiner App. In diesem Beispiel arbeiten wir mit einer „To-Do App“. Dies löst einen Wizard aus, der dir verschiedene Optionen anbietet. Du wirst gefragt, ob du React oder ein anderes Framework verwenden willst. Wähle „React“ aus.

Daraufhin wirst du auch gefragt, ob du React mit TypeScript verwenden möchtest. Für den Anfang ist es sinnvoller, ohne TypeScript zu arbeiten, daher wähle die Standardoption „React“.

Wechsel zum Projektverzeichnis

Nachdem das Projekt erfolgreich erstellt wurde, wechsle in das neu erstellte Verzeichnis deiner App. Das erfolgt mit dem Befehl cd todo-app. Dort angekommen, musst du die benötigten Pakete installieren. Gebe den Befehl npm install in das Terminal ein. Dies installiert alle benötigten Abhängigkeiten, einschließlich React.

Starten des Entwicklungsservers

Jetzt kommt der spannende Teil: Du kannst den Entwicklungsserver starten! Gebe den Befehl npm run dev ein. Dies startet den Entwicklungsserver von Vite, und du erhältst eine URL, über die du deine App im Browser aufrufen kannst.

Öffne einen aktuellen Webbrowser und gebe die angegebene Adresse ein. Du solltest eine einfache Webseite mit einem drehenden Logo und etwas Text sehen, sowie einen Button, der einen Zähler anzeigt.

Anpassungen der App

Um dir einen ersten Eindruck von der Funktionalität zu verschaffen, kannst du kleine Anpassungen an deiner App vornehmen. Öffne die Datei src/main.jsx und ändere den Text im App-Komponenten. Speichere die Datei und beobachte, wie die Änderungen sofort im Browser aktualisiert werden, ohne die Seite neu laden zu müssen. Das zeigt dir, wie effizient das Hot Reloading in Vite funktioniert – eine ausgezeichnete Funktion für ein schnelles Feedback während der Entwicklung.

Beachte, dass der Zählerstand intakt bleibt, auch wenn der Text aktualisiert wird. Das ist eine der Stärken von React: der Zustand bleibt, auch wenn die Benutzeroberfläche aktualisiert wird.

Zusammenfassung

Du hast erfolgreich deine Entwicklungsumgebung eingerichtet, Node.js und NPM installiert, ein neues React-Projekt erstellt und es in deinem Browser zum Laufen gebracht. Die Grundlagen der Einrichtung einer React-App mit Vite sind damit gelegt, und du kannst nun mit deiner ersten Anwendung beginnen.