React Native Insider - Aula 01 Iniciando sua jornada!

E aí [Música] [Música] E aí o Olá seja muito bem-vindo ao bilhete Leite mim syder seja muito bem-vindo ao nosso workshop eu estou muito feliz de ter você aqui então antes de tudo seja muito bem-vindo eu tenho certeza que você vai evoluir muito eu seja para você Que está começando agora começando do zero é começar a criar seus aplicativos ou até mesmo entrar para o mercado aí que tá cara super aquecido seja muito bem-vindo ou para você também que já participou de algum evento nosso do ensaio seja muito bem-vindo de volta né já são mais

de 12 mil anúncio que passaram pelos nossos Treinamentos e as implicar um prazer enorme tá aqui mais uma vez fazendo parte dessa sua jornada e olha eu tenho certeza que é o final Desse treinamento aqui ao final lá sexta-feira lá no final do insaider você vai estar outra pessoa vai ter evoluído e aprendido muito aqui dentro com tudo que a gente vai ver então a gente vai desenvolver desde o extremo 10 aprender e criar um aplicativo muito completo E como sempre o nosso foco é se você fazer aqui junto comigo no ensaio e sim para

você aprender de verdade e desenvolver um aplicativo completo tá então pode ter certeza que lá no final sexta-feira Final do nosso Tchau você vai ter evoluído muito aqui então sem enrolação primeira coisa dentro do ensaio era que a gente vai utilizar o iate nem tive que é uma biblioteca é uma ferramenta para gente desenvolver aplicativos para Android e aí o s mas anos a gente sair qualquer código criando qualquer projeto antes de eu entrar aqui e compartilhar minha tela pra vocês pra gente poder começar duas coisas né primeira coisa vamos conhecer o projeto que a

gente vai Desenvolver ao longo aí desse workshop e cara é sensacional projeto que a gente vai ficar muita coisa vai ficar bem bacana então vamos conhecer Qual que é o projeto que a gente vai devolver e depois como entender as motivações né passando ali por cima de porque utilizar o York na time qual que é as motivações a gente utilizar essa ferramenta para desenvolver os aplicativos né para Android e IOS e depois Sim a gente vai passar todo pelo ambiente de Configuração tá então pode ficar tranquilo que se você nunca configurou quer saber de toda

a configuração antes de começar a criar nosso primeiro projeto tá seja para você ter um computador um pouco mais fraco e quer rodar direto aplicativo no seu celular ou para você que quer criar um emulador a gente também vai mostrar então fica tranquilo Bora lá então bora conhecer aplicação que a gente vai desenvolver Então vamos lá Bora conhecer aplicação Que a gente vai desenvolver aqui ao longo do nosso Shop primeiro chamei ela derrete Brain mais claro vocês vão poder chamar ele como vocês quiserem né personalizar ele sem problema nenhum então basicamente o aplicativo de filme

tá Que hora que a gente entrar ali na nossa home vai mostrar então um filme os filmes que estão em cartaz vai mostrar a lista dos filmes que estão em cartaz tá então tudo isso aqui a gente vai gerar esse primeiro filme aqui tem um banner Dinâmico toda vez que ele entrava mostrar o filme em cartaz diferente não vai ficar o mesmo então vai ficar bem dinâmico isso aqui tá E também vai mostrar os filmes que são não é populares ali Os filmes são mais votados também tá claro que essas imagens aqui é tudo ilustrativa

para construir a interface mas tudo aqui tudo vai ser baseado o mundo hoje em dia mesmo tá então vai ficar bem legal isso aqui e claro você também vai poder pesquisar um Filme A quero pesquisar um filme você pesquisa ali e vai cair aqui todas suas buscas aqui no filme que ele encontrou e claro tanto aqui quanto a home ali na página inicial você pode clicar em cima de um filme e a gente vai ó acessar os detalhes desse filme aí vai mostrar aqui qual que é a tambineio do filme para mostrar qual que é

aqui é o número né votação dele para mostrar também o nome as estrelinhas qual que são as categorias toda a descrição desse cara Aqui e também a gente vai poder clicar aqui ó e salvar o filme na sua lista Então você vai ter uma lista dos filmes que você quer guardar para poder assistir dentro ali na sua lista e isso sim a gente também vai persistir ou seja vai salvar ele no celular do usuário o cara pode fechar o aplicativo desligar o celular ligar quando ele Abrir o aplicativo vai tá salvo ali os filmes ali

que ele salvou Então vai saber legal a não ser que ele internet o filme ali Né eu vai ficar bem completo e também a gente colocou esse link aqui e a gente vai receber o Eric a distribuidora né colocou ali da página inicial desse filme são colocar aquele cara também vai abrir o navegador ali dentro do aplicativo abrindo aí a página desse filme Se tiver tá então faz que é bem completo são bastante delas aqui que a gente vai desenvolver um projeto cara bem completo mesmo a gente pode aplicar muita coisa aqui é importante ao

longo Né que a gente vai desenvolvendo esse projeto aqui tá então por exemplo a gente vai trabalhar com navegações é algo importantíssimo a gente saber quem é saber colocar esses tipos de navegações porque não é um tipo só a gente vai ter o tipo de dólar esse tipo de hambúrguer Zinho né Aqui você clica abre o hambúrguer Zinho aqui com as telas que você quer então esse é um tipo não é chamado drawer Navigator e também a gente vai conhecer o tipo steck que é Basicamente esse tipo aqui quando a pesquisei algo cliquei ele Sobe

ali e mostra empilha né que a gente fala abre uma na frente EA tela que você quer abrir por exemplo aqui sua busca ou quando você clicar no filme vai abrir aqui na esse formato né os detalhes do filme também então muito e além de persistir usados aqui também então a gente vai aprender bastante coisa projeto está bem completo e fica tranquilo e tudo isso aqui a gente vai Fazer passo a passo explicando e você vai aprender pode ter certeza tá e tudo isso a gente vai consumir de uma a p i ou seja eles

vão disponibilizar ali todos os acessos dos filmes todas as partes dos filmes para a gente poder consumir e utilizar aqui dentro do aplicativo construir dessa maneira que com fontes reais né então só que não vai ser algo que eu vou inventar a gente vai buscar sempre dá para ir de a pé aí vai trazer os filmes que estão em cartazes Filmes são populares que são mais votados os detalhes deles qual que é a votação qual que é que a categoria tão tudo isso a gente vai ter acesso e a gente pode consumir dentro do nosso

projeto aqui tá Então esse link aqui vocês vão ter aí abaixo da para vocês acessarem esse link vai ter acesso a toda a nossa interface aqui igual eu tô mostrando aqui para vocês estão vocês vão ter acesso eu também deixei um real Pardinho tá que a parte onde já gente Vai ver que a api onde a gente vai consumir né pegar esses detalhes dos filmes o show da paleta de cor que a gente tem que a gente vai utilizar eu só deixei aqui para vocês para vocês terem entender tá então maravilha agora que a gente

conheceu aqui o nosso Twitch Prime Bora entender as motivações de como utilizar o iett na time porque utilizar esse cara aí para a gente começar a colocar a mão na massa desenvolver esse nosso projeto Aí começar a criar ele Então vamos lá então vamos lá a gente vai utilizar aqui dentro de todo o nosso workshop ou iett ele é basicamente uma biblioteca lá criada pelo time do Facebook para desenvolvimento de aplicativos para Android e para IOS e por baixo dos panos ali a gente vai utilizar o Java script como linguagem de programação para desenvolver os

nossos aplicativos e a gente vai então conseguir com o único código apenas com JavaScript desenvolver tanto para Android quanto para aí o essa com o único código e sim a gente consegue colocar dentro da Google Play da Apple Store sem problema nenhum mas aí se você está se perguntando então a Mateus eu vou criar um código único código e esse é igual e se eu quiser criar uma interface um pouco diferente ali tratando para iOS se tratando para Android sem um pouco diferente eu posso Com certeza você não precisa ficar Refém de eu criar um

único código e ele vai Ter que rodar igual nas duas plataformas você pode criar as diferenças também sem problema nenhum então a gente fica tranquilo e tudo isso nativo de forma ali que a gente consegue acessar qualquer recurso Nativa câmera que ela acertar o barômetro que era acessar mapas geolocalização quero acessar todos os sensores a gente pode Sem problema nenhum com react Native para desenvolver todos os nossos projetos aí e a outra coisa importante é porque o iate Neide Né a gente poderia falar que várias coisas boas várias coisas ruins ou comparar com outras bibliotecas

ou fremons máscara não existe melhor linguagem isso eu vejo bastante gente perguntando o buscando isso então não existe esse negócio de melhor frame melhor linguagem existe aquele que se encaixa melhor com aquele tipo de projeto que você quer desenvolver então a língua eu comprei marcou uma biblioteca como minha frente ele é uma Ferramenta que vai te ajudar a desenvolver a resolver aquele problema então programador e algo ou escreve Korn e sim ele vai buscar soluções a resolver aquele problema entregar uma solução seja Sei lá o aplicativo de Finanças o aplicativo que é uma loja virtual

e-comerce um aplicativo de filmes então aí a mulher que a gente me atende aí é uma biblioteca que ele então consolar aplicativo para Android e para isso o s show de bola ele me atende para esses Esses projetos que eu quero construir maravilha então aí a gente vai agora o iett Nike Miler ele é uma biblioteca um frame Eu que sei lá para construir jogos não aí ele já não entra aqui entendeu então não existe esse negócio de melhor ou pior mas eu separei algumas alguns pontos que é importante Quando você vai escolher também uma

biblioteca ou um creme para desenvolver os seus projetos a primeira coisa é comunidade muito grande e ativa né então por baixo dos Panos aqui a gente tem uma comunidade muito grande ou seja você está desenvolvendo um projeto E aí o tema ou é que é procurar um fórum para trocar uma ideia sobre alguma solução que você quer desenvolver cara provavelmente alguém já passou por esse problema que você está tendo e tem vários comunidades vários fóruns aí que podem te ajudar e que vão ter a solução ou que vão ter pessoas que podem te ajudar Ou

você ajudar essas pessoas também que algo Cara sensacional compartilhar o seu conhecimento também e claro além de toda a comunidade dormir aqui neste o que eu tô falando em si a gente tem por baixo ali ou já biscuit né que é uma linguagem cara que tem uma das maiores comunidades na internet então tem muita coisa muita coisa produzida já com já descritos que vai te ajudar se você cair no problema ou muitas solução né então tanto mulher aqui neste quanto a linguagem que tá ali por baixo dos panos é bem robusta tá e a Segunda

