[Dúvida] Postar esse projeto no GitHub

Oi Davi!

Para colocar o seu projeto React no GitHub e fazer com que ele leia a API sem depender do LocalHost, você pode utilizar uma plataforma de hospedagem gratuita, como o Netlify ou o Vercel.

Essas plataformas permitem que você faça o deploy do seu projeto React de forma rápida e fácil. Além disso, elas também possuem integração com o GitHub, o que facilita ainda mais o processo.

Aqui está um exemplo de como você pode fazer isso utilizando o Netlify:

1. Primeiro, faça o login no Netlify utilizando sua conta do GitHub.
2. Clique no botão "New site from Git".
3. Selecione o repositório do seu projeto React.
4. Configure as opções de build, como o diretório de build e o comando de build (geralmente é "npm run build" ou "yarn build").
5. Clique no botão "Deploy site".

Após o processo de deploy ser concluído, o Netlify irá gerar uma URL para o seu projeto, que estará acessível publicamente. Dessa forma, você poderá acessar a API sem problemas.

Lembre-se de verificar se a URL da API está correta no seu projeto React. Caso ela esteja apontando para o LocalHost, você precisará alterá-la para a nova URL gerada pelo Netlify.

Você pode fazer isso ou pode exportar o projeto para a Vercel também. Abaixo está um tutorial rápido de como colocar seu projeto React integrado a uma API no GitHub e hospedá-lo na Vercel para torná-lo acessível online:

1. Preparação do Projeto: Certifique-se de que seu projeto React esteja pronto e funcione corretamente em seu ambiente local (localhost). Isso inclui a integração com a API que deseja utilizar.

2. Git e GitHub: Caso ainda não tenha, crie uma conta no GitHub (https://github.com/) seguindo os passos desse vídeo, e instale o Git em seu computador.

3. Inicializar o Git no Projeto: No diretório raiz do seu projeto, inicialize o Git executando o seguinte comando no terminal:

   git init
   

4. Adicionar Arquivos ao Repositório: Adicione todos os arquivos do projeto ao repositório do Git executando o seguinte comando:

   git add .
   

5. Commit das Mudanças: Faça o commit dos arquivos adicionados com uma mensagem descritiva:

   git commit -m "Adicionar arquivos do projeto"
   

6. Criar Repositório no GitHub: No GitHub, crie um novo repositório vazio.

7. Adicionar o Remote e Fazer o Push: Associe o repositório local ao repositório remoto no GitHub e faça o push dos arquivos:

   git remote add origin URL_DO_REPOSITORIO_GITHUB
   git push -u origin master
   

   Certifique-se de substituir URL_DO_REPOSITORIO_GITHUB pela URL do repositório que você criou no GitHub.

8. Hospedar no Vercel: Agora, vamos hospedar o projeto na Vercel:

   a. Acesse https://vercel.com/ e crie uma conta ou faça login se já tiver uma.

   b. Clique no botão "Import Project" (ou "Novo Projeto").

   c. Selecione o repositório do GitHub que você acabou de criar.

   d. Escolha as configurações do projeto (provavelmente, será necessário configurar a pasta do projeto e a ramificação a ser implantada, geralmente a "master").

   e. Clique em "Deploy" para implantar o projeto na Vercel.

9. Configurar as Variáveis de Ambiente (opcional): Se o projeto exigir variáveis de ambiente para acessar a API, você pode configurá-las nas configurações do projeto na Vercel. Assim, suas chaves de API não ficarão expostas no repositório público do GitHub.

10. Acessando o Projeto Online: Após o deploy ser concluído, a Vercel fornecerá um URL no qual seu projeto React estará hospedado e acessível online. Acesse esse URL em seu navegador para ver o projeto em funcionamento.

Agora seu projeto React está hospedado na Vercel e disponível para ser acessado online! As atualizações feitas no repositório do GitHub serão automaticamente refletidas na implantação da Vercel sempre que você fizer um push para a branch configurada (antigamente conhecida como "master", mas atualmente a convenção utilizada é mudar o nome dela para "main", leia mais sobre o assunto aqui).

Espero que isso te ajude a colocar o seu projeto no ar e acessar a API de forma correta. Se tiver mais alguma dúvida, é só me dizer!

Espero ter ajudado, abraços e bons estudos!