Partilhar via

Instalar o React no subsistema Windows para Linux

Este guia vai guiar pela instalação do React numa distribuição Linux (ou seja, Ubuntu) a correr no Subsistema Windows para Linux (WSL) usando a ferramenta de frontend vite.

Recomendamos seguir estas instruções se você estiver criando um aplicativo de página única (SPA) com o qual gostaria de usar comandos ou ferramentas Bash e/ou planeja implantar em um servidor Linux ou usar contêineres do Docker. Se você é novo no React e apenas interessado em aprender, você pode querer considerar a instalação com vite diretamente no Windows.

Para obter mais informações gerais sobre o React, decidindo entre o React (aplicativos Web), o React Native (aplicativos móveis) e o React Native for Desktop (aplicativos de desktop), consulte a Visão geral do React.

Pré-requisitos

  • Instale a versão mais recente do Windows 10 (Versão 1903+, Build 18362+) ou Windows 11
  • Instale o Windows Subsystem for Linux (WSL), incluindo uma distribuição Linux (como o Ubuntu) e certifique-se de que está a ser executado no modo WSL 2. Você pode verificar isso abrindo o PowerShell e digitando: wsl -l -v
  • Instalar Node.js no WSL 2: Estas instruções usam o Node Version Manager (nvm) para instalação, você precisará de uma versão recente do NodeJS para executar o vite, bem como uma versão recente do Node Package Manager (npm).

Importante

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

Instalar o React

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

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

  2. Crie uma nova pasta de projeto: mkdir ReactProjects e digite esse diretório: cd ReactProjects.

  3. Instale o React usando vite :

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

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

    Esse comando iniciará o servidor Node.js e iniciará uma nova janela do navegador exibindo seu aplicativo. Você pode usar Ctrl + c para parar de executar o aplicativo React em sua linha de comando.

Observação

O Vite inclui um pipeline de construção de frontend usando Babel, esbuild e Rollup, mas não lida com lógica de back-end ou bancos de dados. Se você estiver procurando criar um site renderizado em servidor com o React que usa um back-end Node.js, recomendamos instalar Next.js, em vez desta instalação Vite, que se destina mais a aplicativos de página única (SPAs). Você também pode considerar instalar o Gatsby se quiser construir um site estático orientado a conteúdo.

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

Recursos adicionais