ReactJS e Redux - Construa 4 aplicativos da Web [4/4] | David Katz | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

ReactJS e Redux - Construa 4 aplicativos da Web [4/4]

teacher avatar David Katz, Software Engineer - Coding Instructor

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

18 aulas (1 h 29 min)
    • 1. Apresentando o curso

      1:33
    • 2. Objetivo de Wireframing

      1:27
    • 3. Configurando o índice

      5:04
    • 4. Navegando com React-Router

      3:07
    • 5. Como adicionar Firebase ao aplicativo

      3:53
    • 6. Como configurar a inscrição

      8:21
    • 7. Entrar de escrita

      4:15
    • 8. Como adicionar Redux ao GoalCoach

      3:18
    • 9. Registrar o usuário com o Redux

      7:47
    • 10. Desenvolver o componente de aplicativo

      8:57
    • 11. Criando um componente de lista de metas

      4:59
    • 12. Reduzir metas na loja do Redux

      3:41
    • 13. Como pentear nossos redutores

      5:40
    • 14. Mapeamento da lista de objetivos

      5:09
    • 15. Completar um objetivo

      6:32
    • 16. Removendo um objetivo

      3:23
    • 17. Como adicionar metas completas ao Redux

      6:24
    • 18. Objetivos concluídos de renderização

      5:55
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

497

Estudantes

--

Projeto

Sobre este curso

Torne-se um engenheiro de software altamente exigido, seguindo este tutorial no React JS e Redux. Como uma das habilidades mais bem pagas para desenvolvedores da web, aprender React vai abrir portas e empregos para você.

 

Este curso baseado em projetos vai ter você codificação imediatamente. Construir quatro aplicativos de exemplo cuidadosamente pensados neste curso vai aprimorar suas habilidades no desenvolvimento da web moderna.

 

Primeiro, aprenda os princípios do React JS construindo duas aplicações. Um introduz ES6/Babel, e outro como lidar com solicitações da Web HTTP no React usando uma API. Com o terceiro aplicativo, saiba como manipular cookies de navegador. Finalmente, você vai criar um aplicativo inteiro com autenticação completa e um banco de dados em tempo real para concluí-lo.

 

Além disso, aprenda a engenharia do Redux. Você vai descobrir que o Redux resume até três passos simples!

Não se preocupe se você for novo no desenvolvimento da web. Alguma experiência em JavaScript vai ajudar, mas este curso garante que cada novo conceito seja explicado adequadamente.

 

Dê um mergulho para React JS e Redux. Vamos começar a codificar!



Além disso, aqui está um link para o repositório on-line deste curso: https://github.com/15Dkatz/ReactJS_VideoGuides

Conheça seu professor

Teacher Profile Image

David Katz

Software Engineer - Coding Instructor

Professor

David is a software engineer at Zendesk, with a Bachelor of Computer Science from the University of San Francisco.

David has gained valuable experience from the tech industry. By incorporating these best practices, he hopes to create the highest quality learning experiences possible.

