Dela via

Installera React direkt i Windows

Den här guiden går igenom hur du installerar React direkt i Windows med hjälp av vite-klientdelsverktyget.

Vi rekommenderar att du följer dessa instruktioner om du är nybörjare på React och bara är intresserad av lärande. Om du skapar en enkeltsidsapplikation (SPA) som du vill använda Bash-kommandon eller verktyg med och/eller planerar att distribuera till en Linux-server rekommenderar vi att du installerar med vite i Windows Subsystem för Linux (WSL).

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

Skapa din React-app

Så här installerar du Create React App:

  1. Öppna en terminal (Windows-kommandotolken eller PowerShell).

  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