Partager via

Installer React sur le Sous-système Windows pour Linux

Ce guide décrit la configuration d’un environnement de développement React sur WSL (sous-système Windows pour Linux) à l’aide des outils front-end Vite .

WSL est recommandé si vous envisagez de déployer sur un serveur Linux, d’utiliser des conteneurs Docker ou d’utiliser des outils Bash. Si vous débutez avec React et que vous souhaitez commencer rapidement, envisagez d’installer React directement sur Windows à la place.

Pour obtenir de l’arrière-plan sur React et les différents scénarios ( applications web, applications mobiles (React Native) et applications de bureau natives (React Native for Desktop) – consultez la vue d’ensemble de React.

Prérequis

  • WSL 2 : Installez WSL avec une distribution Linux (Ubuntu recommandé) et vérifiez qu’il s’exécute en mode WSL 2 : wsl -l -v. Nécessite Windows 10 version 2004 ou ultérieure, ou Windows 11.
  • Node.js sur WSL 2 : installez Node.js à l’intérieur de votre distribution WSL à l’aide de nvm. N’utilisez pas la version installée par Windows de Node.js à l’intérieur de WSL.

Important

Stockez vos fichiers projet dans le système de fichiers WSL (par exemple, ~/projects), et non sur le lecteur Windows monté (/mnt/c/). Traverser la limite du système de fichiers ralentit considérablement les temps d’installation et de compilation.

Créer votre application React

  1. Ouvrez votre terminal WSL (par exemple, Ubuntu).

  2. Créez un dossier de projet et entrez-le :

    mkdir ~/ReactProjects
cd ~/ReactProjects

  3. Créez une application React à l’aide de Vite :

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

    Vite va créer un nouveau projet React dans le dossier my-react-app.

  4. Accédez au nouveau dossier d’application et installez les dépendances :

    cd my-react-app
npm install

  5. Démarrez le serveur de développement local :

    npm run dev

    Votre application sera disponible à l’adresse http://localhost:5173. Utilisez Ctrl+C pour arrêter le serveur.

  6. Lorsque vous êtes prêt à déployer, générez un bundle de production :

    npm run build

    La sortie est placée dans le dist dossier. Consultez Déploiement d’un site statique pour les options d’hébergement.

Remarque

Vite est idéal pour les applications à page unique (APU). Si vous avez besoin d’un rendu côté serveur ou d’un backend Node.js, envisagez Next.js à la place. Pour la génération de site statique, consultez Gatsby.

Ressources supplémentaires

  • Last updated on