Desenvolvimento de Um Buscador de CEP

Agora sim a gente desenvolveu um buscador de CEP sensacional, até aplicando o efeito aqui de entrada e também a gente está buscando um CEP, posso clicar em buscar, ele devolve o CEP para a gente, ele faz uma requisição HTTP lá na nossa API e a API devolve para a gente qual que é o CEP, qual que é o logradouro, o complemento, se tem bairro, qual que é então, por exemplo, a cidade, o UF, que é o estado e a gente pode digitar os CEPs aqui e ele busca para a gente. e informa para a gente qual que é os dados desse CEP. Olá, seja muito bem-vindo a mais um vídeo aqui no canal. E hoje, como a gente viu aqui no início, vamos criar um projeto passo a passo, aqui um buscador de CEP junto com o ReactJS. Então, bora lá, bora colocar a mão na massa, sem enrolação. Primeira coisa, para a gente poder começar a criar esse nosso projeto com o React, você precisa ter o Node.js. Então, caso você não tenha o Node.js instalado na sua máquina, só acessar o Node.js.org e sempre baixe a versão LTS. Beleza? Então baixou a versão LTS, é só clicar da Next, Next aí, e depois que você instalar, para você conferir se isso aqui foi instalado, é só você acessar o seu CMD e aí digitar Node, espaço, traço B, e ele vai devolver alguma versão, que é a versão que você instalou. Feito isso, maravilha, a gente está pronto para poder começar o nosso buscador. Então vamos lá. Como é que a gente cria um projeto com o ReactJS? É bem simples, a gente pode acessar o CMD na pasta que você desejar, e já lembrando aqui, não cria projetos dentro de pastas que tem acentos, não cria projetos dentro de pastas que tem caracteres especiais, exclamação, ponto e vírgula, não cria dentro dessas pastas, tá? Então, no meu caso, estou dentro de uma pasta chamada YouTube aqui. Então, eu vou criar aqui mesmo, npx create-react-app. Vou chamar o nosso projeto agora de buscador. Qual que é o nome do projeto? Então, eu vou dar o nome de buscador aqui. Então, cuidado com nomes grandes ou o nome não pode ter espaço também. Então, está criando aí. Agora é só esperar ele criar. E aí eu volto. Show de bola. Ele já devolveu para a gente. A gente já pode acessar a pasta do projeto que a gente criou. Então ele criou uma pastinha com o nome do nosso projeto. Então buscador. Eu chamei de buscador aqui. E depois disso a gente já pode rodar o nosso projeto. Acessar ele pelo Visual Studio Code. Então o que eu vou fazer? Vou acessar aqui o nosso CD buscador. Então acessei a pasta do projeto que ele criou para mim. Eu vou abrir ela no meu Visual Studio Code. Então eu vou dar um code espaço ponto aqui. Para abrir ela no meu VS Code. Então eu vou vir aqui. Deixa eu puxar aqui para ficar melhor. Maravilha. E lembrando, se você não abriu com o code espaço ponto, não tem problema. É só você vir aqui em File, Open Folder e ir até a pasta do projeto que você criou. No nosso caso, ele chamou aqui de buscador. Vai lá dentro dessa pasta e abre essa pasta dentro do Visual Studio Code. Então, bora começar. Deixa eu tirar minha cara aqui para não atrapalhar a gente. E o segundo passo é a gente rodar o projeto que a gente criou. Então, já estamos dentro aqui da pasta do buscador, aqui no nosso CMD, e o comando para a gente rodar o projeto... é npm espaço Start ele vai subir esse nosso projeto então ele vai começar a rodar aqui no nosso navegador deixa eu até abrir aqui o navegador ó já abriu aqui para mim tá carregando vamos aguardar e show de bola já abriu então ele tá rodando aqui no nosso local host 2.3 mil que é o padrão beleza ou a gente pode acessar pelo Network local aqui então maravilha podemos vir aqui atualizar e essa é a cara principal quando abre né quando a gente cria um projeto novo e roda Bora lá então, agora começar o nosso buscador. Então a gente vindo aqui dentro da estrutura do nosso projeto, primeira coisa a gente se depara então com a pasta NodeModels, que é a pasta onde vai ficar as dependências que a gente instalar para o nosso projeto. Se a gente vir dentro de package.json, a gente tem várias coisas aqui. A gente tem vários scripts, por exemplo, a gente tem um script aqui que a gente acabou de rodar, que é o npm start, que é para ele rodar esse script aqui para rodar esse nosso projeto. Maravilha! A gente também tem o de build para depois fazer um build de teste. o dia já tá e a gente também tem algumas outras configurações que ele já vem por padrão tá e também se a gente subir aqui a gente tem uma dependência ou seja algumas dependências que o react precisa para a gente poder de fato utilizar ele como o próprio react ele vem com um react Dom ele vem também com react scripts que é um pacotezinho ali do react igual a gente viu aqui para poder estar tá para poder gerar o vídeo então tudo o script ali pronto para a gente poder rodar e ter o que a gente quer que é gerar o build fazer um teste ou até Startar o projeto E também a gente vem com a parte de WebVitals Que é pra PWA, perfeito? Então aqui a gente tem as dependências E todas essas dependências vão ficar sempre dentro de NodeModules E essas dependências também tem outras dependências, né? Então você pode ver que tem bastante coisa aqui Mas essa pastinha aqui a gente acaba nunca mexendo, beleza? Aqui fica as dependências do nosso projeto Dentro de Public aqui então Aqui a gente vai ter o Favicon Que é esse iconezinho aqui que a gente tem do lado aqui do Title, tá? Do lado do Title Se a gente vir aqui dentro de index Que é o nosso arquivo index de fato Que é onde ele chama o favicon É onde ele configura aqui todo o nosso theme color Para quando for PWA Onde a gente também tem como mudar Deixa eu aumentar aqui um pouquinho Descer aqui embaixo Olha o nosso title aqui React App Se a gente vier aqui, está aqui o React App Se você quiser mudar, a gente pode mudar aqui Para por exemplo, buscador de CEP E eu vou salvar aqui Vamos lá, vou atualizar, já apareceu aqui, buscador de CEP. Maravilha. Por enquanto não, vamos mudar o favicon aqui do lado. Podemos deixar dessa maneira aqui. E a gente tem aqui um div id root. E cadê o resto do meu componente, que é esse componente que ele gerou, com essa imagem aqui, com esse texto, com esse link. Cadê? Então quando a gente roda um projeto com o React, o React o que ele vai fazer? Ele vem aqui dentro, dentro de src, e roda um carinha chamado index.js. Perfeito? Então ele roda o nosso index.js, cria ali um componente, e esse componente ele é chamado aqui ó, de app, e esse componente ele é renderizado dentro da document.getElementById root. O que que ele fez? Ele criou esse nosso componente app, que a gente já vai ver, e jogou ele dentro aqui ó, do nosso id root. Então onde que tá o nosso id root? Tá aqui dentro. Então essa é a nossa id root, então o nosso componente ó, ele é montado aqui dentro, perfeito? Se a gente abrir aqui ó, inspecionar. Maravilha! Se a gente vir aqui no Elements, você pode ver que temos aqui, ó, ID root e dentro da ID root, deixa eu deselecionar aqui e colocar aqui lado a lado para você ver também, tá? Então, ó, clicando na ID root, você pode ver que tem tudo o nosso projeto ali dentro, como eu falei. E agora, então, onde que está o componente? Ele renderiza o nosso famoso componente app, que é o nosso componente principal da aplicação. E onde é que está ele? Ele está aqui dentro, ó, src, temos o nosso index, que é o componente que está sendo... montado aí, que está estruturando todo o nosso primeiro componente, e aqui dentro a gente também tem o famoso app.js. Show de bola! Então esse app.js sim, agora sim a gente tem aqui o nosso famoso, a nossa logo, que é uma SVG, que é essa logo do React, já vem por padrão. A gente tem o parágrafo aqui, edit, está tudo escrito aqui, que a gente já vai mudar. A gente tem o textinho aqui também, learn React, tem um textinho aqui também, que vai lá para a documentação. Então, maravilha! Mas antes da gente começar a mudar tudo isso aqui, vamos... limpar um pouquinho a estrutura, tem bastante coisa que a gente não vai utilizar ou que a gente vai recriar do zero. Então, vamos lá. A primeira coisa que a gente vai fazer aqui é, vamos vir aqui, app.css. A gente não vai usar. Então, eu vou vir aqui, vou dar um delete. Ele vai quebrar a aplicação, já já a gente vai arrumar. Eu vou vir aqui dentro do nosso src app.test. Não vamos usar, então eu vou dar um delete. Opa, está abrindo a pasta aqui do public. Dentro de src, o nosso logo.svg. Vou deletar. Perfeito. Vou fechar aqui. O que mais que eu também quero deletar? O setup testes também posso deletar. O nosso report web vitals, que é para PWA. A gente não vai mexer com isso agora. Vou deletar. Então, show de bola. Ficou o web.js, o index.css e o nosso index.js. Então, agora vamos começar a corrigir tudo que a gente deletou. Primeiro, aqui no nosso index.js, ele chamava o report web vitals. Que a gente não tem mais, né? A gente apagou. Então, posso aqui tirar ele. Então, eu deleto ele. O import do report web vitals também, ó, posso tirar, vou salvar aqui, posso fechar. Vamos aqui no nosso app.js, que é o componente, a gente não tem mais o arquivo de CSS, nem a logo, então aqui dentro da nossa componente principal, eu vou apagar aqui, vou deixar apenas, ó, a nossa div vazia, vou colocar aqui, tem um h1, teste, projeto, e eu vou salvar, vou salvar aqui, vamos lá, vou dar um ref5 aqui, e apareceu o nosso teste projeto. Então maravilha, agora a gente pode de fato começar a criar esse nosso componente app, que vai ser o nosso componente principal, que é aquele buscador completo que a gente vai fazer. Então vamos lá. Primeira coisa que a gente faz é zerar o CSS, dar um reset que a gente ama. Então dentro do nosso index.js, que é o nosso CSS global, que está sendo chamado aqui dentro do index, ele está sendo chamado aqui. Então ele é um CSS global, quando a gente quer zerar a margem, passar alguma fonte, igual já vem criada. Mas no nosso caso... A gente vai aplicar aqui um seletor basicamente global E vou falar, ó, margin 0 Padding 0 E também eu quero falar um font family Aqui eu vou passar sans serif Ou seja, qualquer fonte que não seja sem serifa, tá? Então, se eu salvar Vou atualizar, você pode ver que ele já grudou E, ó, não tem mais aquela serifa da fonte, tá? Se eu tirar o sans serif, ó Vou comentar aqui e eu vou salvar A gente volta pra fonte com serifa Mas fica feio, né? Então, vou voltar aqui pro font family sans serif e a gente vai ter aqui a nossa fonte sem serif, tá? Então, maravilha, e ele já zera as margens, pede que o H1 tenha por padrão, o H2, e aí fica bem melhor. E agora, então, o que a gente já fez no nosso reset, bem básico aqui, né? Pra gente poder começar, de fato, dentro do nosso app.js, que é o componente principal aqui que a gente vai trabalhar. Agora, vamos, então, estruturar primeiro o esqueleto do nosso HTML pra depois fazer a parte funcional, que é buscar um CEP e trabalhar na funcionalidade, certo? Então, bora lá. bom então a primeira coisa nesse que lesney eu vou mudar o nome dele para container tá maravilha dentro desse container então posso até deixar o h1 aqui a gente pode colocar buscador maravilha, vou dar até um class name aqui pra depois a gente estilizar melhor, vou chamar ele de title perfeito, então depois aqui desse cara eu vou criar mais uma div e essa outra div aqui depois do h1 vai ser a nossa div do input o nosso container input, vou chamar ela de container input aqui o class name pra ela, e dentro dela então a gente pode ter um input do tipo text que é pro cara digitar, vou dar um enter aqui e vou dar um enter aqui no nosso type pra gente colocar mais uma propriedade eu vou passar um placeholder... Quando não tiver nada digitado, vai ser, por exemplo, digite seu CEP. Três pontinhos. Maravilha. Então, show de bola. Se eu salvar, vou atualizar. Já está começando a aparecer aqui. Deixa eu até diminuir aqui para a gente ir vendo ao mesmo tempo. Então, perfeito. Maravilha. Depois aqui do nosso input, então, eu posso colocar o botão para o cara poder fazer, de fato, a busca. Então, eu vou criar aqui um button. E esse button aqui vai ser procurar, por exemplo. Vou dar um class name para ele aqui. Button search. que a gente já vai fazer. Só que eu não quero um texto. Eu quero que seja um ícone aqui, aquela íconezinha, aquela lupinha pra ele poder buscar. E pra gente trabalhar com ícones, a gente vai instalar uma biblioteca bem legal. Deixa eu trazer aqui pra vocês. Maravilha. Deixa eu aumentar aqui. Que é a nossa React-Icons, tá? Então é bem simples. Vou vir no meu projeto, vou parar de rodar o meu projeto e vou instalar ela, tá? Então, ó, pra instalar o comando é bem tranquilo. Eu vou copiar até aqui. Vou colar aqui. só vou tirar esse traço-traço save que não precisa, e vou instalar dentro do meu projeto. Então, npm espaço install, faço react-icons, e agora é só aguardar. Enquanto ele vai instalando aí, a gente pode ir vendo aqui, que a gente tem várias bibliotecas, deixa eu tirar esse zoom gigante aqui, temos várias bibliotecas para a gente poder utilizar. Por exemplo, a gente faz o import aqui do nosso feather, e aí eu poderia utilizar aqui qualquer ícone que tem aqui. Ou, ah, eu quero utilizar o dev-icons, eu posso importar ela aqui, e posso utilizar aqui. Se eu clicar, ele vai copiar já o nome do ícone. Ou eu quero o font Awesome, eu posso importar dessa forma e aí usar os nomes dos ícones aqui para poder utilizar na aplicação. Então, enquanto ele vai instalando aqui o React Icons, eu tenho que dar um recado importante para você, que a fábrica de aplicativo que é o nosso treinamento completo está com a turma aberta, tá? Então, se você quer entrar para o mercado de trabalho, sair do zero ali com todo o nosso suporte e acompanhamento, então desenvolver aplicativos, publicar os aplicativos, desenvolver sites como React, sistemas web, tudo completo e passo a passo, além de todo o grupo com os alunos e instrutores. Ó, link tá na descrição e aproveita, tá? Que a turma é exclusiva e o desconto que eu deixei aqui pra vocês também. Então, ó, instalou, bora voltar. Agora que instalou o nosso React Icons simples, eu vou rodar novamente o meu projeto. Então, npm espaço start aqui, ele vai subir o nosso projeto de novo, ó. Ele vai rodar de novo. Deixa eu fechar aqui e vai abrir aqui no meu navegador. Então, enquanto ele vai abrindo aqui, vou minimizar o meu CMD e já abriu. Perfeito. Então, como eu mostrei para vocês aqui, a gente tem várias bibliotecas. Eu quero, então, ao invés de colocar um procurar, eu colocar uma biblioteca aqui para a gente poder utilizar. Então, vou importar aqui para a gente um ícone para a gente poder utilizar. Então, import, vou trazer aqui do React Icons. E aí, como eu falei, tem várias bibliotecas. Eu vou utilizar aqui o barra FI. Maravilha. E eu vou trazer uma conhecida como FI Search. Tá? Perfeito. Então, show de bola. Agora, eu quero utilizar ela. A gente utiliza como se fosse uma tag, um componente Então eu abro aqui nosso componente e fecho aqui mesmo E eu preciso passar duas propriedades para ela Que é o size, ou seja, qual que é o tamanho Então eu vou passar aqui para ela uns 25 E a color que eu quero Então eu quero que seja branca a nossa cor Vou colocar preto aqui só para mostrar para vocês Então vou salvar, vou atualizar E ó, está aqui a nossa search aqui Beleza, mas eu quero branco, né? Nosso fundo depois vai ser preto, então vou deixar branco aqui e perfeito. Depois aqui da nossa div que a gente chamou de container input, vou até tirar o espaço. Depois dela, então, a gente vai ter a área, então, de quando o cara buscar um CEP. Então, vamos criá-la, então. Eu vou chamar div aqui novamente ou a gente pode até mudar ao invés de ser div, eu posso criar uma tag main, para ser mais semântico que aqui é a parte importante do nosso site, que vai ser gerada. A main, eu vou dar uma class name para ela. Vou chamar de main também. Show de bola. Vou colocar um h2. sete dois pontos é que eu vou colocar um certo qualquer do 79 032 222 nem sei se existe isso então Maravilha depois eu vou criar um spam e vai ser o logradouro por exemplo rua teste algum então vai ser o nome da rua aqui perfeito então vou criar outros punk complemento algum complemento beleza só para a gente ter alguma coisa visual para poder utilizar e depois tornar tudo isso real né buscando as informações que a gente vai consumir de uma API então Depois do complemento aqui, eu também quero ter mais um span, que vai ser o bairro. Então, vou colocar aqui Vila Rosa, vai ser o bairro. Sei lá, também estou inventando aqui. E outro span que eu vou colocar, que vai ser a localidade e o estado. Por exemplo, Campo Grande. Traço MS, que é onde eu moro. Então, perfeito. Se eu salvar aqui, a gente já vai ter a nossa área onde vai ficar gerado. Agora, a gente precisa estilizar para fazer a parte funcional. Então, vamos lá. Primeira coisa, dentro de src, vou criar um new file aqui também. Vamos chamar de styles.css. Pode ser, não tem problema. E agora, vou vir dentro do nosso app.js e vou importar esse nosso estilo. Então, import aqui, ponto barra, está dentro da nossa mesma pasta. Então, styles.css. aqui. Vou salvar e agora a gente pode começar pelo nosso container aqui. Então, eu vou salvar aqui e vamos lá. Ponto container, que é uma class, né? Então, a gente deu aqui, como no React a gente não escreve class e sim a gente escreve class name, beleza? Então, a gente deu um class name chamado container. O que eu quero fazer? Eu quero centralizar todos os itens no centro da nossa tela. Então, eu vou passar uma altura de 100VH, ou seja, 100 view height. Ele vai pegar o tamanho inteiro da nossa view height aqui do document e vai tentar colocar 100%. Então, senha aqui de VH, vou passar para ela um display flex, para a gente trabalhar com o Flexbox, Justify Content Center e também um Align Items Center aqui. E eu vou passar aqui, os alinhamentos dos itens vão ser em coluna e não um ao lado do outro, que o Flexbox traz para mim por padrão. Então, Flex Direction, a direção dos itens vão ser em coluna, tá? Então, fazendo isso, centralizamos todos os nossos itens. Maravilha! Depois disso, então, eu quero colocar uma corzinha de fundo. Vamos passar aqui um background. background, vou passar um linear gradient, um gradiente de 12, 12, 12 até vírgula, então a gente pode passar outra cor aqui que eu separei, que é o 21, 2B, 4, 6, vou salvar, a gente tem esse gradiente aqui que começa ali do 12, 12, que é esse cinza, e vai vindo até o nosso, essa cor meio azul que eu passei, beleza? Estou de bola, então vamos lá, esse é o nosso container, depois do nosso container a gente tem o nosso title aqui, então vamos construir o title, ponto title, Tá? E tu tem que ser bem grandão, né? Ele é uma chamada ali. Então, font-size aqui eu vou passar uns 85 pixels pra ficar bem grande. Show de bola. Depois disso eu vou passar que a cor vai ser branca. Vamos salvar. Beleza, olha que massa. Já ficou bem grandão, né? Depois a gente dá uma diminuída quando tiver menor aqui. Então, já tá aqui o nosso buscador. Eu quero colocar uma animação pra quando o cara entrar aqui, ter uma animaçãozinha nesse nosso título. Vamos fazer? Então, a gente pode utilizar o keyframes, tá? Então, arroba keyframes. Abra aqui nesse identifier aqui para a gente dar um nome para essa nossa animação. Por exemplo, eu vou chamar de flip title. O nome que eu quiser. Flip title, ele vai vindo from até alguma coisa. Então, to. Então, from. Ou seja, ele vai começar do nosso transform, onde eu quero rotacionar o eixo X de 90 deg até zero. Então, até ficar no jeito que está, que é esse texto padrão aqui. Então ele vai estar meio em 90 graus e vai voltar aqui para o nosso zero, fazendo um efeito de flip. Então se eu fizer outro transform agora, falando que ele vai vir até o nosso rotate x, zero, dag, vou salvar. E agora é só a gente aplicar essa nossa animação. Olha que simples. Eu posso vir no nosso title e falar, olha, eu quero usar uma animation que eu chamei de flip title. Cuidado para colocar o mesmo nome que esse aqui. Eu quero passar quantos segundos para essa animação vir de 90 até zero. Eu quero que seja dois segundos que ela vai demorar para fazer isso aqui. Então, vou salvar. Olha que legal. Quando o cara entra no site, ele vai ter esse efeito. Entrou no site, muito massa. Então, já dá uma carinha a mais para o nosso projeto aqui. Então, bem legal. Então, agora a gente pode continuar. Depois do nosso title aqui, se a gente olhar, eu tenho toda a nossa div aqui, que eu chamei de container input. Então, vamos estilizar o nosso container input. Então, ponto container input. Deixa eu subir aqui. Vamos passar um background color aqui de um RGBA. Para ter uma opacidade, então 255, 255, 255, vai ser branco, 0,2. Então, uns 20% de opacidade. Então, vai ter uma opacidade em todo o nosso container aqui do input. Depois disso, eu vou passar um padding interno de uns 15 pixels em todos os lados. Margem 34 pixels em cima e embaixo. E zero nas laterais. Então, eu vou aplicar uma margem externa em cima e embaixo de 34 pixels aqui. Beleza. Eu também vou falar para ele ter um display flex, para ficar um ao lado do outro. Border. Radius aí de uns 8 pixels Arredondar um pouquinho essa borda E também quero colocar um box shadow Ou seja, um pouquinho de sombra ali, né? De 1 pixel, 3 pixel e 8 pixel E a gente pode passar uma cor Se fosse 0,0,0 ia ficar bem forte ali a nossa sombra Beleza? Mas eu quero um pouquinho mais fraco Então a gente pode trazer um RGBA Pra ter uma opacidade nessa cor Então 0,0,0 é o preto 0,0,5 é 50% Então a gente tira um pouquinho a força desse nosso preto Então fica bem mais legal Agora eu vou acessar o nosso ponto container input E acessar a nossa tag de input Então dentro da tag de input, eu quero tirar esse background branco aqui Então eu quero falar, olha Background color vai ser transparente desse nosso input aqui Ó, já ficou transparente Eu quero que ele não tenha essa borda padrão Border 0 Show de bola, agora sim. Eu quero ter um font-size para ele de uns 20 pixels. Color, quando o cara digitar dentro, vai ser branco. Então, se o cara digitar, é branco. Só que ele tem esse outline aqui que a gente chama. Se quiser tirar, eu posso vir aqui. Outline. Opa. Outline. Not. E quando o cara clicar no input, não tem mais outline. Margin. Right. Eu quero passar também uns 8 pixels para desgrudar do nosso botãozinho aqui. Beleza? Então, o cara pode digitar. Ele tem essa margem aqui entre o botão e o final do nosso texto. Perfeito. E eu posso mexer também na cor do placeholder, porque se eu apagar todo o texto aqui dentro, apaguei, nosso placeholder está muito apagadinho. Então eu posso vir aqui, ponto container input, acessar o input, eu posso colocar dois pontos, mais um dois pontos, e aí aplicar no nosso placeholder, que é a nossa propriedade aqui. Então eu quero aplicar, por exemplo, um hashtag F1, F1, F1, que é meio que um cinza ali. Então se eu salvar, a gente tem agora ali bem mais claro, né? E aí o cara pode editar aqui. Perfeito. Depois... button search, eu acho que foi esse o nome que eu dei, né? Deixa eu ver aqui. Foi button search pro nosso botão. Então, button search e vamos lá. Pra esse button search, eu também quero colocar um background color transparente pra ele. Show de bola. Eu quero colocar um border zero. Beleza. Eu quero dar um display flex e alinhar ele no centro conforme o nosso container input. Então, justify content center. E também vou dar aqui um align items center aqui. E quando eu colocar o mouse em cima, ele não tá ficando aqui com o cursor pointer. Eu posso falar, olha, cursor, pointer aqui para ele também. Então, quando passa o mouse, ele fica com a mãozinha de um botão. E se quiser aplicar um efeito quando passar o mouse, a gente pode dar um zoom nessa nossa lupa também. Eu posso vir aqui, ponto, button, search, dois pontos, hover. Quando passar o mouse em cima dele, a gente pode aplicar aqui, então, um transform de scale, ou seja, de aumentar, opa, só scale aqui, de 1.2, como se fosse um 120%. Então, maravilha. E agora eu passo essa animação aqui. A transition aqui, de transform, vai ser de 0.5 segundos aqui. Então, vamos salvar. Quando eu passo o mouse, ele dá um zoom ali. Se eu colocasse mais, vou colocar 1.5 só para vocês verem. Ficaria gigante. Mas eu acho que 1.2 é bem legal. Então, fica bem bacana. Maravilha. Vamos agora para baixo, que falta aqui o nosso main. Então, ponto main. É a nossa área aqui, onde tem todos os itens depois. Aqui, todo o nosso main. Vamos estilizar ela. Bem simples, eu quero centralizar tudo que tem nela também. Então, eu vou dar aqui um display flex, um justify content center, um align item center. Mas eu quero um item abaixo do outro. Então, um flex direction column para ficar um item abaixo do outro. E agora a gente já tem tudo aqui, só que eu quero colocar uma cor de fundo. Então, um background color branco. A gente pode passar uma width fix aqui, uma largura de uns 500 pixels. Maravilha. E um border radius seguindo 8 pixels, que é o padrão que a gente utilizou ali em cima. Então, beleza. E agora, então, eu vou vir aqui no nosso ponto main, h2. Eu acho que é um h2 que a gente está utilizando aqui, h2. Dentro do h2, eu vou dar uma margem em cima e embaixo de uns 16 pixels para desgrudar ali em cima. E zero nas laterais. Beleza. Ponto size aqui de uns 39 pixels. Ponto main. E agora a gente tem os span, que é cada item aqui embaixo. Cada item aqui embaixo, eu vou apenas dar uma margem bottom para espaçar o item de baixo de uns 16 pixels. Beleza, ele já vai dar uma espaçada legal. Depois disso, então, eu vou dar um font-weight-bold aqui para deixar negrito, para ficar chamativo mesmo. Vou salvar. Se a gente diminuir, vamos ver se ficou legal. Só que, olha, quando a gente diminui, fica muito grande. A gente pode aplicar um media query também para, olha, quando eu estiver aqui quebrando aqui, eu quero aplicar um estilo menor para o nosso tamanho aqui. Então, se eu abrir um inspecionar, a gente pode ver aqui dentro de elements. E quando eu mexo aqui, eu tenho aqui os pixels. Então, se eu mexer, temos aqui 700 pixels. Quando que está quebrando? em torno de uns, acho que é aqui ó, 620 dá pra gente quebrar pra outro tamanho. Então, aqui embaixo, eu posso criar um Media Query, sem problema, tá? Eu posso criar aqui um arroba media, por exemplo, max-width, dois pontos. Quando chegar no máximo 620, eu quero aplicar outro estilo, por exemplo, um ponto title, de um font-size aqui de uns 60 pixels. Então, salvei. Quando, ó, tá maior, ele aplica o grandão. Quando chegar a menos, ó, 620, que eu... coloquei, aplico o menor, já fica bem melhor né, eu posso também diminuir mais algumas coisas, por exemplo, main h2, font size aqui para ele de uns 28 pixels, diminuiu um pouquinho, beleza, posso acessar também o ponto main, a nossa width aqui do main era fixa em 500 pixels, eu quero passar agora aqui a width, vai ser em porcentagem, por exemplo, vai pegar 80% da tela, eu posso passar aqui, ele vai sempre tentar pegar 80% da tela, então ele vai seguindo aqui, e já ficando bem mais responsivo. Também eu posso passar aqui uma mínima altura para ela vai ser 250 pixels aqui. Ficou bem legal já, bem bacana. Agora então a gente finalizou esse nosso estilo e bora para a parte funcional. Qual que é a parte funcional que eu preciso fazer aqui? Eu preciso ter algo dinâmico na minha aplicação. Quando o cara digitar qualquer coisa aqui, eu preciso salvar em algum local alguma variável e quando ele clicar eu preciso ir lá na nossa API que a gente vai utilizar para buscar esse CEP aqui. Bora fazer isso? Então quando a gente vai trabalhar com algo dinâmico, que eu quero trocar de valor conforme a minha aplicação, conforme alguma ação, a gente utiliza um estado, ou também conhecido como um hook useState. Então, bora aplicar ele na nossa aplicação. Então, vamos lá. Vou importar aqui em primeiro. From React, ele vem do React. Vamos chamar de useState. Vou criar ele aqui dentro do nosso FunctionApp, que é o nosso componente. Const, vou chamar ele aqui de input. Set input igual useState. Abro parênteses e aqui eu coloco o valor que ele vai começar. Por exemplo, vamos lá. Vou falar que ele vai começar com teste 1, 2, 3. Então, vamos entender aqui. O que a gente tem aqui? Primeiro, é qual é o nome desse nosso estado. Eu chamei ele de input. Segundo, aqui depois do vírgula, o que é? É a função que a gente tem para trocar o valor desse estado. Então, quando eu chamar um input apenas, eu estou querendo apenas saber qual é o valor desse estado. Quando eu estou chamando essa função setInput, é para eu passar um valor novo para esse estado. Vamos ver isso na prática? Eu vou alinhar ele com o nosso input. Então tudo que o cara digitar dentro do input, o que eu quero fazer? Eu quero ir salvando dentro desse nosso estado, concorda? Vamos a tag aqui de input, e eu preciso passar algumas propriedades. Primeiro, que é o value, ou seja, o valor desse meu input vai estar sempre atrelado ao nosso useStateInput. Então se eu salvar aqui, olha que legal, quando eu abro a minha aplicação já aparece teste 1, 2, 3. Por quê? Porque se ele está atrelado ao nosso input, O nosso useStateInput que a gente criou já tem o valor 123123. Então, ele já coloca dentro desse nosso tag de input o teste 123123. Mas, no nosso caso, eu quero que comece vazia mesmo. Então, eu vou salvar e pronto, começa vazio. E toda vez que eu digitar alguma coisa aqui dentro, eu quero salvar dentro do meu input. Então, tem uma propriedade aqui para a gente chamar, que é o onChange. Abre e fecha aqui. E para esse onChange, eu recebo, então, uma função anônima aqui. E a gente recebe o evento. Eu vou chamar de e. Poderia ser event, tá? Eu vou chamar de e para ficar menor. Então, a gente recebe esse evento. E agora eu posso passar para o nosso setInput. Abre e fecha aqui. Então, como eu falei, quando a gente chama o setInput aqui, eu estou querendo passar um valor para esse nosso estado aqui que eu chamei de input. Então, setInput. Agora eu recebo o meu evento. A gente tem acesso ao valor do cara, o que ele digitou através do e.target.value. Então, quando eu acesso o e.target.value, o que eu estou fazendo? Eu estou pegando tudo o que ele digitou ali dentro. e passando para a nossa useStateInput, beleza? Então, vou salvar, vamos lá, vou atualizar. Quando eu digito alguma coisa, ele está digitando, e toda vez que eu digito, ele chama o onChange e passa para o nosso estado input aqui, o que eu digitei, que no nosso caso é isso aqui. Vamos ver se realmente está recebendo? Então, quando eu clicar no meu botão, eu quero chamar um alerta e mostrar o que eu tenho dentro dessa nossa useState. Vamos lá. Então, dentro aqui do botão, a gente vai acessar um onClick, que é quando você clicar nesse seu botão de search, Eu quero chamar uma função. Por exemplo, handleSearch. Vamos criar essa função? Então, vamos aqui em cima. Embaixo do useState, function handleSearch. Vou dar aqui um alert, test, para a gente ver que ele clicou. Ou até clicou, para a gente ver aqui. Vou salvar. Toda vez que eu clicar, ele chama o clicou. Mas eu quero que ele mostre, então, o valor do input. Vou dar um espaço, mais o nosso useState input. Então eu quero ver o que tem dentro do nosso estado input aqui. Vou salvar. Vou dar um F5. Atualizei. E eu vou digitar aqui. 79, 003, 222. Cliquei. Valor do input. E olha aqui o valor que eu digitei. Maravilha. Se eu digitar alguma coisa. Dá Enter. Temos alguma coisa. Então toda vez que eu digito eu já estou salvando o valor aqui. Maravilha. Qual que é a próxima lógica que a gente precisa fazer? Quando eu clicar aqui. Eu quero ir lá e buscar. o CEP pra poder ter as informações depois e mostrar aqui. Então agora, bora conhecer a API que a gente vai utilizar pra passar o CEP e ela devolver todas as informações desse CEP pra gente. Bora lá. Então vamos lá, deixa eu aumentar um pouquinho aqui. Vou clicar aqui. Então vamos lá, deixa eu colar aqui a URL da API. Então eu peguei qualquer CEP aqui no Google, tá lá na Avenida Paulista. Então basicamente é via cep.com.br barra ws, barra qual que é o CEP que você quer buscar, barra jason pra ele devolver um jason pra gente. Tá? Então é essa API que a gente vai utilizar para consumir. Então, primeira coisa, vamos parar de rodar esse nosso projeto para a gente instalar uma biblioteca para trabalhar com requisições HTTP. Então vamos instalar ela, npm install, Axios. Vamos aguardar ela ser instalada. Show de bola, já instalou aqui para mim. Então eu vou rodar novamente a minha aplicação npm start. E agora vamos configurar o Axios na nossa aplicação. Então dentro do SRC... vou criar aqui um new folder, vamos chamar de services, dentro de services eu vou criar aqui um new file chamado api.js, e agora aqui dentro vamos configurar, primeiro vamos começar importando aqui o Axios, então import Axios from Axios, show de bola, e eu vou configurar a nossa base URL, então const api igual a Axios.create, abro parênteses, abro chaves aqui, e aqui dentro eu vou criar então a nossa base URL. Dois pontos, abro aqui aspas para a gente colocar. Então lembrando, o URL aqui é tudo maiúsculo, tá? Cuidado com a escrita aqui. Deixa eu colar aqui a minha API. Deixa eu pegar lá aqui de novo, na verdade que eu não copiei. E colar aqui. Então o que é base URL? Vamos lá. Base URL é algo que não vai mudar. É a URL base ali na sua API que você está utilizando. Porque se você parar para pensar, até aqui, viacep.com.br barra ws, nunca vai mudar. Essa aqui é uma URL que nunca muda. Agora, depois do barra aqui, a gente tem o CEP do cara e o barra JSON, que é o formato que você quer trazer. Aí sim, isso aqui é uma rota. Então, eu vou usar a nossa base URL até o nosso barra WS aqui, perfeito? E partir daqui, posso até apagar, depois vai o CEP que você quer e barra JSON, que é o formato. Então, vou salvar aqui, a gente configurou já. Agora, eu preciso exportar esse arquivo para a gente conseguir utilizar a nossa API. Então, export default API. Simples demais. Então configuramos a base URL para ficar mais simples e nos ajudar Agora salvei Vamos dentro do app.js Que agora eu quero utilizar Então ao invés de mostrar um alerta quando o cara clicar no botão O que eu quero fazer? Eu quero então fazer a requisição HTTP nessa API Então vamos lá Deixa eu só colar aqui o CEP que eu peguei aqui Para a gente poder fazer os testes E show de bola A primeira coisa que eu quero verificar é se o cara digitou alguma coisa Então if Se o seu input Ou seja, se o valor dentro desse seu estado aqui, do seu input, do que você digitou, estiver igual a vazio, então for igual a uma string vazia, quer dizer que você não digitou nada. Então, vou abrir e fechar aqui o nosso if, vou dar aqui um alert, vou colocar preencha, algum sap, e vou dar aqui um return para ele parar a execução do nosso código. Vamos testar? Então, se eu salvar, vir aqui no nosso buscador, e eu atualizar, e eu vir aqui e não digitar nada, cliquei, preenche algum sap. Agora, se eu digitar, cliquei, ele não mostra o alerta. Ou seja, quando ele não digita, a gente faz a verificação e barra aqui se não tiver digitado. Se tiver digitado alguma coisa, aí a gente deixa prosseguir e faz a requisição HTTP. Então, aqui a gente vai abrir um bloco try e o nosso catch. Abre e fecha aqui. Ou seja, o try é o que você quer fazer, mas que pode dar errado. E caso dê errado, a gente vai cair dentro do nosso bloco catch para capturar isso aqui. No nosso caso, a gente só vai mostrar um alerta. Então... Primeiro vamos fazer o nosso try, que é a tentativa do que você quer fazer. Então como é algo assíncrono, que a gente vai ter que fazer requisição nessa API aqui, pode demorar um pouquinho, eu vou transformar essa nossa handleSearch em uma função assíncrona. Então em algo assíncrono. E dentro do nosso try, eu quero então criar uma const, vou chamá-la de response igual a wait, para ele esperar essa requisição, então ele vai esperar o que a gente passar aqui, que é a nossa chamada. Então vou importar o nosso arquivo da API que a gente já criou. Import. api.services barra api, o arquivo que a gente criou e agora a gente pode utilizar await api.get que é o tipo da requisição, quero trazer informações, então é do tipo get e aí eu vou abrir nosso template strings lembra nossa chamada, eu preciso passar então qual que é o sap e barra json então onde que eu tenho o sap que eu digitei eu não tenho aqui dentro do nosso useState que a gente chamou de input? tenho, então eu vou abrir cifrão abre e fecha o chaves, pra gente chamar então o valor que tem dentro do nosso. useStateInput barra JSON, que é o formato que eu quero trazer. Então, basicamente, a gente está fazendo a nossa baseURL, que é isso aqui, barra o input, que é o que você digitou, barra JSON, que é o formato que a gente precisa trazer. Então, a gente vai fazer isso aqui. A gente utilizou o async await, ou seja, para ele esperar essa requisição aqui para passar para a linha de baixo, como é algo assíncrono, que demora um pouquinho. Depois disso, então, eu vou dar um console.log dentro do nosso response aqui. Tá? Então... Vamos ver o que ele vai devolver isso aqui para a gente. Agora, caso isso aqui der erro, a gente digite um CEP que não existe, ou der algum erro na API, dentro do nosso CAT, eu quero dar um alerta apenas, por exemplo, erro ao buscar aqui. Então, vamos fazer um teste aqui. Então, vou salvar. Vamos fazer esse teste aqui. Vou atualizar. Vou digitar aqui o nosso CEP. Deixa eu pegar aqui o CEP de novo. Vou colocar aqui do lado. Era 0, 13, 10, 930. Cliquei. Vamos abrir o console, que a gente colocou um console. Vamos no console. User aqui. E ele devolviu um objeto. Dentro desse objeto a gente tem a configuração, a gente tem os headers da nossa requisição, a gente tem o status code dessa requisição que deu 200, que é o status code de ok, que deu tudo certo. Dentro da propriedade data, aqui eu tenho o que eu quero. Aqui eu tenho o bairro, olha aqui o complemento, ddd, aí eu tenho mais um monte de informação aqui. Então, o que eu quero de fato não está dentro do response, e sim o response.data, certo? Então eu vou salvar e vamos fazer o teste de novo. Vou vir aqui, deixa eu copiar esse CEP, vou atualizar. eu vou digitar o certo de novo vou buscar cliquei aqui e vamos lá no nosso console agora sim agora ele devolveu um objeto tá esse objeto tem as propriedades que eu posso utilizar nosso caso eu quero sépio complemento bairro quero logradouro quero localização e também o estado agora vamos digitar um certo não existe onde está qualquer coisa até com um monte de coisa aqui digitei vamos ver olha lá que legal eu vou ver aqui ó ops erro ao buscar posso dar um ok e aí ele fala que tem uma propriedade request né que não foi bem sucedida a requisição. E aí, então, além da gente mostrar o erro, eu quero limpar o campo sozinho do input, porque se digitou algo errado, eu quero limpar. Então, além da gente mostrar o alerta aqui no cat, eu quero dar um set input, ou seja, alterar o valor do useState onde tem o valor do nosso input, para vazio de novo. Ou seja, vou voltar o valor do useState para vazio. Então, se eu salvar, vou digitar alguma coisa errada aqui de novo, cliquei, erro ao buscar, dou ok e ele limpa o nosso campo. Ou seja, depois o alerta, ele volta o valor do nosso useState do input para vazio. Beleza? Então, o valor que tinha dentro do input fica limpo de novo. Maravilha. E agora, qual que é o próximo passo? A gente fez a requisição, colocou dentro de uma variável response, que está acessando o response.data, e eu tenho tudo que eu quero. Mas o que eu quero fazer, de fato, não é ficar no console, e sim mostrar aqui na tela. Então, a gente pode criar mais um useState para a gente armazenar o retorno dessa nossa chamada. Certo? Então, eu vou chamar aqui um const, vou chamar de sap. set sap igual useState e ele vai começar como objeto vazio, porque se não tem nada, até o cara clicar em buscar, buscar alguma coisa, eu quero que ele comece como vazio. A gente criou o nosso sap, que é o nosso estado aqui, um useState que começa como objeto vazio, e depois que ele faz a chamada, ao invés de eu dar um console.log para esse cara, eu quero passar para o nosso useState a resposta. Então, sap, para eu passar para o meu useState sap algum valor, eu quero passar quem? o response.data, que é o objeto que a gente tem de retorno, beleza? E também, depois que ele receber, eu quero dar um set input, vou passar para vazio também, para ele limpar o nosso campo aqui. Vamos fazer um teste? Então, se eu salvar, vou vir aqui, vou dar aqui, deixa eu rolar aqui o set de novo, cliquei, olha, ele limpou, então provavelmente ele fez a requisição, colocou para o nosso useStateSep a resposta e zerou o nosso input. Agora é só a gente mostrar aqui embaixo. Bora lá? Então vamos vir aqui embaixo, onde estavam as informações fixas, agora a gente vai utilizar através do useState. Então vamos colocar a informação agora através do nosso useState. Abre e fecha o Chaves para a gente colocar um JavaScript, eu quero acessar o nosso useState que a gente criou de CEP, então o CEP, e dentro dela a gente vai ter as propriedades. Então ponto, dentro dela eu vou ter todas essas propriedades aqui de retorno. Então eu quero acessar, por exemplo, o ponto CEP. Então CEP, ponto CEP. O próximo é a rua. A gente vai acessar o CEP.logradouro. Então, abre aqui. Abre e fecha o chave para a gente colocar o JavaScript. CEP.logradouro. Perfeito. Depois, o complemento, eu também quero aqui. Então, vamos lá. Deixa eu vir aqui. Abre e fecha o chave. CEP.complemento. Perfeito. Depois, a gente quer o bairro. Então, vou tirar aqui o fixo. Abre e fecha o chave. O nosso CEP.bairro. E depois, temos a cidade, que fica dentro de localidade. e o f o estado então vamos apagar aqui abre e fecha chaves sep.localidade e vamos lá no estado abre e fecha chaves sep.uf vamos testar isso aqui tudo agora então eu vou salvar vou atualizar aqui e atualizei ele vai vir vazio porque ele veio vazio porque a gente não procurou nada eu abri a aplicação eu ainda não busquei nada então eu também nem quero mostrar esse nosso man aqui se ele não tiver mostrado nada então o que que a gente pode fazer A gente pode fazer uma renderização condicional, ou seja, só renderiza esse nosso espaço aqui quando de fato tiver buscado alguma coisa. Então quando a gente busca alguma coisa eu vou colocar dentro do nosso useStateSap. Então eu vou fazer uma comparação, ou seja, vamos aqui em cima do nosso main, eu vou abrir e fechar as chaves aqui, e eu quero acessar um object.keys, abre e fecha aqui, vou passar a nossa useStateSap.length, por maior que zero, ou seja, tem alguma coisa dentro desse nosso useState, quer dizer que o cara foi lá, pesquisou um CEP e deu tudo certo. Então, se tem alguma coisa dentro desse useState, a chave vai ser maior que 1, porque vai ter mais de uma chave ali dentro, dentro desse nosso CEP. Então, se for maior que zero, eu posso passar a afirmação aqui, os dois e esse comercial, abro e fecho aqui o nosso parênteses, que é para retornar alguma coisa na tela, só que o que eu quero retornar? Eu vou retornar esse nosso main aqui. Então... vou trazer, copiei o meu main, vou apagar o main aqui e vou colocar o nosso main aqui dentro. Deixa eu dar aqui até um tab, vou dar mais um tab aqui. Então, o que a gente está fazendo aqui se você teve alguma dúvida? A gente está acessando a nossa useStateSap, que é onde tem o objeto lá com os itens, e eu estou verificando se tem alguma coisa dentro desse objeto. E a forma da gente verificar no JavaScript, por exemplo, se tem alguma coisa, alguma propriedade dentro do objeto, é utilizando o object.keys.length, que é o tamanho desse objeto. Se o tamanho é maior que zero, concorda que tem alguma coisa? Então, se tem alguma coisa, eu quero mostrar esse nosso branco aqui, que é esse nosso main. Então, se eu salvar aqui, você pode ver que quando eu abrir minha aplicação, não aparece mais. Porque, por enquanto, a gente não tem nada lá dentro. Agora, vamos digitar aquele CEP de novo? Deixa eu pegar aqui o CEP que eu estava usando para fazer o teste. Então, vou colar aqui o CEP. Vou buscar. E olha que legal. Então, aqui eu busquei. Você pode ver que apareceu, porque agora... Já tem alguma coisa dentro desse nosso estado CEP, então ele renderizou o que tem dentro do main. E aí ele mostrou o main, que tem todas as informações. Então o CEP aqui, o número dele, Avenida Paulista, o complemento, Bela Vista, São Paulo. Sei lá, eu peguei qualquer CEP ali no Google, tá? Então deixa eu achar o CEP. Vamos lá, eu peguei o CEP aqui lá de Copacabana, então eu vou colar aqui, vou clicar. E olha que legal, ele limpou o input, mostrou o CEP que eu digitei, Avenida aqui, maravilha, o complemento, Copacabana. Rio de Janeiro aqui, RJ. Então, show de bola demais com a aplicação e ainda a gente colocou a animação. Quando o cara entra, tem esse efeito aqui, né? Então, ficou uma animação bem legal. Então, vou procurar aqui de novo. Maravilha. E se ele continuar procurando, ó, vou pegar o do CEP aqui, vou procurar, cliquei, ele muda o CEP aqui sem problema. E toda vez que muda, ele limpa o input pra você digitar outro, por exemplo. Agora sim, buscador concluído com sucesso. Primeira coisa, ó, antes de você sair nesse vídeo de qualquer ação, me conta o que você achou. e desse projeto aqui da gente desenvolver eles junto aqui a gente aprendeu bastante coisa né deu para gente praticar bastante coisa também e lembrando vocês que ó as inscrições da fábrica de aplicativo tá aberta tá então se você é uma pessoa que quer evoluir de uma vez por todas e aprender entrar para o mercado de trabalho criar seus aplicativos para Android para iOS criar seus sistemas web e sites com o react.js dominar todo o poder do react também tudo passo a passo e claro que é um curso e sim algo totalmente prático que eu vou te acompanhando, tem todo o nosso suporte e também o grupo dos alunos, tá? Então aproveita, vou deixar uma promoção exclusiva pra vocês aqui embaixo, tá? Então te vejo lá na turma e comenta aqui embaixo o que você achou desse vídeo. Se você quer mais desses conteúdos dessa série de colocar a mão na massa e desenvolver algo junto, passo a passo aí. Então coloca lá. Te vejo lá na turma. Até mais.

