Au 11 - Mobile - React Native - Comunicando com o backend - Mestres BEGIN

[Música] fala pessoal jancer aqui o vídeo de hoje é um vídeo onde a gente vai estar trabalhando aqui com o backend né a gente vai estabilizar uma conexão com o backend para conseguir buscar os dados né no caso aqui são produtos a gente vai buscar esses produtos pro app e vai listar eles ali é na tela por enquanto sem nenhuma estilização né A gente só vai fazer essa parte aí da comunicação Tá certo então já vindo aqui no vs code eh nós eu mudei a câmera de lado né para não atrapalhar o app que vai f o aplicativo que vai ficar na direita tá na aula passada Nós criamos aqui o formulário né estilizamos ele e nessa aula aqui né como a gente vai precisar de comunicação com backend para usar esse formulário o que a gente vai fazer aqui logo de início é eh comunicar comentar o modal né essa parte aqui do modal que tá com o formulário de adicionar produto para depois quando a gente tiver com a listagem de produtos correta Aí sim a gente trabalha aqui para conseguir o o a funcionalidade em si né de adicionar um produto Enfim passar por todos aqueles passo eh então de início nós temos aqui nós precisamos criar aqui uma tela que vai indicar que a lista está vazia né se a gente olha aqui no exd seria essa parte aqui ó vamos vir aqui né que quando nós não temos produtos e com um botão para adicionar um produto né para criar um novo produto Então nós vamos precisar nós vamos ter um componente para isso né E nós vamos ter também a componente de lista né que é essa aqui tá que fazer a listagem dosos produtos Então hoje vamos estruturar vamos criar uma componente paraa lista vazia eh hoje a gente não vai mexer com estilo nenhum né então vai ser só mesmo estrutura e comunicação com backend E aí sim na próxima aula a gente pensa na estilização tá na verdade vamos fazer já que a gente começou falando do backend vamos fazer a comunicação do backend vamos trazer os produtos e depois a gente cria a estrutura da lista ali da componente que vai Exibir a lista vazia tá então aqui né em produtos como que eu vou querer como que eu penso em usar isso né nós vamos ter basicamente uma componente Eh chamada por exemplo product list ou products né E nós vamos ter outra componente também chamada por exemplo vou chamar isso aqui de empt list Na verdade ele tá me sugerindo aqui esse empt list que é o ícone que eu copiei né Eu já copiei aqui o ícone do XD que seria essa imagem aqui e chamei de empt list por isso que ele sugeriu ali o Import Mas vamos vamos arrumar aqui ao invés de na verdade é empt box né e o XD me me exportou uma imagem com em base 64 por isso que eu tenho esse string imensa aqui mas é o formato que a gente tem essa imagem tá chamar de empt box para não confundir tá feixar o arquivo ícones né voltando aqui um pouco e a gente já falou de ícone já falou dessas componentes svg né que a gente converte um svg em um ícone uma componente react né a gente já passou tudo isso e esse empt Box é um desses casos tá então eu vou ter a componente aqui é empt list tá que vai ser renderizada quando não tiver dados Só que essa questão do dado normalmente nesse caso aqui a gente vai tá fazendo aqui na na tela de produto né ou seja antes de eu retornar aqui antes de eu retornar a parte visual né antes de eu retornar o jsx aqui da função da componente produto eu posso executar funções e é aqui que eu vou estabelecer a comunicação pro banco para toda vez que o app carregar né Toda vez que que eu abrir a aplicação que ela iniciar eu já vou fazer uma requisição pro backend buscar os dados e exibir em tela né isso automaticamente tá então uma funcionalidade que a gente tem que faz isso sempre é o use effect né que US effect é um Hook do react né e agora falando um pouco mais sobre esse Hook ele a anotação dele é essa aqui ó use effect né a gente executa coloca os parênteses para indicar a execução de uma função o primeiro parâmetro se a gente até vê aqui na tipagem ó o primeiro parâmetro dessa função é uma callback tá então é uma função que vai ser executada e o segundo parâmetro é uma ar rei de dependência ó dependence list e a gente coloca aqui o Array então a forma que o use effect funciona é que dentro dessa função callback eu vou usar vou executar variáveis vou executar funções eh objetos enfim eu vou eu vou trabalhar com alguma coisa eu vou executar algum código e esse código ele pode depender de alguma variável externa então lá dentro dentro dessa callback eu uso por exemplo e um outra variável que eu tenho aqui fora que eu criei aqui fora um state eh alguma coisa que essa função vai ser dependente daquela variável E aí eu passo essa essa variável numa Red dependência E aí sempre que essa variável for atualizada sempre que o valor dela mudar essa minha função ela é executada de novo porque houve uma mudança na dependência E aí essa função essa callback aqui do use effect ela é executada de novo pra gente pra gente recalcular né o efeito no caso o Hook os effect né a gente pensa em efeitos visuais ou até efeitos de de de cálculo de dado né de trazer dados de buscar dados ou de processar algum tipo de dado então a gente usa o Hook US effect para isso eh e quando deixa o rei de dependências vazio ele só vai executar uma vez sempre que a componente for carregada e e não vai executar mais né e e eu falo disso eu falo ISS esse não executar mais no sentido de lembra que eu falei lá que sempre que a gente altera o estado que a gente atualiza um state a componente recarrega no caso do use effect com a rede de dependências vazio nessas nesses recarregamento aí da componente a função aí do use effect não vai ser executada tá então a gente vai até fazer um teste aqui tá eu vou fazer aqui dentro dessa função do use effect um conso log Hello from use effect eu vou comentar aqui a minha lista de produto e e aqui a gente não vai na verdade a gente ó lá ó sempre que eu recarrego o app no meu terminal ele tá dando um log aqui Hello from use effect a gente não vai conseguir testar mais a funda agora porque a gente não tá tá fazendo do controle de state é forçando essa componente a a recarregar na verdade a gente pode fazer isso né vamos fazer tá vamos fazer aqui pro pro exemplo ficar completinho eu vou criar aqui ó na minha lista de no na minha tela de produtos eu vou criar aqui um um state tá então const e eu vou chamar aqui de Data Set data que a gente vai precisar desse state já então já vou criar vai receber o US state US state o Hook né do react e aqui eu vou colocar ele como um boleano pra gente conseguir fazer esse teste então US state vai começar como false tá então dentro do meu tsx do meu jsx né que eu tô retornando aqui eu vou retornar um botão esse botão vou pegar o do react Native mesmo esse botão vai ter um título né vou chamar aqui o título teste e o onepress ou seja sempre que eu pressionar esse botão que que eu vou fazer eu Vou atualizar o meu state então vou fazer um set data e aí sempre que eu pressionar esse botão ele vai atualizar o state o state vai recarregar a componente Ah como é que eu ten certeza que a componente foi recarregada eu vou colocar um log aqui ó console. log fora do meu US effect Hello from product product page não page products screen né aqui nó não estão na web certo então sempre que a tela de produto for carregada eu vou dar um conso log Hello from product screen no meu US effect dentro dele vai tá dando um conso log Hello from use effect e sempre que eu pressionar o botão a minha componente eu vou atualizar o state né atualizando o state a componente inteira vai ser recarregada E aí a gente vai ver esse log aqui se repetindo e o log do use effect vai ter só uma vez tá então vou recarregar aqui a aplicação lá no meu terminal ele já deu o log ó hello from product screen tá esse log externo e Hello from use effect certo se eu pressiono teste olha lá ó hello from products screen mas eu não tenho mais Hello from US effect né só executou uma vez certo então Por que que isso aconteceu porque o meu o a rede dependências né tá vazio e se eu passar esse data aqui ó o data do US state como dependência do meu use effect Agora sim Sempre que o data mudar que o valor alterar né que o valor atualizar o meu US effect vai re executar né Essa função Hello from effect a gente vai ver no log Hello from effect mais vezes então vou recarregar o app aqui né para ele limpar ali os log logs tá lá Hello from product screen Hello from use effect se eu clico no botão ele deu o log duas vezes ou seja use effect foi re executado por qu porque a variável data foi atualizada tá então o funcionamento da forma mais básica do use effect é esse e nós vamos usar isso para buscar os dados do back tá então vou limpar aqui esses logs Vou deixar tudo vazio vou deixar só o date né do Set data porque nós vamos usar ele para armazenar os dados que vem do backend Beleza então para fazer isso nós vamos usar uma biblioteca tá para fazer essa comunicação com backend e que biblioteca é essa eu já até deixei aqui no Chrome pesquisado né Por npm npm é o node package Manager né o gerenciador de pacotes do node onde fica os pacotes que a gente instala como dependência então se eu abro aqui o npm e pesquiso aqui por exus exus tá essa biblioteca é um cliente http né que nós usamos tanto no Browser quanto no mobile para fazer essa comunicação né Essa ponte entre o front end e o backend tá então é uma biblioteca extremamente Popular tem 36 milhões de downloads por semana tá e enfim toda a documentação dela tá aqui a forma de instalação e como usar E aí a gente vai estar fazendo esse uso no nosso app tá então vindo aqui no app eu vou abrir o terminal eu vou parar aqui o servidor Expo né com contrl c e aqui eu vou dar um npm install exus tá ele vai instalar aqui o exus pra gente não demora tanto né enquanto ele instala aí vamos ajustando aqui o app porque no app nós vamos nós temos que fazer uma certa configuração para que isso funcione né para que a gente consiga fazer essa comunicação usar o exus em si tá então para isso nós vamos criar um arquivo eu vou chamar vou criar um arquivo aqui chamado na verdade um arquivo não vou criar uma pasta tá dentro de src vou criar aqui o New Folder e vou chamar de Services porque aqui vai ficar as coisas relacionadas a serviços do app tá o app tem o serviço de criar produto tá então a configuração desse serviço vai ficar aqui e aqui dentro eu vou criar um arquivo chamado api PTS tá que é onde nós vamos fazer essa configuração dessa comunicação com a api deixa eu ver aqui no terminal ele instalou instalou né ã adicionou o pacote isso instalado esse essas vulnerabilidades aqui são dos pacotes né das dependências que nós estamos usando dá para explorar isso aqui isso aqui seria hum um outro assunto tá e a gente não precisa se preocupar com isso agora beleza então no arquivo aqui ap. test primeiro eu vou importar o exus né Import exus from exus e aqui eu já vou criar a minha eu vou instanciar o exus com as configurações do meu backend para para ele me retornar um objeto que eu vou sempre usar esse objeto para fazer a comunicação tá então vou criar aqui a variável api Isso aqui vai receber um exus exus P Create e aqui esse método Create do ex vai vai criar um cliente pra gente que a gente vai usar esse cliente para comunicar lá com backend tá então aqui no Create também vai ser bem simples porque a gente não tem tanta configuração ainda né é tudo muito simples aqui no Create a gente passa um objeto de configurações e aqui dentro Olha já me sugere aqui tudo que a gente pode configurar é muita coisa mesmo muita coisa interessante mas no nosso caso aqui a gente só vai definir o base url que é o é o RL base lá do backend que como eu tô rodando local né esse URL http 2 p bar Barra local host 2.