coisa é um mercado superaquecido eu não adianta a gente trabalhar com internet não tem mercado né e o iett neste o cara cada vez mais vagas estão mercado da superaquecido para trabalhar com aplicativos tanto aqui no Brasil quanto fora né desde vagas de mais de 2.000 a mais de 10 mil também tanto trabalho remota é a parte presencial muito aquecido a parte de desenvolvimento convier JS react Native que a Biblioteca que a gente vai Utilizar aqui tá e o terceiro. Então é a velocidade de desenvolvimento e menos custos né porque cunhagem Neide como você prestou

atenção a gente desenvolve então para Android e para ir Oeste com o único código eu consigo desenvolver um projeto completo colocar na Google Play na Apple Store sem problema nenhum Inativo até acesso a todos os recursos agora se eu tivesse que criar um aplicativo E aí eu quero então devolver para Android nativo só para Android Prender costura em por exemplo precisaria aprender uma linguagem de programação diferente do Minato da parte ali do Android para desenvolver para Android e a quero para Oeste agora agora eu precisava então entender toda a linguagem de programação que a gente

utiliza lá para aí o s desenvolver inativo para aí O S E aí colocar na Apple Store então é muito mais tempo e tempo ali vai ser dinheiro então a gente tem muito mais curto se você tem que Dominar todas as a frase vou ver os seus projetos somos todos diferentes né E aí colocar nas duas plataformas então a gente perde muito tempo e também muito dinheiro né que cometi net pra gente consegue ter toda a performance todo aplicativo nativo ali e devolver para as duas plataformas utilizando uma linguagem robusta como javscript Tumblr tá a

gente finalizar aqui a parte do heartnet antes da gente entrar ali na parte de configuração né como eu falei a Gente vai configurar tudo seu ambiente a gente começar a desenvolver e criar os nossos projetos primeiro eu coloquei algumas empresas que utilizam aqui apenas algumas empresas que utilizam o react Native dentro dos seus aplicativos tá então como o Facebook o Instagram da Walmart o Skype tem a terra do Ali Uber eats e tem o discord' Pinterest e entre outros também que utilizam né eu coloquei só algumas aqui que utilizam ali o iett Native dentro dos

seus Aplicativos dentro dos seus produtos e para desenvolver aqui dentro do workshop a gente vai desenvolver com o resto tá então a gente vai configurar o nosso ambiente com o espo e antes eu responderei antes de eu explicar o que que é o é tipo você já trabalha com minha chinês eu já criou está começando a aprender você sabe que tem duas maneiras para a gente criar tem um Expo e tem um like neste vicia like é basicamente completo ali né ah Mateus Por Quê que você vai utilizar o ex foi porque que a gente

não utilizam Cia lá e como eu falei o Edson ele é basicamente um facilitador tá então é que ele é um frame por GetNet você pesquisar basicamente ele já traz ali um leque de ferramentas de configuração para você entrar direto no desenvolvimento se preocupar com o desenvolvimento e não com a configuração do ambiente tá E aqui como a gente vai desenvolver um projeto EA gente tem uma hora limitada a gente Tem também Dias limitados que o nosso Shop São cinco dias então a gente não vai perder tempo com configuração e sim a gente vai entrar

direto no Excel que basicamente a gente faz tudo né e desenvolve com mulher que jeito tá então um esse olhar um frame aquele que vai trazer bastante coisa junto e a gente vai ver isso a hora que eu tiver começando a criar o projeto a gente vai ver se com detalhes e fica tranquilo e com ele como a gente já tentou desse Leque a gente vai ter mais produtividade e facilidade de desenvolvimento que eu não vou usar ficar configurando toda SDK do Android para conseguir devolver ali e criar um emulador do Android e com essa

o basicamente ele tem todo esse leque já pronto a gente pode utilizar o emulador ou até mais fácil rodar direto no seu celular seja Android ou seja um iPhone por exemplo Sem problema nenhum eu vou mostrar para vocês como que a gente vai fazer esses dois caras né tanto mesmo a Dor quando rodar direto no seu celular tá e o terceiro. Ali é as funcionalidades pré-instaladas Então não preciso ficar me preocupando com configuração possa trabalhar com câmera posso trabalhar com barômetro com sensor com geolocalização com a parte de consumir uma Face externa tudo isso a

gente pode utilizar com é se fossem problema nenhum de forma Nativa Tumblr tá E aí a gente começar agora colocar a mão na massa qual que é os requisitos Então que eu preciso a gente começar a devolver o que eu preciso estar lá então Mateus basicamente teu node.js instalado a gente vai instalar isso aqui é tranquilo e também instalar o sp1 é nada demais e aí você pode rodar direto no seu celular Android ou iPhone sem problema nenhum projeto que a gente vai criar aqui junto tá aí se você quiser a mais aí um pouquinho

a mais a meu PC suporta eu quero criar um emulador aqui eu posso também vou mostrar para vocês Como vocês podem criar um emulador ao invés de rodar direto no seu celular então bora lá para minha tela do computador para gente conversar então vamos lá configurar o nosso ambiente agora aqui para gente colocar a mão na massa começar a desenvolver Então a primeira coisa é ter o node.js instalado aí na sua máquina então entra aqui no js.org mas também vou deixar aqui abaixo para vocês então só clicar Nessa versão LTS tá então sempre baixa a

versão LTS Que a versão cá estável ali então clicou ele vai começar a baixar e após aí ele baixar aqui é só você abrir o instalador da next next E aí instalar Não tem segredo nenhum para instalar ele aqui tá da hora que você finalizou instalação dele primeira coisa a gente precisa Então abrir o CMD para conferir se ele foi instalado vamos lá clicar aqui Vamos pesquisar então CMD e vamos abrir o CMD maravilha com cm de aberta só você digitar node espaço traço ver deixa eu Dar um zoom aqui para vocês digitar não de

espaço traço ver dá um entra aí e ele vai devolver a versão tá então ele vai devolver alguma versão que é provavelmente a versão que você instalou devolvendo essa versão quer dizer que o node.js tá instalado então agora a gente pode instalar o ex foi começar a criar esses nossos projetos já estão onimis a vamos fechar aqui vamos voltar aqui para o nosso é tipo também vai estar aqui a documentação para vocês o link né mas é Ex. Deve E aí vem aqui na parte de get started vamos lá e aí ele tem aqui o

comandinho para a gente poder começar instalar e na nossa máquina e criar um projeto também então a gente já tem o node.js podemos começar então só copiar aqui tá vamos voltar no nosso cm de deixa eu dar um CL essa que só para mim pa E aí então posso colar mas é ele pênis ao passo traço traço Globo vai instalar e globalmente na nossa máquina para Qualquer local a gente conseguir abrir o CMD o projeto com o Edson né que a linha de comando ali que a gente tá instalando que vai poder criar um projeto

gerar um mild E por aí vai então eu posso instalar ligo novamente vamos instalar ele aqui dá uma entra aqui e é só aguardar Maravilha instalado então deixou aumentar um pouquinho então já foi instalado você quiser conferir é só você digitar também Epson traz troço version aqui ele vai te mostrar a versão Dos ia lá vamos lá o monstro a versão aí até mostrou aqui que instalou e no nosso verso ó mostrou aqui que a versão agora tá instalar tá então agora a gente já está apto a criar já os nossos projetos um Expo e

o comando é bem simples tá então deixa eu dar um CLS para você criar um aplicativo com eco né como heartnet é só digitar Epson espaço emitir espaço o nome do aplicativo que você quer tô aqui lembrando ele vai criar Aonde você está tá então onde você Tá não sei me ver ele vai criar a pasta de seu ep então no meu caso eu tô dentro de usar dentro de Mateus Se eu Desce aqui meu web por exemplo ele iria criar apa o aplicativo todos os meus códigos a de dentro do Mateus também teria Mateus

e o nome que você daqui eu tenho que cuidar aí Cuidado para não criar dentro de pastas com assentos com a caracteres especiais e o seu projeto também tá então cuidado com esses detalhes aqui então aí você pode criar na pasta que Você quiser aí eu gosto essa parte aqui do meu outro HD então eu tenho um HD aqui no de cd-rom em aqui nem teve cms aqui eu tenho um CD em Sider eu coloquei aqui criar uma página para mim entregar os projetos aqui entendeu aqui dentro dessa pasta aqui eu quero criar meu projeto

então Edson e nem igual falei para vocês e aí o nome do é então vou chamar aqui o rap de filmes Beleza então vamos criar que o nosso ep filmes vamos lá maravilha ele pede aqui algumas Opções que a gente pode criar e a primeira opção que é Blank aqui Minimal é ou seja basicamente ele tem só a casquinha ali do nosso Apple seja sem nada que não é necessário para rodar Exception ele Emblem que ele em branco ali basicamente Então essa opção a gente só dá um jeito aqui e ele vai Ah tá a

criança passa a criar tudo que é necessário para a gente começar envolver é um criar o nosso projeto aí agora também é só esperar então Maravilha Criou aqui para mim já falou que ele criou aqui a pastinha filmes seu Navegar aqui ó até a pasta do ensaio que eu tô tá dentro dele aqui Neide missae do meu caso né então aqui dentro ele criou filmes é o seu abre aqui filme está que todo o código que ele já era para gente começar a desenvolver então o nosso aplicativo já tá E aí para gente rodar já

esse projeto aqui basicamente é só a gente vem aqui ó tamo dentro de ensaio e a gente criou com o nome de filmes Então Eu preciso agora dentro do cm de acessar pasta que eu criei Ele criou aqui cê de filmes então a por dentro agora da pastinha aqui de filmes são deixa eu dar um CLS pode ver que agora tô dentro da pasta aqui vertnet fica eu entrei ensaio e filmes então maravilha você tem que acessar dentro da pasta do projeto com o nome que você criou também então acessei aqui dentro agora é só

eu digitar Expo espaço estar bom então aí ele vai subir o nosso projeto né o dá esse nosso Projeto aqui é só a gente aguardar deixou só puxar que ele abriu aqui no outro navegador no outro então já tá rodando aqui perfeito maravilhoso agora a gente já poderia começar a desenvolver Então antes disso eu vou ensinar para vocês como que a gente consegue configurar o Android Studio e criar um emulador caso você queira tá então essa parte do Android Studio é opcional se a meu PC ele é meio fraco eu quero rodar direto no meu