Então, bora lá, bora colocar a mão na massa, sem enrolação. Primeira coisa, para a gente poder começar a criar esse nosso projeto com o React, você precisa ter o Node.js. Então, caso você não tenha o Node.js instalado na sua máquina, só acessar o Node.js.org e sempre baixe a versão LTS. Beleza? Então baixou a versão LTS, é só clicar da Next, Next aí, e depois que você instalar, para você conferir se isso aqui foi instalado, é só você acessar o seu CMD e aí digitar Node, espaço, traço B, e ele vai devolver alguma versão, que é a versão que você instalou.

Feito isso, maravilha, a gente está pronto para poder começar o nosso buscador. Então vamos lá. Como é que a gente cria um projeto com o ReactJS?

É bem simples, a gente pode acessar o CMD na pasta que você desejar, e já lembrando aqui, não cria projetos dentro de pastas que tem acentos, não cria projetos dentro de pastas que tem caracteres especiais, exclamação, ponto e vírgula, não cria dentro dessas pastas, tá? Então, no meu caso, estou dentro de uma pasta chamada YouTube aqui. Então, eu vou criar aqui mesmo, npx create-react-app. Vou chamar o nosso projeto agora de buscador. Qual que é o nome do projeto?

Então, eu vou dar o nome de buscador aqui. Então, cuidado com nomes grandes ou o nome não pode ter espaço também. Então, está criando aí.

