Condividi tramite

Installare React nel sottosistema Windows per Linux

  • Articolo

Questa guida illustra come installare React in una distribuzione Linux (ad es. Ubuntu) in esecuzione nel sottosistema Windows per Linux (WSL) usando gli strumenti front-end vite.

È consigliabile seguire queste istruzioni se si crea un'app a pagina singola (SPA) per la quale si intendono utilizzare i comandi o gli strumenti Bash e/o si prevede di eseguirne la distribuzione in un server Linux o usare contenitori Docker. Se non si ha familiarità con React e si è interessati solo all'apprendimento, è consigliabile prendere in considerazione l'installazione con vite direttamente in Windows.

Per informazioni più generali su React, decidere tra React (app Web), React Native (app per dispositivi mobili) e React Native for Desktop (app desktop), vedere la panoramica di React.

Prerequisiti

  • Installare la versione più recente di Windows 10 (versione 1903+, Build 18362+) o Windows 11
  • Installare il sottosistema Windows per Linux (WSL), inclusa una distribuzione Linux (ad esempio Ubuntu) e assicurarsi che sia in esecuzione in modalità WSL 2. Puoi verificarlo aprendo PowerShell e immettendo: wsl -l -v
  • Installare Node.js in WSL 2: queste istruzioni usano Node Version Manager (nvm) per l'installazione, è necessaria una versione recente di NodeJS per eseguire vite, nonché una versione recente di Node Gestione pacchetti (npm).

Importante

L'installazione di una distribuzione Linux con WSL creerà una directory per l'archiviazione dei file: \\wsl\Ubuntu-20.04 (sostituire Ubuntu-20.04 con qualsiasi distribuzione Linux in uso). Per aprire questa directory in Esplora file di Windows, aprire la riga di comando WSL, selezionare la home directory usando cd ~, quindi immettere il comando explorer.exe . Prestare attenzione a non installare NodeJS o archiviare i file con cui si lavorerà sull'unità C montata (/mnt/c/Users/yourname$). Questa operazione rallenta notevolmente i tempi di installazione e compilazione.

Installare React

Per installare la toolchain React completa in WSL, è consigliabile usare vite.

  1. Aprire una riga di comando WSL (ad esempio Ubuntu).

  2. Crea una nuova cartella di progetto: mkdir ReactProjects e passa alla directory in questione: cd ReactProjects.

  3. Installare React utilizzando vite:

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

  4. Dopo l'installazione, modificare le directory nella nuova app ("my-react-app" o qualsiasi altro nome si scelga di darle): cd my-react-app, installare le dipendenze: npm install e quindi avviare il server di sviluppo locale: npm run dev

    Questo comando avvierà il server Node.js e aprirà una nuova finestra del browser dove verrà visualizzata l'app. È possibile usare CTRL+c per interrompere l'esecuzione dell'app React nella riga di comando.

Nota

Vite include una pipeline di compilazione front-end attraverso l’impiego di Babel, esbuild e Rollup, ma non gestisce la logica back-end o i database. Se si sta cercando di creare un sito Web di cui è stato eseguito il rendering del server con React, che usa un back-end Node.js, è consigliabile installare Next.js anziché Vite, installazione che privilegia le app a pagina singola (single-page apps, SPA). Inoltre, se si vuole creare un sito Web statico orientato ai contenuti, è possibile prendere in considerazione l'installazione di Gatsby.

  1. Quando si è pronti per distribuire l'app Web in ambito produttivo, eseguire npm run build per creare una build dell'app nella cartella “dist”. Per altre informazioni, vedere Distribuzione di un sito statico.

Risorse aggiuntive