Instalar o React no Subsistema do Windows para Linux

  • Artigo

Este guia descreverá como instalar o React em uma distribuição do Linux (por exemplo, Ubuntu) em execução no WSL (Subsistema do Windows para Linux) usando as ferramentas de front-end vite.

Recomendamos seguir estas instruções se você está criando um SPA (aplicativo de página única) com o qual deseja usar comandos ou ferramentas do Bash e/ou que pretende implantar em um servidor Linux ou no qual pretende usar contêineres do Docker. Se você é iniciante no React e tem interesse em aprender mais sobre ele, o ideal é considerar a instalação com o vite diretamente no Windows.

Para obter mais informações gerais sobre o React, decidir entre o React (aplicativos Web), o React Native (aplicativos móveis) e o React Native para Windows (aplicativos da área de trabalho), confira a visão geral do React.

Pré-requisitos

  • Instalar a última versão do Windows 10 (versão 1903 e posterior, build 18362 e posterior) ou o Windows 11
  • Instalar o WSL (Subsistema do Windows para Linux), incluindo uma distribuição do Linux (como o Ubuntu), e verificar se ele está sendo executado no modo WSL 2. Para verificar isso, abra o PowerShell e digite: wsl -l -v
  • Instalar o Node.js no WSL 2: essas instruções usam o nvm (Gerenciador de Versão do Node) para instalação. Você precisará ter uma versão recente do NodeJS para executar o vite, bem como uma versão recente do npm (Gerenciador de Pacotes do Node).

Importante

A instalação de uma distribuição do Linux com o WSL criará um diretório para armazenar os arquivos: \\wsl\Ubuntu-20.04 (substitua o Ubuntu-20.04 por qualquer distribuição do Linux que esteja usando). Para abrir esse diretório no Explorador de Arquivos do Windows, abra a linha de comando do WSL, selecione o diretório base usando cd ~ e insira o comando explorer.exe .. Tome cuidado para não instalar o NodeJS nem armazenar arquivos com os quais você trabalhará na unidade C montada (/mnt/c/Users/yourname$). Essa ação deixará a instalação e os tempos de build significativamente lentos.

Instalar o React

Para instalar a cadeia de ferramentas completa do React no WSL, recomendamos usar o vite.

  1. Abra uma linha de comando do WSL (ou seja, o Ubuntu).

  2. Crie uma pasta de projeto, mkdir ReactProjects, e insira este diretório: cd ReactProjects.

  3. Instale o React usando o vite:

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

  4. Uma vez instalado, altere os diretórios em seu novo aplicativo ("my-react-app" ou o que você escolheu chamá-lo): cd my-react-app, instale as dependências: npm install e inicie o servidor de desenvolvimento local: npm run dev

    Esse comando iniciará o servidor do Node.js e iniciará uma nova janela do navegador exibindo seu aplicativo. Use CTRL + C para interromper a execução do aplicativo React na linha de comando.

Observação

O Vite inclui um pipeline de build de front-end usando o Babel, esbuild e o Rollup, mas não trata da lógica nem dos bancos de dados de back-end. Se você procura criar um site renderizado pelo servidor com o React que use um back-end do Node.js, recomendamos instalar o Next.js em vez do Vite, que é mais voltado a aplicativos de página única (SPAs). O ideal também será considerar a instalação do Gatsby se você quiser criar um site estático orientado ao conteúdo.

  1. Quando você estiver pronto para implantar seu aplicativo Web em produção, a execução de npm run build para criar um build do aplicativo na pasta "dist". Você pode saber mais em Implantando um site estático.

Recursos adicionais