Agora é só esperar ele criar. E aí eu volto. Show de bola. Ele já devolveu para a gente.

A gente já pode acessar a pasta do projeto que a gente criou. Então ele criou uma pastinha com o nome do nosso projeto. Então buscador. Eu chamei de buscador aqui.

E depois disso a gente já pode rodar o nosso projeto. Acessar ele pelo Visual Studio Code. Então o que eu vou fazer? Vou acessar aqui o nosso CD buscador.

Então acessei a pasta do projeto que ele criou para mim. Eu vou abrir ela no meu Visual Studio Code. Então eu vou dar um code espaço ponto aqui. Para abrir ela no meu VS Code. Então eu vou vir aqui.

Deixa eu puxar aqui para ficar melhor. Maravilha. E lembrando, se você não abriu com o code espaço ponto, não tem problema.

É só você vir aqui em File, Open Folder e ir até a pasta do projeto que você criou. No nosso caso, ele chamou aqui de buscador. Vai lá dentro dessa pasta e abre essa pasta dentro do Visual Studio Code.

Então, bora começar. Deixa eu tirar minha cara aqui para não atrapalhar a gente. E o segundo passo é a gente rodar o projeto que a gente criou.

Então, já estamos dentro aqui da pasta do buscador, aqui no nosso CMD, e o comando para a gente rodar o projeto... é npm espaço Start ele vai subir esse nosso projeto então ele vai começar a rodar aqui no nosso navegador deixa eu até abrir aqui o navegador ó já abriu aqui para mim tá carregando vamos aguardar e show de bola já abriu então ele tá rodando aqui no nosso local host 2.3 mil que é o padrão beleza ou a gente pode acessar pelo Network local aqui então maravilha podemos vir aqui atualizar e essa é a cara principal quando abre né quando a gente cria um projeto novo e roda Bora lá então, agora começar o nosso buscador. Então a gente vindo aqui dentro da estrutura do nosso projeto, primeira coisa a gente se depara então com a pasta NodeModels, que é a pasta onde vai ficar as dependências que a gente instalar para o nosso projeto. Se a gente vir dentro de package.json, a gente tem várias coisas aqui. A gente tem vários scripts, por exemplo, a gente tem um script aqui que a gente acabou de rodar, que é o npm start, que é para ele rodar esse script aqui para rodar esse nosso projeto.

