Compartilhar via

Instalar o React no Subsistema do Windows para Linux

Este guia explica como configurar um ambiente de desenvolvimento do React no WSL (Subsistema do Windows para Linux) usando as ferramentas de front-end do Vite .

O WSL é recomendado se você planeja implantar em um servidor Linux, usar contêineres do Docker ou trabalhar com ferramentas baseadas em Bash. Se você for novo no React e quiser apenas começar rapidamente, considere instalar o React diretamente no Windows .

Para obter informações sobre o React e os diferentes cenários – aplicativos Web, aplicativos móveis (React Native) e aplicativos nativos da área de trabalho (React Native for Desktop) – consulte a visão geral do React.

Pré-requisitos

  • WSL 2: instale o WSL com uma distribuição do Linux (Ubuntu recomendado) e confirme se ele está em execução no modo WSL 2: wsl -l -v. Requer o Windows 10 versão 2004 ou posterior ou o Windows 11.
  • Node.js no WSL 2: instale Node.js dentro da distribuição do WSL usando nvm. Não use a versão instalada pelo Windows do Node.js dentro do WSL.

Importante

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

Criar seu aplicativo React

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

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

    mkdir ~/ReactProjects
cd ~/ReactProjects

  3. Crie um novo aplicativo React usando o Vite:

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

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

  4. Navegue até a nova pasta do aplicativo e instale dependências:

    cd my-react-app
npm install

  5. Inicie o servidor de desenvolvimento local:

    npm run dev

    Seu aplicativo estará disponível em http://localhost:5173. Use Ctrl+C para interromper o servidor.

  6. Quando você estiver pronto para implantar, crie um pacote de produção:

    npm run build

    A saída é colocada na pasta dist. Consulte a implantação de um site estático para opções de hospedagem.

Observação

O Vite é ideal para SPAs (aplicativos de página única). Se você precisar de renderização do lado do servidor ou de um back-end Node.js, considere Next.js em vez disso. Para a geração de sites estáticos, consulte Gatsby.

Recursos adicionais

  • Last updated on