React Native Insider - Ep 01 Mão no código!

E aí [Música] E aí [Música] E aí E aí e fala pessoal começando então mais uma edição do ensaio dela aqui seja muito bem vindo todo mundo todos alunos alunas todo mundo que se inscreveu se você já participou aqui de algum ensaio seja Bem-vindo de volta e se a primeira vez que você tá participando aqui é um prazer ter você aqui com a gente então seja muito bem vindo também né já são mais de 9.000 alunos que passaram pelos nossos treinamentos eu estou muito feliz de tá aqui mais uma vez com vocês passando meu conhecimento

a gente colocar a mão na massa e eu tenho certeza que sexta-feira lá no final do nosso treinamento você vai estar a Cara outra pessoa evoluído muito e o nosso Foco aqui não é É só fazer um ensaio der aqui vocês fazer junto comigo né não a gente não faz isso então colocar muito a mão na massa direto na prática mas ensinando para que você aprenda de verdade e evolua de fa Então esse é o nosso foco aqui e também ó Recado já vai lá pausa aqui pega uma água lá pega um café O que

que você gosta senta na sua cadeira aí se prepara e tem muito conteúdo muita coisa legal na prática que a gente vai fazer junto Oi gente vai começar sem enrolação se prepara embora para o código bora começar mais claro né antes da gente começar aqui eu não vou pegar aqui começar já desenvolver alguma coisa primeiro duas coisas que a gente precisa passar conhecer aplicação que a gente vai desenvolver segundo a tecnologia que a gente vai utilizar né que a gente vai utilizar o rack nele trazer envolver os aplicativos Android hibrael essa né que a Biblioteca

criada lá pelo time do Facebook então a gente vai conhecer as motivações pelo menos de utilizar o iett negativo porque utilizar ela né porque e não utilizar outra tecnologia aqui então mesmo passando por cima não teoria mesmo e sim a gente vai entender as motivações e também conhecer a nossa aplicação que a gente vai desenvolver depois disso então a gente vai sim passar por toda a parte de configuração do ambiente se você quer rodar um emulador por exemplo o aplicativo que a gente vai desenvolver Ou se a eu quero rodar direto no meu iPhone ou

eu quero rodar direto no meu celular seja Android também não tem problema se você tem uma máquina um pouquinho mais fraco que a rodar direto no seu celular e nenhum ou se você quer criar um emulador a gente também vai dar o passo a passo Então a gente vai configurar tudo de um ambiente antes de começar acordar de fa Beleza então bora lá Bora conhecer então aplicação que a gente vai Desenvolver e depois falar um pouquinho sobre o Riacho Velho é um bora lá primeira coisa conhecer que o nosso projeto projeto que a gente faz

envolver ao longo do ensaio dela aí eu chamei ele de sujeito linda então vocês vão ter o link para acessar essa parte do figurino aqui tem todo acesso ao layout as cores e também eles vão poder baixar logo aqui basicamente uma logo legal que a gente desenvolveu para fazer o projeto aqui tá então Maravilha Bora lá falar um Pouquinho sobre porque nesse projeto que a gente vai ver nesse projeto aqui e porque esse projeto tá então basicamente o aplicativo é um encurtador de URL né Deixa eu dar um zoom aqui dá um zoom aqui na

nossa a gente é fácil maravilha eu ver se minha câmera não tá em cima show de bola então é o sujeito link quando a gente consegue colocar uma um link de um site ali e ele vai encurtar para gente onde a gente vai utilizar uma ap então já é algo legal que a gente vai Fazer requisições O que é importantíssimo a gente dominar Então a gente vai cuidar da parte de interface cuidado a parte de experiência do usuário seja da usabilidade então toda a interface pensando na experiência do usuário também tá então o que a

gente vai ter navegações de página outra coisa importante a gente saber trabalhar então a gente vai trabalhar com a navegação chamada drawer né é aquela que a gente abre o hambúrguer né que a gente tem um Hambúrguer Zinho aqui abre e tem a nossa navegação hidrobr aqui tá então a gente pode colocar uma url ele vai importar essa URL e vai geral nossa URL encurtada na então por exemplo aqui eu coloquei um jeito programador.com.br ele tem aqui então em cortada aí eu posso copiar já clica ali ele copia para mim essa url que nem cortou

ou a gente vai poder também utilizar para aí para poder compartilhar por exemplo se compartilhar com o WhatsApp de alguém Compartilhar Esse link aqui com um e-mail com o outro lugar né então a gente vai WhatsApp e deixar aqui também do Vietnã que é bem legal tá então voltando aqui e todos os links que a gente vai salvar vão ficar Ah tá isso é bem legal também então se você é encurtou vários links eles vão vir tudo para nossa área que nossa lista de meus links tá você pode fechar o aplicativo Desligar seu celular ligar

seu celular que hora que você vem aqui vai tá aberto aqui tá todos os seus Links salvos e claro a gente vai poder clicar em cima e ver todos os links foram encurtados ou também ah não quero mais esse nem que eu vou poder excluir da minha lista de links aqui tá então a gente também vai poder fazer isso aqui isso é bem legal tá então é um projeto onde a gente vai trabalhar bastante coisa com uma parte de interface do layout ele de construir um layout bem grande bem completo utilizando modal navegação de página

utilizando Requisições http utilizando a parte de share utilizando a parte de clipboard que é a parte de copiar quando você clica em cima e já copia né como a gente tem por exemplo no código de barra do boleto né Tem um clipe porque você clica em automaticamente copia aquele texto né E aí você pode colar no lugar também vão utilizar a parte aqui deixa eu dar um zoom aqui a parte de listas também vamos a parte aqui do nosso a Apple também bem legal então vai ter animações vai ter Bastante coisa que a gente vai

utilizar nesse projeto aqui beleza então como eu falei vocês vão ter aí no link aqui embaixo vocês vão ter para poder acessar esse layout também para poder ter o nosso helpper aqui tá vocês vão poder ter todas as cores utilizadas para com essas Pontes aqui que a gente vai utilizar depois lá mais para frente um projeto todo que a gente todo legal que a gente vai desenvolver ou não aqui no ensaio Beleza então bora lá falar sobre O iate Lady as motivações como é que a gente consegue instalar e configurar o nosso ambiente para começar

a construir esse carai vamos lá então vamos lá como a gente falou aqui vamos utilizar aqui dentro do ensaio viu o iett natbrasil ver os nossos aplicativos tá então eu e a ti nem tive né uma biblioteca lá criada pelo Facebook para desenvolvimento de aplicativos para Android e para ir não é tá e com um excelente vai gente utiliza ali por Baixo dos panos o famoso JavaScript é uma linguagem de programação cara sensacional Brasil vou ver então e os projetos para Android e para IOS é isso aí a gente consegue por martinet com o único

código desenvolver para ambas as plataformas de forma Nativa tá então a gente consegue ter um único código e desenvolver para as duas plataformas e sim publicar né pela Play Store na Apple Store sem problema nenhum utilizando react Native da de forma Nativa ali e a Mateus beleza eu desenvolvo para as duas utilizo JavaScript mas aí eu fico refém ali de desenvolvimento interface e ela tem que ser igual para Android para IOS e eu não consigo ter aquela diferença não você pode Sem problema nenhum só pode desenvolver uma interface e tratar ela diferente quiser pros by

eu quero que no Android interface tem um comportamento diferente lá no Android ou no Oeste tem um diferente você pode também tratar Isso aí não se não ficar Refém de criar um código ele ficar igual exatamente para as duas você consegue manipular Bem Além de conseguir acessar todas as reais aí nativas do celular eu posso acessar a câmera possa acessar a partir de G e são posso acessar mapas touca de barômetro eu posso acessar todos os sensores também cara Sem problema nenhum para ser utilizado dentro dos nossos projetos beleza e aí Claro tem aquela famosa

pergunta também porque o iate Neide não vê a gente ele tem os prós e os contras normal toda a tecnologia vai ter isso aqui tá E e aí o Hatch neste a melhor para desenvolver aplicativos não porque que existe isso de melhor tecnologia a utilizar tal tecnologia porque ela é melhor não Todas têm os seus prós e contras todas se encaixam melhor num determinado problema por exemplo a gente não pega pensando uma tecnologia e sim como uma ferramenta tá a gente utiliza a tecnologia com uma Ferramenta então a gente desenvolve entrega soluções que envolvem algum

problema é esse o foco do programador não É só escrever código tá então a gente vai utilizar o GetNet por alguns motivos que você tem apenas alguns aqui só para a gente falar um pouquinho rápido sobre eles a primeira coisa então uma comunidade grande ativa né Isso é fundamental quando você a ferramenta para trabalhar porque provavelmente alguém já passou por algum Problema que você pode estar passando ou alguma comunidade que está ali pode se ajudar Ou você ajuda algumas pessoas cá isso é sensacional e ajuda muito ao desenvolvimento ao longo de um projeto né quando

o projeto ficar grande quando você tem algum problema alguém promete a passo para aquele problema então segunda coisa além do Facebook tá ali por trás é o time de desenvolvimento a gente também tem a linguagem que tá utilizando ali por baixo dos panos né porque eu já diz Clipe e também tem uma comunidade gigantesca né o Jesus Cristo então é duas coisas que a gente tem que colocar ali como o ponto de porque utilizar também tá segunda coisa ali o mercado superaquecido tem vagas de desde 2000 a mais de 10 mil reais aí tanto fora

do Brasil né remoto cara que tem muita vaga remota quanto no Brasil cresce demais tá então O mercado está superaquecido procurando tanto por desenvolvedores quanto por soluções né aplicativos mesmo Ou claro seja você que também quer criar seus próprios projetos aí tá terceira coisa aqui velocidade o e menos curso tá porque menos custos tá olha só eu tenho mais velocidade de desenvolvimento porque eu pego ele artnet.com se desenvolver nativo para Android e para o Oeste publicar para as duas plataformas utilizando basicamente único códigos em voo para as duas plataformas Sem problema nenhum público utilizo todas

as reais então posso Desenvolver qualquer tipo de aplicativo ou em artnet e eu tenho - cursos porque eu estou dizendo uma única ferramenta ali consigo publicar para as duas se eu tivesse desenvolvendo por exemplo nativo cosplay por exemplo Android eu tenho que ir lá aprender quatro envolver para a próxima a legal agora eu quero esse meu projeto aqui lá para eu essa agora eu preciso ir lá aprender a ferramenta lá de desenvolvimento de IOS e desenvolver para iOS então com isso eu perco muito Mais produtividade perco muito mais tempo que eu preciso trabalhar nas duas