Maravilha! A gente também tem o de build para depois fazer um build de teste. o dia já tá e a gente também tem algumas outras configurações que ele já vem por padrão tá e também se a gente subir aqui a gente tem uma dependência ou seja algumas dependências que o react precisa para a gente poder de fato utilizar ele como o próprio react ele vem com um react Dom ele vem também com react scripts que é um pacotezinho ali do react igual a gente viu aqui para poder estar tá para poder gerar o vídeo então tudo o script ali pronto para a gente poder rodar e ter o que a gente quer que é gerar o build fazer um teste ou até Startar o projeto E também a gente vem com a parte de WebVitals Que é pra PWA, perfeito? Então aqui a gente tem as dependências E todas essas dependências vão ficar sempre dentro de NodeModules E essas dependências também tem outras dependências, né?

Então você pode ver que tem bastante coisa aqui Mas essa pastinha aqui a gente acaba nunca mexendo, beleza? Aqui fica as dependências do nosso projeto Dentro de Public aqui então Aqui a gente vai ter o Favicon Que é esse iconezinho aqui que a gente tem do lado aqui do Title, tá? Do lado do Title Se a gente vir aqui dentro de index Que é o nosso arquivo index de fato Que é onde ele chama o favicon É onde ele configura aqui todo o nosso theme color Para quando for PWA Onde a gente também tem como mudar Deixa eu aumentar aqui um pouquinho Descer aqui embaixo Olha o nosso title aqui React App Se a gente vier aqui, está aqui o React App Se você quiser mudar, a gente pode mudar aqui Para por exemplo, buscador de CEP E eu vou salvar aqui Vamos lá, vou atualizar, já apareceu aqui, buscador de CEP.

