Startseite / Artikel / React + Vite Einrichtungshandbuch (2026): Ihre erste funktionierende Anwendung, erklärt

ReactViteNode.jsnpmJavaScriptFrontend Development

React + Vite Einrichtungshandbuch (2026): Ihre erste funktionierende Anwendung, erklärt

Erklären Sie Schritt für Schritt die Installation von Node.js, npm, VS Code und Vite zur Erstellung einer React-Anwendung und zeigen Sie dabei auf, was jede dieser Tools im Inneren eigentlich tut.

1601 Wörter

„Der richtige Zeitpunkt, um Ihren ersten React-Komponenten zu erstellen, ist nicht direkt nach dem Anschauen von Tutorials – sondern erst, wenn Sie eine ordentliche Umgebung eingerichtet haben und tatsächlich verstehen, warum jedes Element vorhanden ist.“

In dem vorherigen Artikel haben wir uns angesehen, was React ist, warum es bei Facebook entwickelt wurde und wie es die Art und Weise verändert hat, wie Entwickler Webanwendungen erstellen.

Nun wechseln wir von Konzepten zu praktischer Arbeit.

Bevor Sie eine Komponente schreiben, benötigen Sie einen Arbeitsraum, der React ausführen kann, Ihre Änderungen sofort neu lädt und Sie bei der Weiterentwicklung Ihrer Anwendung unterstützt.

Zum Ende dieses Artikels werden Sie eine funktionierende React-Anwendung auf Ihrem eigenen Rechner haben und verstehen, was jede der Tools in der Einrichtung tatsächlich bewirkt.

Warum können wir React nicht einfach in einer HTML-Datei schreiben?

Anfänger stellen fast immer zuerst diese Frage.

React ist „nur JavaScript“, sollte da nicht eine einfache HTML-Datei ausreichen?

Technisch gesehen stimmt das in sehr begrenztem Maße.

Aber reale React-Projekte setzen auf Dinge wie:

  • JSX
  • ES Modules
  • Hot Module Replacement
  • Paketverwaltung
  • Bauoptimierung

Niemand dieser Elemente wird von Browsern nativ verstanden.

Deshalb verlassen sich Entwickler auf Tools, die den Code vor dem Erreichen des Browsers transformieren und vorbereiten.

Das ist ähnlich wie das Kochen eines Essens.

Rohstoffe werden nicht direkt aus dem Kühlschrank gegessen – sie müssen erst zubereitet werden.

Auch die Einrichtung eines React-Projekts folgt derselben Logik.

Die Tools, die wir installieren werden

Es gibt eine kleine Gruppe von Tools, auf die fast jeder React-Entwickler angewiesen ist, und wir werden sie alle in diesem Leitfaden installieren.

Jedes Tool löst ein spezifisches Problem im Workflow.

Sobald alles an seinem Platz ist, werden Sie kaum bemerken, dass sie im Hintergrund laufen.

Node.js verstehen

Eine häufige Fehlvorstellung ist, dass React selbst auf Node.js läuft.

Das ist nicht der Fall.

React wird im Browser ausgeführt, nicht in Node.

Node.js dient dazu, Sie bei der Erstellung der Anwendung zu unterstützen – nicht während die Anwendung für Endbenutzer läuft.

Es ermöglicht Ihnen Folgendes:

  • Bibliotheken zu installieren
  • Entwicklungsserver zu starten
  • Optimierte Produktionspakete zu erstellen
  • Projektabhängigkeiten zu verwalten

Ohne Node.js wäre es weitaus schwieriger, React zu installieren und zum Laufen zu bringen.

Was ist npm genau?

Die Installation von Node.js beinhaltet automatisch npm, die Abkürzung für Node Package Manager.

Bild, das zeigt, wie man eine neue Website von Grund auf erstellt und gleichzeitig mehrere Bibliotheken benötigt, wie zum Beispiel:

  • React
  • React Router
  • Axios
  • Tailwind CSS
  • Redux Toolkit

Anstatt jede dieser Bibliotheken manuell herunterzuladen, kümmert sich npm um die Installation über einen einzigen Befehl.

Zum Beispiel:

npm install axios

Das Ausführen dieses Befehls reicht aus – npm lädt das Paket herunter, integriert es in Ihr Projekt und überwacht, welche Version Sie verwenden.

Warum moderne React-Projekte Vite nutzen

Ältere Tutorials zeigen oft einen solchen Befehl, um ein Projekt aufzubauen:

npx create-react-app my-app

Über einen langen Zeitraum war das die gängige Methode.

Inzwischen hat sich die React-Community jedoch größtenteils auf Vite umgestellt.

Was hat zu diesem Wandel geführt?

Hauptsächlich der Wunsch nach einer schnelleren täglichen Entwicklungsarbeit.

Vite bietet:

  • Schnelle Projektinitialisierung
  • Sehr schnelles Hot Module Replacement (HMR)
  • Kleinere Größen der Produktionsversionen
  • Ganze einfachere Konfiguration
  • Bessere allgemeine Leistung

Für alle, die gerade React lernen, ist der Einstieg mit Vite die vernünftige Wahl.

Schritt 1: Node.js installieren

Holen Sie sich die aktuelle LTS (Long-Term Support)-Version von Node.js von deren offizieller Website.

Sobald es installiert ist, öffnen Sie ein Terminal, um zu überprüfen, ob die Installation erfolgreich war.

node -v

Die Ausgabe sollte wie folgt aussehen:

v24.x.x

Überprüfen Sie anschließend auch npm:

npm -v

Falls beide Befehle Versionszahlen zurückgeben, ist Ihre Maschine richtig eingerichtet.

Schritt 2: Visual Studio Code installieren

Technisch gesehen kann man React in jedem Editor schreiben, doch dank seiner Geschwindigkeit, seines Erweiterungsecosystems sowie seiner leistungsstarken JavaScript-Tools ist VS Code zur Standardwahl geworden.

VS Code-Erweiterungen, die jeder React-Entwickler installieren sollte

Die frühzeitige Installation einer kleinen Anzahl an Add-ons macht einen echten Unterschied für den täglichen Arbeitskomfort. Es lohnt sich, diese in Ihre Einrichtung aufzunehmen:

  • ESLint, um Probleme im Code frühzeitig zu erkennen
  • Prettier, für ein konsistentes Formatieren
  • Error Lens, um Fehler direkt im Code anzuzeigen
  • Auto Rename Tag, um übereinstimmende Tags synchron zu halten
  • Path Intellisense, zur automatischen Vervollständigung von Dateipfaden
  • GitLens, für umfangreichere Git-Informationen direkt im Editor
  • ES7+ React Snippets, für schnelles Erstellen von React-Boilerplate

Zusammen decken diese Erweiterungen Formatierung, frühzeitige Fehlererkennung, Autovervollständigung sowie allgemeine Produktivität ab.

Schritt 3: Erstellen Sie Ihr erstes React-Projekt

Öffnen Sie ein Terminalfenster und führen Sie aus:

npm create vite@latest

Es werden Ihnen einige Einrichtungsfragen gestellt:

Project Name:
react-beginners

Framework:
React

Variant:
JavaScript

Sobald die Erstellung abgeschlossen ist, wechseln Sie in das neue Projektverzeichnis:

cd react-beginners

Installieren Sie anschließend die Abhängigkeiten des Projekts:

npm install

Und schließlich starten Sie den Entwicklungsserver:

npm run dev

Die Ausgabe des Terminals wird ungefähr so aussehen:

Local: http://localhost:5173

Öffnen Sie diese Adresse in Ihrem Browser.

Ihre erste React-Anwendung ist jetzt online und läuft.

Verständnis der Projektstruktur

Ein frisch erstelltes React-Projekt kann auf den ersten Blick einschüchternd wirken, aber in der Praxis gibt es nur wenige Dateien, mit denen Sie regelmäßig arbeiten werden.

react-beginners/
│
├── public/
├── src/
│   ├── assets/
│   ├── App.jsx
│   ├── main.jsx
│
├── package.json
├── vite.config.js
└── node_modules/

src

Näherungsweise der gesamte Code, den Sie täglich schreiben, befindet sich in diesem Verzeichnis.

App.jsx

Betrachten Sie dies als die Wurzelkomponente Ihrer Anwendung.

Jede weitere Funktion, die Sie entwickeln, beginnt hier.

main.jsx

Dies ist die Datei, die Ihre React-Anwendung mit der eigentlichen Webseite verbindet.

Sie gibt React an, wo genau in der DOM-Struktur Ihre Anwendung dargestellt werden soll.

package.json

Hier finden Sie die Metadaten Ihres Projekts sowie seine Abhängigkeiten und die Skripte, die zum Ausführen oder Kompilieren verwendet werden.

node_modules