celular Sei lá iPhone ou Android Então não precisa baixar o Android Studio eu vou mostrar para vocês após eu fazer aqui os passos o Android Studio como é que a gente fora direto no celular também tá Fica tranquilo então a gente deixa sempre esse cm de rodando aqui e ele é o servidor do nosso aplicativo mimi sem ele aqui então para criar aqui um emulador a gente precisa do Android Studio Tá eu vou deixar o link também abaixo mas é só vim aqui na no site do Android Studio clica aqui na Primeira opção vem aqui

embaixo concorda aqui BA o estúdio só da next next também fazer os passos de instalação também não tem nenhum segredo aqui ele demora um pouquinho é meio pesado sim depois que você instalou vamos lá deixa eu dar um desse vamos lá vou abrir aqui o Android Studio vamos lá então eu tô aqui na cara inicial do Android Studio Então a primeira coisa a gente criar uma emulador é conferir o que que ele tem instalado dentro da nossa SDK do Android Então a gente pode vir aqui na confibra vem aqui na setinha SDK Manager aqui dentro

a gente tem algumas abinhas tá a gente tem a parte do SDK platform SDK Tools e o update site tá primeiro a gente tá então na SDK platform tá aqui basicamente Qual que é o Android que você quer instalar que a gente pode criar uma emulador tá então geralmente ele vem já com o último disponível instalado E aí você pode estar o que você quiser aqui do lado no Status ele vai mostrar Então qual que tá instalado Ok esse aqui tá instalado esse não tá instalado e qual que eu recomendo você está instalado eu gosto

de utilizar esse Android 10 pontos é que aqui tá então se ele não tiver aqui se tiver aqui do lado no status como não instalado você marca o check Box dele o Marco checkbox e aí vem aqui embaixo então apply E aí você confirma e começa a baixar esse Android 10.0 que a gente vai utilizar para criar um emulador tá Então baixou ele aí maravilha vai aparecer aqui ou como um acidente porque eu já tenho instalado ele tá pedindo atualização ou já como instalado igual esse cara aqui tá então apareceu aí maravilha vamos para o

próximo a gente vem na minha aqui ó essa de cacho tá aqui dentro a gente precisa ter algumas coisas instaladas para você conferir primeiro Oeste Cap YouTube então você pode ver que ele tem que tá instalado se o senhor tiver com status e não Instalado você me marca Ele come check Box tá no meu caso já tava update então eu já tenho instalado não vou marcar se você não tiver não instalado marca ele aí tá depois dele a gente também tem conferir se o Android Emulator tá instalado o meu também tem aqui amor desde então

também já tenho instalado se você já tiver instalado não precisa marcar o instalado Marco checkbox também que a gente precisa tá Depois a gente precisa do SDK platform-tools da é outra Coisa que você precisa também tem instalado então no meu caso já tem para mim já tá mostrando update o seu tiver ali com o status de não instalado marca também depois disso a gente marca esse Google Play Services tá é outra coisa que a gente precisa ter instalado então marque o checkbox no seu não estiver ao meu tá até mostrando ó tá instalado Então se

o senhor não tiver Marco check box aí e para finalizar a gente precisa desse cara aqui ó Intel x86 Simulator Acelerator tá isso aqui é mais suas processadores que são Intel tá então se você tem um processador da Intel como eu olha só para mim eu marquei instalei Então para mim tá aqui ó eu tentei tá então update que ele que eu já tenho só tem uma atualização nem vou marcar esses caras aqui e se eu tiver como não instalado então marca para instalar também marcou que você precisa só daqui um apply e show de

bola maravilha vai demorar um pouquinho ele vai baixar lá Nós podemos fechar aqui show depois disso então a gente vem de novo aqui ó na setinha Primeira opção avd Manager Vamos abrir ela aqui que aqui que a gente queria os amoladores tá então deixa eu abrir aqui um pouquinho para cima se você não tem nenhum emulador para aumente a primeira vez que você instalou ou ele vai estar com o botãozinho aqui no meio tá ou ele vai ter algum emulador criado que ele vem por padrão Beleza então no meu caso eu Tenho dois aqui mas

eu vou criar um do zero junto com vocês estão ó vem aqui no trade virtual The Voice ou às vezes o seu botãozinho tá no meio da tela como eu falei e aqui a gente escolhe qual que é o celular que você quer criar como emulador tá eu gosto e eu vou utilizar aqui dentro do workshop o Pixel 3 tão Pixel 3 padrão aqui ele tem aqui ó Play Store tá eu tenho que ter o ícone da Play Store Então fique seu três o ícone da Play Store vou dar uma timesheet que Maravilha olha aqui

qual que é o sistema operacional que você quer instalar nesse nesse dispositivo e aqui a gente vai utilizar aquele Android 10 que eu falei isso que é o que né então a gente vai vir aqui ó x86 parece um pouquinho mais leve tá e a gente vai vir aqui ó vamos lá deixa eu achar aqui ó tô aqui no que a gente vai escolher essa opção aqui que 29 a penilevel tá E aqui do lado que é importantíssimo é ter aqui ó Android 10.0 aí tem um parênteses Google Play Então esse sistema precisa ter Google

Play tá então se o senhor tiver aqui download aqui do lado do nome Zinho do Android que é só você clicar no ícone ali igual tem alguns aqui que eu não tenho baixado então se eu tiver aqui do lado desse que eu tô falando download só você clicar em download ele vai baixar esses tema em específico E aí você seleciona ele Ó que 29 x86 underline 64 Android 10 Google Play tá então marquei ele vou dar um next aqui o contratar um Nome aqui ó um Sider beleza para eu saber que é isso que eu

queria agora o pênis aqui para criar ó já criou Então para mim tá aqui ó Pixel 3 A 29 ensaio aqui beleza então vou vir aqui né e vou dar um pulo aí aqui vamos esperar e rodar agora e vai demorar um pouquinho a primeira vez que eu tô rodando ele primeira vez que eu acabei de chegar com vocês Tá abrindo aí deixa de carregar a primeira vez que você abre né o emulador novo demora um pouquinho mesmo normal Então vamos lá pesar deixa ele carregar tudo aqui Maravilha já tá operacional para mim então agora

que eu já tenho um emulador que tá aberto já meu eu moro a gente a pode clicar para rodar o nosso aplicativo Então deixa eu deixar ele aqui para o ladinho e a câmera vai ficar em cima posso fechar aqui mas por enquanto não tem problema na câmera ficar em cima tá então deixa ele aqui ó aqui a gente tem o nosso servidor rodando lembra que abriu sozinho a hora Que a gente for dou aquele expose tarde a hora que a gente for dou aqui o nosso ex foi start e abriu aqui o QR Code

mostrou e ele abriu essa tela aqui no navegador Então agora que a gente quer rodar direto do meu emulador eu só venho aqui ó e tu hum hum Android The Voice/Simulator então eu clico aqui ó apareceu aqui do lado e ele vai tá falando que tá abrindo aqui no meu Pixel 3 é só a gente aguardar eu não preciso fazer mais nada eu só esperar ele vai Rodar o aplicativo para mim ele tem ali o aplicativo padrão né e ele criou ele só vai rodar esse aplicativo iniciar o que ele criou a gente nem fez

nada ainda vamos parar perfeito já abriu aqui para mim Maravilha vou clicar aqui no bote Beleza vou clicar aqui no xizinho e maravilha a gente tem Um textinho aqui que é o texto padrão né gente queria um aplicativo nem mexeu em nada em código nem nada então essa é a carga Inicial quando a gente cria um aplicativo aí e Roda ele vai emulador tá então tá aqui a nossa cara Inicial Então vou trazer aqui para o lado e vamos lá se você quer rodar o seu aplicativo dentro do seu celular físico mesmo seu celular vai

na loja lá da Google Play você tá com Android ou Apple Store cê tá com Oeste e baixa lá o aplicativo do Expo então só pesquisar lá Expo E aí vai aparecer um expogoal lá E aí o ícone para vocês baixa esse aplicativo aí e a hora que você baixar esse aplicativo vamos lá Você tá com o iPhone é só você abrir a câmera do seu celular e apontar para o seu QR Code Então a hora que tem aí no seu navegador tem um QR Code volta e o meu aqui é uma ponta para o

seu QR Code E aí ele vai falar que quer abrir alguma coisa você clica e ele vai abrir o seu aplicativo do Edson rodando igual preciso para o meu aqui ou vai rodar e vai vou dar o seu projeto aí dentro do seu celular tá isso você tá com o Android é a mesma coisa baixou o Aplicativo lá na Google Play Doh Expo tá E aí você pode também Abrir a câmera seu celular é um dos mais novos se abre a câmera a ponta por QR Code aqui ele também abre já lá fala que quer

abrir com o Edson você clica ali na notificação e ele vai abrir rodar dentro do seu celular volta rodando para mim tá ou também outra opção que vocês têm ó ele tem aqui Um Connection deixa o seu bônus um Eita foi muito junto ai que ele tem um RL Zinha eles podem abrir o Safari por exemplo lá no iPhone e digitar o que tá aparecendo no seu aí tá digita lá no seu Safari e você entra nessa URL ele vai abrir com o ex você o aplicativo lembrando tá tanto no Android como no iOS para

você fazer essas coisas aí precisa estar na mesma rede que o seu projeto tá rodando aqui então preciso estar na mesma wi-fi tá então feito isso as duas maneiras que a gente pode então vou dar o nosso projeto aqui tanto com Android quando com aí o Essa é bem Tranquilo é não precisa configurar nada disso de emulador só você apontar por QR Code vai abrir aqui e a hora que você tá no seu emulador aqui já está rodando perfeitamente tá então agora bora começar a desenvolver lá o nosso projeto aqui como que a gente começa

então vamos entender como é que funciona o iett Neide tá para desenvolver vou utilizar aqui o editor de código visual Studio code né então pra gente desenvolver aqui e programar e vou utilizar o visual Studio com isso mas só você baixar Se você não utiliza né e eu gosto porque é bem leve bem Tranquilo então vamos lá deixa eu abrir o meu aqui maravilha deixa eu abrir aqui bom então agora que a gente precisa abrir é a pasta do nosso projeto que a gente criou Então vou querer aqui dentro de filmes tem todo o código

