Au 05 - Mobile - React Native - Criando estrutura do subheader - Mestres BEGIN

[Música] fala pessoal jancer aqui no vídeo de hoje é um vídeo mais simples né um vídeo onde a gente vai estar preparando a estrutura aqui da nossa tela de produtos né na aula passada a gente estava estilizando lá a questão da navegação o cabeçalho e ali o boron Neve né nessa aula aqui a gente vai começar a estruturar baseado o que a gente tem no exd para nas próximas aulas a gente estar trabalhando com a parte de visual de estilo né Eu gostei dessa separação que a gente fez de pegar uma aula e criar a

estrutura explicar a estrutura como que funciona e na próxima aula estilizar né e e nas aulas que tiver a relação aí entre estrutura e estilo a gente faz junto mas para essa aula aqui a gente vai fazer ali um pouco de Esqueleto e na próxima aula a gente entra com a estilização aí até porque essa parte da da aplicação a estilização vai ser um pouco mais complexa né até a própria questão da listagem né vai ser um pouco complexo Então vamos voltar aqui no nosso código né na verdade vamos olhar aqui o XD né que

na aula passada Nós criamos né reder e boron neve e nessa aula aqui a gente vai fazer o esse esqueleto aqui ó do que eu eu eu vou chamar isso aqui de Sub header que seria nós temos o header né o cabeçalho e tem um sub cabeçalho não não fica legal né mas é o cabeçalho abaixo do cabeçalho principal e no htm primo seria um H2 H2 enfim eu não vou bagunçar tudo aqui não e H2 não que H2 lá é só para exibir texto né mas a gente vai criar essa componente aqui tá que

vai ser vai funcionar como subheader então ela vai a gente vai meio que usar ela para navegar né por isso que é um header então de todos os produtos e produtos excluídos não vai ser bem uma navegação vai ser uma renderização condicional mas ela vai ter uma certa funcionalidade aqui ess essa componente se vai ter uma funcionalidade tá que é essa de escolher o que será exibido aqui embaixo e aqui embaixo é a parte da lista né que a gente tem aqui né a listagem dos produtos Tá então vamos começar esquelet isso aqui E para

isso gente se a gente ver aqui nós temos dois textos né É simples isso aqui o complicado vai ser a questão do estilo e a gente já vai criar um componente de botão né porque esse todos os produtos e produtos excluídos são botões né então a gente já vai criar esses componentes de botões colocar isso aqui tudo na tela e na próxima aula a gente vai aplicar o estilo nso né Principalmente nos botões tá que quando a gente clica eles vão alterar o estilo dependendo aí do último que foi clicado Tá certo então vamos aqui

em vamos aqui no código né aqui a nossa tela de produto app tá rodando tá com essa cara aqui que é basicamente o vi e um botão né e o boron n nesse caso aqui o que que eu vou fazer nós teremos na verdade a componente chamada eh subheader né certo ela vai ser mencionada aqui dessa forma Então a gente vai ter não Não é O U maiúsculo né o minúsculo dessa forma aqui tá Então vamos criar aqui em component essa componente ela seria específica da tela de produtos né então dentro dis temos a pasta

screens screens né temos a pasta products então aqui dentro Eu criarei uma pasta components para colocar esse subheader né que é uma componente específica dessa tela mas eu vou criar na component geral porque pode ser que né caso a gente tenha várias telas esse subheader seja reutilizado tá então vou criar aqui uma nova pasta chamada subheader e dentro dela nós teremos aqui um index.tsx né que é a componente em si e teremos também um styles.ts tá então no index tsx aqui é a componente né então na aula passada a gente viu bastante componente e a

gente já abordou bastante né então no bor neve aqui no header a gente entendeu usou bastante usou usou componentes né mas o fato é que componentes eh repetindo aqui né as componentes são códigos que serão reutilizáveis né ou utilizados uma vez depende é a gente ir quebrando a nossa aplicação em em partes pequenas então aqui eu vou ter e componentes né voltando lá no jsx são funções que Retornam algo visual né Isso é a ideia do jsx Ali nesse caso aqui é o tsx porque a gente tá usando typescript mas a gente vai ter a

