Aprendendo React do Zero, Conectando Back e Front End, e Consumindo API

bora aprender tudo sobre react do zero olha a gente vai fazer essa aplicação e mais importante que fazer essa aplicação a gente vai aprender tudo sobre react sobre os hooks como começar um projeto tudo bem mastigado de forma simples e olha a cereja do bolo é que a gente vai conectar essa aplicação com um backend com uma API na aula passada a gente criou a nossa própria api e agora a gente vai conectar com o nosso front end eu sou Rodolfo mor seja muito bem-vindo ou bem-vinda a mais um vídeo do [Música] canal Então bora

lá na aula de hoje a gente vai aprender react do zero Framework mais utilizado aí do mercado a gente vai aprender como conectar um front end com back end conceitos de back end front end criar uma aplicação do zero e vamos aprender a consumir uma API Tá certo na aula passada inclusive recomendo você muito ir lá na aula passada a gente aprendeu Como criar um servidor e a gente aprendeu também que servidores ou backend apis se comunicam com front Ends a parte gráfica e hoje a gente vai comunicar conectar a nossa parte gráfica nosso front

end nosso Nossa interface com o backend detalhe vai ser muito importante nessa aula você saber um pouco não precisa saber muito mas de html CSS e JavaScript aqui embaixo tem curso gratuito dessas tecnologias assiste lá caso você tenha alguma dúvida aqui durante a aula agora sim vamos para a tela do meu computador mas só para terminar Deixa aquele like Maruto se inscreva no canal clica no sininho que sempre tem conteúdo para vocês e toda segunda tem Live então também se inscreva PR as nossas lives bora pra tela do computador vamos lá então tô com o

meu vs code aberto e vamos começar só um detalhe o react ele é uma biblioteca que a gente pode instalar com o npm se você tá meio perdido aula passada a gente falou quem é esse cara aqui o npm o gerenciador de pacotes a gente instalou o node a gente vai precisar do node instalado e aqui dentro do npm a gente tem um pacote do react o react é uma biblioteca então a gente pode simplesmente chegar no nosso projeto e instalar o react tá aqui ó react ele é uma biblioteca então a gente pode simplesmente

chegar aqui no nosso projeto copiar aqui e instalar o react vai aqui em terminal novo terminal instalar o react mas nós não vamos fazer isso por que que a gente não vai fazer isso Rodolfo olha existem ferramentas que elas já organizam um projeto react para nós então vai poupar muito trabalho de ter que ficar criando várias pastas vários arquivos e ficar instalando várias coisas então para isso se você for na documentação do prio react ele recomenda algumas ferramentas Ahã se você descer um pouquinho aqui ó ele recomenda o Vit ou o purcel a gente vai

de Vit Eu gosto muito de usar o Vit o Vit é uma ferramenta que vai criar o nosso ambiente de desenvolvimento com react ele já vai trazer várias coisas prontas para nós tá bom ah você for descendo aqui é só pegar esse comando ó npm creat Vit @ latest vou copiar aqui vou colar aqui no meu terminal né na pasta que eu escolhi você escolhe uma pasta aí no seu computador primeiro ele vai perguntar o nome do projeto eu vou chamar de Dev Club cadastro usuários vou dar um enter ele vai perguntar que tipo de

tecnologia eu vou utilizar eu vou colocar aqui ó react vou dar um enter e vou escolher a opção JavaScript Tá bom vou dar um enter e ele vai criar uma pasta com vários arquivos agora a gente vai entrar dentro dessa pasta eu vou clicar aqui em arquivo abrir e a gente entra dentro dessa pasta que vai ficar mais fácil pra gente desenvolver o nosso projeto Tá certo então já tá aqui a estrutura do nosso projeto react e antes da gente começar a codar que nem um doido eu vou te explicar que que é essa estrutura

que que serve para que que serve cada arquivo aqui basicamente esse Vit pcon.box isso aqui é a descrição do projeto é como se fosse um documento que fala o que que o projeto tem isso aqui vai nos auxiliar Principalmente quando a gente for subir para o Git esse arquivo não é importante para nós o próximo é o pack Jon o PC Jon a gente viu na aula passada que ele é como que ã a descrição do nosso projeto aqui tem o nome tem a versão aqui também tem como rodar o projeto no nosso caso é

o comando Dev tem as dependências Olha só o react aqui o react Don Então as dependências que a gente vai utilizar no nosso projeto ou seja as bibliotecas que a gente que vai utilizar no nosso projeto o index P HTML é o arquivo principal da nossa aplicação se você já estudou HTML Inclusive tem curso de html aqui no canal dá uma olhadinha lá você vai ver que sempre que a gente vai subir para um servidor o nosso código a gente sempre o servidor sempre procura um arquivo chamado index.html.gz react a gente não vai mexer muito

nesse arquivo por quê se você perceber aqui o react tá chamando assim que esse arquivo é carregado ele vai atrás do main.js que é esse arquivo aqui que a gente já vai chegar nele tá bom o Git Ignore esse arquivo aqui vai falar quando a gente for subir nosso código pro github o que não deve subir Esse slink é um arquivo de configurações relacionado à identação do código Então como que ele vai ficar ali quando a gente organizar o código se dá dois espaços coloca vírgula no final não coloca Então esse arquivo tem essas configurações

aqui na pasta Public só tem ó o símbolo do Vit nada de importante e o coração do projeto tá aqui dentro da pasta src aqui temos a pasta de assets que são os arquivos que a gente caso tenha alguma imagem e temos aqui quatro arquivos ó a gente tem o Main que é o arquivo principal Tá certo a gente tem o index.css que é o arquivo principal de estilos inclusive aqui dentro do M você pode ver que ele tá chamando esse índex HTML SSS e a gente tem um componente react que que é um componente

no react conforme a gente vai criando páginas ou vai criando pedaços das páginas a gente sempre cria componentes por exemplo aqui no Main assim que ele carrega ó ele chama esse App aqui quem que é esse app que ele chama é um componente react olha ele tá importando esse App aqui de dentro desse arquivo aqui tá certo Claro muitas informações muitos arquivos mas Vamos botar a mão na massa pra gente entender como funciona esse react na prática vai ficar mais fácil Vamos começar o nosso projeto só lembrando que nosso objetivo é criar este cadastro de

usuários aqui onde a gente vai colocar o nome idade e-mail e vai cadastrar vai cadastrar onde Rodolfo na aula passada do canal a gente criou o backend criou o servidor então agora a gente vai cadastrar esses dados lá no servidor que a gente criou se você não assistiu o vídeo da aula passada tá aqui embaixo na descrição tá no card também assista beleza então vou clicar aqui em cadastrar e ele vai cadastrar para mim então vamos começar aqui no Main eu até poderia criar um código ó por exemplo colocar um H1 aqui colocar aqui ó

Olá react eu até poderia fazer isso ó se a gente for rodar esse esse código aqui ó quer ver ó para rodar é bem simples ó a gente vai aqui no terminal novo terminal e a gente escreve npm Run Dev porque Run Dev se você for aqui no pack Jon você vai ver que quando você dá o comando Dev ele chama o Vit e o Vit roda para nós o projeto então npm Run Dev eu vou dar um enter ã t t t Ah detalhe importante que eu tava esquecendo o Vit ele não instalou as

nossas bibliotecas elas estão aqui mapeadas mas não estão instaladas então a gente precisa instalar Então vou dar um npm espaço install Ou npm se você quiser o atalho e agora sim ele vai instalar todas as bibliotecas numa pastinha chamada node models Isso aqui vai demorar uns 20 segundinhos mais ou menos é bem rápido ó ele já tá instalando tudo aqui agora sim a gente pode rodar o nosso projeto npm rund Dev tá tudo instalado e ele falou para nós que ele tá rodando nosso projeto nesse endereço Então é só clicar com o control segura o