que ele gerou aqui para mim eu preciso abrir ele dentro do visual Studio code tá então é só vim só eu ou Open folder né abrir aqui a pasta que eu Tô e eu vou abrir aqui o meu filme né que é um projeto que eu tenho aqui selecionar pasta vou falar que eu confio no autor desse código e Maravilha que a gente tem todas as estruturas que a gente tinha aqui ó dentro da nossa filmes posso fechar agora aqui dentro do nosso visual Studio code agora a gente pode começar colocar a mão na massa

de verdade e desenvolver então ó meu cm de tem que ficar sempre rodando tá posso Minimizar meu emulador tá aqui já eu vou Tirar minha cara da frente aqui para não atrapalhar vocês se aumentar até aqui o meu irmão a dor não é para ficar grande para vocês aí também ver Maravilha ficou grandão show de bola Então vamos lá para a gente começar a entender né a gente tá rodando projeto aqui ele apareceu esse texto aqui tá onde vem isso aí como é que a gente cria esse nosso projeto como jardineiro em algumas estruturas aqui

criado tá primeira coisa a gente veio aqui então o app. JS esse arquivinho Aqui dentro quando a gente roda o nosso aplicativo rodamos o nosso aplicativo ele vai chamar Esse é. JS tem o nosso primeiro componente a ser utilizado na aplicação então abriu meu aplicativo primeiro componente ele vai renderizar em tela seja montar na tela aqui para gente ver é esse é. JS então você pode ver aqui dentro dele aqui a gente tem alguns códigos e eu tenho um texto aqui ó Open up up. JS é o mesmo tempo que a gente tem aqui dentro

que essa tag de Técnica aqui ó eu vou apagar só o textinho dentro da tag detecta aqui ó vou colocar aqui ó em Sider 4.0 vou colocar isso aí de quatro só eu vou dar um contra o Oeste ou você pode vir né e clicar aqui save ele salvou o arquivo e automaticamente ó já mudou no meu emulador isso você tá rodando com o seu celular também já vai ter mudado no seu celular aí e a Mateus eu quero forçar O Reload que a Como recarregar como é que eu faço você pode vir no seu

emulador de Cá duas vezes não R do seu teclado fiquei duas vezes não erre do meu teclado ele vai recarregar o meu rappi ou pode dar um control-m e tem aqui ó Reloaded E aí se você tá no seu celular físico né no Android nós como é que faz para abrir essa opção do control-m se você tá com o celular físico tá se você está com seu celular físico mesmo irmãos dá uma chacoalhadinha nele que basicamente quando você chacoalhar e vai abrir essa opção e você pode clicar em Veloso isso só mostrando como é que

a gente pode tá então vamos lá vou apagar tudo esse nosso Apps onde ela essa vamos Apagar tudo isso aqui a gente entender como é que funciona esse código como é que a gente cria um componente com York Negro para renderizar aqui né nada melhor que a gente pagar tudo entender tudo do zero Então a primeira coisa que a gente precisa é criar um componente tá então eu vou importar aqui o Rick roll'd Rick pra gente vai me importar Biblioteca doriete tá cuidado só R aqui é a beleza e também vamos importar aqui alguns componentes

