Transcrições
1. Boas-vindas no curso: Bem-vindo à Academia React para iniciantes. Neste curso, você vai aprender tudo o que você precisa saber para começar com reagir, para construir interfaces de usuário. Todas as nossas construções em um projeto real, coloque suas novas habilidades em prática. Ao longo deste curso, você estará construindo oito colegas aplicativo inspirado, que realmente mostra o que você pode fazer com reagir. Construímos quedas para agrupar suas ideias e organizá-las com listas e cartões, tudo enquanto fazemos notícias de componentes de reação. Estes também são editáveis, você pode clicar sobre eles para alterar os nomes e também os carros têm um modelo pop-up onde podemos alterar o conteúdo e também adicionar ou remover quaisquer rótulos. Este aplicativo nos dá a chance de entender reagir conceitos como passar dados com adereços, trabalhar com estado, formulários, roteamento, tipos de
componentes e ciclos de vida , métodos
personalizados e muito mais. Este curso é amigável para iniciantes,
por isso, se você é novo para reagir, vamos rever todos os conceitos básicos que você precisa para começar
e, em seguida, acelerar as coisas ao longo do curso para
dar-lhe uma compreensão mais profunda da reação. Embora já devêssemos ter uma familiaridade com HTML, CSS e JavaScript básico para tirar o máximo proveito deste curso, não
estaremos apenas construindo o front-end do aplicativo também. Também faremos uso do Firebase para criar um back-end para o nosso projeto. Isso nos dará um banco de dados em tempo real para armazenar todos os nossos dados. Ele persistirá depois que um usuário retornar e também quaisquer alterações que fizermos, como suplemento, remoção ou atualização no. Atualizaremos nosso aplicativo em tempo real, significa que as mudanças entrarão em vigor imediatamente sem a necessidade de recarregar a página. Também permitimos que os usuários se inscrevam e façam login no nosso gráfico. Isso permite que os usuários tenham seus próprios álbuns pessoais, que só eles podem ver ou editar. Além de aprender sobre coisas como renderização condicional, documentos, instantâneos, autenticação, salga e filtragem, ouvir alterações e também a API de contatos do React. Nós terminamos o curso aprendendo a construir seu aplicativo para produção e, finalmente, implantar para o resto do mundo para ver assim, se você estava interessado em aprender Reagir e quer construir um projeto estrangeiro ao longo do caminho, matricular-se no curso, e eu vou vê-lo na classe.
2. O que vamos criar: Este curso é totalmente baseado em projetos, que
significa que vamos construir este
aplicativo inspirado em Trello desde o início do curso até o fim. Vamos adicionar a este passo a passo, à medida que aprendermos mais sobre o React e o Firebase durante o curso. Vamos colocar em prática tudo o que aprenderemos sobre Reagir diretamente neste projeto para que você possa vê-lo na prática. O projeto que será construído ao longo de todo o curso vai ser inspirado pelo Trello. Se você não usou Trello antes, é basicamente um aplicativo que nos permite organizar coisas criando quadros, que é um tabuleiro para um determinado assunto onde podemos adicionar listas e cartões, listar ideias, é basicamente um aplicativo que nos permite organizar coisas criando quadros,
que é um tabuleiro para um determinado assunto onde podemos adicionar listas e cartões,
listar ideias,
pode criar rótulos, e muito mais. Neste aplicativo, vamos começar na tela inicial,
permitindo que os usuários façam login com um e-mail e senha. A autenticação será tratada no back-end usando o Firebase. Isso nos dará um login seguro e facilidade de inscrição, onde os usuários podem se registrar. Eles podem então criar quadros. Por exemplo, podemos definir nossas idéias para o verão. Podemos criar este quadro, podemos dar-lhe uma cor de fundo diferente, vamos para o verde. Podemos criar este quadro. Isso agora é salvo no banco de dados back-end, que é fornecido pelo Firebase. Podemos então entrar em nosso quadro, podemos criar novas listas para seção de nosso conteúdo. Por exemplo, podemos dizer lugares para visitar e também criar uma nova lista, coisas para fazer. Cada uma dessas listas pode ter cartões individuais, e podemos adicionar quantos cartões quisermos. Digamos que visitou Paris. Podemos então clicar nestas edições. Podemos editar o texto, podemos adicionar rótulos, podemos removê-los clicando neles mais uma vez, podemos então salvar nossas alterações e isso é exibido dentro de cada cartão. Podemos adicionar elenco sobre lista, como pintura casa. Isso também pode ser clicado e editado. Podemos adicionar vários rótulos, salvar nossas alterações, e todas essas alterações são enviadas imediatamente para Firebase e, em seguida, atualizadas em tempo real em nosso aplicativo. Isso significa que não precisamos atualizar nosso aplicativo para obter os dados de volta do nosso back-end. Isso é tudo imediatamente atualizado, como você vê aqui. Nós também podemos excluir nossos cartões, nossas listas, e também nossos álbuns, e todos eles se conectam também. Por exemplo, quando criamos um novo álbum, lista ou cartão, todos eles criados por um determinado usuário. O ID do usuário é armazenado em cada um, ou seja, por exemplo, se entrarmos em um desses quadros e depois excluirmos isso, isso também excluirá as listas e cartões correspondentes que estão vinculados a cada tabuleiro. Nós também podemos fazer login com vários usuários, e cada usuário só terá acesso às suas próprias placas que você criou, e você pode ver isso se nós sair e, em seguida, fazer login como um usuário diferente. Clique no botão de login. Em seguida, somos redirecionados para a visão do nosso quadro, onde
temos um conjunto diferente de placas criadas por este usuário. Vamos adicionar alguns exemplos de lista aqui dentro, e também placas. Estes são completamente independentes para este usuário. Esta vai ser a aplicação que vamos construir durante este curso. Este projeto nos permitirá demonstrar tudo o que você precisa
saber sobre React para criar aplicativos, também
aprenderemos muito sobre o Firebase, incluindo o banco de dados em tempo real, a
autenticação, a obtenção de atualizações no em tempo real, e finalmente, no final do curso, vamos fazer nosso site ao vivo, onde vamos empurrar isso para a produção para o resto do mundo ver. Espero que você esteja tão animado quanto eu para começar com este curso. No próximo vídeo, vamos percorrer algumas coisas que são necessárias para este curso
antes de entrarmos na próxima seção onde começamos a trabalhar neste projeto.
3. O que você vai precisar para este curso: Para começar, há apenas algumas coisas que você vai precisar e o fato de que você está fazendo um curso de tecnologia provavelmente significa que você já tem algumas dessas de qualquer maneira. Em primeiro lugar, vou usar o Chrome como meu navegador da web, mas você é livre para usar qualquer um que você preferir. No entanto, eu recomendaria o Chrome ou o Firefox, já que as ferramentas de desenvolvedor React, que usaremos, só estão disponíveis atualmente para esses dois navegadores. Para obter as ferramentas do desenvolvedor, faça uma busca por ferramentas reativas e como você pode ver aqui, temos as opções para adicionar ao Chrome ou também para adicionar ao Firefox que você pode encontrar neste link aqui. Eu recomendo que você vá em frente e baixe estes para Chrome ou Firefox, e isso vai realmente ajudar ao longo deste curso. Em seguida, temos o nó JS download, que está disponível no nodejs.org. Nós não estaremos usando nó como um back-end ou um servidor Web, mas é necessário para uma grande parte da ferramenta em que usamos ao desenvolver localmente. Vá em frente e baixe a última conversão de cromo para o seu sistema operacional e clique em “Avançar” através da instalação. Também precisamos de uma ferramenta de editor de texto, e usarei o Visual Studio Code, que você pode baixar do Code.VisualStudio.com. Você pode usar outros, se preferir. Mas este é um que eu realmente gosto e eu vou estar usando durante todo o curso. Ele também tem um terminal embutido, que funciona bem e vamos aproveitar isso ao construir nossos projetos. Novamente, qualquer terminal também é bom para usar se você quiser usar algo diferente. Mas para este curso, eu vou estar usando o construído para o código S. Se você gostaria de usar isso, eu recomendo que você vá em frente e faça o download para o seu computador e, em seguida, passar
pelo processo de instalação usual para o seu computador e, em seguida, isso é praticamente tudo o que precisamos para começar. Qualquer outra coisa que precisamos usar, como quaisquer pacotes do MPM, vamos baixar conforme percorremos o curso. Vamos agora passar para aprender tudo sobre o React na próxima seção.
4. Crie aplicativo react: Em Reagir dias anteriores, criação de um novo projeto envolveu muito trabalho de configuração. Tivemos que instalar e configurar ferramentas como bolha e Webb Park e o tempo de configuração poderia adiar muitos iniciantes. Agora temos uma ótima ferramenta chamada Create React app, que é uma maneira muito rápida e simples de
começar a reagir sem se envolver em toda a configuração inicial e configuração e também é oficialmente suportado também. Nós usamos Create React app do terminal, mas é apenas alguns comandos, então não se preocupe, se você não é um usuário de terminal regular. Na verdade, podemos até usar o fornecido no Visual Studio Code. Vamos abrir o Visual Studio Code. Se formos para o terminal e novo terminal, se você também tem um terminal separado que você gostaria de usar também, isso é completamente bom e não é problema em fazê-lo. Por padrão, ele será aberto no diretório home. Podemos usar o comando CD apenas para ter certeza,
então digite CD, em seguida, Enter, em seguida, vamos levá-lo para o seu diretório de usuário root. Podemos então digitar LS. Isso nos dará uma lista de arquivos e pastas para o usuário. Observe a área de trabalho aqui e é aqui que vou adicionar meus projetos. Eu vou para o CD na área de trabalho e pressione Enter. Você pode criar este projeto em qualquer lugar em sua máquina que você preferir. Quero manter isso na área de trabalho para facilitar o acesso. Em seguida, queremos executar o comando NPX, criar aplicativo React, separado por hífens. Então o nome do nosso projeto, que eu vou chamar, reage Trello e, em seguida, aperte Enter. Isso pode demorar um pouco para ser executado, pois ele precisa extrair todos esses scripts, dependências e módulos para reagir para executar. Observe o comando NPX no início em vez de NPM. NPX é uma ferramenta projetada para instalar e gerenciar facilmente pacotes CLI. Basicamente permite usar o app Create React, apenas desta vez sem a necessidade de instalá-lo em nosso sistema. Dê-nos alguns minutos para terminar e, em seguida, pausar o vídeo e eu vou vê-lo quando isso terminar. Certo, assim que tudo estiver instalado, precisamos mudar para o diretório do projeto. Podemos fazer isso digitando em CD reagir Trello, como diz no terminal, ou podemos arrastar sobre o projeto de nossa área de trabalho. Pegue a pasta do projeto, arraste isso e, em seguida, abra isso para arrastar isso para o código do Visual Studio. Você verá que isso abre automaticamente o terminal em nosso local de projeto. Agora você pode ir em frente e iniciar o servidor de desenvolvimento. Fazemos isso com um comando chamado estrelas NMP. Digite isso e pressione “Enter”. Isso irá então configurar o servidor de desenvolvimento no localhost 3000. Isso abrirá automaticamente no navegador ou pode navegar para localhost 3000,
assim como este, aperte “Enter” e agora tem um aplicativo básico React em execução no navegador. É por isso que precisamos ir para ver nosso projeto no futuro. A menos que você esteja executando em uma porta diferente. Se você quiser fazer alguma alteração, tudo o que você precisa fazer é ir para o editor de texto, depois para o diretório de código-fonte e o app.js. Não se preocupe com todo esse código no momento, vamos apenas descer aqui para os elementos p e dizer, “Estou aprendendo a reagir” salve isso. Salvar este arquivo automaticamente fará com
que o navegador recarregue e atualize com nossas alterações, que acabamos de adicionar. Não precisamos nos preocupar em atualizar o navegador após cada alteração. É isso agora para a configuração do nosso projeto. Em seguida, vamos rever o que todos esses arquivos e pastas são que foram criados para nós usando Create React app.
5. Arquivos e pastas do projeto: Pouco antes de avançarmos, quero dar-lhe uma visão geral rápida de quais arquivos e pastas on-line estão em nosso projeto, já que eles foram gerados para nós usando Create React app. Não quero presumir que sabemos o que está acontecendo aqui sem ir mais longe. Primeiro de tudo, no topo, temos a pasta de módulos do nó. É aqui que todos os nossos projetos, módulos ou pacotes são armazenados. Este diretório não é nada específico para reagir. Isso é típico de qualquer projeto de nó. Isso requer muito aqui se abrirmos, e este local também é onde qualquer um dos pacotes que instalamos também será salvo. Mais tarde no curso, vamos baixar pacotes como Firebase e React router usando NPM. Veremos estes salvos aqui dentro. Aqui também é onde nosso pacote real reage é salvo. Se rolarmos para baixo, há muito que precisamos descer para reagir,
reagir Dom, e também os scripts React, que vamos dar uma olhada em apenas um momento quando chegarmos ao pacote JSON. Em seguida, temos a pasta pública. A pasta pública contém nossos arquivos estáticos, como qualquer imagem que queremos usar, e também qualquer HTML. React tem este arquivo index.html. Se você abri-lo, rolando para baixo para baixo, isso não é muito conteúdo aqui dentro. Se passarmos para o nosso projeto dentro do navegador
e, em seguida, ir para ver fonte da página. Esta é a página que você vê aqui dentro. Ele não mostra nenhum conteúdo HTML real aqui. Mesmo que vejamos algo no navegador. Isto é por causa da tag de script na parte inferior, que é esta aqui. Lembre-se anteriormente dissemos que Create React app, tira as fotos de configuração, para que possamos nos concentrar na criação do nosso aplicativo React. Bem, esta é uma das coisas que ele faz. Ele usará o pacote web para
agrupar todos os arquivos e ativos que temos em nossos projetos. Em seguida, crie um arquivo de pacote como a saída. Esse arquivo é então injetado nos projetos usando o script na parte inferior. Ele os injeta em qualquer elemento DOM que escolhermos. Atualmente ele será emitido logo acima da div com o id de raízes. Este é um só aqui. Podemos clicar neste link do pacote, que é o último link aqui, e abrir isso em uma nova guia. Este é todo o conteúdo do nosso pacote. Não se preocupe com tudo o que está aqui dentro no momento, é tudo apenas gerado código para desenvolvimento. Se fizermos uma pesquisa, então procure por comando ou controle F, podemos procurar o texto que adicionamos, e procuramos por “Estou aprendendo reage”. Vemos que este texto está aqui em baixo. Este arquivo HTML também pode ser usado para adicionar scripts ou telefones também. Mas isso também pode ser frequentemente adicionado como módulos de nó. A próxima pasta que temos é a fonte e é aqui que vamos passar a maior parte do tempo durante este curso. É onde vamos adicionar nosso código bruto, todos os nossos arquivos JavaScript em componentes. Todos eles serão incluídos em nosso pacote, que acabamos de olhar. É assim que eles entram em nosso aplicativo final. Não há estrutura estrita sobre como podemos fazer isso. Somos muito livres para organizar todos os arquivos e pastas como quisermos. Embora seja comum incluir uma pasta de componentes no diretório de origem, faremos isso em breve. Vamos ter uma abundância de componentes de escrita prática também. Um componente é basicamente um bloco de código, que veremos com mais detalhes muito em breve. Em seguida, temos o app.css. Este é um arquivo CSS principal que contém algum estilo padrão. Em React, é bastante comum ver uma estrutura como esta, onde temos um arquivo CSS por componentes, e no caso aqui é o app.js. Este app.js é um onde fizemos nossas alterações no último vídeo. Novamente Reagir é bastante flexível com as coisas. Mas isso é muitas vezes usado como um componente principal de nível superior, ou um wrapper para o resto do nosso projeto, estaremos usando este arquivo para exibir nosso cabeçalho como isso será em todas as páginas e, em seguida, abaixo onde usamos um roteador para alternar entre diferentes componentes dependendo da página que estamos visualizando. Depois disso, temos o app.test.js. Este é um arquivo se você quiser testar em nosso projeto React, embora nós não estaremos cobrindo testes neste curso. Em seguida, temos o index.css. Este é um segundo arquivo CSS contendo esses estilos relacionados ao nosso index.js. Novamente, isto é apenas para separação e organização. Vou excluir este arquivo para manter todos os estilos bem juntos em um arquivo. É um tubo, vou remover isso, e depois abrir o index.js, porque excluímos esse arquivo, também
precisamos remover essa importação do index.css e salvar esse arquivo. Este é um arquivo JavaScript principal que será responsável por renderizar nosso aplicativo, o navegador. Na parte superior, nós importando tanto React e também ReactDom de nossa pasta de módulos nó. Em React primeiros dias, costumava estar em um grande pacote de reagir. Mas uma vez que agora pode ser usado para criar aplicativos móveis com React nativos ou até mesmo aplicativos VR. Toda a funcionalidade principal é agora armazenada neste módulo de reação e qualquer funcionalidade relacionada a aplicativos web, está agora em sua importação separada chamada ReactDom. ReactDom tem um método aleatório, que dizemos apenas aqui, que é responsável por renderizar o conteúdo para o DOM. Este método aleatório leva em duas coisas. Primeiro, temos o conteúdo que você deseja exibir, atualmente nossos principais componentes do aplicativo. Estes são os principais componentes da rota, como mencionamos antes. Ele é frequentemente usado como o wrapper do projeto. Ao usar isso em um arquivo, também
precisamos importá-lo por cima, assim como vemos aqui. Em segundo lugar, o local onde queremos que este aplicativo monte dois. Eu vi isso em uma nova linha, que está atualmente definido para um elemento com o ID de raízes. Que é o que olhamos anteriormente no index.html principal, o index.html público. Esta é a div com a raiz ID, que já vimos antes dentro do navegador. Então isso está basicamente dizendo, “Pegue meu aplicativo React e coloque-o aqui onde nós especificamos na página de índice.” A razão pela qual fazemos isso é porque nem sempre usamos o React para nossa aplicação completa. Podemos já ter um projeto existente, onde só queremos usar reagir em uma determinada parte. Para este caso, nossa página HTML pode ter muito conteúdo
existente e podemos simplesmente adicionar em um novo elemento para montar reagir. Você pode mudar isso para ser o que quiser. Podemos adicionar em algum código js X. Vamos adicionar um título de nível dois, um título de Reagir Treble. Então feche isso. Vamos olhar para este código js X com mais detalhes em breve. Mas é basicamente uma sintaxe que normalmente usamos em React, para misturar HTML e JavaScript juntos. Se salvarmos este arquivo e, em seguida, ir para o navegador, agora
vemos que nosso cabeçalho Nível 2 foi montado no DOM. Se recarregarmos a fonte de visualização, ainda
vemos que não temos o conteúdo. Tudo o que temos novamente é esta div com a raiz ID onde nosso aplicativo React foi montado. Vamos apenas mudar isso de volta, para os componentes do nosso aplicativo. Em seguida, temos o logo.svg, que é fornecido para os dados do aplicativo Create React
e, em seguida, também um arquivo de service worker. Este é um arquivo opcional para registrar um service worker. Não cobriremos os funcionários de serviço neste curso, mas eles costumavam fazer seu aplicativo funcionar off-line, muitas vezes para habilitar itens como notificações push. Se estiver usando o GitHub, também temos um arquivo gitignore dot já configurado. Isso é usado para excluir quaisquer arquivos que você não deseja enviar para o GitHub, como quaisquer informações confidenciais, contendo senhas
ou quaisquer arquivos grandes ou desnecessários, como os módulos do nó. Abaixo disso, também temos o package.json. Esse arquivo novamente não é específico para Reagir. É algo que você vai ver em um regular sem projetos. Ele contém informações sobre nosso aplicativo, como o nome do aplicativo, o autor, juntamente com quaisquer dependências que precisaremos para os projetos. Dentro das dependências, temos o react-dom listado, temos reagir e também temos os react-scripts. REACT-scripts é uma biblioteca usada pelo aplicativo Create React, e inclui todos os scripts e configuração que precisamos para executar reagir no navegador. Ele converte as dependências que precisamos, coisas ao acaso, bolha e web park nos bastidores,
e, em seguida, juntou-as todas em uma única biblioteca. Isso também torna a manutenção de todos esses pacotes muito mais fácil, já que temos apenas uma biblioteca para se preocupar quando atualizá-lo. Essas dependências em um projeto não seriam adicionadas à nossa pasta de módulos de nó, depois de executar um comando de instalação MPM. Tudo isso também está sendo armário para nós quando montamos o projeto, abaixo de nossas dependências, também temos alguns roteiros. Nós já usamos o script start com MPM start kick-off nosso projeto no início. Há também um comando para construir nossos projetos para produção, um para testes. Então também podemos ejetar de scripts React. Nós conversamos um pouco até agora sobre como muita configuração é para influenciar os bastidores. No entanto, podemos usar
esses scripts de ejeção para revisar toda essa magia oculta e, em seguida, colocar cópias de nossa configuração e dependências, como web pack e bubble, e depois colocá-los diretamente em nosso projeto para que possamos editar esses nós mesmos. Há também mais algumas informações sobre isso no arquivo readme também, finalmente temos um arquivo yarn.lock, não
precisamos nos preocupar muito com isso, uma vez que um é gerado automaticamente, e contém uma lista de nossas dependências e versão exata números que estamos usando. Isto é para a nossa estrutura de arquivos e pastas. Ficaremos muito mais familiarizados com isso enquanto construímos nosso aplicativo React. Em seguida, vamos dar uma olhada mais de perto no uso de componentes.
6. Uma visão mais olhar os componentes: No último vídeo, mencionamos o componente palavra algumas vezes. Se você ainda não tem certeza do que é um componente, vamos agora dar uma olhada melhor no que eles são. Um componente é uma pequena parte típica do seu site, que você pode agrupar e colocar nele em seu próprio arquivo. Também pode ser reutilizável. Se tivéssemos um blog, por exemplo, componente poderia ser uma postagem de blog. Estes componentes de postagem do blog seriam então reutilizados para cada post que temos. Mesmo que sejam reutilizáveis, ainda
podemos alimentar dados para torná-los dinâmicos. Poderíamos alimentar componentes de blog, um título de blog, um texto de blog e também uma imagem. Para ver um exemplo do mundo real, este é o projeto que você vai construir neste curso. Usando algo como HTML estático, vamos acabar com um monte de código duplicado. Cada lista, que é as seções livres de jardim, quarto e cozinha, e também cada um dos cartões individuais na lista precisaria de sua própria marcação HTML. Isso significaria um monte de código HTML duplicado. No entanto, a maneira Reagir é dividir as coisas em pedaços menores chamados componentes. Na parte superior, um cabeçalho é um componente, e vamos armazenar isso em um arquivo js ponto cabeçalho. Esses componentes também podem ser renderizados em cada página, evitando coordenadas em cada página, como faríamos com HTML normal. Abaixo do cabeçalho desta página, também
temos componentes de placa em um arquivo chamado Board dot js comprado. Um usuário pode ter várias placas, então esses componentes também podem ser reutilizados. Ele é transmitido em dados chamados adereços para permitir que coisas como o título do álbum mudem para cada exibição. Neste caso, o título é casa. Aninhado dentro desta placa, temos uma lista de componentes. vez, temos um componente renderizado para cada lista em nosso banco de dados. Este é outro bom uso para um componente, já que podemos reutilizá-lo novamente
e, em seguida, passar dados ou adereços para cada um, como o título e a funcionalidade para adicionar um novo cartão. Em seguida, como você já deve ter adivinhado, cada cartão é um componente também, recebendo adereços como o texto e também os rótulos. Cada vez que uma nova lista ou cartão é adicionado, o componente será novamente reutilizado. Tudo o que vemos aqui é uma criança
dos principais componentes App dot js, que olhamos anteriormente. É assim que os componentes são usados no React. Não há nenhuma regra rígida e rápida para quando algumas coisas devem ser transformadas em componentes. É algo que você geralmente tem que descobrir por si mesmo ao criar um projeto. Como um guia muito geral, devemos usar componentes se algo for reutilizado ou agrupar funcionalidades relacionadas. Há também ocasiões em que um arquivo está ficando muito grande. Isso também pode ser um caso para dividir coisas em componentes menores, também. Agora, temos uma visão geral de como nossos componentes serão vistos. Vamos começar a trabalhar na criação deles em nossos projetos.
7. Componentes: Voltando ao nosso projeto, vou criar uma pasta de componentes no diretório fonte. Na barra lateral, vamos criar uma nova pasta chamada componentes. Esta pasta é puramente para organização e não é um requisito ao usar reagir. Nós também podemos dividir isso em sub-pastas dois, e vamos fazer isso mais tarde no curso. Por exemplo, você pode ter uma pasta de cabeçalho dentro contendo todos os componentes de cabeçalho e assim por diante. Se quiséssemos, só para manter nossos arquivos mais organizados. Em seguida, nossos três componentes, que procuramos a partir dos slides são placa, cartão e lista. Dentro do diretório Componentes, crie um novo arquivo. O primeiro será Board.js, B. maiúsculas novamente na pasta de componentes, o Card.js com capital C.
O terceiro é para
List.js com um L. maiúsculo É
uma convenção de nomenclatura comum para iniciar um componente React com uma letra maiúscula. Primeiro de tudo, vamos passar para o Board.js. Para cada componentes onde usamos reagir, primeiro
precisamos importar o pacote Reagir da pasta Módulos Node. Podemos fazer isso com importação Reagir de Reagir. Reagir aqui sendo o nome do módulo de nó. Então este é um pseudônimo que vamos usar neste arquivo. Mesmo que estejamos exigindo React todos os arquivos que usamos, ele só é incluído uma vez na compilação final. Não precisamos nos preocupar com várias cópias em nosso projeto. Além disso, se nós apenas adicionar o nome do módulo, assim como reagir, em vez de usar um caminho de arquivo, será assumido que este é armazenado na pasta Módulos Node. Em seguida, precisamos criar uma classe que se parece com isso. O nome da classe Board estende Componentes do ponto React. Em seguida, abra as chaves. Este é um típico componente baseado em classe React. Mais tarde, veremos também outro tipo de componente. Mas, por enquanto, vamos usar um componente baseado em classe, pois ele tem alguns recursos extras que vamos entrar em. Em seguida, na parte inferior após essas chaves, exportação padrão, outro nome da nossa classe que é Board, exportar neste componentes permitirá que ele seja importado e reutilizado em outros arquivos. Acima estamos estendendo ou herdando todas as propriedades de React dot Components. React dot Components nos dará acesso a vários métodos opcionais, como métodos de ciclo de vida, que entraremos em breve. Mas o que é necessário é o método de renderização. O método de renderização, como parece, é aquele que precisamos para renderizar alguns JSX para o navegador. Vamos adicionar o método aleatório aqui dentro, que vai retornar alguns dados. Os dados que vamos retornar serão um código JSX simples. Vamos adicionar alguns elementos HTMLP com o texto dos componentes da placa. Se salvarmos este arquivo e, em seguida, passar para o navegador, e nós não vemos nenhum dos componentes da placa na tela. Para podermos ver isto, temos de dizer ao React onde queremos que isto seja colocado. Vamos para o app.js do pai, já que exportamos esses componentes da placa na parte inferior, agora
podemos importá-lo para o arquivo onde queremos usá-lo. Vamos fazer isso no app.js, precisamos importar nossos componentes da placa. Uma vez que este não é um módulo de nó, também
precisamos especificar o caminho do arquivo. Isso está dentro da pasta de componentes e o nome era Board. Nós não precisamos da extensão dot js já que isso é assumido. Podemos então colocar esses componentes da placa exatamente onde queremos que ela exiba. Vamos e lugar do texto que adicionamos anteriormente. Corte remover este e, em seguida, o nome do nosso componente que era Board. Este é um elemento de fechamento automático. que significa adicionar a barra no final. É assim que podemos colocar um componente em nosso código usando React. Ele apenas se parece com uma tag HTML de fechamento automático, como uma imagem. Como uma nota lateral rápida, você pode ter notado que este arquivo app.js não possui método de renderização. Isso ocorre porque ele é chamado de componente funcional baseado, e vamos dar uma olhada neles mais tarde. Vamos salvar este arquivo e voltar para o navegador. Agora podemos ver que nosso componente de placa está sendo reproduzido no lugar do nosso texto. Agora você também pode fazer o mesmo para o componente lista também. Volte para a barra lateral, vá para o List.js. Assim como antes, precisamos primeiro importar Reagir de reagir. Este também vai ser um componente baseado em classe que vai ser chamado List. Isso também irá estender os componentes do ponto React. Podemos então usar todos os métodos que é fornecido por React. Aqui dentro também vamos adicionar o método de renderização para exibir nosso JSX na tela. Vamos então devolver um pouco de JSX aqui dentro. Assim como antes de algum texto simples fará para apenas listar componente. Então à direita no final também precisamos exportar padrão, o nome do nosso componente, que vai ser List. Isso será aninhado dentro dos componentes da placa. Você pode importá-lo dentro do Board.js, salvar este arquivo e ir para a placa. Bem no topo também vamos adicionar uma importação para a nossa lista. Novamente, como isso não está dentro da pasta Node Modules, também
precisamos adicionar o caminho do arquivo. Este componente de lista está ao lado da placa, então vamos apenas adicionar uma barra e, em seguida, o nome da lista. A etapa final para isso exibir é entrar em nosso método de renderização, e então podemos adicioná-lo como um elemento de fechamento automático. Lista, como já sabemos, componentes são reutilizáveis, o que significa que podemos adicionar isso em quantas vezes você quiser. Vamos duplicar isso, e vamos salvar isso e passar para o navegador. Estou vendo um erro dentro do navegador. Geralmente, no que diz respeito às mensagens de erro, React é muito bom em nos deixar saber onde está o problema, e nos dando uma dica sobre como corrigir as coisas. A mensagem de erro diz: “Elementos JSX adjacentes devem ser encapsulados em uma tag envolvente. Você queria um fragmento JSX?” Vamos olhar para este fragmento JSX em breve. Mas esse erro é basicamente causado por um componente
que não tem um wrapper no Board.js. Em nosso método de renderização, estamos retornando três elementos diferentes. Todos esses três elementos são efetivamente lado a lado. Ao usar React embora, um componente deve ter um elemento pai como um wrapper. Pode ser qualquer elemento que escolhermos, mas uma div aqui seria bom. Vamos adicionar uma div, etiqueta de abertura no topo. Podemos mover a etiqueta de fechamento para baixo, e depois aninhar dentro de nossos três elementos. Se agora salvarmos isso e voltar para o navegador, veremos um erro. Isso deve ser estendido com um S no final. Então, para a nossa lista. Lá vamos nós. Salve isso e depois no navegador. Agora vamos ver nossos componentes de placa e, em seguida, aninhados dentro temos nossos dois componentes listas desde que adicionamos isso em nosso método de renderização duas vezes. Agora podemos passar para os componentes da placa, que também seguirão um padrão semelhante ao quadro e lista. Primeiro importamos Reagir na parte superior da pasta Módulos de nó. Em seguida, podemos criar um componente baseado em classe. Placa de classe estende Componente ponto Reagir, nós chaves, e então podemos adicionar o nosso método de renderização necessário, que vai retornar alguns JSX. Assim como antes, também adicionaremos os elementos p, simplesmente produzindo os componentes do cartão. Então não se esqueça, na parte inferior, precisamos exportar este arquivo para que possamos usá-lo em outros componentes. Export default, o nome da nossa classe, que é Card. Esses cartões são aninhados dentro do componente lista , então vamos importá-lo no List.js. Podemos importar isto. Agora, o topo do arquivo. Isso também está ao lado da lista, então só precisamos da barra de ponto e, em seguida, o nome do arquivo, que é Card. Agora para baixo no método de renderização estamos colocando no elemento p que acabou de cortar isso, e então podemos adicionar uma div circundante para que não recebemos nenhuma mensagem de erro no console. Podemos colar isso de volta e, em seguida, adicionar dentro de tantos componentes de cartão como nós gostamos. Vou copiar e colar isto em três vezes, depois para o navegador. Agora vamos ver a saída do componente da placa uma vez. Nós então temos nossos dois componentes listas, que é este e também este um porque nós emitimos a lista duas vezes aqui. Cada componente Lista então tem três Cartões aninhados dentro, é por isso
que vemos tantos componentes na tela. Se formos até as ferramentas do desenvolvedor, clicamos com o botão direito do mouse e inspecionamos. Dentro da guia Elementos se olharmos para a estrutura HTML, temos uma div circundante com um componente de placa aninhado dentro. Então temos uma div completa, que é para a nossa lista, que contém os três componentes do cartão dentro. Depois disso, temos uma segunda div, que é para os nossos componentes de segunda lista. Mais uma vez, isso também tem nossos três componentes de cartão dentro. Também no console veremos que temos algumas mensagens de erro. Se formos para o topo, vemos um p elementos não pode aparecer como um descendente de p. Isto é por causa da forma como estruturamos nossos componentes. Se formos para o wrapper principal, que é app.js, temos os componentes externos Board aninhados dentro desses elementos p. Podemos mover isto lá para fora. Salve este arquivo para que ele apareça
ao lado dos elementos e agora não temos mais áreas dentro do console. Agora vamos dar nossa primeira olhada em como os componentes funcionam. Agora vamos acelerar as coisas na próxima seção, onde vamos começar a trabalhar com dados e também passá-los para componentes.
8. Primeira olhar para o estado e JSX: React é uma biblioteca de visualização front-end,
portanto, precisamos de alguns dados para trabalhar. Mais tarde, nos concentraremos em usar o Firebase como nosso back-end para salvar dados não recuperados. Ambos no momento, eu vou estar usando alguns dados de amostra para trabalhar com. Eu forneci alguns dados de amostra, que você pode baixar e usar para este curso, que eu salvei aqui no painel. Vamos começar criando um novo arquivo em nosso projeto. Instale este exemplo de dados, queremos adicionar isso na fonte. Crie um novo arquivo. Eu não quero chamar isso de sampledata.js. Se abrirmos esses dados de exemplo, podemos copiar o conteúdo selecionando todos. Em seguida, copie e cole isso em nosso arquivo de dados de amostra. Estes são simplesmente alguns dados, para que possamos trabalhar com componentes. Temos uma matriz de placa, que é simplesmente três placas diferentes que você pode viver através. Abaixo disso, também temos algumas listas. Estes são vinculados à placa pelo ID da placa. Eles também têm um ID e título,
e, em seguida, ele aninhado dentro terá algumas contagens individuais. Isso agora nos dará alguns dados básicos para trabalhar em nossos componentes. Ao usar reagir, os dados atuais que não têm componentes, é referido como estado. State é um objeto em um componente que contém dados que podem ser alterados. Por exemplo, estará usando o estado
no componente lista para armazenar todos os carros do Alcorão nessa lista. Estado é a independência de cada componente dois. Tínhamos uma lista livre, assim como temos aqui. O estado será diferente para cada um. Uma vez que todos os dados do carro é diferente, o estado da lista de jardim seria uma matriz de cartões chamados novos fãs não fixos tabela. Os componentes da lista para o quarto um teria uma matriz de estado de móveis novos, paredes de
pintura, e assim por diante. Outra parte útil do estado é que ele é dinâmico. Ou seja, se o estado muda, como quando um usuário exclui um cartão, ele atualizará todos os componentes que usam dados. estado também pode ser qualquer coisa como se o uso estiver conectado no momento, se um modal pop-up estiver aberto no momento, ou o número de curtidas que uma postagem tem. Para dar uma primeira olhada no estado. Vamos para o app.js e voltaremos novamente para adicionar nossos objetos de estado. Logo após a linha de função para cima. Podemos criar nosso objeto de estado. Então aqui dentro podemos adicionar qualquer estado que quisermos. Vamos começar adicionando um título em negrito e definir isso igual a uma série de idéias de casa. Este estado pode conter quaisquer nomes e valores dos dados que queremos. Mas lembre-se, este é apenas os estados iniciais e pode mudar ou ser atualizado a qualquer momento. Se salvarmos este arquivo e voltarmos para o navegador, volta para o nosso projeto. Vemos na mensagem de erro de estado não está definido. Isso está acontecendo porque os estados só podem ser usados em um componente de classe. Lembre-se antes de quando criamos a placa listando os componentes do carro, nós criamos isso como uma classe. Considerando que se formos para o app.js, que é gerado automaticamente para nós, temos uma função componentes base. Este componente de função é ótimo para uma função simples que apenas leva em qualquer dado como um adereço. Vamos olhar para adereços muito em breve. Em seguida, ele renderiza algum conteúdo para o navegador. Permitam que apenas confunda você ainda mais com reagir versão 16.8, eles introduziram algo chamado Hooke, que nos permite fazer mais com componentes de função, que não podíamos fazer anteriormente. Mas isso não é algo com o qual precisamos nos preocupar ainda. Então, para adicionar estado, o que precisamos fazer é converter isso em componentes baseados em classe. Estes são apenas alguns passos simples. A primeira coisa que vou fazer é limpar esta declaração de retorno e remover todo o código desnecessário. Vamos tirar o cabeçalho e também o nome da classe do App. Dê-nos um salvamento, agora teremos uma div vazia dentro da nossa declaração de retorno. Agora precisamos substituir esta primeira linha de função App por uma classe assim como fizemos no quadro. Então precisamos expandir os componentes de reação. Remova isto. Este é um componente baseado em classe que é chamada App. Isso entrará em extends, reagir a todos os componentes, certificando-se de que ainda temos as chaves em torno de todo esse código. Então, como mencionamos anteriormente, uma classe componentes precisa ter um método aleatório. Precisamos cercar a declaração de retorno com isso. Se pudéssemos apenas retornar declaração para fora, podemos então adicionar
no método aleatório dentro das chaves colocadas na instrução return, salvar como arquivo, agora não deve ver erros dentro do navegador. Voltar ao nosso estado no app.js. Podemos acessar nosso estado usando as chaves dentro da div. Vamos adicionar elementos IP para produzir nossos estados. As chaves encaracoladas. Podemos acessar o estado com este estado ponto. Em seguida, o nome do nosso estado chamado todos os títulos, dá-nos um salvamento, e depois para o navegador. Agora, como o título do conselho de idéias da casa. Primeiro de tudo, isso é o que é chamado de código JSX, que nos permite misturar JavaScript em nossos elementos HTML. Essas chaves que cercam os estados são usadas quando queremos saltar para JavaScript
e, em seguida, executar o código dentro. Podemos adicionar qualquer JavaScript que queremos para essas chaves. Então, podemos fazer alguns JavaScript simples, como 5 mais 10. Então vemos o valor de 15. Tudo o que podemos fazer é algo como um registro de console. Vamos apenas adicionar uma sequência de “olá”. Salve isso e, em seguida, vemos o valor de saudação no console. Agora, vamos remover o registro do console e o 5 mais 10. Agora vamos atualizar nosso estado com o valor de nossos dados de amostra. Bem, como iríamos atualizar ou definir o estado? Bem, podemos fazer isso com um método chamado estado definido. Primeiro de tudo, vamos importar nossos dados de amostra. Podemos usar isso no arquivo. Importe dados de um valor de cadeia de caracteres de barra de ponto
e, em seguida, dados de amostra. Em seguida, podemos configurar o nosso estado inicial da placa para ser um array vazio. Vamos mudar o título do conselho para ser BoardT. Salve este ser um array vazio. Podemos obter isso com um método personalizado fora da função de renderização. Mas renderizar, podemos criar um método personalizado chamado estado de atualização. Chamaremos isso em um momento de um botão. Mas isso vai ser uma função de seta ES6, onde vamos atualizar o estado com o método set state. Podemos fazer isso com este estado de conjunto de pontos. Estes apontam para a nossa instância de componente atual. O estado que vive no estado deste componente é um objeto, quando ele está passando as chaves. O estado que queremos atualizar é este quadro aqui. Em placas, e eu vou definir isso igual a dados. Embora placas, data.boards são os nossos dados de amostra que foram importantes. O próximo passo é agora criar um botão em nosso método aleatório para, em seguida, definir os estados. Então, parente interno. Vamos criar um botão. Aqui dentro podemos adicionar um ouvinte clique. Nós clicamos e definimos isso igual a este estado de atualização de ponto, que é o nome do nosso método. On-click é uma maneira de lidar com o evento muito semelhante a um manipulador de eventos JavaScript regular. Basta clicar, ao alterar ou ao passar o mouse. Com JavaScript regular, eles são todos nomes minúsculos. No entanto, ao usar JSX devo ser caso camelo, assim como este. Cada palavra após a primeira começa com um maiúsculo. Quando este botão é clicado, então
chamamos nosso método de estado de atualização personalizado nas chaves, que vamos em frente e executar o código dentro aqui. Depois disso, podemos então fazer um log de console para verificar o valor de estado foi atualizado. Isto é JavaScript. Isso vai entre as chaves e na verdade vamos fazer uma tabela de console. É por um formatado. Podemos então produzir este estado de ponto, placas de ponto. Agora vamos verificar isso no navegador. Temos um erro ao atualizar estados precisa ser dois pontos. Em vez de iguais satisfazer cólon. Em seguida, recarregue, clique em nosso botão, e agora veja uma tabela com todas as três informações de nossos dados de amostra. Temos os títulos gratuitos do curso, temos o fundo, o ID e o número do índice. É assim que podemos atualizar nosso objeto de estado usando os estados de conjunto. Não devemos ser tentados, no entanto, a defini-lo de qualquer outra forma, como este.. state, .boards é igual a algum valor. Usamos este método de estado de conjunto por várias razões. Definir this.state, .boards como este, não
acionará um componente de datas se o estado mudar. Também pode ser menos desempenho. Uma vez que várias chamadas de estado de conjunto podem ser agrupadas em lote em uma única atualização. Slash, remova isso. Teremos muito mais prática atualizando o estado durante este curso. Em seguida, veremos como podemos percorrer esses dados e como definir o estado inicial quando um componente é carregado pela primeira vez.
9. Ciclo de vida e looping de componentes: Ter um botão como temos aqui para carregar o nosso estado inicial não é algo que é muito prático para este uso. Precisamos de uma maneira de definir o estado assim que o componente é carregado, e podemos fazer isso usando um método de ciclo de vida chamado ComponentDidMount. Quando criamos nossos componentes de classe, dissemos que o único método necessário que precisamos é o método aleatório. Há também alguns métodos opcionais também, e um que vamos agora olhar é chamado ComponentDidMount. Como o nome sugere, ele executará qualquer código que adicionamos após o componente ter sido montado no DOM. Um bom exemplo de um que podemos usar
isso, será carregar os dados de amostra em nosso estado. Nós vamos adicionar este no app.js logo abaixo de nossos objetos de estado. Vamos adicionar o ComponentDidMount. Este é o método, então adicione os colchetes e as chaves. Muitas vezes adiciono meu estado no topo, seguido por quaisquer métodos de ciclo de vida como este,
em seguida, quaisquer métodos personalizados
e, em seguida, seguido pela renderização. Isso é completamente opcional e cabe a você como você gostaria de colocá-los para fora. Mas isso é apenas algo que eu tenho nos hábitos de fazer. ComponentDidMount precisa atualizar o estado, então vamos copiar esta linha de antes, cole nosso método de estado definido dentro aqui. Também podemos remover este método de estado de atualização, salvar este arquivo. Se agora vamos para o navegador e atualizar, agora
vemos nosso estado foi atualizado com o console.table sem clicar em um botão. Existem outros métodos de ciclo de vida disponíveis também, como ComponentDidUpdates, que executará algum código após uma alteração ter causado a atualização do componente, como alteração de estados. Nós também temos componentes irá quantidade para executar quaisquer ações que precisamos fazer depois que um componente foi montado a partir do DOM. Isso agora nos deixa com as três placas de nossos dados de amostra. Defina os estados e, normalmente, o que gostaríamos agora de fazer, é percorrer estes e, em seguida, exibir os dados no navegador. Uma vez que nossos dados estão em um formato de matriz, podemos usar o método de matriz JavaScript chamado Map. Este é apenas JavaScript regular e nada específico para reagir. Se formos para o app.js, podemos descer para o método aleatório e vamos substituir todo o conteúdo pelo nosso mapa. Remova os três elementos dentro do nosso invólucro div. Então dentro daqui, já que estamos usando JavaScript, podemos usar as chaves. Podemos acessar o estado como antes, com o início do estado. Lembre-se, isso está apontando para nossa instância de componente. Então, podemos acessar o estado com este estado ponto e, em seguida, o nome das placas, mas eu não chamei o método de simulação de pontos. Dentro daqui podemos passar em um nome de variável de placa para cada item que encontra na matriz, em
seguida, criar uma função de seta. Isso será responsável pela exibição em cada um de nossos quadros, então vamos adicionar uma div que irá cercar cada um dos quadros livres em nossos dados de amostra. Então vamos produzir três elementos. Um para o ID, um para o título e, em seguida, um para o fundo. Primeiro de tudo, vamos criar um elemento span, que vai exibir o ID da placa. Podemos acessar cada placa com esta variável de placa, em
seguida, passar o ID. Próxima parada, um cabeçalho de nível três que irá exibir o título do tabuleiro novamente nas chaves. Em seguida, terceiro e, finalmente, podemos adicionar um elemento p, que vai exibir os fundos da placa. Agora podemos ver isso e, em seguida, passar para o nosso projeto no navegador. Se atualizarmos, veremos nossos álbuns gratuitos na tela. Temos as ideias do jardim,
temos as ideias da casa,
e também as ideias do curso no topo com o título do tabuleiro, nossa identificação e a cor de fundo. No entanto, dentro do navegador vemos que o console tem uma mensagem de erro de cada criança em uma lista deve ter um suporte de chave exclusivo. Ao renderizar uma lista de itens como este, precisamos também adicionar uma chave única para cada elemento. Isso ajuda o React a identificar quais itens foram adicionados, atualizados ou removidos. Agora podemos usar o ID do quadro como uma chave, mas mais tarde usaremos o ID exclusivo do Firebase para nossos itens. Voltar para o app.js, podemos ir para o wrapper, que é este div. Podemos então adicionar uma chave que vai ser igual ao Board.ID. Em seguida, de volta ao navegador, agora
vou ver a nossa mensagem de erro desapareceu agora. Essas chaves devem ser únicas, portanto, se tivermos mais de uma placa com a mesma chave, isso causará um erro no console também. No próximo vídeo, vamos substituir esses elementos renderizados um componente real e descobrir como podemos passar dados usando adereços.
10. Como passar dados como acessórios: No último vídeo, mostramos cada item da placa
pulando através e eu vou colocar os elementos HTML. Agora vamos substituir esses três elementos, que era o ID da placa, a placa [inaudível] e a cor de fundo por componentes da placa. Se formos para o app.js, já
temos os componentes da placa importados na parte superior do arquivo. Então agora podemos usar isso no lado do método mapa no lugar de todo o código existente. Ao invés deste DIV cercado, podemos substituir isso. Então, dentro do método do mapa, vamos simplesmente produzir a placa. Se eu agora salvar isso e passar para o navegador, há muita coisa acontecendo aqui. Para que possamos limpar os componentes da placa para simplificar as coisas. Então vamos para o board.js, atualmente vou colocar no título. Em seguida, dois componentes da lista em seu lugar é apenas com o título de componentes da placa. Se salvarmos isso, as coisas ficam muito mais claras, já que agora estamos na saída em nossas três placas. Um para cada item em nossos dados de amostra. No app.js, só porque temos esses componentes de placa aninhados dentro, isso não significa que herda todos os dados que ele precisa. Nós temos que passar quaisquer dados para a placa usando adereços, adereços é uma maneira de passar dados para componentes filhos, ou seja, adereços sempre são passados pela árvore de componentes. Esta é uma das regras de ouro de reagir. Passamos dados como um prop, com estado que sempre levantamos, o que significa que se tivéssemos um estado que é compartilhado por dois componentes, sempre
elevamos o estado até um componente pai. Portanto, ambos os componentes podem ter acesso a ele. Passamos adereços como atributos HTML e, em seguida, dar-lhe um nome e um valor. Então, por exemplo, queremos passar nossos adereços
desta informação da placa para estes componentes da placa. Nós podemos adicionar os atributos e vamos definir este nome prop para o quadro. Os dados que queremos passar vão estar
nas chaves e que estes serão os dados da placa do nosso mapa. Vamos adicionar prancha aqui, dar um salvamento a isso. Podemos então acessar o suporte da placa dentro dos componentes da placa. Então, vá para o board.js. A maneira como acessamos isso é muito semelhante ao que fizemos com estados em vez de [inaudível] estado dentro das chaves, acessamos os adereços com esses adereços superiores. O nome do adereço que você passa era o tabuleiro. Então este top adereços para embarcar. Então temos acesso ao título do álbum, como fizemos antes no último vídeo. Com o navegador, agora vemos nossos três títulos de tabuleiro, claro, casa e idéias de jardim. Nós também podemos passar adereços para baixo mais de um componente nível 2. Vamos cobrir isso muito em breve. Agora eu quero colocar isso em prática um pouco mais criando a página inicial, que exibirá os componentes de visualização da placa. Dê uma olhada no projeto final. Isto é o que vamos criar. Haverá componentes de visualização da placa para cada uma das placas na tela. Então, se clicarmos sobre isso, ele será levado para a vista de quadro completo. Vamos criar isso dentro de uma nova pasta de componentes, abrir barra lateral. Podemos organizar os componentes criando uma pasta Pages dentro daqui. Como nesta pasta Páginas não tem diferença em nossos componentes. A única alteração que precisamos fazer é o caminho do arquivo ao importar. Dentro desta pasta de páginas, eu vou criar nosso arquivo, a vista [inaudível] cena e chamar isso de home.js. Home também é um componente, mas como isso vai ser uma exibição de página, eu adicionei isso à pasta Pages para manter as coisas mais organizadas. Agora podemos ir em frente e criar nossos componentes importando reagir de “reagir”. Isso também vai ser uma classe componentes, que vai estender React.Components. As chaves, isso precisa do método de renderização, que vai retornar soma JSX. Tudo o que eu vou adicionar por agora é um título de nível 1 com um título de casa. A última coisa a fazer na parte inferior do arquivo é
também exportar isso com os padrões de exportação. O nome da nossa turma, que é Lar. Os componentes da casa. Se dermos uma olhada na vista de acabamento, vai ser wrapper para todas essas pré-visualizações da placa. Em seguida, vai passar os adereços para o título da placa e também a cor de fundo. Então primeiro precisamos criar os componentes de visualização da placa, que serão usados para cada um desses itens. Vamos criar um novo arquivo na barra lateral. Isso não está nas páginas, isso é apenas direto para os componentes. Agora este vai ser o BoardPreview.js. Este também é um componente baseado em classe. Então vamos importar Reage de 'reage', cria nossa classe. Este é chamado de BoardPreview. Então, estende react.Components, passe no método de renderização. Em seguida, devolva o nosso código GIS X, que por agora vai ser um simples elementos P de visualização da placa. Então, na parte inferior, não vamos esquecer de exportar padrão, nosso nome de classe de visualização do quadro. Então, quando terminar, dê um cofre a este arquivo. Então, agora temos uma situação em que precisamos passar nossos adereços para baixo dois níveis. Nosso estado é armazenado no app.js. Vamos então ele passa os dados para os componentes da casa, que é este invólucro. Em seguida, a partir do componente inicial para baixo para cada uma dessas pré-visualizações bola. Felizmente, isso não é muito difícil de fazer. O primeiro passo é realmente exibir os componentes da casa. Se você for para o app.js, podemos primeiro importar o componente home que
criamos a partir do nosso caminho de arquivo, que é. /componentes. Lembre-se que isso também está na pasta Pages e o nome de home down na seção de retorno do nosso método de renderização. Também podemos substituir tudo isso pelos componentes domésticos. Como verificamos, isso está sendo exibido em nossos projetos. Então agora vemos os componentes da casa. O próximo passo é a passagem desta casa componentes, estes estados de placas, para que possamos fazer isso através de adereços. O conselho vai ser igual a isso.state.boards. Então este é o nosso adereços agora passar para baixo um nível. Vamos para o home.js, onde agora podemos acessar esses adereços. A próxima etapa é a passagem dos componentes da sua casa para a pré-visualização da placa. A primeira coisa que precisamos fazer é importar a visualização do quadro. Isso apenas vive dentro da pasta de componentes. Podemos acessar isso com ponto barra e, em seguida, visualização bola. No esforço aleatório, poderíamos simplesmente produzir a visualização da placa. Mas lembre-se que temos várias placas. No nosso caso, temos três estrelados em estados. Portanto, precisamos mapear através desses dados e, em seguida, produzir um componente de visualização bola para cada um. Assim como antes, usamos esses adereços superiores, as tábuas. Uma vez que há três deles, vamos chamar o método do mapa JavaScript. Para cada um, teremos uma chave que usaremos em um momento. Mas primeiro, vamos mostrar a pré-visualização da placa. Cada item é armazenado dentro desta variável chave, que agora podemos usar como uma chave e impostor cada placa individual como um prop. Como sabemos de antes, também precisamos passar essas chaves como um atributo e definir isso igual à nossa variável de chave. Então precisamos passar o vínculo individual para esta pré-visualização do quadro que está nisso em linhas separadas para que seja mais legível. Podemos passar para baixo a placa individual e podemos acessar é com este ponto adereços, placas de pontos. Isto está acessando todas as placas que recebemos através de adereços. Podemos então passar em uma chave para obter a placa individual da matriz de placas. Lembre-se de que esta chave é cada item individual. A primeira vez que passamos pelas placas, ele produzirá componentes da placa ou uma visualização da placa
e, em seguida, passará a placa individual. Ele vai então viver através do segundo, também produz uma segunda visualização de placa e, em seguida, também passar a segunda placa como um adereço. Ele irá inserir isso para cada item em nossa matriz. Agora, se dissermos isso, podemos agora ir para a pré-visualização do tabuleiro e fazer uso deste suporte de tabuleiro. O [inaudível] dentro, vamos retornar declarações. Podemos remover a pré-visualização da placa codificada. Podemos então acessar este ponto adereços, a placa e então podemos acessar o título da placa. Vamos salvar isso e atualizar antes de ir mais longe e veremos no console que temos um erro. Não temos nenhum símbolo inesperado na casa dot js. De volta para a casa. Isso ocorre porque em nossa seção de devoluções estamos colocando em dois componentes adjacentes. Leve remover isso e cercado em uma div. Mas lembre-se, reagir só nos permitirá ter um item pai como rapper. No final da seção de resultados, podemos fechar isso, recarregar. Isso agora nos dá uma mensagem de erro “Não é possível ler o título da propriedade de undefined.” Por que não podemos ler o título dentro de nossos componentes? A pré-visualização do quadro. Esta é uma linha de código aqui. Bem, a razão pela qual isso está acontecendo é porque embora todas as placas nesses dados de amostra sejam armazenadas como uma matriz, cada placa individual é armazenada como um objeto, então temos no estado uma matriz de objetos. Se formos para os componentes da casa dentro aqui usaremos o método.map. Map é um método de matriz. O que estamos tentando usá-lo aqui em um tabuleiro, objetos. Para consertar isso, podemos embrulhar isso. props.boards que é um objeto no método object.keys. Vamos cortar isso.props, .boards e então podemos usar objetos.keys. Então, dentro dos suportes, podemos colar isso de volta. Object.Keys é um método de objeto que vai puxar para fora todos os nomes de propriedade do objeto e, em seguida, retornar uma matriz. Aqui estamos basicamente convertendo esses dados de objeto para ser matriz. Portanto, podemos usar o método do.map e tudo o que você deve agora trabalhar como pretendido. Este object.keys é um método JavaScript regular. Novamente, nada específico para reagir. Agora, se salvarmos este arquivo e voltar para o navegador, esse erro agora desaparece, bom e coisas e estão funcionando corretamente. Passamos o estado do conselho para baixo dois níveis e então eu vou colocar o título na pré-visualização do quadro. Agora pedimos um estágio onde temos componentes aninhados. Pouco comum, tudo o que podemos ver é texto simples no navegador. Sem ter um roteador no lugar, uma alternância entre nossas páginas ou componentes. Pode tornar-se difícil visualizar exatamente o que está acontecendo com nossos componentes. Para ajudar com isso, podemos usar as React Developer Tools, que estão disponíveis para Chrome e Firefox. Se você os instalou no início do curso ao configurar as coisas, ótimo. Caso contrário, vá em frente e procure as ferramentas reativas e adicione a extensão para Chrome ou Firefox. Uma vez feito isso, você será capaz de clicar com o botão direito e, em seguida, inspecionar e agora devemos ver as ferramentas de desenvolvedor reagir disponíveis para selecionar, então clique sobre isso. As ferramentas de desenvolvedor React é algo que vamos usar bastante para este curso. Teremos muito mais prática. Podemos ver atualmente na árvore de componentes, temos o wrapper aplicativo principal. Podemos abrir isso e, em seguida, dentro, temos uma div circundante que irá conter nossos componentes domésticos. Isso é exatamente o que vemos no app.js. Temos os nossos componentes, temos o nosso div e, em seguida, temos o nosso componente doméstico aninhado dentro, que está passando as placas como adereços. Também podemos ver os adereços dentro das ferramentas de desenvolvedor. Se clicarmos nos componentes da casa, vemos que estamos passando as placas como adereços, que é uma matriz com três itens. Podemos inspecionar isso e ver todas as informações de cada item. Vemos que muito, essas placas são uma matriz. Esses itens individuais são um objeto, é por isso que precisávamos converter cada item com object.keys. Se abrirmos o invólucro de casa, veremos dentro de cada uma das pré-visualizações da placa. Eles também têm a chave para permitir reagir para atualizar corretamente cada item da lista. Podemos selecionar estes e também vemos os adereços que são passados para baixo. Este é um objeto com o quadro individual onde podemos acessar o plano de fundo, o ID e o título. Diz título, que usamos para produzir o navegador, bem como adereços. Se você for para os principais componentes do aplicativo, também
vemos o estado que é o componente detém e esta é a informação
que você obtém a partir dos dados de amostra e, em seguida, passar para baixo através de adereços. Essas ferramentas de desenvolvedor são realmente úteis e vamos fazer uso delas enquanto percorremos o curso. Em seguida, vamos ficar com os adereços subjetivos e dar uma olhada em como podemos passar métodos entre componentes.
11. Métodos de passagem como acessórios: Não são apenas dados que podemos passar para os componentes. Também podemos passar um método dois. O método que adicionaremos em breve é criar uma nova placa, que obterá o estado da placa no app.js. Agora, uma vez que estamos atualizando o estado armazenado em app.js, também adicionamos. criamos novo método de bordo dentro aqui também. Vamos passar por cima e criar é agora no app.js, eu vou para este arquivo. Então ele apenas sob o nosso componente irá montar. Podemos criar um método personalizado chamado “CreateNewBoard”, esta vai ser uma função de seta ES6, que vai levar em uma placa, que vai passar para ele em breve. Então aqui vamos atualizar o estado um pouco diferente. Vamos dar uma olhada em como vamos usar esse estado de conjunto de pontos. Aqui dentro, ainda vamos passar um objeto e atualizar nossos quadros. Mas desta vez vamos criar um array. Então aqui, ao atualizar o estado, ao usar React, nós geralmente não queremos mutar o estado diretamente. É melhor primeiro, tomar uma cópia do estado existente. Podemos fazer isso com o operador de propagação, que é um três pontos. Podemos tirar uma cópia dos estados existentes usando “this.state.boards”. Depois disso separados por uma vírgula, podemos mesclar nossos novos dados, que vai ser essa variável de placa, que você passa através do nosso método. Então, quando chamarmos isso passará os dados sobre o novo quadro, atualizará o estado, pegará uma cópia dos estados existentes e depois fundir-se-á na nossa nova placa. Se dermos uma olhada na versão acabada aqui, estes são os componentes domésticos. Aqui dentro é onde vamos “Criar um novo quadro”. Portanto, acionando esse método. Este método precisa ser acionado a partir dos componentes domésticos, ou
seja, quando ele passar uma referência a este método e como passamos dados para os componentes filhos? Fazemos isso através de adereços. Então, em app.js, vamos até onde renderizamos nossos componentes domésticos. Podemos então passar uma referência ao nosso método. Então, “Criar novo quadro”. Na verdade, podemos adicionar isso no interruptor on-line. Então podemos definir isso igual a isso. Em seguida, o nome do nosso método chamado “createnewboard”. Mais nos componentes da casa, que é o home.js, podemos criar um botão para criar nosso novo quadro. Então, dentro de nossa “div”, vamos criar isso agora. Dentro de um aqui podemos criar um manipulador de cliques. Então, “OnClick”, vamos criar um novo método chamado “This.NewBoard” e seus atos de Newboard aqui dentro. Então este novo método, que estamos chamando aqui, não
tem nada a ver com o que passamos pelos estados. Chamaremos isso em um momento. Vamos subir e criar isso agora fora do método aleatório, agora
podemos criar isso.Então vamos criar o nosso “NewBoard”. Configuração, uma função de seta ES6. Então aqui dentro queremos fazer duas coisas. Primeiro de tudo, queremos pegar todos os dados da placa do nosso formulário e, em seguida, vamos chamar o método create new board, que são transmitidos a partir de app.js. No momento, não temos este formulário para pegar os dados dele. Então eu vou ter que codificar alguns dados por enquanto. Vamos criar nossos objetos de tabuleiro. então “const board” vai ser igual a um novo objeto. Isso precisa de um título chamado isso qualquer coisa que você quiser. Quero dizer, “Viagens para fazer este ano”, separados por uma vírgula. Também precisamos de um fundo para este conselho. Vou definir seu “plano de fundo” para ser um valor de string,” 80ffaa”. Em seguida, vou adicionar a propriedade “CreateDAT”. Este vai ser um “novo encontro”. Então, um novo roteiro data. Nós vamos ser armazenados na data para
o novo Conselho e também a nova lista e novos cartões. Isso nos permitirá mais tarde retornar todas
essas informações de volta em ordem a partir de quando elas foram criadas. Então este é o nosso novo quadro agora codificado. Podemos então chamar o método criar novo tabuleiro, que será passado através de adereços e enviado para fora este novo vínculo como um argumento. Então, logo após nossos objetos “this.props.createWBoard”. Fixação desta placa que ilustrado. Então, agora esta parte vamos passar com o método CreateNewBoard. Ele irá chamá-lo no app.js. Este método, em seguida, receberá o quadro e, em seguida, mesclá-lo em estados. Então vamos salvar isso e depois passar para o nosso projeto. Podemos experimentar isto. Vamos ao nosso aplicativo. Temos o novo botão da bola. Vamos clicar nisto. Então temos uma atualização de incidentes de viagens para fazer este ano. O maior significa que agora temos esse novo modo em um estado. Isto é o que mencionamos anteriormente quando dissemos que cada vez que o estado é atualizado, Reagir irá então atualizar todos os componentes que precisam desse pedaço particular de informação. Também podemos ver no app.js, se descermos para o estado, agora
temos nossa placa extra adicionada dentro aqui. Este é um que produziu hard-coded e, em seguida, passou como argumentos com este método. Se atualizarmos, porém, este item desaparecerá já que ainda não temos nenhum banco de dados permanente. Mas isso é algo que irá adicionar mais tarde no curso. Agora vamos para a lista. Se olharmos para esta visualização final da placa e, em seguida, clicar em qualquer uma das pré-visualizações da bola dentro dela, levou-a para os componentes da placa. Este componente de placa precisará acessar todas as listas carregadas no momento. No nosso caso, temos estes de graça. Eu também precisaria adicionar uma nova entrada de lista na parte inferior. Atualmente em nossa saída não vejo essa visão de bola. Se passarmos por cima de tudo secretamente carregado é componentes
da casa e, em seguida, próximo dentro de nossas antevisões da placa. Podemos começar a trabalhar com esses componentes da placa. Podemos ir para o app.js e adicionar o temporariamente. Isso será até que introduzamos o roteamento em uma seção posterior. Então, em primeiro lugar, no app.js faz você ainda temos as informações do quadro de antes. Em seguida, role para baixo até nosso método aleatório. Também podemos adicionar os componentes da placa dentro do nosso invólucro. Então eu vou fechar isso agora e passar para este board.js. Podemos adicionar as listas no estado. Assim, cada componente individual também pode ter seus próprios estados locais. Vamos criar nossos objetos de estado. Eu quero carregar a lista atual, e definir isso como um valor inicial de uma matriz vazia. Eu chamei este estado, as listas atuais porque mais tarde, nós também vamos filtrar as listas para mostrar apenas as de um determinado quadro. Podemos então pegar nossas listas a partir dos dados de amostra. Em primeiro lugar, importando na parte superior do arquivo. Eu vou importar nossos dados do caminho do arquivo, que é dados de exemplo de barra de ponto ponto. Mas, mais uma vez, podemos usar ComponentDidMount para carregá-los no estado. Este é um método que devemos chamar este ponto setState. Vamos definir nossos objetos, que vai pegar as listas atuais e definir isso igual aos nossos dados de amostra, que são listas de pontos de dados. Dados sendo uma variável que temos de nossos dados de exemplo,
e, em seguida, a lista é os dados da lista que você tem apenas aqui. Agora temos essas listas atuais. O que queremos fazer com eles? Bem, queremos renderizar um componente de lista para cada um, assim como o livre que você vê aqui. Fazemos isso como antes quando vivemos através dos dados, e agora colocamos um componente de lista para cada um. Vamos começar no board.js. Vamos ao nosso método aleatório e podemos começar a trabalhar aqui dentro. Primeiro de tudo, na div circundante, vamos adicionar um nome de classe que vai ser igual a list-wrapper. Isto é para CSS. Observe aqui como estamos usando o nome da classe em vez de apenas classe, como faria no HTML normal. Bem, ao usar reagir, a palavra de classe é uma palavra-chave reservada. Portanto, ao adicionar quaisquer classes CSS, precisamos usar esses atributos de nome de classe em seu lugar. Aqui dentro, podemos mudar nosso título de quatro. Então, dentro das chaves, vamos mapear as listas atuais. Assim como antes, vamos usar estas listas.state.current. Assim como antes, this.state.current lists é um objeto em vez de uma matriz. Para resolver isso, eu vou cortar isso, e novamente, usar objetos.keys, e então dentro dos colchetes podemos colar isso de volta. Assim como anteriormente, isso irá converter isso para ser uma matriz, que
possamos usar o método de mapa de pontos. Nós também vai passar na chave, estabeleceu a função de seta. Para cada lista em estados, vamos então executar para baixo os componentes da lista. Esta lista também precisa levar em uma chave. Esta chave vai ser igual a estas listas.state.current. Nós não vamos passar na lista individual com esta chave, e depois pegar a identificação. Certifique-se de que ainda temos os componentes da lista importados na parte superior do arquivo de anteriormente. Dê a este arquivo um salvamento. Então podemos ir até o navegador e verificar isso. Agora vamos ver nossos componentes renderizados na tela. Tem muita coisa acontecendo aqui. Vamos limpar os componentes da lista. Vamos para o list.js. Então, em vez de emitir nossos cartões gratuitos, vamos remover isso. Deve parecer muito mais claro agora, se actualizarmos isto. São os componentes da nossa lista livre. É provavelmente um pouco difícil ver o que está acontecendo aqui, então vamos abrir as ferramentas desenvolvidas de reação. Dê uma olhada mais de perto. Começando no nível superior, temos o app.js com nossas placas que estão no estado. Dentro daqui temos uma div circundante, que irá então produzir os componentes da casa, exibindo a causa, a casa e as idéias do jardim. Depois disso, adicionamos temporariamente no componente de placa. Poderíamos ver isso e os componentes da placa estão renderizando itens de lista livre. Cada item da lista é você simplesmente oportuna o texto do componente lista, que está apenas aqui. Também emitiremos em breve um título de lista e também as contagens. Com essas listas agora sendo exibidas no quadro, podemos fazer algo semelhante ao início deste vídeo e também adicionar uma nova lista. Sobre o board.js. Podemos fazer isso criando um novo método. Logo abaixo do componente na montagem. Vamos criar um novo método chamado criar nova lista. Eles servem como a função de seta. Aqui dentro vamos construir a nossa nova lista. Isto vai ser apenas amostra de dados por enquanto. Primeiro precisamos adicionar um ID a esta lista. Mais tarde, usaremos o Firebase para pegar esse ID. Mas, por enquanto, podemos usar math.dot random para gerar um novo ID usando JavaScript. O título, vamos chamar isso de minha lista incrível. Isso também precisa ser vinculado a um quadro. Podemos escolher uma identificação. Vamos para 300. Também podemos adicionar a propriedade CreateDAT ans definir isso para ser uma nova data usando JavaScripts. Agora temos nossa nova lista criada. A próxima coisa a fazer é empurrar isso para o nosso estado atual. Agora podemos fazer isso com este.state. Adicione nossos objetos. O estado que queremos obter são as listas atuais. Assim como antes, a lista atual é uma matriz para que possamos passar isso em. Em primeiro lugar, vamos nos fundir nas listas atuais, com os três pontos. This.state.current listas separadas por uma vírgula. Então vamos nos fundir ao nosso estado atual. A lista que foi criada, logo acima. Isto é tudo o que precisamos fazer agora para este método, o próximo passo é criar um botão para acionar este método segue. Fazemos isso no método aleatório. Vamos passar por baixo do invólucro da lista. Vamos criar um botão. Podemos adicionar um manipulador de eventos on-click, que vai acionar nosso método, que é chamado this.create novas listas. Em seguida, um nome de nova lista para o nosso botão. Uma vez que isso é feito, dar este arquivo salvar e nós podemos ir para o navegador. Vamos tentar clicar no nosso novo botão de lista. Em seguida, obteremos um novo componente de lista renderizado como verde. Se entrarmos em nosso aplicativo e, em seguida, em nosso quadro. Aqui dentro, podemos verificar o estado atual de todos os comitês. Agora temos nossos quatro itens da lista. Se formos ao nosso último, que é um que você acabou de adicionar, veremos o título da minha lista incrível. Primeiro, novamente, como antes, se recarregarmos o navegador, isso desaparecerá. Desde que você não tem nenhum armazenamento permanente no momento. Para arredondar as coisas, em vez de enviar o texto dos componentes da lista, podemos acessar os prompts quanto a ele em vez disso. Em primeiro lugar, no board.js. Podemos passar esses adereços para cada lista. Já temos a chave. Isso é bom. Então, depois disso, também podemos passar nossa lista. Podemos pegar os dados com este.state. Nossas listas atuais, passando a chave, salvar este arquivo, e então podemos modificar nossos componentes de lista para que eu vou colocar o título do list.js. Primeiro de tudo, vamos adicionar um nome de classe ao wrapper. O nome da classe vai ser igual a lista ou nosso CSS. Este título também vai estar em uma div circundante, que vai ter um nome de classe do cabeçalho da lista. Então feche isso. Agora podemos mover nossos elementos p dentro desta seção de cabeçalho, e substituir o texto de menos componentes com nossos adereços. Dentro das chaves, este top props.list, e então podemos acessar o título da lista. Se tudo está funcionando bem, agora
devemos ir para o navegador e agora ver o título de nossas listas gratuitas. Também podemos clicar na nova lista, e veremos o título para este também. Bom. Se tudo está funcionando agora para você, vamos agora passar para o próximo vídeo. Vamos procurar a validação do tipo de prop.
12. Validação de tipo profissional: ao passar dados entre componentes, é uma boa ideia fornecer alguma validação. componente Jacquet está recebendo exatamente os dados que ele precisa. Por exemplo, se um componente espera um objeto, mas recebe uma matriz, ele pode quebrar nossa. E isso é exatamente o que vimos antes, quando precisávamos converter um objeto usando objetos escuros. Isso estará usando tipos adequados, que é uma biblioteca fornecida pelo Facebook para executar essas verificações. É simples obter palavras abertas em execução improvisa com erros durante o desenvolvimento. Os donos. Se o nosso protótipo falhar, vamos instalar isto no terminal. Podemos fechar ou terminal com comando ou controle, não
ver dinheiro para instalar isso de MPM com o MP M I
e, em seguida, o nome do pacote, que é tipos de prop. É responder e nos dar alguns momentos para instalar dentro de seu projeto e depois voltar uma vez que isso é feito. Ok, bem-vindo de volta. Uma vez instalado, precisamos importá-lo para cada arquivo que recebe os adereços. Vamos começar pelo topo da árvore, que é o até Js. Este é o nível mais alto,
portanto, ele não recebe nenhum prompt de componentes. Mas em vez disso, ele passa adereços para a casa e também para as tábuas mais tarde. No curso os componentes da casa recebe as placas sobre o tipo das placas está em Ray e também criar nova placa é uma função. Então vamos começar de novo neste componente doméstico. Como poderia começar um problema de trabalho? Validação. Primeiro de tudo, na parte superior do arquivo, podemos importar os protótipos do pacote. Confortável. Tia P poderia transmitir isso a partir do módulo de tempos apropriados. Ok, então a seguir eu vou configurar esses tipos de adereços direto para fora do fundo. O arquivo. Quero fazer isso logo acima de nossos padrões de exportação. Podemos fazer isso com o nome de todos os componentes, que é o lar. Nunca foi embora. Defina os tipos adequados. Tão pouco caso P.
Neste caso, sobre os imigrantes, que é igual a um objeto que conterá o protótipo para cada propriamente dito, que é passado para baixo. A 1ª 1 é para as tábuas. Em seguida, podemos definir para os tipos adequados, que é maiúsculo P anti, que é o que importamos no topo. E depois deste concerto, que tipo de dados esperamos receber se pensarmos no tempo. Podemos ver algumas dessas sugestões aqui dentro quando quisermos. Neste caso é uma matriz. Você também pode definir isso para ser um campo obrigatório que é obrigatório separado por uma vírgula. Nós também podemos fazer o mesmo para o nosso segundo adereço, que é criar novo quadro. Grande nova bola Desta vez é uma função e podemos declarar que queremos um tipo de função com beliche. Isso também é necessário. Assim também muda até o fim. A próxima coisa a fazer é reiniciar nosso servidor com estrelas MPM. Uma vez que isso é feito olhando para fora testículos, corredores sobre o navegador, nós não vemos nenhum problema no momento. Mas se mudarmos um dos tipos apropriados, digamos de matriz para ser um tipo de objeto. Vamos dizer isto. Quero dizer, eu vou ver um tipo de prop falhou que assim chamado de volta e muda para ser uma matriz mais uma vez em
, em seguida, salvar este final. Vamos para a barra lateral. O próximo para baixo é o ponto da placa Js placa ponto Js não está recebendo atualmente um adereços
moveu para baixo para a visualização da bola. Voltaremos a este conselho mais tarde no curso, como antes. A primeira coisa a fazer é importar os tipos adequados e,
depois desta semana, mais uma vez, ir direto para o fundo, logo acima do padrão de exportação, o nome do componente, visualização
off-board e em seguida, definir o tempo adequado com uma minúscula, ser como que é até ser igual ao objeto. A primeira e única adequada que a pré-visualização da bola é pode é de casa. E se formos para cima quando estamos internamente bordo pré-visualização estava enviando a placa adereço. Este é um tipo de objeto. Vamos configurar os tipos de prop Capital P e A Capital T. Este é um tipo de objetos sobre isso. Isso também é necessário para os próximos componentes para baixo na barra lateral vai ser o cartão. Vamos clicar nisto. Voltaremos a isso em breve, já que não estamos usando esses componentes de cartão ainda em nosso projeto. Então finalmente temos os componentes do médico lista. Isso leva em uma lista, então também precisa de um tipo adequado. Vamos fazer nossas importações sobre o topo em protótipos completos de tipos de adereços rolar para baixo. Podemos configurá-los na parte inferior com menos tipos de suporte de porta, então eu vou contestar o tipo de adereço único. Qual recebimento é a lista em que o protótipo é um objeto. Isso também é necessário para Nós, é
claro, no de hoje. À medida que passamos mais adereços também criam mais componentes, eles não podem médicos. Componente que mencionamos não está em uso atualmente, mas vamos fazer uso disso agora, incluindo-o para cada cartão em nossos dados de amostra. Como vemos aqui, o componente cartão é aninhado dentro de cada lista, ou
seja, quando ele está sobre isso na lista. Doutor, como componentes, vamos para a lista. braço do Dr. A. Podemos fazer isso agora. Então aqui dentro ele vai para baixo a bola lateral. Vamos alugar componentes de um carro para cada cartão de uma lista. Lembre-se dos dados de amostra como uma matriz de cartões em um cartão, uma taxa por lista. Então vamos ver a lista e podemos fazer isso agora pelo meu pin através de todos os adereços abaixo do título. Em Debaixo da lista. Mais difícil. Vamos abrir as chaves desta vez é um objeto. Então também precisamos executar jockeys de objeto para transformar nossos adereços em uma matriz. Os adereços uma vez se transformam. Isto não é adereços? A lista Cartões de nota. O que? Vou limpar os resultados. Cada item estará dando esse nome de variável chave. E então dentro desses foguetes, não
podemos colocar uma carta por item encontrado no loop. E certifique-se que isso tem que fechar e foguetes, e então aqui dentro, todos
nós podemos colocar sobre componentes do cartão, fazer você ainda é importado sobre o topo do arquivo, que é que não podemos uma chave, mas você vai ser igual a todas as chaves. Valioso. Podemos passar os dados como adereços. Isto vai ser isto. Sem adereços. Não listar ponto com e, em seguida, dentro dos colchetes passaria na chave. Feche isso com uma barra para a frente sobre os fatores sobre isso em sua on-line. Lá vamos nós. Ok, então agora estamos dando um cartão para passar os adereços. Vamos para o cartão, Doutor. Sim, Todos
nós podemos lidar com esses dados passados para ele. No momento, temos apenas uma div que vai alugar o texto. Então, as primeiras coisas primeiro poderíamos ir até o topo na importação de nossos protótipos e do pacote de tempos
adequados. Em seguida, a estes direita na parte inferior acima do nosso padrão de exportação. O nome do componente dos cartões. Nenhum momento de prob configura um objeto. O nome apropriado é dados sobre o tipo de prop é um objeto, que também é necessário. Então, antes de ir mais longe,
digamos que este cartão componentes e, em seguida, passar para o navegador e nós temos um nunca na linha
de lista 15. Vamos lá agora linha 15. Temos os dados. Esta lista de início de adereços. Andi deve ser cartas dentro de s no final. Vamos tentar isso agora. Bom. Então agora vamos ver o título da lista e também os cartões atribuídos a cada um. É um pouco difícil ver o que está acontecendo. Não, porque o estilo está faltando, você sabe, componentes. Então nós temos feijão, acrescentando, é, hum, aulas como vamos junto. Tal como A lista tinha um sobre também esta lista, e eles também forneceram alguns CSS para ir com seu curso para compensar olhar um pouco melhor. Você pode encontrar este arquivo CSS enquanto eles baixam com o curso. Então vá em frente e pegue o CSS como um senhor para baixo. E então uma vez que você não sabe, podemos colar isso dentro do aplicativo dot CSS. Então eu vou remover todos os estilos existentes e, em seguida, colar em todos os estilos que
foram fornecidos. Então, agora, se darmos este salvamento final e ir para o navegador Então agora podemos ver mais claramente nossa lista livre nos dados de amostra, nós temos nossos títulos de lista e então nós temos dois cartões dentro de cada lista. Portanto, ainda há um pouco de trabalho a fazer, mas agora pode ver a lista nos carros mais claramente. Então este é agora para os nossos tipos de adereços. Estou respondendo isso enquanto vamos para o resto do curso.
13. Componentes de controle: Se tivéssemos mais de dois quaisquer números de URL, como 1,2,3 e, em seguida, para frente placas de barra. Essa exibição é renderizada pelos componentes home. Contém um novo botão de pasta. Se clicarmos, isso adicionará alguns dados codificados aos estados da nossa placa. Este novo botão de placa é amplo no home.js. Este é um botão e ele irá acionar um método chamado newboard. Todos esses dados da placa estão atualmente codificados, mas queremos que o usuário adicione o nome da placa e também selecione a cor. Assim como em qualquer um dos sites, podemos fazer isso com um formulário. Vamos pôr isto na barra lateral. Vamos entrar nos componentes e, em seguida, criar um novo arquivo para isso chamado CreateBoardForm. Com a extensão dot js no final e certifique-se de soletrar direito. Lá vamos nós. A primeira coisa que queremos fazer é importar Reagir de “reagir”, assim como sempre fazemos. Então ele vai ser um componente baseado em classe. Deseja chamar isso da mesma forma que o arquivo, que é CreateBoardForm. Isso vai estender componentes React. Dentro aqui nós adicionamos nosso método aleatório necessário, que é então simplesmente retornar alguns js x como nossos elementos AP. Com os textos de oi. Voltaremos a isso em um momento e criaremos nossa reforma. Primeiro, vamos exportar o padrão. CreateBoardForm. Salve este arquivo e, em seguida, podemos importar este arquivo nele para nossos componentes home. Role até o topo abaixo de nossos tipos de adereços. Podemos importar CreateBoardForm. O caminho do arquivo que precisamos será ponto barra. Então diz CreateBoardForm. Rolando para baixo para o nosso esforço aleatório, não
precisamos mais deste botão que terá aqui, já que vamos substituir isso por um formulário. No lugar aqui podemos adicionar nossos componentes CreateBoardForm. Fecha enquanto estamos aqui até que possamos adicionar um invólucro de pré-visualização, que vai ser um mergulho ao redor. Isso irá apenas adicionar o estilo em que precisamos usar CSS. Podemos adicionar o nome da turma. Este vai ser igual a placa-preview-wrapper. Em seguida, pegue o mergulho de fechamento e adicione isso logo após a chave encaracolada de fechamento. Esta placa preview-wrapper nos dará o layout de grade CSS para todas as nossas pré-visualizações da placa. Salve este arquivo e, em seguida, passar para o navegador e agora vemos o texto de oi, que significa que nosso componente está sendo processado agora. Além disso, nossas pré-visualizações gratuitas da placa e estão sendo exibidas no formato da grade, em vez de em uma lista. Voltar para os componentes CreateBoardForm. Podemos criar nossa marcação de formulário. Vamos para cima. No lugar deste texto alto, podemos removê-lo. Podemos adicionar um formulário aqui dentro. Este formulário também vai ter um ClassName, que se torna ou create-board wrapper. Primeiro de tudo, precisamos de uma entrada com o tipo de texto. Que vai ser para o nome do nosso conselho. Feche isso e em uma linha separada eu vou adicionar o tipo que vai ser igual ao texto. Ele também precisa do nome, que vai ser igual ao nome. Então, finalmente, um valor de espaço reservado, que vai ser o nome da placa. A segunda entrada que é formada vai precisar vai ser uma caixa de seleção. É assim que o usuário pode selecionar a cor de fundo para esta pasta. Cria uma caixa de seleção. Vamos abrir e fechar isto. Este não gostava também precisa de um nome atributos que vai ser igual a fundo. Dentro aqui irá então listar nossas opções que estão disponíveis para o usuário. Vou adicionar seis cores diferentes. Você pode adicionar qualquer valor de cor que você gosta destes, ou você pode ficar com aqueles que eu quero escolher. O primeiro vai ser um valor azul. Podemos adicionar o mesmo usando os atributos de valor. O valor x de 80ccff. Quer copiar e colar isso em mais cinco vezes. Nos dando seis valores de opção. É um comum vai ser para uma cor verde. O valor x vai ser 80ffaa. O terceiro vai ser vermelho, que é um valor de f94a1e. O quarto é para uma cor rosa. O valor x desta vez é ffb3ff. Então temos um roxo de segunda a última, que é bf00ff. Finalmente temos a cor laranja. Isto é FFAD, duplo três, e aqui estão as nossas seis cores. O último item que precisamos adicionar é para um botão enviar com os textos de criação de nova placa. Ele também precisa de um tipo que vai ser submetido. Isto é tudo o que precisamos fazer para a nossa forma. Salve este arquivo e, em seguida, vá para o navegador e abra a parte superior. Agora vemos nossas entradas de nome da placa. Temos o nosso menu suspenso com estas cores láticas e o nosso botão de envio. Este é o nosso formulário agora exibido no navegador. Mas agora precisamos de uma maneira de obter a entrada de dados pelo usuário. Existem algumas maneiras de fazer isso ao usar o React. Primeiro é o que vamos olhar agora chamado de componentes controlados. Isso geralmente significa que o React assume o controle dos dados, que digitamos e os armazena em estados. Entradas de formulário HTML, como esta entrada e selecione temos tipicamente manter seu próprio estado, o que
significa que não sabe o que o usuário digitou em. Você pode ter usado o event.target.value antes para acessar isso. Podemos então acessar esse valor e colocá-lo em estado. Uma vez que está em estado, podemos usá-lo para criar nosso novo quadro. Podemos começar criando nosso estado padrão. Vamos para CreateBoardForm. Logo abaixo do título da turma. Vamos adicionar nossos objetos de estado. Primeiro de tudo, podemos adicionar o título e satisfazer um valor inicial de uma string vazia. Também podemos definir um valor de cadeia de fundo padrão de 80ccff, que é apenas o nosso primeiro valor azul. Esta será a nossa cor de fundo padrão se nenhuma opção for selecionada. Role para baixo em um formulário. Dentro dessas entradas, podemos criar um manipulador de eventos em linha, definir o estado quando um usuário digita nas entradas. Podemos fazer isso apenas sob o espaço reservado. Podemos adicionar o manipulador de eventos em mudança e satisfazer uma função em linha, que leva nos dados de evento como e. Isso vai executar uma função que vai executar estados. Podemos passar isso como um objeto e o estado que queremos
mudar é o título que você deseja definir como e.targets. O valor e.target. valor é os dados do evento que são digitados pelo usuário. Então também podemos fazer o mesmo para o fundo. Role para baixo até nossa seleção logo após o plano de fundo dentro da tag de seleção de abertura. Também podemos adicionar um manipulador de eventos on change. Neste novamente, na linha passando os dados do evento, criar nossa função de seta, que também vai definir estado, com este ponto definido estado, objetos pessoais. Mas desta vez queremos definir o fundo dentro dos Estados Unidos. Isso também é e para alvo de valor. Cada vez que o usuário digita qualquer coisa no formulário ou altera as entradas selecionadas, ele irá então executar esta função e atualizar nosso estado. Em seguida, podemos testar isso adicionando um método on submit ao formulário. Vá até o nosso botão e, na verdade, vamos adicionar isso aos elementos do formulário real e estes no online. Desta vez, o manipulador de eventos está em envio. Uma vez que o formulário foi enviado, então
queremos executar um método personalizado chamado este um identificador enviar. Isso fará com que o método de envio do identificador seja executado sempre que o formulário for enviado. Podemos testar isso acima com um log de console simples. Fora do nosso método aleatório, podemos criar o nosso método personalizado de manipular envios passando os dados do evento. A primeira coisa a fazer é executar e ou evitar padrão. Isso impedirá o comportamento padrão uma vez que o formulário tenha sido enviado, que será então recarregar o navegador, e não queremos fazer isso, uma vez que um reage para estar no controle de quando a página recarrega e atualiza. Podemos então fazer um log de console simples para o navegador, que vai produzir este estado ponto. Este estado de ponto nos mostrará o título e o plano de fundo que o usuário digitou uma vez que este formulário tenha sido enviado. Vamos dizer isso e depois ir para o navegador. Na guia do console. Vamos digitar qualquer coisa aqui. Altere o valor e crie uma nova placa. Parece que tivemos uma cimeira, vamos ver o que está acontecendo. É um erro ortográfico, então manipule, envie e vamos tentar mais uma vez. Recarregue e podemos adicionar nosso teste. Vamos tentar com a cor padrão. Vou ter um título e um fundo. Vamos mudar a cor e também o título e lá vamos nós. Agora o estado foi atualizado com o valor de entrada pelo usuário. Agora podemos terminar nosso método criando nosso quadro. Instale isso como um objeto. Vamos remover o registro do console. Crie uma constante para bordo. Este será um objeto que vai levar no título, que podemos pegar de estados com este título ponto estado ponto, separado por vírgula. Isso também precisa pegar o fundo. Este também é fácil. Este é o estado inicial, o fundo. Em seguida, podemos adicionar o valor de criado em, que assim como olhamos anteriormente, vai ser igual a nova data ponto. Portanto, podemos pegar isso do banco de dados em ordem de tempo. Nós não temos nenhum dado de usuário ainda, então podemos adicionar uma string simples. Vamos para a, b, c 1, 2 ,3 nos dando os dados do quadro que precisamos enviar para o banco de dados. Se passarmos para o app.js, ainda
temos um método chamado criar nova placa. Isso também leva nas placas, mas temos isso agora que podemos passar junto com o método. Precisamos passar esse método como um adereço e chegaremos a isso em um momento. Mas primeiro queremos adicionar uma instrução if para primeiro verificar se o título do ponto da placa existe. Queremos verificar se o título do ponto do quadro está lá, porque se não estiver, isso significa que o usuário está tentando enviar um álbum sem um nome. Nós também queremos verificar se o fundo do ponto da placa existe também, o que deveria, porque temos isso armazenado no estado. Podemos então executar o nosso método de criação de nova placa com este ponto prop, ponto criar uma nova placa. Passando em nossos novos objetos de tabuleiro. Agora, o próximo passo é realmente certificar-se de que esses adereços estão sendo recebidos por este formulário. Abra o app.js, temos a nossa criação de novo método de placa, que é definido nos estados. Estamos colocando isso nos componentes da casa. Vamos para a casa dot js, esta casa ponto js, então ele precisa passar isso para baixo para criar forma de placa. Podemos fazer isso agora, então cria um novo quadro. Isso é igual aos nossos adereços, então este ponto adereços ponto criar nova placa. Isto deve agora estar disponível na nossa forma. Apenas uma coisa a fazer antes de irmos em frente e verificar isso é que ainda temos este novo método amplo logo acima em nossos componentes domésticos. Podemos agora remover isso, uma vez que isso não é mais necessário. Salve isso e certifique-se de que todos os nossos arquivos estão salvos e vá para o navegador. Agora podemos testar isso. Vamos adicionar um novo quadro. Eu vou para a frente para fazer, que vai ser uma cor vermelha e, em seguida, criar uma nova placa. Criar nova placa não é uma função. Isto é por aqui. W minúsculo, vamos tentar mais um. Isso é devido em uma cor de vermelho. Crie novas pastas e agora veremos que nossa placa foi empurrada para estados e, em seguida, renderizada no navegador. Para completar este vídeo, estamos passando adereços, então precisamos de alguma validação de propriedade dentro de todos os formulários. Vamos primeiro começar no formulário de criação de placa
importando nossos tipos de prop do nosso pacote de tipos de prop. Então, como sempre, podemos adicionar isso na parte inferior de nossos componentes, logo acima de nossa exportação. Cria tipos de prop de ponto de forma de placa, p
minúscula, conjunto de todos os objetos. O único adereço que estamos recebendo para este componente é criar nova placa. Esta nova placa vai ter o tipo de função prop, que irá adicionar com ponto func. Isso também é necessário, já que sempre queremos ser capazes de adicionar um novo quadro. Vamos salvar isso e ir para o navegador e verificar se não há problemas, e tudo parece bem. O próximo tópico vamos continuar olhando para formulários, dando uma olhada em componentes de controle e também usando refs.
14. Componentes descontrolado: O método controlado que olhamos no último vídeo, é a maneira geralmente preferida para lidar com formulários. Desde reagir está em total controle e também pode lidar com quaisquer atualizações. Agora vamos descobrir uma maneira alternativa de criar uma forma em reagir, e isso é chamado de componente descontrolado. Desta forma, os dados do formulário são manipulados pelo DOM e pode ser uma alternativa útil para evitar escrever manipuladores de eventos para cada entrada de formulário. Para este exemplo, vamos construir nos formulários e uma nova lista. Fazemos isso nos componentes board.js, e neste slide aqui,
esta é a nova lista de entradas que vemos na parte inferior esquerda, então olhando para isso na parte inferior dos componentes da tigela após a div do wrapper lista. Vamos para lá agora para o nosso projeto no Visual Studio Code. Vamos abrir o board.js,
e, em seguida, se formos para a div de fechamento para este wrapper lista que é este aqui. Podemos então criar o nosso formulário. Dentro deste formulário, vamos adicionar um manipulador de eventos de envio. Em Enviar não vai disparar um método personalizado, que é chamado de estrela, cria uma nova lista. Se deslocarmos até o topo desses componentes, já
temos criar novas listas dentro de nossos métodos, para que possamos fazer uso disso muito em breve. Depois disso, também podemos adicionar um nome de classe para o nosso estilo e definir isso para novo wrapper lista. Agora, depois que o primeiro foi para aninhar dentro de uma entrada de formulário, a entrada vai ter o tipo de texto que ele auto fecha. Na nova linha, podemos adicionar o tipo de texto. Como tudo o que recebemos pelo usuário são as entradas de texto para uma nova lista, também precisamos de um nome. Podemos simplesmente chamar seu nome
e, em seguida, um valor de espaço reservado para que o usuário saiba exatamente o que está digitando e adicionar um símbolo de adição e, em seguida, o texto fora da nova lista. Aqui, atualmente temos nosso div cercado, seguido por um elemento de forma logo depois. Como já sabemos, reagir não vai nos deixar fazer isso porque ele precisa de elementos de um pai. Isso é adicionar uma div como um invólucro. Vamos riscar a etiqueta de fechamento e os lugares logo após a nossa forma. Vamos salvar isso, e depois para o navegador. Dentro do navegador temos nossa nova lista de entradas, e também este botão que temos de mais cedo, que está acionando o mesmo método. Vamos para o nosso método aleatório. Podemos remover este botão de mais cedo, já que agora temos a nossa entrada de formulário. Em seguida, role para cima até o nosso método de criação de nova lista, que irá definir o estado. Uma vez que nesta versão não estamos usando estado para gerenciar as entradas de formulário, precisamos de uma maneira de acessar os elementos DOM e, em seguida, configurá-los para este objeto lista,
ou seja, precisamos pegar a entrada que o usuário inseriu e definir isso para o nosso objeto lista, e reagir nos dá uma maneira de fazer isso usando refs. Refs são formas de acesso ao DOM e eles nos dão todas as informações que precisamos, incluindo o valor inserido em uma entrada de formulário. Podemos criar um novo ref com o método create ref. Vamos fazer isso acima criar novas listas. Damos o nosso nome de referência, eu quero chamar meus addboardinputs. Para manter o nome descritivo pode definir um ref com react.create ref, e os colchetes usados posteriormente. Podemos então passá-lo para as nossas entradas como atributos de referência. Vamos chamar entradas onboard, vá até os elementos dos quais você deseja obter as informações. Vou adicionar isso em qualquer lugar como um atributo. Podemos definir o ref igual a estes pontos adicionar entrada placa. Isso irá anexar esta referência a esta entrada HTML, e podemos acessá-lo acima em nosso método para soltar as propriedades que precisamos nele cria uma nova lista. Nós também podemos agora passar as informações do evento com a variável e,
em seguida, podemos acessar isso para evitar o comportamento padrão. Isso basicamente impedirá que a página recarregue quando enviarmos o formulário. Para testar isso, vou comentar o código e, em seguida, o console registrar o ref. Vamos remover os estados definidos e também nossa lista, e assumir um log de console com o valor de nosso ref, que é este, .addboardInputs. Não precisamos do ponto-e-vírgula, então vamos ao navegador. Temos uma flecha dentro do quadro, então pegamos a nova lista, descomente essa cinta de fechamento, e lá vamos nós. Agora dentro de nossa nova lista, sem nada dentro daqui, vá para o console, e então nós obtemos o valor de nosso ref, que aponta para nossa entrada atual. Agora é um monte de informações sobre a entrada apenas aqui. Mas o que estamos particularmente interessados é o valor atual,
portanto, no registro do console, agora
podemos liberar para.current.value. Isso nos dará o valor inserido pelo usuário, vamos digitar qualquer coisa nesta entrada. Agora temos o texto que foi inserido pelo usuário. De volta à nossa bola, agora podemos descomentar este código. Isso é como todas as linhas quando comentadas, que é a lista, todo o caminho para definir estado. Nós também pode remover o log do console, e agora podemos usar o valor ref dentro do nosso título em vez deste valor codificado. Podemos fazer isso removendo a string
e, em seguida, em vez disso, podemos apontar para this.addboardInputs,
e, em seguida, assim como vimos antes no log do console, podemos pegar o valor atual. Agora salve isso e vamos para o navegador. Vamos tentar qualquer coisa aqui dentro, nova lista dois, e agora novamente erro. A razão para isso é sobre os componentes da lista. Aqui dentro, estamos passando por todos os cartões disponíveis dentro da nossa lista. No entanto, dentro desta bola componentes, quando criamos uma nova lista, não
temos nenhuma configuração de cartão dentro deste objeto. Portanto, reagir não pode encontrar quaisquer valores e causa um erro. Mais tarde, se eu baseado esses carros vai se separar das listas,
então, como uma medida temporária, eu vou adicionar alguns cartões simples ao criar uma nova lista. Logo após novos dias vamos adicionar temporariamente em alguns cartões que vai ser uma matriz de objetos. Vamos adicionar id 1, algum texto e dizer cartão 1. Separado por comum, podemos adicionar um segundo objeto com um id de 2 e também algum texto do cartão 2, e também adicionar a vírgula logo após criado em. Vamos para o navegador, e agora se adicionarmos uma nova lista, ela responde. A nova lista agora é adicionada dentro do navegador. Pouco antes de encerrarmos isso, há alguns pequenos problemas para corrigir. Primeiro de tudo, se excluirmos o conteúdo de nossas entradas de formulário e pressionar enter, vemos que agora podemos adicionar uma lista vazia, e também número 2 a entrada não limpa depois de adicionar uma nova lista. Pressione enter, e queremos que esse valor seja limpo para a próxima lista. São coisas muito simples de consertar. Primeiro, podemos adicionar uma instrução if para verificar se o título está presente, antes de definir um estado. Podemos fazer isso no lado do board.js. Vamos procurar a nossa chamada falsa, que está aqui. Na linha acima, podemos criar uma instrução if para verificar se a list.title está presente. Se este.set estado e, em seguida, mover isso para dentro, isso irá entrar, parar uma lista vazia que está sendo adicionada. Podemos testar isto. Se apertarmos enter nesta nova lista, veremos que nenhuma nova lista foi adicionada. próximo é limpar a entrada depois de enviarmos uma nova lista, podemos fazer isso dentro do quadro, .js. Logo após este estágio, podemos atualizar ou redefinir o valor do nosso ref para que esses pontos sejam entrada da placa. Podemos definir o valor da coluna, assim como usamos antes para ser igual a uma string vazia. Teste isso. Qualquer coisa aqui dentro. E agora a nossa nova lista de entradas está vazia. Agora isso está funcionando, podemos ter um pouco mais de prática
no próximo vídeo criando o novo formulário de cartão.
15. Crie novo formulário de cartão: O novo cartão formado vai ser semelhante ao último vídeo, então vamos ter um pouco mais de prática usando gráficos e também empurrar para todos os estados objeto. Estas serão as novas entradas de cartão que vemos na parte inferior de cada uma dessas três listas, mínimo conectado no mínimo componentes neste cartão. Vamos para o list.js. Dentro dos componentes da lista e abaixo da nossa seção atual, também
podemos adicionar um novo formulário, então apenas sob o nosso loop e também ainda dentro desta div circundante, podemos então adicionar um formulário. O formulário vai ter um método on submit, que vai ser igual ao valor de this.createWCard. Nós também pode adicionar um nome de classe e definir isso para new-card-wrapper. Adicione também isso ao on-line, para que fique mais claro. Agora, dentro deste formulário, podemos ir em frente e adicionar nossa e nossa entrada, assim como fizemos ao adicionar uma nova lista. A entrada vai ter o tipo de texto. Vamos fechar isso, e em uma nova linha podemos adicionar o tipo. Depois disso, isso também vai ter o nome e isso é igual ao nome,
e então, finalmente, um espaço reservado, que assim como o último vídeo vai ser um símbolo de adição, e então o texto do novo cartão. Isto é tudo o que precisamos fazer para a nossa forma. Isso também vai precisar de um ref também, para que possamos criar isso no topo da nossa classe. Logo acima do nosso esforço aleatório, podemos adicionar nosso NameInput, responda isso para React.createRef. Em seguida, precisamos pegar este NameInput e adicionar isso ao nosso formulário. Dentro da entrada como um atributo podemos adicionar o ref, assim como já usamos antes, e por isso é para o valor de this.NameInput, ligando o valor desta entrada para o nosso ref. No momento, por simplicidade, nossos cartões estão contidos dentro das listas nos dados de amostra. Em breve todos os quadros, listas e também os cartões também serão independência, e então nós vinculamos estes via IDs. Podemos começar esse processo adicionando os estados atuais do cartão dentro do E2. No topo desses componentes, podemos criar nosso objeto de estado, e este estado será responsável por armazenar os cartões atuais. No momento, porém, este é o estado inicial que vai ser definido como um array vazio, e o processo de criação de um novo cartão é muito semelhante ao último vídeo quando adicionamos uma nova lista. Tudo o que precisamos fazer é ir abaixo do nosso ref fora do nosso esforço aleatório e, em seguida, podemos criar um novo cartão, e lembrar este nome mais liga-se com o método que somos adicionados ao enviar, então “criar novo cartão” vai ser uma função que vai levar as informações do evento. Vamos configurar a nossa função de seta assim. Podemos então impedir que o comportamento padrão pare o recarregamento do navegador e,
em seguida, cria nosso cartão. Podemos armazenar este cartão dentro de uma constante e salvá-lo em um objeto. O objeto do cartão vai ter o texto, o ID da lista que está vinculado, uma matriz de rótulos, e também a data em que foi criado. Primeiro de tudo, o texto que é para este cartão que podemos pegar de nossos refs. Isso é armazenado dentro de NameInput, e mais uma vez podemos pegar o valor com.currrent.value. Separado com a vírgula, também
podemos vincular isso a uma lista adicionando um listID. Mais tarde neste curso, este listID será automaticamente colocado em segue, mas por enquanto podemos adicionar qualquer valor dentro aqui. Ao lado de cima, um cartão também precisará de uma matriz de rótulos, então vamos definir isso como uma matriz vazia inicial, e também o CreateDAT, que será igual a uma nova data JavaScript. Abaixo deste objeto, também podemos definir os estados, mas logo antes de fazermos isso vamos verificar se o cartão.text está presente, que impedirá que quaisquer entradas de formulário sejam enviadas, o que não tem valor. Podemos então chamar isso.SetState, como em nossos objetos. Estes estados que queremos definir são os cartões coloridos, então vamos fazer o que fizemos anteriormente. Dentro deste objeto de estado vamos definir os currentCards imaginando o currentState com o operador de propagação, então this.state.currentCards, em seguida, separados por vírgula também irá adicionar em nosso novo cartão. A próxima coisa a fazer depois disso é também redefinir nossa entrada de formulário, então vamos apenas adicionar isso em uma nova linha para que fique mais claro. Em seguida, abaixo desta chave para as instruções if, podemos então redefinir a caixa de entrada de texto acessando o ref com NameInput
e, em seguida, definir o current.value para ser igual a uma string vazia. Para verificar se isso está funcionando, podemos fazer um log de console rápido logo após isso com a string de novo cartão adicionado, e podemos adicionar no final do cartão.texto ou para o navegador. Agora temos nossas novas entradas de formulário de cartão no final de cada lista, então vamos adicionar qualquer coisa aqui. Deixe-me obter novo cartão adicionado e, em seguida, texto. Vamos tentar este, e agora estes estão todos a funcionar bem. Vou deixar os cartões como estão por enquanto,
já que vamos começar os dados reais do cartão de base [inaudível] em uma seção posterior, e depois vincular esses cartões a cada lista.
16. Como configurar o roteador React: No momento em nosso projeto, mostramos os componentes da casa e da placa. Podemos ver isso se formos para as ferramentas de desenvolvedor Reagir dentro do nosso aplicativo, temos esta seção inicial, olhar para o topo aqui e, em seguida, abaixo dele estamos renderizando os componentes da placa. Isso ocorre porque atualmente não temos nenhuma maneira de alternar entre eles. Idealmente, porém, o que queremos depois de fazer login é para ser levado para este componentes da casa, onde podemos então selecionar qualquer uma dessas placas, podemos clicar sobre ele e, em seguida, ser levado para esta visão do conselho. Basicamente, isso precisa estar em páginas diferentes. Para que isso aconteça, podemos instalar um roteador que nos permitirá mostrar determinados componentes em determinados URLs. Por exemplo, a URL das barras diretas renderizará esses componentes da placa. Eu também vou ter um URL para casa. Infelizmente, essa reação não tem nenhum pacote oficial de roteador, mas provavelmente o mais comumente usado é o pacote react-router-dom, que é a versão web do roteador. Este é um pacote maduro que é ativamente mantido e podemos instalar isso usando NPM. No nosso projeto, vamos abrir um novo terminal e aí dentro, vamos executar o NPM. Eu react-roteador-dom, separado por hífens, deixe acionar isso. Existem diferentes abordagens que podemos tomar para configurar nosso roteador no projeto, como adicionar o roteador a um arquivo separado e depois importá-lo em nosso aplicativo principal. Nós também podemos adicioná-lo ao nosso index.js. Mas como nós temos apenas algumas páginas para alternar entre, eu vou configurar isso em nosso app.js. Vamos lá agora e depois no topo,
a primeira coisa que precisamos fazer é importar os pacotes que precisamos do roteador do navegador. Estes são chamados de exportação, então nós adicioná-los dentro das chaves. O primeiro que precisamos é o BrowserRouter, B
maiúsculo e, em seguida, R maiúsculo separados por uma vírgula. Também precisamos importar o pacote de rota. Em terceiro lugar e finalmente, o switch será importado do pacote do roteador, que é react-router-dom. Primeiro de tudo, temos este BrowserRouter. Esta é a nossa implementação real do roteador. Vamos usá-lo como um wrapper para todas as nossas rotas e usa a API de histórico HTML5. Depois disso, temos as rotas, isso será usado para renderizar um componente para um determinado URL. Finalmente, temos switch, este é um wrapper para várias rotas. Eu só vou fazer a primeira rota que coincidir. Vamos dar uma chance e adicionar isso
ao método aleatório envolvendo os componentes com o roteador. Ao nosso método aleatório, onde colocarei nossa casa a bordo, cercando esses dois componentes dentro da div. Então eu quero fazer uso do BrowserRouter, que acabamos de importar, então a tag de abertura, e depois adicionar a tag de fechamento logo após a placa. Podemos então vir e encontrar nossa placa e nossos componentes domésticos e, em seguida, fazer uso do roteador para controlar isso. Vou começar com a rota do conselho. A rota para casa leva os adereços, então voltaremos a isso muito em breve. Vamos fazer uso de nossa parte de roteamento com um R maiúsculo, isso é auto-fechamento. Em seguida, dentro nós passamos no caminho que vai ser igual a bordo barra, então cada vez que o usuário visita essas rotas de placa barra para frente,
mas, em seguida, quer renderizar para fora um componente, podemos adicionar os componentes, e este vai ser os componentes da placa, e isso precisa de um B maiúsculo, para corresponder
aos componentes que importamos no topo deste arquivo. De volta ao nosso roteador, outra rota que precisamos é um PageNotFound para pegar toda a sua rota que não adicionamos aqui dentro. Logo abaixo da nossa prancha, vamos adicionar uma segunda rota. Nós não precisamos adicionar um caminho desta vez porque isso irá
pegar todos os caminhos que não são declarados acima. Em vez disso, tudo o que precisamos fazer é renderizar um componente. Vou adicionar um componente chamado Página Não Encontrada e, em seguida, fechar isso. Este componente ainda não foi criado, então podemos ir em frente e fazer isso agora dentro de componentes e rampages, vamos adicionar um novo arquivo. Este é o PageNotFound.js. Sua função será bem simples. Eu vou importar Reagir a partir daqui e, em seguida, configurar isso como um componente baseado em função chamado PageNotFound por causa da função,
em seguida, dentro aqui vamos adicionar uma div. Esta div vai simplesmente renderizar um
título de nível três com o texto de PageNotFound. Agora precisamos exportar esta função para baixo na parte inferior com um padrão de exportação, o nome do componente PageNotFound. Isso agora nos permitirá importar isso no app.js, então, no topo, podemos importar pagenotFound do caminho do arquivo, que é componentes de barra ponto. Isso também está na pasta Páginas e, em seguida, o nome de PageNotFound. Vamos salvar isso agora e ir para o navegador,
eu tenho um erro, BrowserRouter, então para baixo na linha 23, basta adicionar um R dentro disso. Em seguida, altere o navegador, então atualmente estamos nas rotas de 123 barra para frente. Agora vamos obter o PageNotFound, já que isso não corresponde a nenhuma das rotas dentro daqui. Se agora tentarmos barra barra, agora
devemos ver este componente de placa renderizado para
mudar nossa URL para ser placa de barra. Agora eu vejo a placa renderizada dentro do navegador, bom. Pouco antes de encerrarmos este vídeo, quero mostrar-lhe algo que pode apanhá-lo ao usar o roteador do navegador pela primeira vez. Se voltarmos para o app.js. Primeiro de tudo, se comentarmos o PageNotFound, e então adicionamos mais uma rota logo acima aqui. Aqueles fora, e então nós podemos adicionar um caminho que vai ser para toda a rota de barra, então dentro aqui você pode renderizar qualquer componente. Vamos simplesmente ir para o PageNotFound. Se salvarmos este arquivo agora e passar para o navegador e, em seguida, navegar para a placa de barra, vemos ambos os quadros é renderizado para fora e também os componentes PageNotFound, mesmo que estamos correspondendo a uma URL de placa de barra. Isso pode parecer um pouco estranho, porque atualmente nas rotas da placa de barra para a frente, não
vamos querer renderizar os componentes da placa. A razão pela qual isso está acontecendo é porque tecnicamente, a barra para a frente também é um jogo aqui também. Se olharmos para a barra, isso também começa com uma barra, então teremos uma correspondência parcial no início da URL. Isso é suficiente para renderizar o componente home dois e se não quisermos esse tipo de comportamento, também
podemos adicionar exatamente à rota, o que evitará isso. Dentro da nossa rota podemos adicionar exato. Salve isso, e agora na placa de barra, nós só vemos o componente placa desde que o uso exato não permitirá quaisquer correspondências parciais, então eu vou apenas restabelecer o nosso aplicativo, Eu descomentar sobre PageNotFound. Mas isso é algo para ter cuidado ao usar o roteador. Em seguida, vamos passar para analisar como podemos reintroduzir os componentes domésticos e também como podemos passar adereços usando o roteador.
17. Como passar de acessórios para um componente de roteador: Este arquivo app.js usado para renderizar nosso componente inicial e também a placa. No último vídeo, quando mudamos para o roteador, nós apenas renderizamos o componente da placa, deixando este componente inicial até este vídeo. Isso ocorre porque este componente doméstico também faz uso de adereços, passamos as placas, e também o método de criação de novo tabuleiro. Agora, ao passar adereços usando
o roteador, o primeiro instinto seria talvez fazer algo assim. Se tivéssemos nossas rotas de casa, poderíamos passar em um componente de casa. Poderíamos então também passar os adereços, assim como comentamos abaixo, como as placas. Vamos adicionar isso acabou e também criar novo quadro. Não deixe nenhum componente para espelhar o que tínhamos antes. No entanto, se fôssemos salvar isso e, em seguida, passar para o nosso aplicativo, precisamos ir para a barra, que é o componente inicial. Agora vemos que recebemos uma mensagem de erro no console e também no navegador. Estamos recebendo esses erros porque o componente doméstico não está recebendo os adereços de que precisa. Portanto, Reagir está recebendo esse valor indefinido ou nulo. Ao usar o roteador React, não
podemos passar adereços da maneira tradicional. A solução é passar em um suporte de renderização no lugar do nosso componente. Vamos começar removendo nossos adereços e também este componente doméstico. Em seguida, no lugar, podemos adicionar em um prop de renderização. Aqui dentro isso leva em uma função. Então, passando uma função de seta, assim como esta. Aqui, podemos então adicionar nosso componente de casa com nossos adereços. Assim como fizemos antes, aqui
em baixo temos o componente de casa, qual deles está fora de nossas duas placas. Podemos, de fato, copiar esta seção e, em seguida, adicionar isso dentro desta função. Na verdade, só precisamos de uma casa e não desta prancha, então vamos remover isto. Então, primeiro de tudo, vamos salvar este arquivo e verificar isso. Agora vemos o componente inicial renderizando as visualizações da placa, então isso agora remove nosso erro. Também vemos esta página não encontrado componente. Como ele não tem um caminho, ele sempre será renderizado com nosso layout de roteador atual. Para corrigir isso, podemos cercar nossas rotas com uma instrução switch. Então, dentro do roteador do navegador, podemos fazer uso deste pacote de switch que importamos anteriormente. Logo após o roteador de navegação, podemos passar isso em. Ele tem uma abertura e uma etiqueta de fechamento, que fica apenas dentro do nosso roteador do navegador. O interruptor vai fazer é olhar para os
nossos componentes e, em seguida, apenas renderizar o primeiro que corresponde. Então, se uma barra ou uma placa de barra direta for encontrada, o componente correspondente será renderizado exatamente como quando estiver usando instruções de switch JavaScript regulares. Se nenhum for igual, ficamos com a página não encontrada na parte inferior. Vamos salvar isso e verificar se o componente da página não encontrada foi removido. Agora, vamos ter apenas os componentes domésticos como esperado. Isso agora nos deixa com o comportamento que esperaríamos e é assim que podemos passar adereços usando o roteador React. Em seguida, vamos continuar olhando para este roteador e como podemos passar parâmetros através da URL.
18. Parâmetros de URL: Usando o roteador React também podemos passar parâmetros através do URL para mais de páginas. Parâmetros são uma seção do URL que pode ser alterada. Por exemplo, se tivéssemos um usuário que está conectado e qualquer um usar ID como usuário um, poderíamos então adicionar “/boards”. Iria exibir todas as placas para o usuário um. Este usuário uma seção é dinâmica, que
significa que ele vai mudar dependendo de qual usuário está conectado. Também o mesmo se tivéssemos várias placas. Também podemos ter uma prancha. Em seguida, barra com o ID da placa para apenas 100, o que
significa que a seção 100 seria dinâmica, armazenada dentro de uma variável e, em seguida, disponível para uso com o roteador React. Vamos para o nosso App.js e ver como podemos implementar isso. No momento, temos a barra direta, que está renderizando nossos componentes “home”. Mais tarde neste curso, essa rota de barra será usada para renderizar um componente de login. Um usuário precisa fazer login antes de ver seus próprios álbuns. Portanto, isso agora significa que este componente inicial, que exibe as placas do usuário, precisará estar em uma rota como esta, então o usuário um. Em seguida, podemos ver as placas disponíveis para esse usuário conectado. Agora não é prático adicionar uma rota diferente, com um caminho diferente, para cada usuário que está conectado em nosso site. Em vez disso, o que podemos fazer é adicionar dois pontos, para adicionar uma seção dinâmica, seguido por um nome que queremos adicionar a esta variável. Vamos chamá-lo de ID de usuário. Agora, se formos para o navegador e vamos ter “123/boards”. Isso agora seria renderizado para o componente inicial e, em seguida, armazenar o valor de 123 dentro deste ID de usuário. Como esta seção é dinâmica, ela ainda renderizará esses componentes “Home”, independentemente do valor colocado aqui dentro. Se abrirmos o “Reagir ferramentas de desenvolvedor”. Vamos clicar nesta guia e, em seguida, procurar os “Componentes iniciais” que estamos visualizando atualmente. Só verá os adereços no lado direito com as “Placas” e também a função “Criar nova placa”. No momento, não há referência a esse ID de usuário. Para dizer isso, precisamos passar os dados do roteador como um suporte dois. Poderíamos fazer isso dentro do “Prop Render”. Aqui dentro, vamos passar os adereços como variável para a função. Em seguida, dentro de nossos “componentes domésticos”, como são estes eram uma linha separada. Também podemos nos espalhar nos “Adereços”. Isso então mesclará os dados do roteador com o resto dos adereços, que você passa para os “Componentes Home”. Voltar para as “Ferramentas de desenvolvimento” Vamos “Recarregar” entrar em “Reagir” e procurar os “Componentes domésticos”. Selecione isto. Agora, ao lado dos “Boards” e “Create New Board”, temos três novos adereços. Este é o “Histórico, localização e correspondência” adereços, que é transmitido pelo roteador React. Vamos olhar para estes com mais detalhes à medida que passamos pelo resto do curso. Mas por enquanto podemos encontrar os parâmetros ou esses parâmetros URL, dentro dos adereços no “Match” E, em seguida, para baixo para “Params” Nós, portanto, temos esta variável ID de usuário com o valor de 4-5-6, que é capturado a partir desta seção aqui. Posteriormente, usaremos esse ID de usuário para buscar as pastas para o usuário conectado no momento. Mas, por enquanto, podemos simplesmente enviar o usuário no arquivo “Home.js”. Vamos para o “Lar”. e logo acima do nosso “Criar Formulário de Placa”, vou emitir um “Span”. E para exibir o ID do usuário, faremos isso da mesma forma que faria com qualquer outro adereço. Podemos acessar este “topprops.match” que são esses adereços, que você tem aqui. Precisamos de “match.paramas” e, em seguida, o ID do usuário. Vamos salvar isso e depois passar para o navegador. Agora temos a variável 4-5-6. Vamos tentar um valor diferente aqui dentro, então usuário um. Agora, esses parâmetros são exibidos dentro do navegador. Também podemos fazer isso para nossas pranchas. Se voltarmos para o nosso “App.js” e, em seguida, rolar
para baixo até nossos “Componentes da placa” Agora podemos adicionar no ID da placa. Barra para frente, esta é uma seções dinâmicas então precisamos z dois-pontos, o ID da placa. Isso agora nos permitirá entrar no URL. Em seguida, no “Board”, e depois “/Boardid” apenas como um. Onde quer que os dados dinâmicos passemos para o ID da placa ainda esgotarão os componentes da placa. Em seguida, o ID da placa será armazenado dentro desta variável. Como também precisamos passar os adereços do roteador em sua ferramenta componente, podemos substituir o componente com a função de renderização. Vamos adicionar estes na linha. Podemos remover os “componentes” e, em seguida, substituí-lo com o “renderizar”. Isso leva em uma função que vamos passar nos adereços do roteador. Dentro daqui, nós então rasgamos nossos “Componentes da placa” em uma linha separada, mas também podemos espalhar nos “adereços”, que são os fornecidos pelo roteador, e depois fechar nossos componentes da placa. Vamos testar isso está funcionando no navegador. Para ter uma barra de frente. Vamos tentar 5.000. Para cada número que você passar, ainda
vemos o “Componente Board” renderizado na tela. Vamos procurar dentro das “ferramentas de desenvolvimento” para o quadro. Nós ainda temos os adereços de “história, localização” e “marcha” nós pegamos os “paramas” dentro daqui. Com este trabalho agora, demos mais um passo em direção à estrutura que precisamos para o projeto final. Não podíamos, mas estamos apenas a escrever estes URLs. Mas no próximo vídeo, veremos como podemos navegar para essas rotas. Quando um usuário clica em uma pré-visualização de “quadro”. E também como podemos acessar os
recursos do roteador React quando não é possível passar adereços.
19. Usando o de roteador e empurra: Em vez de digitar nossos URLs dinâmicos, que fizemos no último vídeo, precisamos de uma maneira de enviá-los através do nosso aplicativo. Se formos ao nosso projeto no host local e procurarmos por 1, 2, 3, ambos os títulos flash. Temos os nossos títulos livres aqui a partir dos dados da amostra. Seria bom poder clicar em qualquer um deles e depois ser levado para os componentes da placa com o ID da placa como parte da URL. Para fazer isso, podemos usar o roteador de reação, para navegar para um URL específico e podemos fazer isso usando o método push. Enquanto estamos nesta página, podemos ir para as ferramentas reativas e abrir o objeto histórico dentro dos componentes home. Vamos para a história dentro dos adereços. Se abrirmos isto. Aqui dentro é onde este método push está localizado. Este método push irá adicionar uma nova entrada no estoque histórico
do navegador, o que significa que você pode usar o navegador para trás e para frente, Watson, e então sua página será armazenada no histórico. Estes títulos gratuitos, é claro, idéias de
casa e jardim estão localizados dentro dos componentes de visualização da placa. Isto deixar-nos-á com uma pequena questão. Se formos ao DevTools e procurarmos a visualização do quadro. Se selecionarmos qualquer uma dessas pré-visualizações, o único adereços que você tem é o quadro real. Não temos acesso ao objeto histórico onde o push está localizado. Você pode pensar que aqui podemos apenas passar os adereços como fizemos com os outros componentes, e a resposta é não ou não diretamente. Esta pré-visualização do quadro é um filho dos componentes da casa. Portanto, ele não é renderizado diretamente pelo roteador. Dentro do app.js, os únicos componentes que são componentes filho de um roteador são esses componentes domésticos e também a placa. A maneira de contornar isso é usar um pacote chamado roteador. O roteador é um componente de ordem superior que envolverá a visualização da nossa placa. Portanto, passando o mesmo local e histórico adereços, e o roteador também está disponível neste mesmo pacote de roteador
reagir que você já instalou. Vamos para a pré-visualização do quadro e podemos importar isso no topo do arquivo. Este é um nome Export. Sony, para usar as chaves. Temos roteador. Isto é do mesmo pacote, que é react-router dom. Então podemos substituir o conteúdo dentro do esforço aleatório. Em vez de apenas saídas neste. props.board.title. Mas eu vou exibir uma lista não ordenada, e então cada item dentro daqui vai ser um item de lista. Cada item é a placa,
portanto, podemos então emitir this.prompts.board.title. Vamos salvar isso e dar uma olhada nos componentes domésticos. Ainda temos nossas bolas grátis aqui. Vamos adicionar um pouco de estilo dentro de nossa lista não ordenada. Primeiro de tudo, podemos adicionar um nome de classe para acionar o CSS. Este é o item de pré-visualização da placa. Na próxima linha, vamos adicionar um manipulador de eventos onclick, que vai acionar um método chamado GoToBoard. Em seguida, vamos adicionar um estilo embutido, que vai definir a cor de fundo de cada um é pré-visualizações do tabuleiro. Isso refletirá a cor de fundo, que definimos quando criamos uma nova placa. Podemos fazer isso com uma propriedade CSS embutida chamada background-color. Como este é JavaScript, precisamos usar a cor de fundo maiúsculas e minúsculas em vez de usar os valores de traço e minúsculas como faríamos com um CSS regular. Vamos definir sua cor de fundo igual a isso.props.board.background. Agora, acima disso, podemos criar nosso método GoToBoard fora do método aleatório. Vamos logo após a aula de pré-visualização do tabuleiro, podemos criar GoToBoard, configurar nossa função. Primeiro de tudo, vamos pegar a identificação do quadro, que atualmente temos adereços internos. Se formos para a pré-visualização da bola. Dentro do DevTools, dentro dos adereços, você tem todas as informações do tabuleiro que precisamos. scrab do primeiro Iet provavelmente comprou o ID instalado na constante lateral. O ID da placa será igual a isso.props.board.id. A segunda passagem de hoje é então usar o método de push do roteador reagir para centralizar em uma URL diferente. O que quer fazer é clicar em qualquer um desses links. Em seguida, queremos ser levados para uma nova URL. Então bordo e, em seguida, para a frente /theboard,
que temos armazenado dentro desta variável. Vamos fazer isso agora. Isto. Props. História. Acesse o método push. Isso vai levar em um objeto onde podemos especificar o nome do caminho. Uma vez que este caminho vamos usar esta variável ID placa. Precisamos usar os carrapatos traseiros para construir isso. Primeiro de tudo, podemos navegar para a frente barra e, em seguida, barra para a frente. Podemos usar a sintaxe do modelo das chaves símbolo Italo
e, em seguida, passar no ID placa. Se dissermos agora este ficheiro e depois passarmos para os nossos componentes domésticos. Agora temos os itens da lista livre para nossas pastas, que também está recebendo a cor de fundo a partir this.props.board.background. Agora vamos clicar em um desses e ver se o método push funcionará. Agora vemos que sua mensagem desligada não pode ler propriedade push de indefinido. Isso não está funcionando porque, como mencionamos anteriormente, o pacote que somos importantes na parte superior do arquivo, que é chamado roteador, agora
precisará ser um rapper para esses componentes. Podemos fazer isso muito facilmente se formos até nossa exportação, e então podemos embrulhar nossos componentes de visualização da placa com roteador, e então dentro daqui podemos passar em nossa visualização da placa, salvar este arquivo, e então vamos conferir isso no navegador. Podemos clicar em qualquer uma dessas placas e, em seguida, levá-lo para os componentes da placa. Esta é a placa número 2.000. Vamos voltar e tentar causar ideias. Esta é agora a placa número 1.000. Também o mesmo para as idéias do jardim. Mais tarde no curso, quando começarmos a usar no Firebase, usaremos este ID de tabuleiro para obter os dados únicos da bola, em vez de nesta distração de carga, que você vê aqui. Mas por enquanto este é um passo na direção certa, e em seguida vamos dar uma olhada em como podemos passar estado usando roteador reagir.
20. Como passar o estado via o router: Nós já sabemos como passar downstate ao renderizar componentes usando o roteador, assim como fizemos com esses componentes domésticos. Passaremos os quadros e também criaremos nova função de tabuleiro. Também na visualização do quadro, navegamos para uma rota diferente usando o método push. Usando este método push, nós também às vezes tem a necessidade de passar para baixo estado para o nosso novo URL ou para o componente que está renderizando. Quando vamos para o navegador e, em seguida, voltar para a nossa seção Home, se clicarmos em qualquer placa que você deseja ver, seria uma boa idéia para também passar os dados para os componentes da bola, como o título da bola e também o background- cor. Na visualização do quadro, podemos adicionar estado ou adicionar dados logo após o nome do caminho. Também podemos configurar um objeto de estado e aqui dentro podemos passar as informações da nossa placa. Primeiro de tudo, vou passar o título. Esta pré-visualização da bola tem acesso a todas as informações do tabuleiro que são transmitidas pelos componentes da Página Inicial. Vamos dar uma olhada. Esta pré-visualização da placa está recebendo a placa como um adereço. Portanto, podemos acessar isso com este top adereços, o tabuleiro. Podemos acessar o título. Nós também podemos passar para baixo o fundo também exatamente da mesma maneira. Este vai ser este top adereços, o Conselho, o fundo. Podemos experimentar isso no navegador, salvar este arquivo
e, em seguida, voltar para as pré-visualizações da nossa placa, clicar em qualquer um deles, então podemos usar um React ferramentas de desenvolvedor. Podemos procurar a placa, que são os componentes atuais. Selecione isso e agora dentro dos adereços, também
podemos fazer uso deste prop local, que está sendo passado através do roteador. Se abrirmos isto, agora temos um objecto de estado a viver aqui dentro. Vamos soltar isso e agora ter o plano de fundo e também o título disponível para este quadro. O título é Conselho foi Idéias curso. Então vamos voltar e também verificar as ideias da Câmara. Verifique o quadro, localização, estados, e agora tem as idéias da casa são título e também a cor de fundo. Agora sabemos onde nossos dados residem nesses componentes. Agora podemos usá-lo no Conselho. Vamos passar para os componentes board.js. Primeiro, podemos definir a cor de fundo do Board. Podemos adicionar isso ao div de abertura dentro do nosso esforço aleatório. Então vamos adicionar isso a uma nova linha. Podemos primeiro adicionar um nome de classe e vincular isso ao CSS, ele vai ser Board wrapper. Então, exatamente como fizemos com a visualização da placa, nós também podemos configurar nossos estilos, que vai definir a cor de fundo usando camel-case, que podemos pegar a partir deste top adereços, o local, o estado, o plano de fundo. Certifique-se de que está escrito corretamente. Antes de ir mais longe e adicionar o título, agora
podemos ver o azul apareceu dentro do navegador. Podemos voltar, ver as ideias amarelas do curso. Faremos o mesmo também para as ideias do jardim. Passando a cor de fundo para a nossa placa. Logo abaixo disso, também podemos adicionar um título de álbum e também um botão de exclusão de álbum, que você pode usar mais tarde. Abaixo da nossa div para o wrapper de placa, temos a div com o nome da classe de wrapper listas. Vamos acima disso. Podemos configurar uma nova div, que vai ser para o cabeçalho da placa. Então adicione nosso nome de classe ou cabeçalho hífen. Aqui dentro, vamos adicionar um título de nível três, que vai ser para o título. Podemos pegar o título da placa usando a lista de adereços. localização, .states e, em seguida, o título. Logo depois disso, também adicionaremos um botão, que será usado mais tarde no curso para excluir o álbum. Não adicionaremos nenhum manipulador de cliques aqui ainda. Em vez disso, vamos apenas começar com o texto do quadro de exclusão. Agora podemos salvar isso e ir para o navegador. Nós temos nosso botão excluir placa no canto e também o título do nosso álbum. A [inaudível] temos ideias de curso e também as ideias da Câmara também. Agora, nossa cor de fundo e também o título de nossa placa foram passados para esses componentes de placa usando o objeto de estado através do roteador React. Este é o nosso trabalho em, então eu vou vê-lo agora na próxima seção onde vamos começar a trabalhar usando o Firebase.
21. Como configurar o Firebase: Para este projeto, vamos usar o Firebase como back-end. Isso nos permitirá adicionar um banco de dados para armazenar todos os nossos álbuns, listas e cartões. Também nos permitirá recuperar apenas os cartões, a lista e os cartões que precisamos para o usuário de login no momento. Podemos classificá-los pela data de criação. Ele nos dará atualizações em tempo real à medida que os dados mudam, e muito mais. Além disso, podemos usar o Firebase para autenticação de usuário, cadastrar-se e fazer login. Outra grande característica do Firebase é que ele pode ser usado não apenas para projetos web, mas também para iOS e Android também, que
possamos compartilhar os mesmos dados em vários aplicativos. Podemos começar de novo em firebase.google.com. Você precisa se inscrever com uma conta do Google se você não usou isso antes. Se você precisa ir em frente e se inscrever agora. Estou conectado no momento, então vou apenas clicar em “Ir para o console”. Antes de irmos mais longe, porém, Firebase parece mudar seu layout e design do site com bastante regularidade, mas os passos são geralmente semelhantes. Se parecer um pouco diferente quando você visita, você ainda deve ser capaz de resolver as coisas, uma
vez que há apenas alguns passos a tomar. A primeira coisa que precisamos fazer é criar um projeto, clicando em “Adicionar projeto”. Eu já tenho um projeto chamado React Trello, então em vez disso eu vou chamar isso de React Trello 2. Também precisamos aceitar os termos e condições antes de criarmos nosso projeto. Então nos dê alguns momentos para criar. Vamos usar o banco de dados mais recente do Firebase, que é chamado de Cloud Firestore, que nos dará nossa funcionalidade em tempo real. tempo real, o que significa que nosso aplicativo pode ser atualizado com mudanças à medida que elas acontecem, e nossos dados podem ser mantidos em sincronia entre diferentes dispositivos, vez de termos que fazer uma nova solicitação após cada alteração. Uma vez feito isso, podemos clicar em “Continuar”, e então nós somos levados para a página inicial do nosso projeto. Agora precisamos clicar no Cloud Firestore, que podemos obter clicando nesta seção Cloud Firestore apenas aqui. Ou podemos clicar no “Banco de dados” no menu. Enviar coisas é muito simples, basta clicar em “Criar um banco de dados”. Vamos começar no modo de teste, apenas por agora, ou
seja, e isso é tudo o que os usuários podem ler e escrever em nosso banco de dados. Mas adicionaremos regras de segurança mais tarde. Clique em “Avançar”. Podemos então selecionar nossa região que está mais próxima de nós. Escolha qualquer um destes e, em seguida, clique em “Concluído”. Este é o nosso banco de dados Homepage, e é aqui que nossos dados serão exibidos quando enviá-los para o Firebase. Também podemos adicionar coleções manualmente para usar este link aqui. Uma coleção é um grupo de dados que serão nossos quadros, nossas listas e nossos cartões. Em seguida, adicione este banco de dados ao nosso projeto. Precisamos primeiro obter nossas configurações do Firebase. Podemos fazer isso na barra lateral e, em seguida, clicar em “Visão geral do projeto”. Nós vamos usar a versão web, então clique sobre isso. Precisaremos dar um apelido ao nosso pedido. Eu também quero chamar isso de, React Trello 2. Em seguida, registre nosso aplicativo. Isso nos dará acesso às nossas configurações de configuração, que precisamos adicioná-lo ao nosso projeto. Precisamos copiar todas as configurações de dentro do objeto config. Basicamente, tudo dentro destas chaves. Copie todas estas linhas de código. Em seguida, podemos levar estes para o código do Visual Studio. Vamos criar um novo arquivo. Abra a barra lateral dentro do código-fonte, novo arquivo. Isso vai ser chamado Firebase.js. O próximo passo é instalar o Firebase a partir do NPM. Vá até o terminal, pressione Command ou Control C se você precisar fechar o servidor, então você pode executar um comando chamado NPM, I para instalar e, em seguida, o pacote é simplesmente chamado Firebase. Agora, se voltarmos ao nosso arquivo Firebase.js, podemos agora fazer uma importação, puxar nosso pacote Firebase e armazená-lo dentro de uma variável. Importe isso dos módulos do nó. Este pacote será chamado Firebase. Então nós vamos fazer a frente slash up. barra para cima é o cliente principal do Firebase, que é necessário ao usar o Firebase. O próximo passo é também importar o pacote firestore. Nós não precisamos armazenar isso dentro de uma variável, então podemos apenas fazer uma importação sem instalar isso pelo nome, que
possamos importar o pacote Firebase e,
em seguida, uma barra direta Firestore. Isso tornará a funcionalidade firestore disponível em nossos projetos. Nós vamos criar uma constante chamada config. Config vai conter todas as opções que acabamos de copiar do Firebase. Podemos colar isto aqui dentro. Vamos fechar a barra lateral para termos um pouco mais de espaço. Parece que perdi o fim do Trello, mas não importa. Vamos descer e agora inicializar nosso aplicativo. Podemos fazer isso selecionando nossa variável Firebase, que importamos na parte superior. Em seguida, podemos fazer um método chamado initialize App, em
seguida, vamos passar em nosso objeto de configuração sem configurações do Firebase. Com esta configuração agora cuidada, eu vou agora configurar três constantes, estas vão apontar para nossas coleções de banco que vai ser Boards, listas e cartões. Este é apenas basicamente um atalho que vamos usar em todo o nosso projeto, invés de ter um monte de código
repetitivo que irá apontar para a localização em nosso banco de dados. Primeiro de tudo, vamos criar uma constante chamada db. Vai ser igual a firebase.Firestore. Novamente, isso também é um atalho. Este é um ponteiro para o nosso banco de dados Firebase, e agora podemos apenas digitar db em vez de firebase.fiRestore. Abaixo disso vamos agora criar uma referência para cada coleção que precisamos, isso nos permitirá acessar esses novos projetos para salvar e recuperar dados apenas usando o nome da variável. Primeiro de tudo, vamos criar um BoardsRef, e isso vai ser igual ao nosso banco de dados, que é DB, e eu vou acessar uma coleção que ainda não temos, mas isso terá o nome de placas. Vou copiar e colar isso em mais vezes. O segundo será uma referência às nossas listas. O nome da coleção será listas. Então o terceiro vai ser um ponteiro para as nossas cartas. Tudo isso significa que agora está em nosso projeto quando queremos empurrar uma placa para Firebase ou recuperar uma placa do Firebase, nós só precisamos digitar a palavra boardsRef, em vez de ter que digitar firebase.firestore.collection.boards. Agora podemos exportar essas referências, para que possamos acessá-las nos arquivos. Você pode fazer isso, com um nome Exportar dentro das chaves. Podemos exportar nossos BoardsRef, nosso rascunho de lista, e também os cartões ref também. Agora podemos salvar esse arquivo e testá-lo está funcionando no app.js. Podemos começar com nossos BoardsRef importando isso na parte superior do arquivo. Logo abaixo da classe podemos criar uma importação, vamos primeiro importar nossos BoardsRef. Isto é do nosso arquivo Firebase, que é um stringoff./ e depois Firebase. Esta foi uma exportação nomeada, para que possamos importar cada um dentro dessas chaves. Podemos então adicionar um teste rápido no ComponentDidMount para verificar se isso está funcionando. Apenas sob nossos estados definidos, agora
podemos acessar esta variável BoardsRef. Podemos então chamar um método chamado dot add, que é um método Firebase para adicionar novos dados a esta coleção. Vamos simplesmente criar um objeto com um nome e um valor de Olá. Vamos salvar isso. Agora, se formos para o nosso projeto e, em seguida, recarregar, temos um erro de BoardsRef. Vamos verificar isso. Temos a importação, que parece correto, vá para Firebase, e isso precisa de um S. de volta ao projeto. Recarregar, e isso fará com que o componente na montanha seja executado. Se formos para o Firebase, e pudermos fechar isso, vá para o console e para o nosso banco de dados. Agora vemos que temos uma coleção de placa com um único documento. Esta é a identificação do documento, então temos o nome de olá. Um dos benefícios do uso do Firebase é que não precisamos definir nossas coleções de antemão. Podemos simplesmente empurrar um novo objeto ou novo item para o Firebase, e ele também irá criar a coleção e documentos necessários. Isto é só um teste, por isso vou apagar isto agora. Vamos entrar em nossas pranchas, apagar a coleção. Também precisamos digitar o nome do conselho. Podemos remover isso e, em seguida, remover o código de ComponentDidMount dentro do app.js. Remova esta linha de código, salve este arquivo. Agora isso nos deixa com o Firebase em nossa configuração. Estamos prontos para passar para o próximo vídeo.
22. Como usar dados: Agora temos cinco compartimentos configurados e sabemos que nossa conexão está funcionando agora. Podemos passar para a criação de nossos métodos em reagir para, em seguida, enviar dados para o Firebase, começando neste app.js. Aqui já temos um método configurado para criar um novo quadro. Então, agora podemos usar o método add do Firebase para enviar nossos novos dados do quadro para o nosso banco de dados. Vamos começar dentro deste método antes de definir o estado. Criamos uma nova constante que será chamada de novo quadro. Queremos definir isso igual ao nosso gráfico de tabuleiro que importamos na parte superior do arquivo no último vídeo, que apontará para a nossa coleção de placas. Em seguida, vamos usar o método add para, em seguida, empurrar um objeto, que vai ser a nossa placa, que é passado para este método como um parâmetro. registro do Firebase receberá automaticamente um ID gerado. Antes de salvar nossos novos estados de placa, podemos construir novos objetos onde crescemos essa ID e adicioná-la ao resto da placa. Vamos fazer isso, logo acima da nossa chamada de estado. Podemos criar uma constante que vai ser chamado de objeto de placa. Aqui tudo o que eu quero fazer é pegar os dados do quadro existente e também mesclar um ID. Então, primeiro de tudo, vamos dizer uma propriedade ID, que vai ser igual a nossas novas constantes de placa, depois ID. Lembre-se, o novo quadro se referirá aos dados que retornarão do Firebase quando adicionarmos este novo quadro. Portanto, ele também terá a propriedade Firebase ID. Também podemos adicionar uma vírgula e, em seguida, usar este operador de propagação para adicionar no resto da placa. Agora, quando nos definimos nos estados, em vez disso
queremos adicionar esses novos objetos de tabuleiro. Em seguida, podemos adicionar algum tratamento de erro a este método usando async aguarde. Async wait nos permitirá esperar que o quadro seja salvo
primeiro no Firebase antes de passar para a próxima linha de código. Queremos ter certeza de que a placa é salva pela primeira vez porque precisamos acessar esse ID gerado antes que possamos salvá-lo para o estado. Primeiro de tudo, podemos definir essa função para ser assíncrona adicionando a palavra-chave assíncrona. Isso nos permitirá, então, adicionar aguarde em nosso método. Os dados que queremos acordar e voltar são este novo quadro da Firebase. Podemos então adicionar algum tratamento de erro usando try and catch. Primeiro de tudo, vamos executar este código dentro de um bloco try. Abra as chaves. Quando eu vou fechar isso logo depois de definir o estado. Adicione uma chave extra encaracolada à direita no final. Se você não está acostumado a tentar pegar antes a seção try é o código que primeiro precisamos tentar executar. Se o código que é executado for bem-sucedido, tudo é bom. Se houver um erro ao executar este código no bloco try, podemos pegar esse erro usando um bloco catch. Logo após esta chave, também
podemos adicionar um bloco catch, que vai tomar o erro como uma variável. Abra e feche as chaves. Podemos então fazer um erro de console, que você está indo para produzir uma cadeia de erro criando nova placa e dois pontos. Então, depois disso, também podemos adicionar uma vírgula. Em seguida, também podemos exibir este erro que é passado para pegar, este para salvar. Depois podemos ir para as nossas tábuas e podemos experimentar isto. Para o navegador em nossos projetos. Ainda temos um gráfico de barras aqui. Vamos subir para as tábuas. Agora é sobre uma casa componentes. Bem, precisamos adicionar em um usuário, vamos para 1,
2, 3 e, em seguida, para frente barra placa. Vamos tentar isso empurrando um novo item para o Firebase. Vamos para uma placa de teste uma cor verde, em seguida, criar uma nova placa. Esta placa é então imediatamente adicionada uma vez que empurrou para o estado. Como já sabemos, estado irá acionar uma atualização em todos os componentes que usa dados. Se atualizarmos isso agora, os dados serão perdidos desde que obtemos esses quadros de estados e não do Firebase. Bem, podemos ir até o console Firebase e verificar se isso foi salvo. Recarregue o console. Nossa placa de teste agora está salva aqui dentro. Como mencionamos antes, o Firebase adiciona um ID exclusivo. Vamos para as Ferramentas do Desenvolvedor. Também podemos verificar se isso está sendo adicionado ao nosso estado. Esse é o nosso teste dois. Crie uma nova pasta. Agora você pode ver como os estados foram atualizados para incluir quatro itens na matriz. Clique sobre isso, se clicarmos no último, agora
vemos este ID exclusivo foi adicionado ao nosso objeto. Este deve ser o mesmo ID que está sendo fornecido dentro do Firebase se recarregar. Em seguida, clique sobre isso. Este é o nosso teste dois com a mesma identificação, que agora temos no estado. Vamos agora fazer o mesmo no board.js. Podemos enviar nossas novas listas para Firebase 2. Dirija-se aos nossos componentes de bola. Então precisamos procurar um método chamado criar nova lista. Isto é o que precisamos aqui. A primeira coisa que vou fazer é marcar esta função como uma pia, que
possamos usar uma espera. Em seguida, podemos adicionar algum tratamento de erro adicionando um bloco try. Abra e feche as chaves. Podemos, em seguida, remover esta chave encaracolada e, em seguida, adicioná-lo para baixo no final. Logo depois de definir nosso Ref de volta para uma string vazia, você pode adicionar isso em. Adicione um bloco catch que passa em um erro. Abra e feche as chaves. Em seguida, podemos passar um erro de console com a string, que vai ser erro criando uma nova lista. Passando o erro. Com essa manipulação de erros agora cuidada, agora
precisamos fazer algumas alterações em nosso objetivo de lista. Vamos rolar para cima. Aqui temos um objeto lista que criamos anteriormente. O primeiro passo é remover este ID agora. Já que vamos adicionar isso via Firebase. Também podemos remover esses cartões matriz desde que você não precisa mais desses dados. Vamos remover isto. Seremos cartões de identidade como uma coleção separada dentro de um Firebase, e depois ligá-los através das identificações. Agora devemos ficar com o título,
o quadro, e também a arte criada. Esta lista também precisa ser vinculada à placa de cores, que
possamos alterar a propriedade board para fazer isso, em vez de ter um valor codificado. Agora podemos definir isso para ser este ponto adereços ponto correspondência ponto params ponto BoardId. Se formos para o nosso conselho, lembre-se, estes são os dados que são passados do roteador de reação. Podemos ver isso nas ferramentas do desenvolvedor. Se clicarmos em qualquer um destes, escolha a placa, então temos os adereços passados através do roteador, dentro de um ponto de partida params. Temos este Board. Portanto, isso você vai vincular o cartão que foi criado com o quadro atual. Isso nos permitirá mais tarde no curso, para então puxar todas as listas do Firebase para o quadro atual que estamos visualizando. Abaixo disso, temos uma declaração. Também podemos ter certeza de que o BoardId também está presente antes de salvarmos isso no Firebase. Você também pode adicionar uma lista, uma parte porque não queremos salvar uma lista que não tem relação com um álbum. Agora, em vez de salvar esta lista para estados, vamos agora enviar isso para o Firebase. Uma vez que agora lidamos com as listas, em vez de placas, precisamos importar a referência da lista de arquivo baseado em o5. Podemos fazer isso importando as listas ref, do nosso arquivo Firebase, que está localizado na barra ponto-ponto, em seguida, o nome do arquivo do Firebase. Em seguida, podemos adicionar nossa nova lista ao Firebase em vez de usar os estados de conjunto, que você mover esta linha. Em vez disso, podemos adicionar um peso na disfunção marca como assíncrona. Podemos acessar nosso rascunho de listas. Podemos então usar o método add para adicionar um novo objeto. Este novo objeto é a lista com recuado acima. Agora vamos salvar isso e podemos testar isso no navegador, ter
certeza que você está dentro de uma das placas. Então podemos agora ir e criar uma nova lista. Clique nisso, então lista de cursos 1 e também adicione a lista de cursos 2 ao Firebase console. Depois de recarregar, agora veja nossas listas de objetos ou nossa coleção de listas foi criada. Temos as nossas duas listas. O primeiro está ligado à placa 1.000 como é o segundo. Podemos ver dentro de nossos projetos na URL que este é o BoardId. Vamos apenas para casa idéias e outros uma nova lista 2. Lista 1, vamos verificar isso dentro do console. Certifique-se de que este tem o ID de 2.000. Lá vai você. A última coisa que precisamos fazer neste vídeo, é criar um novo cartão. Novos cartões são criados nos componentes da lista pai. Isso seguirá um padrão semelhante ao que acabamos de fazer. Não deveria haver surpresas. Para as camadas de ponto da lista. Podemos primeiro definir o método de criação de novo cartão para ser assíncrono. Você pode então embrulhar nosso código no bloco try. Tire a cinta de fechamento, e então podemos adicionar isso na parte inferior. Suas coisas sobre o log do console, também adicionar na seção catch, que você vai tomar em quaisquer erros que são criados. Ele gera um erro de ponto de console com a cadeia de erro criando novo cartão, nos dois pontos e,
em seguida, passar em nosso erro. A única mudança no nosso cartão é o conjunto de ID da lista. Podemos pegar isso a partir dos prompts lista, que são passados para baixo, em vez de é o valor codificado de abc 1,2,3 nós pegamos estes de nossos adereços, que você define através do ID ponto lista. Aqui estamos criando um novo cartão. Também criaremos uma referência à lista, à qual ela pertence. Se formos até os componentes da lista em nossos projetos e as ferramentas reativas, procure por qualquer lista. Podemos então ver esta lista que é passada como adereços. Aqui estamos pegando o ID da lista, que é 100 neste caso, o segundo tem uma ID de lista de 300 e assim por diante. O próximo passo é importar nossos cartões ref, do nosso arquivo Firebase. Dentro das chaves encaracoladas. Pegue o gráfico do cartão. O caminho do arquivo também é ponto-ponto barra Firebase. Assim como fizemos com a lista antes, também
podemos ir para baixo para as declarações if antes de empurrar isso para o estado. Em seguida, também podemos adicionar no final uma segunda faixa, que também vai verificar se o ID da lista de pontos do cartão também está presente. Uma vez que isso é necessário antes de salvar em estados ou no Firebase. O próximo passo é também remover este método de estado definido. Em vez disso, vamos esperar cartões ref ponto adicionar. Adicionamos isso ao Firebase, o objeto que queremos adicionar é este cartão que acabamos de construir acima. Análise de um cartão, salvar este arquivo e, em seguida, podemos testar isso no navegador. Podemos testar isso adicionando um novo cartão em várias listas. Digamos que o cartão da casa um, o cartão da casa dois. Isto é para as ideias de viagem. Cartão de viagem um. Esta é a carta 1, encaminhe para o Firebase e atualize o console. Essas são as cartas. Este primeiro está associado à lista 200. O segundo é 100s, e também 300s. Tudo está funcionando bem. Também temos o texto correto para cada um deles. Temos uma atualização criada, que é gerada usando JavaScript. Ainda não temos rótulos, mas voltaremos a isso mais tarde no curso. Agora, tenha os dados do Firebase para trabalhar. No próximo vídeo, removeremos os dados de amostra de nossos projetos e, em vez disso, leremos os dados do Firebase.
23. Leitura dados do Firebase: Os dados de amostra que importamos anteriormente não são mais necessários em nosso projeto. Então, agora podemos começar a removê-lo e trabalhar do nosso banco de dados. Podemos fazer isso mais no app.js. Primeiro de tudo, podemos remover a importação, então importar dados, vamos remover esta linha e, em seguida, abaixo, temos um componente fez montar, que define o estado usando esses dados de exemplo. Vamos remover esta linha também. No lugar disso, eu vou criar um método que vai tirar nossas placas da base de fogo, mas apenas quando realmente precisamos deles. Logo abaixo deste componente fez montar, queremos criar um novo método chamado get boards. Isso vai ser uma função assíncrona, que vai levar no ID do usuário, que vai passar para ele. Em vez de nossa função de seta, crie uma seção de tentativa e também uma captura, que leva no erro, que você ainda é um log de console com a mensagem de erro de área recebendo placas e também passando a mensagem de erro apenas Depois disto. A primeira coisa que queremos fazer ao chegar às novas placas da base de fogo, é definir o estado para estar vazio. Então, dentro do bloco try, podemos fazer com este.set estado e, em seguida, dentro aqui podemos adicionar nossos objetos de estado, que vai definir as placas para ser uma matriz vazia. Isso apenas garantirá que quaisquer quadros e
estados anteriores serão removidos antes de fazer uma nova chamada para o firebase. Lá em cima, já temos a referência da nossa placa importada da base de fogo. Então, agora podemos usar isso para obter o conteúdo
da coleção de placas e podemos fazer isso chamando o método get. Então, logo abaixo do estado definido, podemos começar a obedecer constantes com o nome das placas e, em seguida, podemos esperar nossos dados de
volta, pegando nossa referência de placas e, em seguida, chamando o método do.get. Isto irá obter o conteúdo da nossa colecção de placas apenas uma vez. Ele não vai ouvir nenhuma mudança, mas vamos ver como fazer isso mais tarde no curso. As constantes do tabuleiro, que temos aqui, mantêm todas as nossas tábuas, que
significa que você pode passá-las, obter cada uma e depois guardá-las no nosso estado. Firebase nos permitirá fazer isso usando um para cada método e podemos fazer isso logo abaixo desta linha. Podemos selecionar nossas constantes de bordo, podemos percorrer com para cada um. Aqui dentro nós vamos armazenar cada item dentro de nossas placas em uma variável chamada placa. Dentro deste corpo de função, podemos começar fazendo um log de console e, em seguida, carregar o valor de nossa placa. Antes de
salvarmos este estado, vamos fazer um registro de console, já que pode ser um pouco confuso sem ver o que volta da base de fogo. Para executar isso, podemos adicionar temporariamente este método acima quando o componente é montado. Então aqui dentro podemos chamá-lo com isso. Obter placas. Está bem. Uma vez feito isso, podemos abrir o terminal, certifique-se de que o servidor começou com um início NPM. Vamos começar isso. então ir para o projeto e, em seguida, se clicar com o botão direito do mouse e, em seguida, inspecionar, abrir isso no console e vamos fazer uma atualização. Dentro do console, vemos o que é chamado de instantâneo de documento de consulta, que é um instantâneo do documento que estamos lendo do firebase naquele momento específico. Se abrirmos isso, ele contém a identificação do quadro, que você pode ver aqui. Precisamos pegar isso, mas se queremos apenas os dados reais do documento, em vez de todos esses metadados, que vemos aqui junto com as referências do firebase, podemos alterar nosso log do console para chamar o método de dados, que irá extrair todos os campos como um objeto. Então, para baixo em nosso log de console, também
podemos adicionar o método.data nas extremidades. Adicione também os colchetes para chamar isso como um método. Agora vemos nossos quatro objetos de tabuleiro. Podemos abrir isto. Podemos abrir o quadro e agora vemos as propriedades de fundo criado no título e também o usuário. Isso é armazenado em um objeto de placa, que você pode ver apenas aqui com os calibraces. Assim, podemos aprofundar ainda mais adicionando.board no final do nosso registro de console. Vamos passar por cima de agora e depois no final dos dados, podemos adicionar.board para acessar os objetos individuais,
recarregar e, em seguida, levá-los diretamente para o nosso objeto. Estes são os dados exactos de que precisamos. O único campo faltando é o ID, que mencionamos antes, mas podemos pegar isso diretamente do tabuleiro. Agora podemos armazenar esses dados dentro de uma constante de no app.js. Então, em vez deste log do console, agora
podemos remover isso, podemos definir obey constante chamada dados, que vai ser igual a board.data.board, que vimos no log do console e, em seguida, podemos criar uma nova placa objeto. Vamos pegar esses dados do quadro e depois misturá-los com o ID ausente. Na próxima linha, criamos uma segunda constante, que é para os objetos do tabuleiro. Configure nossos objetos. Primeiro de tudo, podemos misturar a identificação. Podemos pegar isso diretamente do Board.ID, então podemos nos espalhar com os três pontos. Os dados, que é essa constante de um pouco acima. Logo após este objeto, agora
podemos definir o estado com este.set estado. Aqui dentro vamos atacar o objeto tábuas. Nós vamos definir isso para uma matriz, então nós vamos tomar uma cópia do estado existente,
com this.state, .boards, separados por uma vírgula, nós podemos então adicionar em nosso novo objeto board, salvar este arquivo e então nós podemos testar isso no navegador. Este é um bom começo. Vemos que a placa está a ser puxada da base de fogo. Vamos adicionar um novo objeto ou um novo objeto de painel. Vamos para as ferramentas de desenvolvedor reagir, procurar o nosso componente de casa. Temos nossas placas como adereços, vou ver a matriz com nossas quatro novas placas. Vamos tentar adicionar mais um. Vamos avançar para fazer a cor de laranja, criar novas placas e agora eu tenho um objeto extra empurrado para nosso estado e isso é construído da mesma maneira que todo o resto. Misturamos a identificação com todos os dados do quadro. Então, atualmente nós adicionamos esta chamada para obter a nossa placa de firebase dentro do componente montou. Nós só queremos pegar essas placas quando o
componente inicial é carregado em vez do aplicativo real, já que é aqui que eles serão exibidos. Tudo o que precisamos fazer para isso é mover o componente
fez o código de montagem para os componentes home. Vamos cortar o componente fez seção de montagem. Nós não precisamos mais disso e então nós podemos ir para nossos componentes domésticos e então nós podemos colar isso bem no topo, logo acima do nosso método aleatório. Desde que agora acessamos neste método get board, que está no app.js, precisamos agora passar isso como um adereço. Vamos rolar para baixo até o nosso roteador e, em seguida, dentro do link home que é este aqui, nós também podemos adicionar um prop chamado get boards, que vai ser igual ao nosso método de this.get boards, salve este arquivo e agora sobre o nosso componente fez montar dentro do nosso home.js, agora
precisamos acessar isso via adereços. Então este é isso.props.board e, em seguida, adicione isso à nossa validação de prop na parte inferior. Obter placas vai ser nossos tipos de adereços e esta é uma função que também é necessária para vir no final. Então agora podemos salvar isso e ir para o navegador. Aqui dentro, as placas ainda estão aparecendo no navegador, mas agora só são carregadas quando estamos vendo todos esses componentes. Se formos em frente e clicarmos em qualquer um desses, ainda
vemos nossos dados de amostra aqui dentro, e vamos corrigir isso no próximo vídeo. Quando criamos o link para este quadro anteriormente, também
passamos este ID de placa através dos parâmetros de URL. Agora podemos usar esse ID de painel para buscar os detalhes atuais da barra carregada do Firebase, em vez de nossos dados de amostra. Isso será armazenado no estado local ou seja dentro desses componentes, e será usado para exibir o título da bola e também a cor de fundo em vez de usar os dados de amostra que vemos agora. Vamos fazer isso agora, este é o componente da placa vai para a placa.layers. No topo estavam importando na lista Ref. Por isso, precisamos também de fundamentar a referência ao Conselho 2. Nós vamos estar carregando a placa atual para que também possamos adicionar este estado. Então este é o quadro atual. Podemos configurar isso inicialmente como um objeto vazio. Então agora abaixo também podemos configurar um método personalizado logo abaixo componente fez montagem, que vai obter a nossa placa atual do Firebase. Vamos chamar este método. A placa GET vai ser uma sincronização, e também vai ter o ID da placa. Então só obtemos estes quadros da Firebase. Podemos configurar o nosso método em uma seção de tentativa. Também uma seção de captura abaixo que vai levar no erro. Isso vai enviar um log do console com a mensagem de erro, recebendo placas, e também passando o erro. Então a primeira coisa a fazer na seção de experimentos aqui em cima é criar uma constante que vai armazenar nossa única placa. Podemos esperar essa informação de volta do Firebase. Isto está nas placas Ref. Queremos usar a referência do documento, que vai ser o ID de placa única, que vai passar quando nós chamá-lo. Vamos passar isto. Então podemos chamar o método.get para pegar todo o conteúdo do nosso quadro. Uma vez que tenhamos o nosso conselho, podemos agora dizer que isto é estado. Com este estado de conjunto, o
estado que você deseja atualizar é este quadro atual que você tem apenas aqui. Conjunto é igual ao valor de nossas constantes, e é também precisa ser bordo Ref. Então faça essa mudança. Então não queremos definir o estado assim. Vou certificar-me de que isto é pranchas muito acima do topo. Então, atualmente nós definimos neste objeto board no estado, mas nós não queremos fazê-lo exatamente como vemos aqui. Lembre-se mais cedo quando recebemos todas as placas no app.js. Se formos até o método de placas de lacuna, quando adicionamos um log de console, vemos que temos de volta um instantâneo de consulta. Este é o mesmo aqui para que ele possa acessar os objetos de placa, exatamente da mesma maneira que este por dois pontos precisa método de dados
ponto e, em seguida, acessar no objeto placa. Então vamos fazer isso agora. Nós já temos este quadro que podemos chamar.data e, em seguida, acessar o objeto board exatamente como este. Os dados da placa precisam estar disponíveis imediatamente. Então, podemos chamá-lo de componente fez montagem passando no ID placa atual. Vamos rolar para cima dentro do componente montou. Agora podemos chamar a placa para dentro aqui usando esta. Então precisamos passar o ID que é recebido dentro deste método. Então, para pegar o ID atual, sabemos que isso é armazenado dentro dos parâmetros de URL. Que você pode ver no topo aqui, e já sabemos como acessar os parâmetros do roteador. Podemos fazer isso com isso.props, o nome prop da correspondência que é do roteador. Vamos acessar os parâmetros
e, em seguida, o nome do parâmetro, que neste caso é chamado de ID da placa. Salve este arquivo e agora para a pasta dentro do navegador. Assim que este componente da placa for carregado, vamos para as ferramentas reativas e verificar se temos os dados que precisamos. Vamos fazer uma busca pelos componentes da placa. Selecione isso dentro do estado que temos a placa atual. Vamos abrir isso e agora vemos todos os dados que precisamos, como a cor de fundo e o título. Então agora podemos usar isso em nosso método aleatório dentro da placa para definir o título e também o plano de fundo. Então vamos rolar para baixo até o método aleatório. Em seguida, a primeira coisa a fazer é definir a cor de fundo. Então, em vez de usar os adereços do roteador, vamos remover isso, e em vez disso, podemos usar os dados que são armazenados no estado. Então este.estado, .quadro atual. Podemos acessar a propriedade de fundo. Logo abaixo dentro do título de nível três, podemos acessar este.state dot.current placa e, em seguida, ele agarrar o título. Verifique se isso ainda está funcionando no navegador. Carregue nos componentes da placa, e ainda vemos o título e a cor de fundo. Quando entrarmos em cada uma dessas tábuas. Com isso agora funcionando, podemos passar para os componentes de visualização da placa, e também remover o estado que é passado para baixo pelo roteador. Portanto, isso não é mais necessário. Assim, pode remover esses objetos de estado e deixar apenas o nome do caminho para o redirecionamento. Eles ainda não devem funcionar bem dentro do navegador. Então você deve ter notado que tudo isso estava funcionando completamente bem antes de termos a cor de fundo e o título passado pelo roteador. Então você pode estar se perguntando por que muda em tudo. O motivo é para atualizar os componentes. Antes de passarmos o ID e o plano de fundo para o componente da placa. Isso significava que uma vez que a placa foi carregada, então
ficamos com ela esses dados exatos. No entanto, ao buscar os dados do quadro do Firebase e armazená-los nesse estado, isso significará que, mais tarde, quando atualizarmos o quadro, como o título, quaisquer alterações serão dinâmicas e também atualizarão o componente dois. Então, agora está no lugar, vamos agora passar para o próximo vídeo.
24. Os métodos onde e orderBy: Com o que aprendemos no último vídeo, agora
podemos aplicar isso novamente para recuperar as listas e cartões do Firebase. Também vamos dar uma olhada em dois novos métodos Firebase. Um é chamado OrderBy e ele irá classificar nossos dados, que nós vamos recuperar. Em seguida, o método Where nos permitirá obter apenas uma lista ou um cartão, se o boardId coincidir com o quadro atual que estamos visualizando. Vamos começar de novo nos componentes da placa. O Board.js, podemos iniciar na parte superior removendo o SampleData, não
precisamos mais dessa importação. Portanto, também podemos remover a chamada SetState, que aplicará isso ao estado. Agora, se formos para o navegador, na visualização do quadro, não é surpresa que não vejamos nenhuma lista ou cartão nesses componentes. Então, vamos substituir nosso sampleData por um método chamado getLists de nos componentes da placa. Isso vai obter nossas listas do Firebase, assim como o método getBoard abaixo. Este é chamado getLists, e isso vai ser igual a função
assíncrona que também vai tomar no BoardId. Configurar a função de seta,
em seguida, dentro aqui podemos criar a nossa tentativa e também o nosso bloco catch. Catch bloco leva em um erro como sempre,
e, em seguida, podemos fazer um log de console com a cadeia de erros buscar listas. Então, depois, vou adicionar uma vírgula, e então também vou colocar o erro. Então, logo acima desta seção tente, podemos primeiro criar nossa constante que vai manter nossas listas. Onde vamos esperar a nossa lista de volta que podemos pegar do ListRef. Poderíamos agora encadear no final do método get que usamos anteriormente, mas isso iria em frente e pegar todas as listas em nosso banco de dados. Em vez disso, só precisamos obter a lista para este quadro de colunas. Mais no Firebase se voltarmos para o navegador, e depois para o Console. Lembre-se de que, anteriormente, quando criamos uma nova lista e um novo cartão, também
adicionamos um ID. Esta lista, por exemplo, tem um BoarDid de 1.000 e, em seguida, este irá vincular a um quadro individual no qual foi criado. Firebase nos permite fazer isso usando o método Where. Vamos dar uma olhada em como podemos fazer isso. Logo após o nosso ListRef, podemos encadear no final o método Where. Então, aqui dentro, isso leva em três parâmetros. O primeiro parâmetro que adicionamos é o nome do campo. O nome do campo vai ser igual a lista de placa, uma vez que estamos olhando para os objetos da lista e, em seguida, queremos selecionar a propriedade do tabuleiro. Aqui dentro como uma corda, podemos passar em list.board. O segundo parâmetro é a comparação, aqui podemos usar menos que, maior que ou
igual, assim como podemos com JavaScript. Separá-lo por uma vírgula. Como uma string, podemos adicionar o duplo igual para comparar esta referência placa com o BoardId que é passado para a nossa função como um parâmetro. Agora isso só vai pegar nossas listas de nossa coleção, onde o campo de tabuleiro irá coincidir com o BoardId carregado atual. Esta lista também tem um campo CreateDat. Se dermos uma olhada no console. Este é o campo CreateDAT apenas aqui, e isso pode ser usado para ordenar nossos dados pela data de quando eles foram criados. Eu tenho um erro ortográfico aqui, mas isso não é um problema, já que podemos excluí-los e, em seguida, criar uma nova lista mais tarde. Vamos dar uma olhada em como podemos usar CreateDAT dentro daqui. Tudo o que precisamos fazer é apenas ter onde, isso também podemos encadear para o final o método OrderBy, em
seguida, dentro aqui como uma string, podemos passar em nosso objeto lista e, em seguida, o nome do campo de CreateDAT. Isso classificará nossa lista em ordem crescente usando o campo CreateDAT. Você também pode usar qualquer outro campo aqui também. Se você quiser que a ordem seja revertida, você também pode adicionar um segundo argumento de decrescente que encurtou para D-E-S-C. Mas eu quero remover isso e mantê-lo como padrão. Temos um erro no terminal, então isso precisa ser BoardId, assim como pressionamos os dados em nossa função. Então, finalmente, precisamos chamar o método.get para finalmente obter esses dados. O resto deve ser bastante direto como é semelhante ao que já usamos. Logo após o método Get, vamos chamar o nosso objeto lista, chamado.foreach método, para que possamos mover através de cada item dentro aqui. Vamos então armazenar cada item na variável lista, e então isso executa uma função para cada um. Primeiro de tudo, vamos pegar nossos dados, com dados const e eu vou definir é igual para
listar o método de dados que olhamos no último vídeo,
e, em seguida, selecione o objeto List. Logo depois daqui vamos construir nossa lista real que podemos então empurrar para o estado. Lembre-se quando fizemos isso para as placas do no App.js, armazenamos os dados em uma variável, então
criamos um objeto de placa onde tínhamos os dados. Também precisávamos mesclar o ID, que não estava disponível a partir deste método de dados. Nós apenas fazemos o mesmo sobre o quadro, nós podemos criar nossos objetos de lista. Isso será igual ao nosso ID, que você pode pegar de list.id. Em seguida, usamos o operador de propagação para mesclar no resto dos dados. Abaixo disso, podemos então definir os estados com this.setState. O estado que queremos adicionar é o CurrentLists. Nós já temos isso configurado como uma matriz vazia. Vamos colocar isso aqui dentro. Estamos procurando os CurrentLists, eles vão ser iguais a um objeto onde nos espalhamos no estado atual com this.state.currentLists separados por uma vírgula. Em seguida, mesclamos em nosso objeto lista que acabamos de criar. Agora este método está pegando nossas CurrentLists e filtrando-as para a exibição da placa de coluna. O próximo passo é realmente chamar este método quando o componente será montado. Vamos fazer isso com, This.GetLists. Lembre-se GetLists também precisará de um BoardId,
que você pode passar como um argumento usando this.props.match, para obter isso do navegador. Queremos selecionar os parâmetros e, em seguida, também o BoarDid. Salve este arquivo e vá para o navegador e, em seguida, vá para os nossos Projetos. Se abrirmos o Console, vemos um aviso estranho. Ele nos diz que a consulta requer um índice, e então podemos seguir este link para criar isso. Podemos clicar neste link que ele fornece e, em seguida, ele vai levar vai para o console Firebase onde podemos criar um novo índice. Podemos ver aqui que o Firebase vai criar um índice para aqueles nesta coleção de listas. Podemos também ver que os métodos que acabámos acrescentar também são aplicados nestes campos. Nós atacamos na lista de placas em ordem crescente e também a propriedade CreateDAT em ordem ascendente também. Podemos ir em frente e criar nosso índice clicando neste botão. Isso é necessário, uma vez que agora executamos uma consulta mais complexa. Lembre-se que estamos usando o método Where para filtrar documentos
pelo BoardId e, em seguida, buscá-los pelas datas de criação. Um índice é uma maneira de estruturar nossos dados para fazer loop do Firebase para localizar nossos dados de forma mais eficiente. Resultando em nossa consulta ser executada muito mais rapidamente, basicamente fará com que o Firebase saiba que em algum momento no futuro, estaremos formando uma consulta mais complexa para que o Firebase possa estar pronto para eles. Isso pode demorar um pouco para terminar. Pausar o vídeo e voltar quando tudo isso estiver pronto. Bem-vinda de volta. Uma vez criado este índice, agora será um bom momento para excluir todas
as listas e cartões que temos atualmente no banco de dados. Vamos para lá e começamos com as listas. Vou clicar neste ícone e excluir a coleção. Digite também o nome das listas para confirmar isso, e também os cartões que podemos fazer o mesmo. [ inaudível] remover isso. Isso ocorre porque eles estão vinculados aos BoardIDs a partir dos dados de amostra. Não estou mais usando os dados de amostra,
portanto, não precisamos disso. Agora, se voltarmos ao nosso aplicativo, vamos recarregar, e então podemos criar algumas novas listas. Vamos adicionar Lista 1, List2 e, em seguida, atualizar. Vemos um erro agora dizendo que não é possível converter objeto não identificado ou anulado. A razão pela qual estamos vendo esse erro que está relacionado a this.props.lists.title sobre os componentes da lista é porque ainda estamos tentando fazer loop através de cartões, que ainda não temos. Lembre-se, anteriormente, quando tivemos nossos dados de amostra, tínhamos alguns cartões adicionados como uma matriz dentro de cada objeto de lista. Nós não temos mais esses valores, então agora podemos remover isso do List.js. Tudo o que precisamos fazer é comentar nosso loop, que é esta seção aqui, que está renderizando um componente de cartão. Para o navegador e agora podemos ver as duas listas que acabamos de criar. Vamos também criar alguns cartões, cartão 1, cartão 2 Podemos adicionar esta lista dois também, então cartão para a lista dois. Não veremos esses cartões ainda,
porque acabamos de comentar os componentes do cartão, mas se formos para o Firebase e depois atualizarmos o console, primeiro vamos verificar as listas. Se clicarmos sobre estes, estes estão agora ligados a um quadro específico. O mesmo com o nosso segundo, e se formos para nossos cartões, também
podemos ver que eles estão conectados a um ID de lista para o terceiro, e este é um ID diferente para os dois primeiros. Para finalizar este vídeo, agora
podemos ler os cartões do banco de dados, que seguirá um padrão semelhante às nossas listas. Mais em nossa lista temos componentes JS, podemos primeiro chamar o método de dentro do componente montou. Logo abaixo do nosso objeto de estado, podemos adicionar componentsDidMounts, configurar nossos colchetes e nossas chaves. Dentro daqui podemos chamar this.fetch cards, que é o método que vamos criar em apenas um momento, que vai passar na lista ID com este top adereços fault.list. Em seguida, podemos configurar o nosso método personalizado logo abaixo deste, então este é obtido cartões vai ser uma função de sincronização, que você vai tomar nesta lista ID que seria passado para ele, configurar a nossa função de seta. Então eu tento e um bloqueio de captura. Passando o erro, não um console.error com o texto do erro, buscando cartões. Adicione uma vírgula e, em seguida, emite o nosso erro, então agora podemos configurar as coisas para obter os nossos cartões do banco de dados, que irá corresponder a este ID de lista que é passado. Podemos fazer isso dentro do bloco de testes. Vamos primeiro criar uma constante para armazenar nossos cartões, onde vamos esperar os dados de nossos cartões ref. Depois de dias, podemos adicionar trem para o final D ensinou onde método. Lembre-se que isso leva em três argumentos. O primeiro é o valor com o qual você deseja comparar. Isso é armazenado dentro dos cartões. Se dermos uma olhada no console, queremos selecionar o ID da lista, então selecione card.list ID. O segundo valor é a comparação, que é igual. Queremos verificar se isso é igual ao ID da lista. Logo depois disso, também podemos encadear até o final a ordem por método. Queremos ordenar esta ascensão pela propriedade card.created up
e, finalmente, para obter esses dados, chamamos o método do.get. Depois disso, podemos selecionar nossos cartões e em seguida, percorrer cada um com o.for each. Para cada é então vai armazenar cada valor em uma variável chamada cartão. Isto irá executar uma função que está indo para construir nossos objetos de cartão. Primeiro de tudo, podemos pegar nossos dados, o que é exatamente como fizemos com as listas nos quadros. Podemos pegar nossos objetos de cartas. Podemos executar o método de dados para pegar todas as propriedades
do cartão e, em seguida, selecionar os objetos do cartão. Em seguida, vamos então criar nossos objetos de cartão, que vai ser o único, que vai empurrar o estado. Precisamos selecionar o ID, que está disponível a partir do objeto do cartão, separado por uma vírgula. Podemos então mesclar os dados, assim como fizemos com as listas nos quadros. Vamos testar isso está trabalhando com um log de console após nosso objeto. Queremos registrar o valor de nossos objetos de cartão. Salve isso e, em seguida, passar para o navegador em nosso projeto, agora
podemos recarregar, e então vemos que esta consulta também requer um índice dois, então clique no link sobre o console, e agora podemos criar nosso índice para as cartas também. Vamos criar isso com este botão. Pausar o vídeo e nos dar alguns momentos para construir nosso índice, e eu vou vê-lo em alguns minutos. Com o nosso índice agora é criado, podemos voltar para o aplicativo e, em seguida, recarregar, e agora vamos ver todos os três cartões foram colocados no console. Isso é tentar criar um novo cartão, teste. Número um, envie isso, recarregue o navegador, e agora teremos nosso quarto cartão adicionado com o texto do teste um. Também podemos ver que isso está vinculado a este ID lista. Vamos tentar adicionar um novo, então teste dois recarregar, e então podemos ver que o teste dois tem um ID de lista diferente para o número um. A próxima coisa a fazer agora sabemos que temos os dados corretos é substituir nosso log do console por um estado definido. Isso agora define estados. Aqui dentro vamos definir as cartas atuais, que já temos nos estados, criar nossos objetos. Podemos então fundir-nos com os nossos estados. Nossos cartões atuais, também passando em nosso novo objeto cartão. Com isso agora vamos voltar para o navegador
e, em seguida, se pesquisarmos dentro das ferramentas de desenvolvedor reagir, podemos procurar por componentes de uma lista, selecionar um destes,
e, em seguida, para baixo, podemos ver nosso estado dos cartões atuais. Isto tem um raio com duas cartas diferentes aqui dentro. Você pode procurar o nosso segundo. Desinstale os três cartões atuais relacionados a esta lista, então a última coisa a fazer neste vídeo é exibir esses cartões dentro de cada lista. Se voltarmos para todos os componentes da lista e
podemos contar este loop que irá executar o fora dos cartões. Podemos então mudar os prompts de estilo para ser este estado superior. Desde que agora armazenamos nos cartões atuais em estados. Exatamente o mesmo antes que nossos dados. Este vai ser este cartões.state, .current, também passando a chave, para o navegador, e agora vamos ver as listas. Agora exiba as cartas em cada uma. Isso agora nos deixa com cada cartão na lista correta, e em seguida vamos olhar para como podemos excluir dados.
25. Como excluir cartões e listas da lista do Firebase: Agora passamos a adicionar a funcionalidade para remover nossos itens do banco de dados. Remover um item do Firebase é muito simples. Tudo o que precisamos fazer é encontrar o item no banco de dados e, em seguida, chamar um método delete. Isto é o que podemos fazer pelas cartas. A primeira coisa que precisamos fazer é adicionar um simples botão Remover para cada cartão, que eu vou adicionar como um simples cruzamento para os
componentes Card.js dentro de nossa div e apenas explodir o contexto. Podemos adicionar elementos de extensão HTML. Dentro daqui podemos adicionar um manipulador de eventos OnClick, que vai acionar um método chamado this.DeleteCard. Dentro das tags span de abertura e fechamento, podemos adicionar entidade HTML, que é as vezes e comercial e, em seguida, o ponto-e-vírgula. Também o navegador. Isto irá produzir uma cruz, que podemos usar para acionar este método. Agora estamos lidando com os cartões armazenados no Firebase. Precisamos importar a referência dos cartões. No topo, podemos importar nossos CardsRef. Isto é a partir da string que é.. /base de fogo. Em seguida, podemos criar o nosso método DeleteCard, que é chamado clicando nesta cruz. Logo acima do nosso esforço aleatório. Podemos acrescentar que DeleteCard vai ser uma pia. Nós receberemos as informações do evento. Quando ele é chamado liquidado a função seta. Vou tentar seção e também a captura passando no erro. Agora podemos colocar um console.error com a cadeia de erro excluindo cartão. Os primeiros passos acima na seção try vai usar essas informações de evento para evitar o comportamento padrão. Será então necessário pegar o CardId de adereços. Podemos armazenar isso em uma constante chamada CardId. Unsat este também isso.props.data.id Lembre-se cada cartão está recebendo os adereços chamados dados. Então, vamos para as ferramentas de desenvolvedor em React. Se você procurar um cartão, este está recebendo todos os dados para cada cartão Dentro deste dados Props. Aqui nós acessamos nele este id. Agora nós podemos usar isso para acessar um determinado cartão dentro de uma Firebase com este id. Abaixo desta nova e louca constante, que vai ser para o nosso cartão. Aqui vamos esperar o ponto CardsRef para a nossa coleção. Podemos então selecionar um determinado documentos pelo id. Nós já temos este CARDID armazenado logo acima. O último passo é chamar o método delete neste cartão específico. Então card.delete que é fornecido pelo Firebase. Vamos salvar isso e passar para o navegador. Vamos clicar em “Teste um”. Ainda precisamos atualizar uma vez que ainda não temos funcionalidade em tempo real. Mas agora vemos que o teste um foi removido. Se formos até o console e recarregarmos isso, podemos verificar cada um dos nossos cartões para testar um. Isso agora está sendo removido do nosso banco de dados também. Em seguida, precisamos também remover as listas. Isso é um pouco mais complexo, já que também precisamos encontrar e remover cada cartão, que também está associado a esta lista. Vamos fazer isso no componente lista, que é list.js. Novamente, isso também precisa de um botão ou através para remover a lista. Vamos fazer isso logo após a saída do título da lista. Esta linha de código aqui no espaço. O conteúdo vai ser a entidade HTML de tempos e comercial e o ponto-e-vírgula. Isso também precisará de um manipulador de eventos OnClick, que será o loop this.DeleteList na parte superior. Também podemos importar nossas ListsRef do Firebase. Em seguida, criou este método DeleteList. Isso vai ser assíncrono e, em seguida, passar em uma função de seta, uma seção try. Podemos pegar quaisquer erros em um erro de console com o texto de erro excluindo lista. Os primeiros passos no bloco try será pegar o listID. Podemos armazenar isso em uma constante chamada listID. Este listID está disponível nos adereços. Então este. Props o nome dos adereços é lista. Em seguida, podemos pegar o id. Blow é uma segunda constante para nossos cartões onde estamos indo para esperar nossos CardsRef. Para isso, não queremos apenas chamar o.getmethod. Uma vez que isso vai pegar todos os nossos cartões no banco de dados. Nós só queremos remover os cartões particulares que está associado a esta lista, que irá remover em. Vamos anotar isso. Podemos encadear no final, os pontos onde método. Lembre-se que isso leva em três argumentos. O primeiro vai ser o cartão.listID. O segundo será a comparação. Gostaria de verificar se cada propriedade id lista em cada cartão vai ser igual a este listID de adereços. Então, na vírgula, adicione o listID. Então podemos finalmente encadear no método get para puxar essas cartas. Próximo passo, o que você quer fazer com esses cartões, assim que recuperá-los. Bem, para cada cartão, que recebemos de volta, queremos chamar o método de exclusão. Mas pouco antes de
fazermos isso, vamos adicionar um rápido if declarações, que primeiro vai verificar se algum cartão voltou. Se cards.docs.length não for igual não é igual a 0. Em seguida, adicionamos as chaves do cartão. Isto é basicamente verificar se o comprimento
dos documentos que foram devolvidos é maior do que zero. Isto significa que temos algumas correspondências para o nosso id
lista.Podemos então loop através de todos os cards.foreach. Então, para cada cartão, vamos chamar o.deletemethod. Podemos fazer o seu com card.ref.delete. Estes devem cuidar de remover todos os cartões que estão ligados a esta lista. O próximo passo é realmente remover a lista. Apenas cada seção de cartas vai ser um pouco mais simples. Tudo o que precisamos fazer é criar uma constante que você vai pegar nossa lista da ListsRef. O documento que você deseja pegar é aquele que é igual a este listID. Vamos passar isto. Podemos então usar esta lista e chamar o método firebase.delete, que irá mover a lista também. Agora podemos salvar isso e podemos testar isso no navegador, Chrome e no projeto. Vamos para a Lista 1. Isso deve remover Card1, Card2 e teste dois. Clique nisto. Não vemos nenhum erro no console, então isso é bom. Vamos refrescar. Agora isso foi removido. Para a consola. Vamos primeiro verificar as nossas listas. Agora só temos a Lista 2 aqui dentro. A lista está sendo removida. Podemos checar os cartões. Agora vamos ter apenas este cartão único, que é desta lista aqui. Isto é tudo trabalhar agora. Podemos clicar em uma lista para remover. Ele também irá remover qualquer cartão que tenha sido vinculado com o id. Em seguida, vamos voltar para excluir itens, também removendo as pastas do nosso aplicativo e também do Firebase.
26. Deletar placas: Excluir o quadro é um pouco mais envolvido do que o último vídeo. Não vamos sentir que ainda não olhamos. Isso é porque precisamos encontrar o conselho em si. Em seguida, todas as listas associadas e cartões que pertencem ao tabuleiro. Antes, em seguida, excluir em todas as três dessas coleções. Se formos para a visualização do quadro, já
temos um botão Excluir placa na parte superior. Todos os métodos relacionados, placa e também o estado bola é então mantido no app.js. Alguém adicionou um método Delete Board aqui dentro também. Quem, em seguida, vai passá-lo para baixo como adereços para os componentes da bola. para que ele possa ser acionado quando o botão é clicado. O primeiro passo é criar o método Delete Board, que passará para ele o ID da placa. Vamos descer logo acima do método aleatório. Podemos criar nossa placa de exclusão. Isso vai ser assíncrono. Vamos passar no ID do quadro quando chamamos isso e, em seguida, configurar nossa função de seta. Primeiro de tudo, podemos criar as seções “try and catch”. Passando o erro como sempre. Em seguida, poderíamos fazer um console.error com o texto do erro excluindo
placa, dois pontos e, em seguida, passar o erro. Uma vez que estamos chamando esse método a partir do botão nos componentes da placa, precisamos passá-lo como adereços. Vamos rolar para baixo até nosso roteador. Precisamos encontrar os componentes da placa. Que é apenas aqui, logo após o problema do roteador, podemos passar na placa de exclusão, que vai ser igual ao nosso método das lojas excluir placa. Se formos para o board.js, antes de esquecer, vamos adicionar a validação adequada. Precisamos importar isso, uma vez que ainda não o usamos, importar os tipos de prop. Em seguida, na parte inferior, podemos criar nossos tipos de prop logo acima de onde exportamos este arquivo, então negrito B, tipos de prop, configuração acima de objetos. O único adereço que entraremos no minuto, será o quadro de exclusão. A placa Delete é o tipo de função prop, então usamos .func. Isto também vai ser necessário. Dentro do método aleatório, já
temos um botão para adicionar no clique “Ouvinte To”. Vamos rolar para cima e dar uma olhada no nosso botão e qual é este aqui. Podemos então adicionar no clique dentro aqui. Isso vai acionar um método, então vamos criar isso.Delete Board. Esta placa totalmente não é o método que vai passar para baixo porque temos um acesso este através de adereços. Agora podemos ir em frente e criar Delete Board logo acima fora do método aleatório. Excluir método de placa, que vamos adicionar agora, vai ser responsável por pegar o ID deste quadro atual. Em seguida, chamar na necessidade Delete método Board que está sendo passado como adereços, então vamos adicionar este Delete Board. Este é um assíncrono. Então aqui dentro a primeira coisa a fazer é pegar o ID atual da placa e instalar isso dentro de uma constante. ID da placa vai estar disponível a partir de adereços. Este top props.Match.Params.Boardid. Lembre-se, match.params, é o roteador adereços, e os parâmetros vai ser este ID de placa, que você pode pegar a partir daqui. Nós armazenamos isso dentro de uma variável,
portanto, agora podemos passar isso quando chamamos nosso método Delete Board, que acabamos de criar em app.js. Este top adereços, totalmente bordo, como na placa ID. Antes de avançarmos, vamos testar, tudo isso está funcionando. No app.js, não
temos nenhum conteúdo dentro desta seção tente. Vamos fazer um alerta simples com o nome da variável de ID de placa, que está apenas sendo passado. Guarde isso em nossos projetos. Vamos tentar apagar o quadro. Ótimo. Agora temos o alerta com o mesmo ID de placa que está na URL, quando todo o método está sendo chamado agora. Agora podemos usar o ID para pegar todas as pastas do Firebase, atualizar o estado e, finalmente, excluir a placa. Primeiro passo, vamos mover o alerta, e então podemos salvar o quadro atual para uma constante. Podemos fazer isso aguardando nossas placas Ref. Pegue o documento, e o documento que você deseja pegar é pelo ID. O ID é armazenado dentro da variável ID da placa. O próximo passo é atualizar o estado com este estado.set. Dentro daqui você pode passar em nosso objeto de estado onde vamos atualizar as placas dentro do Estado, vai configurar isso como um array. A primeira coisa é usar o Operador de Spread para pegar o estado atual das placas de estado. Isso terá uma cópia de todos os membros do conselho atualmente nos estados, mas se quisermos remover um determinado conselho, como podemos fazer isso? Bem, podemos usar um método de filtro JavaScript, que irá filtrar qualquer Conselho particular de Estados. Aqui dentro, nós vamos armazenar cada placa dentro
desta variável e, em seguida, executar uma função para cada uma. Esta função será responsável por apenas devolver quaisquer placas de Estados que não correspondam a este ID de placa. Vamos adicionar nossa declaração de devolução. Queremos retornar quaisquer placas onde o ID não é igual a este ID de placa, que acabamos de excluir. Passo número três, fora desta seção de corte, vamos chamar Board.Delete para remover isso do Firebase. Nós não queremos testar isso ainda, porque nós também queremos remover as listas e cartões para este quadro ao mesmo tempo. Vamos começar com as listas,
por isso, no topo da nossa seção de tentativas. Podemos começar com a criação de uma constante chamada Listas. Dentro daqui vamos esperar nosso gráfico de lista, que é nossa coleção de listas. Dentro desta constante lista, queremos filtrar todas as listas que estão relacionadas a este ID de placa. Podemos fazer isso com o método web. Leva em três parâmetros. O primeiro vai ser a lista. O segundo é igual a como uma string
e, em seguida, o terceiro valor é o ID da placa. Isso vai filtrar todas as nossas listas onde a propriedade do tabuleiro é igual à placa que foi passada em, então podemos encontrar o agarrar todos estes ponderados, they.get método. Como agora estamos usando este rascunho lista, agora
podemos ir até o topo deste arquivo onde adicionamos a importação e também neste também, em
seguida, voltar para o nosso método. Com esta lista de dados, que agora
retomamos, agora precisamos fazer duas coisas. Primeiro de tudo, precisamos adicionar uma declaração if para realmente verificar se há alguma lista salva este quadro atual, antes de ir em frente e excluí-los. Número 2, se a lista estiver disponível, precisamos olhar através deles e depois apagar. Apenas sob Get, podemos adicionar uma declaração if. Podemos verificar se listas, docs dot length não é igual a zero,
em seguida, o código dentro desta instrução if só será executado se houver mais de uma lista. Se essas listas, podemos deixar para você com o para cada método. Para cada um, vamos armazenar cada item dentro desta variável lista, configura uma função para cada um. Agora isso nos deixa em uma posição semelhante à do último vídeo. Temos listas que precisamos excluir, e também temos que encontrar os cartões para cada lista também e depois ir em frente e excluí-los. O que significa que agora temos algumas funcionalidades compartilhadas. Se passarmos para a lista app.js e, em seguida, dar uma olhada para o método delete list. Criamos esse método no último vídeo para fazer isso. Então, em vez de duplicá-lo, podemos levantar isso até o app.js e, em seguida, deve o uso desta função. Vamos começar cortando o método completo. Estará fechando chave até deletelist hospedado app.js. Vamos colar isso dentro e logo acima da área de transferência. Este método usa os cartões firebase href, que você pode ver se rolar para cima apenas um aqui. Precisamos importar isso no topo e, em seguida, voltar para este método deletelist. Esperança no topo aqui temos uma constante chamada ListID. Esta linha está recebendo os dados de adereços, mas não temos esta lista adequada disponível agora neste app.js, então removemos esta linha. e, em vez disso, quando chamamos, este método passará neste listID. Isto entre parênteses. Como removemos essa lista de exclusão dos componentes da lista, agora
precisamos repassá-la via adereços. Vamos para a nossa prancha. Dentro do roteador. Você pode então adicionar isso como um adereço. Esta é a deletelist e isso vai ser igual a isso, dot deletelist. Em seguida, vá para o quadro app.js. Podemos adicioná-los como um tipo de adereço. Vamos duplicar isso e isso foi deletelist. Lista de links estava para baixo dentro do componente lista. Agora podemos passar isso como um adereço dentro desta lista componentes. Logo após uma lista, também
podemos adicionar nosso adereço deletelist, que estará disponível a partir deste top adereços, pontos deletelist. Agora, novamente temos essa funcionalidade de lista de exclusão disponível na lista. Isso agora está recebendo isso como adereços. Podemos adicioná-lo aos tempos de adereço na parte inferior. Estes são os deletelistas. O tipo de prop é um tipo de função que também é necessária, adicionar um coma no meio. Dentro do método aleatório para esta lista, temos um elemento span que está chamando nosso método delete list. Podemos recriar isso acima para chamar o método que você passa como adereços. Fora renderização, podemos criar nosso novo método chamado lista deletelist, configurar nossa função e, em seguida, dentro desta função queremos fazer duas coisas. Primeiro de tudo, queremos pegar o ListID. Porque lembre-se de antes no app.js, Quando passamos por este método deletelist. Vamos voltar para cima. Nós também passamos isso como um listID. Este listID está disponível dentro deste componente de lista através de adereços. Este top prompts id ponto lista ponto. Em seguida, podemos finalmente ir em frente e chamar o nosso método deletelist com este ponto prompts. Dot deletelist, que vai passar no ListID. Salve este arquivo e antes de ir mais longe, podemos testar esta lista está sendo removida e problemas quer ser lists-ref e o app.js. Vamos adicionar um s aqui dentro e também 63 e 67. Isso é no final. Também aqui. Bom. Agora está funcionando. Vamos tentar remover uma lista. Vamos adicionar uma lista aqui dentro. Atualizar, clique em Avançar. Agora, se recarregarmos isso, isso agora foi removido. Vamos também tentar um destes em diferentes componentes. Este novo clique em Avançar. Agora também podemos remover isso. Agora isso foi um pouco de trabalho extra para colocar isso em diferentes componentes. Mas isso significa que agora podemos voltar para o nosso app.js onde originalmente
começamos e, em seguida, podemos fazer uso deste método deletelist para cada lista que temos. Agora estamos percorrendo cada uma das listas ou quando é agora fazer é chamar este método deletelist, que agora temos disponível neste componente. Este deletelist ponto. Deletelist também precisa ser passado em um id e firebase armazenamento dentro de um objeto chamado ref. Nós podemos acessar isso com list dot ref, dot id. Agora nós só precisamos dar isso um teste e, de fato, isso responde para ser nossa lista constante em vez de nossa lista ref. Isso nos dá um salvamento. Agora, se entrarmos em uma dessas placas, vamos para o nosso Teste 2. Dentro de um aqui temos uma lista de um, dois e três e também a causa de a, b e c. Agora, se tentarmos excluir nosso quadro, vamos atualizar. Verei agora todos os dados foram removidos. Podemos checar isso no console da base de fogo. Vamos verificar a nossa lista em nossos cartões foram removidos também. Vamos primeiro começar com nossas listas. Nós só temos a lista única aqui em vez dos números 1, 2 e 3 em nossos cartões. Você ainda tem o cartão único 2 e nós não vemos a, b, e c. Este é agora todos os métodos de exclusão que precisamos para este projeto e na próxima seção veremos como podemos atualizar nossos dados dentro de uma base de fogo.
27. Como atualizar dados no Firebase: Nesta seção, vamos nos concentrar em atualizar nossos quadros, listas e cartões. Isso é importante, uma vez que um usuário pode querer obedecer coisas como um título de álbum ou uma etiqueta em um cartão. Esses rótulos são algo que vamos colocar no Zoom. Neste vídeo, vamos tornar o álbum e listas títulos editáveis depois de clicarmos neles. Então podemos fazer quaisquer alterações e enviá-las para o Firebase. Vamos começar de novo no board.js, então podemos trabalhar com o título do nosso conselho. Aqui nós vamos estar substituindo o título da placa atual com elemento de entrada
HTML para que o usuário possa então digitar nele. Vamos começar removendo nosso título de nível três, então vamos remover, ou comentar esta linha ambos. Então dentro daqui podemos criar uma entrada HTML. Em seguida, na próxima linha eu vou adicionar o tipo que vai ser igual ao texto. Além disso, um nome, que vai ser o título da placa na mudança, que irá desencadear um método que vai ser chamado placa de atualização. O último atributo será o valor padrão e o valor padrão será igual a this.state.currentBoard.Title. Isso vai pegar o título exatamente como ele fez acima em nosso título nível três. Usando o valor padrão em vez de apenas o atributo value, vamos especificar o valor inicial. Em seguida, deixaremos as atualizações subsequentes controladas para que possamos editar este campo. Vou salvar este arquivo e depois passar para o navegador, para os nossos projetos. Precisamos voltar, selecionar o tabuleiro. Agora podemos clicar em seu título e editá-lo. É claro que isso não será salvo no Firebase no momento porque não
criamos esse método de quadro de atualização que chamamos de dentro aqui. Vamos fazer isso fora do método de renderização. Podemos criar placa de atualização, passando as informações do evento e, em seguida, define sobre a função. Esta atualização real da placa abrirá o app.js junto com todos os leilões ao mar. Vamos começar uma bigamia no tabuleiro ID e guardá-la dentro de uma constante. O ID da placa está disponível a partir this.props.match.params.boardid. Este é um ID de placa que está disponível a partir dos parâmetros de URL. Nós armazenamos dentro desta variável. Vamos agora criar uma nova constante que vai ser chamado de novo título. Isso vai armazenar o valor que o usuário digitou. Podemos pegar isso de e.CurrentTarget.value. Em seguida, notas abertas e se declarações onde podemos verificar se o ID placa está presente e também queremos verificar se há um novo título. Se ambos estiverem presentes, queremos chamar um método chamado quadro de atualização, que vamos criar um app.js em apenas um momento. Isso passará como adereços para que possamos acessar com this.props.updateBoard. Em seguida, vamos enviar para este método, o ID de placa e também o novo texto que é salvo em novo título. Vamos agora para o app.js e podemos criar este método quadro de atualização, que será responsável por salvar isso no Firebase. Assim, fora da renderização, placa de
atualização é será assíncrona. Vamos dizer novamente o ID do tabuleiro e também o novo título. Podemos nos acalmar tentando seção, então a captura logo depois. Passando o erro onde podemos fazer um erro de console com o texto de placa de atualização de erro, também passando o erro. Bom. Agora, a primeira coisa a fazer é pegar o tabuleiro do Firebase usando este ID de tabuleiro. Instale as constantes semi chamadas board. Temos os nossos quadros ref, que aponta para a nossa coleção. Queremos direcionar um documento específico e este documento será igual ao ID do quadro. A próxima coisa que podemos fazer é chamar um método Firebase chamado update. Então, aqui dentro, vamos passar um objeto. O campo que queremos atualizar é um título e isso está disponível com board.title. Eu vou definir isso para o novo título que é passado em. Agora nós criamos isso. Agora também precisamos passar isso para os componentes da placa. Desde que chamamos nicho do board.js, vamos passar isso como adereços. Esta é a placa de atualização para que eles ainda atualizar placa sobre o boards.js. Você também pode adicionar isso a de tipos de prop na parte inferior. Esta é a placa de atualização. Os tipos de prop, esta é também uma função que também é necessária para salvar este arquivo agora sobre o navegador. Vamos encolher isso. Não quero colocar isso lado a lado com o Firebase console para que possamos ver essa atualização em tempo real. A consola, vamos selecionar a nossa placa de afazeres que é esta aqui. Clique em nosso título. Vamos tentar adicionar alguns textos diferentes aqui. Vou ver as atualizações imediatamente. Podemos remover isto. Vamos tentar atualizar. Se agora recarregarmos o navegador, veremos que esses dados persistirão após uma recarga. Alterar o título da lista também é muito semelhante ao, se não mesmo mais simples desde que eu vou estar adicionando todo o código
no componente lista para que não há necessidade de passá-lo para baixo adereços. Se formos para o list.js, podemos substituir nossos elementos p com uma entrada. Role para baixo até a renderização. Em vez de nossos elementos p, podemos remover este e entradas HTML. O tipo vai ser igual ao texto. Nós também vamos adicionar um nome que vai ser o título da lista. Na mudança isso irá desencadear um novo método que vai ser lista de atualização, em seguida, finalmente, o valor padrão. Este valor padrão vai ser igual a this.props.list.title então vamos pegar isso de cima, em seguida, podemos construir a lista de atualização fora do método de renderização. Esta será uma sincronização tomando as informações do evento. Primeiro de tudo, como sempre, nós adicionamos nossa seção de tentativa e eu vou pegar para qualquer manipulação de erros. O erro do console será uma string de lista de atualização de
erros também passando o erro logo depois. Lista de atualização também precisa de acesso a esta lista Id, então vamos cortar esta constante de um pouco acima. Podemos então adicionar isso. Uma segunda constante de novo título que vai armazenar no valor, que o usuário digitou. Podemos pegar isso de e.currentTarget, em seguida, pegar o valor que o usuário inseriu. Em seguida, pegamos nossa lista do Firebase e armazenamos em uma lista chamada constante. Vamos esperar as listas árbitro. Podemos pegar um documento pelo ID,
e o Id é armazenado apenas ambos na lista Id. O passo final é chamar o método de atualização com list.update. Dentro aqui como um objeto, vamos atualizar o campo título que podemos pegar de list.title e definir isso igual ao nosso novo título. Vamos dar uma chance a isso. Precisamos ir até o navegador e encontrar um quadro que tenha uma lista. Vamos voltar para a lista dois, vamos clicar sobre isso e mudá-lo para a lista 200. Também podemos verificar lado a lado. Lista 200 cidades americanas foi atualizado aqui dentro. Se atualizarmos, isso agora permanece persistente dentro do navegador significa que agora ele foi armazenado dentro um Firebase e agora estamos recuperando isso em nossos componentes de lista. Isso é o suficiente para atualizar o quadro e a lista. A atualização do cartão, teremos um pouco mais. Começaremos isso no próximo vídeo criando um modal pop-up para fazer nossas alterações.
28. Modal de cartão: Na versão final do projeto que eu abri aqui, se clicarmos em qualquer um desses cartões ele nos leva a um modal adequado. Este modal nos permitirá editar o texto nos cartões, e também adicionar e remover rótulos também. Os rótulos são algo que o Trello usa como um sistema de marcação. Como exemplo, se você quiser ver visivelmente todos os nossos cartões que
completamos, talvez queira adicionar um rótulo verde para mostrar isso. Este modal vai ser um novo componente para lidar com tudo isso, e isso é o que vamos avançar e criar agora. O estilo para o modal já foi fornecido nos estilos CSS, que você deveria ter baixado anteriormente. Acabou de adicionar algum posicionamento básico e estilo para que possamos nos concentrar no HTML e JavaScript dentro do nosso componente. Vamos começar criando isso na pasta de componentes. Vamos criar um novo arquivo chamado extensão EditCardModal.js. Este componente lida com adereços, mas por enquanto, eu só vou criar a marcação básica, e então vamos voltar e editar isso em breve. Vamos começar importando React. Em seguida, podemos criar o nosso componente base classe que vai ser chamado EditCardModal. Como sempre, isso vai estender React.Component. Dentro daqui podemos definir nosso estado inicial, então é um objeto bolha, e então o primeiro pedaço de estados que eu vou adicionar é para os rótulos disponíveis. Este vai ser um array que vai conter seis valores diferentes, para as cores que estão disponíveis para selecionar. O primeiro é um valor hexadecimal de 80ccff separado por uma vírgula, então
vou copiar e colar isso em mais cinco vezes, para nos dar seis valores diferentes. Este segundo, este vai ter o valor de 80ffaa. O terceiro, este vai ser f94a1e. O terceiro vai ser ffb3ff. número cinco vai ser bf00ff. O último é ffad33, separado por uma vírgula. Também podemos adicionar uma matriz vazia, que é para os SelectedLabels. SelectedLabels manterá cada um desses valores assim que um usuário clicar neles. Abaixo disso depois de nossos estados, podemos adicionar o método de renderização aqui dentro, e podemos retornar nosso jsx. Primeiro de tudo isso vai ser cercado em um invólucro, que vai ser contido em um div. O nome da classe será igual a modal-wrapper. Feche isso. Aqui dentro podemos aninhar em uma segunda div, que terá o nome da classe de modal-body. Este corpo modal vai ter uma seção de formulário. Vamos dar uma olhada na versão final, clique em um desses. Este modal vai ter um botão de fechamento no canto superior direito, que quando clicarmos sobre isso irá nos retornar para a visualização do tabuleiro. Nós vamos adicionar um título, em
seguida, vamos percorrer esses rótulos disponíveis que você acabou de definir o estado
e, em seguida, exibi-los. Depois disso, teremos uma área de edição onde o usuário poderá editar o texto dos cartões, seguido dos rótulos selecionados que foi o segundo item em nosso estado, e então um botão de envio para salvar essas alterações. Vamos em frente e construir isso agora dentro desta div. Primeiro de tudo dentro aqui podemos adicionar um formulário aninhado dentro. Nós vamos adicionar um div e isso vai ser um div para a primeira seção que é para os rótulos disponíveis. O topo desta seção modal tinha uma cruz que um usuário poderia clicar sobre ela para fechar o modal. Podemos adicionar isso com uma entidade HTML que é ×. Isso também vai ter um ClassName, para fornecer o CSS de modal-close. Basta fechar a barra lateral para nos dar um pouco mais de espaço, e então logo após este span, um elemento p que vai ser para o texto de adicionar/remover rótulos. Isso também tem um ClassName, que é para label-title. Logo após este título, vamos então
percorrer cada um desses itens na matriz. Como agora é JavaScript para abrir as chaves, podemos acessar os rótulos disponíveis em estados com this.state.availableLabels. Vamos então mapear cada um
desses seis valores armazenados em cada item dentro desta variável de rótulo. Dentro daqui podemos retornar um HTML span elementos para cada rótulo disponível. Feche isso. O span vai ter um ClassName, que vai ser igual ao rótulo. As principais partes deste elemento span vai ser uma propriedade style. A propriedade style vai dar ao rótulo a
cor de fundo que temos definido no estado. Para baixo logo após o nosso rótulo, podemos definir o estilo, abrir as chaves duplas
e, na verdade, vamos adicionar isso à sua própria linha para que seja mais legível. Dentro das chaves, podemos definir o plano de fundo para ser igual ao rótulo. Em seguida, para terminar esta seção div com uma linha horizontal, modo que os elementos hr logo abaixo desta div. Nós vamos então adicionar uma segunda div, que vai ser para a nossa segunda seção. A segunda seção se clicarmos em qualquer um desses, será essa área de edição. Nós vamos ter uma entidade HTML que vai ser este pequeno lápis, e então nós também vamos ter a entrada onde o usuário pode mudar o texto do cartão. Vamos adicionar isso agora. Esta div vai ter um className de edit-area. Em seguida, a primeira coisa vai ser uma extensão para a nossa entidade HTML. O ClassName que é edit-ícone. A entidade HTML para o lápis é o ✎. Após a extensão, podemos então adicionar a entrada que é para o texto. A entrada também tem um ClassName que vai ser igual a textbox-edit. Isto é tudo o que precisamos agora para esta secção. Depois desta área de texto div nós também vamos criar uma terceira seção div. Isso vai ser para nossos rótulos que o usuário selecionou. Vamos começar com um elemento p que vai ter o título dos rótulos, seguido por dois pontos. P elementos tem um className, que vai ser igual a label -title. Em seguida, vamos adicionar algum JavaScript que vai percorrer todos os rótulos, e depois exibi-los na tela. Por agora, embora eu só vou adicionar uma seção TODO, e então vamos dizer rótulos de exibição, comentar esta seção e, em seguida, vamos voltar a isso em um vídeo posterior. A última coisa para este formulário é adicionar um botão. Este botão em vai enviar o formulário para que ele precisa do tipo de envio, o texto de Salvar alterações. Então, finalmente, para este componente precisamos exportar padrão o nome de EditCardModal. Vamos dar a este arquivo um salvamento e, em seguida, podemos passar para o componente card.js, onde podemos importar este novo arquivo. Até no topo vamos adicionar isso, que foi o EditCardModal de. /EditCardModal. Rolando para baixo em nosso método aleatório agora podemos enviar isso para o navegador. Vamos fazer isso bem no final. Isso será chamado EditCardModal, feche isso. Agora, porque temos dois elementos lado a lado, também
precisamos adicionar isso em um fragmento, então React.Fragment. Podemos então pegar a etiqueta de fechamento e adicionar isso até o final. Se tudo correr bem, devemos ver isso no navegador. Se formos para o nosso projeto, e então precisamos adicionar um cartão, vamos adicionar rapidamente algumas listas, então abc, atualizar e vamos adicionar um cartão, 1, 2, e depois 3. Agora temos algum conteúdo na tela, temos todos os rótulos,
temos a área de texto, e também a seção de rótulos na parte inferior. Temos a cruz para fechá-lo e também o botão para salvar as alterações. Obviamente, nada disso funcionará ainda, e também queremos mostrar isso quando o cartão for clicado. [ inaudível] podemos adicionar um valor booleano ao nosso estado local no card.js. No topo, podemos adicionar algum estado para que seja um objeto bolha, e então podemos definir o estado inicial de ModaloPen para ser falso. Então, abaixo disso, podemos criar um novo método que irá alternar isso entre true e false. Vamos chamar isso de ToggeModal, então é uma função de bolha, e então podemos alternar o estado com this.setState. Dentro do nosso objeto o estado que queremos alternar é Modalopen. Nós vamos definir isso para um valor de this.state.Modalopen. Podemos então adicionar o ponto de exclamação pouco antes disso, que fará o oposto do que está atualmente definido no estado. Cada vez que isso é clicado, ele vai pegar o que está atualmente lá, e então fazer o oposto. Queremos que este método ToggeModal seja acionado cada vez que o texto do cartão foi clicado, que
possamos adicionar um manipulador de cliques no texto abaixo. Em nosso método aleatório, o elemento p. Podemos então adicionar um manipulador de clique dentro do suporte de abertura, e definir isso igual a this.Toggle.modal. Lembre-se que dentro deste cartão é onde vamos renderizar nosso modal. Este modal precisa estar ciente deste estado de alternância, que
possamos passá-lo como um adereço, então ModaloPen. Vamos definir isso para this.state.modalopen, salvar este arquivo e então podemos ir para o nosso componente modal. Agora, este prop pode ser usado para definir o tipo de exibição usando um operador JavaScript [inaudível]. Vamos rolar até o nosso wrapper modal que é este div apenas aqui, e então logo depois podemos definir o estilo, vamos adicionar isso em uma nova linha. Podemos definir a propriedade estilo CSS com as chaves duplas. Podemos definir o tipo de exibição deste modal para ser igual a this.props.Modalopen. Se este valor booleano for verdadeiro, então vamos
definir este tipo de exibição para ser igual a bloco. Ou, se isso for definido como false, definiremos o tipo de exibição como nenhum, o que ocultará esse componente modal. Agora vamos salvar isso e, em seguida, testar isso no navegador, em nosso projeto. Nós imediatamente vemos que temos nossos cartões e lista, mas não temos o componente modal exibindo. Vamos tentar clicar no texto, que agora irá acionar esse método e abrir o modal. No entanto, se clicarmos neste x no canto para remover, ele não funciona no momento. Para isso, também precisamos passar este método ToggeModal, então vamos voltar para o card.js. Temos este Togglemodal, que está aqui. Nós também podemos passar isso para o nosso EditCardModal como um adereço. Em uma nova linha, podemos adicionar ToggeModal que vai ser igual ao nosso método. Voltar para os componentes modais, agora
podemos acionar este método quando o x foi clicado. Este é o span que tem o x. Nós podemos adicionar um manipulador de cliques exatamente como fizemos antes, que vai executar este prop, assim por diante clique. Podemos definir isso para this.props.Togglemodal. Voltar para o navegador agora podemos dar uma chance. Vamos clicar no modal que deve aparecer isso. Em seguida, clique no x no canto que agora executa o método ToggeModal e, em seguida, define o estado para ser o oposto que é falso. Isso agora levou um pouco de digitação para fazer este modal funcionar. Tudo o que precisamos fazer agora é conectá-lo a alguns métodos para editar o cartão, e esta será nossa tarefa no próximo vídeo.
29. Como atualizar o texto do cartão: Dentro do nosso projeto, se formos para o React Developer Tools e, em seguida, procurar os componentes do cartão. Se selecionarmos qualquer um desses cartões, podemos ver no lado direito que temos este suporte de dados, que está disponível para cada um. Isso contém todas as informações sobre o cartão atual, como o criado na data, o ID e quaisquer rótulos armazenados dentro do Firebase. Uma vez que o modal será responsável por alterar ou atualizar todos esses dados, precisamos passar esses dados para os componentes modais. Vamos fazer isso primeiro indo para o card.js. Em seguida, dentro do modal cartão de edição, podemos então adicionar um terceiro adereço a isso, que vai ser chamado de dados do cartão. Então podemos passar esses dados como adereços. Isto. props.data, então vamos para o cartão de edição modal. Lembre-se quando criamos este componente será em estados, nós também criamos uma matriz de rótulos selecionados, que definimos para ser vazio. Agora temos os dados disponíveis no Firebase, que inclui todos os rótulos que já foram selecionados. Agora podemos atualizar este array para incluir quaisquer cartões que você salvou no momento. Podemos usar isso assim que o componente for montado. Temos componente montou e, em seguida, dentro aqui, vamos simplesmente definir o estado com isso. definir o estado. Nosso objeto vai atualizar os rótulos selecionados com valor de nossos adereços, que é armazenado em dados do cartão e os dados do cartão quer é o campo etiquetas. Agora vamos salvar isso e abrir o modal e ver o que precisamos fazer. Vá para o projeto, clique no texto. A primeira coisa a fazer é adicionar o texto do cartão dentro desta área de texto. O usuário pode alterá-lo se quiser. A segunda coisa a fazer é percorrer os rótulos selecionados
e, em seguida, exibi-los logo abaixo. Vamos começar adicionando o título do cartão na área de texto. De volta aberto para VS Code, podemos ir para baixo para o esforço aleatório e dar uma olhada para a entrada, que é apenas aqui em baixo como nossos dados estão no on-line. Precisamos adicionar o valor padrão que vai exibir o valor do texto. Podemos definir isso a partir de adereços. Então isto. adereços de dados do cartão. texto. A segunda coisa a fazer era percorrer todos os rótulos disponíveis
no estado e, em seguida, exibi-los sob este título etiquetas. Nós já temos um lugar titular comentários onde queremos que isso apareça. Mas agora eu quero substituir isso mapeando através de nossos rótulos selecionados. Dentro das chaves, podemos selecionar nossos estados, os rótulos selecionados. Vou usar o método de mapa para percorrer cada um, armazenar cada valor dentro de um rótulo. Podemos então configurar nossa função para cada um deles. Dentro daqui, tudo o que vamos fazer é retornar um elemento de extensão HTML. Este elemento span vai ter uma cor de fundo, que é a mesma que a cor do rótulo. Dentro da tag de abertura, podemos criar um nome de classe do rótulo. Mas também queremos definir o valor de estilo com um chaves duplas. Defina a propriedade de fundo CSS para ser igual ao rótulo. Esta cor de fundo do rótulo vai ser
igual ao valor hexadecimal que temos dentro do estado. Esses rótulos selecionados conterão qualquer um desses valores de hexágono. Em seguida, rolando para baixo, podemos definir estes para ser a cor de fundo para o nosso span. Como estamos fazendo loop, também
precisamos adicionar uma chave exclusiva a cada um desses elementos span. Logo após o fundo, também
podemos adicionar à chave, que será igual ao nosso rótulo. Isso vai ser bom para usar, uma vez que cada uma das seis cores é única, que
significa que não teremos nenhuma duplicata. Então salve isso, e depois para o navegador. Vamos agora entrar em qualquer um desses modais clicando no texto. Vemos o texto aqui dentro com um valor de um. Vamos tentar o número três. Nós ainda não temos nenhum rótulo disponível para esses cartões para exibir, mas vemos que o valor de três está agora em uma entrada de texto. Para nos permitir agora editar este cartão, podemos adicionar um novo método ao formulário quando enviarmos. Vamos voltar para o nosso modal e, em seguida, rolar para cima até o formulário. Dentro da tag de abertura, podemos adicionar um on submit, que vai ser igual a este cartão.update. Pouco antes de irmos em frente e criar este método de cartão de atualização, eu vou adicionar um ref para a entrada de texto para primeiro pegar o valor. Role de volta para baixo até a entrada com a classe de edições de livros didáticos, que é apenas aqui, logo após o valor padrão. Também podemos adicionar uma referência com isso. entradas de texto. Agora, acima, precisamos criar este ref e também o método do cartão de atualização. Logo abaixo componente fez montagem. Podemos criar nosso ref, que foi entradas de texto e que é igual a react.create ref. Depois disso, precisamos criar nosso método de cartão de atualização. No momento, esse método vai se concentrar na atualização do texto. Voltaremos aos rótulos muito em breve. Vamos começar fazendo esta função assíncrona, que leva em informações de evento como a função de seta onde adicionamos a seção de teste, a seção de corte logo abaixo, que vamos passar no erro e, em seguida, um erro de console que detecta todos os erros de atualização cartão. Adicione dois pontos e, em seguida, passe o erro. Dentro de nossa seção de teste, vamos primeiro chamar a prevenção padrão nos eventos. Para interromper o comportamento padrão da recarga do navegador. Próximo aberto vamos criar três constantes. Precisamos pegar o ID do cartão, precisamos pegar o novo texto que foi adicionado ao campo de entrada e, em seguida, precisamos pegar o cartão atual do Firebase. Vamos começar com o ID do cartão, que terá disponível dentro dos adereços. Cartão data.id. O próximo é para o novo texto que você armazenou dentro deste ref. Então const novo texto. Isso vai ser igual ao nosso valor ref das entradas this.text. Podemos pegar o valor com o ponto correntes valor ponto. Se essa constante que precisamos é para o cartão atual do Firebase, vamos esperar suas informações para voltar, que é de nossos cartões ref.doc e, em seguida, podemos passar em nosso cartão ID. Agora temos o cartão do Firebase, podemos chamar o método de atualização. Aqui dentro, montamos nossos objetos. Por enquanto, o único campo que vamos atualizar é o texto. Vou pegar isso de card.text, dizendo é igual a nossa nova constante de textos. Logo após nossas atualizações, podemos então fechar nosso modal chamando o método modal toggle, que está disponível a partir de adereços. Então este.props.toggle modal. Assim que o cartão estiver sendo atualizado e o formulário estiver sendo enviado, fecharemos o modal e retornaremos à visualização do quadro. Pouco antes de continuarmos, certifique-se de que os cartões ref são importados no topo
deste arquivo e também certifique-se de que este é o ID. Vamos dar um Save e passar para o projeto. Selecione qualquer um destes cartões. Pegue o modal e altere o valor dentro das entradas de texto. Agora ele salva as alterações e agora alterna o modal a ser fechado. Se formos para o console, recarregue isso na coleção de cartas. Agora podemos verificar o nosso cartão número um foi alterado para 100. Dentro do nosso projeto, ainda
precisamos atualizar para ver as alterações até adicionarmos nossa funcionalidade em tempo real mais tarde. Tudo isso está indo para agora devido a atualizar o contexto. No próximo vídeo, vamos nos concentrar na atualização dos rótulos.
30. Definindo as etiquetas: Atualizações nas etiquetas dentro de nossos componentes de cartão
envolverão um pouco mais de trabalho do que no último vídeo em que atualizamos o texto. Isso ocorre porque nós estaremos ativando e desativando os rótulos. Quando um rótulo é clicado, primeiro
precisamos verificar se o rótulo precisa ser adicionado ou removido. Para fazer isso, vou adicionar um manipulador de clique em linha dentro do nosso modelo. Quando o modelo de cartão de edição, nesta seção que criamos
no último vídeo onde percorremos todas as etiquetas disponíveis. Também podemos adicionar um manipulador de eventos on-click. Esta vai ser uma função de seta em linha, que vai chamar um método chamado este conjunto de pontos Lebel. Também passando o valor do rótulo atual. Assim que o usuário clica em qualquer um desses rótulos, ele n vai acionar este método set label, que agora podemos criar fora do nosso método aleatório. Então definir Label, que leva no rótulo que é passado para ele, configura a nossa função seta. O primeiro passo aqui dentro é criar uma constante que vai ser chamado de rótulos. Isto irá armazenar como uma matriz todos os rótulos atualmente selecionados, que são armazenados nos estados. Nós vamos espalhar estes com este estado de ponto, ponto selecionado rótulos. O próximo passo é verificar se este
rótulo passado está atualmente armazenado dentro desta matriz. Vamos fazer isso criando uma instrução if -. Podemos verificar se rótulos, pontos inclui, que é um método JavaScript tomado no rótulo atual, abrir o código eraces. Se este passado no rótulo é armazenado dentro de nossa
matriz de rótulos com M12 chamar o método de filtro para removê-lo. Podemos armazenar isso dentro de um novo array chamado novos rótulos. Podemos pegar nosso array atual chamado rótulos, chamado o método de filtro JavaScript. Em seguida, podemos armazenar cada valor dentro aqui em uma variável chamada elementos. Isso é sobre função, é uma corrida para cada um, que vai retornar qualquer elemento que não é igual ao nosso rótulo. Podemos então atualizar o nosso estado com este estado conjunto de pontos, onde vamos obter os rótulos selecionados para ser igual ao nosso novo array. Isto é o que está acontecendo se o rótulo estiver incluído na matriz. Se não for, então vamos adicionar uma seção L, que vai empurrar o novo rótulo para o estado. Então temos os rótulos. Podemos então chamar o método push JavaScript, que vai empurrar o novo rótulo para a nossa matriz. Podemos então atualizar o estado. Mais uma vez, atualizando os rótulos selecionados com o valor de nossos rótulos, array. Então, apenas para recapitular o que estamos fazendo aqui, nós temos os rótulos selecionados armazenados em estados que seguida,
tirariam uma cópia e salvo conhecido para esta constante. Em seguida, verificamos e se o rótulo no qual o usuário clicou é armazenado dentro deste array. Se for, vamos em frente e executar esta seção de código, que será responsável por filtrar o rótulo atual, e instalar no resto dos valores nesta nova matriz de rótulos. Vamos então, finalmente, empurrar isso para o estado assim que o rótulo for removido. Se o rótulo que está sendo clicado não é armazenado dentro dos estados, então executar esta seção l que está logo abaixo. Em vez disso, isso vai empurrar nosso novo rótulo para o nosso array e, em seguida, salvar esse estado. Agora, podemos voltar ao nosso método de cartão de atualização, que está logo acima. Podemos atualizar isso para adicionar nossos rótulos. Logo após o novo texto, podemos criar um rótulo de chamada constante e definir isso igual ao valor armazenado no estado. Este ponto de estado de ponto selecionado rótulos. Também podemos enviar isso para o Firebase dentro do nosso método de atualização. Nós também pode selecionar os pontos de cartão, rótulos campos, e definir isso igual a o. Então salve isso e vamos para o modal. Clique em qualquer um destes
e, em seguida, selecione o rótulo. No momento, não temos esta interestadual. Então é adicionado. Se clicarmos nele novamente, ele irá então remover isso dos estados chamando o método de filtro. Vamos ver se algum destes está aqui no seu Firebase, podemos clicar neles para salvar as alterações. Então carregamos nossas cartas. Este cartão 100 está sendo atualizado com nossas duas cores. Antes de avançarmos, este componente modal também está recebendo adereços. Então podemos adicionar alguma validação de prop. Assim, como sempre, podemos importar os tipos de prop do nosso módulo, que é chamado de tipos de prop. Então este cartão modal está recebendo três adereços diferentes. Se olharmos para o cartão que caiu um sim. Temos o modal aberto, temos alternância modal e também os dados do cartão. Então, de volta ao fundo do modal. Podemos configurar a validação do nosso adereço. Então edite o modelo do cartão. Os tipos de prop, minúsculas b, configuram nossos objetos. O primeiro vai ser aberto modal, que vai ser igual a tipos de adereços. Este é um valor booleano para que possamos selecionar w, isso também é necessário. O segundo é modal de alternância. Este tipo de prop é uma função então nós adicionamos que func. Isso também é necessário. Um terceiro e último são os dados do nosso cartão. O tipo de prop é um objeto que também é necessário uma vez que definimos os tipos de prop. A peça final deste vídeo será exibir dentro de nossa aplicação os rótulos selecionados logo acima do contexto. Para isso, precisamos criar um loop dentro do card.js. Lembre-se dentro deste cartão componentes, se abrirmos as ferramentas de desenvolvedor reagir, se procurarmos o cartão, é
aqui que armazenamos todos os nossos dados atuais dentro deste Dataproc. Aqui dentro temos os rótulos que vamos percorrer para cada cartão. Então, no topo da nossa renderização, logo abaixo da classe de cartão, vamos criar uma nova div, que será uma nova seção que contém todos esses rótulos. O nome da classe será igual a etiquetas de cartão. Abra os apagadores de cartão. Podemos acessar nossos adereços e os rótulos de ponto de dados. Para ser aprovado e podemos usar o método de mapa, que leva no rótulo. Então está acima da função de seta. Em seguida, ele vai retornar um span elementos para cada um. Podemos passar em nossa chave, que pode simplesmente ser o valor de cada rótulo, o estilo. Então temos o valor da cor, podemos definir a cor de fundo para ser também igual ao nosso rótulo. Então, finalmente, podemos pedir um nome de classe para isso, que vai ser rótulo. Bom. Agora, eu vou salvar este arquivo e depois passar para o navegador. Podemos ver instantaneamente que as duas cores que foram adicionados como sendo atualizado nos componentes do cartão. Vamos tentar mover na cor azul e adicionar um verde e salvar as alterações, atualizar. Isso agora é refletido dentro dos componentes da placa. Portanto, todos os recursos de atualização estão agora concluídos. Eu vou vê-lo em seguida, onde vamos melhorar
neste cartão, permitindo várias linhas de texto.
31. Retorno automático de área de texto: Se clicarmos em qualquer um dos nossos cartões e abrirmos o modal de edição, este é atualmente uma entrada de texto, que só nos permitirá adicionar textos em uma única linha. Será melhor se nossos cartões pudessem ter texto de várias linhas, e o cartão se expandiria para caber em cada linha. Para fazer isso eu vou adicionar um pacote chamado react-autosize-textarea, que nos permitirá adicionar estes ao projeto. Isso nos dará uma área de texto, que também redimensionará a altura do cartão, com base no número de linhas de texto. Vamos ao código VS e adicionar isso ao nosso projeto. Lá em baixo. Eu vou fechar o servidor com o Controle C, e então nós podemos executar e NPM I reagir - tamanho automático - área de texto. Então vamos fazer isto...
32. Primeira olhar no: Cada vez que adicionamos atualizações ou removemos qualquer coisa de nossos projetos, precisamos fazer uma atualização para obter os novos dados. Bem, isso é verdade para a maioria das coisas, se formos em frente e adicionar um novo quadro, digamos, cursos para fazer, adicionar a cor e, em seguida, criar um novo quadro, você verá que isso aparecerá sem uma atualização. Eu queria mostrar-lhe duas maneiras diferentes que podemos abordar a atualização deste aplicativo. A primeira é exatamente como temos aqui com as novas placas, cada vez que adicionamos ou removemos uma placa, colocamos as placas em estado. Como já sabemos, um dos benefícios disso é, ele irá atualizar todos os componentes que usaremos como estado. Também será geralmente mais rápido do que esperar no banco de dados para enviar os dados de volta, mas isso também significa que temos duas fontes dos mesmos dados. Temos o conselho armazenado no estado e também no Firebase. Se ocorrer um erro ao atualizar qualquer um deles, isso pode fazer com que nosso aplicativo fique fora de sincronia. Outra abordagem que agora vamos usar nossas listas e cartões é usar a funcionalidade em tempo real do
Firebase para nos dizer quando algo mudou. Em vez de pedirmos os dados, Firebase enviará para nós cada vez que houver uma mudança. Vamos começar com o método get list nos componentes da placa. Vá para o board.js e role para cima para obter listas. Isto está aqui no topo deste arquivo. Obter listas usa este método get para obter o que é chamado um instantâneo de nossos dados no momento atual. Para obter atualizações em tempo real, podemos substituir isso por um método chamado instantâneos. Em instantâneos, ele toca um ouvinte que nos notificará quando uma alteração for feita. Para fazer isso, vou comentar nossos dados existentes. Então, tudo logo acima do nosso bloco de captura, todo o caminho até o método get. Agora podemos começar a substituir isso por nosso próprio método de snapshot. Os mesmos princípios se aplicam. Queremos obter o nosso loop de dados através dele, criar um objeto de lista
e, em seguida, salvá-lo para o estado. Primeiro chamamos instantâneo, que leva em uma função. Apenas no auto por, podemos então chamar instantâneos, passando os instantâneos para cada função. Para cada dados, instantâneos, que é um objeto contendo detalhes sobre consulta, queremos chamar um método chamado doc changes, então snapshots.doc muda. Alterações de Doc retornarão um array contendo as alterações desde nossos últimos instantâneos. Então o que precisamos fazer quando temos uma matriz de dados? Bem, nós precisamos viver através disso para que possamos trabalhar com cada item individual. Logo depois aqui, podemos então chamar para cada, passando uma função de retorno de chamada, então para cada mudança. Mas vou rodar o código dentro destas chaves. Antes de ir mais longe, porém, vamos fazer um log do console e podemos registrar o valor da mudança. Salve este arquivo. Vá até o navegador, abra o console, clique em qualquer uma dessas pastas e vamos adicionar uma nova lista. Digamos que, para fazer a lista um, pressione enter, e teremos um registro do console. Uma coisa que precisamos notar aqui é este tipo de adicionado. Tenha isso em mente, pois precisaremos voltar a isso muito em breve, mas o principal que precisamos aqui é deste documento. Este é um instantâneo dos documentos que contêm todos os dados de que precisamos. Podemos ver que tem a identificação. Se clicarmos sobre isso e podemos pegar isso com doc.id. Algo que não é tão óbvio olhando para este documento é como obtemos o resto de nossos dados de lista. Como podemos de fato obter é chamando um método de dados. Vamos ao registo da consola. Podemos acessar o nosso documento que acabamos de ver no console
e, em seguida, o método de dados, salvar isso. Agora vemos aqui dentro, temos o nosso objeto lista que contém o ID da placa, o criado na data, e também o título. Isso combinado com o ID que procuramos, agora nos dará todas as informações necessárias para construir nossa nova lista. Vamos voltar, podemos remover nosso registro do console. Então, dentro de nossos quatro cada, podemos criar uma constante chamada doc. Isso vai armazenar o valor de change.doc, dando-nos uma referência aos nossos documentos. O próximo passo é criar nossa lista, que vai ser um objeto. Primeiro precisamos pegar o ID, que está disponível no Doc.ID, que é exatamente o que vimos antes, então doc é igual a change.doc.id. Então precisamos pegar o título, que está disponível no doc,
o método de dados que acabamos de olhar. Pegue nossos objetos de lista
e, em seguida, pegue o título fora do nosso objeto de lista. Podemos então definir o estado, então este.setstates passando nos objetos. O estado que queremos atualizar é a lista atual. Como uma matriz, vamos mesclar na lista atual, então this.date.currentlists, em seguida, separados por uma vírgula, podemos adicionar em nossa nova lista. Agora salve este arquivo, e podemos voltar para o nosso projeto no navegador. Podemos tentar adicionar uma nova lista, e isso deve ser adicionado automaticamente. Digamos que para fazer a lista dois, aperte Enter. Agora isso está sendo atualizado sem a necessidade de atualizar o navegador. No entanto, se agora clicarmos em qualquer uma dessas listas e
excluirmos, vemos agora um erro dentro do console e também nossa lista foi adicionada como um terceiro item. A mensagem de erro no console diz que ele encontrou duas crianças com a mesma chave. Isso é devido à maneira como lidamos com as mudanças de
nossos documentos e é isso que veremos no próximo vídeo.
33. Trabalhando com mudanças de documentos: No último vídeo que discutimos foi uma época em que removemos um dos nossos elevadores. Recebemos a mensagem que encontrei para crianças com a mesma chave e depois vimos uma lista extra aparecer dentro do nosso projeto. Isto é por causa da forma como temos as coisas no momento em nosso próprio método instantâneo. Se formos para o quadro dot.js, onde estávamos trabalhando em nosso último vídeo e depois no método get list. Estamos sempre construindo um novo item de lista e, em seguida, definindo o estado, que é esta seção apenas aqui. Mesmo que o item tenha sido removido, ainda
obtemos os dados de alteração da lista e, em seguida, adicioná-lo ao nosso objeto. Em seguida, defina-o como estados, isso resultará no grupo de itens que você vê aqui. Portanto, encontre nele duas crianças com a mesma chave para pixels. Se você se lembra do último vídeo, dissemos para ter em mente quando fizemos o log do console, havia um tipo de adicionado. Podemos usar isso para definir o estado ou para remover o item do estado, dependendo se a lista foi adicionada ou removida e podemos fazer isso com uma instrução if. Vamos voltar ao nosso board.js. Então, logo acima de onde construímos nossos documentos. Podemos adicionar uma instrução if para verificar se o change.type é igual à string de added. Se fosse, podemos abrir e fechar as chaves. Podemos então pegar todos os nossos dados de estados de conjunto, nossa lista e nossos documentos. Em seguida, adicione estes dentro da nossa declaração if. Agora isso só definirá nosso estado se o item tiver sido adicionado. No entanto, se o item foi removido, basta desfazer a nossa declaração if, podemos então adicionar um segundo if declaração, colchet o change.type. Desta vez é igual a remover. Se for, podemos então abrir as chaves e, em seguida, podemos mais uma vez definir o estado, configura nos