3 3000 né na porta 3000 e aqui o que vai mudar Vai ser um barra product né para mim acessar a lista de produtos fazer um get né lá na lista de produtos um um post lá no Barra product para criar um produto né o end Point na verdade esse Depois da porta né barra products é o endp que a gente vai definir quando for usar né a gente não vai definir aqui porque agora é só o RL base mesmo né só o local host tá E aqui na linha de baixo vou dar Export Def api beleza configuração basicamente é essa vou vir aqui no terminal vou dar um npm start aqui pra gente iniciar o exp e eu já fazer o Build do app de novo aqui no emulador enquanto ele inicia ali a gente vai voltar lá na tela de produto e aqui na tela de produto dentro do meu effect eu usar o meu exos para poder fazer essa Comunicação tá só que tem outro ponto que a gente tem que tomar cuidado que é porque o exus ele na verdade essas só voltar aqui o comando executei errado fou uma uma crase ali npm start Agora sim e voltando né o exos ele executa funções assíncronas né na verdade a comunicação com o backend ela é assíncrona então para trabalhar com pra gente trabalhar com função assíncrona né a gente a gente não falou aqui mas eu acredito que Leandro falou lá no curso de backend né lá ele abordou melhor o O que seria uma função assíncrona mas Resumindo aqui eh o a função assíncrona é uma forma da gente executar funções demoradas sem travar o fluxo do app então normalmente né como a gente imagina a a a programação é que cada linha vai ser executada uma após a outra de código né E se uma linha de código demora 10 segundos para ser executada a gente não pode ficar ali 10 segundos esperando para executar o os próximos códigos porque vai travar a aplicação vai deixar a experiência do usuário lenta ruim então a gente não a gente evita fazer isso e as funções assíncronas existem Justamente por isso porque a gente vai conseguir ter ali e trechos de código demorados para serem executados de forma assíncrona ou seja de forma paralela né enquanto a gente vai ter um fluxo de código e o fluxo assíncrono que vai rodar ali meio de forma paralela sem travar o nosso app E no caso aqui do da comunicação com backend do exus em si são funções assíncronas então se eu importo aqui o Api api que a gente acabou de criar e uso aqui um api. get ou seja vou fazer uma solicitação do tipo get né aqui ele pergunta o URL que URL é esse nesse caso nosso é só o endp né então o endp vai ser barra product né então eu vou acessar localhost 3000 barp que é esse endp que eu tô passando aqui eu posso passar aqui o objeto de configurações com enfim definindo várias outras coisas mas nesse caso aqui não nós só vamos fazer um api Get No endpoint product eh e isso aqui vai me retornar um Promise né então eu posso fazer aqui ó post data vai receber o o retorno aqui do AP get se eu passo o mouse aqui em cima olha lá ele vai me retornar uma Promise de um exus response do tipo N e N e essa questão do tipo a gente pode fazer a tipagem do retorno então eu posso falar que por exemplo no api. get eu tô indo lá no backend buscar um tipo de dado então eu posso fazer aqui o menor o usar aqui os símbolos né menor maior e aqui dentro eu vou falar que eu vou buscar um e product a gente não criou essa interface ainda né mas seria uma interface que descreve um produto só que eu não vou vou buscar só um produto eu vou buscar uma lista de produtos por isso que a gente coloca aqui um arrei né uma lista um na verdade aqui é um colchete né abrindo fechando para indicar que eu vou trazer uma lista de produtos tá essa interface product eu vou criar ela aqui em cima mas depois a gente vai precisar mover ela para outro lugar porque ela vai ser usada em diferentes locais Tá mas eu vou criar aqui a interface e product e eu já tenho aqui na verdade a interface V só copiar aqui pra gente não perder muito tempo né porque isso aqui é meio que o modelo lá do backend né o modelo que o backend vai me retornar e um produto ele vai ter um ID vai ter um nome uma descrição quantidade preço o preço anterior né o preço antigo categoria desse produto a marca do produto e a loja que vende esse produto tá então a gente vai trazer uma lista desses caras e já aproveitando aqui o gancho para poder indicar aqui uma ferramenta que eu uso bastante que é o Postman tá Postman que é basicamente a gente pode vir aqui no Chrome e buscar aqui pro por post que é uma ferramenta que a gente usa para testar apis né então voltando aqui na interface dele eu posso digitar aqui ó deixa eu tirar aqui o app eu posso digitar o end Point que eu quero acessar então lá htp 2 p bar bar local host 3000 na barra product né Point product eu vou fazer uma requisição do tipo get e quando eu clico ali em send ele vai mandar esse requisição pro meu backend e vai me retornar aqui a resposta então lá ó eu tenho uma lista de produtos né e é e basicamente isso né um arrei ó lá começa com colchete acredito que tá dando para ver aí bem né não olha câmera tava na frente uma lista né um arrei aqui um com os corchetes de objetos né de produtos tá então é isso que eu tô tip lá e é isso que eu vou receber de retorno tá só que esse data ele é uma Promise tá e a promise a gente pode resolver ela de duas formas a gente pode usar lá o o no caso aqui ó data.

