Installieren von React unter Windows-Subsystem für Linux

  • 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 eine Single-Page-App (SPA) erstellen, die Sie mit Bash-Befehlen oder -Tools auf einem Linux-Server bereitstellen oder Docker-Container verwenden möchten. Wenn Sie ganz neu bei React sind und nur daran interessiert sind, zu lernen, sollten Sie die Installation mit vite direkt unter Windows in Betracht ziehen.

Allgemeine Informationen zu React finden Sie in der React-Übersicht, bei der Entscheidung zwischen React (Web-Apps), React Native (mobile Apps) und React Native for Desktop (Desktop-Apps).

Voraussetzungen

  • Installieren Sie die neueste Version von Windows 10 (Version 1903 und höher, Build 18362 und höher) oder Windows 11.
  • Installieren Sie Windows-Subsystem für Linux (WSL), einschließlich einer Linux-Distribution (wie Ubuntu), und stellen Sie sicher, dass sie im WSL 2-Modus ausgeführt wird. Sie können dies überprüfen, indem Sie PowerShell öffnen und Folgendes eingeben: wsl -l -v.
  • Installieren Sie Node.js unter WSL 2: In diesen Anweisungen wird der Node Versions-Manager (NVM) für die Installation verwendet. Sie benötigen eine aktuelle Version von NodeJS, um vite auszuführen, sowie eine aktuelle Version von Node Paket-Manager (NPM).

Wichtig

Wenn Sie eine Linux-Distribution mit WSL installieren, wird ein Verzeichnis zum Speichern von Dateien erstellt: \\wsl\Ubuntu-20.04 (Ersetzen Sie Ubuntu-20.04 durch die Linux-Distribution, die Sie verwenden). Um dieses Verzeichnis im Windows-Datei-Explorer zu öffnen, öffnen Sie die WSL-Befehlszeile, wählen Sie Ihr Basisverzeichnis mit cd ~ aus, und geben Sie dann den Befehl explorer.exe . ein. Achten Sie darauf, NodeJS nicht zu installieren oder Dateien zu speichern, mit denen Sie auf dem eingebundenen Laufwerk C arbeiten werden (/mnt/c/Users/yourname$). Dadurch werden die Installations- und Buildzeiten erheblich verlangsamt.

Installieren von React

Um die vollständige React-Toolkette unter WSL zu installieren, empfehlen wir die Verwendung von vite.

  1. Öffnen Sie eine WSL-Befehlszeile (d. h. Ubuntu).

  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