Freigeben über

Installieren von React unter Windows-Subsystem für Linux

Dieser Leitfaden führt Sie durch das Einrichten einer React-Entwicklungsumgebung auf WSL (Windows-Subsystem für Linux) mithilfe der Vite-Frontend-Tools .

WSL wird empfohlen, wenn Sie beabsichtigen, auf einem Linux-Server bereitzustellen, Docker-Container zu verwenden oder mit bash-basierten Tools zu arbeiten. Wenn Sie noch nicht mit React arbeiten und einfach schnell beginnen möchten, erwägen Sie stattdessen, React direkt unter Windows zu installieren .

Hintergrundinformationen zu React und den verschiedenen Szenarien – Web-Apps, mobile Apps (React Native) und native Desktop-Apps (React Native for Desktop) – finden Sie in der React-Übersicht.

Voraussetzungen

  • WSL 2: Installieren Sie WSL mit einer Linux-Verteilung (Ubuntu empfohlen), und bestätigen Sie, dass sie im WSL 2-Modus ausgeführt wird: wsl -l -v. Erfordert Windows 10, Version 2004 oder höher, oder Windows 11.
  • Node.js auf WSL 2: Installieren Sie Node.js in Ihrer WSL-Verteilung mithilfe von NVM. Verwenden Sie nicht die von Windows installierte Version von Node.js in WSL.

Wichtig

Speichern Sie Ihre Projektdateien im WSL-Dateisystem (z. B. ~/projects), nicht auf dem bereitgestellten Windows-Laufwerk (/mnt/c/). Die Arbeit über die Dateisystemgrenze verlangsamt die Installation und Erstellungszeit erheblich.

Erstellen Ihrer React-App

  1. Öffnen Sie Ihr WSL-Terminal (z. B. Ubuntu).

  2. Erstellen Sie einen neuen Projektordner, und geben Sie ihn ein:

    mkdir ~/ReactProjects
cd ~/ReactProjects

  3. Erstellen Sie eine neue React-App mit Vite:

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

    Vite erstellt ein Gerüst für ein neues React-Projekt im my-react-app Ordner.

  4. Navigieren Sie zum neuen App-Ordner, und installieren Sie Abhängigkeiten:

    cd my-react-app
npm install

  5. Starten Sie den lokalen Entwicklungsserver:

    npm run dev

    Ihre App steht bereit unter http://localhost:5173. Verwenden Sie STRG+C , um den Server zu beenden.

  6. Wenn Sie bereit für die Bereitstellung sind, erstellen Sie ein Produktionspaket:

    npm run build

    Die Ausgabe wird im Ordner dist abgelegt. Siehe Bereitstellen einer statischen Website für Hostingoptionen.

Hinweis

Vite eignet sich ideal für Einzelseiten-Apps (SPAs). Wenn Sie serverseitiges Rendering oder ein Node.js Back-End benötigen, sollten Sie stattdessenNext.js in Betracht ziehen. Informationen zur Generierung statischer Websites finden Sie unter Gatsby.

Zusätzliche Ressourcen

  • Last updated on