Maravilha. Por enquanto não, vamos mudar o favicon aqui do lado. Podemos deixar dessa maneira aqui.

E a gente tem aqui um div id root. E cadê o resto do meu componente, que é esse componente que ele gerou, com essa imagem aqui, com esse texto, com esse link. Cadê? Então quando a gente roda um projeto com o React, o React o que ele vai fazer?

Ele vem aqui dentro, dentro de src, e roda um carinha chamado index.js. Perfeito? Então ele roda o nosso index.js, cria ali um componente, e esse componente ele é chamado aqui ó, de app, e esse componente ele é renderizado dentro da document.getElementById root.

O que que ele fez? Ele criou esse nosso componente app, que a gente já vai ver, e jogou ele dentro aqui ó, do nosso id root. Então onde que tá o nosso id root? Tá aqui dentro.

Então essa é a nossa id root, então o nosso componente ó, ele é montado aqui dentro, perfeito? Se a gente abrir aqui ó, inspecionar. Maravilha! Se a gente vir aqui no Elements, você pode ver que temos aqui, ó, ID root e dentro da ID root, deixa eu deselecionar aqui e colocar aqui lado a lado para você ver também, tá?

Então, ó, clicando na ID root, você pode ver que tem tudo o nosso projeto ali dentro, como eu falei. E agora, então, onde que está o componente? Ele renderiza o nosso famoso componente app, que é o nosso componente principal da aplicação.

E onde é que está ele? Ele está aqui dentro, ó, src, temos o nosso index, que é o componente que está sendo... montado aí, que está estruturando todo o nosso primeiro componente, e aqui dentro a gente também tem o famoso app.js. Show de bola! Então esse app.js sim, agora sim a gente tem aqui o nosso famoso, a nossa logo, que é uma SVG, que é essa logo do React, já vem por padrão.

A gente tem o parágrafo aqui, edit, está tudo escrito aqui, que a gente já vai mudar. A gente tem o textinho aqui também, learn React, tem um textinho aqui também, que vai lá para a documentação. Então, maravilha! Mas antes da gente começar a mudar tudo isso aqui, vamos... limpar um pouquinho a estrutura, tem bastante coisa que a gente não vai utilizar ou que a gente vai recriar do zero.

Então, vamos lá. A primeira coisa que a gente vai fazer aqui é, vamos vir aqui, app.css. A gente não vai usar. Então, eu vou vir aqui, vou dar um delete. Ele vai quebrar a aplicação, já já a gente vai arrumar.

Eu vou vir aqui dentro do nosso src app.test. Não vamos usar, então eu vou dar um delete. Opa, está abrindo a pasta aqui do public.

Dentro de src, o nosso logo.svg. Vou deletar. Perfeito. Vou fechar aqui. O que mais que eu também quero deletar?

O setup testes também posso deletar. O nosso report web vitals, que é para PWA. A gente não vai mexer com isso agora.

Vou deletar. Então, show de bola. Ficou o web.js, o index.css e o nosso index.js. Então, agora vamos começar a corrigir tudo que a gente deletou. Primeiro, aqui no nosso index.js, ele chamava o report web vitals.

Que a gente não tem mais, né? A gente apagou. Então, posso aqui tirar ele. Então, eu deleto ele. O import do report web vitals também, ó, posso tirar, vou salvar aqui, posso fechar.

Vamos aqui no nosso app.js, que é o componente, a gente não tem mais o arquivo de CSS, nem a logo, então aqui dentro da nossa componente principal, eu vou apagar aqui, vou deixar apenas, ó, a nossa div vazia, vou colocar aqui, tem um h1, teste, projeto, e eu vou salvar, vou salvar aqui, vamos lá, vou dar um ref5 aqui, e apareceu o nosso teste projeto. Então maravilha, agora a gente pode de fato começar a criar esse nosso componente app, que vai ser o nosso componente principal, que é aquele buscador completo que a gente vai fazer. Então vamos lá. Primeira coisa que a gente faz é zerar o CSS, dar um reset que a gente ama. Então dentro do nosso index.js, que é o nosso CSS global, que está sendo chamado aqui dentro do index, ele está sendo chamado aqui.

Então ele é um CSS global, quando a gente quer zerar a margem, passar alguma fonte, igual já vem criada. Mas no nosso caso... A gente vai aplicar aqui um seletor basicamente global E vou falar, ó, margin 0 Padding 0 E também eu quero falar um font family Aqui eu vou passar sans serif Ou seja, qualquer fonte que não seja sem serifa, tá? Então, se eu salvar Vou atualizar, você pode ver que ele já grudou E, ó, não tem mais aquela serifa da fonte, tá?

Se eu tirar o sans serif, ó Vou comentar aqui e eu vou salvar A gente volta pra fonte com serifa Mas fica feio, né? Então, vou voltar aqui pro font family sans serif e a gente vai ter aqui a nossa fonte sem serif, tá? Então, maravilha, e ele já zera as margens, pede que o H1 tenha por padrão, o H2, e aí fica bem melhor. E agora, então, o que a gente já fez no nosso reset, bem básico aqui, né?

Pra gente poder começar, de fato, dentro do nosso app.js, que é o componente principal aqui que a gente vai trabalhar. Agora, vamos, então, estruturar primeiro o esqueleto do nosso HTML pra depois fazer a parte funcional, que é buscar um CEP e trabalhar na funcionalidade, certo? Então, bora lá. bom então a primeira coisa nesse que lesney eu vou mudar o nome dele para container tá maravilha dentro desse container então posso até deixar o h1 aqui a gente pode colocar buscador maravilha, vou dar até um class name aqui pra depois a gente estilizar melhor, vou chamar ele de title perfeito, então depois aqui desse cara eu vou criar mais uma div e essa outra div aqui depois do h1 vai ser a nossa div do input o nosso container input, vou chamar ela de container input aqui o class name pra ela, e dentro dela então a gente pode ter um input do tipo text que é pro cara digitar, vou dar um enter aqui e vou dar um enter aqui no nosso type pra gente colocar mais uma propriedade eu vou passar um placeholder...

Quando não tiver nada digitado, vai ser, por exemplo, digite seu CEP. Três pontinhos. Maravilha.

Então, show de bola. Se eu salvar, vou atualizar. Já está começando a aparecer aqui.

Deixa eu até diminuir aqui para a gente ir vendo ao mesmo tempo. Então, perfeito. Maravilha.

Depois aqui do nosso input, então, eu posso colocar o botão para o cara poder fazer, de fato, a busca. Então, eu vou criar aqui um button. E esse button aqui vai ser procurar, por exemplo.

Vou dar um class name para ele aqui. Button search. que a gente já vai fazer.

