Tutorials

React JS in Visual Studio Code einrichten und starten: Schritt-für-Schritt-Anleitung

Melden

In diesem Tutorial erfährst du, wie du eine React JS-Anwendung einrichtest, in Visual Studio Code (VS Code) öffnest und im Browser startest.

1. Voraussetzungen installieren

React selbst ist ein JavaScript-Framework. Um es lokal zu entwickeln und auszuführen, benötigst du zwei grundlegende Programme auf deinem Computer:

  1. Visual Studio Code: Falls noch nicht vorhanden, lade den Editor von der offiziellen Website (code.visualstudio.com) herunter und installiere ihn.
  2. Node.js (inklusive npm): React benötigt die JavaScript-Laufzeitumgebung Node.js sowie den Paketmanager npm.
    • Gehe auf nodejs.org und lade die empfohlene LTS-Version herunter.
    • Führe die Installation mit den Standardeinstellungen durch.

Überprüfung: Öffne dein Terminal (Eingabeaufforderung / PowerShell unter Windows oder das Terminal auf Mac/Linux) und tippe folgende Befehle ein, um sicherzustellen, dass alles installiert ist:

node -v
npm -v

Werden Versionsnummern angezeigt, ist alles bereit.

2. React-Projekt erstellen

Der modernste, schnellste und empfohlene Weg, ein React-Projekt zu erstellen, ist die Verwendung des Build-Tools Vite.

  1. Öffne dein Terminal.
  2. Navigiere in den Ordner, in dem dein Projekt gespeichert werden soll (z. B. cd Desktop).
  3. Führe folgenden Befehl aus, um eine neue React-App zu erstellen:
npm create vite@latest mein-react-app -- --template react

(Ersetze mein-react-app durch den gewünschten Namen deines Projekts).

3. Das Projekt in VS Code öffnen

Nachdem die Dateien generiert wurden, öffnest du das Projekt in Visual Studio Code:

  1. Wechsle im Terminal in den neu erstellten Projektordner:
    cd mein-react-app
  2. Öffne den Ordner direkt in VS Code mit dem Befehl:
    code .

    (Alternativ: Öffne VS Code manuell, klicke auf Datei > Ordner öffnen... und wähle den Ordner mein-react-app aus).

4. Abhängigkeiten installieren

Das Grundgerüst steht, aber die React-Bibliotheken müssen noch final in den Ordner geladen werden.

  1. Öffne das integrierte Terminal in VS Code über das Menü: Terminal > Neues Terminal (Tastenkürzel: Strg + ö bzw. Strg + ~ oder Cmd + ~ auf dem Mac).
  2. Gib folgenden Befehl ein:
npm install

Dieser Befehl lädt React und alle benötigten Module in den Ordner node_modules.

5. React-App starten

Jetzt ist die Anwendung bereit, lokal ausgeführt zu werden.

  1. Gib im integrierten Terminal folgenden Befehl ein:
npm run dev
  1. Im Terminal wird dir eine lokale Web-Adresse angezeigt (meistens http://localhost:5173).
  2. Klicke mit gedrückter Strg-Taste (oder Cmd-Taste) auf den Link oder kopiere ihn in deinen Browser.

Glückwunsch! Deine React-App läuft nun lokal auf deinem Computer.

6. Erste Änderungen vornehmen

  1. Navigiere in VS Code auf der linken Seite im Datei-Explorer zum Ordner src.
  2. Öffne die Datei App.jsx.
  3. Verändere den darin enthaltenen Text (z. B. eine Überschrift wie <h1>Hallo Welt!</h1>).
  4. Speichere die Datei (Strg + S bzw. Cmd + S).
  5. Dank Hot Module Reloading (HMR) aktualisiert sich die Seite im Browser sofort automatisch, ohne dass du sie neu laden musst.

Nützliche VS Code-Erweiterungen (Empfehlung)

Um dir die Arbeit mit React in VS Code zu erleichtern, öffne den Erweiterungs-Tab (links das Symbol mit den vier Quadraten) und installiere folgende Erweiterungen:

  • ES7+ React/Redux/React-Native snippets: Ermöglicht das schnelle Generieren von React-Komponenten über Tastenkürzel (z. B. rfce eingeben und Tab drücken).
  • Prettier - Code formatter: Formatiert deinen Quellcode automatisch sauber und einheitlich bei jedem Speichern.
0