control aperta aqui que ele já abre no navegador tá vendo ó olar react por que que ele tá mostrando olar react porque eu coloquei esse olar react aqui mas isso aqui não é uma boa prática esse arquivo Main a gente só vai deixar ó o nosso componente no caso o nosso código de verdade a gente vai escrever aqui dentro de app então aqui dentro do app jsx Tem várias coisas mas a gente vai deletar tudo isso ó porque agora o app ó tá com isso aqui ó mas eu não quero isso aqui eu quero construir

meu próprio código então a gente vai deletar eu vou deletar isso aqui vou deletar tudo aqui ó vou deixar Só uma div mesmo Cadê deletar isso aqui deletar isso aqui deletar isso aqui vou deixar só uma div com H1 escrito olar react por qu vou rodar aqui de novo e aí você vai ver que agora sim olar react agora sim a gente tá chamando o nosso componente isso aqui podemos deletar também que a gente não vai utilizar por enquanto e esse aqui é o esqueleto de um componente react eu sei que você talvez esteja achando

estranho Rodolfo mas isso aqui é JavaScript isso aqui é HTML é o react ele usa uma estrutura chamada jsx que basicamente ele vai misturar HTML com JavaScript eu sei que assusta mas isso aqui é uma mão na roda então um componente react é uma função correto sempre com letra maiúscula tá no react é sempre com letra maiúscula e dentro dessa função tem o return e tudo que você colocar aqui dentro do return de html ele vai colocar na tela para nós eu sei que é meio confuso mas vamos começar a fazer nosso código organizar a

bagaça que vai ficar bem mais claro Tá bom para começar vamos fazer uma coisa muito importante aqui no Main que é o arquivo principal veja que ele chama o index.css por qu ess index.css é os nossos estilos globais a gente vai colocar alguns estilos que vão ser aplicados na nossa aplicação como todo então como a gente sempre faz V colocar um asterisco aqui vou dar um marg zer vou dar um pad como zer Box sizing como border Box certo vou selecionar meu Body aqui o meu Body eu vou dar um min de 100 VH um

widget de 100 VW e vou colocar um pano de fundo um background esse background eu fiz um linear Gradiente eu vou até copiar aqui da minha colinha vou colar aqui para vocês então é um background linear Gradiente 180 DG # 36 tá aqui ó tá aqui bonitinho esse linear Gradiente que ele vai deixar a tela bem bonitona eu vou salvar aqui e assim que salva ele já atualiza automaticamente então você pode voltar lá e você vai ver que agora já tá com fundo bem legal bem legal bem legal OK aí você pode brincar com as

cores aqui como você quiser não precisa ser exatamente esta cor já vou aproveitar e colocar uma fonte no meu projeto então eu vou lá no Google fonts Google fonts aqui no Google Font você pode escolher a fonte que você quiser eu vou escolher uma chamada Poppins Poppins aqui ó Poppins cliquei aqui na fonte Poppins vou clicar aqui em get Font get embed code E aí ó é só copiar isto aqui ó e colar no Head do nosso HTML ó copiei aqui vou lá no R do nosso HTML aqui no index HTML e vou colar em

algum lugar ó então qualquer lugar do seu head cola aqui Clica com o botão direito formatar documento já organizou tudo pode salvar e agora eu vou copiar essa linha aqui ó fonte Family Pops sanif tá vendo essa linha aqui essa aqui bonitona copiei E aí eu colo ela aqui no nosso index.css ó vou vou aplicar essa fonte popins para tudo tudo tudo tranquilo agora eu vou para o meu app.jsx esse App eu posso chamar como ele quiser como eu quiser normalmente no react O que que a gente faz imagine que eu tenho app esse App

aqui vai ser a minha tela de home mas imagine que daqui a pouco o meu projeto vai ter uma tela de home uma tela de cadastro uma tela de novo usuário uma tela de ver usuários um site comum tem muitas e muitas e muitas telas então Imagine se a gente começar a colocar aqui ó cada tela for um arquivo e um CSS dele vai ficar uma bagunça por isso que que a gente costuma fazer no react a gente vai criar uma pasta aqui ó Criei uma pasta vou chamar de Pages a gente vai ter só

uma página mas já vamos fazer o negócio do jeito certo aqui dentro de Pages eu vou criar uma outra pasta que eu vou chamar de home tá bom vai ser a home mesmo ali dos cadastros só vai ter uma tela e aqui dentro de home eu vou colocar esse arquivo we app.css e we app.jsx ã aqui eu vou colocar não tá bom a gente vai mudar as importações manualmente e aqui ó como ele tava jogado aqui no meio ele tinha que ter exatamente o nomezinho dele bonitinho como ele tá dentro de uma pasta eu já

posso chamar ele de index pon jsx e aqui ó esse CSS eu vou chamar ele de style.css certo então criei a pasta pages dentro de Pages tem a home dentro de home vai ter o index.jsx aqui essa função vou chamar ela de home aqui no final vou chamar de home também a exportação feito aqui ó o meu arquivo Não chama mais app.css chama style.css e agora para finalizar aqui dentro do Main eu não tô importando mais o app eu tô importando o home from aí eu vou lá pon barra pages bar home nesse caso eu

não preciso colocar barra index pon jsx por quê Toda vez que meu arquivo dentro da pasta chama index automaticamente ele já chama esse arquivo por isso que eu já deixei ele com o nome de index porque aí eu já já consigo resolver esse problema aqui o home aqui vai ser app vai ser home Vou salvar e você vai ver que tá funcionando exatamente igual só que por que que a gente deu toda essa volta Rodolfo porque a gente organizou cara Olha como tá mais organizado eu tenho esses arquivos principais aqui mas aqui dentro Eu tenho

minha home E se eu for ter se eu for criando outras telas elas vão ficar bem organizadas aqui dentro da pasta pages tá bom a pasta ass a gente não tá utilizando se quiser deletar por enquanto pode deletar a gente não vai utilizar essa pasta Public aqui deixa ela aqui a gente não vai utilizar mas deixa ela aqui agora sim vamos botar a mão na massa e começar a codar aqui no Styles PCs eu vou deletar tudo a gente vai começar do zero do zero do zero do zero mesmo ó deletei aqui eu só tô

com o meu lar react aqui ó só com l react e agora a nossa missão antes de conectar com banco de dados com o nosso backend é criar essa tela simples de cadastro aqui ó cadastro de usuários então aqui eu vou ter um formulário esse formulário vai ter aqui ó escrito cadastro de usuários vai ter três imputs vai ter um botão de cadastro e vai ter aqui os cardz inhos ã onde a gente vai colocar cada usuário cadastrado depois também aqui a a lata de lixo dos usuários quando eu quiser clicar e deletar o usuário

Então vamos começar eu vou começar criando todo o HTML e aí depois a gente ataca o CSS Lembrando que aqui eu sei que é meio doido é meio loucura mas o react funciona assim o ponto importante é que você tem que entender que talvez você se assustou com isso aqui que que é isso react psct mode react Don quit Rot Isso aqui é uma biblioteca toda vez que a gente usa uma biblioteca a gente tem que jogar as regras da biblioteca o programador que ele criou a biblioteca Ele criou algumas regrinhas algumas estrutura algumas estruturas

de pastas algumas estruturas dentro dos arquivos e por mais que pareça loucura ou você achea que você não entende nada de programação não é você pode pegar um programador que tem 20 anos programando se ele olhar pro react ou olhar pro angular ou olhar para alguma biblioteca que ele não conhece ele vai ter um tempo de aprendizado por quê Porque é algo diferente o cara que criou biblioteca Ele criou daquela forma então não se assuste é só dar tempo ao tempo para se acostumar com as estruturas com os padrões da biblioteca tá Tá bom eu

tenho muitos anos de experiência mas quando eu pego uma biblioteca nova eu tenho que ficar ali na documentação lendo olhando tentando é normal tá bom galera tá bom o react é muito utilizado no mundo mas o react a gente tem que entender que algumas coisas a gente vai ter que mudar por exemplo criar uma estrutura de pastas aqui bonitinho organizar e faz parte do processo não dói Tá bom vou começar aqui com HTML Tá bom então vou criar aqui uma div depois a gente coloca as classes Na verdade eu vou deixar classes vou deixar uma