In diesem Verzeichnis befinden sich alle Pakete, auf die Ihr Projekt angewiesen ist.

Lassen Sie es unberührt – es gibt keinen Grund, etwas darin manuell zu ändern.

Ihre erste Änderung vornehmen

Öffnen Sie App.jsx und ersetzen Sie den Standardinhalt durch:

function App() {
  return (
    <div>
      <h1>Hello React 👋</h1>
      <p>My first React application is running!</p>
    </div>
  );
}

export default App;

Speichern Sie die Datei und beobachten Sie den Browser.

Haben Sie es mitbekommen? Die Seite hat sich von selbst aktualisiert, ohne dass eine manuelle Erneuerung nötig war.

Dieses Verhalten wird als Hot Module Replacement, kurz HMR, bezeichnet.

Kleine Bequemlichkeiten wie diese summieren sich und sparen im Laufe eines Projekts erhebliche Zeit.

Angular-Entwickler: Das Besondere

Falls Sie aus Angular kommen, werden Ihnen der allgemeine Arbeitsablauf vertraut vorkommen – nur ohne so viele Formalitäten.

React legt Wert auf Flexibilität und ermöglicht es Ihnen, Dinge auf Ihre eigene Weise zusammenzustellen, während Angular von Anfang an über mehr eingebaute Struktur verfügt.

Keiner der Ansätze ist objektiv überlegen – sie lösen das Problem einfach unterschiedlich.

Häufige Fehler bei Anfängern

Während Sie sich mit React vertraut machen, werden Sie wahrscheinlich auf einige wiederkehrende Probleme stoßen.

  • Vergessen, npm install auszuführen
  • Das Ausführen von Befehlen aus dem falschen Verzeichnis, außerhalb des Projektordners
  • Änderungen innerhalb von node_modules vornehmen
  • Arbeiten mit einer veralteten Node.js-Version
  • Das Schließen des Terminal-Fensters, während der Entwicklungsserver noch läuft

    • Sobald Sie diese Muster erkennen, sind sie leicht zu vermeiden.

    Was Sie gelernt haben

    Durch das Durchlesen dieses Artikels haben Sie Folgendes behandelt:

    • Die Gründe dafür, warum ein spezielles Entwicklungsumfeld für React notwendig ist
    • Was Node.js und npm tatsächlich leisten
    • Warum Vite zum Standardwerkzeug für die Erstellung von React-Projekten geworden ist
    • Die Schritte zur Erstellung und zum Ausführen Ihrer ersten React-Anwendung
    • Zur Bestimmung der Funktion jedes der Kernprojektdateien
    • Wie Hot Module Replacement die Art und Weise verändert, wie Sie am Code arbeiten

    Zu diesem Zeitpunkt haben Sie alles, was Sie benötigen, um mit dem Aufbau echter React-Anwendungen zu beginnen.

    Übungsaufgabe

    Vor dem Übergang zum nächsten Teil sollten Sie versuchen, diese Übungen durchzuführen:

    • Einen völlig neuen React-Projekt mit Vite erstellen.
    • Den Überschriftstext in App.jsx ändern.
    • Eine kurze Einleitung mit Ihrem eigenen Namen hinzufügen.
    • Die Textfarbe mithilfe von CSS anpassen.
    • Anhalten und den Entwicklungsserver selbst manuell neu starten.

    Durch das Ausprobieren dieser Schritte gelangen Sie am schnellsten dazu, sich mit der Toolchain sicher zu fühlen.

    Was kommt als Nächstes?

    Sobald Ihre Umgebung bereit ist, geht es im nächsten Schritt darum, sich mit einem der Kernkonzepte hinter React auseinanderzusetzen.

    Teil 3 befasst sich mit JSX – der Syntax, die HTML-ähnliche Markups direkt in Ihren JavaScript-Code integriert.

    Darunter fallen:

    • Was JSX tatsächlich ist
  • Die Gründe für die Verwendung von JSX bei React
  • Die Regeln, die JSX vorschreibt
  • Wie Ausdrücke in JSX funktionieren
  • Die Unterschiede zwischen HTML und JSX
  • Typische Fehler, in die Anfänger geraten
  • Methoden, um JSX sauber und lesbar zu halten

    • Sobald Sie diesen Artikel gelesen haben, sind Sie bereit, selbstverständlich eigene React-Komponenten zu schreiben.

    Zusätzliche Literatur

    Alle ArtikelBrief senden