Instalar o React diretamente no Windows

  • Artigo
  • 3 minutos para o fim da leitura

Este guia descreverá a instalação do React diretamente no Windows usando a cadeia de ferramentas create-react-app.

Recomendamos seguir estas instruções se você é iniciante no React e está apenas interessado em aprender a usá-lo. 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, recomendamos que você o instale com o create-react-app no WSL (Subsistema do Windows para Linux).

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 create-react-app, bem como uma versão recente do npm (Gerenciador de Pacotes do Node). Para obter os requisitos exatos de versão, confira o site do Create React App.

Criar seu aplicativo React

Para instalar a cadeia de ferramentas completa do React no WSL, recomendamos usar o create-react-app:

  1. Abra um terminal (prompt de comando do Windows ou PowerShell).

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

  3. Instale o React usando o create-react-app, uma ferramenta que instala todas as dependências para criar e executar um aplicativo React.js completo:

    npx create-react-app my-app

    Observação

    npx é o executor de pacote usado pelo npm para executar pacotes no lugar de uma instalação global. Basicamente, ele cria uma instalação temporária do React de modo que, a cada novo projeto, você esteja usando a versão mais recente do React (não qualquer versão atual no momento da execução da instalação global acima). O uso do executor de pacote NPX para executar um pacote também pode ajudar a reduzir a poluição da instalação de vários pacotes no computador.

  4. Primeiro, ele solicitará sua permissão para instalar temporariamente o create-react-app e os pacotes associados. Após a conclusão, altere os diretórios para o seu novo aplicativo ("my-app" ou o que você escolheu como nome): cd my-app.

  5. Inicie seu novo aplicativo React:

    npm start

    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 Create React App inclui um pipeline de build de front-end usando o Babel e o webpack, 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 create-react-app, que é mais voltado a aplicativos de página única. O ideal também será considerar a instalação do Gatsby se você quiser criar um site estático orientado ao conteúdo.

  6. Quando você estiver pronto para implantar seu aplicativo Web em produção, a execução de npm run build criará um build do aplicativo na pasta "build". Saiba mais no Guia do usuário do Create React App.

Recursos adicionais