classe aqui no react a gente não coloca Class aqui ó tá aqui não chama Class no react a gente chama de Class name ó Class ele até completou aqui PR mim ó Class name vou chamar de container tá bom aí aqui dentro do Class name que vai ser a nossa dentro da do coner dentro do conin a gente vai ter um formulário né que é esse formulário aqui então essa div vai pegar tudo tudo como um todo depois a gente vai ter aqui o meu formulário então vou ter o meu formulário dentro dele vou colocar

um H1 H1 cadastro de usuários abaixo do H1 eu vou ter vários inputs então vou ter os meus inputs a gente pode colocar assim mas eu prefiro colocar o imput assim tá bom você pode dar um name pro seu imput se você quiser Esse aqui esse primeiro imput aqui vai ser o de nome vou colocar as coisas em português tá para quebrar o galho de vocês ó colocar aqui ó nome aí vai ter ã nome idade e-mail nome idade e-mail a gente pode colocar o Type também ó esse aqui vai ser Type text deixa eu

ver ele não tá Complet não você colocar Opa você colocar aqui ó Opa cont control espaço ele dá as possibilidades esse aqui ó eu quero que seja do tipo texto nome é um texto a idade vou colocar que é do tipo Number ó aqui ó tá vendo ó Number e o e-mail vai ser do Type e-mail type e me certo já coloco o tipo do nosso input vou ter um botão ali embaixo também que Vaio cadastrar perfeito esse botão ele vai ser do Type Button bom porque tem três tipos de botão tem o Button o

o tipo botão reset ou submit nosso caso vai ser Button mesmo tá bom Aqui tá o nosso formulário eu vou salvar vou voltar aqui ã tá rodando ó bonitinho ó tá desorganizado do CSS mas tá certo tá bom caso você pare de rodar ou instale alguma biblioteca é só dar um Ctrl C aqui ó npm Run Dev ele volta a rodar aí ali embaixo a gente vai ter o seguinte a gente vai ter vai ser uma div mesmo ó vendo ó isso aqui ó vai ser uma div e dentro vai ter aqui as informações do

nosso usuário Tá bom então a gente vai fazer o seguinte Na verdade eu vou ter uma div onde eu vou guardar essas outras divisin menores então vou ter uma div e aqui dentro eu vou fazer o seguinte eu vou colocar uma div aqui Opa é com minúsculo por qu a gente precisa desses carinhas aqui ó Então esse carinha aqui vai ser uma div Então dentro dessa div eu vou ter eu vou eu vou dividir ela em duas então por um um lado vai ter os nomes aqui né nome idade e-mail e por outro lado vai

ter o o botão aqui com o a lixeirinha que a gente vai apagar então vou fazer outra div aqui dentro dentro dessa primeira div eu vou ter um parágrafo com o nome o outro parágrafo com a idade outro parágrafo com o e-mail já vou falar como que a gente vai colocar essas informações aqui e ali essa é a primeira div e a segunda div vou nem colocar de uma div vou colocar o botão direto vai ser aquele botão que vai ter a imagenzinha do do lixo Tá certo então aqui dentro eu vou colocar uma imagem

ã que vai ser o nosso lixo deixa eu pegar a imagem aqui e aí eu disponibilizo para vocês depois tá bom vou jogar aqui ou colocar dentro da pasta ó deletei a pasta assets vai fazer falta agora vamos criar ela de novo ó clicar aqui assets tá bom eu não lembrava dessa dessa lixeirinha então aqui dentro Ó tem o trash.svg Tá bom eu deixo aqui embaixo para vocês para vocês pegarem E aí a gente vai fazer o seguinte no react a gente importa as imagens de uma forma diferente que que a gente vai fazer para

importar essa imagem lá em cima eu vou dar um Import Trash você pode chamar como você quiser tá importante é só tá com letra maiúscula vou chamar de Trash from vou Import aí eu vou lá no meu assets assets bar trash.svg estou importando ó tá vendo ó importei Desta forma a imagem aí eu vou lá lá no meu Button src E aí eu coloco os bigodinhos e coloco aqui meu Trash Tá bom eu não posso fazer isso aqui no react ó não posso ó ponto pon barra pon barra não posso tá bom eu tenho que

importar dessa forma aqui e sempre tem que chamar o por exemplo aqui a minha lixeira aqui é o nome dela nome da importação tem que ser com letra maiúscula aí eu coloco aqui salvei voltei aqui e tá aqui a minha lixeirinha agora antes da gente estilizar no HTML um ponto importante é Rodolfo mas e essas informações essas informações vão vir do Servidor a gente vai fazer isso daqui a pouco mas por enquanto e enquanto elas não estão vamos criar só um uma mais ou menos um rascunho do que vai ser então eu vou criar só

um rascunho antes da gente ir até o servidor vou criar uma con aqui cham ela de users e vai ser uma arrei né porque afinal vai ter mais de um usuário se você lembrar na aula passada eu tô até aqui com o meu código aberto da aula passada lá na aula passada o nosso usuário tinha três informações na verdade quatro porque tem o ID também se a gente for aqui na pasta do Prisma nosso usuário tem o id o e-mail name e age Se você não se recorda volta na aula passada O link tá aqui

embaixo Então essas quatro informações que a gente vai receber aqui ficou inglês mas não tem problema a gente vai receber inglês então eu já vou simular aqui ó então o usuário ele vai ter o ID Então vou pegar um ID maluco aqui ó qualquer coisa isso aqui é só pra gente simular enquanto a gente não pega no servidor vai ter o name por exemplo vai ser o Rodolfo Rodolfo tem uma uma age que é uma idade por exemplo 33 e vai ter um e-mail por exemplo Rod @email.com Vou organizar Aqui botão direito formatar documento é

um arrei tem um objeto dentro vou copiar essas informações e vou criar dois usuários só vou mudar aqui as informações do id ess aqui vai ser a Aline Aline tem 28 anos e o eil dela é alinea.com pode criar quant você quiser esse aqui é só para os nossos testes bom Rodolfo como que eu coloco esses usuários na tela você esteja pensando ah tá fácil eu vou aqui em users que é meu usuário aqui eu vou fazer o seguinte eu vou colocar users posição zero do meu Array ponto name hum o react tem algumas regrinhas

então o que que a gente vai fazer Primeira coisa eu não falei para vocês vou falar agora Lembra que eu te falei que essa estrutura louca do react que é o jsx bem aqui dentro do jsx tudo que está em cima do return é código JavaScript Ó você deve ter percebido né é uma função nosso componente aqui dentro PR é código JavaScript só que aqui embaixo dentro do return é código HTML Só que tem um detalhe aqui dentro do nosso jsx aqui dentro do return eu posso colocar código JavaScript é só eu colocar os bigodinhos

se eu coloco os bigodinhos tudo que tá aqui dentro é código JavaScript eu posso pegar aquele users ali eu posso fazer um 2 + 2 eu posso colocar o código JavaScript que eu quiser tá bom então o que que a gente vai aprontar agora a gente vai utilizar um cara que eu não sei se você já usou que é um cara chamado map que que o map faz Inclusive tem aula de Map aqui no canal tá vou deixar aqui embaixo deixar no card o map ele vai mapear o meu arrei isso aqui é um arrei

certo um arrei e dentro do arrei Temos vários objetos aqui no canal tem curso de JavaScript se você não sabe o que que é um arrei que que é um objeto tem curso de JavaScript vou deixar aqui embaixo assiste lá depois você vem para cá mas o ponto é a gente vai pegar arquivo por arquivo é posição por posição item por item e vai jogar aqui dentro da tela vai jogar na tela então o que que a gente vai fazer aqui dentro dos colchetes eu vou escrever vou pegar meus users meus usuários lá em cima

ponto map E aí como que funciona o map eu coloco aqui Ah o meu parênteses E aí basicamente eu tô pegando users aqui né users users o map ele vai item por item Então eu preciso dar um nome para esses itens eu posso chamar de abacate Mas é claro que eu não vou chamar de abacate vou chamar de user por qu como é item por item aqui são todos os usuários e aqui vai ser usuário por usuário então na primeira passada do do Map Imagine que ele tá pegando meu Array a primeira vez que ele

