Condividi tramite

Installare React nel sottosistema Windows per Linux

Questa guida illustra come configurare un ambiente di sviluppo React in WSL (sottosistema Windows per Linux) usando gli strumenti front-end Vite .

WSL è consigliato se si prevede di eseguire la distribuzione in un server Linux, usare contenitori Docker o usare gli strumenti basati su Bash. Se non si ha familiarità con React e si vuole iniziare rapidamente, è consigliabile installare React direttamente in Windows .

Per informazioni generali su React e sui diversi scenari, ad esempio app Web, app per dispositivi mobili (React Native) e app desktop native (React Native for Desktop), vedere la panoramica di React.

Prerequisiti

  • WSL 2: Installare WSL con una distribuzione Linux (ubuntu consigliata) e verificare che sia in esecuzione in modalità WSL 2: wsl -l -v. Richiede Windows 10 versione 2004 o successiva o Windows 11.
  • Node.js in WSL 2: installare Node.js all'interno della distribuzione WSL usando nvm. Non usare la versione installata di Windows di Node.js all'interno di WSL.

Importante

Archiviare i file di progetto all'interno del file system WSL (ad esempio, ~/projects), non nell'unità Windows montata (/mnt/c/). Il funzionamento attraverso il limite del file system rallenta significativamente i tempi di installazione e compilazione.

Creare l'app React

  1. Aprire il terminale WSL ,ad esempio Ubuntu.

  2. Creare una nuova cartella del progetto e immetterla:

    mkdir ~/ReactProjects
cd ~/ReactProjects

  3. Creare una nuova app React usando Vite:

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

    Vite configurerà un nuovo progetto React nella cartella my-react-app.

  4. Passare alla nuova cartella dell'app e installare le dipendenze:

    cd my-react-app
npm install

  5. Avviare il server di sviluppo locale:

    npm run dev

    L'app sarà disponibile all'indirizzo http://localhost:5173. Usare CTRL+C per arrestare il server.

  6. Quando si è pronti per la distribuzione, compilare un bundle di produzione:

    npm run build

    L'output viene inserito nella dist cartella . Vedere Distribuzione di un sito statico per le opzioni di hosting.

Nota

Vite è ideale per le app a pagina singola (SPA). Se hai bisogno di eseguire il rendering sul lato server o di un backend per Node.js, prendi in considerazione l'adozione di Next.js. Per la generazione di siti statici, vedere Gatsby.

Risorse aggiuntive

  • Last updated on