React.js: fluxo de dados dentro da aplicação

Olá, meu nome é Tony e nessas aulas falaremos sobre fluxo de dados dentro de uma estrutura de pastas de aplicativo e ganchos personalizados com API de contexto. Nesta lição falaremos sobre vários componentes, roteamento e navegação. Vamos dar uma olhada no aplicativo. Você pode adicionar tarefas aqui, uma por uma. Marque-os e exclua-os. E há um balcão embaixo que conta para nós. Até agora tudo foi servido. Nós por um único componente e tal. O componente costumava ser hospedado no aplicativo. Então agora nosso aplicativo parece um pouco diferente. Vemos isso agora. Isso está disponível para nós no Slashnda e se formos aqui, obtenha esta pequena página mínima apenas para ilustrar o ponto isso diz bem-vindo ao meu aplicativo. Então, como estamos fazendo isso somos nós. Estão usando um componente de reação fornecido para. Nós por reagir roteador Dom chamado navegador roteador ou roteador. Esta é a nomenclatura para isso. O roteador é o componente principal. As rotas estão imediatamente abaixo. Agora aqui mais uma vez estamos exportando roteadores de navegadores. Acho que poderíamos fazer isso para eliminar a confusão. Isso efetivamente nos dá a mesma coisa. Portanto, o roteador do navegador é o componente principal. As rotas estão imediatamente abaixo e rotas individuais. Aqui está um único componente de rota. Então, o que está acontecendo dentro deste único componente que aponta cada indivíduo. Caminho para algum tipo de componente. Isso serve esta rota. Então o caminho é o primeiro. Então, para a agenda do Slash, quando esse caminho. É exato o elemento que estamos usando. A saída para esta rota é esta. Elemento da agenda aqui. Vamos dar uma olhada nisso. É basicamente o que tínhamos no. Componente do aplicativo antes de removê-lo. Para ser seu próprio componente. Eles vêm como adereços. Então, estamos passando-os do componente app. E o resto é como. Costumava ser antes. Portanto, não há alterações nesta parte. Estamos fazendo a mesma coisa aqui. Só que não estamos passando nenhum adereço. Aqui está tudo porque este é um componente muito simples. Basicamente, diz bem-vindo ao meu aplicativo no meio do tela. Mas também temos capacidade para isso. Faça algo bem legal aqui. Então, até agora usamos caminhos exatos, mas também temos o. Capacidade de usar curingas. Então, por exemplo, se quiséssemos todos. Solicite às Tarefas que qualquer coisa seja redirecionada para a Agenda, isto é como faríamos isso. Usaríamos o componente de rota, os caminhos seriam tarefas Estrela. Então Star é obviamente um curinga. Para qualquer coisa que siga um caminho de tarefas Slash. Ou melhor, parte do caminho. E vamos usar o Navigate, que é um recurso especial elemento que nós. Também estão transportando do roteador react Dom e vamos usar este Navegar para navegar até a agenda do Slash. Vamos ver como isso funciona. Então, se fôssemos para. E literalmente qualquer coisa aqui, seremos redirecionados para a agenda. Agora, é claro, numa organização profissional, isso vai ficar muito mais ampliado. Mas basicamente o que você vai fazer. Veja, vai ser algum tipo. De uma variação do que acabamos de ver, mas mais uma vez ampliado. Para uma escala profissional em um ambiente do mundo real. Em nossa próxima lição, nós iremos. Para dar uma olhada na estrutura adequada de pastas do aplicativo. Obrigado por assistir. Tchau.