função sub né Essa função retorna algo visual né eu vou retornar aqui um viw importando aqui do react n e na verdade eu vou fechar ela assim tá E no final desse arquivo aqui eu vou dar um Export default sub header certo então dessa forma aqui como eu já tô criando a função exportando eu já consigo importar ela aqui na minha tela de produto tá então vou fazer o Import aqui componente subheader eu tenho uma View né aqui dentro desta View Vamos colocar um texto aqui a tag text né e com o text aqui importando

do react Native hello vamos printar aqui né um Hello from sub header e olha lá no app né Hello from subheader então a componente tá criada já tá funcionando por enquanto não vai ter estilo né porque a gente vai deixar isso pra próxima aula mas aqui dentro o que que a gente tem o texto produtos né E essa este segundo texto aqui né nesta página você verá os seus produtos cadastrados Então vamos copiar isso aqui eh e nós teremos a tag text né um text escrito produtos que seria meio que o título né E outra

tag text escrito nessa página você verá o os seus produtos cadastrados tá dessa forma que tá aqui beleza depois disso O que que a gente tem Nós temos dois botões né então eu vou importar aqui o Button do react Native e esse Button precisa de um título né então title aqui e a gente vai ter todos os produtos e produtos excluídos né então todos os produtos copiar ele aqui colar e exidos certo e aí os botões apareceram aqui só que esse botão do react Native a gente tem bast esse botão nativo né que a gente

importa do react Native a gente tem bastante limitação de estilização tá e se a gente olha aqui no XD esses botões eles são altamente customizados né o estilo deles é diferente então PR gente ter mais ess ilidade ao invés do botão a gente tem aqui ó um table uma componente né no react chamada touchable opacity tá essa componente ela é um componente um wrapper né que ela fica por volta de alguma coisa então tudo que tiver um table op por volta vai ficar vai se tornará um botão né então se eu tenho um to com

um text dentro e aqui a gente vai ter todos os produtos né se eu salvo isso aqui nós temos aqui o texto todos os produtos mas se a gente clica ó lá ó ele dá esse efeito de opacidade né que indica que é algo clicável né então a gente consegue fazer criar botões com toub pit porque o toub pit ele tem aqui também ó o on press né Ou seja quando eu pressionar esse esse botão eu posso executar uma função né quando eu pressionar essa componente ele eu posso dizer que tá uma função então isso

se torna um botão né então ao invés de usar o Button a gente vai usar o toub opacity Mas se a gente volta aqui no nosso XD esse botão ele é usado duas vezes né então a gente pode muito bem criar uma componente de botão para ser reutilizada nesse caso aqui e pode ser reutilizado em várias vezes né porque a gente tem vários botões aqui na aplicação Ó tem no caso quando eu vou deletar né ou esse excluir produto esse continuar né que mais que a gente tem aqui de Botão o novo produto né então

a gente tem a gente tem diversos casos aqui onde a gente vai est usando botões e a gente pode criar um componente altamente estilizo de falar isso como uma componente ela está aberta a extensão né então ela ela a gente quem for usar vai conseguir personalizar ela muito bem porque ela não tem tem nada muito trancado né Ela é um componente bem eh livre aí pra gente tá personalizando Então vamos criar aqui né eu vou chamar isso de Custom Button que é um botão customizado né botão nosso então aqui components eu vou criar uma pasta

chamada Custom Button tá esse Custom Button vai ter um index p tsx e isso aqui é uma componente né então const Custom Button vai receber uma função essa função retorna algo visual né E aqui no final vou dar um Export Def o Custom Button certo e o que que ele vai eu na real Vou salvar aqui vai dar erro Hum tá dando erro eu tenho que retornar alguma coisa né vamos retornar aqui oio do react Nate só para parar de dar erro então aqui ó V Vamos dar um Hello aqui ó hello from Custom Button

né E aí eu vou importar esse Custom Button no meu subheader tá então eu vou atirar esse botão na verdade vamos aqui na tela de produto ó vamos tirar esse texto Hello from products e esse botão navegate né que nós usamos lá para testar a questão da navegação tá vamos deixar só o subheader dentro do subheader vamos tirar esse botão e vamos chamar aqui o nosso Custom Button n o vs já vai importar PR gente n da pasta correto e salvando aqui deu um erro que textos devem renderizados dentro de uma tag text então é

