Delen via

React installeren op windows-subsysteem voor Linux

In deze handleiding wordt uitgelegd hoe u een React-ontwikkelomgeving instelt op WSL (Windows-subsysteem voor Linux) met behulp van de vite-front-endhulpprogramma's.

WSL wordt aanbevolen als u van plan bent om te implementeren op een Linux-server, Docker-containers te gebruiken of met hulpprogramma's op basis van Bash te werken. Als u nieuw bent bij React en alleen snel aan de slag wilt gaan, kunt u in plaats daarvan React rechtstreeks installeren in Windows .

Zie het React-overzicht voor achtergrondinformatie over React en de verschillende scenario's, web-apps, mobiele apps (React Native) en systeemeigen bureaublad-apps (React Native voor Desktop).

Vereiste voorwaarden

  • WSL 2: Installeer WSL met een Linux-distributie (Ubuntu aanbevolen) en controleer of deze wordt uitgevoerd in de WSL 2-modus: wsl -l -v. Vereist Windows 10 versie 2004 of hoger of Windows 11.
  • Node.js op WSL 2: installeer Node.js in uw WSL-distributie met behulp van nvm. Gebruik niet de windows-geïnstalleerde versie van Node.js in WSL.

Belangrijk

Sla uw projectbestanden op in het WSL-bestandssysteem (bijvoorbeeld ~/projects), niet op het gekoppelde Windows-station (/mnt/c/). Het werken binnen de grenzen van het bestandssysteem vertraagt de installatie- en buildtijden aanzienlijk.

Uw React-app maken

  1. Open uw WSL-terminal (bijvoorbeeld Ubuntu).

  2. Maak een nieuwe projectmap en voer deze in:

    mkdir ~/ReactProjects
cd ~/ReactProjects

  3. Maak een nieuwe React-app met behulp van Vite:

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

    Vite zal een nieuw React-project in de my-react-app map maken.

  4. Navigeer naar de nieuwe map voor de applicatie en installeer afhankelijkheden.

    cd my-react-app
npm install

  5. Start de lokale ontwikkelserver:

    npm run dev

    Uw app is beschikbaar op http://localhost:5173. Gebruik Ctrl+C om de server te stoppen.

  6. Wanneer u klaar bent om te implementeren, bouwt u een productiebundel:

    npm run build

    De uitvoer wordt in de dist map geplaatst. Zie Een statische site implementeren voor hostingopties.

Opmerking

Vite is ideaal voor apps met één pagina (SPA's). Als u server-side rendering of een Node.js back-end nodig hebt, kunt u in plaats daarvan Next.js overwegen. Zie Gatsby voor het genereren van statische sites.

Aanvullende bronnen

  • Last updated on