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

Name: React.js: fluxo de dados dentro da aplicação
Author: Tony Davydets

Este curso aborda conceitos essenciais relacionados ao roteamento e à navegação num aplicativo da Web React. Você aprenderá como lidar com diferentes rotas e…

Preview the first lesson free — get full access to all 1 lessons.

Solicitar uma demonstração Entrar

Curso: sob demanda

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.

Fornecedor : Tony Davydets 1 lição · 13m em Árabe, Alemão, Inglês, Espanhol, Francês, Português, Chinese

Descrição do curso

Este curso aborda conceitos essenciais relacionados ao roteamento e à navegação num aplicativo da Web React. Você aprenderá como lidar com diferentes rotas e criar links para navegar entre as páginas. Além disso, aprenderá sobre a API Context e como criar hooks personalizados.

O roteamento e a navegação são partes essenciais de qualquer aplicativo Web e o React fornece ferramentas para tornar esse processo fácil e intuitivo. Você aprenderá a criar um sistema de roteamento para seu aplicativo usando o React Router. Aprenderá como definir rotas diferentes para páginas diferentes, como usar componentes de link para navegar entre páginas e como passar parâmetros através de URLs.

A passagem de dados entre componentes pode tornar-se tediosa à medida que seu aplicativo cresce, especialmente se for necessário passar dados por várias camadas de componentes. Neste módulo, você aprenderá a criar e usar a API Context para compartilhar dados facilmente em seu aplicativo. Também aprenderá a criar ganchos personalizados com a API de contexto, o que pode simplificar o processo de transmissão de dados em todo o aplicativo.

Por fim, será apresentada uma estrutura de pastas sugerida para organizar seu aplicativo React. Aprenderá como organizar seus componentes, estilos e utilitários em diretórios separados, o que pode tornar seu código mais gerenciável e fácil de navegar.

O Que Você Vai Aprender

Navegar em aplicações web React usando React Router
Definir diferentes rotas para diferentes páginas e criar links para navegar entre elas
Passar parâmetros através de URLs para mover dados entre páginas
Usar a Context API para compartilhar dados em toda sua aplicação
Criar hooks personalizados com a Context API para simplificar a passagem de dados
Organizar componentes, estilos e utilitários em uma estrutura de pasta sugerida

Principais Conclusões

Roteamento e navegação são partes essenciais de qualquer aplicação web, e React fornece ferramentas para tornar o processo fácil e intuitivo.
React Router permite que você construa um sistema de roteamento que define rotas, usa componentes de link para navegação e passa parâmetros através de URLs.
A Context API compartilha dados em uma aplicação sem passá-los através de múltiplas camadas de componentes.
Hooks personalizados construídos com a Context API simplificam a passagem de dados em toda a aplicação.
Uma estrutura de pasta sugerida que separa componentes, estilos e utilitários torna o código mais gerenciável e fácil de navegar.

Perguntas Frequentes

O que este curso aborda?

Aborda roteamento e navegação em uma aplicação web React, incluindo manipulação de rotas e criação de links com React Router, uso da Context API para compartilhar dados, criação de hooks personalizados com a Context API e uma estrutura de pasta sugerida para organizar sua aplicação.

O que vou aprender sobre gerenciamento de fluxo de dados em React?

Você aprenderá como passar dados entre componentes usando a Context API para compartilhar dados em sua aplicação facilmente, e como criar hooks personalizados com a Context API para simplificar a passagem de dados em toda a aplicação.

Como a navegação é tratada neste curso?

Você aprenderá a criar um sistema de roteamento usando React Router, definir diferentes rotas para diferentes páginas, usar componentes de link para navegar entre páginas e passar parâmetros através de URLs.

Quais aulas estão incluídas neste curso?

O curso inclui três aulas: Múltiplos Componentes, Roteamento e Navegação; Estrutura de Pasta da Aplicação; e Passando Dados e Hooks Personalizados Com Context API.

Quais habilidades estão associadas a este curso?

As habilidades associadas incluem Create React App, Flux (React.js), React JSX, React VR, React.js (biblioteca JavaScript) e WebMethods Flow.