Só que eu não quero um texto. Eu quero que seja um ícone aqui, aquela íconezinha, aquela lupinha pra ele poder buscar. E pra gente trabalhar com ícones, a gente vai instalar uma biblioteca bem legal.

Deixa eu trazer aqui pra vocês. Maravilha. Deixa eu aumentar aqui. Que é a nossa React-Icons, tá? Então é bem simples.

Vou vir no meu projeto, vou parar de rodar o meu projeto e vou instalar ela, tá? Então, ó, pra instalar o comando é bem tranquilo. Eu vou copiar até aqui.

Vou colar aqui. só vou tirar esse traço-traço save que não precisa, e vou instalar dentro do meu projeto. Então, npm espaço install, faço react-icons, e agora é só aguardar. Enquanto ele vai instalando aí, a gente pode ir vendo aqui, que a gente tem várias bibliotecas, deixa eu tirar esse zoom gigante aqui, temos várias bibliotecas para a gente poder utilizar.

Por exemplo, a gente faz o import aqui do nosso feather, e aí eu poderia utilizar aqui qualquer ícone que tem aqui. Ou, ah, eu quero utilizar o dev-icons, eu posso importar ela aqui, e posso utilizar aqui. Se eu clicar, ele vai copiar já o nome do ícone.

Ou eu quero o font Awesome, eu posso importar dessa forma e aí usar os nomes dos ícones aqui para poder utilizar na aplicação. Então, enquanto ele vai instalando aqui o React Icons, eu tenho que dar um recado importante para você, que a fábrica de aplicativo que é o nosso treinamento completo está com a turma aberta, tá? Então, se você quer entrar para o mercado de trabalho, sair do zero ali com todo o nosso suporte e acompanhamento, então desenvolver aplicativos, publicar os aplicativos, desenvolver sites como React, sistemas web, tudo completo e passo a passo, além de todo o grupo com os alunos e instrutores. Ó, link tá na descrição e aproveita, tá?

Que a turma é exclusiva e o desconto que eu deixei aqui pra vocês também. Então, ó, instalou, bora voltar. Agora que instalou o nosso React Icons simples, eu vou rodar novamente o meu projeto.

Então, npm espaço start aqui, ele vai subir o nosso projeto de novo, ó. Ele vai rodar de novo. Deixa eu fechar aqui e vai abrir aqui no meu navegador. Então, enquanto ele vai abrindo aqui, vou minimizar o meu CMD e já abriu. Perfeito.

Então, como eu mostrei para vocês aqui, a gente tem várias bibliotecas. Eu quero, então, ao invés de colocar um procurar, eu colocar uma biblioteca aqui para a gente poder utilizar. Então, vou importar aqui para a gente um ícone para a gente poder utilizar. Então, import, vou trazer aqui do React Icons. E aí, como eu falei, tem várias bibliotecas.

Eu vou utilizar aqui o barra FI. Maravilha. E eu vou trazer uma conhecida como FI Search. Tá? Perfeito.

Então, show de bola. Agora, eu quero utilizar ela. A gente utiliza como se fosse uma tag, um componente Então eu abro aqui nosso componente e fecho aqui mesmo E eu preciso passar duas propriedades para ela Que é o size, ou seja, qual que é o tamanho Então eu vou passar aqui para ela uns 25 E a color que eu quero Então eu quero que seja branca a nossa cor Vou colocar preto aqui só para mostrar para vocês Então vou salvar, vou atualizar E ó, está aqui a nossa search aqui Beleza, mas eu quero branco, né? Nosso fundo depois vai ser preto, então vou deixar branco aqui e perfeito.

Depois aqui da nossa div que a gente chamou de container input, vou até tirar o espaço. Depois dela, então, a gente vai ter a área, então, de quando o cara buscar um CEP. Então, vamos criá-la, então. Eu vou chamar div aqui novamente ou a gente pode até mudar ao invés de ser div, eu posso criar uma tag main, para ser mais semântico que aqui é a parte importante do nosso site, que vai ser gerada.

A main, eu vou dar uma class name para ela. Vou chamar de main também. Show de bola. Vou colocar um h2.

sete dois pontos é que eu vou colocar um certo qualquer do 79 032 222 nem sei se existe isso então Maravilha depois eu vou criar um spam e vai ser o logradouro por exemplo rua teste algum então vai ser o nome da rua aqui perfeito então vou criar outros punk complemento algum complemento beleza só para a gente ter alguma coisa visual para poder utilizar e depois tornar tudo isso real né buscando as informações que a gente vai consumir de uma API então Depois do complemento aqui, eu também quero ter mais um span, que vai ser o bairro. Então, vou colocar aqui Vila Rosa, vai ser o bairro. Sei lá, também estou inventando aqui. E outro span que eu vou colocar, que vai ser a localidade e o estado.

Por exemplo, Campo Grande. Traço MS, que é onde eu moro. Então, perfeito. Se eu salvar aqui, a gente já vai ter a nossa área onde vai ficar gerado. Agora, a gente precisa estilizar para fazer a parte funcional.

Então, vamos lá. Primeira coisa, dentro de src, vou criar um new file aqui também. Vamos chamar de styles.css.

Pode ser, não tem problema. E agora, vou vir dentro do nosso app.js e vou importar esse nosso estilo. Então, import aqui, ponto barra, está dentro da nossa mesma pasta.

Então, styles.css. aqui. Vou salvar e agora a gente pode começar pelo nosso container aqui.

Então, eu vou salvar aqui e vamos lá. Ponto container, que é uma class, né? Então, a gente deu aqui, como no React a gente não escreve class e sim a gente escreve class name, beleza? Então, a gente deu um class name chamado container. O que eu quero fazer?

Eu quero centralizar todos os itens no centro da nossa tela. Então, eu vou passar uma altura de 100VH, ou seja, 100 view height. Ele vai pegar o tamanho inteiro da nossa view height aqui do document e vai tentar colocar 100%.

Então, senha aqui de VH, vou passar para ela um display flex, para a gente trabalhar com o Flexbox, Justify Content Center e também um Align Items Center aqui. E eu vou passar aqui, os alinhamentos dos itens vão ser em coluna e não um ao lado do outro, que o Flexbox traz para mim por padrão. Então, Flex Direction, a direção dos itens vão ser em coluna, tá?

Então, fazendo isso, centralizamos todos os nossos itens. Maravilha! Depois disso, então, eu quero colocar uma corzinha de fundo. Vamos passar aqui um background. background, vou passar um linear gradient, um gradiente de 12, 12, 12 até vírgula, então a gente pode passar outra cor aqui que eu separei, que é o 21, 2B, 4, 6, vou salvar, a gente tem esse gradiente aqui que começa ali do 12, 12, que é esse cinza, e vai vindo até o nosso, essa cor meio azul que eu passei, beleza?

Estou de bola, então vamos lá, esse é o nosso container, depois do nosso container a gente tem o nosso title aqui, então vamos construir o title, ponto title, Tá? E tu tem que ser bem grandão, né? Ele é uma chamada ali. Então, font-size aqui eu vou passar uns 85 pixels pra ficar bem grande.

Show de bola. Depois disso eu vou passar que a cor vai ser branca. Vamos salvar. Beleza, olha que massa. Já ficou bem grandão, né?

Depois a gente dá uma diminuída quando tiver menor aqui. Então, já tá aqui o nosso buscador. Eu quero colocar uma animação pra quando o cara entrar aqui, ter uma animaçãozinha nesse nosso título.

Vamos fazer? Então, a gente pode utilizar o keyframes, tá? Então, arroba keyframes. Abra aqui nesse identifier aqui para a gente dar um nome para essa nossa animação.

Por exemplo, eu vou chamar de flip title. O nome que eu quiser. Flip title, ele vai vindo from até alguma coisa.

Então, to. Então, from. Ou seja, ele vai começar do nosso transform, onde eu quero rotacionar o eixo X de 90 deg até zero. Então, até ficar no jeito que está, que é esse texto padrão aqui.

Então ele vai estar meio em 90 graus e vai voltar aqui para o nosso zero, fazendo um efeito de flip. Então se eu fizer outro transform agora, falando que ele vai vir até o nosso rotate x, zero, dag, vou salvar. E agora é só a gente aplicar essa nossa animação.

Olha que simples. Eu posso vir no nosso title e falar, olha, eu quero usar uma animation que eu chamei de flip title. Cuidado para colocar o mesmo nome que esse aqui.

Eu quero passar quantos segundos para essa animação vir de 90 até zero. Eu quero que seja dois segundos que ela vai demorar para fazer isso aqui. Então, vou salvar. Olha que legal.

Quando o cara entra no site, ele vai ter esse efeito. Entrou no site, muito massa. Então, já dá uma carinha a mais para o nosso projeto aqui. Então, bem legal.

Então, agora a gente pode continuar. Depois do nosso title aqui, se a gente olhar, eu tenho toda a nossa div aqui, que eu chamei de container input. Então, vamos estilizar o nosso container input.

Então, ponto container input. Deixa eu subir aqui. Vamos passar um background color aqui de um RGBA. Para ter uma opacidade, então 255, 255, 255, vai ser branco, 0,2.

Então, uns 20% de opacidade. Então, vai ter uma opacidade em todo o nosso container aqui do input. Depois disso, eu vou passar um padding interno de uns 15 pixels em todos os lados.

Margem 34 pixels em cima e embaixo. E zero nas laterais. Então, eu vou aplicar uma margem externa em cima e embaixo de 34 pixels aqui. Beleza.

Eu também vou falar para ele ter um display flex, para ficar um ao lado do outro. Border. Radius aí de uns 8 pixels Arredondar um pouquinho essa borda E também quero colocar um box shadow Ou seja, um pouquinho de sombra ali, né?

De 1 pixel, 3 pixel e 8 pixel E a gente pode passar uma cor Se fosse 0,0,0 ia ficar bem forte ali a nossa sombra Beleza? Mas eu quero um pouquinho mais fraco Então a gente pode trazer um RGBA Pra ter uma opacidade nessa cor Então 0,0,0 é o preto 0,0,5 é 50% Então a gente tira um pouquinho a força desse nosso preto Então fica bem mais legal Agora eu vou acessar o nosso ponto container input E acessar a nossa tag de input Então dentro da tag de input, eu quero tirar esse background branco aqui Então eu quero falar, olha Background color vai ser transparente desse nosso input aqui Ó, já ficou transparente Eu quero que ele não tenha essa borda padrão Border 0 Show de bola, agora sim. Eu quero ter um font-size para ele de uns 20 pixels. Color, quando o cara digitar dentro, vai ser branco. Então, se o cara digitar, é branco.

Só que ele tem esse outline aqui que a gente chama. Se quiser tirar, eu posso vir aqui. Outline. Opa. Outline.

Not. E quando o cara clicar no input, não tem mais outline. Margin. Right.

Eu quero passar também uns 8 pixels para desgrudar do nosso botãozinho aqui. Beleza? Então, o cara pode digitar.

Ele tem essa margem aqui entre o botão e o final do nosso texto. Perfeito. E eu posso mexer também na cor do placeholder, porque se eu apagar todo o texto aqui dentro, apaguei, nosso placeholder está muito apagadinho.

Então eu posso vir aqui, ponto container input, acessar o input, eu posso colocar dois pontos, mais um dois pontos, e aí aplicar no nosso placeholder, que é a nossa propriedade aqui. Então eu quero aplicar, por exemplo, um hashtag F1, F1, F1, que é meio que um cinza ali. Então se eu salvar, a gente tem agora ali bem mais claro, né?

E aí o cara pode editar aqui. Perfeito. Depois...

button search, eu acho que foi esse o nome que eu dei, né? Deixa eu ver aqui. Foi button search pro nosso botão.

Então, button search e vamos lá. Pra esse button search, eu também quero colocar um background color transparente pra ele. Show de bola. Eu quero colocar um border zero.

Beleza. Eu quero dar um display flex e alinhar ele no centro conforme o nosso container input. Então, justify content center.

E também vou dar aqui um align items center aqui. E quando eu colocar o mouse em cima, ele não tá ficando aqui com o cursor pointer. Eu posso falar, olha, cursor, pointer aqui para ele também.

