Como Alterar a Porta Padrão do React

Quando um aplicativo React é iniciado, por padrão ele utiliza o endereço http://localhost:3000/, mas durante o desenvolvimento Full Stack, geralmente é utilizado a Porta 3000 para iniciar o Servidor Node.js. Caso o Servidor Node.js já tenha sido iniciado nessa porta, o React vai perguntar para você utilizar a próxima porta disponível, no caso a porta 3001.

Para não precisar confirmar a porta cada vez que você inicia o aplicativo React, você pode criar um arquivo de variável de ambiente que contenha essa informação.

Para isso, na raiz do projeto, crie um arquivo chamado .env, dentro desse arquivo coloque:

PORT=5000

Com isso, o aplicativo React será iniciado na Porta 5000.

Esse arquivo permite definir outras variáveis para o aplicativo React, como por exemplo:

GENERATE_SOURCEMAP=false

Essa configuração irá ignorar a geração dos arquivos Source Maps gerado com o comando npm run build. Pode ser usado para gerar uma build com tamanho menor.

Você também pode criar suas próprias variáveis de ambiente nesse arquivo, mas o nome delas precisa começar com REACT_APP_, por exemplo:

REACT_APP_NOME=João Paulo
REACT_APP_NUMERO=123

Você pode utilizar no código fonte dessa forma:

<p>Olá {process.env.REACT_APP_NOME}, seu Número é {process.env.REACT_APP_NUMERO}.</p>

Olá João Paulo, seu Número é 123.

Para mais informações, confira esse link Adding Custom Environment Variables.