Dela via

Installera React på Windows-undersystem för Linux

Den här guiden beskriver hur du konfigurerar en React-utvecklingsmiljö på WSL (Windows-undersystem för Linux) med hjälp av Vite-klientdelsverktyget.

WSL rekommenderas om du planerar att distribuera till en Linux-server, använda Docker-containrar eller arbeta med Bash-baserade verktyg. Om du är nybörjare på React och bara vill komma igång snabbt kan du installera React direkt i Windows i stället.

Bakgrund om React och de olika scenarierna – webbappar, mobilappar (React Native) och interna skrivbordsappar (React Native for Desktop) – finns i Översikt över React.

Förutsättningar

  • WSL 2: Installera WSL med en Linux-distribution (rekommenderas Ubuntu) och bekräfta att den körs i WSL 2-läge: wsl -l -v. Kräver Windows 10 version 2004 eller senare, eller Windows 11.
  • Node.js på WSL 2: Installera Node.js i WSL-distributionen med nvm. Använd inte den Windows-installerade versionen av Node.js i WSL.

Viktigt!

Lagra dina projektfiler i WSL-filsystemet (t.ex. ~/projects), inte på den monterade Windows-enheten (/mnt/c/). Att arbeta över filsystemgränsen gör installationen och byggtiden avsevärt långsammare.

Skapa din React-app

  1. Öppna WSL-terminalen (t.ex. Ubuntu).

  2. Skapa en ny projektmapp och ange den:

    mkdir ~/ReactProjects
cd ~/ReactProjects

  3. Skapa en ny React-app med Vite:

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

    Vite skapar ett nytt React-projekt i my-react-app mappen .

  4. Navigera till den nya appmappen och installera beroenden:

    cd my-react-app
npm install

  5. Starta den lokala utvecklingsservern:

    npm run dev

    Appen kommer att vara tillgänglig på http://localhost:5173. Använd Ctrl+C för att stoppa servern.

  6. När du är redo att distribuera skapar du ett produktionspaket:

    npm run build

    Utdata placeras i dist mappen. Se Distribuera en statisk webbplats för värdalternativ.

Anmärkning

Vite är idealiskt för ensidesapplikationer (SPA). Om du behöver rendering på serversidan eller en Node.js serverdel bör du överväga Next.js i stället. Information om generering av statiska webbplatser finns i Gatsby.

Ytterligare resurser

  • Last updated on