Então, quando passa o mouse, ele fica com a mãozinha de um botão. E se quiser aplicar um efeito quando passar o mouse, a gente pode dar um zoom nessa nossa lupa também. Eu posso vir aqui, ponto, button, search, dois pontos, hover.

Quando passar o mouse em cima dele, a gente pode aplicar aqui, então, um transform de scale, ou seja, de aumentar, opa, só scale aqui, de 1.2, como se fosse um 120%. Então, maravilha. E agora eu passo essa animação aqui.

A transition aqui, de transform, vai ser de 0.5 segundos aqui. Então, vamos salvar. Quando eu passo o mouse, ele dá um zoom ali.

Se eu colocasse mais, vou colocar 1.5 só para vocês verem. Ficaria gigante. Mas eu acho que 1.2 é bem legal. Então, fica bem bacana.

Maravilha. Vamos agora para baixo, que falta aqui o nosso main. Então, ponto main. É a nossa área aqui, onde tem todos os itens depois. Aqui, todo o nosso main.

Vamos estilizar ela. Bem simples, eu quero centralizar tudo que tem nela também. Então, eu vou dar aqui um display flex, um justify content center, um align item center. Mas eu quero um item abaixo do outro. Então, um flex direction column para ficar um item abaixo do outro.

E agora a gente já tem tudo aqui, só que eu quero colocar uma cor de fundo. Então, um background color branco. A gente pode passar uma width fix aqui, uma largura de uns 500 pixels. Maravilha.

E um border radius seguindo 8 pixels, que é o padrão que a gente utilizou ali em cima. Então, beleza. E agora, então, eu vou vir aqui no nosso ponto main, h2.

Eu acho que é um h2 que a gente está utilizando aqui, h2. Dentro do h2, eu vou dar uma margem em cima e embaixo de uns 16 pixels para desgrudar ali em cima. E zero nas laterais. Beleza.

Ponto size aqui de uns 39 pixels. Ponto main. E agora a gente tem os span, que é cada item aqui embaixo.

Cada item aqui embaixo, eu vou apenas dar uma margem bottom para espaçar o item de baixo de uns 16 pixels. Beleza, ele já vai dar uma espaçada legal. Depois disso, então, eu vou dar um font-weight-bold aqui para deixar negrito, para ficar chamativo mesmo.

Vou salvar. Se a gente diminuir, vamos ver se ficou legal. Só que, olha, quando a gente diminui, fica muito grande. A gente pode aplicar um media query também para, olha, quando eu estiver aqui quebrando aqui, eu quero aplicar um estilo menor para o nosso tamanho aqui. Então, se eu abrir um inspecionar, a gente pode ver aqui dentro de elements.

E quando eu mexo aqui, eu tenho aqui os pixels. Então, se eu mexer, temos aqui 700 pixels. Quando que está quebrando?

em torno de uns, acho que é aqui ó, 620 dá pra gente quebrar pra outro tamanho. Então, aqui embaixo, eu posso criar um Media Query, sem problema, tá? Eu posso criar aqui um arroba media, por exemplo, max-width, dois pontos.

Quando chegar no máximo 620, eu quero aplicar outro estilo, por exemplo, um ponto title, de um font-size aqui de uns 60 pixels. Então, salvei. Quando, ó, tá maior, ele aplica o grandão. Quando chegar a menos, ó, 620, que eu... coloquei, aplico o menor, já fica bem melhor né, eu posso também diminuir mais algumas coisas, por exemplo, main h2, font size aqui para ele de uns 28 pixels, diminuiu um pouquinho, beleza, posso acessar também o ponto main, a nossa width aqui do main era fixa em 500 pixels, eu quero passar agora aqui a width, vai ser em porcentagem, por exemplo, vai pegar 80% da tela, eu posso passar aqui, ele vai sempre tentar pegar 80% da tela, então ele vai seguindo aqui, e já ficando bem mais responsivo.

Também eu posso passar aqui uma mínima altura para ela vai ser 250 pixels aqui. Ficou bem legal já, bem bacana. Agora então a gente finalizou esse nosso estilo e bora para a parte funcional.

Qual que é a parte funcional que eu preciso fazer aqui? Eu preciso ter algo dinâmico na minha aplicação. Quando o cara digitar qualquer coisa aqui, eu preciso salvar em algum local alguma variável e quando ele clicar eu preciso ir lá na nossa API que a gente vai utilizar para buscar esse CEP aqui. Bora fazer isso?

Então quando a gente vai trabalhar com algo dinâmico, que eu quero trocar de valor conforme a minha aplicação, conforme alguma ação, a gente utiliza um estado, ou também conhecido como um hook useState. Então, bora aplicar ele na nossa aplicação. Então, vamos lá.

Vou importar aqui em primeiro. From React, ele vem do React. Vamos chamar de useState.

Vou criar ele aqui dentro do nosso FunctionApp, que é o nosso componente. Const, vou chamar ele aqui de input. Set input igual useState.

Abro parênteses e aqui eu coloco o valor que ele vai começar. Por exemplo, vamos lá. Vou falar que ele vai começar com teste 1, 2, 3. Então, vamos entender aqui.

O que a gente tem aqui? Primeiro, é qual é o nome desse nosso estado. Eu chamei ele de input. Segundo, aqui depois do vírgula, o que é? É a função que a gente tem para trocar o valor desse estado.

Então, quando eu chamar um input apenas, eu estou querendo apenas saber qual é o valor desse estado. Quando eu estou chamando essa função setInput, é para eu passar um valor novo para esse estado. Vamos ver isso na prática?

Eu vou alinhar ele com o nosso input. Então tudo que o cara digitar dentro do input, o que eu quero fazer? Eu quero ir salvando dentro desse nosso estado, concorda? Vamos a tag aqui de input, e eu preciso passar algumas propriedades.

Primeiro, que é o value, ou seja, o valor desse meu input vai estar sempre atrelado ao nosso useStateInput. Então se eu salvar aqui, olha que legal, quando eu abro a minha aplicação já aparece teste 1, 2, 3. Por quê? Porque se ele está atrelado ao nosso input, O nosso useStateInput que a gente criou já tem o valor 123123. Então, ele já coloca dentro desse nosso tag de input o teste 123123. Mas, no nosso caso, eu quero que comece vazia mesmo.

Então, eu vou salvar e pronto, começa vazio. E toda vez que eu digitar alguma coisa aqui dentro, eu quero salvar dentro do meu input. Então, tem uma propriedade aqui para a gente chamar, que é o onChange. Abre e fecha aqui. E para esse onChange, eu recebo, então, uma função anônima aqui.

E a gente recebe o evento. Eu vou chamar de e. Poderia ser event, tá? Eu vou chamar de e para ficar menor. Então, a gente recebe esse evento.

E agora eu posso passar para o nosso setInput. Abre e fecha aqui. Então, como eu falei, quando a gente chama o setInput aqui, eu estou querendo passar um valor para esse nosso estado aqui que eu chamei de input. Então, setInput. Agora eu recebo o meu evento.

A gente tem acesso ao valor do cara, o que ele digitou através do e.target.value. Então, quando eu acesso o e.target.value, o que eu estou fazendo? Eu estou pegando tudo o que ele digitou ali dentro. e passando para a nossa useStateInput, beleza? Então, vou salvar, vamos lá, vou atualizar.

Quando eu digito alguma coisa, ele está digitando, e toda vez que eu digito, ele chama o onChange e passa para o nosso estado input aqui, o que eu digitei, que no nosso caso é isso aqui. Vamos ver se realmente está recebendo? Então, quando eu clicar no meu botão, eu quero chamar um alerta e mostrar o que eu tenho dentro dessa nossa useState. Vamos lá. Então, dentro aqui do botão, a gente vai acessar um onClick, que é quando você clicar nesse seu botão de search, Eu quero chamar uma função.

Por exemplo, handleSearch. Vamos criar essa função? Então, vamos aqui em cima.

Embaixo do useState, function handleSearch. Vou dar aqui um alert, test, para a gente ver que ele clicou. Ou até clicou, para a gente ver aqui.

Vou salvar. Toda vez que eu clicar, ele chama o clicou. Mas eu quero que ele mostre, então, o valor do input. Vou dar um espaço, mais o nosso useState input. Então eu quero ver o que tem dentro do nosso estado input aqui.

Vou salvar. Vou dar um F5. Atualizei. E eu vou digitar aqui. 79, 003, 222. Cliquei.

Valor do input. E olha aqui o valor que eu digitei. Maravilha. Se eu digitar alguma coisa.

Dá Enter. Temos alguma coisa. Então toda vez que eu digito eu já estou salvando o valor aqui. Maravilha.

Qual que é a próxima lógica que a gente precisa fazer? Quando eu clicar aqui. Eu quero ir lá e buscar. o CEP pra poder ter as informações depois e mostrar aqui. Então agora, bora conhecer a API que a gente vai utilizar pra passar o CEP e ela devolver todas as informações desse CEP pra gente.

Bora lá. Então vamos lá, deixa eu aumentar um pouquinho aqui. Vou clicar aqui. Então vamos lá, deixa eu colar aqui a URL da API. Então eu peguei qualquer CEP aqui no Google, tá lá na Avenida Paulista.

Então basicamente é via cep.com.br barra ws, barra qual que é o CEP que você quer buscar, barra jason pra ele devolver um jason pra gente. Tá? Então é essa API que a gente vai utilizar para consumir. Então, primeira coisa, vamos parar de rodar esse nosso projeto para a gente instalar uma biblioteca para trabalhar com requisições HTTP. Então vamos instalar ela, npm install, Axios.

Vamos aguardar ela ser instalada. Show de bola, já instalou aqui para mim. Então eu vou rodar novamente a minha aplicação npm start. E agora vamos configurar o Axios na nossa aplicação.

Então dentro do SRC... vou criar aqui um new folder, vamos chamar de services, dentro de services eu vou criar aqui um new file chamado api.js, e agora aqui dentro vamos configurar, primeiro vamos começar importando aqui o Axios, então import Axios from Axios, show de bola, e eu vou configurar a nossa base URL, então const api igual a Axios.create, abro parênteses, abro chaves aqui, e aqui dentro eu vou criar então a nossa base URL. Dois pontos, abro aqui aspas para a gente colocar.

Então lembrando, o URL aqui é tudo maiúsculo, tá? Cuidado com a escrita aqui. Deixa eu colar aqui a minha API. Deixa eu pegar lá aqui de novo, na verdade que eu não copiei. E colar aqui.

Então o que é base URL? Vamos lá. Base URL é algo que não vai mudar.

É a URL base ali na sua API que você está utilizando. Porque se você parar para pensar, até aqui, viacep.com.br barra ws, nunca vai mudar. Essa aqui é uma URL que nunca muda.

Agora, depois do barra aqui, a gente tem o CEP do cara e o barra JSON, que é o formato que você quer trazer. Aí sim, isso aqui é uma rota. Então, eu vou usar a nossa base URL até o nosso barra WS aqui, perfeito?

E partir daqui, posso até apagar, depois vai o CEP que você quer e barra JSON, que é o formato. Então, vou salvar aqui, a gente configurou já. Agora, eu preciso exportar esse arquivo para a gente conseguir utilizar a nossa API.

Então, export default API. Simples demais. Então configuramos a base URL para ficar mais simples e nos ajudar Agora salvei Vamos dentro do app.js Que agora eu quero utilizar Então ao invés de mostrar um alerta quando o cara clicar no botão O que eu quero fazer? Eu quero então fazer a requisição HTTP nessa API Então vamos lá Deixa eu só colar aqui o CEP que eu peguei aqui Para a gente poder fazer os testes E show de bola A primeira coisa que eu quero verificar é se o cara digitou alguma coisa Então if Se o seu input Ou seja, se o valor dentro desse seu estado aqui, do seu input, do que você digitou, estiver igual a vazio, então for igual a uma string vazia, quer dizer que você não digitou nada.

Então, vou abrir e fechar aqui o nosso if, vou dar aqui um alert, vou colocar preencha, algum sap, e vou dar aqui um return para ele parar a execução do nosso código. Vamos testar? Então, se eu salvar, vir aqui no nosso buscador, e eu atualizar, e eu vir aqui e não digitar nada, cliquei, preenche algum sap.

