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

  • Article

Ce guide vous aidera à installer React sur une distribution Linux (par exemple, Ubuntu) qui s’exécute sur le Sous-système Windows pour Linux (WSL) en utilisant l'ensemble d'outils front-end Vite.

Nous vous recommandons de suivre ces instructions si vous créez une application monopage (SPA) avec laquelle vous souhaitez utiliser des commandes ou des outils Bash et/ou que vous envisagez de déployer sur un serveur Linux ou que vous utilisez des conteneurs Docker. Si vous débutez avec React et que votre but est simplement d’apprendre, vous souhaiterez peut-être effectuer l’installation avec Vite directement sur Windows.

Pour obtenir des informations générales sur React et sur le choix entre React (applications web), React Native (applications mobiles) et React Native pour Windows (applications de bureau), consultez la Vue d’ensemble de React.

Prerequisites

  • Installer la dernière version de Windows 10 (version 1903+, Build 18362+) ou Windows 11
  • Installer le Sous-système Windows pour Linux (WSL), y compris une distribution Linux (comme Ubuntu) et s’assurer qu’elle s’exécute en mode WSL 2. Pour le vérifier, ouvrez PowerShell et entrez : wsl -l -v.
  • Installer Node.js sur WSL 2 : ces instructions utilisant Node Version Manager (nvm) pour l’installation, vous aurez besoin d’une version récente de NodeJS pour exécuter Vite ainsi que d’une version récente de Node Package Manager (npm).

Important

L’installation d’une distribution Linux avec WSL crée un répertoire pour le stockage des fichiers : \\wsl\Ubuntu-20.04 (remplacez Ubuntu-20.04 par la distribution Linux que vous utilisez). Pour ouvrir ce répertoire dans l’Explorateur de fichiers Windows, ouvrez votre ligne de commande WSL, sélectionnez votre répertoire de base en utilisant cd ~, puis entrez la commande explorer.exe . Veillez à ne pas installer NodeJS ou stocker les fichiers sur lesquels vous travaillerez sur le lecteur C monté (/mnt/c/Users/yourname$). Cela ralentit considérablement les temps d’installation et de génération.

Installer React

Pour installer l’ensemble de la chaîne d’outils React sur WSL, nous vous recommandons d’utiliser Vite :

  1. Ouvrez une ligne de commande WSL (par exemple, Ubuntu).

  2. Créez un dossier pour le nouveau projet : mkdir ReactProjects, puis accédez à ce répertoire : cd ReactProjects.

  3. Installez React en utilisant Vite :

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

  4. Après l'installation, modifiez les répertoires dans votre nouvelle application (« my-react-app » ou n'importe quel autre nom de votre choix) : cd my-react-app, installez les dépendances : npm install puis démarrez votre serveur de développement local : npm run dev

    Cette commande démarre le serveur Node.js et lance une nouvelle fenêtre de navigateur qui affiche votre application. Vous pouvez utiliser Ctrl+C pour arrêter l’exécution de l’application React dans la ligne de commande.

Remarque

Vite comprend un pipeline de build front-end utilisant Babel, esbuild et Rollup, mais ne gère pas les bases de données ou la logique back-end. Si vous cherchez à créer un site web rendu côté serveur avec React qui utilise un back-end Node.js, nous vous recommandons d’installer Next.js au lieu de recourir à cette installation Vite, davantage destinée aux applications monopages (single-page apps, SPA). Vous pouvez également envisager d’installer Gatsby si vous souhaitez créer un site web statique orienté contenu.

  1. Quand vous êtes prêt à déployer votre application web en production, exécutez npm run build pour créer une build de votre application dans le dossier « dist ». Vous pouvez en savoir plus sur le déploiement d’un site statique.

Ressources supplémentaires