pegar meu Array o user essa variável Imagina isso aqui é uma variável essa variável vai ter este valor aqui eu faço o que eu quiser com esse valor só que ele vai dar uma segunda passada porque ele tem mais uma posição para percorrer agora o valor de vai ser esse aqui então eu vou pegar meu user E aí como que funciona o map Ah eu vou pegar esse user aqui e vou passar uma Arrow function Isso aqui vai ser uma função então coloco aqui a setinha e aí eu vou colocar outro parênteses e tudo que

tiver dentro deste parênteses aqui eu posso manipular agora olha a mágica que a gente vai fazer Olha que que o react deixa a gente fazer aqui dentro dos bigodinhos eu falei para você que é código o qu JavaScript eu tô pegando meus usuários tô mapeando eles e tô guardando aqui dentro desse user olha só o que eu posso fazer eu vou pegar todo o meu HTML ó só essa div aqui ó esta div ó essa essa final você deixa aqui vou pegar esta div aqui e vou colocar aqui dentro é isso mesmo vou colocar aqui

dentro vou clicar aqui para formatar formatar documento formatar documento Rodolfo deu certo essa loucura deu certo Rodolfo Por que que tá tudo vermelho Calma a gente vai consertar esses erros mas o ponto é no react a gente pode fazer Essas loucuras e Pode parecer uma loucura a primeira vez que eu vi isso eu surtei mas com tempo você vai ver que isso é muito útil então eu tô pegando o código JavaScript e tô enfiando o html no meio por qu eu quero pegar esse usuário que tá aqui esse nome essa age esse e-mail esse e-mail

e quero colocar dentro do HTML e para isso eu uso os bigodinhos também então aqui dentro do nome vai ser user ponto olha só ele até completa para mim user pname calma tá tudo vermelho a gente vai consertar na idade vai ser user P age no e-mail vai ser user ponto eil olha só que legal Rodolfo mas tá dando erro tá tudo Vermelho Por que tá tudo vermelho ó coloca o mouse aqui em cima ele tá falando que tá faltando aqui tá faltando a chave é o react ele tem uma coisa peculiar quando você usa

esse map ele precisa que você coloque uma chave aqui dentro da da nossa div se fosse uma div se fosse um spam ele precisa que coloque uma chave para que essa chave para ele identificar os itens e essa chave tem que ser um valor único que não se repita que no nosso caso é o nosso ID então para resolver esse erro eu vou aqui na nossa div escrevo k Se eu der um control espaço ó ele tá ele dá até as opções do que a gente pode colocar mas eu quero aqui aqui aí coloco user.id

que vai ser Nosa Nossa aqui eu sei que esse código parece maluco mas namora com ele ó tá vendo eu estou aqui dentro do meu HTML e dentro do HTML eu coloquei os bigodinhos e coloquei código JavaScript só que dentro do meu map eu consigo retornar um código HTML e se eu precisar usar JavaScript dentro do HTML que que eu faço é só usar os bigodinhos ó Ah vamos ver se funcionou eu vou salvar e agora ó tá aqui na tela ó ah ele colocou na tela e a grande vantagem de usar o map é

que se eu colocar mais uma pessoa vou colocar mais uma vai ser o Paulo o id não pode ser o mesmo tá sen não dá problema Paulo tem 66 anos o e-mail dele é Paulo @email.com salvei aqui salvei salvei salvei Olha só olha só olha só olha só ele adicionou automaticamente então com map ele automaticamente vai jogando todo mundo na tela não tem que me preocupar em fazer nenhuma alteração tá vamos dar um tapa aqui no CSS pra gente já conectar tudo isso aqui com o nosso servidor eu vou começar pegando o meu contêiner Lembrando

que o contêiner é essa div aqui ó que abraça todo mundo então essa div container ela vai ter um display Flex eu vou alinhar todos os itens ao centro vou colocar um pading top de uns C pixels e aqui também vou dar um Flex Direction como Colon para que um item fique debaixo do outro vou ali pro meu H1 meu H1 eu vou dar um color fff que é o famoso branco e um fonte size de 32 pixels salvar aqui vamos ver como tá ficando ó cadastro de usuários em branco ele já centralizou todo mundo

vamos continuar agora eu vou ali pro meu formulário ó meu formulário meu formulário vamos estilizar formulário ã claro eu poderia estar colocando aqui classes tudo bonitinho mas o projeto tá pequeno o objetivo aqui não é trabalhar HTML CSS o objetivo é entender alguns conceitos mais a fundo do react não quero perder tempo com isso por isso que eu tô fazendo Do jeito mais simples possível Flex de reaction aqui também vou colocar Colon para ficar Um item debaixo do outro vou dar um GAP de 30 pixels para desgrudar Um item do outro ó aqui ó formulário

já tá desgrudando ã vou dar um padding também de uns 30 pixels para não ficar nada GR dado ali nas laterais e em cima vou dar um border radius de uns 10 pixels para ficar arredondadas bordas vou dar um background color deixa eu pegar aqui a cor separei uma cor aqui deixa eu pegar na minha colinha peguei copiei Ok # 2e 2D 4e Ok Max widget eu vou colocar de 50% da tela para ele não ficar crescendo muito senão ele vai ficar muito grande vou colocar um widget nele de 400 pixels tá de bom tamanho

400 pixels mas não pode passar do 50% e tamb vou colocar um margem borum já de uns 20 pixels para não ficar grudado ali nos cards beleza vamos ver como tá ficando ó já tá ficando tá ficando bem legal ã Agora vamos começar a estilizar a gente tem os imputs aqui temos o botão Então vamos para cima aqui dentro do F mesmo eu coloco um Ezinho comercial vou começar aqui com com o nosso nosso Button então o nosso Button vai ter um border radius de 30 pixels para ficar bem redondinho um background color deixa eu

pegar a cor aqui que é pegar ali na colinha hash 8b 8 A E1 perfeito vou dar um height de 40 pixels a altura dele eu não quero borda vai ficar sem borda o a o Font weight vou colocar como Bolt para ficar mais grossinho ali o nosso botão OK vou dar um cursor como Pointer Ok e a gente também pode colocar um um Button rapidinho um Hover tá colocar um um opacity 0.8 só para dar efeito mesmo de colocar o mouse em cima cadê cadê cadê Aqui ó tá vendo coisa bem delicadinha nada demais

ã o Color aqui se quiser colocar branco eu não sei se eu gostei tanto hum colocar um color fff deixa eu ver como que fica Ah acho ficou muito claro né ah deixa assim vou dar um Font size de uns 18 pixels deixa eu ver como que fica muito muito grande colocar 14 OK agora a gente vai pro nosso input dentro aqui do do nosso formulário a gente tem o nossos imputs meu imput eu vou ter uma borda vai ser um pixel vai ser uma borda sólida e vai ser Ah deixa eu ver deixa eu

pegar a cor que vai ser a borda deixa eu pegar aqui na colinha colinha peguei ali do lado # 4e 456c também tamb vou dar um border radius de uns 30 pixels para ficar com a bordinha arredondada o height também 40 pixels o background color Deixa eu ver se eu já usei ele aqui vai ser um background color diferente também eu peguei um figma um design para fazer isso e esse design tem vários tons diferentes Agora que eu fui perceber color dele vai ser fff a cor que vai ficar dentro o Font size 16 pixels

vou colocar um pading left do lado esquerdo de uns 10 pixels para não ficar grudado quando a gente começa a escrever a letra e o outline como nome outline é aquela bordinha azul que fica quando a gente clica no imput certo tá legal aqui só um detalhe importante faltou o Place holder textinho aqui dentro Vou colocar aqui o Place holder ó Place holder esse aqui primeiro vai ser nome esse segundo aqui Place holder vai ser e idade e o último Vai ser e-mail clicar com o botão direito aqui vou formatar para ficar tudo com aspas

