Au 03 - Front-end - React - Criando layout da nossa aplicação - Mestres BEGIN

[Música] fala pessoal jancer aqui o vídeo de hoje é um vídeo onde a gente vai começar a explorar aqui um pouco sobre layouts a gente vai falar um pouco aqui sobre navegação né e como que a gente vai arquitetar essa nossa aplicação de forma que a gente tenha um layout fixo né Essa Ideia de layout é basicamente a gente vai ter uma parte fixa ali no app né nesse nosso caso a gente vai ter uma barra lateral uma barra superior e e a a parte que tá vazia ali é a parte que é meio que a tela que vai ser alterada de acordo o usuário for navegando né então a gente vai explorar Isso aqui vai fazer a configuração aqui usando o react router Dom né para fazer isso pra gente e usar aqui também um pouco de CSS alguma coisinha a d uma explorada um pouco e um pouco de tudo e pra gente começando a entender melhor como que as coisas vão funcionar aqui beleza então aqui no projeto né a gente eu tô aqui no mesmo projeto que a gente desenvolveu na aula passada né eu não alterei nada aqui Então o que a gente vai fazer aqui primeiro é começar limpando né porque como a gente viu na aula passada tem muitos arquivos aqui que fazem algumas coisas que na verdade a gente não tem bem uma arquitetura definida né Então a partir dessa aula a gente vai começar a construir alguma coisa aí que vai ser o fundamento aí essa arquitetura desse dessa nossa aplicação Então nesse nosso caso o que nos interessa né como a gente viu na aula passada é o ptsx e o index tsx né E aqui nesse caso o importante também esse react App Envy porque ele ele ele faz a referência aqui pro react script e ajuda a gente aqui também na questão do Type script né então é bom a gente manter ele agora todos esses outros arquivos a gente pode remover certo então setup tests report web vits o logo index CSS index e web test né tsx e we CSS a gente pode estar fazendo a deleção aqui desses arquivos tá a gente vai ter só app tsx tsx a gente vai ter que corrigir algumas coisas aqui para ele não dar erro né eu vou rodar a aplicação né então aqui não terminal a gente executa aqui um npm start né ele vai rodar a aplicação pra gente e a gente vai ter que remover aqui esse report web vitals esse Import aqui do Index CSS aqui embaixo né ó ele já até abriu aqui para mim tá com bastante erros né Vai voltar aqui para corrigir report web vitos eu vou apagar inclusive aquele comentário certo aqui eu vou salvar isso aqui ele já vai corrigir para mim Lembrando que o que eu uso aqui para salvar e corrigir né é o prer né É uma extensão aqui do vs code né prer Essa aqui prer code Format E também o s lint tá então s lint a gente meio que configura por projeto o prer também a gente consegue mas o slink ele é configurado para meio que forçar um padrão de código né e o prer ele pega esses erros de código e corrige pra gente quando a gente salva né Então essas duas extensões aí usadas em con junto são muito boas Tá mas enfim voltando aqui eu vou apagar ali aqui o Import no app tsx né Vou apagar aqui esse App CSS o logo svg vou apagar também eu vou deixar aqui só uma div né uma div com uma tag p p é isso tag P aqui escrito Hello Word só pra gente tem alguma coisa para exibir né só abrir aqui o Web a gente já tem aqui né nosso Hello Word sem nada né o projeto que agora tá totalmente enxuto sem estilização e sem eh todos aqueles outros arquivos né que vem já configurado Então essa ideia de layout né a gente vai usar o react router Don e eu já até deixei aberto aqui né o react router e Don aqui ele é a versão seis né que eu tô que a gente vai usar aqui então a documentação dele é bem completa tem muita coisa descreve né todos os métodos aqui os hooks né as utilidades tem Os guias aqui também tem a introdução então tem muita coisa aqui né o site react router. com é nesse caso aqui eu não vou estar explorando muita documentação a gente já vai partir ali pro código onde a gente vai usar e a gente vai começar a elaborar a ideia de como que isso aqui vai ser feito tá mas voltando aqui no código a gente vai ter aqui e as rotas né Toda a aplicação ela vai ter que ter essa questão aqui de rotas e nesse caso aqui a gente pode separar a gente pode criar um arquivo né route PS x a gente pode criar uma pasta rout e colocar esses componentes dentro dele nesse caso aqui eu vou criar acho que é vou criar uma pasta mesmo né routes n e dentro dela eu vou criar aqui um arquivo eu vou chamar aqui de app routes tsx eu tô chamando a gente pode notar que eu tô chamando esse arquivo aqui com com a ele tá iniciando com letra maiúscula não só o nome do arquivo mas também o nome da componente Então vou definir aqui um componente né App rout que ele essa componente né Essa Ideia de componente é basicamente no react é uma função tá então uma função né que exporta alguma coisa né que exporta um jsx ela é considerada aqui uma componente né uma função que e aqui a gente pode declarar das duas formas né tanto aqui usando function como também usando aqui a anotação function App dessa forma aqui ess ambas as formas são válidas né eu vou manter a aer function mas basicamente né no react né no ambiente react toda função que tem o nome né que o nome dela inicia com letra maiúscula ela é uma componente é uma forma meio da gente diferenciar o que que é função eh função que processa alguma coisa pra gente ou uma função que retorna uma componente né algo visual né uma uma coisa ali que vai ser exibida na tela Então o que eu chamei de e app routes aqui no final aqui eu vou exportar ela né então Export default app routes Ou seja eu tô criando né uma componente que vai fazer esse controle essa gerência de rotas para mim tá então aqui no meu terminal eu vou pausar aqui a aplicação e eu vou instalar aqui ó o npm install react router don tá se a gente vai olhar aqui no site n na documentação um deles aqui em tutorial ele já vai dar pra gente um tutorial aqui com a configuração do projeto em si né pra gente usar eh aqui ele tá usando White né para criar o projeto Mas enfim eh aqui a gente tem um tutorial completo né a gente pode ver aqui na direita que tem muita coisa aqui para se a gente quiser explorar né mas enfim nesse nosso caso aqui a gente só vai instalar o react router Dom se a gente se a gente vai olhar aqui na documentação deles a gente pode ver aqui que em tutorial né é que o tutorial dele aqui é um pouco diferente ele usa aqui um White ele explora aqui mas a gente pode ver que ele dá um npm sty react router Don essas outras bibliotecas que ele instala aqui é para usar nesse exemplo que ele vai dar aqui né mas no nosso caso a gente só vai usar o router Dom em si para criar essa nossa essas nossas rotas né a gente pode ver que que ele instalou né adicionou esses pacotes né o o r redom e as dependências e aqui eu vou rodar de novo a aplicação né com npm Start certo e aqui ele vai iniciar para mim novamente lá no meu browser certo a aplicação tá aqui da mesma forma que tava né não mudou nada a gente não alterou nada e aqui no meu App rout a gente vai começar a criação aqui dessas nossas rotas né porque e e basicamente né O que a gente tem que fazer aqui é criar me que a criação de um roteador a gente vai começar na criação das nossas rotas tá E para criar essas rotas a gente precisa definir aqui alguma fazer meio que uma configuração Inicial pra gente conseguir que se a gente olhar no no react router Dom e até lá na documentação a gente vai ver que a gente tem aqui esse browser router né que é uma componente da própria biblioteca né a gente pode ver que o vs code já importou aqui o browser router do react router Dom Então a gente tem que ter esse browser router por volta das nossas rotas né ele tem que ser um componente P ali ele tem que est por fora da as nossas rotas e nós vamos definir essas rotas dentro né Desse browser router que é basicamente esse browser router é uma componente de controle né é ela que vai saber lidar quando a gente escrever a rota lá e quando a gente trocar a rota ali na linha de de pesquisa né de pesquisa não na linha de endereço do nosso browser é o browser router que vai tratar isso né como o nome já diz né é um roteador aí então aqui dentro a gente teria a componente routes que também é do router Don né eu vou erar Vou importar aqui ó routes e dentro de routes eu teria as minhas rotas né esse route aqui certo então a ideia a estrutura seria essa né e onde o route iria se repetir para cada rota que eu quisesse deixar até importar ele aqui né e eu vou criar um route para cada rota né para cada endereço diferente que eu vou ter dentro aí da minha aplicação nesse caso aqui eu vou criar só duas pra gente ter pra gente ver isso aqui funcionando né Porque aqui no route né se eu a gente pode até segurar control e clicar aqui pra gente ver aqui um pouco da declaração né da tipagem aqui dessa componente ele fala aqui que ele recebe esse route props né a componente route recebe esse route props E aí a gente pode navegar aqui e entender melhor o que que ele recebe é quais tipos de propriedade ele recebe é por como né mas nesse caso aqui a gente não vai navegar tanto ali por dentro a gente só vai definir aqui né porque aqui o route a gente passa um PF né esse pef é o pf lá do endereço da barra de pesquisa vai ser meio que uma chave né para essa rota né Sempre que a gente entrar nesse endereço né a gente vai ter lá no nosso site a gente vai ter o URL né o domínio e aí os subdomínios que serão esses pefs aqui então eu vou ter por exemplo um PF chamado barra né que é o raiz né o pf Inicial e aqui eu tenho um Element né um elemento que vai ser o elemento que vai ser renderizado Então nesse caso aqui eu vou passar um elemento manualmente né eu vou passar aqui uma vou passar um um H1 aqui dentro Hello from e from home ou talvez Hello from Slash from barra from base enfim eu vou ter essa componente aqui essa essa essa rota né e vou colar aqui na copiar colar aqui no de baixo esse de baixo vai ser por exemplo um barra de n barra detalhes aqui vai ser um Hello from details certo se eu sabe isso aqui ele vai recarregar o meu App mas dessa forma que ele não funciona ainda porque eu só criei a componente né eu não usei ela ainda então para ela funcionar a gente pode vir aqui no nosso index. tsx né ou no nosso app e retornar essa componente aqui app rout tá então eu vou fazer isso aqui no app né ó aqui o meu App eu tem aqui Um hello world né uma tag p e aqui embaixo eu vou eu vou colar aqui esse App rout né que eu acabei de criar se eu salvo isso aqui ele vai tem que importar né E aqui no meu App routs é aqui a gente cometeu um erro aqui né porque o app routs ele é uma componente né e uma componente retorna algum elemento visual nesse caso né esse meu router eu tenho aqui uma função né app routes Só que essa função ela não tá retornando nada né se eu volto aqui no app.

