Delen via

React installeren op windows-subsysteem voor Linux

In deze handleiding wordt uitgelegd hoe u React installeert op een Linux-distributie (bijvoorbeeld. Ubuntu) dat wordt uitgevoerd op het Windows-subsysteem voor Linux (WSL) met behulp van de vite front-endhulpprogramma's.

We raden u aan deze instructies te volgen als u een app met één pagina (SPA) maakt die u wilt gebruiken Bash-opdrachten of -hulpprogramma's met en/of wilt implementeren op een Linux-server of Docker-containers wilt gebruiken. Als u nieuw bent in React en alleen geïnteresseerd bent in leren, kunt u overwegen om rechtstreeks in Windows te installeren met vite.

Zie het React-overzicht voor meer algemene informatie over React, het kiezen tussen React (web-apps), React Native (mobiele apps) en React Native voor Desktop (desktop-apps).

Vereiste voorwaarden

  • Installeer de nieuwste versie van Windows 10 (versie 1903+, build 18362+) of Windows 11
  • Installeer het Windows-subsysteem voor Linux (WSL), inclusief een Linux-distributie (zoals Ubuntu) en zorg ervoor dat het wordt uitgevoerd in de WSL 2-modus. U kunt dit controleren door PowerShell te openen en het volgende in te voeren: wsl -l -v
  • Installeer Node.js op WSL 2: Deze instructies gebruiken Node Version Manager (nvm) voor installatie. U hebt een recente versie van NodeJS nodig om vite uit te voeren, evenals een recente versie van Node Package Manager (npm).

Belangrijk

Als u een Linux-distributie met WSL installeert, wordt er een map gemaakt voor het opslaan van bestanden: \\wsl\Ubuntu-20.04 (vervang Ubuntu-20.04 door elke Linux-distributie die u gebruikt). Als u deze map wilt openen in Windows Verkenner, opent u de WSL-opdrachtregel, selecteert u de basismap met behulp van cd ~en voert u de opdracht in explorer.exe . Zorg ervoor dat u NodeJS niet installeert of bestanden opslaat waarmee u werkt op het gekoppelde C-station (/mnt/c/Users/yourname$). Als u dit doet, worden de installatie- en buildtijden aanzienlijk vertraagd.

React installeren

Als u de volledige React-hulpprogrammaketen op WSL wilt installeren, raden we u aan vite te gebruiken.

  1. Open een WSL-commandoregel (bijvoorbeeld, Ubuntu).

  2. Maak een nieuwe projectmap: mkdir ReactProjects en voer die map in: cd ReactProjects.

  3. React installeren met behulp van Vite:

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

  4. Nadat u de app hebt geïnstalleerd, wijzigt u de mappen in uw nieuwe app ('my-react-app' of wat u ook hebt gekozen om deze aan te roepen): cd my-react-appinstalleert u de afhankelijkheden: npm install en start vervolgens de lokale ontwikkelserver: npm run dev

    Met deze opdracht wordt de Node.js server gestart en wordt een nieuw browservenster geopend met uw app. U kunt Ctrl + c gebruiken om te stoppen met het uitvoeren van de React-app in de opdrachtregel.

Opmerking

Vite bevat een front-end-build-pijplijn met behulp van Babel, esbuild en Rollup, maar verwerkt geen back-endlogica of databases. Als u een server-renderde website wilt bouwen met React die gebruikmaakt van een Node.js back-end, raden we u aan om Next.jste installeren in plaats van deze Vite-installatie, die meer is bedoeld voor apps met één pagina (SPA's). U kunt ook overwegen Gatsby te installeren als u een statische inhoudsgerichte website wilt bouwen.

  1. Wanneer u klaar bent om de webapp in productie te implementeren, voert u npm run build uit om een build van uw app te maken in de map 'dist'. Meer informatie vindt u in het implementeren van een statische site.

Aanvullende bronnen

  • Last updated on