duplas eu coloquei errado ali Vou salvar terminando aqui no CSS falta ainda algumas coisinhas falta ainda ah falta esses cards aqui ó colocar uma classe aqui nessa div vai faz vai vai ficar mais fácil ó Class name vou chamar de card fica mais fácil a gente estilizar essa bagaça tá bom coloquei aqui ó Card vou aqui em Style pon Card ã aqui dentro de card eu vou colocar algumas configurações o display vou colocar como Flex o Vou colocar aqui um justify content Space between que é eu separo os itens fica cada um pro seu lado

vou colocar um background color aqui eu vou pegar uma cor que a gente já utilizou aqui pode ser essa aqui ó 2e 2D 4e então # 2e 2D 4e fechou aqui sem querer Beleza vou colocar uma margem pro dar uma distanciada dos itens ao redor de 10 pixels vou dar um pading também de 10 pixels para não ficar nada muito colado vou dar um Edit de 400 pixels um border radius de uns 10 pixels também é tudo na base dos 10 pixels vamos ver como tá ficando ó tá ficando legal agora vamos trocar aqui o

parágrafo do nome né e nome idade e-mail e também este botãozinho e aí a gente terminou o CSS e vamos para o que importa então e Comercial pezinho color #ffff e um fonte weight BOL tá bom aí se você quiser fazer um charme a pode fazer o seguinte aqui dentro em vez de gente ficar tudo com Font weight bold ó a gente pode pode fazer o seguinte a gente pode colocar um spam aqui ó spanz inho ó ó vou dar uma dica para vocês aqui no vest code olha só que legal eu vou selecionar até

aqui ó tá vendo ó ó selecionar até aqui ó até o pontinho e vou dar e contrl shift d de dado caramba eu esqueci qual que era o comando eu jurava que era contrl shift d de dado eu não lembro mas tem um comando depois eu vejo para vocês que você seleciona aqui ele vai selecionando um por um não ah é CRL D desculpa CRL D ó CRL dtrl D agora ó tá vendo que ele selecionou os três vou fazer de novo ó seleciona aqui ó um trechinho e ele vai procurar trechos iguais então selecionei

esses três que são iguais aí eu vou colocar o spam aqui ó pá spam beleza ã deu ruim nos ali de baixo não sei porquê acho que o vs code não foi muito bom colocar eu já deu uma adianta eu só vou copiar aqui ó colar aqui colar aqui o spazzin tá bom colei por qu aqui a gente pode pegar dentro do meu parágrafo Eu tenho um spam e esse spam eu coloco o Font weight dele como colocar como normal mesmo aí olha só que legal aqui ó fica mais fininho Fica mais legal eu prefiro

assim e para finalizar a depois do parágrafo aqui a gente tem o e e o Button que é aquele botãozinho que que tá o nosso a a lixeirinha ali aquele botão vai ser simples o background color dele eu vou colocar como transparente não quero borda também vou dar um border non e vou colocar o cursor como Pointer salvei aqui e ó tá aqui o nosso tá aqui o nosso botão bom se quiser só para finalizar coloca e buttle e coloca um Hover nele colocar só um opac 0.8 Ó coloquei o mouse Ó ficou bem fraquinho

vou colocar 0.5 ó ó então dá uma sensação de quando clica o botão agora qual que é a nossa missão eu tô aqui com o meu front end Mas o que eu mais quero é colocar esses dados E aí fazer o qu Rodolfo eu quero passar isso pro meu servidor eu quero que isso realmente funcione Ah e como que a gente faz isso vamos fazer na prática agora só um detalhe antes da gente ir pra prática e esse cadastro de usuários tá meio feio né Vamos diminuir um pouco essa letra vou colocar 28 pixels ficou

melhor tá posso também dar aqui um text na line com com Center beleza Tá melhor que que a gente vai fazer ó isso aqui não tá funcionando ó os dados estão aqui dentro do meu do meu frontend só que não é isso que eu quero né não é isso que eu quero eu quero ir até o meu servidor e pegar os dados atualizados para isso eu já estou com meu servidor rodando aqui ó lembra na aula passada no nosso servidor Bota ele para rodar aí no seu computador bota aí no seu computador vou dar um

npm não aqui a gente usava o node traço traço watch server.js ele tá rodando aonde Rodolfo aqui ó lembra que a gente botou ele para rodar na porta 3000 então lá no arquivo server a gente botou ele para rodar na porta 3.000 então a gente precisa acessar esse servidor lá de dentro do nosso front end para que a gente consiga pegar essas informações lembra na aula passada que a gente explicou que como funciona a internet eu tenho meu servidor aqui ó meu servidor rodando aqui ó que a gente fez na aula passada e eu tenho

também o meu frontend que vai enviar uma requisição e vai receber uma resposta tá aqui o meu frontend agora a gente tem que conectar os dois para isso a gente vai instalar uma biblioteca para facilitar nossa vida que é chamada de axios vou parar aqui meu servidor e vou rodar npm instal axios axios axius olha só axos é uma biblioteca que Vai facilitar essa conexão Tá bom se você quiser tirar dúvida você vai aqui no npm Você pode procurar aqui ó por axus axos axius então uma biblioteca para nos ajudar com essas requisições só pegar

instalar e aqui tem toda a documentação de como que utiliz o axus Mas é claro que eu vou ensinar para você de mão beijada né então vamos lá vou voltar a rodar aqui ó npm runb o axus já tá instalado tá você for aqui em pack Jon você vai ver que já tá instalado o axius tá aqui então primeira coisa que eu vou fazer é esta parte de configuração do axus vou fechar tudo não é legal a gente deixar tudo junto eu vou criar uma nova pasta aqui dentro de src eu vou criar uma pasta

chamado Services Tá vendo como é legal o react a gente organizar as coisas então eu vou trazer um serviço né um serviço de Fora que é o axius para conectar com o nosso servidor eu vou criar uma pasta aqui ó chamado service eu vou criar um arquivo chamado api.js tá bom PJS mesmo por que api bem porque é esse arquivo que vai nos auxiliar a conectar com a nossa api ou com o nosso backend tá bom o ax instalado eu vou importar o axus from axus E aí a gente vai criar por assim dizer a

conexão como que a gente faz isso eu vou criar uma variável aqui vou chamar de api mesmo e vou chamar o axus Então dentro dessa variável eu vou pegar o axus ponto e aqui dentro do axus a gente tem um cara chamado quit ó ã eu não sei porque ele não Ah tá Opa Rodolfo Ô Rodolfo aqui faltou deou formatar aqui ó Import axus from axios tá bom tem que colocar as aspas senão não funciona e aqui pegando axius ó axius ponto ó ele completa para mim com várias coisas que tem dentro aqui do axius

Mas o que eu quero é esse quit ó eu vou criar uma conexão ali com o meu servidor para isso eu escrevo quit coloco a os parênteses coloco aqui também os bigodinhos se der um control espaço vai mostrar todas as configurações as possibilidades que eu posso colocar aqui o que eu quero aqui ó esse base URL o que que é o base URL o endereço que está o meu backend no meu caso é http do P bar bar local host 2 pontos porta 3000 Tá bom a gente viu isso na aula passada http 2 pontos

bar bar tem que ser bonitinho ó você não colocar o http do pontos barra barra D pau ó coloca aqui ó http do pontos barra barra local host do pontos porta 3000 é aqui que tá o meu backend tá bom eu preciso exportar da aqui de dentro isso aqui eu vou dar um Export default api por que que eu tenho que exportar isso aqui porque eu vou ter que pegar essa conexão Porque por mais que eu faça a conexão aqui é lá dentro de Pages que eu vou puxar os meus arquivos Tá bom se você

se Recordar lá do nosso servidor a gente tem várias rotas a primeira rota que a gente vai acessar vai ser uma rota do tipo get onde ela retorna todos os usuários que a gente tem Tá bom eu já criei alguns arqu Alguns usuários já tá gravado no meu banco de dados então eu vou pux aqui na requisição do tipo get os meus usuários beleza vamos lá então aqui na minha home Primeiro passo é importar minha api Tá bom vou dar um Import api from vamos lá no nosso arquivo pon P barra p bar Services bar