tsx a gente pode ver que o erro que tá dando aqui ó tá falando que app rout não pode ser usada como um componente jsx Porque ela retorna void né retorna void aqui não retorna nada então eu tenho que vir aqui no meu App rout né E aqui no Browser rou eu vou dar aqui um return certo e eu vou pegar esse browser router aqui todo e passar ele para dentro aqui certo salvar isso aqui vou salvar agora o meu App de novo a gente pode vir aqui no nosso Google né no nosso navegador e a gente já tem aqui Um Hello from base né que é o nosso PF padrão né Eu tô aqui acessando local host 3000 por isso que eu usei aquele barra né o Barra referente ao a home né seria o início ali a rota Inicial local host 3000 e eu posso acessar aqui por exemplo barra de details né seixa eu dou um enter Hello from details né então ele navegou ele carregou outra página para mim né quando eu alterei aqui o meu URL então a ideia e se a gente ver até no que já tá pronto aqui né se a gente olha aqui no nosso código no nosso app. tsx eu tenho aqui a tag P né um hello world que ele tá na parte superior e eu tenho aqui essas minhas rotas então de acordo eu tô navegando aqui eu vou eu vou clicar aqui para voltar né no navegador ele vai voltar no Hello from base né pro local host 3000 se eu vou pra frente né eu vou voltar vou ir pro localhost 3000 bar details e Em ambos a gente tem o hello world aqui né ele tá nisso ele tá em ambas as páginas né E essa é a ideia do layout nesse caso aqui é só um texto mas o layout que a gente vai criar é alguma coisa mais bem elaborada mais bem estruturada que vai ser vai ser uma componente que vai ser em comum em ambas as telas que a gente tá navegando né que a gente vai tá navegando dentro da aplicação Então essa que vai ser essa ideia do layout Então se a gente volta aqui no código a gente pode dar uma ajustada aqui porque o nosso app né normalmente o que que a gente faz aqui dentro do app RS eu não passo esse browser browser router aqui né eu tiro ele daqui deixo só no app routs essa definição de rotas né porque como a gente já definiu aqui né no nosso só fechar aqui a node modules a gente definiu aqui na nossa pasta routes né eu criei um arquivo app routes Mas eu posso ter mais né eu posso ter arquivos diferentes com com rotas diferentes para cada tipo de usuário ou para cada tipo de tela enfim a gente pode ter diferentes rotas diferentes rotas né E aí a gente tira ali o browser router e deixa só a declaração das rotas aqui E esse router em si eu coloco ele aqui no meu App né eu vou colocar ele aqui em volta de todo mundo né então aqui eu vou ter um browser router né Por volta aqui no meu App essa div que eu tenho aqui com esse hello world eu vou tirar tá e dentro desse browser router eu vou colocar aqui o meu App routes tá deixa eu só apagar isso aqui certo então eu só extrair o browser router de dentro desse desse meu App router até apagar aqui o Import né e coloquei ele dentro aqui do meu App tá esse browser router com essas minhas rotas dentro e aí com isso a gente meio que permite né a gente tá deixando aqui aberto caso eu queira ter diferentes rotas E caso e eu queira implementar aqui uma lógica para carregar uma rota diferente da outra dependendo de algum estado da aplicação eu consigo fazer isso aqui na raiz né no meu na minha no meu arquivo web. tsx né que como a gente falou na aula passada é meio que a raiz da aplicação Beleza então se a gente vem aqui no nosso Google Chrome e dar uma olhada aqui a gente pode clicar com direito e vi aqui em inspecionar ou então pressionar f12 ele vai abrir aqui né o nosso inspect e com isso aqui a gente tem esse ícone aqui ó o mais da esquerda que é o ícone que a gente pode selecionar um elemento do nosso HTML com o nosso Mouse então quando eu clico nele ele fica assim em azul né E aí eu posso passar o mouse aqui em cima dos elementos né da da nossa HTML ele vai mostrando para mim ali na árvore na esquerda né de elementos qual qual elemento é esse E se a gente dar uma olhada eh existe uma uma borda aqui que tá ocupando né um certo espaço aqui na esquerda do meu na esquerda e na direita né desse meu H1 então é um estilo que por padrão todo o documento que o é meio que o browser já aplica esse estilo por padrão na nossa página HTML então aqui a gente eu já vou introduzir o a ideia de estilos globais né que o que que é isso são é um estilo que a gente vai definir que vai ser aplicado globalmente né para todos os elementos Então e e pra gente vai remover né Essa borda a gente pode definir outras coisas como por exemplo fazer a importação de fontes né definir uma fonte padrão pro projeto a gente pode fazer várias coisas que vai aplicar para todo mundo vai ser a gente Define um arquivo e ele aplica para todos esses elementos tá E vai corrigir esse problema que nosso a borda então se eu venho aqui no meu projeto e eu tenho aqui o meu app.

