Dela via

Installera React på Windows-undersystem för Linux

Den här guiden beskriver hur du installerar React på en Linux-distribution (dvs. Ubuntu) som körs på Windows-undersystemet för Linux (WSL) med hjälp av vite-klientdelsverktyget.

Vi rekommenderar att du följer dessa instruktioner om du skapar en enkelsidessapp (SPA) som du planerar att använda Bash-kommandon och verktyg med, eller planerar att distribuera till en Linux-server eller använda Docker-containrar. Om du är helt ny på React och bara är intresserad av utbildning kan du överväga att installera med vite direkt i Windows.

Mer allmän information om React, beslut mellan React (webbappar), React Native (mobilappar) och React Native for Desktop (skrivbordsappar) finns i React-översikten.

Förutsättningar

  • Installera den senaste versionen av Windows 10 (version 1903+, Build 18362+) eller Windows 11
  • Installera Windows-undersystemet för Linux (WSL) inklusive en Linux-distribution (t.ex. Ubuntu) och kontrollera att det körs i WSL 2-läge. Du kan kontrollera detta genom att öppna PowerShell och ange: wsl -l -v
  • Installera Node.js på WSL 2: Dessa instruktioner använder Node Version Manager (nvm) för installation. Du behöver en ny version av NodeJS för att köra vite, samt en ny version av Node Package Manager (npm).

Viktigt!

Om du installerar en Linux-distribution med WSL skapas en katalog för lagring av filer: \\wsl\Ubuntu-20.04 (ersätt Ubuntu-20.04 med den Linux-distribution du använder). Om du vill öppna den här katalogen i Utforskaren i Windows öppnar du WSL-kommandoraden, väljer din hemkatalog med och cd ~anger sedan kommandot explorer.exe . Var noga med att inte installera NodeJS eller lagra filer som du kommer att arbeta med på den monterade C-enheten (/mnt/c/Users/yourname$). Om du gör det blir installationen och byggtiden avsevärt långsammare.

Installera React

Om du vill installera den fullständiga React-verktygskedjan på WSL rekommenderar vi att du använder vite.

  1. Öppna en WSL-kommandorad (dvs. Ubuntu).

  2. Skapa en ny projektmapp: mkdir ReactProjects och ange den katalogen: cd ReactProjects.

  3. Installera React med Vite:

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

  4. När du har installerat den ändrar du kataloger till din nya app ("my-react-app" eller vad du har valt att anropa den): cd my-react-app, installerar beroendena: npm install och startar sedan din lokala utvecklingsserver: npm run dev

    Det här kommandot startar Node.js-servern och startar ett nytt webbläsarfönster som visar din app. Du kan använda Ctrl + c för att sluta köra React-appen på kommandoraden.

Anmärkning

Vite inkluderar en byggpipeline för frontend med Babel, esbuild och Rollup, men hanterar inte backendlogik eller databaser. Om du vill skapa en serverrenderad webbplats med React som använder en Node.js backend rekommenderar vi att du installerar Next.jsi stället för den här Vite-installationen, som är avsedd mer för en-sidesappar (SPA). Du kanske också vill överväga att installera Gatsby om du vill skapa en statisk innehållsorienterad webbplats.

  1. När du är redo att distribuera webbappen till produktion kör du npm run build för att skapa en version av din app i mappen "dist". Du kan läsa mer i Distribuera en statisk webbplats.

Ytterligare resurser

  • Last updated on