on den né resolver dessa forma ou então usar funções assíncronas né para usar ali um talvez usar até um tricat para poder tentar pegar erros mas no caso aqui vamos é vamos usar vamos fazer com tricat e com a função assíncrona só que um problema da função assíncrona e do use effect é que essa callback do use effect ela não pode ser a assíncrona né então eu não posso falar aqui colocar aqui um ayn nessa função inclusive ele já dá até erro aqui né mas anotação né acredito que você também já viu lá no curso essa anotação do da função assíncrona mas deixa eu criar aqui em cima um exemplo nós vamos ter né uma uma função aqui eu vou criar uma Arrow function né porque a gente usa sempre a function aqui também no react Native então eu vou criar aqui por exemplo um const é ayn test o o nome da função né vai receber a função normalmente a gente cria assim né Essas são funções as funções síncronas né e para ela ser assíncrona eu coloco um ayn aqui antes tá só que trazendo essa anotação pro use effect né no caso use effect é uma função anônima que ela ela não tem nome mas eu eu colocaria o ayn aqui nessa posição Mas ele já dá erro porque não não pode né não a gente não consegue fazer essa função assíncrona por definição do react então pra gente resolver isso dentro da função callback a gente cria outra função tá então eu vou chamar aqui uma função get e essa função vai ser assíncrona cé até aqui tudo tranquilo né cri aqui uma função assíncrona dentro do meu use effect E aí toda a lógica assíncrona que eu for fazer eu faço dentro dessa função então a comunicação com backend e o tratamento de erros Enfim tudo que eu for fazer eu posso fazer dentro dessa função e logo após logo após a definição dessa função eu simplesmente invoco ela né executo essa função get aí e isso aqui vai funcionar de forma assíncrona dentro do meu use effect Tá certo então dentro das funções assíncronas nós temos também o aight né O que que é esse aight é quando a gente chegar numa parte de código demorada né numa linha de código que demora a gente usa o await para aguardar aquela resposta pra gente processar ela então no caso aqui esse aight é bem que uma forma de resolver as Promises e o api. get retorna pra gente uma Promise tá então se eu vejo aqui ó o meu data o meu data é uma Promise né de um exus response de uma lista de produtos se eu coloco aqui um a ou seja o data recebe um ait eu vou aguardar o Api pget enfim o Api lá do backend buscar os dados e trazer de volta quando eu aguardo isso aqui o tipo do meu data já não é mais um Prom já é só um exus response de uma lista de produtos tá então ele já aguardou e resolveu essa Promise então depois aqui ó eu vou dar um conso log nesse meu data pra gente dar uma olhada na verdade o data é um exus response ou seja aqui dentro desse data vai ter informações da requisição em si Então vai ter os dados que estão trazendo de volta a configuração da requisição os headers request status várias coisas referentes à requisição só que o que nos interessa é o é a propriedade data né então vai ficar aqui data ponto data O que é meio estranho Então eu só vou renomear aqui a resposta do do backend a invés de chamar de data eu vou chamar de response porque faz mais sentido né e depois eu acesso um response pdata E aí fica ok a gente consegue ver direitinho dando um conso log eu vou salvar isso aqui e vamos abrir aqui o emulador não abriu até agora deixa eu abrir aqui o Android isso agora foi isso depois que eu coloquei para dar Reload que ele conectou tá então vai abrir aqui e deu um erro aqui ó Network error e eu já até sei o que é esse erro que na verdade é é um erro que de início a gente erra bastante isso aqui porque quando eu passo aqui ó no meu exus Create o base URL e eu digito local host esse local host não é o local host da minha máquina do meu computador mas sim o local host do emulador tá então quando eu digito aqui localhost 3000 eu não estou acessando eu não vou conseguir acessar a api que está rodando na minha máquina mas e sim esse local host vai se referir ao IP local do emulador tá então dentro do emulador já existe um map que ele mapeia URL o o RL da máquina para dentro do emulador é meio que uma forma de eu acessar o o RL local da minha máquina de dentro do meu emulador que é acessão no IP 10. 0 2.