api bom Por que que aqui eu coloquei api porque ela não chama index se ela chamasse index Era só colocar Services mas como ela chama pi eu preciso colocar o nome dela bonitinho Tá bom então o que que eu vou fazer eu vou deletar isso aqui que eu criei porque agora esses dados vão vir do banco de dados então meu users vou deixar aqui um arrei vazio só para não dar problema aqui tá aí que que eu vou fazer ah eu vou pegar aqui ó debaixo de users fazer o seguinte vou criar uma função vou

chamar de get users Tá bom vou pegar os meus users como eu vou ter que ir até o meu backend e voltar ela tem que ser uma função assíncrona a gente falou isso na aula passada por qu é algo que depende de ã essa função Ela depende de algo que está fora do meu código tá lá no servidor Quanto tempo demora para isso acontecer e lá no servidor por mais que o servidor esteja no meu computador mas quanto tempo demora essa comunicação entendeu eles estão rodando em portas diferentes ó eu tô na porta 51 74

do computador o servidor tá na 3.000 eu não sei quanto tempo demora por isso que eu tenho que pedir para ele dar um await Tá certo await eu vou pegar minha api agora eu falo o método que eu vou usar então eu coloco api pget E aí eu só tenho que falar o endereço que é barra usuários tá bom aqui quando eu criei minha api Eu só falei o endereço Geral agora eu tenho que colocar exatamente a minha rota então ele vai trazer meus usuários eu quero guardar isso numa variável então eu vou pegar o

meu users ali ó users é igual a ele é um const então const eu não posso atribuir um novo valor então vou colocar aqui um let tá bom let users ele começa vazio ele vai lá e pega meus usuários vamos ver se tá funcionando vamos ver beleza só que temos um detalhe tô pegando aqui meu let users ele vai lá no meu backend na minha api pego os dados que eu preciso e guardo aqui dentro mas tem um detalhe importante essa função ela precisa ser chamada ó tanto que ele tá vermelhinho que ele tá falando

ó você não tá chamando a função cara só que em que momento que eu vou chamar essa função olha assim que a tela carregar por qu assim que meu site carregar eu preciso ir lá buscar os usuários para colocar aqui na tela olha não seria legal não é uma boa prática eu simplesmente chamar minha função assim por isso que dentro do react tem várias e várias ferramentas uma dela eu vou até importar aqui vou importar é é o use effect ó Vai importar lá de dentro do react o use effect o use effect dá para

fazer muita coisa com o use effect tá certo é uma ferramenta muito poderosa mas um dos poderes do use effect que a gente vai explorar agora é que quando eu chamo o use effect Ele sempre vai executar assim que minha página abrir e ó vou dar uma dica bem legal para vocês ã você vai aqui ó em extensões do seu vs code coloca aqui o react e tem um cara chamado ó react esse aqui ó react Simple react snippets que que é os snippets é o código pronto de algumas funções do react então depois que

você instalar por exemplo eu quero usar o use effect eu vou colocar aqui ó use effect vou escrever use effect e já vai aparecer essa opção ó use effect snippet então ele já monta para mim a estrutura do use effect eu vou apagar essas coisas e basicamente essa estrutura do use effect novamente Não se assusta o cara que criou o react Ele criou essa estrutura louca aqui tá bom a gente importou o US effect lá de dentro do react E aí tudo que tiver aqui dentro ele vai executar quando a minha página abrir o US

effect faz outras coisas mas por agora é importante que você saiba disso ou seja toda vez que minha página abrir ele vai chamar o meu get users e aqui dentro de get users ele vai até o meu servidor e vai trazer aqui a minha variável e vai trazer os dados usuários e guardar dentro da minha variável users Tá bom eu vou salvar aqui e vamos ver se funcionou uma coisa vai funcionar e a outra não tá bom op Pode ser que duas coisas deem errado mas eu já mostro para vocês eu vou atualizar e por

enquanto ó ele tá guardando aqui em users mas ele não tá colocando na tela ó vamos ver o que que tá acontecendo Eu vou clicar com o botão direito do mouse vou aqui em inspecionar E aí a gente tem uma abinha aqui chamada Network e aqui Network a gente vai selecionar fat xhr eu vou atualizar e agora ele mostra para mim todas as chamadas que ele fez ali para o backend que no caso é estas chamadas essa ch aqui ó então ele fez a chamada ó e olha que legal traz várias informações aqui eu vou

sumir um pouquinho para não atrapalhar vocês mas olha só que legal ele manda aqui tudo que eu ele manda aqui ó a URL que eu que eu pedi acesso manda um método e aí eu tenho a resposta tá aqui ó a resposta que meu backend me retornou ó tá aqui ó Joaquim Paulo Esses são os usuários que eu tenho cadastrado Pode ser que o seu erro e vai explodir um erro aqui chamado cores assim ó cores ó cores cores vai dar um monte de erro e escrito cores caso esse erro de cors aconteça muitas vezes

vai acontecer que que acontece aqui ó nós temos um detalhe quando o backend ele se comunica com o front end às vezes dá esse erro de cores que que é esse erro de cores por padrão o nosso backend ele não aceita que qualquer frontend qualquer página entre e acesse as informações dele para isso a gente precisa configurar dentro do backend quem que pode acessar o nosso servidor certo e aí caso derro de cores você vai fazer o seguinte aqui ó você vai lá no seu backend tô com meu backend eu vou parar de rodar vou

dar um cont control c e eu vou instalar uma biblioteca aqui ó npm espaço install install CS ó co RS eu vou instalar Tá certo instalei depois de instalado essa biblioteca cores a gente tem que habilitar por assim dizer o cores Ou seja eu tenho que habilitar Quais páginas podem acessar o meu backend para isso eu vou importar aqui o cores from course E aí eu vou fazer o seguinte eu vou dar um app.use igual a gente fez lembra que a gente usou o app Quem que é o app é o Express app.use cor dessa

forma tá bom aqui dentro do cores a gente se a gente se eu deixar dessa forma aqui eu estou habilitando qualquer página acessar o meu backend certo normalmente isso aqui não é seguro no ambiente realmente Empresarial a gente configuraria aqui bonitinho Qual que é o endereço do meu à do meu frontend que vai acessar aqui mas como estamos num ambiente de testes só aprendendo eu vou deixar liberado para qualquer página acessar Tá bom então pode ser que o seu deu esse errinho instala o cores importo o cores e faz isso aqui ó app.use e cores

Tá bom eu vou salvar aqui vou voltar a rodar node watch server então no meu caso não deu falha de cores mas temos um problema os dados chegaram eu vou dar até dar um console pon log ó pra gente ver o que que chegou aqui ó console. log users Vou salvar aqui vamos ver que que chegou para nós ó ó aqui dentro Chegou um monte de coisa mas eu não quero tudo ó eu só quero o que tá aqui dentro de data ó ó tá vendo tem readers request Bá B Bá mas no fundo eu

só quero o que tá aqui dentro de data que realmente aqui são as informações ó dos meus usuários então vamos fazer o seguinte aqui eu não quero users eu quero só o data então o que que eu faço eu vou criar uma variável aqui né então eu posso fazer de duas formas mas eu vou fazer da forma mais simples vou cliar aqui ó const users from ã nosso Nossa API user from api nome que quiser e aí quando chegar esses dados eu vou fazer o seguinte o users aqui ó o users vai ser igual a

users from api P datata né que eu só quero que tem dentro de data ó só que tem dentro de data e aí eu tô guardando o users from api pdata aqui dentro de users agora vamos ver se tá chegando o dado que eu quero bonitinho ó vou atualizar opa Olha que legal o nosso user já tá com os dados que eu quero tá Rodolfo Mas por que que não aparece na tela porque quando o user estava aqui com as informações bonitinhas tava colocando na tela e por que que agora não tá olha eu preciso