tsx a gente pode estar criando e um arquivo CSS aqui Eu normalmente a gente faz isso em uma pasta Global né alguma coisa que remete a essa ideia de coisas globais então eu vou criar aqui uma pasta né eu vou chamar ela aqui de de globals ou só Global né pode ser só Global esse routes aqui ele tá com r maiúsculo eu vou renomear vou deixar ele com R minúsculo né só pra gente meio que seguir um padrão Aí de arquitetura né então aqui dentro de global eu vou criar um arquivo aqui eu vou chamar aqui de global P Styles P CSS né é um arquivo CSS que a gente vai aplicar esses estilos aqui de forma Global então quando a gente tá falando de CSS né e eu vou explicar aqui um pouco e o CSS a gente define classes dentro do CSS do CSS ou ão ou então selectors né que são seletores que é basicamente a gente com quando a gente tá falando de selectors né de seletores eu vou selecionar alguns elementos que aquele CSS vai se aplicar e quando a gente tá falando de classe né eu defino uma classe e aí se eu venho aqui no elemento igual aqui no meu app. tsx se eu tenho aqui por exemplo um eu vou colocar aqui dentro do browser router né eu vou ter aqui um parágrafo e esse parágrafo ele tem aqui o Class name de enfim bola Então se no meu CSS eu criar uma classe chamada Bola os estilos que eu defini para aquela classe serão aplicados aqui nessa minha tag P nesse meu parágrafo então aqui no meu Global styles. css eu vou aqui a gente não vai est criando classe ainda eu vou usar esse ideia de selectors né porque a gente quer aplicar para elementos né para todos os elementos e o seletor né o selector que pega todos os elementos é um asterisco então quando eu passo um asterisco e e Chaves né do CSS você vai definir a classe e vai abrir Chaves é abrir e fechar ou então você vai definir o seu selector e abrir e fechar Chaves e aqui dentro a gente vai definir as propriedades do CSS que serão aplicadas então quando eu coloco aqui esse asterístico né eu vou aplicar isso para todos os elementos né para tudo então o que que eu vou definir aqui Vou definir a margem zero Ou seja eu quero zero pixels de Margem em qualquer elemento que eu colocar em tela já vai vir por padrão com zero o pading também Zero e essa questão de margem pading pading é tudo questão de do box Model né lá do CSS então se eu salvo isso aqui a gente vai fazer o seguinte eu vou fazer um teste aqui né eu vou voltar aqui no meu App né na raiz da minha aplicação e aqui eu vou importar esse arquivo CSS né então o CSS por padrão né a forma mais simples ele vai funcionar assim a gente tem um arquivo CSS e eu vou importar esse arquivo dentro da minha aqui da minha componente né do arquivo da minha componente então aqui no react eu vou dar aqui o Import no HTML também é assim né só que lá no HTML é é um pouco diferente porque lá a gente usa a tag link né para poder linkar um estilo CSS naquela página né a gente não tem bem essa ideia do importar que depende né tudo depende mas de forma geral eh lá funciona um pouquinho diferente mas aqui eu vou importar esse arquivo CSS então aqui eu vou importar ponto barra de global né barra global.