2 ou é p0. 2 agora eu tô em dúvida mas é vamos testar aqui deixa eu reiniciar aqui o app e ver se ele vai fazer a requisição é aparentemente não fez acho que é 0. 0 10.

0. 2 isso Ó lá já funcionou tá ele já fez o log aqui para mim então quando eu acesso o IP 10 0. 2.

2 no emulador é a mesma coisa de eu tiver acessando o local host da minha máquina tá ou então eu posso colocar aqui ao invés de 10. 0. 2 P2 o IP local o IP da máquina né o IP v4 mesmo que também vai funcionar Tá mas ele já logou aqui ó deixa eu só Minimizar com o emulador pra gente ver no meu terminal a lista de dados aí que veio do backend Então já tô conseguindo comunicar com backend tô conseguindo trazer essa minha lista de produtos Agora eu só vou exibir essa lista na minha tela tá no meu App E como que eu vou fazer issoo eh usando state né então lembrando né lá no state o que que é o state é sempre que eu tenha alguma alteração que eu quero eh mostrar essa alteração na tela eu atualizo o state o state recarrega o meu App e exibe aquela alteração de forma visual tá então quando eu aqui uma vez que eu tenho a resposta do meu backend eu vou dar um set data né eu vou definir no meu state esse esse dado tá então ao invés de dar o conso logo vou dar um set data no meu response pon data tá e ele vai salvar lá eh o meu o meu state ele tá começando como um boleano né tá começando como false aqui mas esse esse exemplo aqui eu coloquei só pra gente testar lá né o recarregamento só que no us state a gente consegue também fazer a tipagem dele tá então eu vou falar aqui que ele também vai armazenar uma lista de produto tá dentro do desse state e ele vai iniciar como uma lista vazia né aqui dentro dos parenteses a gente coloca o estado Inicial né o valor inicial desse estado é uma lista vazia e aí quando eu comunicar com o back eu vou pegar essa lista de dados e salvar no state Tá certo então feito isso agora o meu data é uma lista de produto beleza uma lista de produtos e aí dependendo do resultado desse data se ele existe ou não eu vou renderizar em tela esses valores tá então aqui no retorno da função já no no tsx né já no tsx né no no jsx eu comentei aqui as minhas listas o as componentes que eu criei ali vou deixar comentado aqui ainda eu só vou dar o exemplo aqui eh exibindo o dado em tela tá que como que eu vou fazer isso já começa passando aqui colchete colchetes não Chaves né para mim conseguir eh executar um JavaScript dentro do do jsx né E aqui dentro Eu tenho a minha variável data né que é o meu state que é a variável que altera né Sempre que eu atualizo estados então eu posso fazer o seguinte eu posso fazer um data P leng ou seja o tamanho dessa lista se o tamanho dessa lista for maior do que zero significa que eu tenho produtos para serem mostrados tá então aqui a gente pode usar um ternário né operador ternário que Relembrando né é um operador que retorna retorna coisas ele ele dá dois resultados né Caso seja verdadeiro ou falso então se for verdadeiro eu vou retornar alguma coisa se for falso eu retorno outra tá então se o data L for maior do que zero eu vou retornar aqui um só vou retornar um um text vai pra gente ver isso aqui funcionando e depois a gente vai criar nossos componentes Vou importar o text aqui do react Nate eh o texto aqui vai ser hum existem produtos E caso seja falso eu vou retornar outro texto escrito vazio tá então se eu fizer isso ele vai logar ali para mim ó ele vai logar não né no app vai aparecer aqui na tela escrito existem produtos tá se eu recarregar o app deixa eu ver se isso aqui vai ser possível na verdade tá sendo como tá tudo local né a comunicação tá sendo muito rápida então eu vou fazer o seguinte eh eu vou setar um um um intervalo aqui na verdade um timeout né e set timeout é uma função do JavaScript e eu basicamente o eu vou falar ah espera aqui 2 segundos né 2000 msos depois de 2000 msos Execute essa função e aí dentro dessa função eu vou colocar aqui ó o set data que atualiza o meu state tá então vou recarregar o app e agora vai ficar escrito vazio aqui por 2 segundos e depois muda né para existem produtos então é o operador nosso ternário funcionando e a gente vai usar ele para renderizar as listas na tela tá Então nesse primeiro caso caso tenha sucesso o que que eu vou fazer eu vou retornar ao invés de retornar um text né um texto escrito alguma coisa eu vou retornar um View tá um viw de quem do react Native que eu já tenho importado aqui tá e dentro dentro dessa View eu posso executar também mais JavaScript então eu posso colocar aqui ó Chaves também né as chaves abrindo fechando e aqui dentro o que que eu vou fazer eu vou fazer um data.