é linguagens aprender as duas e consegui dar manutenção ainda nas duas é muito mais trabalhoso muito mais gostoso né E então vai girar mais velocidade mais produtividade e menos custo aí o nosso projeto utilizando o yardenit vou tá coloquei aqui que utilizam é o Facebook ali tem também o Instagram o Sky Walmart a Tesla uberx o discord' o Pinterest e outros também tem gigantes a Lei da tecnologia que utilizam internet e outras também no Brasil que utilizam tá Eu só não coloquei todas aqui para não ficar muito coloquei apenas algumas aqui só pra gente poder

texto aí ver tá E para gente desenvolver a gente pode utilizar a ferramenta né um fremmer ali que a gente tem também por baixo ali do Vietnã Este é o Edson e aí se você já se envolveu já criou algum projetinho com o retnet por exemplo você deve estar se perguntando porque eu vou x Alex e não Se ali que a outra forma que a gente tentar criar aplicativo com ele atingiu o erro seguinte a gente tá no ensaio ele é um primer para desenvolvimento stainesbourg artnet ou seja ele tem um leque ali e ferramentas

do ie aqui né porque a gente pode utilizar sem ficar se preocupando com o ambiente de configuração Android SDK que a gente precisa ficar configurando tudo isso para rodar o nosso projeto né que isso E ai a gente precisaria com essa a gente Apenas precisa do nosso famoso no de JS e do Xbox para desenvolver então ele é um frame onde já tem todas as redes sociais ali onde a gente pode desenvolver sem ficar se preocupando com essa parte de ambiente de configuração e conheço Então a gente vai ter mais produtividade facilidade nosso desenvolvimento Ainda

mais se você está começando agora tá utilizando aí para poder evoluir e aprender o iett que esse é o nosso foco aqui não perder tempo com Configurações tá e direto ao ponto para você aprender de verdade beleza então ele já tem as funcionalidades para instaladas como eu falei nenhum prêmio que na Internet traz ele por baixo dos panos várias filiais que já já vou mostrar para vocês então por isso que eu não falei muito sobre isso agora e quais os requisitos para a gente poder utilizar o Edson é o nosso amoroso node.js instalado e também

instalar Oeste lá na nossa marca simples mole Mole não tem muito segredo Mas eu também vou mostrar como que a gente consegue instalar o Android Studio se você quiser por exemplo configurar o emulador e rodar se nosso aplicativo não é morador a mostrar para vocês também ou a gente pode também vou dar direto na sua iPhone o direto nosso Android E aí show de bola não fica pesado a sua máquina fica muito mais leve porque você tá rodando aí a única coisa é o seu celular precisa estar na mesma wi-fi do seu computador Mas aí

é show de bola né Então bora lá bora então instalar que o nosso node.js e o eco e começar a desenvolver Então vamos lá primeira coisa aqui compartilhando a minha tela Então vamos lá instalar o node.js e Oeste e aí configurar o nosso ambiente para colocar a mão na massa então não joga essa simples e mole mole né você entrar em nome de js.org podem estar ele aqui ó uma coisa tá baixa a versão LTS essa daqui não baixe a versão correta tá Então LTS só clicar aqui vai baixar aqui embaixo e é só da

next next next Não tem segredo nenhum como instalar qualquer probleminha aí então instalou aqui Maravilha e agora então para gente ver se esse carinha aqui tá instalado é simples também deixa eu voltar aqui em abril iniciar digitar CMD abre o meu cm de maravilha vou digitar que então nude espaço traço ver depois que você instalou na onde JS digitou esses comandos no espaço trás e ele devolveu Uma versão aqui quer dizer que o nome de outra tá instalado perfeito tá então agora é só a gente está lá o ex aqui e começar a desenvolver então

tô aqui no site do Edson ex. Aí eu e aí você vem aqui na parte de get started beleza maravilha então que a gente tenha documentação do Edson Jajá a gente vai dar uma passada sobre ela tá então Posso copiar que a nossa linha de comando tá então ele tem aqui a Play Store então a gente está lá o nossa linha de comando Doméstico Posso copiar aqui possam um aqui só para vocês é a se quiser escrever npm install traço Pode ser traz surgiu ou traço traço Globo ex poderosa social lá então vamos lá ou

copiar para tirá-lo daqui eu vou colar aqui só clicar com o botão direito ele Cola Então vou dar uma entre aqui para poder instalar e agora é só esperar maravilha então instalado a para saber tá instalado ele eu tenho mais é que outras ia lá e aí a versão né E aí Para gente confirmar posso dar CLS aqui só para mim limpar e eu digito então ex-pastor a situação version e eu dou um jeito aqui ele devolve né vamos ver devolveu eu entendo devolver uma versão aí que a versão que ele instalou aí no seu

na sua máquina Beleza então show de bola agora tá instalado onde outra é se tá instalado aqui a parte do Oeste paninho de comando que a gente a pode criar o nosso primeiro aplicativo A então para criar simples só rodar que Epson início e o nome do seu projeto aqui tá Então vamos voltar legal aqui primeira coisa se você não é muito familiarizado com o prompt de comando né você me deu terminal aí Você precisa olhar onde você tá no seu SMD então eu tô aqui dentro do iOS e Mateus posso criar um projeto aqui

pode tá só não queria dentro aí do do system32 sei lá eu usei aqui você pode ou você pode navegar até a pasta que você quiser então tá eu vou navegar até outro outro HD que eu tenho você quiser criar aqui você poderia rodar o comando Excel init e o nome do projeto que a gente já vai rodar eu só vou navegar até a pasta aqui então Navegar até de dois pontos que eu tenho outro HD CD unir aqui neste vídeo é uma pastinha que eu tenho e aí ser insaider que a parte que eu

criei para a gente poder criar os projetos tá então vou limpar aqui então eu vou criar o meu projeto aqui então para criar o projeto é que espaço init espaço Vou colocar Aqui mais link o nome do projeto pode colocar Só link o vai colocar mais link mesmo então vou dar um jeito aqui para ele criar o nosso projeto ai agora é só dar uma guardada e Maravilha aquele já dá algumas opções que a gente pode criar o projeto tá primeiro Belém ou seja mínima coisa não vai ter nada é só um aplicativo em branco

ali tá dizendo 11 boilerplate né sem nada de configuração a gente tem a segunda opção aqui que a parte de blank só que o O site que a gente tem que ter bar também que algumas coisas para configurada eu não gosto tá então primeira coisa Primeira opção mesmo Dá um enter aqui e aí ele vai querer ir ao nosso projeto dentro dessa pastinha aqui e você crio tá então no meu caso tá em Sider e sobre ela aqui para vocês aqui o que é que enquanto ele vai criando já tá querendo aqui ó MyLink só

aguardar agora então vamos aguardar maravilha olha que legal e o Harry tão Maravilha foi criado Aquele fala agora para gente dar uns e demais né você já entrar dentro do nome do meu projeto da página dele eu vim aqui só para mostrar para vocês mas nem posso entrar e a grita toda configuração do nosso projeto tá então é o CMD como eu chamei de mim agora preciso acessar Então você de um baile ACC afasta dele ele é e agora que a gente tá aqui dentro da pasta do seu projeto tem que confirmar isso eu já

posso dar ele então Edson faço Start eu rodo o nosso projeto Tão subindo um servidor dele né em abril aqui para mim eu vou estar aqui tá rodando aqui Maravilha apareceu o QR Code aqui e aqui também ó apareceu o meu QR Code quando aparecer o QR Code o servidor está pronto e a gente pode rodar ou no nosso celular físico ou no nosso emulador tá então Maravilha que a gente a criou o projeto rodou ele que agora para você que quer criar um emulador configurar o emulador aqui você pode fazer o passo que eu

vou fazer a Seguinte para vocês a seguir né senão você quer rodar direto no seu celular Android ou iOs pode esperar um pouquinho e a gente já vai fazer também então vamos lá primeira coisa para você rodar direto aí no seu emulador e configurar o emulador a gente tem que baixar aqui deixa eu trazer aqui a página aqui maravilha a gente tem que entrar então o nosso developer. Android.com vou procurar lá no Google Android Studio Tá e aí você clica aqui download Android Studio beleza só também da net net não tenho uma configuração em específico

que a gente precisa fazer hora que ele instalar ele vai abrir isso aqui lá maravilha vai abrir aqui então uma opção bem parecido com essa daí o que a gente vai vir aqui na solução Zinho aqui embaixo configure depois a gente vai vir aqui SDK Manager beleza SDK Manager primeira coisa que a gente tá na minha SDK platform beleza essa aqui a gente basicamente coloca qual que É as versões do Android que a gente quer baixar tá então aqui o quê que eu recomendo tá vocês podem ele geralmente vem com a última versão baixada não

tiver ele vem com algumas versões baixadas tá então aqui eu gosto de utilizar essa 10.0 é a que ou a 9.0 que é pai e às vezes eu utilizo essa 8.1 aqui o que que às vezes utiliza uma mais antiga às vezes fica mais leve então gosta de às vezes testar em várias emulador então tem bastante coisa não Tem problema em baixar alguma dessas versões beleza e aí o que você precisa verificar aqui do lado tem um status tá que estão instalados e o que não tá instalado Beleza então por exemplo como eu falei do

Android 10.0 e da 9.0 se ela tiver aqui como não instalada você marcar essa opção como para mim já tá eu deixei instalada então eu não preciso marcar tá se as é bem instalar você não precisa marcar só clica para marcar se tiver não Instalada tá então se a sua Android da estiver não instalado se a nova tiver não instalada Você pode marcar as duas opções vão máquina checkbox e vem aqui no apply aqui embaixo e aí da net que ele vai baixar essas duas versões tá então Maravilha depois de ter baixado a gente pode

vir para Sabrina aqui essa de cá tu tá na expectativa é bem tranquilo também a mesma coisa tem conferir o status aqui que às vezes ele já vem com algumas instaladas aqui feito Então olha Só que legal você tem que marcar aqui o Android SDK build-tools estão se não tiver instalado só com filhote se tiver eu te dei que eu estiver Instalado não precisa marcar se tiver nota insol se não tiver instalado você me marca o checkbox aqui a vida show então depois aqui vocês vão ver um Android Emulator tá Se tiver update para instalar

vocês não precisa marcar se tiver que tá não instalada vocês marcam tá E aí o Android SDK platform-tools mesma coisa o Google Play Service é legal você se instalar E se for trabalhar para perder mapas aí o emulador vai trabalhar bem tá depois disso aqui a gente tem que instalar esse carinha aqui também marcar ele se tiver não instalado tá é a parte do Intel x86 Emulator acelerator tá esse cara aqui é mais para quem tem um processador da Intel tá se você tem um AMD não precisa marcar essa opção aqui tá então no meu

