Partilhar via

Instalar o React no subsistema Windows para Linux

Este guia explica como configurar um ambiente de desenvolvimento React em WSL (Windows Subsystem for Linux) utilizando a ferramenta frontend Vite .

O WSL é recomendado se planeia implementar para um servidor Linux, usar containers Docker ou trabalhar com ferramentas baseadas em Bash. Se és novo no React e só queres começar rapidamente, considera instalar o React diretamente no Windows .

Para informações sobre o React e os diferentes cenários — aplicações web, aplicações móveis (React Native) e aplicações nativas de ambiente de trabalho (React Native for Desktop) — consulte a visão geral do React.

Pré-requisitos

  • WSL 2: Instale o WSL com uma distribuição Linux (recomendado pelo Ubuntu) e confirme que está a correr em modo WSL 2: wsl -l -v. Requer Windows 10 versão 2004 ou posterior, ou Windows 11.
  • Node.js no WSL 2: Instala Node.js dentro da tua distribuição WSL usando NVM. Não use a versão instalada no Windows do Node.js dentro do WSL.

Importante

Armazene os seus ficheiros de projeto dentro do sistema de ficheiros WSL (por exemplo, ~/projects), e não na unidade Windows montada (/mnt/c/). Trabalhar através do limite do sistema de ficheiros atrasa significativamente os tempos de instalação e compilação.

Crie a sua aplicação React

  1. Abra o seu terminal WSL (por exemplo, Ubuntu).

  2. Crie uma nova pasta de projeto e introduza-a:

    mkdir ~/ReactProjects
cd ~/ReactProjects

  3. Crie uma nova aplicação React usando o Vite:

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

    O Vite vai criar um novo projeto React na pasta my-react-app.

  4. Navegue até à nova pasta da aplicação e instale as dependências:

    cd my-react-app
npm install

  5. Inicie o servidor de desenvolvimento local:

    npm run dev

    A sua aplicação estará disponível em http://localhost:5173. Usa Ctrl+C para parar o servidor.

  6. Quando estiver pronto para implementar, constrói um pacote de produção:

    npm run build

    A saída é colocada na dist pasta. Consulte Implementação de um Site Estático para opções de alojamento.

Observação

O Vite é ideal para aplicações de página única (SPAs). Se precisares de renderização do lado do servidor ou de um backend Node.js, considera Next.js em vez disso. Para geração de um site web estático, veja Gatsby.

Recursos adicionais

  • Last updated on