Como Criar Variável De Ambiente React

Antes de mais nada, essa feature está disponível a partir da versão 0.5.0 do react-scripts

Uma excelente prática enquanto estamos desenvolvendo é que nosso sistema nunca tenha estaticamente no código URLs e endereços, o famoso hard coded.
É muito aconselhável que tenhamos essas informações em um arquivo de variáveis

Para isso, neste post irei mostrar como podemos armazenas esses informações dentro de um arquivo chamado .env

O que é .ENV?

Para começar, devemos criar um arquivo na raiz do seu projeto, chamado .env.
Neste arquivo, definiremos as variáveis que iremos utilizar para nosso desenvolvimento

Com o arquivo criado, podemos começar definir nossas variáveis, sempre se atentando a um detalhe em específico:

Todas nossas variáveis devem iniciar com REACT_APP_ para que o React entenda ela como uma variável de ambiente

Feito isso, olha como ficaria nosso arquivo:

REACT_APP_BASE_URL=https://myendpoint.com/api

E como podemos usar essas variáveis? Simples! Só usar! ahahaha

render() {
  return (
    <div>
      <small>Endereço da aplicação <b>{process.env.REACT_APP_BASE_URL}</b> mode.</small>
    </div>
  );
}

Agora quando rodarmos nosso projeto, ele automaticamente reconhece nossas variáveis de ambiente e adiciona no nosso código React!

Sempre que atualizar uma variável ou o arquivo em si, é necessário reiniciar a aplicação!

Muito simples não é mesmo?