Resumo do Transcript

estamos de volta só queria dizer que no começo vai demorar um pouquinho demora um pouquinho para a gente configurar as coisas mas depois vai mais rápido né então espero que tenha paciência para a gente configurar tudo porque a gente começou o aplicativo do zero tivemos que instalar tudo do zero sem nenhum boilerplate né então mas é também bom para você revisar e aprender como fazer tudo do zero então espero que esteja gostando dos vídeos então é que a gente fez até agora então a primeira coisa que a gente fez foi ajustar esse ponto de partido no index android a gente fez esse cara aqui que são os dois iguais para a gente poder disponibilizar o aplicativo para as duas plataformas ao mesmo tempo do is e o android a gente criou a app que vai ser o ponto principal para a gente escrever aplicativo que a gente fez a gente criou a parte da actions que vai ter todos os action creators e os tipos de ações criou a parte de componentes componentes para ter todos os componentes que a gente vai usar também criamos a parte de reducers que vai ter os reducers né reducers são apenas funções que retornam uma parte do application state ou chamado reducer né os dados e também aqui a gente começou e finalizou a configuração do redux com a importação do modo redux tank usando o apply middleware aqui como terceiro argumento da função create store também se lembra que a gente usou componente de auto-order higher order component provider que injetou a store dentro do nosso aplicativo tá bom e agora o que a gente vai fazer então temos mais uma peça de configuração para fazer esse caso vai ser a navegação se você voltar aqui vamos lá para o sketch pad tem outra cena tem duas cenas de login tem a cena do bem-vindo que a página que precisa que vai ser somente acessado se você tiver autenticado assistente é o né para fazer essa navegação embora que só tenha duas cenas né eu vou usar o react native flux né router flux né o modo react native router flux eu demonstrei o uso do react native router flux no meu minha série de vídeos introdução ao redux sou se você quiser ver esse vídeo por favor vai lá então esse cara aqui react native router flux faz a navegação ficar muito mais fácil em vez de a gente usar o componente navigator que é fornecido pelo react native é mais um camada de abstração que adicionada a usar o modo mas fica tudo mais fácil então vamos lá primeiro coisa que a gente vai fazer instalar o módulo npm install save sabá como dependência react native router flux a bom deixou aumentar aqui em largar a tela então esse cara aqui a gente vai usar como navegação vamos voltar o package da g.gson aqui cadê o cara demora um pouquinho vai instalar o que que é isso que funcionou a ria que nem o rato flux aqui então estou usando react native router flux versão 3.37 tá bom então se a versão mudar por favor tem um cuidado toma cuidado porque versão por exemplo se você já tiver na versão foco quando você estiver assistindo esse vídeo vai dar pode dar porque as coisas mudaram mas favor instala versão 3.37 tá bom então instalamos vamos lá voltar a tom que a gente vai fazer a gente vai pasta src criar um novo arquivo chamado router ponto js que vai ser nosso router vai ser nosso arquivo para que vai incluir todos as rotas nosso aplicativo primeira coisa que a gente vai fazer importar o react importe o react sempre assim né form react também vamos precisar de algumas coisas do react router flux tá bom mas vamos fazer isso depois vamos só fazer o componente o componente que a gente vai fazer chamado componente de rotador const chamar variável aqui vou chamar router component é muito importante você adicionar esse componente porque o router é um componente que já é parte do react native router flux então a gente precisa fazer nosso próprio componente e vou adicionar esse aqui para diferenciar porque o nome não sei o mesmo então vamos definir com função de flash só um componente funcional sempre retorno template qualquer coisa que seja que a gente vai retornar e no final export default o nome do componente para disponibilizar para outros arquivos nesse caso vai ser o app da outra js depois a gente vai fazer isso mas agora vamos lá vamos importar do react native router flux então vai ter a primeiro de tudo router que a gente vai usar o componente de rotador do react native router flux nome é um pouco longo mas vamos lá e também vamos precisar da sim é como se fosse a rota né é muito parecido com o react router do react web mas aqui a gente chama sim em vez de route então vamos lá primeira coisa no template bota router ok e vai definir as rotas ou sim dentro desse cara quanto sem cenas de a gente vai ter vamos olhar no sketch aqui vai ter uma e duas então você pode chamar esse cara de login e pode chamar esse cara de sei lá página principal ou main então vamos lá então para sim componente sim vai ser self close né só fechar o mesmo tempo e as propriedades são que são aqui que vai ser a chave vai ser uma chave que a gente vai usar como a função nome da função para ser chamada para mudar de cena então vai ser vamos chamar de login login e o componente vai ser o que qual o componente que você vai usar a gente ainda não tem né então mas vamos chamar de login e o login for né formular login por exemplo vamos chamar sim e o outro argumento é o título se você quiser que apareça na barra de estar na barra assim aqui de baixo da hora vai ter uma barra com o título se você quiser e se apareça só botar title e alguma coisa que você quer se apareça por favor entre suas cadanças mas vai estar muito longo sei lá vamos botar login só logo esse texto aqui se você quiser que seja sendo inicial você pode pôr initial com propriedade que quer true ou falso então não precisa falar explicitamente true é só botar inicio normalmente se você não tiver nexo a primeira rota vai ser a inicial por exemplo se você tivesse outra aqui e não tivesse esse cara a inicial seria esse primeiro então vamos botar aqui botar inicial deixa eu aumentar aqui da outra cena deixa eu botar isso para baixo vai ser a tela principal vou botar vou chamar de main tá bom main componente vai ser sei lá main o título botar bem também vou não se esqueça de fechar a tag do componente e é só isso definimos a nossa sina mas não temos esses caras né então vamos fazer o componente agora e deixa eu dar um que vamos lá para o componente o criar novo arquivo chamado login form js também vou criar o main.js esses dois caras vamos definir os componentes para o main só é uma mensagem então vamos lá tem duas outras gente pode seguir a gente pode definir o componente agora ou depois então vamos deixar esses caras aqui então só criamos o arquivo vamos definir depois vamos voltar o router e focar nesse cara a gente não tem definir então vamos importar import qual nome login form from onde é que tá está dentro do pasta component mesmo diretório ponto bar component login form não precisa extensão js mesmo coisa para o main port main from component main então aqui você importa todos os componentes que vai precisar para as rotas né tudo ok e o que a gente vai fazer agora e vamos para o app e injetar o router na aplicativo em vez de ter isso oi eu não sei o que vou recortar esse vídeo aqui e vou adicionar o router que vai ser esse cara aqui do arquivo router ponto js tá bom vamos importar e talvez depois de reducers router from mesmo diretório router então também portando esse arquivo aqui tá bom salva como o router vai definir a inicial como o login vai para esse componente aqui mas não tem nada então provavelmente deve dar um erro na parecida lá vamos ver o que acontece tá lisando é que está o que é que o router de fio renderer é então a gente tem que definir vamos definir Esses... componentes!!