te ensinar uma coisa no react toda vez que tem uma alteração numa variável e eu quero pegar esta variável que tá sendo alterada e colocar ela na tela aqui ó users.map o react não deixa Por que não deixa olha basicamente o react ele Visa a Um Bom desempenho do código então Se toda vez que uma variável ela fosse mudando e fosse alterando algo na tela talvez tivesse um GAP de produtividade de agilidade no carregamento da página e na usabilidade da página por isso que no react as únicas variáveis que são autorizadas a fazerem alterações ali

na tela ou seja mudou o valor da variável muda a tela são os estados do react Estados é o estado do react é uma variável especial que só existe no react e esses estados eles habilitam que a gente consiga alterar alguma coisa na tela Ou seja eu alterei um estado do react eu consigo fazer com que a tela as informações também mudem quer ver ó vamos fazer agora na prática dentro do react a gente tem várias ferramentas a gente já viu uma que é US effect e tem uma outra que chama use state esses carinhas

aqui a gente chama eles de react hooks então Esso aqui são hooks do react são ferramentas aqui que nós temos do react então tem vários react hooks a gente vai usar outros daqui a pouquinho use state ele funciona da seguinte forma tem aqui como ele usa como ele é utilizado a gente vai criar um nosso estado que nada mais é do que uma variável do react para criar um estado eu faço o seguinte eu coloco const coloco um conch e aqui dentro do conch a gente vai colocar duas palavrinhas o user que vai ser a

minha variável em si e um cara chamado set users certo e aí eu vou colocar um igual use state e aqui dentro eu vou colocar dentro dos parênteses o estado Inicial ou seja ele vai começar ó sendo um Array vazio Então como que funciona o estado do react o users em si vai ser a variável que eu vou utilizar então toda vez que o users tiver uma alteração ele vai mudar aqui na tela também por quê Porque que ele é um estado do react se eu quero que as informações elas alterem e eu consiga ver

na tela eu preciso usar o use Stage mas Rodolfo O que que é esse set users ó aqui nos State eu coloco concheto eu coloco duas variáveis ou dois nomezinho eu poderia colocar o nome que eu quiser eu poderia colocar abacate e aqui abacate dois mas normalmente para ficar bem visível que a gente quer a gente coloca o nome da variável que a gente quer Criar e aqui o set coloca set na frente o nome da variável bom isso aqui é uma o que a gente normalmente faz este cara aqui vai ser Onde vai estar

nossos dados e esse cara aqui é responsável por colocar os dados ali dentro então o meu estado vai comear como um arrei vazio toda vez que eu quiser alterar o estado eu não vou fazer isso aqui ó users é igual a pode ver que tá até vermelhinho não deixa toda vez que eu quiser alterar o valor desse cara eu preciso pegar ess esse segundo cara e fazer isso aqui ó set users e colocar aqui dentro aqui dentro a informação que eu quero colocar aqui então toda vez que eu quiser alterar o que tem dentro de

users eu preciso pegar o set users e colocar aqui dentro o dado que vai ficar aqui dentro agora sim quando chegar o dado da minha api ele vai alterar o set users como ele é um estado ele vai alterar tirar o console pon log aqui ele vai alterar a informação que tá na tela quer ver ó ó agora sim ó ele tá indo lá no servidor e pegando aqui ó o Joaquim e o Paulo quer ver ó se a gente voltar se você lembrar da aula passada a gente tem o thunder aqui vou dar um

post para criar um novo usuário eu vou criar aqui ó o Carlos Miguel que tem 19 anos Carlos @ Carlos Miguel carlostom Miguel @email.com Beleza então se eu enviar esse dado aqui que que ele deu de errado ah ah eu acho que o o nosso age ele era uma string se eu não me engano era isso tá deixa eu voltar a rodar o servidor de novo eu vou criar um novo usuário aqui por dentro do backend Ó criou Beleza se eu atualizar aqui você vai ver que já tá o Carlos Miguel ou seja o meu

front end já tá indo lá e buscando os usuários em tempo real agora o próximo passo é a gente conseguir criar novos usuários Ou seja eu vou digitar aqui nome idade e-mail clicar em cadastrar e a gente vai cadastrar esse usuário então pra gente fazer isso primeira coisa que a gente precisa é pegar essa informação que tá aqui dentro ou seja eu vou pegar o nome a idade o e-mail E aí a gente vai mandar pro servidor para que nós consigamos e adicionar um novo usuário lá no backend lá na nossa api E como que

eu Rodolfo faço isso como que eu adiciono o novo usuário utilizando react no react a gente tem outro react Hook que é o use ref que que o use F faz a gente vai colocar um elemento como referência para ele e aí a gente vai conseguir pegar as informações desse elemento por exemplo eu vou colocar como referência o meu input E aí eu vou conseguir manipular pegar esses dados desse input para isso eu vou aqui no react use have use use have cadê cadê cadê Aqui ó use have certo e aí que que a gente

vai fazer meu cara eu sei que são várias informações é US state use effect vai and um por um vai utilizando vai criando projetos que você fica craque a primeira vez que eu vi isso aqui eu também me assustei falei meu Deus do céu isso aqui não é de Deus mas é tranquilo tá bom Como que eu faço eu vou criar aqui a minha referência então por exemplo eu vou criar uma variável vou chamar de imput name vai ser o imput do name Vou chamar o meu US hef aqui dessa forma só fazendo isso então

já vou criar os três ó vou criar o imput Age use e por último eu vou criar o input email também use ref desta forma assim eu vou conseguir Guardar o valor dos meus inputs aqui dentro e por último para fechar com chave de ouro eu preciso avisar quem que vai receber este valor aqui então eu preciso ir lá no meu input E aí colocar um carinha chamado ref aqui ó só escrever ref e coloca o input name aqui eu escrevo ref e coloco o input age aqui eu escrevo ref e coloco o input eil

bom então agora eu tô falando ó que eu quero pegar a referência que eu quero pegar o valor desse imput e guardar aqui dentro do inut name simples assim ó linki eles dois ali agora Toda vez que eu acessar essa variável eu consigo pegar em tempo real as informações do meu e-mail eu vou criar uma nova função aqui vou até pegar essa aqui ó de Só que essa aqui não vai ser get users vai ser e vai ser hum quit users que essa aqui vai criar um novo usuário Tá bom então essa função aqui por

enquanto eu vou comentar isso aqui isso aqui eu vou retirar bom objetivo agora só vou dar um console pon log se deu certo vi as informações do meu e-mail por exemplo em name vamos colar aqui name vamos ver se deu certo então quando eu chamar essa função vamos ver se ele vai trazer a informção que tá dentro do meu inut name aí que eu vou fazer quando que eu quero criar um usuário quando que eu vou criar um usuário quando eu clicar em cadastrar Ah então vamos ver se deu certo eu vou colocar aqui no

meu botão de Button Vou colocar aqui no meu Button meu bot de Button é boa aqui no meu Button a gente pode ser avisado quando um botão for clicado como que a gente faz isso aqui na tag de abertura a gente escreve aqui ó cli certo colocou os bigodinhos e coloca o nome da função perceba que é só o nome da função não coloca isso aqui sen não vai dar pau tá bom aqui no react eu vou no meu botão chamo on Click perceba também que o on Click ó é com letra maiúscula o c

tá bom no react algumas coisas são diferentes do HTML puro então aqui eu escrevo um clique o nome da função e toda vez que eu clicar nesse botão ele vai chamar essa função quando essa função é chamada por enquanto ela só vai mostrar o que tem dentro do imput de name então aqui no imput de name eu vou qualquer coisa blá BL BL BL BL blá Ok vou clicar em cadastrar e vamos ver que que chegou aqui para nós ó então aqui dentro do meu dos dados chegou aqui um objeto chamado current e dentro de

current eu tenho o value e tem a informação que eu quero se eu colocar e clicar de novo eu tenho o value Ou seja eu já tenho as informações dos inputs Agora eu preciso enviar esta informações lá para o meu servidor para isso eu vou fazer o seguinte eu não vou precisar guardar nada em variável Então eu só vou dar um await api ponto vamos lá no no backend lá no backend pra gente Gravar um novo usuário a gente vai utilizar o método post esse método post ele espera que a gente Envie para ele um