Feel free to connect with David! He is always curious about the cool project you're working on. And he loves to discuss ideas on how to build impactful technology.

Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Apresentando o curso: bem-vindo a um excelente recurso sobre como aprender a reação. Sim e Redox. Parabéns. A reação de aprendizagem colocará você um passo à frente, pois é uma das habilidades mais exigidas e pagas na indústria de software. Eu projetei este curso com um objetivo abrangente para fazer você ter reagido em um Redux em seu currículo e preparado para construir seus próprios projetos de reação a partir do zero. Neste curso, você criará quatro aplicativos. Um vai colocá-lo em funcionamento com os princípios de reagir e introduzir JavaScript es seis sintaxe. A próxima vontade usando um P I e mostrar que você tinha um acordo com pedidos da Web Em reagir. Terceiro, você aprende Redux. Ele constrói um aplicativo que também armazena informações localmente no navegador. E, finalmente, melhor de tudo, teremos um aplicativo Redox que tem educação completa para cadastrar usuários também. Como um banco de dados de volta veio, vou explicar cada novo conceito precisamente verificando e medindo cada idéia nova. Dessa forma, você tem uma compreensão completa do casaco e engenharia. Além disso, vou te contar um segredo agora mesmo. Redux pode se sentir complicado no início, mas você pode resumir a três etapas básicas. Tudo bem, se você quiser finalmente desbloquear a chave para reagir e redux e adicioná-los ao seu conjunto de habilidades ou você só quer retocar suas costeletas de desenvolvimento Web, então este curso é perfeito para você. Então, o que você está esperando? Vamos começar a codificar. 2. Objetivo de Wireframing: Olá. Bem-vindo ao aplicativo final que irá criar em conjunto com React e Redux. Go Coach com este aplicativo vai passar de uma única página APS para esfregar aplicativo que apresenta várias visualizações. Ele também tem autenticação com um servidor completo hospedado pelo fogo Base. Teremos esta página de assinatura padrão, bem como uma inscrição para. Claro, se você inserir alguns dados defeituosos, como um e-mail ruim, eu vou dizer que este endereço de e-mail é ruim antes de ser reparado ou uma senha muito curta, uh, teste ponto com. Aqui vemos que a senha deve ter pelo menos seis caracteres, mas uma vez que você está dentro, você encontra um painel muito limpo. Aqui você pode compartilhar ouro com todos os outros da sua equipe, em pedido de outra pessoa para completar. Ele mostra quem enviou o objetivo e, claro, quem mais tarde completou o gol quando alguém da equipe terminar. Então vamos em frente e completar Leve o anel para argamassa enviado por foto, e lá vamos nós. Nosso Aragorn realmente concluiu isso, então vamos aprender ainda mais princípios e conceitos com redução neste, bem como como como lidar com várias aplicações de página com reagir. Mal posso esperar para construir este com vocês. Então, com isso sendo dito, vamos começar a revestir 3. Configurando o índice: Vamos preparar o treinador de golos. Mais uma vez, aproveitaremos o React up para inicializar nossa aplicação. Executar o comando, criar reagir treinador ouro. Agora vá em frente e posicione o vídeo até que o seu termine, porque eu vou avançar para o fim da minha instalação. Ótimo, muitas vezes você deve se parecer muito parecida com isso. Agora não se esqueça de navegar para o seu novo diretório de projeto digitando o seedy ou alterar diretório Golden. Agora teremos alguns módulos conhecidos para instalar. Vamos executar e ser instalado. Redux Reagir três patos, reagir roteador e Fogo Base e salvar. Todos eles empregarão todos esses quatro pacotes à medida que desenvolvemos nossa aplicação. Então, mais uma vez, vá em frente e pause um vídeo até que o seu complete Great Once em todos os acabamentos, vá em frente e abra o projeto em seu código preferido. Editor também lançou um projeto. Se você quiser vê-lo em execução no navegador ou já iniciá-lo executando o NPM start. Primeiro de tudo, vamos para a pasta pública e olhar para o índice dot html. Se você fez os aplicativos anteriores, você vai notar que temos um arquivo CSS muito útil, Sra. Então vá em frente e navegue para a nova janela do navegador ou guia na pesquisa. Reagir Bootstrap. Vá para começar e copie a folha de estilo CSS modificada e cole-a logo acima do componente título. Legal. Em seguida, como de costume, excluirá toda a pasta de origem. À medida que excluímos, você notou que o aplicativo padrão desaparecerá. Então agora está reclamando que o índice de pontos gs não existe, mas não se preocupe, porque vamos criar nossa própria pasta fonte. Então agora na pasta de origem, eu vou criar o índice de pontos Js dentro do índice de pontos Js. Vou criar o nosso padrão Reagir CO dois Importante reagir de reagir. Precisamos importar o reagir burro de reagir para baixo, e então usamos um reagir para baixo para renderizar função. Ela voltou. Então JSX é apenas para não. Então vamos direcionar o elemento por D, que é raiz, e então ele não vai funcionar ainda. Precisamos de reiniciar o nosso servidor de desenvolvimento porque nós o travamos de cabeça para trás e ele está esperando o host local. Está recarregando. E aí diz: “ Ótimo. Próximo. Agora que vemos, Brenda ligou. Podemos passar para realmente configurar nossas três páginas principais já para este aplicativo Então dentro fonte criar componentes pasta. Foi declarado três novos fundos. O 1º 1 será no JSX. O próximo será um ponto de assinatura Js x. então sinal s capital em camelo cased JSX e mesmo com sol até JSX. Então o S e o U estão em maiúsculas. Então me acompanhe aqui, vamos escrever um código padrão para cada um. Então, para o aplicativo, com importação reagir e o componente de reagir, eles vão declarar uma classe de que estende um componente renderizado algum JSX retorno jsx que diz, Sim, não se esqueça de exportá-lo. Ninguém precisa do mesmo código exato basicamente para entrar e se inscrever. Então, geralmente não é uma boa idéia copiar e colar, mas, no interesse do tempo, vamos apenas ir em frente e mudar ambos para entrar e se inscrever. Agora precisamos Teoh importar cada um desses componentes por isso é importar a partir de componentes barra ao mesmo tempo com assinatura de barra e por último, mas não menos importante, eles são praticamente todos iguais. Então não posso dizer que foi o melhor que o menor dos piores do maior Grande. Fizemos um monte de arranjos. Então vamos passar para a próxima seção, onde começamos a adicionar alguma nova lógica e reagir código que ainda não usamos antes nos aplicativos anteriores. Vejo você lá. 4. Navegando com React-Router: Vamos transformar este aplicativo simples até aplicativo de várias páginas agora. Para fazer isso, vamos aproveitar o pacote React Writer que insultamos anteriormente indo em pobres três Coisas de reagir Rough What? O roteador, a rota, bem como o histórico do navegador em minúsculas reagem ao longo. Reagir em vez funciona muito simplesmente. É preciso almofadas que definimos de cordas, e são 12 componentes que passamos como adereços. Então, já criamos três componentes que podemos mapear como rotas para nossa aplicação. Vamos primeiro declarar um Ratter em vez de sua morte. E como essa tag rotter geralmente fica apenas no host, um caminho de Slash funcionará por enquanto. Agora, o roteador em si, em vez de ter componente, tem uma chave especial chamada histórico. E o argumento é o que importa antes. Histórico do navegador Histórico do navegador em Histórico em um rounder permite navegar para diferentes rotas que especificamos em diferentes componentes com métodos como push, pop e replace. Por exemplo, o push em vez apenas adiciona navegação para o casal que de corrida rota para o próximo e adiciona que a navegação para o histórico para que a história venha a calhar como nós lidar com o redirecionamento nosso usuário para diferentes páginas com base em se ou não estão autenticados ou assinados. Ninguém disse um par três rodadas de inscrição, e nosso 1º 1 será o aparelho, que vai mata cortar o componente que especificamos não será esquecer de adicionar o espaço nossa próxima rota será assinado. Vamos fazer sinal de barra em todos os portões. O componente será assinado em Great no último, como você pode adivinhar, vai ser barra Cadastre-se. Eles poderiam colocá-lo será lado salvar outro. Tínhamos essa lógica na aplicação dela. Vamos testá-lo. Então eu vou recarregar no at, e então eu vou mudar a rota para entrar e há um sinal. Então vamos nos inscrever e lá, se inscrever. E agora, finalmente, vamos voltar ao aplicativo. Legal. Assim, como vimos, testámos cada nova trajectória no euro e vemos que temos diferentes componentes puramente baseados na nossa rota. Incrível. Agora está no firebase para este aplicativo para que possamos fazer com que o usuário só veja a página na se houver realmente autenticado 5. Como adicionar Firebase ao aplicativo: Vamos adicionar alguma lógica de autenticação de base de fogo a esta aplicação. Primeiro, precisamos criar uma conta no fire base dot google dot com Se você ainda não tem um, então vá em frente e navegue até Fire baseado no google dot com. Agora há uma diferença entre firebase dot com e Fire, baseado no google dot com. Firebase dot com é o antigo cônsul, mas queremos usar um novo, então certifique-se de que firebase dot google dot com é assim para você. Depois de acessar este site, clique em começar gratuitamente. Não, uma vez que você está dentro, ele deve ficar assim e será capaz de criar um novo projeto firebase para que ele está criando novo projeto. Chame de Treinador de Ouro. Vamos verificar isso. Uma vez que você está em seu novo projeto, ele deve ficar assim. Você pode conferir todos os recursos e informações úteis que o firebase fornece para você , mas por enquanto estamos interessados em um link. Adicione firebase ao seu tempo. Você deve ver uma variável de conflito pop-up. Você vê isso. Vá em frente e copie esse objeto JavaScript. Agora vamos declarar um novo arquivo ao lado de RGs de índice chamado firebase dot Js no topo. Queremos importar tudo da base de fogo. Então importa estrela como base de fogo de pedaços de fogo. Agora você quer declarar um novo configurável que apenas se parece com o que copiamos. Então, a configuração de custo é igual à que tossimos a alimentação da base de fogo. Ótimo. Esta informação contém RGB ikey que usamos o Firebase acesso, nosso bucket de armazenamento para armazenar arquivos e, mais importante, o domínio fora que hospeda todos os nossos usuários autenticados. Agora ainda precisamos realmente inicializar são aplicação baseada em fogo. Então vamos declarar outro concerto chamado Firebase em era apenas igual a Firebase ponto inicializar em nossa variável de espessura da faculdade. Agora, outros arquivos estarão interessados nessa constante. Então, vamos exportar. Ninguém disse para voltar ao Index Dodgy. Sim, não precisaremos mais do Conselho dos Agricultores. Não agora, pelo menos. E depois no topo. Vamos importar a variável do aplicativo Firebase que declaramos em nossa base de fogo cinco. Agora precisamos adicionar um pouco de lógica para autenticação. O que vamos fazer é em um ouvinte que nos diz se um usuário está autenticado ou não. Agora vamos declarar aqui na nossa base de fogo que queremos olhar para os compensações e então vamos adicionar um ouvinte fora do estado alterado. É uma virada e promessa que podemos lidar com um usuário muito e muito simples, Por enquanto, vamos verificar se há um usuário real. Se houver, esse é o registro do cônsul no qual um usuário se inscreveu ou se inscreveu. Isso é o que esse usuário realmente é para agora. Caso contrário, vamos simplesmente conselho dot log por agora, mas o usuário desconectou. Ainda precisamos assinar agora. Isso será útil porque se o usuário tiver assinado no cabeçote de conta de criação e navegá-lo para o painel ou aplicativo, quem quer que o usuário tenha desconectado, podemos redirecioná-lo para o sinal e componente sempre que eles não estiverem assinados É incrível. Agora toda essa lógica é ótima, mas ainda precisamos escrever o sinal real do componente que permite que um usuário para acionar esse ouvinte. Então vamos corrigir esse componente a seguir 6. Como configurar a inscrição: Vamos configurar o JSX para o nosso componente de inscrição. Então volte para assinar o JSX. Ele aproveitará alguns nomes de classe Bouchat para acelerar o processo de design de nossas aplicações. Primeiro, vamos mudar no geral, def. Chame-o formulário na linha para o nome da classe ou em. Então teremos um cabeçalho simples para componente com o título de Sina. Agora vamos precisar de um grupo de formulários, e este será o nosso formulário real onde o usuário se inscreve e insere todas as informações para que tenhamos uma entrada. Quem é o nome da classe será formado controle. O tipo será texto e, em seguida, o espaço reservado será email. Agora precisamos de outra entrada. Este nome de classe também será para controle. Este tipo será a senha, o que será útil para disfarçar chaves de caracteres como marcadores para proteger as informações do usuário . Então vamos ter outro lugar titular e dizer senha. Eles terão um botão simples. Este botão vai dizer, Inscreva-se no dia da aula para este botão será bootstrapping, que é simplesmente BCN. E então teríamos um botão primário. Vai ter uma bela cor azul. Por causa disso, é um tipo também será botão e vamos salvar e verificar como isso parece legal. Então isso é realmente grande, porque eu estou ampliado agora. Mas em 100% parece com este ótimo. E eu só tenho uma senha segura para o anfitrião local, é por isso que a minha está aparecendo. Mas o seu deve estar em branco assim. Então agora precisamos criar algum estado para a nossa aula de reação. Teremos um construtor com adereços. A primeira linha será super adereços, e então, como muitos de vocês se lembrarão, este Estado DOT é um objeto. E então teremos e-mail com uma string em branco, a senha com uma força em branco. Agora teremos funções inalteradas para entradas. Então, em mudança é igual a função da era anônima. Com a nossa variável de evento bem, disse que o estado do e-mail, primeiro para o evento, não valor alvo. E então, é claro, nossa senha também será evento o valor do ponto alvo. Finalmente, vamos fazer um método auxiliar de inscrição, que, por enquanto, simplesmente ponto cônsul registra o estado. Então este estado Stott começa o dia, então vamos anexar seu método auxiliar ao clique do nosso botão. Vamos salvar, inspecionar o elemento e então eu acidentalmente digitar. Isso é errado. Portanto, a mudança deve ser na mudança, não na mudança. E então vamos adicionar algumas novas informações aqui. Que tal Harry Potter Dot com e então Harry arrumou tudo legal. Vemos nosso objeto de estado. Temos um e-mail do Harry Potter Dot com, e a senha é só Harry. Ótima. Então agora vamos adicionar a lógica real que lida com a criação do usuário com este e-mail e senha do Fire Base. Então, o topo precisamos importar nosso aplicativo firebase do Firebase e faz você voltar diretamente, fazendo o ponto ponto barra cabeça para o seu registro Foshan. E, mais uma vez, queremos olhar para o domínio fora. Vamos criar um usuário com mal e senha e tem dois argumentos, e-mail e senha. Então é e-mail RG e senha. E antes de seguirmos em frente, vamos declarar que o e-mail e a senha e eles são extraordinários. É imposto sobre este estado ponto, e depois aqui dentro. Isso deve ser suficiente para criar um usuário, quem quer que queiramos pegar qualquer ar que possa acontecer durante esse processo. Mas, por enquanto, vamos simplesmente conselho não registre esses cabelos. Vamos nos certificar de soletrar corretamente. Poupe tudo agora, isso é excitante. Isso deve ser quase suficiente para se inscrever, mas há mais um passo que precisamos adicionar. Você precisa voltar para o conselho baseado em fogo agora mesmo. Vá em frente e redimensione este cabeçalho para a sua página de autenticação e, em seguida, antes de funcionar, precisamos ir para o nosso método de assinatura e habilitar e-mail e senha. O Sinan. Vamos habilitar esse salvamento. Agora devemos ser capazes de se inscrever em seu usuário, então eu quero tornar isso menor novamente. Então vamos tentar Harry na Potter Dot com e Harry Potter. Ótima. Então agora temos um usuário se inscreveu. Ouvinte. Lembra daquele ouvinte? Tínhamos índice Js. Esse é o que realmente está registrando. E vemos isso fora da mudança de estado. Nós realmente temos um usuário e temos um e-mail que temos Se seu e-mail é verificado, o que é falso. Eles mostram o nome, que não é nada por enquanto e um monte de dívida de base de fogo. Legal. Então sabe o que se nós realmente eu não tenho um bom usuário se inscrevendo. E se a informação deles tiver um ar? Bem, precisamos ser capazes de lidar com isso e mostrar isso para o usuário no caso de um formato ruim que e-mail ou sua senha é insuficiente, por exemplo, por isso é criar objeto de ar em nosso estado com uma mensagem de um string em branco. E então, se entrarmos lá, vamos simplesmente definir o estado do ar para o ar. Legal. E então, na parte inferior, eu vou ter uma div, que simplesmente tem o estado da mensagem de ponto de erro. Eu vou salvar. Lá vamos nós agora Digamos, por exemplo, que nos inscrevemos com um e-mail incompleto. Então, que tal Harry? Muito oleiro. Diz que os endereços de e-mail que o Valley formatou. E se tivermos um e-mail válido? Mas nossa senha tem apenas dois caracteres. A senha deve ter pelo menos seis caracteres. Mas e se tivermos o mesmo usuário tentando se inscrever duas vezes? Ótima. O endereço de e-mail já está sendo usado por outra contagem, então parece que tudo está funcionando. Vamos apenas adicionar um pouco de estilo. Assim, nem tudo está tocando um ao outro, então podemos simplesmente nos dar um estilo de margem 5% e isso parece melhor. E para ambos os nossos insumos, vamos dar-lhe um estilo de margem direito de 5% como qual margem? Certo? Cinco pixels. Então, conforme você redimensionar isso, ele vai começar a parecer muito bonito. Incrível. Agora que temos tudo registrando corretamente para o nosso lado do componente, vamos passar para também criar o componente de login. 7. Entrar de escrita: Agora vamos escrever nosso sinal e componente. O sexo J real vai olhar 90% idêntico ao que acabamos de escrever em Inscrever-se Pessoalmente, Quando eu estou desenvolvendo um projeto, Eu geralmente prefiro escrever coisas a partir do zero, porque ele me permite pensar sobre o que eu estou escrevendo e melhorar minha memória para revestimento futuro. Mas com isso sendo dito, copiar e colar economiza muito tempo quando feito corretamente e no interesse de economizar tempo para este vídeo. E, claro, vou simplesmente copiar e colar o componente. Mas se você quiser se dar um desafio, vá em frente e escreva este arquivo do zero e altere as coisas necessárias para que pareça um sinal e um formulário. Agora pausar aqui se você quiser fazer isso, porque logo após isso simplesmente mudará o sinal e a função auxiliar para usar o método firebase direito . Tudo bem, vamos. Isso é copiar e colar este lado do componente. Passe-o dentro de um sinal que esfrie. Agora temos que mudar é necessário coisas de assinar para assiná-lo. Então, em vez de um nome de classe de inscrição, vamos ter um nome de classe de login e na parte inferior faz você exportar login e não se inscrever . Em seguida, o nosso cabeçalho Texan para Element não vai dizer Cadastre-se, mas entrar e, em seguida, nosso botão também deve dizer Entrar e não se inscrever. Agora temos um olhar para este método auxiliar. É chamada de inscrição, mas queríamos dizer assinatura, e eles tiveram que mudar o nome desse método auxiliar para lado dentro e não se inscrever. Tudo bem, é só para trocas. Mas precisamos mudar nosso método agora. E em vez de chamar, crie usuário com e-mail e senha. Há um método do firebase no domínio desligado chamado Entrar com e-mail e senha. Incrível. Mais uma vez, vamos continuar pegando quaisquer erros que são baseados lança em nós e disse que como estado legal, Digamos e, em seguida, para não obter também são assinados no componente. Vamos entrar com Harry no potter dot com ou qualquer usuário que você criou para si mesmo. Inspecione o Omen Antes de chamar tapume, vamos entrar e, em seguida, diremos que o usuário entrou ou se inscreveu, e vemos que o e-mail é harry at potter dot com. Ótima. Então tudo está funcionando com nosso sinal e componente agora. Então, há mais uma coisa que podemos realmente adicionar a ambos os componentes agora. Um link para ambos os formulários, links e reagir Router simplesmente aconteceu, mas importar link de reagir em vez de modo que o topo. Vamos importar o comprimento de nós agimos rota. E então é tão simples como ter um div debaixo da nossa mensagem aérea com um Lincoln Side para a nossa página de inscrição. E então nós vamos apenas dizer, inscreva-se em vez disso. Vamos salvar, e aqui temos nosso link. Quando você clica nele, ele leva até o formulário de inscrição. Você pode até navegar para trás e navegar para o seu agora. Você provavelmente poderia dizer o que está faltando neste aqui. Nós também queremos que o link na parte superior mais uma vez vai importar link de reagir roteador e na parte inferior. Vamos ter um debate após mensagem aérea, que é um link que este também será . Faça login. Então este vai dizer já um ponto de interrogação do usuário. Que tal atribuí-lo em vez disso, mas salvar assinatura em vez e legal ambos os links funcionam. Doce, sim, alguns redirecionamento inter aplicação. Então agora nós realmente precisamos adicionar o redirecionamento baseado na autenticação, e nós também vamos adicionar alguma lógica redux em seguida. Então vamos fazer isso agora que temos a autenticação totalmente configurada. 8. Como adicionar Redux ao GoalCoach: Vamos fazer com que o usuário redirecione para o nosso componente de aplicação puramente com base em seu status de autenticação. Agora, para lidar com o redirecionamento, podemos aproveitar o componente histórico do navegador, que nos permite enviar rotas para a navegação deste aplicativo. Então o que, estamos registrando cônsul que o usuário foi criado ou assinado em enfraquecer simplesmente também chamar histórico do navegador. Não empurre nosso componente APP para navegar automaticamente para isso no Pidge, que salvamos o aplicativo pode já redirecionar você para a página APP. Isso ocorre porque o código base de fogo inclui lógica para salvar informações no navegador de forma semelhante aos cookies. Dessa forma, o usuário ainda estará conectado se ele revisitar o aplicativo. Se eles ainda não se desconectaram, então estão fora da mudança de estado. Listener retorna sobre o usuário porque fogo base para membros que o usuário através deste navegador. Ótima. Então agora que estamos no aplicativo, entanto, precisamos de alguma maneira de voltar ao formulário de autenticação e não autenticar o usuário. Mas primeiro, vamos adicionar outro método de histórico de navegador de substituição porque se o usuário, sempre em autenticar, simplesmente precisará redirecionar um sinal de que a cabeça fria de volta para sequestrar um sexo, e agora ele é tratado na autenticação. Vamos adicionar um botão Sino. É simples como adicionar um botão. Aqui seus nomes de classe serão B TN e BT Endanger, o que lhe dá essa cor vermelha perigosa. E, em seguida, no clique, vamos chamar um método que simplesmente diz um Sino o botão vai dizer Cadastre-se legal. Não há necessidade de declarar esse método auxiliar de saída dentro de sua classe. Terminar sessão e, em seguida, precisaremos adicionar algum código. Então é importar firebase de Voltar de um diretório a cinco dias e, em seguida, mais uma vez, vamos encontrar a base de fogo no automatizar e, em seguida, desta vez, vai simplesmente chamar um sinal de saída . Vamos salvar e há aquele grande cartaz e vamos clicar nele e lá vamos nós. Voltamos para você. R seno informar feijão precisa para que o próximo passo é ter nossas informações de usuário realmente acessível dentro. Nosso aplicativo seria útil ter o usuário disponível em adereços, porque o e-mail, informações e outras informações sobre o usuário serão particularmente úteis para conseguir isso, vamos adicionar alguma lógica redux a este aplicativo que permite que um para acessar as informações do usuário sempre que ele precisar. Então vamos passar para finalmente adicionar redux a esta aplicação. Vejo você lá 9. Registrar o usuário com o Redux: Queremos a capacidade de acessar as informações do usuário a partir da base de fogo e qualquer componente que criamos . Porque quem sabe quando essa informação de e-mail virá e vai? Para adicionar essa funcionalidade, podemos aproveitar a biblioteca relax e em um produtor usuário. Lembre-se disso com a adição de lógica Redux a um aplicativo. Pensamos nisso em três passos que está em uma constante, um criador real e adicionar o redutor. Então, primeiro, vamos adicionar um arquivo de constantes ao lado do índice como e Fire Base não, Sim, constantes ponto Js Vamos exportar uma constante por agora chamada Assinado em Agora ainda temos que configurar a leitura X em si dentro do nosso índice. Desonesto, precisamos de um componente de provedores. Então vamos importar provedor de reagir Redux. Além disso, vamos precisar importar que cria a função de loja do próprio Redux. Vamos ter certeza de que eu soletrou corretamente também. Vamos em frente e embrulhe tudo com esse componente provedor. Vamos embrulhar isto, eu presumo, colocá-lo aqui dentro. Aqui vamos nós. Enquanto eu salvar, vamos começar a ver algumas áreas dentro da candidatura dela. Assim, o adereço armazenar sua marca como exigido no provedor. Então, mais uma vez, precisamos chamar, criar, armazenar e dar ao nosso provedor uma propriedade de loja. Então vamos dizer que é loja é igual a loja. Mas agora nossa loja está esperando um redutor. Então vamos criar uma nova pasta dentro de produtores de chamada fonte e, em seguida, dentro de redutores. Vamos declarar um arquivo Js de ponto índice. Agora, antes de criarmos esse redutor, vamos primeiro definir o criador de inação que nosso produtor pode lidar. Assim também dentro da fonte. Vamos declarar uma ações mais frias, e essas ações terão um índice de queda de Sochi s e que precisamos importar que assinados em constante de são constantes. Então certifique-se de subir um diretório com o ponto, ponto barra Em nossa primeira ação será uma função chamada Log User. Ele terá um e-mail no parâmetro por enquanto, e este criador de ação cria uma ação para que tenhamos um objeto JavaScript simples cujo tipo será conectado e lembre-se de cada ação dentro de leituras precisa dessa propriedade type e, por enquanto, irá simplesmente retornar uma chave de e-mail com o e-mail que passamos em nosso longo uso. Então, isso deve ser suficiente para ações. Agora nós podemos realmente ter que reduzir er e definir que produtores para lidar com este criador de ação , então também vamos precisar importar Entrar de Constance Constance e vamos declarar uma variável de usuário com Let causa vamos modificar mais tarde com um e-mail sem por enquanto. Em seguida, vamos exportar por função de seta anônima padrão com dois parâmetros, o 1º 1 sendo o nosso estado, que seria o usuário bem aqui. Mas inicializamos automaticamente e depois a ação dela. E lembre-se do padrão com os produtores. Nós ligamos esse tipo de ponto de ação. Vamos lidar com o primeiro caso de assinados. Vamos pegar o e-mail da ação dela. Então vamos dizer que nosso usuário agora é igual ao novo e-mail que encontramos dentro aqui quando usamos abreviação de música, sintaxe, e eles vão e retornar este novo usuário. Lembre-se, com instruções switch, sempre queremos um caso padrão, e nosso caso padrão será retornar o estado, que é inicializado para este usuário aqui. Ótima. Agora que temos definido redutor, podemos importá-lo com um índice. Então vamos importar o nosso produtor do nosso componente de produtores e, em seguida, argumentar redutor dentro criar loja, que deve se livrar desse ar. Legal. Agora há outra coisa quando empurramos nosso aplicativo quando o usuário é válido para a página na com histórico do navegador, nós também queremos bloquear o usuário com o criador de ação que acabamos de definir. Então vamos registrar usuário importante de nossas ações e, em seguida, para chamar essa função, não temos um componente inteiro como de costume para Matt Dispatcher adereços e vincular nossa ação Creator. Portanto, podemos chamar isso stop props não log usuário porque, bem, nós não temos uma classe. No entanto, temos o objeto de armazenamento original acessível dentro deste ponto, então podemos realmente fazer um melhor do que o chamado de props stop e em vez disso usar o usuário de log de despacho de ponto da loja e enviar nossa ação de baixo para fora do nosso aplicação. Então lembre-se, precisamos passar nossa variável de e-mail. Em seguida, podemos encontrar esta variável de e-mail dentro do nosso objeto de usuário. Essa base de fogo nos dá o que salvo, então, parece estar em ou ações que realmente temos que retornar a ação. Vocês provavelmente pegaram isso, então, mais uma vez, vamos voltar ao índice Sochi S. Vamos tentar entrar. Então Harry Potter Dot com. Fizemo-lo mais cedo. Vamos entrar e parece que tudo funciona Então agora o que realmente precisamos fazer é rapidamente conectar o estado do mapa para adereços a este componente e conectado a um Redox para ver se realmente temos um usuário dentro do nosso aplicativo Redux. Então vamos importar conectar de React Redux. Vamos definir rapidamente um mapa. Estado para adereços função mapear Estado para adereços passou o argumento de estado. Vamos conselho não registrar este estado por agora para ver se realmente encontramos um usuário lá virou um objeto vazio dessa forma. Ele não joga herdar Atis. Vamos conectá-lo. Teremos o nosso mapa Estado para adereços não estavam mapeando quaisquer criadores de ação, então poderíamos apenas ter moinho para um segundo argumento. Vamos procurar a coisa toda, digamos e como fazemos, percebemos que temos algo dentro do estado e é o nosso objeto com o nosso e-mail dentro dele. Espetacular. Passamos muito tempo pegando leituras para aplicação, e funciona. Então, vamos passar para o próximo vídeo em que começamos a estruturar nossa página de anúncios 10. Desenvolver o componente de aplicativo: vamos desenvolver esta estrutura de aplicação. Queremos que um título faça, antes de tudo com um cabeçalho. Etiqueta de três elementos que apenas diz gols. Vamos acabar com este parceiro de aplicativos aqui. Sete. Div. Vamos ter uma cabeça de três oma tag que diz apenas gols legal. Não, o que é atitude vive? O 1º 1 vai dizer, eu iria e o 2º 1 vai dizer lista de golos. Vamos salvar agora. Claro, esses dois dias careciam gravemente de funcionalidade, mas vamos lidar com a criação desses dois Daves como componentes reais, um de cada vez. Primeiro, vamos lidar com a criação de um componente ouro anúncio. Então vá para a pasta Componentes e crie um novo arquivo chamado ad goal dot jsx na meta dot jsx. Não, é importar nosso código de reação padrão, então precisaremos importar o componente. Isto vai ser um componente de reagir. Vamos declarar que eles tinham classe de ouro, que estende componente. Vamos exportar e ir por padrão. Vamos trabalhar na renderização e retornando alguns Js excelentes. Então, em seu componente publicitário, vamos ter uma div geral. Em seguida, aproveitamos o bootstrap novamente e temos um formulário na linha onde o usuário pode digitar seu objetivo. Que eles querem o começo. Nós vamos ter um grupo de formulário já algumas botas bonitas, lojas estruturando para nós. Vamos ter o nosso campo de entrada. Seu tipo será texto. O titular do lugar será adicionar um objetivo. O nome da classe será formado controle, o que lhe dará algum estilo agradável. Então, mais tarde, teremos um botão ao lado dele. Então vamos dar-lhe algum estilo já de margem certo? Cinco pixels. Assim eles não se tocam quando estão alinhados lado a lado. E isso tem que ser um objeto interno aqui porque a propriedade style para entrada requer um objeto. Agora vamos lidar com a criação desse botão. É classe. Nomes será tiene e botões de sucesso, que eu acredito que lhe dá uma cor verde. É tipo será botão em um nome de subclasse. É o nome da turma. Agora vamos dar-lhe um título real, então vamos dizer Summit. E então vamos querer algum estado dentro deste componente. Vamos definir Construtor. Quem é adereços será o primeiro argumento super adereços. Então tivemos aquela parada orientada a objetos. Então vamos declarar nosso objeto de estado para o título que é um fluxo em branco agora podemos adicionar estão na função de mudança para o campo de entrada. Estamos ficando muito bons nisso. Então vamos declarar uma variável de evento. Bem, disse que o estado do nosso título para o evento ponto alvo valor deste mês seria memória rote para vocês neste momento, não é? No clique? Teremos uma função anónima. Chame um método auxiliar trabalhando para encontrar agora chamado Angle. Vamos fazer você adicionar uma menina e vamos simplesmente conselho ponto registrar o estado atual para verificar o que o usuário digitou como o título. Agora, enquanto salvamos, não vai arrefecer. Obter porque ainda precisamos importá-lo dentro do nosso real. Então é importar na meta a partir do mesmo diretório, então ponto barra adicionar ir. Vamos substituir esta div que recriou anteriormente chamado e objetivo com a garota do anúncio real, e será um auto na tag de fechamento. Então não se esqueça desse espaço extra. Vamos sentar e há um componente Advil. Então vamos inspecionar elemento e ver o que acontece quando eu clicar no botão enviar. Digamos que nosso objetivo será delinear a reunião e lá vamos nós. Temos o nosso blogue estadual. Então, antes de adicionar qualquer nova funcionalidade, vamos pensar sobre referências na base de fogo. Vá em frente e navegue até seu projeto de fibras e vamos clicar no banco de dados. Então, para encontrá-lo, vá para o lado do que você e apenas faça o banco de dados. Está em branco por enquanto, mas podemos começar a preencher nosso banco de dados com dados usando um componente estrela de referência com qualquer nome que gostamos. Pense no banco de dados como um enorme objeto JavaScript ou no objeto. Em geral, ele terá chaves que mapeiam mais dois objetos ou apenas valores como strings ou números. Cada uma dessas chaves tem um nome aleatório foram nome que especificou. Então vamos especificar nossa primeira referência a este banco de dados. Agora indo para a base de fogo ponto Js. Vamos definir uma nova constante chamada goalref dentro da nossa base de fogo. Bem disse que é igual à base de fogo que originalmente definimos, mas chamado de módulo de banco de dados . E então vamos começar uma referência chamando ponto hálito. Então passaremos o nome da chave dela, que serão objetivos. E, claro, se você quiser exportar essa coisa toda para que outros arquivos possam usá-lo agora em seu componente no objetivo , queremos importar esse goalref da nossa base. Então é importante Goalref do diretório Let's Go Back One para Fire Base Now em sua função auxiliar . Nós simplesmente precisamos chamar Goalref Doc Push, e então podemos passar qualquer objeto que queremos, e ele será atualizado automaticamente em nosso banco de dados. Então, por enquanto, vamos fazer um e-mail de teste, então teste esse ponto com. Então queremos que o nosso título seja este título de ponto de estado. Vamos ver o que acontece enquanto eu salvo. Vamos voltar à sua candidatura e mais uma vez, digamos, preparar a reunião ou delinear a reunião submeter. E lá vamos nós. Não temos registro, então vamos checar nosso banco de dados. E isso é que nós temos um novo esqui de ouro com nosso objeto, que tem um nome aleatório para ele. Não, mas com nosso e-mail e nosso título Cool Beans. Então vamos tornar este código mais eficiente. Nós vamos querer ter nosso e-mail real sobre o usuário. E, claro, podemos usar o truque de Essex para pegar nosso título, não para o estado. Nós simplesmente precisamos argumentar o título, e então queremos conectar isso à nossa leitura Excellence Import Connect da React Redux. Vamos declarar um mapa rápido. Estado a função de culturas, modo que a função ficou para adereços. Estado. Vamos pegar o e-mail do nosso estado e devolver o e-mail. E, em seguida, quando você realmente precisa conectar este componente para re patos, lembre-se, são o mapa. State to adereços é a primeira função, e então não temos nenhum criador de ação, então não será nossa segunda função. Estamos tão perto. Mas agora nós realmente precisamos pegar nosso e-mail deste adereços stop porque nós deveríamos estar recebendo isso de Redux. E então podemos usar a abreviação exata novamente e simplesmente empurrar isso. Então vamos salvar. E por que não registrar tudo isso em vez de apenas este estado fora? Porque agora estamos manipulando adereços. Salvar mais uma vez de volta para o aplicativo e eu soletrado Conectar errado na parte inferior para que ele salvo mais uma vez. E lá vamos nós. Que tal preparar o almoço? Mas submeta isso. E à medida que vamos para a base de fogo Cônsul, nosso e-mail agora é Harry na Potter Dot com. Ótima. Então, agora que temos nossa atualização de banco de dados com metas são aplicação também precisa atualizar os objetivos na interface do usuário. Então vamos abordar isso no próximo vídeo 11. Criando um componente de lista de metas: Vamos criar nosso componente para os sem objetivo. Agora crie um novo arquivo chamado Goaless Dutch X dentro de componentes goaless dot jsx Vamos importar são reagir código tão importante. Componente de reação para reagir. Vamos fazer uma boa classe sem gols, que se estende componente. Isso é exportação por padrão. A nossa lista de golos. Vamos fazer um pouco de sexo J por enquanto e retornar apenas um simples Dave como antes que diz, “ Go list”. Agora vem uma coisa nova e excitante. Vamos importar são goalref de cinco minutos. Volte um diretório e encontre o arquivo firebase que temos em um componente. Não gancho ciclo de vida para classe lista legal. Então, neste ponto, precisamos encontrar os objetivos que adicionamos à nossa referência de meta base de fogo em nosso banco de dados. Então, depois que nosso objetivo é componente, Renders irá anexar um ouvinte para o nosso goalref de bar baseado que agarra todos os adultos. Então vamos chamar o objetivo refs na função. No primeiro argumento de on, podemos ouvir vários eventos, como um evento filho adicionado, um evento filho removido para acionar uma promessa. Sempre que essas coisas acontecem dentro do nosso ouvinte, usaremos o evento de valor para acionar a promessa sempre que algo acontecer dentro da nossa referência de meta. Então vamos ouvir essa promessa com uma função de faraó variável e anônima. Olhe para o objeto de encaixe. Usamos scripts Java para cada função para mapear cada objetivo dentro desta rede. Mas vamos declarar um objeto de meta igual ao valor de ouro. Encontramos esse valor de ouro chamando ponto em movimento. Vamos registrar o objeto por enquanto, só para ver se a referência da base de fogo está funcionando. Legal. Digamos e lembre-se, ainda precisamos importá-lo com um aplicativo dot jsx. Então vamos importar lista de metas do nosso novo módulo lista de metas e substituir essa div com ir lista. Não se esqueça que o espaço disse. Vamos inspecionar o elemento e verificar. Por favor, tenha alguns objetos de objetivo aparecendo, então temos nosso e-mail de teste no test dot com. Os títulos preparados, significa que temos um 2º 1 apresentado por Harry Potter preparou o almoço espero correr e seus poderosos são convidados. De qualquer forma, você vai notar que isso é realmente em tempo real, também, Então, se eu adicionar outro objetivo, participar da prática de Quidditch, por exemplo, praticar, submeter e todos os nossos objetos objetivo recarregam automaticamente porque a base de fogo está acontecendo em tempo real, graças ao nosso apóstolo ouvinte. Então nós queremos fazer no goalless Dajae X é preparar sob Ray de gols. Então, vamos fazer de metas um array vazio aqui mesmo. E então iremos em frente e empurraremos todos esses objetos de ouro que estavam pegando de nossos ouvintes. Para cada função, vamos simplesmente conselho ponto registrar nossos novos objetivos com nossos objetos de objetivo e realmente com nosso objeto de ouro para apenas interessados no e-mail e título. Por enquanto, em vez de declarar um objeto dourado, vamos apenas ir em frente e pegar o e-mail no título de Golden Bell. Vamos continuar usando nossos truques SX e enviar e-mail e o título. Vamos salvar o nosso Conselho deve recarregar. Vamos em frente e adicionar uma nova tentativa. Por isso, agora temos os nossos três objectivos. Está no treino de Quidditch para o almoço durante a reunião. Não, está em um novo gol. Pergunte a ela mineração, mate a conta e lá vamos nós. Temos nossos quatro objetivos raça renderização incrível. Então vamos adicionar alguns leitores lógica agora para que possamos reconhecer esses objetivos como adereços em sua aplicação para qualquer componente que queira usá-lo. Vejo você no próximo vídeo 12. Reduzir metas na loja do Redux: Vamos adicionar alguma lógica Redux a este aplicativo que lida com a definição de nossos objetivos em adereços no mesmo lugar em que atualmente os registramos. A constante essencialmente terá um criador de ação que define os objetivos globalmente em nossa loja. Lembre-se de que devemos abordar esta questão em três etapas. Primeiro, vamos adicionar uma nova cabeça constante para Constance Dot Js. Vamos declarar um conjunto de metas. Metas constantes são iguais a metas definidas. Agora vamos declarar um criador de ação dentro de nossas ações. Index Dodgy. Sim, precisaremos importar novas constantes, claro definir metas. Já posso ver. Ainda tenho de guardar o ficheiro dos armários, por isso certifica-te de que é seguro. E vamos exportar uma nova função chamada metas definidas. Você terá um argumento, os objetivos que nós, é claro, passamos como um direito. Vamos encontrar uma nova ação. Seu tipo será definido metas, e então é dados. Pouco tem um mapa de esqui dourado para os objetivos que passamos como parâmetro, e então usamos nossa abreviação Essex para que não tenhamos que especificar que os objetivos são ouro porque a chave e o valor são exatamente os mesmos. Então não vamos devolver essa ação. Ótima. Esse foi o segundo passo. Agora, hora do terceiro passo, adicionando um produtor. Agora vamos ter um momento para pensar como vamos adicionar este redutor. Poderíamos apenas ter outro caso em nosso produtor padrão já que lida com a definição metas com metas definidas. No entanto, isso significaria mudar nossa lógica de estado inicial de usuário para algo mais extraído em global. Então, em vez de fazer isso, deixa para cima para uma abordagem diferente. Vamos dividir os redutores em dois redutores. Um será chamado produtor usuário dot gs e outro chamado produtor Objetivos Duchy s. Então vamos renomear este padrão para reduzir o seu usuário dot gs. Uma vez que podemos ver que estamos manipulando nosso objeto de usuário neste, vamos renomeá-lo para produtor usuário dot Sim. Então teremos um novo arquivo chamado “Objetivos do Produtor Dot Janice”. Nossos objetivos de redutor irá importar seccionais do arquivo Are Constants. Não se esqueça de voltar. Um diretório para Constance. Agora precisamos exportar por padrão função era anônimo. Então aqui está a função anónima da era. Ele terá dois parâmetros. Primeiro, um parâmetro de estado definido para matriz vazia inicial porque nossos objetivos serão sempre uma matriz como nós estamos fazendo-os em nosso ouvinte baseado fogo em ponto sem objetivo jsx, e então teremos uma ação como de costume para um produtor. Siga o mesmo padrão e ative o tipo de ponto de ação. Então lidaremos com nosso primeiro caso, que é metas estabelecidas. Vamos graduar nossos objetivos a partir da ação, e então nós transformamos essas metas como nosso estado redutor para as escolas. Eu não me lembro. Switch instruções sempre precisa de um profundo todos os casos em que irá retornar o nosso estado, que é esse array vazio. Vamos salvar e grande aparência como nós estabelecemos metas estabelecidas para nós agora. Há um problema, embora você já tenha apontado. Agora não temos nenhum arquivo Js de ponto de índice padrão, então nosso redutor geral vai estar faltando. Vamos corrigir esse problema no próximo vídeo. 13. Como pentear nossos redutores: agora que temos que separar redutores em uma pasta redutor, precisa de alguma forma combiná-los em um produtor geral. Felizmente, Reduction Apps com uma função redutor combinada que nos permite fazer exatamente isso. Então, vamos declarar nosso arquivo Js ponto índice dentro de produtores em um muito top Vamos importar redutores combinados de Redux. Agora nós simplesmente precisamos importar tanto o nosso produtor, usuário e produtor Gulf. Vamos chamar nosso usuário produtor de reduzir seu usuário. E então nossos objetivos serão os objetivos dos objetivos do produtor. Não, é simples como exportar um padrão. Os produtores combinados funcionam agora, a fim de passar nosso usuário e nossos objetivos dentro do redutor combinado em um único produtor geral. Nós apenas criamos objeto. Nós vamos ter um mapa chave de usuário para o nosso usuário produtor, e ele vai, Manter mapa para o nosso produtor metas nós. Vamos inspecionar o elemento. E como podem ver, nosso produtor está a trabalhar bem porque não temos herdeiros. Legal. Agora o que podemos ter quebrado é o nosso anúncio JSX dourado e, de fato, não estamos retornando e-mail da ST mais porque, como você pode ver em nosso objeto de estado, temos um produtor de ouro e um produtor usuário agora não mais o e-mail. Então vamos em frente e conselho ponto log estado em ouro ponto jsx em ST. Vamos ver como o estado realmente se parece. Então, como vemos Estado e adicionar Golden, JSX tem nosso objeto de usuário e nossos objetivos objeto também. Então, vamos precisar pegar usuário em vez de e-mail e retornar nosso objeto de usuário. E se tentasse adicionar um objetivo, não funcionaria. Não conseguimos receber e-mails dos adereços de ações. Precisamos obtê-lo a partir deste usuário stop prop start, porque é isso que estamos realmente retornando agora em nosso estado de mapa para adereços. Vamos em frente e salvar. Vamos nos livrar desse registro de pontos do conselho. Há um monte de coisas atormentando nosso conselho agora, então vamos também ao nosso índice Dodgy é nosso global e retirar ou apenas comentar esses dois registros do cônsul Por enquanto, vamos economizar e então, claro, seguro no Golden JSX, e isso está olhando muito melhor. Vamos ao JSX. Remova o registro de dúvidas do conselho também, tão bom e comenta. Você pode precisar mais tarde. Foram deletados, se quiser. Legal. Então parece que está funcionando. Vamos verificar se ainda podemos adicionar um objetivo. Lembre-se que este é Harry Potter. Então, que tal praticar quando o guardião Leviosa é Levy Osa, não Livio viu aqueles de vocês que viram Harry Potter vão ter essa piadinha. Como você pode ver, ainda estamos adicionando novos objetivos em nossas metas. Objeto. Então vamos voltar ao objetivo de uma ação. JSX. Vamos realmente aproveitar o criador de ação que definimos anteriormente chamados ciclos porque agora que temos esses objetivos, gostaríamos de poder acessá-los dentro do suporte. Então, primeiro de tudo, vamos precisar importar metas definidas de partidas, e então precisamos importar são função de conexão do ator Redux, bem como, porque agora vamos conectar este componente à nossa loja Redux. Então vamos conectá-lo depois de não e não por enquanto, só para que ele esteja conectado. E então, ao invés de limpar toda a função de envio do mapa de adereços, eu sei que só precisaremos da função de metas definidas por enquanto. Vamos em frente e adicionar isso aos nossos adereços e então soletrarei metas erradas. Vocês provavelmente pegaram que nunca vão. Aqui temos o Segel e agora, em vez de apenas os objetivos de registro do cônsul. Vamos chamar metas definidas de nossos adereços de Ouro, vamos dizer. E, em seguida, uma maneira de verificar se esta função de metas definidas realmente funcionou é declarar um estado de mapa para adereços, função que leva o nosso estado e, em seguida, retorna nossos objetivos do estado como um objeto. Vamos retornar metas e, em seguida, dentro de uma função de renderização. Isso vai colocar muito na tela, mas vai mostrar o que precisamos. Então vamos renderizar isso, aparecer metas e ver se estamos realmente conseguindo salvar. E então ainda precisamos discutir o estado do mapa das culturas em nossa função de conexão. Não se esqueça de fazer isso, diz que salvá-lo recarrega. E lá vamos nós dentro dos objetivos de estoque de prop que vemos em todos os objetos do Firebase. Ótima. Então agora podemos passar para realmente renderizar esses objetivos na tela, finalmente. Vejo você no próximo vídeo 14. Mapeamento da lista de objetivos: antes de darmos um passo adiante, vamos adicionar algum estilo a todo o nosso componente jsx ponto app. Assim, não está mais tocando no lado esquerdo da tela. Lembre-se, com estilo, precisamos paixão em seu objeto. Vamos dar-lhe uma margem de cinco pixels, e ele precisa estar dentro de uma força. Legal. Agora vamos para o “sem golo “James Sex”. A fim de renderizar nossos objetivos na interface do usuário, nós simplesmente precisamos chamar a função de mapa sobre os objetivos de estoque stop prop. Agora vamos precisar envolver essa lógica dentro de um diff em nosso JSX Stick fora essa tag sem objetivo que limparia algumas chaves onde podemos começar a usar alguma lógica. Então vamos chamar isso de adereços de parada, temos metas, não cumprimos, e então vamos mapear cada gol um de cada vez. Inferno. Vamos apenas voltar. Eu faço isso simplesmente, diz o título do ponto dourado. Por enquanto, vamos levá-lo para cima. Como você diz, podemos ver todos os objetivos renderização na tela. Vamos inspecionar o elemento, e você percebe que reagir é reclamar que cada criança, uma matriz, deve ter uma propriedade chave única. Agora há um truque que podemos usar com a função fosca. Há um segundo parâmetro opcional que podemos envolver com Goal chamado Índice. Então podemos simplesmente argumentar a chave como índice aqui. E então teremos esse número atribuído a partir do índice. E então esse aviso vai embora. Então vamos precisar de muito mais informações para cada um dos nossos itens de ouro. No entanto, em vez de explodir uma função de renderização com um monte mais JSX para fazer com que o Golden pareça agradável. Vamos declarar um novo componente de item de meta. Ele vai olhar algo como isso com item objetivo bem aqui. Ele terá sua chave de índice. Claro, eles também querem dar a ele a propriedade de ouro assim como esta. Então, vamos declarar esse item de meta por enquanto, diretamente dentro de componentes, o novo item de meta de arquivo não JSX. E então vamos fazer disso um componente de reação. Então importar reagir componente de reagir e você sabe o que vem a seguir. Precisamos fazer disso uma classe real que estende a característica componente de ainda foram renderizados algum sexo J. Por agora. Vamos voltar. Isso diz item de ouro. Vamos exportar por padrão. Gol. Eu agora precisamos importar item objetivo em nossa lista de metas tão importante do deslizamento de É no mesmo diretório. Então fazer esse ponto cortar o que é comentar Dave aqui e depois comentar em nosso item objetivo com Índice de Kiev e nosso objetivo fora do gol. Vamos em frente e remover o primeiro, mas seguro. E como você poderia esperar, todos os nossos itens de objetivo anteriores com os títulos foram substituídos por itens de ouro que apenas dizem Go Então vamos em frente e conselho adotar Log O que esta parada adereços Ouro parece desde que passamos em. Cada um desses objetivos salvar e vamos inspecionar o elemento. Então, cada um desses adereços tem um objetivo com um e-mail em um tipo legal. Então é declarado feminino e uma constante de título que para este ciclo de prop stop. E agora vamos estrutura são JSX real para cada um desses itens de ouro para torná-los realmente agradável . Então, no geral, Div, primeiro lugar vai ter um pouco de estilo. Sua margem também será de cinco pixels, assim como o componente ficar fora item da escola de tecnologia. Eles não querem um elemento forte que apenas faz texto. Ambos os homens vão embrulhar o nosso título com ele. Então queremos justiça ao lado do nosso título que diz, Enviado por quem quer que o e-mail seja, vamos em frente e embrulhe o e-mail dentro M tag. Então, assim é itálico, eu diria e agradável. Já está parecendo muito melhor. Agora que fizemos a nossa lista de golos da Base de Fogo. Com a nossa lógica Redux combinada, podemos avançar para manipular ainda mais o Firebase e o Redux adicionando algumas funcionalidades de ouro completas . Dessa forma, outros feiticeiros além de Harry podem realmente completar esses objetivos que Harry submeteu. Vejo você no próximo vídeo. 15. Completar um objetivo: antes de avançarmos para completar os objetivos. Vamos tomar mais um momento para arrumar aplicativo dot jsx para um. Vamos fazer este título. Na verdade, Gold Coat, agora que temos uma lista de golos, vai declarar outra etiqueta de quatro anos que diz gols. Assim, temos um bom cabeçalho para uma lista. Agora vamos jogar em alguns divisores inter componente, que podemos adicionar com algum imposto de RH auto envolvente. Teremos um depois do anúncio e um depois do sem objetivo. Legal. Isso parece muito melhor. Agora vamos adicionar a funcionalidade ao nosso aplicativo que permite que os usuários realmente concluam metas. Completar metas simplesmente removerá o item de cliques da lista de metas e movê-los para uma nova lista chamada metas concluídas. Cada item do objetivo concluído mostrará quem o completou, não quem o enviou ou escreveu, mas quem o completou como o sol no usuário. Então vá para Dourado Adam Dot JSX e nós vamos adicionar um novo botão. Vai estar ao lado do nosso Fan e-mails. A mancha de classe para este botão será alguns Bouchat classe stands beleza em Beleza e SM, que significa botão pequeno e botão primário. O texto dirá completo. Vamos verificar isso. Deve ser um bom pequeno botão azul doce e vamos em frente e dar a este span algum estilo. Uma margem direita de cinco pixels. Assim, não está bem ao lado. Margem direita, cinco pixels arrefecer. Isso parece melhor. Então, à medida que clicamos, nada acontece ainda porque ainda tínhamos que adicionar um método de ajudante de objetivo completo. Então, no clique deste botão, vamos chamar este estoque de ouro completo. E agora vamos pensar sobre o que realmente queremos alcançar com nosso método completo ajudante de objetivo . Primeiro, precisamos de alguns pesos. Adicione este ouro a uma lista de metas completas no banco de dados. Tive que completar os golos dos mortos Api. Próximo. Precisaremos remover esse objetivo da referência de metas. Não, vamos resolver o primeiro problema. Primeiro, precisamos de uma nova referência agora à nossa base de dados. Vamos exportar um novo ref chamado goalref completo e assim como antes, com um ref para objetivos, você simplesmente precisa chamar Ref, Você é uma criança? Isso será objetivos completos. Vamos salvar as leituras. Importe esse Goalref completo em nossos componentes de item de meta de volta um diretório muito longe bits. E agora vamos pensar sobre os dados que realmente queremos. Claro, queremos o título do nosso objetivo. Mas qual e-mail queremos? Deseja o e-mail enviado que está sendo processado aqui, ou você deseja o e-mail do usuário que está assinado no momento? Bem, queremos o usuário que assinou. Então, como fazemos isso? Fazemos isso conectando-se a uma loja Redox. Então vamos importar conectar de React Redux e conectar este componente à nossa loja Redux. Então primeiro precisamos do nosso mapa. Estado para função Props passou um argumento de estado. Encontraremos nosso usuário em ST, então simplesmente devolveremos nosso usuário. Então podemos argumentar esse estado para adereços aqui dentro, e eles não estavam vinculando nenhuma ação. Então vamos passar um moinho como o segundo argumento para se conectar. Vamos salvar Agora vamos encontrar o nosso e-mail deste usuário stop adereços dot, e então precisamos encontrar o nosso título a partir deste adereços stop. Eu vou de uma maneira semelhante que fizemos para a função de renderização. Vamos tirar este registro de console por enquanto e então vamos em frente e Conselho não registrar e-mail bem como o título para depurar isso. Então, como nós salvar, mas suspeitar do elemento, mas no console, e agora ele está reclamando que estão completos. Goalref ainda não está sendo usado, mas não se preocupe, nós não vamos usá-lo ainda, disse completar um e-mail para completar É Harry Potter, eo título é solicitado dinheiro para a bola. Vamos sair e criar um outro usuário inteiro para que possamos ver se estamos recebendo o e-mail apropriado porque fomos assinados como Harry Potter. Então, sobre Ron em weaselly dot com, a senha será executada facilmente. O que? Cadastre-se. Não, está completo. Preparei a reunião e diz Ron Weasley, como podem ver isso, então agora tudo o que precisamos fazer é usar um goalref completo e empurrar essa informação para o nosso fogo com base em sua. Então, enviaremos o e-mail, bem como um título. Vamos salvar. Digamos que o Irã lhe pediu dinheiro para o baile. Vamos checar nosso banco de dados Firebase agora. Então temos uma nova referência de objetivos completos com um novo objeto em. O e-mail está funcionando facilmente, eo título é solicitado seu dinheiro para o barco. Incrível! Agora que temos uma de duas coisas trabalhando com nosso método ouro completo, podemos passar para o 2º 1, que é remover o objetivo da referência de metas. Dessa forma, não teremos que completá-lo mais de uma vez com mais de um usuário. Vejo você no próximo vídeo. 16. Removendo um objetivo: Vamos enfrentar o segundo passo em um método de ajudante de objetivo completo. Teremos que adicionar a lógica necessária para remover esses itens da lista de metas assim que alguém clicar em completar neles. Porque, claro, poderia ser uma cena estranha se Ron já completasse o gol como lembrando a bola. Mas alguém disse que chamado Viktor Krum pensou que ela ainda estava disponível. Então, para remover objetos de um banco de dados baseado em fogo, precisamos saber seus valores-chave. No entanto, não podemos saber o valor exato desses objetivos apenas olhando para o casaco. Precisamos verificar o conceito da base de fogo. Observe como as chaves para cada um desses objetivos se parecem com nossa string aleatória. Isso é porque são cordas aleatórias. Então, como obtemos o componente chave? Bem, precisamos começar adicionando mais informações para cada um desses objetivos, então volte para o ponto sem gol jsx. O que está em um registro de pontos cônsul desses objetivos que estamos recebendo de nosso snap para cada função. Então não ouro lá fora agora, mas o objetivo real. O que é salvar de volta para o seu aplicativo reagir e verificá-lo? Temos aquele objeto estranho com toda a informação da base de fogo. Mas também há uma chave aqui, e a chave é o encolhimento aleatório exato que precisará para remover o gol. Então vamos declarar uma constante de chave de servidor e disse que é uma chave de ponto dourado. Digamos que nossa constante servic e é igual a Golden keep. Agora tudo o que precisamos fazer é passado chave do servidor, juntamente com e-mail com direito à nossa matriz de objetivos com cada objetos de ouro, Digamos que ótimo. E agora essa chave de servidor deve estar acessível dentro da meta. Então vamos declarar uma constante de chave de servidor bem ao lado desta parada adereça esse objetivo uma vez que estamos recebendo nosso título. Por enquanto, vamos apenas Council dot registrar essas chaves do servidor. Sempre que um usuário clica neles como um salvamento e ele é concluído, você percebe que cada um tem uma nova chave de servidor. Agora o método de remoção é realmente bastante simples. Primeiro, vamos precisar da referência para a nossa respiração de meta, e então vamos criar uma referência adicional para o item de meta real chamando a chave de servidor filho . Isto será uma referência ao real dela, e então nós simplesmente chamamos a Base de Fogo é removida. Vamos remover este lote conselho salvar e vamos finalmente remover isso. Pergunte a ela mineração para o baile. Lá vai. Desapareceu. Então vamos checar o console Firebase. Agora. Temos apenas quatro itens e objetivos. Temos muito em objetivos completos. Oh, porque nós clicamos nele várias vezes. Então vamos em frente e apenas limpar esses dados uma das vezes. Só queremos um. Senão, vai parecer que Ron estava ansioso para pedir dinheiro para o baile. E vamos em frente e removê-los, preparamos a reunião e preparamos os almoços. Eles não são realmente relevantes para todo o tema que temos acontecendo aqui, como você provavelmente pode concordar. Maravilhoso. Funciona. Então, agora que temos objetivos completos totalmente funcionando, vamos passar para o último componente deste aplicativo, que é a lista de metas concluída que irá renderizar logo após os objetivos. Vejo você lá. 17. Como adicionar metas completas ao Redux: Agora vamos cuidar de pegar os objetivos concluídos do nosso banco de dados. Vamos montar um componente sexual sem objetivo, então vá para os componentes. Novo arquivo completo lista de metas, não JSX. Este será realmente o nosso último componente para esta aplicação, então vamos torná-lo um componente reagir por dedicar relatório. Reagir componente de reagir. Então vamos estender componente de reagir antes de fazermos qualquer outra coisa. Lembre-se de exportá-lo por padrão. Lista completa de golos. Vamos renderizar alguns JSX por enquanto. Acabei de retornar uma div que diz Lista completa de golos. Mas agora vamos em frente e emendar nosso aplicativo dot jsx componente. Temos outra seção. Desta vez vou dizer objetivos completos. E, em seguida, é claro, você deseja importar são lista de metas completa. Lista completa de golos. Então vamos incluir esse novo JSX em nossas funções de renderização. Lista de golos batida seria salvar e é recargas. Lá vamos nós. Temos objetivos completos em uma lista completa de metas. Legal. Então, agora vamos voltar para o nosso componente completo sem objetivo. Acredito nestes outros, por enquanto. E lembre-se de como usamos o Goalless para atingir nossos objetivos. Começamos com o componente ID Mount Lifecycle Hook. Vamos adicionar isso, certo? Nenhum componente de classe fez fosso. E depois ouvimos o nosso goalref. Lembre-se, nós criamos um goalref completo em nossa raposa base de fogo. Então volte a um diretório e encontre o Firebase Pop. Então usamos o ouvinte on de cada evento de valor que a base de fogo lança no goalref completo . Então lembre-se, declarada uma matriz de ouro, vamos fazer a mesma coisa com um objetivo completo já e, em seguida, para cada valor neste piscar , olhar para o tempo Gold Wanted. Assim, da mesma forma, vamos olhar para o objetivo completo, um de cada vez. Vamos declarar por e-mail um título sobre o objetivo completo. Morra e então vamos simplesmente empurrar. Cada um destes não é você é o título feminino certo. Finalmente, usamos um criador de ações para definir nossos objetivos. Usamos a mesma coisa com conjunto concluído, mas por enquanto vamos simplesmente registrar pontos do conselho esses objetivos para ver como eles se parecem. Vá em frente e salve. Inspecione o elemento. Como podem ver, temos objetivos completos agora e é um conjunto de um, que é aquele em que Ron Weasley acabou de pedir dinheiro para o livro. Legal. Agora precisamos adicionar a lógica Redux necessária para obter esses objetivos completos disponíveis dentro de adereços. Então, vamos dar três passos necessários para fazê-lo. Primeiro, vamos definir uma nova constante dentro de constantes. Tocar. Sim, assim como o Sickles. Vamos exportar um conceito que diz Conjunto concluído, Conjunto concluído. O segundo passo é ir para nossas ações e criar um novo criador de ação. Isso é exportação. O conjunto de funções concluído. Tomaremos nossos objetivos completos. Vai parecer muito parecido com os ciclos. São praticamente métodos de irmãos. Então a ação de custo é igual a tipo, que é a segunda alegada antes de eu ir mais longe. Bem, antes de eu digitar isso lá vamos nós. Antes de ir mais longe, vou importar o conjunto completo da nossa Constança. E agora nós podemos realmente retornar nossos dados, que são objetivos completos exatamente como acima de um valor de Essex curto como nossos objetivos. E então queremos retornar a ação muito necessária para ter isso. Não se esqueça de salvar constantes. E agora temos de alterar o nosso redutor. Então, temos um redutor separado para metas. Então também vamos precisar de um redutor separado para completar os objetivos. Então vamos ter um redutor competiu metas, não jazz, e isso vai parecer 90% idêntico ao nosso redutor de metas, mas ainda curto o suficiente para escrever rapidamente sem ter que copiar e colar. Então vamos importar conjunto concluído, primeiro lugar, de constantes. Mas também começamos a praticar redutor de escrita, o que sempre ajuda. Vamos exportar por padrão na função de seta, teremos um parâmetro de estado definido para um novo vazio inicial ou direita a ação como nosso segundo parâmetro. Como de costume, vamos ligar a ação apertada. Bastante fixe. Ligando isso, cuidarei do nosso primeiro caso, que está concluído. Encontraremos nossos objetivos completos da ação, e então também retornaremos esses objetivos completos porque esse é o novo array que queremos . Então, por padrão, retornaremos feijão legal estado. Agora há um passo final que precisamos ir para indexar dot j redutores Essman e importar metas completas também. Do nosso novo produtor, eu tenho certeza que por favor tit metas para ter certeza de que tudo é nome corretamente. Então, finalmente, vamos incluir dentro redutores combinados objetivos completos. Vamos salvar e incrível. Acabamos de configurar a lógica Redux para objetivos completos. Então vamos passar para o próximo passo e ligar o nosso completo sem gols para a loja Redick para que eu possa realmente ver gols completos e adereços e renderizá-los 18. Objetivos concluídos de renderização: temos toda a lógica dos nossos leitores configurada para completar os objetivos. Agora só precisamos usá-lo. Então vamos importar a função Connect de React Redux. No topo desta lista de metas completa Componentes Importar Conectar de React Redux e , além disso, vamos importar esse conjunto concluído Action Creator concluído de Vamos Voltar Um Diretório para Ações. Agora nós simplesmente precisamos conectar este componente à nossa loja Redux. Então, vamos adicionar a função de conexão na parte inferior. Então nós teremos não para o nosso primeiro argumento por agora porque nós não temos um estado de mapa para adereços função ainda. Mas nós temos em ação aqueles são você definido completado em um objeto como nosso segundo primer. Agora nós simplesmente precisamos chamar este prop stop, disse Stutts. Concluído, onde atualmente registramos são metas completas no conceito. Então esta parada adereços conjunto completado de objetivos completos. Agora não vamos reconhecer um objetivo completo como adereços até que criemos o estado do mapa para adereços função. Então vamos declarar agora. Função que o estado para adereços, toma estado como o primeiro parâmetro, e então vamos agarrar, são objetivos completos do estado e retornar metas completas como nosso objeto agora, em vez de registro conselho, completa metas. Quando criamos em nosso ouvinte baseado em fogo, vamos simplesmente o registro de pontos cônsul adereços pontos objetivos completos em uma função de renderização para ver se nosso conjunto concluído Action Creator está realmente funcionando. Agora, antes de irmos mais longe, faz você argumentar Estado Mapa para adereços dentro de sua função de conexão. Como eu salvar e inspecionar o elemento que vemos esta parada adereços ponto objetivos completos como uma matriz de um valor, que é o nosso e-mail com Ron Weasley pedindo seu dinheiro para a bola. Ótimo. Então agora nós simplesmente precisamos configurar o JSX para mapear nossos objetivos completos. Ele funciona de forma semelhante à nossa lista de objetivos, então vamos adicionar algumas chaves para alguma nova lógica. Vamos mapear os objetivos completos, um objetivo completo de cada vez. Temos uma nave telefônica de verdade. Vamos tirar esse registro do conselho que não precisamos mais e lembre-se, com a lista de metas, usamos o índice então novamente usaremos arte no próximo ano. E com o sem objetivo, tínhamos renderização de itens de objetivo para cada um, mas não precisaremos de um componente de item de meta completo necessariamente porque JSX é tão curto que ele não exige seu próprio componente. Além disso, não adicionaremos funcionalidade extra no momento especificamente a esses itens . Então vamos pegar nosso título e e-mail, Primeiro de tudo, do objetivo completo. Ninguém quer devolver um pouco de Jazz X. Será uma div simples cuja chave será o índice que pegamos de nossos objetivos completos nessa função que terá uma forte tag wrap em torno do nosso título. Vamos dizer que foi completado por esta pessoa. Teremos algumas etiquetas M para um e-mail em itálico, digamos, e há Ron Weasley pedindo para ela minar a bola na nossa lista completa de golos. Agora, antes de terminar esta aplicação, vamos colocar a cereja no topo e adicionar um botão claro tudo a esta lista completa muito simplesmente em um botão. Depois dessas chaves, então tem um botão. É classe. Nome será BT n e botão primário. Vamos ter um botão azul. Digamos que claro, tudo é um texto. Então aqui vamos nós. Limpe tudo e rapte o JSX. Vamos adicionar H R. Tag após o nosso completo sem golo dá alguma separação entre aquele botão de sair e o claro violação botão todos. E, em seguida, vamos chamar um método auxiliar que irá definir agora chamado Este ponto claro concluído e, em seguida, precisamos definir claro concluído Vamos fazê-lo aqui. E a lógica é realmente muito simples e curta. Nós simplesmente precisamos chamar o goalref completo, usar a base de fogo, definir a função e passar uma matriz vazia. Então este método funcionará passando esta matriz vazia, que irá limpar toda a referência, redefinindo-a para algo vazio, digamos, digamos, e uma vez que ele termina de recarregar, digamos que o Irã também participou da prática de Quidditch para que tenhamos outro objetivo completo em nossa lista. E vamos limpar tudo. Boom, eles se foram todos. E como eu recarrego, sim, tudo continua igual. Excelente trabalho reterminou o último treinador de objetivos de aplicação neste curso. Espero que tenha aprendido muito sobre React e Redux ao criar esta aplicação e asoutras três. Espero que tenha aprendido muito sobre React e Redux ao criar esta aplicação e as Se você planeja continuar trabalhando neste, no entanto, entanto, há uma parte de resumo e desafio chegando em seguida, mas um trabalho incrível novamente. Aprendemos muitos conceitos novos na criação deste aplicativo, como roteamento firebase, autenticação e como lidar com o banco de dados. E agora estou tão animado para ver quais aplicativos vocês fazem no futuro. Vá em frente e use esses aplicativos como exemplos são modelos para seus futuros. Parabéns. E fique com o Cody.