Installation von React direkt unter Windows

  • Artikel

In diesem Leitfaden wird die Installation von React in einer Linux-Distribution (d. h. Ubuntu) erläutert, die auf dem Windows-Subsystem für Linux (WSL) mit dem vite-Frontend-Tool ausgeführt wird.

Es wird empfohlen diese Anweisungen zu befolgen, wenn Sie noch nicht mit React arbeiten und nur am Lernen interessiert sind. Wenn Sie eine Single-Page-App (SPA) erstellen, mit der Sie Bash-Befehle oder -Tools verwenden möchten und/oder die Bereitstellung auf einem Linux-Server planen, empfehlen wir, dass Sie mit vite unter Windows-Subsystem für Linux (WSL)installieren.

Weitere allgemeinere Informationen zu React, zur Entscheidung zwischen React (Web-Apps), React Native (mobile Apps) und React Native für Windows (Desktop-Apps), finden Sie in der React-Übersicht.

Erstellen Ihrer React-App

So installieren Sie die Create-React-App:

  1. Öffnen Sie ein Terminal (Windows-Eingabeaufforderung oder PowerShell).

  2. Erstellen Sie mit mkdir ReactProjects einen neuen Projektordner, und wechseln Sie mit cd ReactProjects in das Verzeichnis.

  3. Installieren Sie React mit vite:

    npm create vite@latest my-react-app -- --template react

  4. Ändern Sie nach der Installation die Verzeichnisse in Ihre neue App („my-react-app“ oder Ihren ausgewählten Namen): cd my-react-appInstallieren Sie die Abhängigkeiten: npm install, und starten Sie dann den lokalen Entwicklungsserver: npm run dev

    Mit diesem Befehl wird der Node.js Server gestartet und ein neues Browserfenster geöffnet, in dem Ihre App angezeigt wird. Sie können STRG+C verwenden, um die Ausführung der React-App in der Befehlszeile zu beenden.

Hinweis

Vite umfasst eine Front-End-Buildpipeline, die Babel, esbuild und Rollup verwendet, aber keine Backend-Logik oder Datenbanken verarbeitet. Wenn Sie eine vom Server übertragene Website mit React erstellen möchten, die ein Node.js-Back-End verwendet, empfehlen wir die Installation von Next.js anstelle der Vite-Installation, die eher für Single-Page-Apps (SPAs) vorgesehen ist. Sie sollten auch die Installation von Gatsby in Erwägung ziehen, wenn Sie eine statische inhaltsorientierte Website erstellen möchten.

  1. Wenn Sie bereit sind, Ihre Web-App in der Produktion bereitzustellen, erstellt die Ausführung von npm run build einen Build Ihrer App im Ordner „dist“. Weitere Informationen finden Sie unter Bereitstellen einer statischen Website.

Zusätzliche Ressourcen