dentro da vi n Eu já escrevi o tex mas eu preciso da tag ou ter aqui a t text abrindo e fechando isso aqui quebra isso aqui quebra isso aqui vem para cima e eu tenho que importar o text do react Native salvando ó lá temos todos os produtos e é não é o Hello from Custom Button né a gente tá testando a componente então já que a componente Custom Button tá funcionando o que vai lá para dentro dela é esse touchable opacity né que a gente acabou de criar aqui então vou recortar esse to

Pest e colocar vou colocar aqui no lugar de tudo né do vi e do text porque o tob Pest funciona como um viw né um componente ali wrapper e dentro nós temos o text então salvando aqui e o Custom Button ele vai ser usado duas vezes né então salvando aqui tudo nós temos duas vezes aqui no app escrito todos os produtos né que é cada um é essa nossa componente de Botão então pensando melhor nso aqui é o botão ele tem ter um texto né dentro dele que é esse texto que tá fixo aqui todos

os produtos que seria no nativo né no botão nativo aquele title então eu posso falar que o meu botão né e aqui a gente já começa a criar a interface fazer a tipagem e falar que um componente recebe Tais parâmetros Então vou criar aqui a interface né props e dentro dessa interface eu vou ter um title que é um string tá então o que que é isso né voltando aqui para explicar um pouco melhor é Custom Button é uma função tá uma função e uma função ela pode receber parâmetros né a gente pode enviar eh

parâmetros para essa função então eu posso falar que essa função Custom Button ela vai receber um title que é uma string tá só que eu posso falar também que essa função recebe né ela pode receber por exemplo um title um onpress que nesse caso é uma função uma função que vai ser executada quando eu pressionar esse botão só que a gente pode falar também que essa função Ao invés dela receber diferentes parâmetros ela vai receber um objeto certo e dentro desse objeto vai ter um title que na verdade não é assim né vai pera aí

um title opa esse title vai ser sei lá alguma string né ele vai ter também um tá dando erro aqui por É que na verdade eu tô fazendo ISO tudo errado né mas é só exemplificando que a minha função a minha componente ela pode receber diferentes parâmetros mas ela pode receber também um objeto de de props né que lá no react quando a gente puxa lá no react Vamos abrir aqui a documentação tá a documentação do react a gente tem aqui o react props n se a gente pesquisa isso aqui a gente encontra aqui né

components and props S documentação inteira explicando o que seria as props né que na verdade a prop ela é aquele objeto que eu falei ali então inv vez da gente receber vários parâmetros a gente vai receber um objeto que é as propriedades dessa componente então eu crio uma Interface para descrever aquele objeto né puxando aqui um pouco do do typescript eh O que que é então tipo se eu tenho uma variável test essa variável ela é um objeto tá só que se eu falar que essa variável test ela é do tipo props tá esses dois

pontos próprios aqui é falando que a a variável constante né teste é do tipo props só que props é um objeto com a propriedade title né então aqui dentro né vai ficar dando erro aqui porque o typescript tá falando ó eh você tá falando que s objeto tem a propriedade title que é um string mas não tem é que eu não tô passando então eu teria que passar aqui o title que se eu passo que é uma string vazia né ele já some o erro se eu falo que title não é um string é um

Number ele vai dar erro porque aqui eu passei que title é um string né então o typescript é isso é a gente definir tipos e forçar tipos ind diferentes eh objetos ou variáveis raes Enfim pode tipar tudo né então o que que eu vou falar aqui que esse objeto que eu tô recebendo aqui Custom Button é do tipo props tá e aí quando eu falo que esse objeto é do tipo PR ele já entende ó se eu apago isso aqui e dou um cont espaço ele já entende que aqui dentro tem um title né se

eu falar que ele vai ter aqui onepress que é uma função função que retorna void void né que não faz nada se eu dou vírgula aqui do digito aperto control espaço né o vscode já me sugere o onepress para me extrair das propriedades dessa função né dessa componente mas por enquanto a gente vai ter só o title né Vamos deixar aqui só o título E esse título quando ele for enviado né Tem outro detalhe também que essas propriedades na no typescript a gente pode passar elas como obrigatórias ou opcionais né então eu posso falar que