map Ou seja eu vou mapear a lista de produtos para transformar aquela lista de objetos em uma lista de textos por exemplo de textos para ser exibidos na tela tá então eu vou fazer isso no data. map né é uma função que vai ser executada para cada item né da lista para cada item do Array E aí para cada item eu vou retornar um text tá então no map aqui né eu vou receber um item eu tô pensando é vamos vamos manter assim se a gente bota o mouse em cima né item é do tipo product Ou seja já não é mais uma lista de item né É só um item agora que eu estou trabalhando e eu vou retornar para cada item eu vou retornar um text e dentro desse Tex vai ter um item ponto name vamos retornar o nome do item ele tá dando erro por sim o typescript tá reclamando aqui né porque eu tô retornando esse meu mapa de essa minha lista de de textos né aqui dentro desse meu ternário mas isso aqui na verdade vai ser resolvido lá quando a gente fizer o a componente tá Então na verdade não né na verdade nem eu nem tô retornando tá então ó data map Tem uma função eu coloquei aqui as chaves né Ou seja a função tem um corpo o corpo da função mas esse corpo dessa função não tá retornando eu não tenho aqui ayw return aí o que que eu faço eu posso colocar o retorno dessa forma aqui tá vai funcionar olha lá ó teclado mouse monitor né já foi exibido aqui em tela ou ou a gente pode fazer diferente também que nesse caso aqui é só eu tirar o o return daqui e tirar as chaves tá da função e o ponto e vírgula e vai funcionar também tá então dessas formas dessas duas formas a gente pode fazer tanto faz e com isso eu já tô comunicando com backend eu já tô trazendo os dados pra aplicação e executando essa função de buscar os dados somente uma vez né quando a aplicação carrega e com isso feito eu seto no state e pego esses dados e most em tela tá Então nesse isso que eu fiz agora essa primeira componente aqui voltando lá no exemplo que eu escrevi lá no início da aula essa primeira componente aqui que eu retorno quando existem dados vai ser a componente products list e esse texto aqui escrito vazio vai ser a componente empt list né só que a gente vai mudar o visual delas né então já vamos criar as componentes aqui tá dentro da tela de produtos né eu tenho aqui uma pasta components ou seja componentes específicos da tela de produto e aqui dentro eu vou criar uma pasta né chamada products list tá e vou criar uma pasta também chamado int list né as componentes para ambas aí e na verdade os arquivos para ambas componentes então product list vou criar aqui um file vou chamar index.