caso Como já tava aqui deixa eu já tenho ele instalado eu não vou dar não vou Marcar tá Se tiver aí como eu falei faz com calma e aí você marcou esses caras pode dar apply tá então ele vai baixar vai instalar essas coisas que a gente marcou aqui e perfeito a hora que acabar só a gente fechar aqui voltamos aqui em configure vamos agora na parte de avd Manager que a parte de configuração ali de creme mulador está então mico aqui olha que eu já tenho dois você não tem nenhum criados ver se ele

vai vir com o botãozinho bem no centro aqui vocês irem Ao seu primeiro lado se ele já tiver um criado vai dar um aqui igual o meu tem dois aqui mas a gente vai criar um junto tá então vou clicar aqui em criei e vai se então maravilha aqui a gente tem os dispositivos né qual que a gente quer então eu gosto de utilizar o Pixel 2 o Pixel 3xl só que o Pixel 3 o Pixel 3xl dar um pouquinho maior porque mais pesado também tá então eu vou utilizar aqui ó Pixel 2 e lembra

de tem que estar esse Play Store tem que ter o ícone Zinho da Play Store isso quer dizer que ele tem a Play Store salada ele pode baixar aplicativo na Play Store tá Pixel 2 clicou o né e a quinta a gente escolhe aplique a gente é utilizar né Qual que é o Android você quer rodar ele por baixo tá E aí Claro pode mandar o que você quiser então eu tenho x86 aqui porque esses 86 nem um pouquinho mais leve tá então arquitetura desse Android um pouquinho mais leve e aí tem vaso aprende level

29 apm30 que eu não tenho Ainda poderá baixar o Android aqui eu também poderia baixar Se não tiver em recomendados aqui você pode procurar ela aqui também no caso aqui eu vou vir recomendado essa hora eu aqui a p-27 não é um pouquinho mais antiga mas aí Me leve para rodar o emulador então se você tem um pc que não quer é algo tão pesado pode estar lá essa p27 guardou recomendando aqui para ficar mais leve tá então óleo api level 27 aqui x86 vai ser um pouquinho mais leve e aí tem que Garantir também

aqui é o Android 8.1 Google Play marcou aqui né vou até colocar o nome aqui ó Pixel 2 insaider beleza só para a gente saber a diferença e aqui eu não preciso mexer em nada tá então só dá um lixo aqui ele vai criar pra gente o emulador então criou aqui ó Pixel 2 inside eu vou dar um play né Beleza tá rodando deixou aumentar um pouquinho fazer aqui para o campo não vamos lá subiu um pouquinho aqui é só um pouquinho mais não agora é só Guarda tá Iniciando ele aí vamos aguarda Maravilha criado

aqui o emulador não posso fechar aqui Fechar isso também já tá rodando aqui o nosso emulador posso mexer nele normal então um celular e vamos fechar aqui o nosso cara único cara que a gente não pode fechar ela nosso CMD e eu também não posso fechar esse nosso local roxa aqui que ele abriu que tá rodando no servidor do nosso projeto e agora para rodar esse projeto que tá rodando aqui dentro do nosso Voador simples eu posso ir hum Android The Voice bairro leitor clica aqui ó já apareceu o que que vai procurar o nosso

simulador para abrir deixa aqui ó tá falando tá abrindo no Pixel 2 ensaio-show instalando o resto Vamos só aguardar que ele já vai subir tudo sozinho para gente é mole mole demais e Maravilha rodando o nosso projeto após clicar aqui em golpes posso clicar no fechar e já tem aqui o nosso projeto rodando tá tenho que ficar aqui com Outra ou m ou se você tiver lá no Mac por exemplo pode dar um comando DD tá então aqui eu posso clicar em um elogio ele atualiza o nosso leve também só para gente ver ó já

review do Então tá rodando o nosso projeto fácil demais e agora para você que quer mudar direto lá no seu celular fiz com Android ou iOs no iPhone um simples Você vai lá na Play Store na Apple Store e baixa ai-5 e procurá-la por esposa tá então você procura ela é Que é isso aí como é que tá aparecendo aí para vocês baixa esse aplicativo do é fio aí depois que você baixou esse aplicativo aqui é bem tranquilo então primeiro vamos se você tá lá no iPhone abre a câmera do seu iPhone e me aqui

nesse QR Code ele vai aparecer para você abrir com o responde aí você clica na mensagem que vai abrir com ético ele já vai abrir no aplicativo do Wesley e mesma coisa que abriu aqui já vai review da só que tem que lembrar que tem que Dar o seu celular na mesma o wi-fi que tá o seu computador beleza e para o Android também é bem tranquilo Sobra só você abrir a câmera do seu Android lá em Iraque não sei o que é Record e ele vai abrir também sem problema nenhum beleza Ou se Abra

o aplicativo do época de Jesus reconhece a URL na E aí você já clica na URL abre aqui tá eu é a mesma coisa também é bem tranquilo bem fácil e agora bora então abrir o nosso projeto começar a desenvolver então para Desenvolver eu preciso abrir esse nosso projeto aqui dentro do bom então quando aqui Alguém folder navegue aqui até um designer like aqui dentro da minha caixinha tô dentro da minha parte aqui tem um link e selecionar passa para gente abrir que não visual Studio code maravilha deixa eu abrir aqui beleza todas as nossas

arquivos aqui o nosso projeto posso até fechar aqui agora já tá aqui tá então lembrando só não fecha o seu C Miller Minissérie aí e agora a gente já pode colocar a mão na massa tá então deixa aqui do ladinho o meu emulador deixar aqui um pouquinho o nosso projeto Bora lá para a gente poder começar vou tirar minha câmera aqui só para não atrapalhar o nosso foco aqui os códigos né então primeira coisa que a gente tem todo o nosso projeto beleza e o arquivo quando a gente roda esse nosso projeto aqui aquilo que

é chamado nosso componente é é. JS tá então é. JS é o primeiro Componente a ser realizado aqui na tela que é o cara que é montado aqui no nosso componente aqui no nosso emulador tá então esse carinha aqui tá aparecendo ó esse texto aqui É exatamente esse texto aqui ó tá vendo a o teste aqui esse texto aqui se eu vim aqui e eu mudar esse nosso texto aqui para rack 6 em cyber e eu não contra o s ouvir aqui né clicar em sei ele automaticamente já vai atualizar no meu celular que eu

no meu emulador e já vai Mostrar que o textinho que a gente digitou tá mas a gente entender toda essa estrutura a gente vai dar aquele famoso controlar ou vai selecionar tudo isso aqui vai deletar porque aqui a gente vai partir do zero né então quando a gente volta nosso projeto aqui ele chama então nosso primeiro componente a ser montado em tela aqui tem o nosso ep. JS Esse é o cara responsável aqui tá então aqui dentro a gente tem arquivo já biscuit é que basicamente não JavaScript Pura que a gente tem um jsx tá

que basicamente um XML com HTML Ele é bem parecido ele é mais Você já trabalhou já já mexeu com HTML web você vai saber isso aqui tá então para a gente criar o nosso primeiro componente bem simples primeira coisa a gente precisar importar o Riacho então Import relax on e importamos ele aqui Maravilha depois disso então a gente precisa importar o que que eu vou utilizar dormir artnet né que ele já tem algumas bibliotecas Prontas como o teste aqui tá então vou abrir que fechar o nosso Chaves foram rack Neve Beleza então aqui só uma

atenção cuidado com os minúsculos em maiúsculos aqui beleza então abrimos aqui aqui dentro então vou importar uma viu ouvir é maiúsculo e um teste beleza importamos dois carinhas aí do nosso mulher continente a gente poder utilizar beleza e agora então vamos criar esse nosso componente aqui prancha epe abre aqui essa função e dentro dessa função Eu retorno alguma coisa morrendo irizar alguma coisa melhor abre aqui nós parentes e aqui dentro desse Vitor eu coloco nosso famoso jsx a nossas tags aqui do Art Neide que vai ser renderizados na tela então uma viu e tirar o

mouse em cima viu abre e fecha pega aqui Dom entrar aqui e dentro dessa minha viu eu vou colocar aqui um teste tá então teste jeito programado ou salvar clique Então é só recarregar e maravilha ele tem um erro deu esse erro Aqui e tá falando aqui que ele não encontrou essa nossa função ele não encontrou esse nosso componente aqui por quê Porque a gente cria um componente mas não exportou ele então a gente precisa exportar para outros arquivos conseguirem importar né e utilizar esse nosso componentes tá Então como que ele vai achar esse nosso

componente aqui para ser indenizado sendo que a gente não exportou para ninguém ter acesso EcoSport eu folgo Beleza vou salvar aqui Maravilha olha aqui meu sujeito programador tá tudo bem aqui em cima aqui ó bem embaixo da minha status bar Mas não tem problema porque a gente não passou nenhum estilo ele então dessa forma a gente cria um componente Então esse nosso EcoSport full from up O componente e dentro desse componente a gente tem hurtan e retorna alguma coisa que a gente quer exibir na tela montar alguma interface por exemplo Então dentro de seu retorno

a gente escreve um Jsx é basicamente uma tag Zinha bem precisa com HTML né a gente tem uma viu e o próprio retnet entrega pra gente e um teste tá e o que que essa vio aqui Mateus a viu é pensar ela com o espaço em branco você vem do HTML pensa com uma dívida então a viu é um espaço em branco sem nenhum estilo é só o espaço a lembrando que você coloca alguma coisa dentro e o teste É de fato um texto Mateus eu posso escrever um teste um texto quer dizer fora do

teste não você Precisa dessa Tec para escrever por exemplo eu não posso vir aqui ou não posso ver aqui embaixo desse teste eu colocava um texto segundo texto e eu salvar olha só ele vai falar que que textos precisam ser renderizada dentro da nossa tag text é um componente ele também tá então eu quero escrever mais um texto maravilha eu venho aqui coloca em o Sérgio eu só pegar aqui o fechamento dela e coloca aqui Maravilha vou dar um Contra o s novamente para salvar e é o segundo texto aqui show de bola tá E

outra coisa do componente ele precisa ter um pai e ali um componente tem envolvendo todo mundo então a gente tem a nossa viu aqui é o pai de todo mundo vamos se dizer né então dentro dessa me o que a gente tem dois terços eu não poderia ter fora dessa viu aqui outra viu tá olha lá vai quebrar também então a gente precisa ter um cara que envolve Todo Nós componentes e dentro desse cara A gente tem as nossas interfaces tá eu poderia ter outra viu só que sem problema se fosse dentro dessa nossa principal

aqui aí eu tenho mais uma viu posso ter mais um teste aqui olá mundo sem problema nenhum aqui também nada tem estilo aqui né não é igual uma HTML que a gente tem a div a gente tem um H1 como um texto que já tem uma formatação ali com o cabeçario oh2 que ia também um sub Red a gente tem uma 3 até o HC o que vai diminuindo ali a gente tem a Ter esse Então a gente tem alguma coisa que já é definida com estilos tamanhos aqui não aqui a gente tem tags Pulgas