styes p CSS então se eu salvo isso aqui e a gente volta lá no nosso Chrome a gente pode ver que as margens sumiram né aqui esse Hello front details ele tinha uma margem tinha ali a margem tinha aquela margem na esquerda e também tá tinha na vertical né um espaçamento ali e agora tudo sumiu e se a gente dar uma olhada aqui ó um pouco melhor deixa eu tentar dar zoom isso aqui e subir aqui você a gente pode ver né que quando eu seleciono um elemento ele tem aqui na parte inferior né ele me mostra aqui essa ideia do box Model né O que que é um box Model eu selecionei esse elemento H1 e ele tá me dando aqui um as dimensões desse elemento né E aqui e o que o pading quando tá com esse tracinho aqui é porque não tem pading aplicado né Então tá tudo zero borda também tudo zero margem também tudo zerada Então a gente tem o elemento né que é esse ícone Central aqui eu tenho o pading que é meio que uma margem interna interna de qu né interna da borda então todo elemento ele vai ter ali uma borda E aí entre a borda e o elemento a gente tem o pading e externo a borda a gente tem ou margem certo então basicamente isso né Eh que é é basicamente isso que é o box mod né quando a gente tá falando de box Model de como que funciona essa questão dessas caixas né desses contêiners aí que a gente tem que é cada elemento aí no dentro do CSS do do próprio HTML tá então voltando aqui no projeto a gente teria que definir mais alguns estilos globais aqui por exemplo se eu quero definir alguma fonte né algum uma família de fonte para todos os meus todos os meus os meus elementos né eu posso estar definindo aqui também Então nesse nesse projeto aí eu tô planejando usar a fonte Robot certo só que ela por padrão né não é todo o browser que vai ter ela então se a gente vem aqui ó no no Chrome e eu pesquiso aqui pro fonte Robot eu vou abrir aqui né no Google Fontes que a gente tem Fontes aqui tudo com com o direito liberado né então a gente consegue usar sem problema nos nossos projetos aqui essa aqui é a fonte Roboto e ele me dá aqui a opção de usar ela no meu projeto né Aqui tem os exemplos dela e tudo eh um teste aqui pra gente digitar e ele aplicando os estilos né diferentes estilos aqui na fonte a gente consegue ver várias coisas dela né como que é cada caracter enfim bem interessante isso aqui e tem aqui a opção de fazer o download dessa fonte né se eu clico aqui ele vai fazer o download só que eu não não quero fazer o download da minha máquina né Eu quero fazer isso meio que de forma dinâmica no meu site né todo mundo que abriu o meu site se a pessoa não tem essa fonte Baixada na máquina dela ele vai o browser vai fazer o download e vai usar na minha página na no meu site Aquela fonte tá então a gente pode fazer essa definição e aí nesse caso aqui né a gente pode por exemplo vir aqui em specimen né na nessa primeira aba aqui se a gente rola um pouco para baixo a gente tem aqui cada tipo da fonte né tem ela é com a espessura 100 el a espessura 100 Itálico espessura 300 enfim tem várias opções aqui então eu posso selecionar eh os estilos que eu quero igual por exemplo selecionar essas duas aqui e aqui na no canto superior direito né a gente vai ter aqui a o botão pra gente ver as famílias né as famílias de fonte que eu selecionei clicando aqui ele vai dar pra gente a tag link né que no caso do HTML eu faria lá ou a gente tem também um @import né que é uma forma da gente tá fazendo isso aí dentro do CSS então se eu copio isso aqui ó esse @import eu posso colar lá no meu arquivo CSS né então aqui nesse arquivo de CSS Global né vai aplicar em todos então é um @import ele vai fazer a importação e via URL né url que tá sendo aqui o URL da Google né Google vai fornecer essa fonte pra gente eu já tenho aqui um URL com mais opções né de fonte mas não muda tanto desse aqui não é a mesma é a mesma família né só que tá com os estilos 100 300 400 500 700 e 900 tá então com isso aqui a gente já vai tá fazendo essa importação dessa fonte né e eu vou colocar aqui uma fonte alternativa né caso e o usuário não consiga pegar a fonte Robot para usar nesse site ele pode usar a s serif que é um padrão uma fonte padrão aí que tá em praticamente todos os browsers né pra gente não ter essa não ter um caso aí onde a gente não só define uma fonte não conseguiu carregar a fonte então a gente deixa assim outra opção que é bem interessante a gente ter é o box sizing que a gente passa isso aqui para border box e a gente tem também Além disso outra opção é o outl a gente passa um outline aqui de zero também tá o que que é essas duas opções o border o box sizing é meio que uma forma da gente de do CSS calcular o tamanho de alguma Box a gente pode ver que a fonte já mudou aqui no nosso no nosso H1 né o nosso browser mas aquele Box sizing lá por que que a gente define ele por exemplo a gente tem que esse texto né esse H1 se a gente fala que ele é 100 pixels de largura esse esse valor ele é calculado levando em não ele não leva em consideração na verdade a borda o pading ou o margem né ele só leva em consideração o elemento em si né Essa parte azul aqui desse gráfico que que a gente tem aqui no no developer Tools que é essa parte central então se eu falo que ele é 100 pixels ele ignora a a largura da borda ignora a largura do pading ignora tudo o que não é muito bom quando a gente tá estilizando a nossa página então quando eu passo o box sizing como border Box ele vai levar em consideração né a borda e o pading também da a borda o pading e o margem ali do nosso elemento na hora de calcular a largura dele ou a altura beleza e ess esse outline ele é basicamente uma linha externa de tudo né a gente vai ter o elemento e vai ter ali um outline né tem o o elemento tem o pading tem a borda tem a margem E tem também o outline alguns elementos podem vir com outline definido alguma coisinha a a gente já seta ele aqui para zero também só para ter certeza que não vai ter nada tá certo então Além disso eu tenho aqui também outros estilos globais que a gente quer aplicar que a gente vai aplicar no nosso html e na nossa tag Rot tá e o que que é isso o que que eu vou fazer aqui eu só vou passar a altura a altura de 100 VH Tá o que que é isso o que que isso significa se a gente na aula passada né a gente explorou melhor o a estrutura da página HTML né então aqui no nosso index P HTML nós temos aqui a tag HTML né que tá por volta de tudo né meio que a primeira tag aí que a gente declara e a gente tem aqui também dentro do B né a gente tem um b a gente tem uma div com ID root né que eu expliquei lá melhor como que isso aqui funciona mas é meio que uma div que tá por fora de todo mundo então aqui no meu Global Styles eu tô pegando esses dois e passando a altura deles como sem esse VH essa unidade aqui é View height ou seja esse VH é uma medida absoluta tá unidade de medida absoluta que ela é basicamente 0 e 100% da né onde esse VH é uma unidade que ela varia de acordo o o dispositivo que está executando aqui a nossa a nosso script né o nosso CSS então sem VH nessa nesse meu monitor significa 1080 piels né porque a meu monitor tem 1080 pixels de altura não é que é bem 1080 porque ele calcula o viewport Né que é o espaço disponível pra página renderizar então quando eu passo lá 100 VH é 100% do de um na verdade explicando melhor né 1 VH seria 1% do espaço vazio que a gente tem que a gente tem disponível na nossa no nosso dispositivo tá então quando eu passo 100 VH seria meio que tomando ocupando 100% desse espaço beleza então com isso aqui acredito que isso aqui já vai ser o suficiente por enquanto tá Qualquer coisa que a gente precisar a gente pode definir ali e agora se eu pto o mouse aqui em cima da nossa div com ID Rot né ela tá com altura total se eu clico nela aqui a gente tem aqui os estilos né aqui embaixo vai aparecer esses estilos que foram aplicados e a gente tem aqui ó do arquivo Global styles. css eu vou até aumentar isso aqui ó né do do do nosso arquivo globals.