Agora, se eu digitar, cliquei, ele não mostra o alerta. Ou seja, quando ele não digita, a gente faz a verificação e barra aqui se não tiver digitado. Se tiver digitado alguma coisa, aí a gente deixa prosseguir e faz a requisição HTTP. Então, aqui a gente vai abrir um bloco try e o nosso catch.

Abre e fecha aqui. Ou seja, o try é o que você quer fazer, mas que pode dar errado. E caso dê errado, a gente vai cair dentro do nosso bloco catch para capturar isso aqui.

No nosso caso, a gente só vai mostrar um alerta. Então... Primeiro vamos fazer o nosso try, que é a tentativa do que você quer fazer.

Então como é algo assíncrono, que a gente vai ter que fazer requisição nessa API aqui, pode demorar um pouquinho, eu vou transformar essa nossa handleSearch em uma função assíncrona. Então em algo assíncrono. E dentro do nosso try, eu quero então criar uma const, vou chamá-la de response igual a wait, para ele esperar essa requisição, então ele vai esperar o que a gente passar aqui, que é a nossa chamada.

Então vou importar o nosso arquivo da API que a gente já criou. Import. api.services barra api, o arquivo que a gente criou e agora a gente pode utilizar await api.get que é o tipo da requisição, quero trazer informações, então é do tipo get e aí eu vou abrir nosso template strings lembra nossa chamada, eu preciso passar então qual que é o sap e barra json então onde que eu tenho o sap que eu digitei eu não tenho aqui dentro do nosso useState que a gente chamou de input?

tenho, então eu vou abrir cifrão abre e fecha o chaves, pra gente chamar então o valor que tem dentro do nosso. useStateInput barra JSON, que é o formato que eu quero trazer. Então, basicamente, a gente está fazendo a nossa baseURL, que é isso aqui, barra o input, que é o que você digitou, barra JSON, que é o formato que a gente precisa trazer. Então, a gente vai fazer isso aqui.

A gente utilizou o async await, ou seja, para ele esperar essa requisição aqui para passar para a linha de baixo, como é algo assíncrono, que demora um pouquinho. Depois disso, então, eu vou dar um console.log dentro do nosso response aqui. Tá?

Então... Vamos ver o que ele vai devolver isso aqui para a gente. Agora, caso isso aqui der erro, a gente digite um CEP que não existe, ou der algum erro na API, dentro do nosso CAT, eu quero dar um alerta apenas, por exemplo, erro ao buscar aqui. Então, vamos fazer um teste aqui. Então, vou salvar.

Vamos fazer esse teste aqui. Vou atualizar. Vou digitar aqui o nosso CEP. Deixa eu pegar aqui o CEP de novo. Vou colocar aqui do lado.

Era 0, 13, 10, 930. Cliquei. Vamos abrir o console, que a gente colocou um console. Vamos no console. User aqui. E ele devolviu um objeto.

Dentro desse objeto a gente tem a configuração, a gente tem os headers da nossa requisição, a gente tem o status code dessa requisição que deu 200, que é o status code de ok, que deu tudo certo. Dentro da propriedade data, aqui eu tenho o que eu quero. Aqui eu tenho o bairro, olha aqui o complemento, ddd, aí eu tenho mais um monte de informação aqui.

Então, o que eu quero de fato não está dentro do response, e sim o response.data, certo? Então eu vou salvar e vamos fazer o teste de novo. Vou vir aqui, deixa eu copiar esse CEP, vou atualizar.

eu vou digitar o certo de novo vou buscar cliquei aqui e vamos lá no nosso console agora sim agora ele devolveu um objeto tá esse objeto tem as propriedades que eu posso utilizar nosso caso eu quero sépio complemento bairro quero logradouro quero localização e também o estado agora vamos digitar um certo não existe onde está qualquer coisa até com um monte de coisa aqui digitei vamos ver olha lá que legal eu vou ver aqui ó ops erro ao buscar posso dar um ok e aí ele fala que tem uma propriedade request né que não foi bem sucedida a requisição. E aí, então, além da gente mostrar o erro, eu quero limpar o campo sozinho do input, porque se digitou algo errado, eu quero limpar. Então, além da gente mostrar o alerta aqui no cat, eu quero dar um set input, ou seja, alterar o valor do useState onde tem o valor do nosso input, para vazio de novo.

Ou seja, vou voltar o valor do useState para vazio. Então, se eu salvar, vou digitar alguma coisa errada aqui de novo, cliquei, erro ao buscar, dou ok e ele limpa o nosso campo. Ou seja, depois o alerta, ele volta o valor do nosso useState do input para vazio. Beleza?

Então, o valor que tinha dentro do input fica limpo de novo. Maravilha. E agora, qual que é o próximo passo? A gente fez a requisição, colocou dentro de uma variável response, que está acessando o response.data, e eu tenho tudo que eu quero. Mas o que eu quero fazer, de fato, não é ficar no console, e sim mostrar aqui na tela.

Então, a gente pode criar mais um useState para a gente armazenar o retorno dessa nossa chamada. Certo? Então, eu vou chamar aqui um const, vou chamar de sap. set sap igual useState e ele vai começar como objeto vazio, porque se não tem nada, até o cara clicar em buscar, buscar alguma coisa, eu quero que ele comece como vazio.

A gente criou o nosso sap, que é o nosso estado aqui, um useState que começa como objeto vazio, e depois que ele faz a chamada, ao invés de eu dar um console.log para esse cara, eu quero passar para o nosso useState a resposta. Então, sap, para eu passar para o meu useState sap algum valor, eu quero passar quem? o response.data, que é o objeto que a gente tem de retorno, beleza? E também, depois que ele receber, eu quero dar um set input, vou passar para vazio também, para ele limpar o nosso campo aqui. Vamos fazer um teste?

Então, se eu salvar, vou vir aqui, vou dar aqui, deixa eu rolar aqui o set de novo, cliquei, olha, ele limpou, então provavelmente ele fez a requisição, colocou para o nosso useStateSep a resposta e zerou o nosso input. Agora é só a gente mostrar aqui embaixo. Bora lá?

Então vamos vir aqui embaixo, onde estavam as informações fixas, agora a gente vai utilizar através do useState. Então vamos colocar a informação agora através do nosso useState. Abre e fecha o Chaves para a gente colocar um JavaScript, eu quero acessar o nosso useState que a gente criou de CEP, então o CEP, e dentro dela a gente vai ter as propriedades.

Então ponto, dentro dela eu vou ter todas essas propriedades aqui de retorno. Então eu quero acessar, por exemplo, o ponto CEP. Então CEP, ponto CEP.

O próximo é a rua. A gente vai acessar o CEP.logradouro. Então, abre aqui.

Abre e fecha o chave para a gente colocar o JavaScript. CEP.logradouro. Perfeito.

Depois, o complemento, eu também quero aqui. Então, vamos lá. Deixa eu vir aqui. Abre e fecha o chave.

CEP.complemento. Perfeito. Depois, a gente quer o bairro. Então, vou tirar aqui o fixo.

Abre e fecha o chave. O nosso CEP.bairro. E depois, temos a cidade, que fica dentro de localidade.

e o f o estado então vamos apagar aqui abre e fecha chaves sep.localidade e vamos lá no estado abre e fecha chaves sep.uf vamos testar isso aqui tudo agora então eu vou salvar vou atualizar aqui e atualizei ele vai vir vazio porque ele veio vazio porque a gente não procurou nada eu abri a aplicação eu ainda não busquei nada então eu também nem quero mostrar esse nosso man aqui se ele não tiver mostrado nada então o que que a gente pode fazer A gente pode fazer uma renderização condicional, ou seja, só renderiza esse nosso espaço aqui quando de fato tiver buscado alguma coisa. Então quando a gente busca alguma coisa eu vou colocar dentro do nosso useStateSap. Então eu vou fazer uma comparação, ou seja, vamos aqui em cima do nosso main, eu vou abrir e fechar as chaves aqui, e eu quero acessar um object.keys, abre e fecha aqui, vou passar a nossa useStateSap.length, por maior que zero, ou seja, tem alguma coisa dentro desse nosso useState, quer dizer que o cara foi lá, pesquisou um CEP e deu tudo certo. Então, se tem alguma coisa dentro desse useState, a chave vai ser maior que 1, porque vai ter mais de uma chave ali dentro, dentro desse nosso CEP. Então, se for maior que zero, eu posso passar a afirmação aqui, os dois e esse comercial, abro e fecho aqui o nosso parênteses, que é para retornar alguma coisa na tela, só que o que eu quero retornar?

Eu vou retornar esse nosso main aqui. Então... vou trazer, copiei o meu main, vou apagar o main aqui e vou colocar o nosso main aqui dentro. Deixa eu dar aqui até um tab, vou dar mais um tab aqui.

Então, o que a gente está fazendo aqui se você teve alguma dúvida? A gente está acessando a nossa useStateSap, que é onde tem o objeto lá com os itens, e eu estou verificando se tem alguma coisa dentro desse objeto. E a forma da gente verificar no JavaScript, por exemplo, se tem alguma coisa, alguma propriedade dentro do objeto, é utilizando o object.keys.length, que é o tamanho desse objeto. Se o tamanho é maior que zero, concorda que tem alguma coisa?

Então, se tem alguma coisa, eu quero mostrar esse nosso branco aqui, que é esse nosso main. Então, se eu salvar aqui, você pode ver que quando eu abrir minha aplicação, não aparece mais. Porque, por enquanto, a gente não tem nada lá dentro.

Agora, vamos digitar aquele CEP de novo? Deixa eu pegar aqui o CEP que eu estava usando para fazer o teste. Então, vou colar aqui o CEP. Vou buscar.

E olha que legal. Então, aqui eu busquei. Você pode ver que apareceu, porque agora... Já tem alguma coisa dentro desse nosso estado CEP, então ele renderizou o que tem dentro do main. E aí ele mostrou o main, que tem todas as informações.

Então o CEP aqui, o número dele, Avenida Paulista, o complemento, Bela Vista, São Paulo. Sei lá, eu peguei qualquer CEP ali no Google, tá? Então deixa eu achar o CEP. Vamos lá, eu peguei o CEP aqui lá de Copacabana, então eu vou colar aqui, vou clicar.

E olha que legal, ele limpou o input, mostrou o CEP que eu digitei, Avenida aqui, maravilha, o complemento, Copacabana. Rio de Janeiro aqui, RJ. Então, show de bola demais com a aplicação e ainda a gente colocou a animação. Quando o cara entra, tem esse efeito aqui, né?

Então, ficou uma animação bem legal. Então, vou procurar aqui de novo. Maravilha. E se ele continuar procurando, ó, vou pegar o do CEP aqui, vou procurar, cliquei, ele muda o CEP aqui sem problema. E toda vez que muda, ele limpa o input pra você digitar outro, por exemplo.

Agora sim, buscador concluído com sucesso. Primeira coisa, ó, antes de você sair nesse vídeo de qualquer ação, me conta o que você achou. e desse projeto aqui da gente desenvolver eles junto aqui a gente aprendeu bastante coisa né deu para gente praticar bastante coisa também e lembrando vocês que ó as inscrições da fábrica de aplicativo tá aberta tá então se você é uma pessoa que quer evoluir de uma vez por todas e aprender entrar para o mercado de trabalho criar seus aplicativos para Android para iOS criar seus sistemas web e sites com o react.js dominar todo o poder do react também tudo passo a passo e claro que é um curso e sim algo totalmente prático que eu vou te acompanhando, tem todo o nosso suporte e também o grupo dos alunos, tá?

Então aproveita, vou deixar uma promoção exclusiva pra vocês aqui embaixo, tá? Então te vejo lá na turma e comenta aqui embaixo o que você achou desse vídeo. Se você quer mais desses conteúdos dessa série de colocar a mão na massa e desenvolver algo junto, passo a passo aí. Então coloca lá.

Te vejo lá na turma. Até mais.

Transcript for:Desenvolvimento de Um Buscador de CEP

Transcript for:
Desenvolvimento de Um Buscador de CEP