são compõe né ouviu que é um espaço a gente tem um imagem para colocar uma imagem o texto é um texto em branco simples ali né seu estilo e a gente pode dar cada um com seu próprio estilo pode reaproveitar para aqui é dois terços tem o mesmo estilo por exemplo ou as views tenham estilos iguais ou separados também tá então a gente vai utilizar Aqui dentro do riachaonet tem várias formas tá tem a parte do estilo e linha Tem a parte do stylesheet e por exemplo eu posso colocar um estilo na nossa vida aqui

ó escrever Style abra e feche aqui e aí para colocar o estilo em mim a pressa Nossa vivo aqui eu coloco mais uma Chaves e eu passo o estilo que eu quero e também é bem parecido com CSS Olha que legal posso falar aqui para ele ele vai ter uma morte só grudado mesmo que eu tenho maiúsculo: eu coloco o Número que eu quero dessa margem de cima é então que ele vai ter 150 de margem de cima Vou salvar e olha que massa ele já colocou aqui para mim então essa margem em toda viu

que é todo o espaço em branco essa nossa viu aqui ela não tá por volta de todo mundo sim então essa nossa viu basicamente aqui deixa eu pegar aqui ela tá aqui ó essa nossa vida é exatamente aqui ó esses passos que eu marquei ali é a nossa viu tá eu posso falar para esse nosso espaço em branco Pegar o tamanho inteiro da tela centralizar tudo que a gente tem aqui posso posso também olha lá vou tirar essa nossa viu aqui deixar só esses dois textos que tem dentro do que a gente colocou e vamos

agora centralizar tudo esses dois ter Flex um tô falando pressa minha viu pegar o tamanho inteiro da tela que ela consegui, justify-content: e aí dentro de "eu coloco aqui Center Então vou a linha aqui no centro e também online iTunes A Center porque a CSS basicamente né só que aqui escrito um pouquinho diferente que é dessa forma aqui junto tá CSS lá na web seria com traço assim ou salvar e olha que legal tudo Centralizado e a mesma coisa para o nosso texto eu posso ter um texto aqui e só esse primeiro que vai ter

um estilo está eu vou abrir aqui onde sai vi eu vou falar para ele que ele não faz desse cara que vai ser 25 e olha que legal ai eu quero que esse cara aqui seja negritos programa, ponto foi o Peso dela vai ser bolo olha aqui já Maravilha aumentar um pouquinho aqui perfeito então é bem tranquilo da gente construir a gente As Faces aqui dentro só que aqui a gente vai um pouquinho mais além disso para utilizar uma tecnologia chamada estar os componentes que é basicamente uma estilização em mídias que a gente ama né

que é dentro ali como se fosse javascrip e não criando dessa forma e aí a gente consegue aproveitar e utilizar o menu CSS escrito lá na web aqui dentro do e aqui neste cantinho o e organizar bem mais isso daqui do que ficar escrevendo em linha ou utilizar outra alternativa que seria estar eu tive que a gente poder escrever aqui embaixo né então vamos utilizar o estado de componente Vamos ouvir aqui deixa eu dar um contra você tá então contra você para parar de rodar nosso já tá parando aqui vou esperar beleza contra você porque

eu sei de novo Tô clicando contra Você parou de rodar ou não se Ls e agora para gente estar lá o nosso estado componente eu vou dar npm install shield traço componente dá para escrever errado tá então npm install espaço Style compõe quando ele vai instalando aqui a gente pode vir aqui dentro do nosso projeto e outra coisa que a gente vai ter navegação entre as páginas né então eu vou ter essa forma de drawer Navigator aqui onde eu vou ter aqui então a página ROM a gente vai ter a página aqui do MyLink e

aqui eu vou ter um modal né que a gente chama né que vai abrindo várias partes aqui que a gente pode real e este componente e utilizar em vários locais aqui é bem legal então aqui a gente já sabe que vamos ter a parte de navegação entre pai também temos que está lá a biblioteca para trabalhar para navegações chamada de Rex navigation Então vamos instalar ela de novo entendeu um erro aqui provavelmente deu excedeu o tempo então a gente vai fazer Só vou rodar novamente aqui npm install estar traço componentes aqui e maravilha agora instalou

ali já deu Aqui ó status componentes estão biblioteca instalada a gente conferir foi instalado só vem aqui dentro de pecas de ponto de som é que a gente consegue ver ela aqui ó tarde traz compõe Então tá instalado perfeito vamos lá instalar nossa parte de navegação vamos lá então aqui dentro Eu tô aqui dentro de um leque navigation un.org eu posso vir aqui na parte de redox então Maravilha que a gente tem toda a documentação dela tá é para estar lá também tem o passo a passo bem tranquilo posso vir aqui vou copiar aqui Ah

então está bom não vou utilizar o npm aqui agora então vamos copiar vou lá posso até um zoom aqui só para vocês ir aí maravilha então acho que o espaço e aí eu comprei né então era o espaço install arroba e strass navigation/Neide Então vou dar uma entra aqui para a gente poder instalar já para ir Adiantando essas instalações Maravilha instalado aqui então foi tudo instalado né instalar várias coisas que precisa também então agora vamos lá Minimizar aqui que é mais que a gente precisa deixa tirar susumu dake ele fala aqui para mim que se

eu estou utilizando o Edson eu mexi no instalar isso aqui se eu não tô usando aqui eu vou estar Esse comando aqui debaixo mas o nosso caso é tipo então vim aqui ó clico no cop volta aqui nós você me ver não CLS aqui só Para limpar clico com o botão direito nela e já Cola e eu vou dar uma entra aqui e rezou aguardar também Maravilha instalado aqui eu já estava tudo que ele precisava também e agora a gente tem aqui do lado qual que são os tipos de navegação e aqui embaixo e achar

o nosso drawer Navigator tá quem é o cara que a gente vai utilizar essa navegação aqui e página que a gente vai chegar nesse nosso projeto aqui então aqui a gente Precisa só instalar ela para não ter que estar lá todo tipo né então a gente só instalar ela então vou copiar aqui o comandinho dela vamos lá peço install react navigation drawer aí e damos um internet estamos falando tudo dentro do nosso projeto aqui então só agora também e instalado agora só mudar o nosso projeto então CLS e para rodar o nosso projeto é bem

simples né gente já viu eu só vou dar aqui dentro da pasta do nosso projeto nosso ex o espaço start aqui ele Sobe aqui no servidor novamente do projeto Então ela rodar aqui ó esse que tava rodando é só posso fechar né ele já abriu o novo aqui já apareceu QR Code ou se eu vim aqui também já apareceu o QR Code aqui você me deu só Minimizar você e aí fazer o processo de rodar de novo aí que eu vou vir aqui fechar tudo bem O emulador e vou clicar em um androide para mim

de novo já que eu tô precisando de emulador aqui com vocês aí ó já rodou maravilha então agora a gente já pode Continuar e também já vou me importar Nossa Lobo né que a longo do projeto que a gente vai utilizar aqui que é esse carinha aqui tá então vocês vão ter também para poder baixar nesse link aí e eu vou já então trazer aqui para o meu projeto primeira coisa a gente vai dentro aqui do nosso projeto ao clicar fora botão direito New Folder src para a gente estruturar pastinha legal dele pra ficar bem

organizado dentro de src eu vou clicar aqui ó o botão direito em Cima dela tá bom então direito uma dela New Folder acertos dentro de acesso a gente coloca então todos os ácidos né todas as imagens o que a gente pode é que vai baixar de fato e vai utilizar aqui tá então vou dar um review aqui só para mim a postinho de dentro de acesso e eu vou colar aqui a minha logo então vocês arrastam a sua logo aí para também vamos ver aqui eu já apareceu a logo aqui posso clicar na minha logo

aqui ela já tá aqui tá então Src assim e aí a gente colocou aqui a nossa solo outra estrutura que a gente vai ter Então dentro de src eu vou clicar com o botão direito e a gente vai ter algumas pastinhas aqui a gente vai ter nossa peixes né olhando o nosso projeto aqui a gente vai ter Então a nossa home e a nossa aqui a parte de mais links não seja meus link Então vamos lá dentro aqui de pênis a gente vai ter que criar algumas páginas então primeira coisa vou clicar com o botão

Direito em cima dela nem vou chamar primeiro home com H maiúsculo beleza e dentro de Roma newell index. Jr Beleza então maravilha agora dentro de peixes de novo e O folder eu vou criar que o nosso mais links Marilyn vai ser a página onde vai ter os links né Maravilha de dentro de peixes temos o home e o mínimo dentro de uma links nilflon indexport JS Tumblr tá então beleza A gente vai ter essas duas páginas e agora A gente precisa criar dentro de cada uma um componente que vai ser o responsável por renderizar em

cada página aí tá tão chato aqui e vamos lá vamos começar então pela nossa ROM aqui primeira coisa e lembrando imports Premier a gente poder escrever o nosso jsx ROM reagir Import from ringtonead então eu vou trazer aqui uma viu e um teste também tá eu vou criar uma os componentes então Ecosport da full roupa de fogo prancha E aí o nome de componente sempre a gente Chama a primeira letra maiúscula tá bom o redor dentro que o nosso jsx Então vou colocar aqui uma veu e vou colocar aqui um teste pagina home Vou salvar

e maravilha então queremos o nosso componente os copiar ele aqui fechar vamos agora Dentro de mais links index eu vou colar aqui eu tenho que mudar o nome né então agora vai ser mais Mix também página links Beleza vou salvar então só vê as duas essa mais links em nossa home também tá aqui ó perfeito e Agora não sou é. JS que era aquele nosso primeiro componente que é renderizado que é o carinha que a gente tava mexendo aqui ele não vai ser mais o componente ele vai ser o cara que vai decidir a configuração

derrotas né então ele que vai decidir qual que são as páginas que vai rodar qualquer país que vai exibir toda a configuração das nossas navegações tá então a gente já instalou a parte de bibliotecas que a gente precisava agora é só a gente A nossa navegação então pra ficar bem separado e bem bacana vamos aqui dentro de src ficar com o botão direito e nem eu falei eu vou chamar um carinho de royalties Opa rocks. JS tá então src a 76 eralson TJS e dentro deste arquivo vai ser a nossa configuração das rotas de navegação

tá então Import mulher a criar e agora vou importar a biblioteca que a gente instalando então Import from home reaction/drawer é o tipo de navegação que a gente quer free Driver Navigator né que é o tipo que a gente falou que ia só beleza vou importar agora os dois componentes que eu quero montar né que a nossa como a nossa admita feito então Import from./Eles/lembro que lá na home olha só a gente não deu EcoSport de fogo agentes por três componentes como de fogo então posso importar e aqui perfeito vou duplicar Aqui para baixo tá

