Configurações do ambiente - React

Preparando o ambiente#

Configuração do seu ambiente. Teremos três etapas principais na seção "Instalação":

  • Node + NPM;
  • Yarn;
  • Visual Studio Code e configurações.

Node e NPM#

O primeiro passo é instalar o Node.js, que vem acompanhado do NPM.

Linux (Ubuntu/Debian)#

Para o Linux iremos utilizar o NodeSource, basta seguir esses passos:

  • Verifique se você possui o curl instalado rodando no terminal o comando:
curl --version

Caso ele retorne a versão, pode pular para o próximo passo. Caso não, basta rodar o comando:

sudo apt install curl
  • Com o curl instalado, execute o comando de instalação da versão LTS mais recente disponível:

    • Ubuntu

      curl -sL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
      sudo apt-get install -y nodejs
    • Debian (como root)

      curl -sL https://deb.nodesource.com/setup_lts.x | bash -
      apt-get install -y nodejs

      Feche o terminal e abra novamente para as alterações fazerem efeito.

  • Por fim, execute os seguintes comandos no terminal:

node -v
npm -v

Caso retorne as versões do Node e npm, sua instalação foi um sucesso.

Yarn#

Linux (Ubuntu/Debian)#

Para instalar o Yarn no Linux vamos começar configurando o repositório do Yarn executando:

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

Instale utilizando o seguinte comando:

sudo apt update && sudo apt install --no-install-recommends yarn

Adicione ao arquivo ~/.bashrc (ou ~/.zshrc caso você utilize o shell zsh) a seguinte linha:

export PATH="$PATH:`yarn global bin`"

Feche e abra o terminal novamente, em seguida rode o comando:

yarn --version

Caso retorne a versão do Yarn (acima de 1.0, abaixo de 2.0), a instalação ocorreu com sucesso.

Windows#

Para o Windows utilizaremos o gerenciador de pacotes Chocolatey, porém antes dos passos de instalação vamos falar brevemente sobre qual shell você deve usar.

  • CMD: também conhecido como Command Prompt, ele é um dos shells mais antigos da atualidade (foi construído para ser compatível com o MS-DOS) e, apesar da sua fama, hoje em dia tem sido cada vez menos utilizado.
  • Powershell: novo shell apresentado pela Microsoft por volta de 2005, ele apresenta diversas melhorias em relação ao CMD, tornando-o popular atualmente.

Escolhido o shell, vamos começar a instalação:

  • Busque no campo de busca do Windows por Windows Powershell, clique com o botão direito em cima do programa e escolha a opção Executar como administrador.
  • O Powershell trabalha com um esquema de autorizações (conhecido como Execution Policy) para execução de scripts e, por isso, precisamos verificar se o presente no sistema está compatível com o que o Chocolatey precisa. Execute o seguinte comando:
Get-ExecutionPolicy

Caso ele retorne Restricted, execute o comando:

Set-ExecutionPolicy RemoteSigned

E escolha a opção [A] Sim para Todos

Caso o comando acima apresente erro, tente usar:

Set-ExecutionPolicy Bypass -Scope Process

Verifique se alteração de permissão ocorreu com sucesso executando novamente o comando:

Get-ExecutionPolicy

Alterada a permissão, basta instalar o Chocolatey com o comando:

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

Caso o comando acima apresente um erro, verifique se a sua máquina atende às requisições mínimas

Windows 7+ / Windows Server 2003+ PowerShell v3+ .NET Framework 4.5+

Caso o erro apresentado seja Exceção ao definir "SecurityProtocol": "Não é possível converter o valor "3312", siga esse guia.

  • Após o fim da instalação, feche e abra o powershell como administrador novamente e execute:
choco -v

Caso ele retorne a versão do Chocolatey, a instalação foi um sucesso. Para finalizar, basta instalar a versão LTS mais recente do Node com o seguinte comando:

cinst nodejs-lts

E escolha a opção [A]ll - yes to all

Após o fim da instalação, feche e abra o powershell como administrador novamente e execute:

node -v
npm -v

Windows#

Para instalar o Yarn 1 no Windows siga os seguintes passos, execute o comando no Powershell (como admin):

cinst yarn

E escolha a opção [A]ll - yes to all.

Feche e abra o terminal novamente, em seguida rode o comando:

yarn --version

Caso retorne a versão do Yarn (acima de 1.0, abaixo de 2.0), a instalação ocorreu com sucesso.


Visual Studio Code#

Para instalar o editor de texto Visual Studio Code em qualquer um dos 3 sistemas operacionais, basta acessar o site, baixar e rodar o executável.

alt text

Com a instalação finalizada, abra o programa. Você deve se deparar com uma interface parecida com essa:

alt text