que ele já vem para a criado como a gente tinha aqui do texto é então o iett Neide a gente {Aqui foram E aí aqui mesmo beleza dentro das chaves que eu posso importar de algumas alguns componentes pré-criados como por exemplo a viu, o teste Então vai cortar esses dois cuidado o v maiúsculo T maiúsculo então a gente importou esses dois caras e Agora vamos criar um componente então Faixa roxa mais componente de rap né que é o nosso primeiro componente que é o que é renderizado quando o projeto roda abre e fecha aqui abre

e fecha o Chaves e aqui dentro vou ter um retorno tá esse retorno aqui dentro desse o Victor dentro dos parentes dele aqui a gente vai ter um jsx quem se jsx basicamente é Nossa tela Nossa interface a gente vai ver a nossa interface aqui ou seja as tags da nossa interface que a gente vai Montar tá então para a gente conseguir colocar as tags aqui e ela ser reconhecida eu preciso aqui do importe do riacho aqui em cima por isso que a gente importa ele tá então aqui dentro a gente importou esse tal de

cara viu e essa viu a gente Abre ela aqui como uma tag ó eu abro ela e fecho ela aqui como uma tag e ela basicamente é como se fosse um espaço na sua tela Pensa como uma caixinha ela é um espaço então se eu salvar ele vai dar um erro aqui e que Ele deu olha só ele tá falando aqui que a gente criou um componente ele tá fazendo aqui tá esperando esse componente seja exportado tá falando aqui que eu esqueci de exportar se nas componente então a gente criou um componente mas para que

outro arquivo consiga importar ele e ter acesso a ele a gente precisa deixar isso acontecer então eu preciso vir aqui embaixo falar EcoSport the full ap então tô deixando né tô suportando esse nosso componente Aqui vou salvar de novo a gente vai recarregar aqui vamos ver ó ele tá em branco Até logo Zinho aqui não tá em branco se dentro dessa nossa caixinha que essa viu eu também colocar mais um técnica aqui chamado sujeito programador e eu salvar agora a gente colocou um e olha lá que vai acontecer Ele tá aqui em cima da nossa

status bar porque a gente não tem mais nenhuma manipulação da status bar então texto tá aqui em cima Então a gente tem aqui Um componente Chamado é a gente pode construir a nossa interface a gente tem a nossa viu que é basicamente um espaço a Nina Nossa interface e também o touch é um texto né eu não posso dentro do Iate Lady colocar um texto fora da tec tec eu não posso vir aqui colocar algum texto aqui sem estar dentro da tag de teste igual a gente fez só se eu salvar ele vai dar erro

pode passar lá para você renderizar um texto precisa tá dentro de um componente de teste então Maravilha vou Tirar aqui deixa só o nosso teste e agora também a gente pode dar estilos para essa nossa interface É porque ela tá até por baixo da minha status bar dentro da minha viu eu quero passar um estilo apenas para ela então eu posso vir aqui fala ó vou passar um Style igual abre e fecha o Chaves e vou abrir mais uma Chaves aqui dentro e aqui dentro aqui é fácil de estilos em linha Então olha que tá

grudado aqui em cima eu quero descer ele para baixo eu quero Dar uma margem top ou seja uma margem em cima Então posso vir aqui para ele e eu dar uma margem top a dois pontos eu quero passar quanto eu quero passar a sandes pasta mesmo ou não em ter que maravilha então desceu aqui sem de espaçamento aqui de cima do Topo até para baixo então perfeito e se eu quiser colocar um estilo aqui no meu texto quero deixar em quero deixar de outra cor posso Com certeza você pode vir na sua tag de teste

passar um Style Abro mais uma chave aqui dentro e aqui dentro eu posso passar o tipo que eu quiser por exemplar quero passar uma color: Abra o "simples e qual que é a sua cor a quero vermelho então #ff0000 ou salvar e olha ele vermelho aqui eu deixar depois aqui, fonte ó eu posso passar o tamanho então vou deixar o tamanho maior tem um font-size cuidado que o Essa é junto o músculo: quero por tamanho de 30 vou salvar e olha aqui tá aqui o nosso texto Grêmio tá Então essa é uma maneira que a

gente poderia estilizar os nossos projetos Aqui as nossas interfaces mas eu não acho interessante porque a gente coloca em linha eu não poderia reaproveitar esses nossos estilos E aí tem uma outra maneira que utilizando stylesheet e ao invés de criar em minha e o criar um grupo de estilo mas a gente vai um pouquinho mais além e utilizar o Style de componentes pras envolver todo esse nosso projeto aqui a gente vai Aproveitar bastante componente a gente teria um estilo um pouquinho mais completo Tumblr tá mínimos aqui vamos parar de rodar esse nosso projeto algum erro

que tinha dado antes então para parar de rodar vou dar um contra você monte de controles e aqui ó tá parando de rodar se eu quero parar de jogar vou colocar um SD sim né então dá uns LS já parou de rodar já apareceu aqui parou de rodar posso fechar aqui do meu emulador também maravilha agora que a gente parou De ir e eu posso vir aqui instalar esse estado de componentes que a outra maneira de utilização que a gente vai usar Então é só a gente digitar aqui um Expo install staude traço componentes Beleza

então basicamente dá um zoom aqui para vocês espaços ao passo estados componentes para gente estar lá essa biblioteca dentro do nosso projeto A então eu tô dentro dele então vamos aguardar Maravilha foi instalado já deixa eu tirar um pouquinho dos um aqui Então já instalou e agora que já instalou a gente também vai ter que trabalhar com navegação né eu vou ter mais uma página e não só um componente a gente vai ter que ter páginas mesmo navegação de páginas E para isso a gente também vai utilizar uma biblioteca deixa eu trazer ela aqui maravilha

a gente vai utilizar o react-navigation para trabalhar com navegações então vamo em redox se a gente descer um pouquinho a gente tem um comando para instalar o Nosso projeto vou copiar aqui a beleza vamos lá então deixa eu dar um choque para aparecer pra vocês também tô limpando deixa eu dar um CLS aqui só para limpar aqui então Edson install passa o comando né@harriet Trace navigation Company cheguei aí e aí vamos estar lá também no nosso projeto já beleza instalado então agora vamos voltar aqui que é mais que eu preciso como estou com o Edson

né então ele tem um comando aqui que eu preciso já Instalar mais algumas bibliotecas que precisa para poder rodar então vou copiar aqui vamos voltar vou dar um controle aqui né mas basicamente é depois Passos tal aí aqui traz um leite me traz screens e me estresso Native to save trás artrose countries tá então vou instalar essas duas essas duas bibliotecas aí ele tá pedindo vou aguardar Beleza se a gente vem aqui embaixo descer mais um pouquinho aqui seria se eu tivesse consiga lá mas como A gente tá com eco já instalamos Descendo um pouquinho

mais a gente acabou aqui embaixo hein hello um beijo e a gente vai ter o tipo de navegação em pilha que é o tipo unitec aquele que quando você clica por exemplo homem-aranha aqui ele vai abrir essa tela né ele vai abrir uma pilha em cima como a gente falou que é o tipo de Ester então eu também quero usar esse tipo então eu vou copiar que o comando que ele passa né o piac vamos aqui no nosso Cm de novo do nosso ERP ou não expus espaço quintal espaço o nome né@bierstrasse navigation/Native traços técnica

Então vou dar uma inteira aqui para instalar também é o tipo que a gente quer utilizar Quando ele vai instalando aqui vamos voltar aqui no nosso projeto que é mais que eu preciso a gente precisa do tipo steck e também eu quero instalar o tipo de droga né que esse hamburguerzinho aqui que ele tem a nossa Tá então eu também quero instalar esse tipo de navegação para a gente poder utilizar então voltar lá já instalou aqui no cmd que eu tinha deixado rodando Beleza então esse aqui já foi agora se a gente descer um pouquinho

de baixo mas o show gente tem aqui mas para baixo navigators ó dá um zoom aqui dentro de Navigator se a gente tem que os técnica falar e tem um drawer é o que a gente quer então Ó esse é o dólar esse cara que a gente quer então aqui embaixo ele Tem os comandos né Deixa eu copiar aqui vamos lá é que o espaço install vou colar aqui agora nosso tipo de droga ou não entra aí para instalar no meu projeto beleza e mais que a gente quer vamos ver se precisa de mais alguma

coisa Ele fala também que além de instalar o dólar eu preciso dessas duas bibliotecas também para ter o dólar Então vou copiar aqui também como a gente está no é tipo perfeito vamos voltar aqui e vou Instalar essas duas né que eu Gero resolver e uniextract traço reanimei tá então vou dar um jeito aqui que maravilha agora que a gente falou os tipos de navegação que a gente vai ter para o nosso projeto a gente falou estar de componentes tem um formato que a gente vai desenvolver toda a interface a parte visual do nosso projeto

também então agora é só a gente começar a colocar a mão na massa Então bora lá primeira coisa se eu parei de rodar Instalei essas bibliotecas eu preciso rodar de novo então vou dar um Action espaço estar tão tô dentro da pasta do projeto né só dá aquele ex foi espaço start Rua dar de novo esse nosso projeto então ele vai abrir aqui o meu a minha o meu local rosto de novo com aquele nosso QR Code igual a gente viu lá no começo quando rodou Express tarde então vou aguardar apareceu o QR Code aqui

apareceu que já tá startando aqui então Posso rodar de novo estou no meu Emulador aberto vou clicar aqui ó hum Android On The Voice só aguardar vai começar aqui abrir deixa eu ver que o emulador vamos esperar Beleza já abrir aqui o nosso jeito programador em vermelho e bora lá vou abrir aqui o meu vs code de novo e para utilizar o estado dos componentes você eu falar uma extenção Zinha bem legal vi nessa opção aqui de extensões do seu visual Studio code e pesquisar que está eu disse esse cara aqui ó vs code deixou

aumentar aqui Vs cole de traço estava entre os componentes só clicar aqui no botão verde que vai tá aparecendo no seu Install e instalar que ele vai te ajudar dar umas cores aqui Power Highlight que a gente chama dentro do nosso código para ficar mais bonito para a gente entender de fato esse nosso código para ficar legal então instalar essa tensão Zinho podemos voltar aqui para o nosso código e bora começar Então a primeira coisa que a gente precisa ter é Configurar as navegações aqui desse nosso projeto a gente instalou tudo agora Precisamos configurar então

a gente aprendeu como criar um componente aqui eu posso criar uma viu que é um espaço eu posso criar um texto e agora a gente pode começar de fato o nosso projeto Então vamos criar a estrutura desse projeto aqui fora a gente pode clicar com o botão direito criar um New Folder vou chamar aqui de src a gente colocar todas as passas e códigos aqui Dentro a pasta src vou criar aqui também mil folder Tá vou chamar ele de peixes beleza dentro desse peixes ou clicar com o botão direito New owner vou chamar ele de

home por exemplo que vai ser a nossa página inicial dá um criar mais uma pastinha E agora temos Então src temos peixes dentro de peixes temos esse home dentro desse home vou criar um ensaio chamado ex. JS A então um arquivo chamado o inglês por JS dentro desse arquivo a gente vai criar um componente Parecido com esse aqui só que vai ser o componente responsável pela nossa tela aqui ó de um homem tá então vamos lá Import we are Running an Import abre e fecha aqui from ringtonead a gente vai importado o iett Netflix uma

vio é um espaço e um teste Beleza então vou criar o componente o ramo Então vai dar retor Vou colocar minha viu e em um teque vou até colocar tela home para vocês só pra aparecer aqui e EcoSport Gafou hoje está importando para outros arquivos conseguirem acessar esse nosso arquivo e a nossa tela de Roma Beleza então a gente normal é um arquivinho aqui e vai ser responsável por a gente criar mas a tela home mais para frente beleza e também vamos ver quem mais que a gente tem a gente vai ter aqui também a

nossa tela the movies quando abrisse drawer a gente vai ter a minha lista né que a tela não vi sequer os meus filmes aqui tá Então vamos criar esse cara aqui Também então aqui hora aqui de home dentro pastinha peixes ficar com o botão direito New Folder vou criar uma aqui chamada então movies beleza só temos peixes temos home e temos a pasta movies que eu acabei de criar dentro the movie só ficar botão direito em um Fábio index.py JS tá E aqui para gente agilizar vou criar aqui e vou copiar esse meu nome e

vou colar aqui dentro de luz é que por enquanto vai ser outro componente vai ser a tela de meus filmes Ou só mudar o nome né que esse cara que vai ser movies e eu vou colocar aqui tela meus filmes só para gente saber dentro do teste e vou mudar aqui embaixo EcoSport ó Clube vou salvar então agora a gente criou dois componentes aqui tem dois arquivos né nosso home e o movies perfeito Eles não estão sendo chamado a em um local agora então vamos configurar Nossa rota ou seja nossas navegações então primeira coisa dentro

do e com JS quero arquivo Que a gente fez aqui o sujeito programador em vermelho ele é um cara que é chamado entenderam componente a ser idealizada mas agora quem vai ter que ser renderizado aqui é a configuração de navegação porque ele tem que saber quem que ele vai realizar-se vai ser a home e vai ser meu filmes Então é ele que vai mostrar quem que eu quero renderizar na tela Então vamos configurar nossas navegações dentro aqui de src src New Folder vou chamar aqui de House tá dentro de royalties eu vou criar um New

chamado index.js e vou criar um outro MILF é chamado também Tech House. JS beleza e no index basicamente a gente tem dois tipos que é o do Uber e o está aqui que a gente falou então o dólar vamos configurar ele vamos lá dentro aqui do Health index vamos configurar Import Heat beleza Import abre e fecha aqui pro@react navigation drawer a gente Importou tipo de navegação do auer e aqui a gente tem um Creed drawer Navigator é o nosso tipo de droga uma importar que nossas duas páginas não importa como por exemplo./Beijos/acessamos home e Maravilha

Cuidado para não deixar vaca aqui no final tá E também quero importar o nosso movies ROM./Peixes/movies lembrando a como são componentes são páginas que você Renner e a gente sempre cria com a primeira Maiúscula home tem H maiúsculo movies em 1 m maiúsculo e aqui dentro do componente também ó sempre a primeira letra maiúscula beleza vamos lá importamos dois arquivos aqui dentro do royalties e do ex-prefeito então a gente importou hoje as duas páginas vou criar nossa navegação conte Rover vou chamar aqui igual trade jovem Navigator que a gente importou Beleza agora vou criar um

componente de navegação Fashion roxa Mario Alves Vitor é o que ele vai retornar para nossa tela e eu vou dar o EcoSport já que embaixo Só para não esquecer mais forte depois graus dentro aqui do nosso Hulk Qual que é o nosso tipo é o dólar então aqui a gente queria Nossa Tag Heuer. Navigator ele abre e fecha assim tá e dentro a gente tem as telas abro drawer. Screen O que é a nossa primeira screen ou seja qual que é a nossa primeira tela aqui a Gente passa propriedade nem como é que eu quero

chamar ela né Então a primeira por exemplo e qual que é o componente que eu quero realizar é qual que é o componente a gente já importou ele aqui ó então só passar o nome para ela maravilha aqui embaixo eu quero tem mais uma tela Então até dar um espaço aqui para ficar bem visível para vocês Jober. Screen acha que a tag já nele mesmo name esse próximo aqui ele vai ser o nosso Movies né então vou dar um name aqui de para ele the movies e o componente que a gente vai renderizar abro Chaves

aqui é o nosso mundo vez que a gente importou ó colocar ele aqui vou salvar vou dar um controle aqui beleza vou tirar os espaços aqui só para não ficar muito espaço alvakk de novo e agora que a gente já configurou o nosso royalties e o index Beleza a gente criou nosso drawer como é que eu chamo ele para ser renderizado Qual que é o nosso Componente que a gente falou que renderiza quando o aipim e não é web. JS então ele que a gente precisa mexer vamos dentro aqui do ponto j s a gente

tinha aqui o sujeito em vermelho vou apagar tudo isso aqui tirar aqui vou deixar essa vivo aqui sem nada só uma tag de viu e branco importar aqui forte Rio Negro Jesse render que a gente estalou lá junto com as navegações da onde você tá tirando isso Mateus dentro da documentação eles falam para você Importar isso aqui primeiro para ele trabalhar com gestos Ou seja aquele gesto que ele tende puxar para o lado aqui né para abrir esse valor aqui tá então importamos ele aqui na primeira linha e agora vou tirar essa Import aqui do

riacho Neide que ele não vai ter e vou importar aqui a roubar react-navigation/Nation um carinha chamado como navigation container ou Seja o container das nossas navegações e ele que vai ficar por volta de todo mundo da nossa aplicação e dentro desse container a gente coloca as nossas rotas as nossas rotas a gente não criou lá dentro da partir de volte a gente criou dentro de volta indo para a gente precisa importar dentro então Import hard way home./Src BA acessando a partir de Hall eu não preciso dar um barra ainda que está que é o nome

do arquivo que a gente Criou eu posso deixar apenas bahouth sem a barra no final então contribuindo aqui e agora é só a gente chamar a nossa Road aqui fechando aqui nela mesmo que a gente ama em formato de tag esse nosso componente ou salvar pra gente fazer todo esse teste agora vamos lá salvei aqui vamos nosso Ep 11 tu já atualizou para mim maravilha então isso acontece a gente roda UFPE UFPE chama que esse arquivo é. JS e UFJF chega aqui olha componente que eu preciso renderizar Aqui é esse navigation um contêiner que tem

esse erro altos aqui dentro é isso que ele renderiza e quando ele chega no nosso rabisquei se ainda que a gente acabou de criar com esse drawer ele renderiza para gente então esse nosso estilo de droga navigation Qual que é o primeiro é sempre a primeira tela aqui a gente passou então ele chama para mim renderiza a primeira tela é a home pode ver que até aparecer o textinho home aqui ó a gente clicar Ele abriu dobra se Eu puxar ele abre também ou pode clicar aqui e Ó tem as nossas duas telas que a

movies e Arrume Seu clicar em movies Olá tela meus filmes estão clicar e for home pela home então ele já começou dar uma forma aqui antes a gente continuar configurando e criar que a nossa drover com essa com esse estilo aqui né Vamos tirar status bar porquês e se não tem status bar eu quero que quando um cara Entre no aplicativo essa status bar ela feche Então dentro aqui do Ap. JS em Cima que eu vou importar Britney time de novo dormir aqui né aqui a gente vai importar um cara chamado status bar beleza importamos

aqui dentro do ERP ela em cima do nosso bravo eu vou passar esse nosso status bar aqui eu vou passar uma propriedade para ela você já gosta de tem a propriedade de Style que a gente viu eu vou passar uma propriedade para ela chamado William tro ou seja esconder ela se eu salvar Olha lá já escondeu aqui a minha status bar vamos Pode ver que eu posso Navegar e não tem mais a nossa tatuar é isso que a gente queria então Ó vou fechar que o nosso arquivo é. JS que agora a gente já fechou

a ele então vamos voltar para as rotas novamente tenta aqui do Whindersson a gente configurou drawer um duas navegações que a gente frio perfeito já tá funcionando E se a gente lembrar aqui dentro do dólar eu também tenho aquele tipo steck aqui ó busca eu tenho aqui o de teu time São outros tipos de navegação como é que eu consigo Então mescle esses dois tipos vamos lá primeiro entender qual que é qual né então se a gente abre a home que a nossa tela aqui dos filmes tipo que ela é drawer ou ela é Ester

ela vai ter que ser uma Esther o que que ela tem que ser uma steck ela tem que ser uma steck dentro da droga porque se eu tô aqui eu posso abrir a to our igual você tá vendo aqui abrir a Dual eu tô na homem mas eu também posso clicar no oxigênio aqui ó Arm of the Dead beleza cliquei nele ele tem que ó mostrar o detalhe do filme e ele tem que abrir Tech Então a gente tem que mesclar esses dois caras vamos lá vamos lá dentro da parte alta a gente já deixou

criar um arquivo chamado steakhouses e nem fizemos nada então basicamente a mesma coisa tá aqui o que que a gente vai e aqui a gente vai criar configuração do tipo steck igual a gente fez drawer vamos lá vou só renomear esse nosso steak roads o s minúsculo aqui Steakhouse beleza Tech Road West Music Show de bola então vamos começar a configurar primeiro importando por vir aqui para a gente poder escrever ali aquele componente Import abre aqui também o nosso react-navigation/nativo este aqui é o tipo está aqui que a gente chamou importamos o nosso creatine ethyl

Ester pode ver que ó bem parecido né então eu só aumentar pra ficar melhor agora eu vou importar qual que é as telas que vão Ser em cheque por enquanto a gente só vai ter um homem tão importante porte como ROM./Como acessar aqui o nosso peixes/Roma vou criar nosso tipo tão com chama destaque igual cliente neste Navigator e vou criar o componente prancha vou chamar ele e tech-house Victor a gente retornar que algo na tela que nossas rotas e vou exportar já aqui embaixo né a gente Esporte deixou tech-house aqui eu coloquei com S Maiúsculo

e aqui também tá pode ver que no drawer o de também é maiúsculo no cuidado com esses minúsculos em maiúsculos em perfeito então é bem parecido né agora que eu vou criar o nosso tipo está aqui só faltou aqui no nosso creatine ethyl Ester Navigator eu abrir os parentes aqui que eu esqueci nave agora abre aqui nossa tag destaque. Navigator Olha que legal abre e fecha tag dentro tem as telas entre os tecponto screen com S maiúsculo perto Aqui primeira tela que eu voltei está aqui a nossa name qual que é o nome é home

e o nosso componente aqui é o nosso como eu vou salvar a gente criou a configuração e segue todas as telas que tiver aqui dentro eu vou conseguir Navegar em formato de pilha que abrir aqui é igual buscar igual detalhe né que abre para cima aí empilha que tem um regadorzinho aqui para voltar uma para trás então todas aqui e agora aqui no Nosso House index a gente também tinha o home mas não vamos ter mais agora a gente vai chamar essa nossa configuração de estepe aqui que é nosso home lembrando ele também tem que

ter acesso a nossa drawer abriu aqui e também a nossa está aqui então aqui no nosso index download eu não vou chamar um home diretamente e sim eu vou chamar configuração esse tech-house Então vamos dar um nome aqui de Homer para Rodrigo our beleza e eu não vou ter mais isso Importe aqui do reydson vou tirar aqui e vou importar suportar até aqui embaixo e porte Tech House ou escrevi errado Tech Road a ROM barra porque tá na mesma pasta portal nosso arquivo Steakhouse esse arquivo que a gente acabou de criar aqui o importamos ele

agora eu vou chamar ele aqui no nosso home drawer Tom chamei ele aqui beleza então vou salvar vamos fazer o teste talvez aqui a gente tá aqui no Nosso drawer tendo ROM drawer com nossos Tech House e dentro do Steak House agora a gente tem aqui só a página home beleza então ficou bem separadinho aqui agora se a gente vem aqui eu tenho uma duplicação de reader mas a gente vai começar agora a manipular né eles têm aqui o está aqui mas ele também é um tipo de drawer feito Bora lá então configurar vamos aqui

primeiro a gente vai vir então e cria esse nosso estilo aqui drawer é a fertilização a as cores Estão aqui em cima caso você queira também e vamos lá eu fiz aqui vamos aqui no nosso Mix aqui dentro do nosso Navigator the drawer dentro dele a gente tem algumas propriedades vou quebrar a linha aqui para ficar mais fácil para você está Antes aqui do fechamento da pele aqui vou passar uma propriedade screen option igual abre e fecha duas Chaves aqui eu vou passar aqui o reader chão vai ser falso colocar aqui do lado para gente

ver o estilo ao mesmo tempo Então agora assim que me um pouquinho aqui também eu vou salvar a gente já tira aquele reader que tinha drawer então tirei, eu quero também ter um drawer Style: abre e fecha Chaves Qual que é a cor de fundo então background-color idade que se é maiúsculo eu quero passar Aquela nossa curta 1090 a 0 e vou salvar o abrevia olha a cor dele massa né, que era também dá um pede ou seja o espaçamento interno ele Tá bem o topo né passamento entrar no top ten maiúsculo ela passar de

20 e beleza Esse é um pouquinho depois aqui na Chaves, aqui dentro ainda eu quero passar então um drawer Active background-color Cuidado com os minúsculos em maiúsculos aqui dentro aquele vermelho né então e72 f49, drawer Active incolor Ou seja a cozinha do texto seja Branca então a f f f Vou salvar e olha só acho que é Isso né Deixa eu ver se eu deixei passar Maravilha, quando não está ativo eu quero que seja branco então, drawer inart Ink color Você já acordou texto: abre aqui nossas "FF Vai ser branco beleza não vamos lá Avenue

para movies tela movies dela meu filmes Maravilha isso mesmo show de bola Fica tranquilo que a gente já vai arrumar o título aqui da home droga né já gente vai chegar lá então agora que a configuração padrão do nosso navegador De obra que essa parte inteira já foi a gente pode para as telas ou seja cada item né e agora home broker vamos passar para ele não entrar aqui na propriedade aqui vou dar um intercâmbio com Point vou dar uma entre aqueles o fechamento para a gente colocar então a propriedade para ela primeiro Robson abre

duas Chaves aqui dentro dela eu quero passar o texto né porque ali ele ficou e eu quero passar um então abriu as coisas aqui que eu quero passar por exemplo Início lá e cá início fica que você quiser tá então eu vou mandar aqui para como home E agora se a gente vê eu também tenho um ícone Zinho antes de cada um então, dentro de opções aqui drawer icon 2 pontos abre abre e fecha aqui parênteses abre e fecha o mais um parênteses porque eu quero retornar alguma coisa já quero retornar aquele ícone Beleza vou

dar um entrar aqui e dentro desse parentes aqui eu recebo Dentro de Chaves eu quero receber eu vou desconstruir eu quero só pegar o meu poucas eu quero pegar também o tamanho padrão e Collor padrão então essas coisas que a gente definiu aqui em cima é aquele só tá repassando aqui então agora eu quero retornar alguma coisa eu quero retornar ó esses ícone Zinho que eu separei e o importar que a Biblioteca de ícones que já vem com Edson Import abre e fecha aqui ROM@ai com aqui eu tenho um monte de Bibliotecas eu digitar M

eu já tem várias eu quero utilizar Matthew caminhonete ficou então gente importa biblioteca e agora dentro aqui do nosso parentes aqui do dólar ai eu posso retornar Então abre a nossa tag aqui fecho ela aqui mesmo e para ela eu preciso passar o name E qual é o nome do ícone bota não entra aqui não é para ficar mais fácil para vocês aí no vídeo sabe nem me é Vou colocar aqui por exemplo vitrasul Open Que é o nome do ícone quero também passar Qual que é o Size quero que o site seja apenas o

Size que ele já tem aqui Totó repassando a cola também quero apenas ser passar as coisas que a gente configurou eu tô recebendo aqui nessa variável Então vou repassar abre e fecha Chaves a cola Maravilha Olá já ficou Mas para ficar mais interessante ó olha que legal e quando não tiver com ela selecionado eu tô na tela movies eu quero que seja Outro ícone e quando eu tiver nela eu quero que seja esse ícone aqui como é que faz a gente pode fazer uma renderização condicional ó vou tirar daqui abre e fecha o Chaves e

a gente tem aqui nessa variável fofocas que é quando ela estiver em Foco essa variável vai ser true ou seja verdadeira se eu não tiver toda movie ela é falsa então vou fazer aqui ó tio focas interrogação se ela for verdadeira Então mostra o ícone chamado nuvem traço Open: quer dizer que se esse folgas por falso se não tiver na tela home Então mostra o movie traço outline que é o que eu separei Então vou salvar Olha que legal que vai ficar vou puxar ó tô na tela movies né ela que tá marcado aqui ó

e quando eu abro olha aqui o ícone Zinho do homem tá fechado Se eu for para mim até lá tô na tela home Olha que o IPI Tamer então ele verifica você tá na tela home se tiver Então mostre silicone aberto se não mostra o ícone que fechado Beleza então ficou bem legal agora falta a gente aplicar para um visto também né então vamos lá embaixo vou aqui dar um interesse em uma inteira aqui um entrou para quebrar a linha aqui pra ficar mais fácil e a gente tem o nosso options também né É que

eu também quero passar o Python e vai ser meus filmes ou salvar Beleza já ficou acho que era meus filmes né Vamos comprar é meu ciúmes mesmo beleza, cuidado que tem, em cada item em baixo aqui do tá e tu tem a, tá então, Drawer ficou: é a mesma coisa tá então (abre Chaves pega o nosso Focus pega o Size e a color que a gente já tem igual abre aqui nossa errou Abro mais um parênteses para gente retornar o ícone pouco é só para não ter que escrever de novo colocar o ícone aqui dentro

vou dar um tav aqui para identar melhor e aqui dentro a gente vai utilizar deixa eu ver aqui é esse de arquivos né então vamos lá quando eu tiver com ela selecionada eu quero usar ar deixa eu ver se ele vai Me mandar aqui esse ícone de arquivo se não tiver com ela selecionada eu quero mandar ar deixa eu ver se vai me mandar sugestão ele tem aqui outline que ele também sem tá preenchido Vou salvar para a gente fazer o teste maravilha olha aqui parecer os nossos arquivos estão clicar nele olha está preenchido agora

se eu sair dele ele agora tá vazio então ficou bem bacana né então aqui a gente já faz a nossa primeira configuração e a Nossa drawer então ficou bem bacana E agora falta eu acho que o nosso River aqui né a gente tem esse vídeo aqui na nossa externa então eu também quero tirar ele porque a gente vai configurar o nosso nosso Ribeiro a gente vai ser personalizado dessa maneira aqui então vamos eu vou salvar aqui fechar esse arquivo ou vim aqui no Steakhouse aqui no nosso pack posso dar um enter ou dar mais um

entrar aqui para quebrar a linha né antes do fechamento e a gente também Tem um options abre aqui duas Chaves Eu tenho aquele Nossa propriedade edredom eu não quero rir aqui também tá então tanto os líderes da tela drawer quando está aqui ó não tem mais beleza então agora sim e agora Então qual que é o nosso próximo passo aqui é criar nossa tela home então a gente precisa criar esse reader and precisa começar toda nossa Roma aqui então bora lá vamos fechar esse arquivo aqui vamos aqui dentro de peixes e dentro de home in

diz Que aqui tá a nossa tela home é o nosso componente de tela home está tudo aqui então agora dentro de home a gente vai criar também um novo arquivo aqui em um frio dói os pontos JS tá então a dentro da partir de Roma têm links a gente tirou estágio com JS que é onde vai ficar estilização a aparência né de todo e aqui então a gente vai utilizar o estado dos componentes que a Biblioteca que a gente instalou eu vou me importar ela aqui dentro do estágio importa está Held on o resultado componente

Barra neste; e agora vou criar ela aqui então Export const vou chamar a primeira aqui de container igual style.com E aí qual que é o nome do componente que eu quero eu quero uma viu abre aqui o nosso caso nós tempo de estranhos aqui que as firmas deitadas Então abre aqui ele ele vai ser a nossa viu então aqui dentro que a gente vai dar os estilos é que a gente escreve o CSS padrão como se fosse lá na nossa não é bebe né se você já conhece a parte do CSS e estilização lata basicamente

a gente escrever background-color né a gente viu antes ele ou até color e a gente colocava aqui a cor dentro de "certo agora a gente escreve CSS padrão aqui então posso vir aqui falar background-color traço né Igual a gente tem na web não precisa da Asus posso colocar diretamente Então a nossa cura que ele é 14 uma 29 beleza e eu quero que também esse container seja a cor e por volta de todo mundo né esse cara aqui então quero que até lá pega a tela inteira né então esse nosso container eu quero que ele

tem um Flex ou seja quebrou que ele pegue para mim toda a tela inteira com essa cor aqui então tudo que tiver dentro da nossa entre fácil vai tá dentro desse container aqui então vou salvar agora que a gente tirou aqui dentro do homem e do Styles eu posso importar ele aqui que A gente é de um Ecosport Tão dentro do Whindersson aqui da nossa terra onde tem o textinho eu posso importar ele ó port ROM. Bar e vou importar o nosso container que a gente criou tá então nós container aqui e eu vou usar

o container a universo dessa viu durante a noite e maravilha olha lá salvei aqui já apareceu aqui tudo já ficou da cor que a gente passou tem um Maravilha e também vamos voltar no estágio eu quero dar um espaçamento interno Então vou dar um Pede e todos em cima embaixo de quatro fixos e também é zero nas laterais então cuidado e aqui também tá E além disso a gente tá usando uma viu que é basicamente um espaço uma área ali para os nossos itens ficar dentro igual a gente tem um teste mas eu também quero

usar a inveja ser uma viu vou usar o seis Aurea viu idade com os minúsculos em maiúsculos vocês variável basicamente ele vai garantir uma é segura para nossa interface no iOS Então não vai ué se a Gente tem aquele noite de cima aqui em cima com aquele a câmera né e eu vou garantir que a nossa interface nunca vai ficar sobre aquela parte tá sempre no mar e segura Maravilha dentro aqui então a gente vai ter o que mais a gente tem um líder e depois o teste input aqui então Líder a gente vai ter

na home vamos ver se vai ter um lugar a gente vai ter aqui nos meus filmes que a minha lista então a gente pode criar um componente um arquivo separado e Reutilizar né tanto aqui na home o anto aqui no meus filmes para reaproveitar o código vai ficar bem melhor então a gente não precisa ficar criando na home depois vim aqui tem que recriar de novo a criar um componente separado e aproveitar nos dois vamos fazer isso vamos lá a gente tem Um textinho aqui tela home vou deixar ele tá aqui não tem problema vamos

aqui dentro src dentro de src vou clicar com o botão direito em cima dela New Folder vou chamar aqui de Componentes essa pastinha Olha que legal tá ficando bem grande já tá ficando bem bacana dentro de src a gente criou componentes peixes graus estão dentro de compra se eu vou criar um New Folder aqui dentro eu vou chamar de líder isso a nossa patinha Tão dentro de componente o líder e dentro digito eu vou criar um New chamando index. JS vai ser o arquivo responsável só por montar aquele género então import.me Axl Rose é o

importante do React Native só para a gente ter alguma coisa para poder ver é uma viu e um técnico também e vou criar um componente então lancha líder o Vitor ou trazer aqui a viu e o nosso teste AC ridler teste para a gente ver e vou exportar aqui deufol Líder aqui a gente tirou um arquivo um componente separado e agora eu quero importar ele aqui na nossa home para utilizar então a gente volta aqui no nosso peixes o meninas eu vou importar ele Import Ilha Foi o nome que eu chamei ROM "aqui onde./. Baixo

agradecer mais uma pasta acessar que nosso componentes/acessar nossa parte de entender que a gente criou tá cuidado com a estrutura aqui que tá ficando Beleza então as estamos aqui agora eu quero chamar essa tag esse componente aqui a gente chama que o nosso River ele fecha aqui nele mesmo e também olha aqui quem já apareceu reader Test em cima Então maravilha agora nesse nosso componente de vida a gente vai criar todo esse nosso render que esse ícone Zinho e vai e o nosso drawer E também o título né então vamos lá vamos aqui no nosso

arquivo reader Windows então aqui dentro dentro da parte do glitter vou criar o nosso mil Fábio está respondo de alta essa para a gente criar aquela estilização dele não importe está é o componente/leite e bora lá vou criar a primeira tag ponte vou chamar de Container também igual Stile di tal. Vou chamar aqui viu o criar aquela área lá viu o e dentro aqui da nossa template juiz da nossa as pessoas irritadas o Crazy a gente vai colocar o tamanho né então qual que é o tamanho que eu quero por esse cara que altura eu

quero que ele tenha por exemplo uma altura de 70 Pixel vou criar mais um aqui embaixo eu vou ter mais forte como se vou chamar aqui de menu botão vai ser o botãozinho ficar Igual estar de ponto o Perry eu vou abrir aqui o nosso template string maravilha então cuidado para não escrever errado aqui o nosso tá Tiago ou pele Cuidado que o é maiúsculo e dentro desse cara ele vai ser um botão vou criar também um texto né para ficar dentro do botão que a gente tem aqui ó o título tá então vou pegar

aqui no EcoSport EcoSport ponte vou chamar ele aqui Detalhe got Style. Né porque eu quero um texto igual a gente tinha antes só que agora a gente está criando aqui para estilizar aqui vou salvar aqui agora a gente pode vir aqui dentro do nosso endereço vida e importar esses caras né então eu vou importar aqui vou tirar se importe do itnet trazer aqui os nossos estilos pronto/tarde tá eu vou trazer aqui então nosso Conta aí né vou trazer o nosso menu botão e também vou trazer o nosso Tython tá então só utilizar nosso container é

a nossa área que vai ficar por volta de todo mundo perfeito o nosso menu planta vai ser um botão Então abre aqui ele lembra o mesmo bater ele é um Tati amor o Perry basicamente algo clicável na como se fosse um botão que tem uma outra cidade E também temos o tá então dentro do botão a gente tem um ícone Zinho Então vou trazer um ícone aqui também para poder utilizar em porte abre e fecha aqui from@é expobarra Vector icons eu vou trazer aqui o nosso o nosso feather aqui tá Então dentro do nosso menu

Button vou dar um espaço aqui para ficar fácil para vocês a gente vai colocar o ícone o ícone ele tem um nem Qual que é o nome do veículo que eu quero colocar é o menu eu quero também usar os sites para ele de 36 o tamanho dele e também qual que é a cor que eu quero para ele a cor eu vou passar Branco Vou salvar e olha aqui o nosso menos aí ó ele é aplicável ficou bem Bacana depois aqui do meio Banda A gente tem o nosso batom eu já importei aqui em

cima ele nada mais é do que um teste aqui então quero colocar o nosso bilhete Prime Prime vou tirar esses Passos o grandão obra ficar mais organizado e beleza já tá parecendo um leque Prime aqui embaixo só que agora colocar um do lado do outro e maior né então vamos no nosso estilo do render vamos lá a gente passou aqui no container apenas o tamanho de altura eu quero passar também Não vai ser do lado do outro então flex-direction curou pra mim ao texto do lado do botão beleza eu quero também colocar aqueles vão ser

o Lions Center que ele tava lá em cima né e o Center Goiânia isso aqui no nosso altura de 70 e mais eu quero desgrudar aqui da nossa esquerda que tá grudado então eu posso dar um pede traço Leste basicamente um espaço na esquerda 14pic gridao um pouquinho da esquerda feito agora no nosso botão a gente também pode Dar aqui o tamanho para ele de altura de 70 pizza vai ficar o mesmo tamanho beleza outra, online itens também quero no centro desse de volta e um flex-direction e aqui perfeito Ele já voltou aqui para a

posição dele aqui agora falta aumentar esse nosso Black Prime né então vamos lá dentro aqui do nosso estilo do tython vou passar para ele que a cor dele vai ser branca e tá pretinho ali né Beleza ponto, ponto sais aqui para ele vai ser uns 30 Pixel Outro, e vamos deixar que um falso ou é aqui como vou deixar em né então a gente aumentou 30 pizza o tamanho da fonte E deixamos ele Eu também quero desgrudar um pouquinho da esquerda aqui né então eu posso passar aqui um margem left já espaçamento externo do nosso

texto e os 14 ficção aqui perfeito maravilha então aqui a gente já finaliza o estilo do líder posso fechar vamos aqui no nosso index a gente tem ele aqui Quando clicar no botão que tem que fazer tem que abrir o nosso blog aqui essa é a função desse nosso menos de hambúrguer certo então nem a parte do menu Banda A gente tem uma função chamada um Press o pão com pressa abre e fecha aqui quando eu clico nele ele disse para isso essa poderia aqui ó abre uma função anônima e dá um alerta aqui com

o pé não fazendo isso quando eu clicar ele mostra um alerta teste maravilha mas eu quero que ele abra Aqui o dólar então o que que eu Quero fazer eu quero importar aqui porte rouba react-navigation e quem controla a navegação e trazer um Hulk chamado iOS navigation eu vou instanciar aqui em cima do River. Navigation igual News navigation e a hora que o clicar não parece que eu quero fazer eu quero abrir o dólar então navigation.com tem a prova simples é basicamente isso que eu quero fazer vou salvar vamo testar ouvir aqui cliquei em abril

cliquem ele abriu então a gente da Possibilidade do arrastar e do clicar abre também então perfeito já resolvemos mais uma coisa a segunda coisa que a gente olhar o título aqui é o York Prime mas aqui o também aproveita e coloca outro título só que vou deixar dessa maneira é fixo né e eu quero que isso seja dinâmico então a gente pode trabalhar com propriedades igual a gente tem a propriedade de um pressa igual a gente tem propriedade color eu posso ter no meu componente Líder propriedades que Eu vou passar para ele aonde que a

gente tá chamando ele ajeitar chamando aqui no nosso home Olha que a gente chama um vídeo né Eu quero falar com ele e essa é uma propriedade sei lá título ou até tá então mesmo que eu quero passar o texto que eu quero que exiba por exemplo vier Prime Vou colocar até diferente onde é que Ester E aí beleza e aí lá no nosso componente rio aqui agora eu recebo essa propriedade posso abrir Chaves e pegar Essa propriedade Olha o nome que eu chamei eu chamei o nome de dayton então eu recebo o líder o

peito e agora eu posso utilizar dentro aqui onde era o texto vou colocar abre e fecha Chaves usando esse tom eu estou recebendo aqui tá Vou salvar olha lá olha o Iago está aqui poderia ser qualquer outra coisa para poderia ser bem vindo Olha lá bem vindo mas eu vou colocar né o nosso Gourmet perfeito então agora o reader posso Fechar posso fechar o estilo aqui o líder a gente já resolveu já podemos utilizar na nossa interface Então já vou deixar ele aqui primeiro da nossa interface que mais que a gente precisa vamos voltar a

gente finalizar aqui é para não ficar tão grande a gente vai fazer a parte do input e do botão Bora lá vamos usar e fechar pastinha componente aqui para não atrapalhar vocês então aqui agora nós vamos vamos lá vamos começar a criando aqui nosso Componente aqui de surf container vai ser uma viu aqui que vai ficar por volta em nosso input dentro dessa viu vou ter um input aqui ele fecha aqui nele mesmo esse input ele vai ter um placeholder a refletir rodar vai ser por exemplo exemplo Vingadores né vai ser para o cara procurar

lá depois aqui desse nosso input dentro ainda do Sérgio container a gente vai ter o botão de buscar a gente vai ter o surge Button por exemplo abre e fecha aqui e este botão vai ter um Ícone o importar que o ícone também Import from expobarra Vector a gente já conheceu e vou importar também o nosso pedra que a bibliotequinha aqui a gente trabalhar aqui com ícone né que eu gosto dela nós vamos trazer lá dentro aqui ó do nosso Sérgio contente Dá um espaço aqui para ficar fácil para vocês estão dentro do Sérgio botão

vou trazer ela aqui o name desse botão aqui vai ser surge o Size para ele ou seja o tamanho que eu quero Dar para esse cara vai ser 30 e a cola dele vai ser branca Beleza então se eu só vai Isso aqui vai dar erro né que a gente criou isso aqui mas não criamos lá no nossos estilos Então vamos criar nos estilos aqui vou colocar já não importe aqui a gente tem os importa aqui ó o nossos estádios eu vou deixar o em pó deixa eu tirar esses espaços, a gente pode colocar aqui

a nossa surge container, a gente também queria um Chamado input, também criamos o surf botão aqui então agora a gente precisa criar esses três caras lá no seu estilo vamos nos Estados aqui do remo eu vou colocar aqui só para não esquecer vamos lá EcoSport conte primeiro ao surf antena igual tarde. Vai ser uma viu né porque é um contêiner é uma área vou duplicar para baixo ou debaixo vai ser um input para colocar o nome dele aqui input ele vai ser algo que é para digitar né o imposto então é do tipo Teste em

Dori aqui e vou duplicar para baixo que a gente mais um tem o nosso nome chamada surge Button e o Sérgio botão ele é um botão eu não tô Tá bom eu peço que a gente também já conheceu o que é o botão vou salvar aqui ou salvar os dois arquivos pior já apareceu aqui agora vamos fazer isso não assistiu aqui vamos lá e aqui primeiro o nosso seus contendo aqui a área que tá Por volta desses dois caras ele vai ter aqui então um Flex-direction ou seja whole um do lado do outro já no

outro lado beleza eu quero aqueles Pinha a largura de 100 porcento o primeiro eu quero também ter uma altura aqui de 50 pixon esse nossa área quero a Linhares no centro então também vou passar para eles Allianz Center aqui ó já ficou ali Centralizado aqui na altura e também quero dar uma desligada né Pior que tá grudado aqui então quero falar para ele ele vai ter um pedem O fizeram e de 14 fixos tanto na esquerda quanto na direita eu vou salvar já ligou aqui com o nosso ícone perfeito e também margin-bottom de 8 Pixel

ou seja desgrudar se tiver alguma coisa em baixo uma margem ou seja o espaçamento embaixo de oito e agora no nosso input eu quero passar para ele ter um background-color uma corzinha aí a gente pode passar um RGB a 255 255 255 seria o branco mas eu quero dar uma para cidade então, zero. 4 que seria quarenta por Cento nós já ficou ali perfeito e o nosso input ele pega quase a tarde inteira então ele vai ter um, aqui uma líder de 85 porcento da tela. Viram deixa eu salvar beleza eu quero também falar que

ele vai ter uma altura igual né Para padronizar que o nosso seus container de 51 aqui de 50 ficção a beleza border-radius aqui de 50 também ele é bem redondado um pede interno ou seja aqui onde você digita Interno eu quero dar um espaçamento aqui então pedem dois pontos eu quero passar oito pizzas em cima embaixo e 15 pinceis nas laterais Então vou salvar eu já deu o espaçamento legal ali ó beleza size se você já é o tamanho da fonte dentro do input eu quero que seja maior quero seja 20 e que vocês aqui

lá já ficou bem maior Beleza pode colocar até um pouquinho menor não os 18 horas beleza vamos lá e a cor dentro do input vai ser branca quando o cara digitar vou colocar Digital aproveita Branca Agora falta o nosso botão aqui né então aqui no nosso botão vamos lá vamos pegar o restante da tela agora que o botão ser algo esse do input 85 Power o nosso botão vai ser o restante vai ser 15 usado o dela e também quero passar uma altura para ele de 50 peixes a gente padroniza aqui Vou alinhar tudo que

tem dentro dele que é o nosso ícone no centro então Allen Iverson o centro e também verticalmente né então George vai Contente sempre e beleza víamos ele aqui já no centro e perfeito Então posso salvar aqui e agora falta só uma o placeholder quer quando não tem nada escrito se você quiser que deixar um pouquinho mais claro Vou salvar vamos fechar aqui o estágio aqui dentro do nosso input onde eu tenho placeholder eu posso também passar se quiser um placeholder text color Cuidado que o te e que os é maiúsculo eu posso passar aqui para

ele por exemplo um de de roupa Falto #ddd o que mais claro você quiser também é outra opção quando não tem nada digitado ó ele fica assim Beleza então agora a gente finaliza aqui a nossa primeira aula do workshop eu sei que demorou um pouco para gente começar a desenvolver porque a gente precisava o Vinícius que era falar sobre gatineau tive falar-lhe sobre a configuração como é que a gente conseguia configurar e caminhando devagar né conhecer o iett né gente vir conhecer o que que era a Componente como é que a gente conseguiu escrever alguma

coisa aqui na tela e também instalar os componentes que a gente vai utilizar uma parte de navegação que a gente tem aqui como a parte aqui tudo isso de estilização que a gente está utilizando que é o estado de componente então é bem tranquilo então no começo a gente começou mais devagar e vai evoluindo aqui a nossa velocidade tá então fica tranquilo que na próxima aula agora que a gente já tem Basicamente o nosso começo aqui dormir aqui Prime a gente desenvolveu a parte de configuração derrotas tem um pouquinho mais complexo ali no começo e

agora a gente já fez aqui começando né a nossa Roma então te vejo na próxima aula a gente continuar nossa home e começar a desenvolver toda a parte do layout aqui dos filmes e não esquece de compartilhar como é que tá sendo a sua evolução aqui dentro do ensaio então te vejo na próxima aula pra gente continuar aqui