esse de baixo aqui é o nosso May links coloquei com m e com l maiúsculo mesmo aqui Também/mais link não preciso dar o barro ainda tá a gente já chamou o Whindersson Então já pega e renderiza nosso arquivo Ingrid tá só não pode deixar com a barra aqui no final deixar sem a barra no final importou as duas páginas o criou Beleza agora vamos criar Instância Nossa configuração derrota não conste o chamar que o nosso drawer igual with drawer navigation superior agora vou criar ela aqui O Hobbit as nossas rotas Victor dentro Do Vitor Nossa

drawer navigation Cuidado que o driver que é todinho maiúsculo. Navigator e abre e fecha aqui tá e dentro da nossa navegação eu tenho as nossas screens ou seja as telas né as páginas por ser renderizada então dentro do nosso droga navigate eu tenho drawer. 15 beleza ele fecha aqui nele mesmo as espinhas eu vou dar um enter aqui para a gente colocar as propriedades aqui ele a propriedade da nossa screen qualquer um nem dá vou chamar ela aqui de Ron beleza Segundo aqui que a gente tem é qual que é o componente que quando chamar

essa nossa página home que vai ser renderizado né então Qual componente a gente já importou Então é só colocar ele aqui agora vou dar uma inteira que faz e vou colar ela aqui então vou duplicar e não espaço aqui só para vocês no vídeo tá para ficar mais fácil aí agora esse Drone aqui debaixo vai ser o nosso mailing componente vou chamar que a gente já importou Não Posso copiar o Nome dela mas nesse aqui vou salvar e beleza Jaqueline então componente derrotas que vai ser responsável pela criança Nossa navegação Quais as telas que eu

vou poder Navegar e agora falta o exportar né eu posso dar o EcoSport de por aqui ou aqui embaixo também as porte entendeu flor alto sem problema nenhum mesma coisa tá a gente tá escutando para conseguir importar agora lá no nosso ep a gente criou a configuração aqui eu posso fechar já salvei agora não é. JS Que é o componente que é realizada quando o nosso projeto roda né Eu vim aqui roda o meu projeto ele chama esse componente agora ele aqui eu vou chamar Nossa ativo derrotas é o cara que é Nossa configuração todas

as nossas rotas que vai ser exibidas Então vamos lá dentro aqui do nosso é eu vou tirar tudo essa viu aqui que a gente viu eu vou importar que em é só aquilo lá em Portugal from./É crc-ba prova arquivo que a gente acabou De criar então importante E também temos que importador e aqui navigation o Roberto vim aqui navigation bar da Neide lembra que a gente falou ele é que a gente vai importar um carinho e vai envolver as nossas rotas que é o nosso navigation um container ou contêiner da nossa navegação então navigation Monteiro

e dentro da nossa navegação Nossa Cruz é o carinho que vai decidir as nossas rotas tá eu posso tirar por enquanto Import dormir at net que eu não Estou utilizando mais sei lá daqui e como o primeiro aqui também eu importo abre assim diretamente me aqui nem teve traço gesto traço render Tá o que que você tá importando isso aqui Mateus do nada isso porque ele faz a parte de gestos ou seja toda essa parte de animação de você puxar ele abrir essa nossa parte de roubar aqui essa biblioteca responsável por fazer essas animações tá

E quem recomenda a gente colocar lá como o primeiro aqui é o Resto navigation lá na documentação eles falam para colocar primeiro aí essa importação tá e vamos salvar e vem a mágica agora acontecer Talvez vamos ver aqui já apareceu página home demorou para atualizar você pode vir aqui da clica duas vezes não é ele quem duas vezes não é ele vai atualizar ou clica contra o m e ainda um Hello tá tem também atualiza o nosso ep ó já tenho página home E aí eu quero puxar o da esquerda aqui ó para A direita

puxei homem em Mairinque vou clicar aqui no link página links na verdade e o nosso como eles estão ali sem estilo nenhum então por isso que tá ali por baixo da nossa tá tudo bar mas já já vamos resolver isso aqui que mais que a gente precisa fazer então agora que a gente já configurou a parte de navegação agora então a gente vai fazer o que nem configurar esse estilo aqui do nosso dólar branco com esse estilo aqui vamos lá me dá bola então aonde Configuração das nossas rotas é aqui que a gente faz tudo

essa configuração de estilo nas nossas rotas aqui então quando eu abro aqui a gente tem roupa e o nosso droga esse cara aqui então fundo ele já tá branco então já tem meio caminho andado ali e mais que a gente tem que mudar não é nome mais link né se eu não me engano aqui é meus links e encurtar nem a gente tem que arrumar esses nomes posso mexer no neném poderia mas a gente tem um carinho chamado tá Então o que a gente pode colocar Neo Label aqui dentro aqui do nosso drawer navigation e

a parte de navegação não é o item droga Navigator é a navegação aqui então droga navigation a gente vai antes do fechamento realmente aqui ó 2 litros eu vou colocar propriedade para ele chamada drawer content options tá abre duas Chaves aqui pra gente colocar um objeto e o primeiro é o Active background-color tá onde que vai ser o McDonald's do carne aplicativo ou seja Desse cara aqui ó esse fundinho aqui tá azul qual que vai ser a cor então é que a gente vai passar uma coisinha bacana essa cor aqui que eu separei pra gente

tá esse dois e aqui então ele já vai 12 CCB 9 Vou salvar e olha que massa agora todo mundo que tá ativa a recebe essa cor maravilha, agora que então a gente vai passar aqui sim color ou seja acordo e tentar ativo que é do textinho aqui branco então FF dá pra fazer aqui em volta da cortar só vem olha ele Branco aqui feito, que mais que a gente vai passar a gente pode usar um pouquinho do Topo né Ele tá muito grudado aqui eu vou dar uma margem só colocar aqui 16 ou de

15 Então vem já de ser um pouquinho, vou dar um Label Style: for abrir e fechar aqui a Chaves vou dar um Font size preto e 20 então aumentar um pouquinho essa fonte aqui ó já ficou bem melhor 20 ou 19 fica bem bacana colocar até 19 essa fonte aqui não é bem pouquinho em Veneza próximo Passo mudar que a lei bom né e agora já responsabilidade de cada tela cada tela tem seu nome né mas o Navigator Tem um aqui dentro embaixo de cada Spring na primeira que eu vou passar uma propriedade chamada options

abre duas Chaves aqui também e dentro dessa Primeira opção aqui eu vou passar um Python Qual que é o título encurtar.url beleza ou encurtar link né Colocar encostar em mim ou salvar o portal, eu quero colocar um ícone antes Aqui também eu vou me importar com uma biblioteca que já vem com essa a ROM a roupa Extra barra Vector icon aqui eu vou trazer uma biblioteca aqui várias aqui é que eu separei ai beleza tiver macho, aqui para a gente colocar um ícone ele tem uma usa é propriedade tá que a gente pode passar aquela

drawer ai dentro do droga uai a gente pode renderizar alguma coisa então vou abrir aqui uma função anônima eu já suíte com essa sim tá aqui tá então aqui em baixo Dentro dessa Chaves aqui eu vou entre eles alguma coisa então como eu vou render eles alguma coisa que eu quero realizar algum componente algum ícone eu invés de utilizar essa nossa Chaves eu vou utilizar parênteses também eu já tô dando a entender eu estou renderizando alguma coisa nessa função tá então dentro que a gente vai reprisar o nosso ícones e aqui em si Dil Hi

com ele passa algumas propriedades para Gente vou abrir Chaves e pegar elas tá ela passa Se você se tem está indicado que ele está com foco ela o tamanho ela passa também qualquer cor a cor que é aqui essas que a gente configurou vai entrar na pasta Travessas propriedades e o tamanho padrão e já vem né a e agora aqui a gente pode realizar esse funny ai ai como se aqui tá Então abre aqui ó ai ai importou Ele acha que nem mesmo eu vou dar entrar aqui para a gente passar os propriedades dele para

ele nossa colocar em cima eu posso Passar então eu nem o nome do ícone que eu quero utilizar nessa biblioteca Eu chamei ele aqui de o chamar o tio e aí temos a cola a cola eu não quero mexer vou repassar que a gente já configurou Então vou só repassar variado color tá eu também vou repassar o Size não quero passar não quero mexer no sai vou deixar o padrão ontem e olha que legal já temos aqui só que eu estou nele aqui ele tá com o cubo preenchido eu vou em outra tela ele ainda

continua o preenchido por Quê circo não cubo preenchido mais essa biblioteca ela também o filme Cuba aqui traço outline ou salvar e aí é o cubo que não é preenchido E olha que isso acaba legal quando tiver com ela com foco eu quero que eles que preenchidos Quando eu for para outra tela eu quero que esse aqui não tem mais o foco fico com esse cubo vazio a gente fica controlando quando eu tenho foco mostra um ícone quando não tem mostra outro pensando rápido a gente Tem uma propriedade chamada Forks que ela mostra aí da

tua ou falso Se eu colocar em cima ela é booleana você já Eletro quando tá verdadeira e falsa quando ela é falsa né quando não não não satisfaz a condição quando eu tô com ela ativa assim e assim vem aqui tu quando eu tô aqui esse tem aqui não está com foco Então ela é falsa eu posso fazer uma renderização condição para comprar a isso aqui então aqui dentro do nenhum vou abrir que é Chaves e agora a gente Vai fazer uma renderização condicional trocas o usac Nossa interrogação quer dizer que se esse foco curtiu

ele vai renderizar o tiver aqui na frente e aí então eu quero renderizar silicone chamado tio: quer dizer senão aí eu quero realizar o nosso alto aí né então outline a Vou salvar para gente fazer isso vai lá estou aqui no em cortar nem aí também tá preenchido vou para Mairinque vamos ver olha ele aqui não tá mais sentido cara ficou Legal demais assim né então massa demais a gente já dá mais uma parte de dinâmica que para aplicação Beleza agora vamos para uma link e aí você pode copiar fazer de novo eu posso vir

aqui no nosso options ou copiar Optimus inteiro vou vir aqui no mix e vou colar esse opções aqui tá Então vai Que Agente tirou domingo perfeito já tinha mesma coisa só que a gente vai ter outro ícone então ao invés de utilizar esse Cuba eu vou dizer que stats traço Charme e aqui também E já um abraço outline vou salvar aqui vamos lá olha aqui que legal que fica e quando eu venho para cá para nossa eita a encurtar link ela fica outline quando eu venho para essa aqui ela fica preenchida e esse aqui ficar