e-mail um name e um age que chegam pelo B Se você não se lembra disso volta na aula passada tá bom inclusive até aqui já teve muito conteúdo né até aqui já merece seu like se inscreva aqui no canal para não perder e comenta aqui embaixo O que mais você quer ver aqui no canal tá com alguma dúvida comenta aqui embaixo e bora lá galera não deixa de dar aquele like que ajuda para caramba não tá gostando dá o dislike só não fica em cima do muro Beleza então meu servidor tá esperando na rota post

em barra usuários que eu mande um e-mail um Age um name um age o ID a gente não precisa enviar porque ele é gerado automaticamente Então vamos lá aqui vai ser API poost em barra usuários mas Rodolfo por onde que eu envio os dados Olha eu já li toda a documentação do axus para você e aí você vai ver L na documentação que é só colocar uma vírgula aqui um objeto e aí eu envio os dados o nome tem que ser igualzinho então o name Aonde tá o name aqui dentro ó input inut name ponto

a gente já viu current ele até completa para nós ponto value boa então assim que eu clicar aqui ele vai mandar com método post pra Barra usuários o name que vai tá onde No impun Name current P value aí eu vou mandar também o Age que tá onde imput age inut age pon current pval vou mandar também o e-mail que vai tá onde vai tá aqui em ut email. curent pon value boa então quando eu clicar no meu botão ele vai fazer o quê Vai lá no meu servidor no método post em barra usuários e

vai enviar essas informações para criar um novo usuário Tá certo então vamos ver se funcionou pronto ó já coloquei algumas informações aqui coloquei Rafael 34 anos rafael@gmail.com prendeu botão direito inspecionar clica aqui em Network essa Barrinha aqui ó fet bar xhr pode limpar e vamos ver se deu certo cliquei em cadastrar Opa status 201 status de sucesso se você clicar aqui você vai ver que a o payload é o que a gente enviou Então eu enviei aqui ó idade e-mail name e a resposta do servidor foi o usuário já criado bonitinho Tá certo então deu

certo pô mas não apareceu aqui na tela é por quê Porque preciso recarregar eu preciso ir no servidor e pegar os dados atualizados então se eu recarregar a tela já tá aqui o Rafael tá bom pra gente fazer isso de forma automática a gente pode até fazer isso Ó depois ele fazer essa chamada a gente pode chamar automaticamente o get users porque aí ele já traz os dados atualizados quer ver ó vamos criar um novo usuário ó por enquanto eu tenho o Joaquim o Paulo Carlos Miguel e o Rafael vamos criar mais um Ó coloquei

dados aqui de um usuário Alice com 44 anos Alice @email.com lembre-se que se você colocar e-mail repetido vai dar problema a gente a gente configurou para não ter e-mails repetidos limpei aqui vou clicar em cadastrar e Ah ele já automaticamente já colocou aice aqui ó Tá bom eu não precisei eh recarregar a tela porque toda vez que ele cria um novo usuário ele já chama o get users então que que a gente já tá fazendo a gente já está criando o novo usuário carregando os usuários e agora a nossa missão é deletar um usuário então

a gente vai criar aqui uma função Vamos lá em cima só toma cuidado com o negócio ó aqui do return para baixo é nosso código HTML Claro que vai ter um JavaScript no meio mas a gente também aqui para cima fica nosso código JavaScript então eu tenho get users que chama os usuários eu tenho quit users para criar novos usuários e agora eu vou copiar esse get users porque o o delete vai ficar parecido E aí aqui vai ser delete users Tá bom então como que a gente faz para deletar um usuário se a gente

for lá no nosso nosso servidor para deletar um usuário eu preciso receber aqui ó o parâmetro ó usuários barra o ID que eu quero deletar se você lembrar aqui a gente tem a informação de ID do usuário tanto que a gente utiliza a informação de ID aqui como ke então o que que eu vou ter que fazer toda vez que eu clicar no botão aqui nesse botão eu vou ter que pegar a informação do usuário o ID do usuário e enviar lá pra minha função para que ele envie pro backend E aí delete esse usuário

vamos fazer isso então eu já vou deixar a função aqui pronta essa função ela vai receber o ID do usuário Tá certo ela recebe o id e aí que que eu vou fazer também não preciso de uma variável aqui bom await api P delete que eu quero deletar E aí eu vou deletar o quê usuários barra oid aí a gente pode utilizar esse cara aqui ó que é o template string o template string é a crase Zinha ó dá um zoom aqui ó você coloca a crase Zinha E aí aqui no meio eu consigo colocar

uma variável então eu vou colocar aqui ó o dólar E aí o cifrão ou seja aqui ele vai colocar uma variável Então na verdade aqui é barra e aqui o que for de informação aqui é o qu é o ID do usuário então o ID do usuário vai chegar aqui para mim e eu vou montar minha URL minha URL vai ser usuários barra o ID louco do usuário que vai chegar aqui para mim ó que vai chegar que eu vou enviar tá bom E aí enviando essa informação para o servidor ele automaticamente já deleta o

usuário Tá bom agora a gente tem que chamar essa função então eu vou lá no buttle Lembrando que ó cada usuário tem o seu buttle então eu sei exatamente o ID do usuário porque esse Button é só dele ó eu montei aqui na tela ó cada usuário tem o seu Button então aqui no nosso Button a gente pode colocar One click também então toda vez que eu clicar no botão eu vou colocar o delete user só que eu preciso enviar o ID então eu faço aqui aonde que tá o ID user.id Por que user.id Rodolfo

lembra que a informação do usuário tá chegando no meu map E aí eu chamo ela de user lembra que eu coloquei aqui user pname user. é que eu vou mandar user.id só um detalhe no react por padrão eu tenho que chamar uma função assim só que como eu tenho que mandar o ID do usuário eu preciso fazer dessa forma só que dessa forma o trava ele não funciona então para que eu não tenha problema eu faço isso aqui ó coloco parênteses dessa forma bom Rodolfo por que isso aqui cara são regras do react quando eu

vou chamar a função que eu não preciso mandar nenhum parâmetro eu faço isso aqui se eu preciso mandar um parâmetro eu faço isso aqui Rodolfo eu não entendo direito de funções de parâmetros ó vou deixar aqui no card aqui embaixo também na descrição aula sobre função Tá bom eu tenho uma aula bem detalhada sobre funções como que elas funcionam Tá certo então se tá com dúvida assiste lá então o botão aqui bonitinho um clique chamando delete users mandando o o ID do usuário Vou salvar aqui e aí ele vai acessar o servidor e vai deletar

o usuário vamos ver se funcionou Então vou limpar aqui ó pra gente ver as chamadas eu quero deletar o Paulo cliquei aqui ah status 200 boa deletou o Paulo só que não atualizou por qu eu vou ter que atualizar aqui Man norment para mostrar aí a gente pode fazer a mesma coisa pego o get users aqui toda vez que ele deletar um usuário já chama get users que ele já atualiza na tela Tá certo então vou deletar o Joaquim vou deletar o Rafael e aí tá aqui posso adicionar mais um usuário posso deletar usuário Então

nossa apliação tá criada só alguns detalhes importantes Se eu não estivesse utilizando um US state um estado do react ele não ia atualizar em tempo real não funciona toda vez que eu quero que uma variável mude e ela repercuta na tela eu preciso usar um use state Tá certo detalhes importantes ficou dúvidas é claro que ficou às vezes é a primeira vez que você olha o react então deixa aqui embaixo as dúvidas ficou dúvidas assista de novo a aula novamente eu não peguei o react na primeira vez que eu assisti uma aula dessa entendeu não

peguei de primeira Então tem que estudar tem que revis tal o assunto que aos pouquinhos você vai pegando Tá certo não se esqueça de se inscrever no canal deixar o like Maroto e é claro que não acabou vou deixar mais dois vídeos sensacionais para você assistir e evoluir com react