esse meu title ele é opcional com o ponto de interrogação tá e se ele se ele é opcional se eu boto o mouse aqui em cima de title ele tá falando que title é um string ou undefined né que pode ser que eu não passe o title né como ele é opcional E aí o a o o próprio typescript não vai não vai me forçar a passar o title né ó se eu deixo o title opcional ele não dá erro aqui em subheader mas se eu deixo o title como obrigatório tirar a interrogação ele já

tá dando erro aqui no Custom Button onde eu estou usando porque o script tá vendo que eu tenho que passar uma propriedade aqui mas eu não estou passando Tá certo então com isso aqui né esse title a componente vai receber um título E esse título vai ser renderizado aqui dentro dessa tag text né então aqui eu vou no retorno do meu visual né do retorno aqui da minha componente eu tenho aqui a o totb PS Eu tenho aqui o jsx Né que é essas tags aqui que lembra o HTML e se eu quero executar alguma

coisa do JavaScript ou mencionar alguma variável aqui dentro desse retorno a gente abre e fecha Chaves tá então eu abro e fecho Chaves e passo aqui a variável title que foi essa variável que eu recebi como parâmetro Beleza então com isso aqui eu já consigo enviar um título PR minha pro meu botão então aqui em subheader ele tá dando erro né porque tá falando que está faltando a propriedade title né então no meu C Button ele vai ter um title esse title é um string né escrito toos os produtos e no de baixo como é

que é produtos os produtos excluídos né E Agora Nós temos esses dois botões todos os produtos e produtos excluídos renderizados na tela né como não tem estilo nenhum isso aqui tá tá parecendo tá exibindo só o texto né mas a gente vê que clicável porque eu consigo clicar em cima então na próxima aula a gente vai est aplicando a estilização aí eu só vou limpar aqui essas esses importes que eu fiz que eu não estava usando E além disso né além desse na verdade falando um pouco mais de estrutura nós teremos e uma estrutura um

pouco diferente aqui desse subheader tá um pouco diferente aqui desse subheader tá porque se a gente olha aqui ó em no nosso XD nós temos a gente pode imaginar aqui em em dois contêiners tá isso que eu quero dizer que é um contêiner com a a questão do título e outro contêiner com os botões tá então porque vai ser aplicado estilo diferente né Por exemplo esse contêiner aqui do título ele tem esse espaçamento aqui né onde eu estou com o mouse na esquerda e na direita em cima e embaixo também né ele tem um espaçamento

eh o texto produto ele tem um espaçamento do texto aqui de baixo mas é um um relativo ao outro né então aqui a gente consegue aplicar essa imem no próprio no próprio texto mas esse grupo aqui a gente pode separar isso em grupos né esse grupo dos títulos e o grupo aqui dos botões tá então nessa estrutura Nossa nós teremos um contêiner né E esse contêiner a gente vai criar View que vai est os textos né ou seja produtos e nesta página você verá seus produtos cadastrados e nós teremos outro contêiner dos botões Tá certo

então vou apagar aqui esse Custom Button mover ele para cima e salvando aqui a estrutura me ficou meio que essa né uma vi com a questão dos títulos e outro outra vi com os botões Tá beleza então essa forma aqui essa View de fora ela meio que tá sendo usada para nada né só que eu não posso apagar ela porque o meu retorno do meu visual tem que ser um um elemento né a componente retorna um elemento visual e esse elemento visual ele é uma tag né então eu ten que eu não posso retornar duas

tags views de uma componente e nesse caso aqui a gente tem um fragmento né que é só a gente abre e fecha tag é sinal de menor maior né e o menor fe barra maior que isso indica um fragmento do react Ou seja é meio que uma forma da gente agrupar esses dois retornos essas duas views em um elemento só tá então a gente tem mais essa ferramenta aqui esse esse fragmento para ser usado em situações como essa tá beleza então a estrutura Desse nosso header vai ser essa né A gente vai parar por aqui

e na próxima aula a gente vai começar a estilizar esses esses textos e os botões para que tudo fique parecendo com o nosso mock aqui né com o nosso visual o nosso design que foi criado aqui no XD Tá certo então para essa aula é isso eu espero que eu tenha ajudado qualquer dúvida pode deixar um comentário aí logo abaixo e é isso aí muito obrigado e até a [Música] próxima n