online não ficou bem legal fica bem dinâmico show de bola demais então agora que a gente já finaliza a parte de navegação a gente configurar Nossa drawer aqui era assim que tava aqui não tinha a nossa o ícone Mas eu já coloquei a mais aqui para ficar legal e também já fizemos a parte de dinâmica que fica mais legal ainda né então maravilha agora a gente vai para nossa parte da ROM aqui vem aqui nesse como é tudo um componente a gente criar componentes e reutilize a componente não era que a gente criou o componente

da home que o componente link que o componente lá no f lembro no começo então toda a gente pode criar um componente e melhor posso reaproveitar Os componentes vários locais e a gente pensando e olhando dessa forma aqui olha só aqui dentro do Home a gente já tem um componente que seria reutilizável né a gente tem esse primeiro componente aqui é o nosso hamburguerzinho né do nosso para abril droga eu não ficar só vai eu vou ter que ficar puxando o cara faz saber que ele tem que puxar então a gente precisa falar para ele

que se eu clicar aqui ele vai abrir você puxar e também vai abrir tá então a gente vai Ter esse componente aqui de hambúrguer e sim esse hamburguerzinho ele vai se repetir mais links e vai ser tinha home E se você tivesse mais delas poderia repetir também porque é um componente que a gente pode utilizar então não faz muito sentido eu ir na nossa frente Roma e criar ele aqui e depois ir na nossa frente uma links e recriar de novo faz mais sentido eu quero um concorrente e usar e nas ruas é reaproveitar o

nosso código utilizando a parte de componente Facilitando a manutenção também tá então a gente já tem aqui um carinho que a gente tem que componentizar que mais que eu tenho componentes aqui nessa página home a separar para as duas né para reaproveitar então a imagem não esses textos também não vamos ver mais para frente Isso aqui é para aberta né aqui a gente tem a parte do nosso modal esse modal aqui então na home quando você geral nem que ele vai abrir uma se você tiver aqui no MyLink e você Clicar ele também pode abrir

para mostrar qual que é esse mandar o seu clicar em cima do sujeito ele vai abrir cima dela aqui seu clicar em cima do YouTube ele vai abrir modal aqui no YouTube dos links que você quiser claro no caso então uma Down também é um componente a gente já Aproveita e cria separado Então bora mão na massa fazer essa nossa home aqui começando pelo menos vindo aqui bora lá então a primeira coisa o house a gente finalizou Aqui não é a gente finalizou e a lembrando acho que tem uma coisa ainda que dá para a

gente ver quando a gente tá na home ele tem esse fundo aqui em degradê né Beleza e amei com um verde ali né isso a gente vem aqui para o MyLink ele tem um fundinho que Azul totalmente diferente e a nossa status bar ela não tem que acompanhar isso para ficar legal ou eu tiro a status bar para quando tiver no ERP não mostra está tudo ar que as carinha aqui ou quando eu Trocar de paz a gente muda background dela e não fica embaixo para ficar mais dinâmico ainda a gente vai tirar essa parte

de e vai acompanhar o fundo conforme a tela aqui tá Então vamos lá vamos lá e agora então a gente vai lá para o nosso homem aqui e a esse cara que a nossa página vamos que a gente vai começar a mexer então ele tem esse cara que um Gradiente né então não linear grade Então a gente vai parar de rodar que nosso projeto vou Dar um contra você aqui de novo ó clicando um contra você para parar de voltar você CLS pare de rodar então agora a gente vai instalar esse linear-gradient tá então Edson

install é o traço linear traço da um entra aqui pra instalar ele vai instalando como é que eu sei deixa eu fechar aqui é que eu sei que esse cara aqui dentro da documentação do Expô eu posso pesquisar que linear linear gradients para que legal tem a biblioteca dele ele fala Aqui ó para instalar qualquer o comando ele fala que até um exemplo de uso então é bem bacana é bem didático é verdade né Qual que é a propriedade que eu posso utilizar o que que é cada propriedade ó onde começa o calcanhar os números

para fazer o gradiente né como é que a gente passa aqui ó então é bem bacana então a gente tá instalando acabamos rodar já instalou Express espaço Skype para gente rodar novamente o nosso projeto vamos aguardar Beleza Amor vindo mesmo lá dor aqui ó fechar aqui o nosso é tipo Vou clicar de novo para rodar a beleza rodando já vou puxar aqui maravilhoso então voltando aqui agora que a gente já instalou ele eu vou trazer ele aqui então Import pronto peço traço me agrade E aí eu vou trazer aqui o nosso linear-gradient aqui tá E

aí por volta de tudo isso aqui em vez da viu eu vou utilizar esse nosso linear-gradient beleza e aí eu vou passar a cor que eu Quero para ele olha que massa não entra aqui eu vou passar propriedade para ele colors é uma a rede então eu abro Chaves Abre uma Rei aqui para passar de qual cura qual cor Então abre o que primeira cor um dever 9,1 até qual cor a corte vai ser 1327 42 se eu não me engano né deixou visualizar aqui três 2842 isso mesmo então vou salvar e agora a gente

tem aqui embaixo Style e esse estilo aqui como é algo que é só do Gradiente não vou criar ele e usar o Style de componente que já já a gente vai conhecer ele eu vou passar em mim igual a gente já aprendeu então Flex um por quê Porque eu quero que esse Gradiente Pegue a minha tela inteira correto então Flex 1,2 vai content Center para ganhar tudo no sem a um cuidado com a vírgula que e com a escrita Vou salvar e olha que legal aqui a gente já tem então nosso página home no centro

aqui ó e já tem o nosso Gradiente exatamente como eu quero Perfeito esse cara que já foi agora o próximo passo é status bar porque olha só puxar aqui em alguém aqui para o Marinho ele está acompanhando mas o nosso mais nesse daqui a pouco vai ter outra coisa quando eu voltar aqui ele vai ter que acompanhar e voltar para essa cor aqui tá Então a gente vai querer uma status barco e nós vamos controlar a cor que eu quero para ela de fundo Então vamos lá vou vir de dentro de src vou criar uma

pasta Chamada New Folder compõe componentes dessa para a gente organizar esse nosso projeto aqui ficar show demais eu dentro de compõe eu vou criar um New Folder também chamado Tatos Bar pente mesa dentro dela em dois pontos JS a aqui dentro desse componente a gente vai fazer então deixa eu abrir aqui para tá aqui a gente vai fazer então toda a estruturação da status bar tá então Import Ligar para o iate se importe net roupa E aqui eu vou trazer um carinha chamar status bar para gente controlar estado bar e vão importar também do nosso

Limiar/neste esse cara aqui do nosso Forget nave igreja e ele disponibiliza para gente um carinha conhecido como desfalques para saber se a página que a gente tá está com foco ou não ou seja se eu tô na home e eu tô aqui perguntando se eu estou na home ele vai devolver como tio ou não essa parte está com foco ou não então vou criar um componente Fashion Tatos Bar Pain o Vitor agora vou retornar algum jsx eu quero passar para esse nosso status bar page Qual que é o fundo que eu quero porque eu quero

passar para ele que aqui se não tiver na rua mas sejam fundo se ele estiver no nosso vai nem que seja um fundo azul então a gente recebe isso através das propriedades e já gente vai ver como passar através de propriedade eu vou receber através de uma propriedade e agora eu vou fazer uma Comparação né bons isso brancas igual News estoque a gente importou só vou ter dentro dessa variável se está com foco ou não né Eu posso até colocar em mim seu retorno não tem problema e se fosse se tiver com foco então eu

quero renderizar essa status bar aqui que a gente importou top top com todas as propriedades que eu passar para ele tá então a gente vai passar qualquer cor que eu quero qualquer eu quero que seja Preto aqui eu sei O status básicos sejam Claro a gente vai passar tudo aqui dentro tá dessas próprios porque... Porque eu tô repassando a quantidade de propriedade eu não sei se é uma eu não sei se é duas eu tô só repassando todas as propriedades que ele a gente vai receber aqui no nosso componente tá então repasso aqui e se

não tiver com foco roupa então não faz nada então dois pontos não tá então ele vai verificar se tem foco se tiver Então aceita e passa Essas propriedades em Belize essa status parte dessa maneira se não tiver com foco a gente coloca um novo aqui para ele não fazer nada tá então EcoSport reforço tá tudo barbante o nome aqui do nosso roupa né a gente consegue importar só veio aqui mole mole Minimizar Vamos sominex eu vou importar nela Então forte está tudo bar pé from alto/tem que descer uma pasta né então vou dar uma passada

para trás. Fonte/pontos para mais uma e aí com O bar tá tomar quente e agora eu utilizo aqui então em cima aqui ó o nosso teste ou aqui mesmo ela Fecha aqui tá me lembra aqui ó por mal de cima ela aceita aqui tá esperando que a gente mande alguma propriedade tá essa propriedade status bar precisa passar Qual que é o fundo se eu quero que o exame seja branco então vamos lá eu vou passar por exemplo um background Color o grande valor que vai ser o mesmo a cor de fundo aqui eu vou comprar

a mesma Coisa então daqui para lá se fundir com esse nosso não vai ser a mesma coisa e eu quero que os itens não sejam escuro e sem claro então bar Style eu vou passar aqui o nosso Lights traços contente Beleza se eu vou salvar e olha que legal vou salvar aqui vem aqui e olha que massa já tá branco e já tá com esse mundo que se eu vim para cá agora ela tá preta porque agora a gente não passou nada nessa página Mas se a gente viesse importasse eu vou colocar ela aqui vou

Vir para o Unix ou Linux vou colar aqui dentro dessa viu só para a gente poder ver ela funcionando né você se importar ela também Import pronto barra.ba componentes Mas tá tudo beleza e aqui eu quero que seja branco eu quero que a curta já Claro e eu quero aqui que seja aquele azul né então 13 o 2742 Vou salvar olha só aqui já tá azul e quando eu for para o nosso encontrar nele ele volta para cor se eu vim para cá ele volta para isso aqui é Que ainda não continua a cor mas

depois ela vai ter essa cor azul então maravilha né já analisamos Mais uma etapa aqui o menino já voltar aqui para nossa home né então aqui na nossa onda só tá um pouquinho aqui beleza vamos ver qual que é o próximo passo então a gente fez a parte do está tudo Barbie agora falta o nosso menu que um componente separado então EA componente separado a gente vai reaproveitar a gente pode ter uma corrente agora a gente fez que está Tudo bem né eu posso vender a tupia de componentes eu vou pegar o Nil falou é

chamado menino ou é maluco dentro daquilo New files... DJ então componente agora tem o nosso página menu passa também não né e passa está tudo bem dentro de um minuto temos o nosso indice que a gente vai criar mais um componente transporte ruim é ruim é ruim e nem Chaves hoje eu vou trazer aqui Marvel em um táxi Esporte meu sol faixa menu Me retorne é que eu vou colocar uma viu e o teste aqui menu só para a gente poder ver então vou salvar vamos na nossa Roma importar aqui só para gente já conseguir

