Aula de Desenvolvimento de Buscador de CEP com ReactJS

Introdução

• Desenvolvimento de um buscador de CEP utilizando ReactJS.
• O projeto realiza requisições HTTP para uma API que devolve informações como CEP, logradouro, complemento, bairro, cidade e estado.

Requisitos

• Node.js: Necessário para começar o projeto. Baixar a versão LTS.
• Visual Studio Code: Utilizado para acessar e editar o projeto.

Criando o Projeto

1. Verificar instalação do Node.js
   • No CMD: node -v para ver a versão instalada.
2. Criar projeto ReactJS
   • No CMD, dentro da pasta desejada: npx create-react-app buscador
   • Acessar a pasta criada (cd buscador) e abrir no VS Code.
3. Iniciar projeto no navegador
   • Rodar o comando npm start.

Estrutura do Projeto

• NodeModules: Pasta com todas as dependências do projeto.
• package.json: Contém scripts e dependências do projeto.
• Public: Contém arquivos estáticos como favicon e index.html.
• src: Contém código principal do React (index.js, App.js).

Modificando Estrutura

• Remover arquivos desnecessários como app.css, app.test.js, setupTest.js, reportWebVitals.js.

Configuração e Estilização

• Reset CSS: Aplicar margin: 0, padding: 0, font-family: sans-serif.
• Estrutura HTML do App.js:
  • Container principal com título "Buscador".
  • Input para entrada do CEP.
  • Botão para buscar informações.
  • Área para exibir informações do CEP após busca.
• Estilização CSS:
  • Usar Flexbox para centralizar.
  • Aplicar gradiente de fundo.
  • Configurar animações:
    • Exemplo de animação com keyframes (flip title).
  • Responsividade com Media Queries.

Funcionalidade do Projeto

• Utiliza useState para gerenciar estado do input e resultado do CEP.
• Axios para realizar requisições HTTP.
• API ViaCEP: Usada para buscar informações do CEP.
• Renderização condicional:
  • Só mostra resultado se houver informação no estado.

Implementação do Código

• Criar e configurar api.js dentro de services para definir a baseURL do Axios.
• Implementar a lógica de busca no App.js:
  • Controlar input do usuário com onChange e estado.
  • Buscar informações na API ao clicar no botão.
  • Mostrar resultado na tela.

Conclusão

• Demonstrou a funcionalidade de buscar CEPs e exibir dados com interface estilizada.
• Introdução a conceitos de React como hooks (useState) e gerenciamento de estado.