visualizar né então ou importar quem não importe minou pronto././Componentes/menino e eu posso utilizar né gente criou lá um componente Zinho simples eu utilizei aqui utilizamos ele aqui vou salvar vamos lá para que legal e o texto mesmo aqui já apareceu Ele já está renderizando aqui o Nosso minuto esse componente mesmo a gente colocou uma viu em um táxi mas aqui a gente vai precisar utilizar fazer bastante coisa e vamos utilizar aquele carinha lá chamado Style de componentes para a gente fazer estilização então bora agora falar e começar a utilizar ele dentro do nosso menu para

ficar bem organizado a gente vai criar um newell tá os pontos JS e aqui vai ficar só estilização desse menu então vamos aqui a importar o Style from child Component/Neide a gente está utilizando ele para o iate Neide e também tem para web né gente pode utilizar EcoSport tons eu vou criar aqui um botão Então vou chamar que the button menu single Style a gente acabou de importar seu nome em cima ponto e agora qual que é o botão que eu quero utilizar eu imaginei que a gente tem um botão chamado Tati é bom o

pet beleza e aí eu abri aqui o nosso nós temos aqui essas espinhas deitadas é o nosso caso aqui então abrimos aqui aqui Dentro vai o estilo né o estilo que a gente vai dar para o nosso botão mesmo mas por enquanto eu não vou ter nada tá e se você é novo o vs code por exemplo e não tá dando esse Highlight essas cores aqui você pode vir aqui dentro das suas extensões e procurar tipos tarde é isso aqui ó vs code estado de componente e aí você clica em instalar essa extenção para mim

como eu já tenho instalado e ele vai te dar tudo essas coisas tudo certinho tá então falou ela Aí caso não tenha dado as suas coisas vamos voltar tinhamos um botão que é um Tati é bom é um cara que cava eu aí agora eu vou lá no nosso menu uma importar ele né então vou importar aqui muito/é o nosso arquivo aqui certo eu não contra o espaço a já apareceu aqui o outro não eu vou utilizar ele aqui vai tirar o texto botão mesmo mesa dentro do botão menu preciso colocar um teste aqui para

vocês verem atualizar e aqui olha já apareceu olha como ele Aqui caso estou clicando nele aqui agora eu olhar um botão tá então bora lá Bora criam nosso - Vinho aqui primeira coisa não vamos ter nenhuma viu por volta tá então a gente vai utilizar todas as utilizações todos os componentes em utilização pelo Estado de compõe tá então vou tirar um corte aqui do leite leite e vou tirar essa viu aqui por volta de tudo vai ter apenas o nosso botão por volta de tudo isso aqui então menu dentro do botão menu a gente vai

Ter um ícone né que aquele cone de hambúrguer é um trazer um se for nesse aqui a arroba ex/Vector icons eu separei uma biblioteca chamada para Beleza então pedra aqui aqui eu vou trazer cinco né isso aí como é que ele vai te Então nem o nome do livro que é no Bem Simples size ou que o tamanho vou passar quarenta e qualquer coisa a gente muda e qual que é a cor desse cara vai ser Branco mole demais né então vou salvar Olha aqui ele já é aplicável beleza e agora nesse nosso Tati amor

que é o botão menu eu tenho uma propriedade chamada um presta tá esse um prazo aqui é quando eu clico o que que acontece eu chamo essa função Então vou criar uma função anônima e vou dar um Alert ficou só para a gente ver se tá cuidado que com as "aqui e com as chaves tá eu vou salvar eu vou ficar com já mostra nosso Alerta quando eu clico ele chama esse função Aqui com pressa que tem aqui dentro tá então como a gente passou uma função anônima e passa Maninha me chamou aqui nosso Alerta

e o que que eu quero ficar aqui eu quero que automaticamente Abra para mim esse nosso droga tá vamos lá importar aqui também são rovere aqui na barra pectus navigation bar nem me desculpa e a gente vai trazer um mild navigation SOS navigation vou instanciar esse nosso corpo aqui com os navigation é igual Pires navigation a gente Importou ali agora com esse navigation aqui com esse nome eu posso fazer vocês navegações então vou deixar Nossa função anônimo quando ele clicar e baixar March navigation. Open draw beleza Cuidado para não escrever errado aqui de Maio Vou

salvar irmão fazer o teste bota não contra o e meio e vou dar um Reload aqui E aí beleza de quem olha que massa ele já abriu né posso clicar fora ele fecha ou posso arrastar não tem problema mas se eu ficar ele abre Então é isso que a Gente queria era isso mesmo agora falta dar um pouquinho mais utilização para esse nosso menorzinho e a utilização aqui dentro do nosso Styles Então vamos lá é esse cara eu quero que ele fique posicionado aqui no topo né então vou passar para ele um top eu vou

passar para ele ele vai ter por exemplo espaçamento da nossa status bar mais um pouquinho então vou importar aqui dormir aqui neste mesmo aquela Nossa tá tudo ar porque status bar por dentro dela posso Acessar o tamanho dela então eu vou falar para ela aqui vou abrir vou fechar aqui cifrão abre e fecha Chaves por quê Porque eu quero comparar, lá fora vou importar também porque eu quero comprar se ele tá no Android ou iOs eu vou dar espaçamentos diferente para ficar bem legal então se ele tiver no platform.io se é é igual a IOS

ou seja se ele estiver no iPhone ele vai ter então interrogação ele vai ter a nossa status bar. Ai você Já altura dessa nossa status bar mas 60 e aí como é pixeis então preciso dar mais de novo em Card aqui com o nosso pics tá então mais 60 fitas senão: eu vou dar então apenas 10 mais né então para ficar exatamente 10p aqui tá é porque eu não posso escrever um texto junto aqui o nosso nome ó ele vai ficar reclamando e não aceita tão pra gente conseguir encadear o texto preciso colocar ti Mais

e aí colocar aqui a nossa estranho né o nosso texto você, eu Quero então que ele tem uma position Absolute ele não tiver position Absolute ele não vai obedecer o nosso tópico eu vim aqui agora falei que legal e já subiu para o nosso tutor e ele tem aqui então como a gente está no Android é só isso aqui de ideia de pagamento e os 60 É apenas para quem tá no iOS tá se eu passar aqui ó depois dos dois pontos e quer dizer aqui esse espaçamento é só para Android eu passo aqui para

gente 50 Olha lá para ele desceu eu posso passar Até 13 aqui vez de 10 ou 13 beleza colocar aqui do lado só para a gente poder X ao mesmo tempo então vou dar uma margem fizeram em cima embaixo e de 20 Pense nas laterais de hoje vai contente aqui space-around tá porque se tiver mais alguma coisa do outro lado aqui no lado da direita a gente vai distanciar onde estava lá então perfeito finalizamos aqui nossa menos já tá funcionando fechar os fechar o nosso minuto também e aqui já finalizou o Nosso menos vamos voltar

para nossa home para ver o que mais que dá para gente aproveitar vou tá aqui para home Então bora para nossa logo e bora aqui para o restante né então vamos em baixo aqui deixa eu tirar esse texto aqui e vamos começar dentro aqui do nosso home a gente vai lá deixa eu Minimizar os componentes dentro do Home a gente vai ter então New files chamado Star os pontos JS também então fique forte Power from the components Bananeira beleza é que a gente vai ter positiva tá então a primeira coisa aqui que a gente tem

que fazer então nossa lobo e a gente já importou ela não só criar aqui embaixo do nosso menu eu vou ter um container logo dentro desse container logo eu vou ter logo Vou para o banho + rosto né componente é que sempre com a primeira maiúscula ou até logo aqui força beleza é quaire a gente trazem a nossa imagem São Outro./Pode tomar para descer mais uma vá logo Ponto.png que com l maiúsculo eu achei ele meio isso mesmo agora vou salvar a gente nem enviou isso aqui né então vai dar não encontrou vamos agora importado

Ah tá eu acho que é lá que a gente vai colocar vou tirar essa Import do Iraque gente feito por enquanto e vamos importar aqui o nosso Estado então ponto baixo Style e eu vou já colocar aqui o nosso container logo, e a novo e as duas que a gente vai criar lá então vamos agora lá no nosso estais aqui do homem Homem é eu esporte.com ontem na Globo igual a esse ponto esse container logo vai ser uma viu não espaço em branco para ficar em volta dessa nossa imagem vou duplicar de mim e de

baixo vai ser a nossa logo né E vai ser uma imagem Então vai ser um primas dormir chinês Então vou salvar Vou salvar olha aqui quem já veio já vem à nossa imagem e por volta dela tem um container novo que é uma viu aquele espaço em branco lembra então dentro aqui da nossa Lobo eu também vou Falar para ela que ela vai ter um urso sai ou moldes chamado com quem Beleza vou salvar ela vai encaixar no tamanho aqui a gente passa vamos vou hoje e vamos lá primeiro eu preciso centralizar e reduzindo ela

tá muito grande aqui importar aqui Flex né eu vou deixar importado aqui caso a gente precisa né o nosso uniforme para casa a gente queira separar para uma outra plataforma Então vamos a viu aqui eu Vou aliar tudo num certo online a gente Senta ai que a gente não precisa mais aquela "e nem servir junto e agora a gente tá escrevendo CSS padrão mesmo então Maravilha align-items-center justify-content-center também fazendo isso aqui a gente centraliza ela não sente é isso que a gente queria mas eu também vou dar uma margem Thor aqui de 35 ou na

verdade 35 pessoas né a gente pode fazer a mesma separação que a gente fez lá né então posso falar aqui ó abre o cifrão A cebola e eu posso falar platform.io se for igual a Então eu quero que ele tenha 35 mais o nosso fiz aqui se não: né Se tiver no Android eu quero que tem já 15 de espaçamento mas precisa aqui então fica bem Vamos agora para nossa logo estão dentro aqui na imagem eu vou dar um abraço para ela visse 150 tem que ser uma altura e 150 conhecer também a gente sendo

bastante aqui vamos continuar Então a nossa logo já foi pra baixo container Beleza tô aqui dentro vai ter O nosso conteúdo né vai ter os ímpios Vai ter todo o nosso nome Python vou chamar de tarde o sujeito Limpo E aí embaixo aqui do nosso time eu tenho aqui subtítulo né que é cole seu nick para encurtar os pés que tava escrito lá né Olha você nem para importar isso mesmo então beleza vou copiar o nome Henry cuidado não escrevi errado, ontem não contente ai Tom e o nosso subtítulo aqui que eu chamo então com

precisão e vamos nosso existir nos criar né então Aqui só para lembrar EcoSport com ontem ontem gostar. Viu vai ser uma viu né um container uma viu vou duplicar mais duas vezes aqui a de baixo é o Python ele vai ser um Style ontem teste lembra que o pai tá online então olhar um teste né então a gente traz o teste dormir aqui mesmo e o subtítulo a mesma coisa né então vai ser um teste também ele vai ser um não deixa eu apagar e Beleza vou salvar aqui só para sair o erro que já

apareceu os Testemunhos aqui então vamos lá é que a gente vai fazer o mesmo esquema de Margem né E como a gente trata da margem legal a gente cuidar para as duas plataformas Tá mas eu poderia dar uma margem só tipo 25 kits não tem problema mas pra cuidar bem da usar milionário gente pode testar e olhar para as duas plataformas é isso é bem legal então para eu essa aqui eu vou usar porcentagem tela para ficar bem legal eu vou colocar aqui 25 por cento e se for o Android me chamar WhatsApp quinze por

cento também tá um pouquinho menos sempre bom vou salvar Beleza a gente tem uma margem de cima aqui então dentro do nosso contente ontem né vai ter todos os nossos itens e agora dentro aqui do nosso Python E aí o Size há 35 36 color Branco. É bom cuidado com os ponto e, depois de cada linha beleza e eu tenho que alinhar então teste falar Oi tá inteiro aqui beleza e agora vamos subir tá então então subi tá Eu estou aqui é o textinho menor então fonte site combinar um preço menor mente fixa isso Roller

RS também táxi online Center beleza ok É menor né Vamos dar um pé de botão aqui embaixo 10 por cento então quando tiver aqui embaixo o que vai ter dez porcento de espaçamento feito se achar muito grande e se colhe seu link não sei se era tão grande que nem um pouquinho aqui gente pode colocar umas 18:18 maravilha vamos voltar aqui já temos o container já temos o tá então eu tenho sobre Tom agora então se a gente lembrar mas aqui um impulso é onde o cara vai digitar e o ícone do lado Domingo então

bora fazer isso aqui então aqui dentro ainda do nosso container contém dentro ainda nele eu vou ter mais um container input vai ser responsável como colocar o ícone do lado do Takashi de texto não vai ter um boxe com e dentro desse Box eu vou ter o ícone né Já até trazer o ícone aqui esse eu não importei não é uma em Portal aí para mim aqui em cima do nosso estágio i o roubar com barra Vector ai eu vou trazer que o nosso banner e aqui então vou colocar dentro do box vai com ele

aqui ele é um link Zinho né é esse aí como é que então a gente pode colocar nem Live T2 dólar o branco beleza um boxe com ele aqui e depois desse aí quando que a gente tem um impulso então por isso ele fecha aqui Nele mesmo o input tem porque ele vai ter um placeholder dá para não escrever errado tá esse placeholder aqui vai ser o Alex eu nego aqui responde agora bastante coisa né gente vai lá criar eu Vamos lá fazer o nosso os tempos ó nem viu ele tá chegando já no final

só vou dar, eu vou dar entrar para a gente colocar aqui embaixo mesmo tá só não esquece da, estão container input Depois tem o que boxe com, que mais que tem um Bom vamos lá no Chico Peres aqui para poder passei lá só para não esquecer o nome EcoSport bons Taylor vou estar não vai ser um contêiner a duplicar aqui mas duas vezes a de baixo vai ser o box pai com e também eu vou aí com ele vai ser o espaço né para gente colocar o ícone ele também é o navio e o input

aqui debaixo apagar aqui o imposto ele vai ser sexy e wiethe Neide tá certo simples é para gente digitar alguma alguma coisa um ou Salvar só para sair o erro e beleza Olha só clicar aqui ó já aparece o teclado para digitar mas vamos lá esse nosso container em todo é o cara que tá por volta de tudo esses caras aqui então quê que eu quero fazer eu vou falar para ele que ele vai ser entrar mas lá no centro entendeu flex-direction eu vou mudar a direção vejo um embaixo do outro e vai estar aqui

no lado do né então rolo de linha olha lá um ao lado do outro eu vou falar para ele que eles vão ter um ele De 100 porcento da tela largura de 100 porcento com TV border-radius aqui ou seja vamos arredondar bolinha dele 7 a margem em cima embaixo de 15 pics e zero nas laterais prédio leste ou seja na esquerda eu vou colocar uns 15 pixeis e um pedem aqui também na direita hide Bom dia 15 beleza salvar já deu o espaçamento de 15 pics aqui agora vamos para o box aí ó essa parte

aqui em volta do ícone só Box ai como que essa vivo aqui também vai ser ai bons sem ter Justify-content-center o centralização silicone no centro nos Pai cadê errado aqui beleza pede Life Ben 10 Space ele vai ter apenas uma largura de onze por cento na altura 50 fixas e um background-color aqui para ele e vai ser não o branco Se eu der branco ele vai ficar muito forte e lá é um pouquinho meio transparente então a gente utiliza aquele famoso RGB a que tem opacidade para ficar um pouco transparente o branco é 255 255

255, a Opacidade zero. 15 com pouco transparente o seu salvar Olha lá legal e agora eu vou arredondar a parte aqui ó da esquerda de cima e de baixo borga o leque rádios eu vou passar aqui 7 fixas que a mesma aqui de cima tá E agora vou duplicar border-bottom-left-radius 7 também olha só Redondo essa parte aqui debaixo e agora ele vai grudar com a transparente aqui do nosso input Olha que legal que Vai ficar esse cara tem onze por cento né então eu vou querer que passam por cento apenas então nosso técnico ele vai

ter também a nossa AIDS vou ter que copiar aqui ó nossa e hoje a gente vai acontecer ou seja vai centralizar também mas a largura dele ou ele vai pegar o restante ou seja os 90 porcento restante E aí eu vou falar para outra vai ser a mesma 50 na mesma aqui no nosso ícone pede interno desse cara e da spikes e vamo colocar aqui o nosso mesmo Vetguard eu copiar vou colocar ele aqui olha que legal ele juntou aqui com o nosso Iker só que faltou arredondar essa bolinha aqui e agora é a parte

da rinite neh da direita então Border a light Gray border-top-right-radius 7 pics né e agora ando bottom-right gregos aqui também e olha que legal então agora ele tem o ícone deixou aqui o nosso esse rodo agora Que massa e se eu continuar digitando ó ele vai chegar até o final também quer aumentar um pouquinho a Fonte então onde sai de vamos 17 precisa aqui o Olá bem maior já tô bem melhor e agora para gente finalizar outro nosso botão então vamos aqui em baixo aqui dentro ainda do contêiner contente cuidado diz mais fora do contêiner

boot então aqui eu vou tão colocar o nosso batom Slim o botão link ele vai ser um Tati ou não botão a gente já viu e Deus vai ser um botão link grátis para ter um texto Jerónimo mole demais vamos já colocar os Importes eu vou até aumentar essa Cuidado se inscrever importa errado vamos aqui vamos criar esse sportcount botão link gostar audi.es tô chamou é sente vai ser um botão que tem opacidade bom ficar debaixo o botão link next né vai ser um táxi vai ser um tempo ou salvar temos aqui o nosso botão

agora vamos finalizar a estilização dos aqui né Primeiro eles vão ser Centralizado posso aplicar aquilo ali a tanto na vertical quanto horizontal Nossa fazer Isso eu já minha beleza ele vai ter uma altura que vou colocar um pouquinho menor 45 que que é isso ele vai ter que o nosso background-color de branco só falta o ponto-e-vírgula e tem a nossa "Beleza vai ter que tomar margem em cima embaixo não precisa né e nas laterais na esquerda na direita sem desgrudar Olha que legal quanto que o dobro de Aquino e pude Oi Cadê tia deu nosso

container aqui foi ó na esquerda e 15 na direita então para ficar é igual morning 15 Olha Então beleza agora 15 fez aqui eu vou arredondar né a mesma quantidade border-radius em todos os lugares rádios e sites piercing que a mesma coisa que eu fiz um tudo vai ficar bem bonito eu vou desgrudar um pouquinho aqui embaixo também margem botton e pin serpentes tiver alguma coisa aqui embaixo e agora texto aqui dentro né do nosso botão Então pronto sai 18 é preciso aqui Beleza deixa eu ver se era assim mesmo isso mesmo ou salvar vou

Fechar aqui e aí só pra gente finalizar esse nosso carinho aqui dentro que é o famoso placeholder né que quando não tem nada digitado dentro input Eu quero mudar para branco e aí ele tem uma propriedade Vixe amada placeholder text color Cuidado que o Tiê você é maiúsculo e aí eu coloco aqui posso colocar até vai olha que massa que ele vai ficar então Branco tá então ficou bem legal quando eu clico aqui eu vou digitar alguma coisa que maravilha porque ele é Só nós teclado ele tá por baixo aqui tá Então tem um erro

de acessibilidade aqui eu não consigo arrastar é mais fica tranquilo a gente vai resolver isso aqui e agora sim finalizamos aqui a nossa primeira aula do ensaio aqui cara sensacional Foi bastante coisa né Demoramos um pouquinho ali para configurar a parte de ambiente apenas para depois já colocar a mão na massa né então aqui a gente já finaliza a primeira aula algumas coisas Importantíssimas primeiro vimos sobre componentes aprendemos a então criar um componente a gente pode reutilizar os componentes então a gente já viu aqui começamos a configurar a parte aqui do nosso roteamento você já

parte de roteamento de paz já tá sensacional a gente já criou mas está tudo baixo vai ser dinâmica conforme a parte que a gente passa o seja background dela né então já já a gente vai ver aqui por enquanto a gente não tem a página de mim Mas nessa aula a gente colocou aqui no Home que a página de a gente vai colocar o nosso link aqui para ser gerar tá então aqui a gente a finaliza um pouquinho da primeira parte da página do Home colocando aqui o componente em menos já separou também o componente

de está tudo bar e a gente já criou aqui primeiro a parte do componente apenas a parte a próxima aula então a gente vai continuar essa parte que o homem já Cuidando um pouquinho mais acessibilidade né da experiência fiz vai ter porque por enquanto botão ficar meio para baixo eu não consigo clicar aqui fora e fechar tem outro comportamento que a gente costuma ter né quando abre o input por exemplo você clica em qualquer lugar fora e que aquele fecha não vem aqui clica para fechar né esse é um comportamento que a gente já meio

que tem aquele comportamento Então a gente vai ver tudo isso aqui e depois entrar Para parte funcionar o que é colocar o nem em gerar ele aqui tudo importado com a pele que a gente vai utilizar a gente vai conhecer mais para frente a então eu vou ficando por aqui nessa aula mas eu espero você aqui em ponto amanhã na próxima aula para gente continuar esse aplicativo vai ficar a cara sensacional que vejo a próxima aula e até mais