Transcrições
1. Introdução: Ei, pessoal, bem-vindos à minha aula. Obter uma estrela, iria reagir. Seca. Portanto, meu nome é Esteban Herrera. Eu tenho vindo a desenvolver aplicações há mais de 10 anos a partir do uso de JavaScript simples para biblioteca alguns frameworks como uma consulta, angular e reagir em particular. Eu não tenho nenhuma reação. E este paradigma para o desenvolvimento de aplicações Web nesta classe, você sabe como criar uma única aplicação de pressão iria reagir e reagir. Roteador. Aplicativos de página única são com aplicativos que não precisam de um loath completo de pastelaria quando seu conteúdo muda, como e-mail ou Twitter. Esta aula é para iniciantes. Você só precisa saber, borda fora Audrey em obras e como criar um reagir até alcova ou coisas como o que são aplicações de página
única? O conceito de um pouco ajudou a configurar reagir em vez dos componentes essenciais desta biblioteca. Como criar páginas a partir de componentes reagir rota aninhada sobre como construir rotas com a Europa, parâmetros. Até então desta classe, você terá o conhecimento para criar aplicativos simples de reação de página única com reagir Router. Isso é eliminado é importante porque, por um lado, aplicativos de um
único local fornecem uma melhor experiência de usuário On Por outro lado, eles são mais fáceis de implantar e manter do que um aplicativo Web tradicional. Então vamos começar
2. Quais são aplicativos de página única?: aplicativos de um único lugar são aplicativos de gráfico que carregam dinamicamente seu conteúdo em uma única página, em vez de redirecionar o dedo do usuário. Outras páginas de uma aplicação de forma tradicional. Quando você clica em um botão ou link, o navegador entra em contato com o servidor e carrega uma página totalmente nova, mesmo que apenas uma pequena parte do ritmo mude, que dá uma sensação de interrupção, especialmente se a nova página levar algum tempo ao amor. Por outro lado, um aplicativo único só recarrega a seção do ritmo que vai mudar. O aplicativo ainda está contatando o servidor quando o usuário solicita algo, mas isso é feito em segundo plano,
usando o Ajax no servidor em vez de retornar. HTML. Koth, representando um ritmo, retorna resposta adjacente. Apenas os dados que a APP precisa. Nem um bom exemplo. Off este tipo off aplicativo. Quando você clica nele para ele, apenas as informações de tweets são obtidas do servidor. O paciente não totalmente re amor. As vantagens são que essas aplicações são mais responsivas. A experiência do usuário é mais fluida. Você pode ter indicadores de carregamento para que os usuários saibam que o aplicativo está fazendo algo, e se você projetá-lo corretamente. O aplicativo pode lidar com a maior parte do processamento no cliente para reduzir o número de solicitações para o servidor, o que poderia evitar erros de rede e melhorar o desempenho. Outra vantagem é que na maioria das vezes essas aplicações são apenas quando um arquivo steamer , bom CSS e vínculo JavaScript faz. Isso facilita a implantação, pois podem ser carregados em qualquer
servidor de conteúdo estético . Claro, o aplicativo precisará de uma volta para obter seus dados, mas isso pode ser uma compilação de aplicativo separada com uma tecnologia completamente diferente que provavelmente
recitará em outro servidor, que melhora a manutenção capacidade. No entanto, existem também algumas desvantagens em uma aplicação única. Na maioria das vezes, todo o necessário coath em recursos sempre árvore no início da carga base inicial. Então, se o dedo do pé ascendente for um tamanho significativo, estes relutantes iniciais serão um motor de busca lento. Optimization S CEO pode ser complicado porque há apenas uma página eo aplicativo é construído dinamicamente, modo que os barcos de pesquisa pode não menina velho seu lado ou executar o crescimento JavaScript de uma
maneira semelhante . Ferramentas analíticas podem não rastrear corretamente exibições de página, já que, bem, aplicativos de pressão
única realmente não contêm páginas. Outra desvantagem é que esses aplicativos podem se tornar complexos facilmente, então eles precisavam ser melhor projetados do que os aplicativos tradicionais. Reboque, evite vazamentos de memória, problemas
de segurança ou outros tipos de problemas. Um deles, em particular, é o histórico do navegador. Como o aplicativo está contido em uma única página, ele não pode confiar nos botões de encaminhamento e retorno dos navegadores. Por esta razão, algo que pode mudar o Ural para empurrar ou substituir seus eventos de história oral no navegador, acordo com a propriedade do aplicativo, ele não gosta de nenhum deles. Por exemplo, observe como o Ural muda. Um tweet é clicado e como uma entrada de histórico é gerada. Este é o trabalho fora do nosso depois A. Em vez permite que o seu aplicativo para navegar entre diferentes componentes mudando o euro
navegador, modificando o histórico do navegador e mantendo o estado U. S em pensar React é um popular para criar aplicativos baseados em um único. No entanto, como o React se concentra apenas na criação de interfaces de usuário, ele não tem uma solução integrada para roteamento. Reactor Router é a biblioteca de roteamento mais popular para reagir. Vamos falar sobre o reator depois da próxima lição
3. React Router: Algumas pessoas pensam que reagem. Roteador faz parte do tribunal fora React Day. Sim, mas na verdade é um código aberto. Caro Partido Lavery desenvolveu um manter por treinamento reagir. Além disso, roteador
REAC é dividido em três pacotes. Web, nativa e central. No entanto, você quase nunca terá que trabalhar com o pacote principal diretamente porque ele apenas fornece os componentes principais de reagir. Roteador. Se você estiver trabalhando com um aplicativo Web, use o React. Rafter Gwen. E se você está construindo um aplicativo móvel, iria reagir. Nativo. Você deve usar reagir em volta de seu nativo. Em qualquer caso, estes pacotes irão instalar reagir Rotor Core s uma dependência neste curso. Todo o foco em reagir Roteador Web. Não há muitas coisas que também se aplicam para reagir. Router Native Reactor out Nosso funciona com um modelo chamado Dynamic Routing onde rota são declarados em toda a aplicação no local em que são usados. Isto é diferente. Esse roteamento estático. Tome este código, por exemplo, onde você tem que declarar as rotas fora de sua aplicação de front aspire de suas tarefas de
inicialização antes que qualquer coisa seja processada desta forma, nós roteamento dinâmico reagir rota ou manipula no lado do cliente do aplicativo. O servidor irá lidar com a rota inicial para servir o aplicativo reagir. Mas depois que reocorrer, Outer vai estar ouvindo rota solicitada pelo usuário para servir os
componentes Riyadh associados com aqueles reator rota fora ou não reconhece uma determinada rota. A solicitação será passada através do servidor, e se ele pode lidar com ele, o servidor responderia com uma página totalmente nova, que é útil para funcionalidades como log e log out. Tudo bem agora, vamos configurar um aplicativo reagir e instalar o roteador React.
4. Configurando o aplicativo React: Tudo bem, vamos criar um aplicativo reagir Eu vou usar Criar Reagir se você não usou esta ferramenta Não se preocupe, contanto que você não tem dia Sim, e mpm instalado Você não precisa deste dólar confundir ou qualquer outra coisa. Eu vou assumir que você já tem essas ferramentas instaladas. Só tenha certeza que não explodiu em seis. Você pode correr para o norte. Isso explodiu? Não sei qual pessoa você instalou e você também precisa da versão mais recente fora MPM porque às vezes as coisas não gargarejam Você não tem uma explosão recente em você pode executar MPM faz essa pessoa saber bom estourando você instalou Ou se você apenas vai fazer certeza de ter o mais recente que você pode executar mpm Isdell npm deskee em mpm será atualizado próximo Executar o seguinte comando mpm x criar que Reagir que até minha mesa reagir que rotor que up. MPM X é uma ferramenta que permite executar, não pacotes mesmo que os pacotes não sejam instalados localmente. Tudo bem. Minha reação escreveu um rap é o nome do up desta forma e diretório com este nome será criado Grande Agora eu vou ver o dentro destes diretório. E uma vez que esta é uma ótima aplicação, Eu ainda vou reagir bastante burro com MP e Sr. Isso é o rotor seguro reagir burro. Neste ponto, você pode executar MPM start em uma janela do navegador será aberto no host local para 3000. Você verá algo assim. Ok, eu vou subir no projeto em um editor. Eu estou usando colchetes, mas você pode usar qualquer editor que você um no público arquivo é último índice dot html após o inicialização C. arquivo de
inicialização C.
S s. Isso vai me ajudar a um estilo, o aplicativo. Então eu vou em frente e substituir o conteúdo fora do aplicativo O CSS com meus próprios blocos honestos custo sobre o conteúdo fora da prisão? Sim também. Quando você salva um arquivo, as alterações são recarregadas automaticamente. Você não precisa de uma coisa sobre Rex aguda MPM Mr. se preocupe com os estilos. Um instrutor do aplicativo neste ponto, você pode instalar seu aplicativo em qualquer pessoa que você quiser e você pode encontrar todo o
crescimento da fonte fora do projeto neste repositório get off. O link está na descrição da classe. Para cada lição há um ramo vai, você pode conferir Dickov fora das revisões de aplicativos nessa lição. Agora estamos prontos para usar roteador reagir. Mas antes disso, deixe-me dizer-lhe que reagir roteador é baseado em três componentes. Em vez disso, o rotor que mantém o “você”. Quero dizer, pense com o link feminino, um link de soneca que renderiza um link de navegação na rota que torna um
componente U I dependendo da garota. Na próxima lição, você sabe como integrar rotas ao aplicativo com o componente roteador.
5. O componente do Router: Na maioria das vezes, eu não tenho que usar o componente escritor diretamente. Você usará um fora de suas implementações em um aplicativo Web. Você tem duas opções. Roteador do Browser, que usa o histórico de cinco HTML, B I e Cash Router, que usa um caractere hash para definir a parte âncora fora de um euro e pode ser acessado com um hash ponto local da janela
corretamente. Se você estiver indo para segmentar navegadores mais antigos que não suportam o HTML cinco, sua história um p A. Normalmente usar tem em vez que cria euros com estes primeiros. Caso contrário, você pode usar o roteador do navegador, que cria euros sem o hash. Vou usar o rotor do navegador nesta aplicação de demonstração, então em feridas, é o último índice do dia. Sim, vou importá-lo do React Rotterdam e usá-lo para pegar o componente APP. É importante mencionar que nosso componente externo só pode ter um elemento filho. Por exemplo, se eu adicionar outro elemento ao salvar o arquivo, o aplicativo lançará a foto em erro. Mensagem são outros podem ter apenas um elemento filho. Certo, vou deletar esse elemento extra. Como você pode ver, este componente não tem nenhum efeito sobre o U. I. O principal Golfo de um roteador é criar um objeto histórico para manter o controle do Ural, o local quando o local altera o componente filho fora do rotor. Neste caso, até Israel Orender. Na maioria das vezes, você usa um componente de link para alterar o local. Vamos falar sobre links na próxima lição.
6. O Link e componentes de NavLink: lá fora fornece o link componentes de link suficientes para renderizar o comprimento que você pode usar para navegar em seu aplicativo. O componente de link, exceto que atribuem a que leva s string que representa o local para navegar. E você também pode perguntar os parâmetros da Europa. Mas você preferiu que você também pode passar um objeto com as propriedades, mas nomeie o caminho para vincular a Sorry. Uma cadeia de caracteres que representa os parâmetros de consulta tem um hash a inicialização no euro no estado no objeto que representa o estado, o persistir para o local. Outro atributo importante é substituído quando ele é definido como true, o local fora do componente link substituirá a entrada atual no histórico do navegador em vez de adicionar um novo. Por outro lado, naff Link é uma versão especial fora do componente membro que em atributos de Sonny, que são úteis para menus de navegação. Por exemplo, atributo de nome de classe ativa
Duerson que tira o nome de uma classe CSS que será adicionado às classes CSS quando o elemento estiver ativo. Em outras guerras, quando a localização fora do link muito é o Ural atual, o nome de vidro do telefone está ativo ou você pode usar o ativista eu vou atribuir para passar um estilo de ainda para o mesmo propósito. Dois outros atributos importantes são exatos em uma situação rigorosa. Exact está definido como true. A classe ativa ou estilo só será aplicável se a localização é muito exatamente, e um distrito é definido como verdadeiro. Os três Leanness cortam um local, mas o nome será levado em consideração ao determinar se o local corresponde. O Ural atual merece os atributos mais importantes fora do link e nenhum link, mas você pode saber mais sobre eles no roteador Documentation off React. Tudo bem agora, vamos criar uma navegação. Muitos na fonte cortam desonestos. Sim, eu vou em frente e substituir esses elementos âncora por um componente de link. Terei mais duas ligações. 14 em cerca de base e outro para uma usurpação. Além disso, não
vamos esquecer de importante o componente de link na parte superior do arquivo. Agora, no navegador, você verá algo assim. Se você inspecionar o código HTML, verá que o componente lean gera apenas um elemento âncora. No entanto, esses estão em elementos âncora regulares. Eles mudaram o Ural sem refrescar a base. Se você tem um elemento regular para o Goethe. O paciente será totalmente Reno. Isso então lembre-se que o componente lean não representa um elemento âncora regular agora. Não é que nada acontece quando um link é clicado na próxima lição. Junor Como executar o seu algo com o componente de rota.
7. O componente de rota: o componente fora da estrada é renderizar algo quando a localização muito apenas um caminho que você pode definir. Gladys renderizar usando uma das seguintes propriedades fora do componente estrada com a propriedade
componente. Ele renderiza um componente indo. A localização corresponde. O ponto de estrada faria você passar uma função que retorna o elemento ou componente a ser renderizado crianças irritadas. Você também passa uma função que retorna os elementos ou componente a ser renderizado. A diferença é que o elemento de retorno é renderizado sem mãe se o caminho é correspondência ou não . Cada um é útil em diferentes situações, mas você só pode usar uma dessas propriedades em uma determinada rota. Componente nesta lição são para que você tenha que usar o componente corretamente. Além disso, usando a propriedade PATH, você especifica qualquer pessoa que você é um ruim dessa maneira. Um novo componente é criado usando reagir que criar elemento. Isso significa que em cada renderização, ele cria um novo componente. Em vez de apenas atualizar um já existente, o caminho pode ser definido pelos rebeldes, e pode ser uma expressão regular. Rotor REAC usa o caminho da biblioteca para rejeitar o estouro 1.7. Para perseguir essas expressões, há até uma ferramenta que permite que você insira uma rota, e ela mostrará a expressão regular para essa rota, e você também pode inserir um caminho para ver se ele corresponde à rota. É muito útil de volta ao componente de estrada. Ele também leva um exato corretamente que passou pelo componente. Goldberg rendição somente se os jogos ruins exatamente com um separado estrita que tem uma loucura última só vai coincidir com um local com um arrastando este último. Se a propriedade for verdadeira e, finalmente, quando o sensível corretamente for verdadeiro, ele fará a correspondência sensível a maiúsculas e minúsculas. Certo, agora, em nossa aplicação, o euro muda quando um link é clicado. Mas não a U.I. Vamos consertar isso. Vou criar um diretório de componentes e dentro dele três componentes, um para cada rota. Primeiro o componente de casa para a rota principal. Neste ponto, cada componente mostrará apenas uma mensagem. Então você tem sede para os usuários de rota barra Eu finalmente estou prestes para a estrada. Ele corta sobre agora dedo do pé. Especifique o Ural que corresponde a cada componente na origem barra o dia. Sim, eu usei alguns componentes de estrada dentro do elemento dif com o componente principal da classe CSS. Estes componentes rotas podem ser colocados em qualquer lugar dentro do rotor Broza roteador neste caso e o componente associado será renderizado nesse lugar. Agora a única coisa que eu tenho que fazer é importar todos esses componentes e seu componente de rota
também . E no navegador podemos ver o U I é atualizado. Ele mostra o componente inicial. No entanto, olha o que acontece quando eu vou para o outro caminho. Por culpa, as estradas são inclusivas. Mais de um componente de seca pode corresponder ao Caminho Ural e renderizar ao mesmo tempo. Mas não se preocupe, vamos consertar isso na próxima lição.
8. O componente de interruptor: nesta lição, vou mostrar-lhe como usar o componente switch para renderizar apenas uma rota do grupo de rotas. O componente switch funciona como um switch regular, uma instrução em JavaScript na aplicação de demonstração ordem. Mas os usuários e sobre Pat continha este último personagem, então eles também são muito e renderizados pela rota de casa. Desta forma, podemos exibir diferentes componentes apenas declarando que eles pertencem ao mesmo caminho. Mas, neste caso, não é
isso que queremos. Então podemos usar a propriedade exata na estrada para o componente de casa para renderizá-lo somente se o Ural muito é o caminho. Exatamente. Agora, no aplicativo, podemos ver que tudo funciona bem. As rotas usuários e sobre não são mais uma correspondência para o caminho do componente home. Ambos apenas um componente será exibido no momento, então também podemos usar um componente switch para renderizar apenas a primeira rota que corresponde ao local. Mesmo se você duplicar a rota sobre, deixe-me importar este componente agora se eu visitar a página sobre, seus componentes serão renderizados apenas uns. No entanto, nada é que simplesmente não precisava especificar a propriedade exata para o homeopata ou seus usuários
esposa e sobre também irá coincidir com ele. E o componente con será sempre renderizado porque esta é a primeira rota que é definida na correspondência, deixe-me mostrar-lhe. A alternativa, claro, é definir o camarada como o último. Aí está você. No entanto, eu deixar a rota de casa com o exceto corretamente. Agora, você também pode especificar na quarta rodada para renderizar algo quando nenhum caminho é muito. Este comportamento é implementado com um componente pronto. Você só precisa passar o euro para pronto recto com a propriedade dois. Na verdade, um componente switch só aceita como Filhos ou elementos eretos vermelhos escritos Elementos estão muito usando sua propriedade caminho enquanto elementos reiterar estão muito usando sua propriedade
de. Agora, se eu for para minha casa, o aplicativo vai me redirecionar para a casa. Um componente certo que não tem caminho, propriedade ou componente já lido que não tem propriedade de sempre corresponderá ao
local atual . Essa história, alguns bastante este vermelho ereto no final do componente switch pode pegar qualquer caminho que
não foi correspondido anteriormente. Vamos apenas dizer adeus antes que você tenha isso. Finalmente, algo que você precisa estar ciente é que o componente retórico foi navegar para um novo local, substituindo o desejo de cura na pilha do histórico, assim como uma ereta vermelha do lado do servidor faz.
9. Propriedades de renderização de rota: quando você estava sob algo com o componente de rota. Três objetos são passados como parâmetros muito, que é um objeto que contém informações sobre como as rotas, mas muito. A localização do euro, que é um objeto imutável que representa foram A APP é agora tem propriedades para obter a peça. O Coro String e a Casa do Euro e História, Um objeto para gerenciar o histórico de decisão no navegador com métodos para voltar e avançar na pilha de história. Essas propriedades são sempre passadas independentemente do método de renderização usado em um componente, você pode obtê-las a partir do objeto de propriedades. O objeto muito será aquele que você estará usando com mais frequência, que você
possa destruir o objeto de propriedades para obter apenas esse objeto. Por exemplo, é
assim que você fará isso com uma função de renderização. By the way, há sob função é útil quando você deseja passar propriedades personalizadas para o componente. Você vai renderizar como a propriedade color neste exemplo, e é assim que você faz isso usando Filhos. Lembre-se que a diferença entre renderizar em Filhos é que o mais tarde sempre renderiza o elemento retornado pela função desta forma, você pode usar a propriedade much para saber se o caminho realmente corresponde ao Ural atual. Se não acontecer, o objeto muito estará vazio. Ok, você pode ver essas propriedades em ação sem modificar o aplicativo. Usando a extensão React Developer Tools. Por exemplo, no Crumb, abrirei o banco do desenvolvedor e procurarei o final da reação. Vou expandir todas estas notas e procurar o componente de casa. Está bem aqui. Se eu selecionei, você verá as três propriedades listadas aqui. Aqui está o objeto histórico com alguns métodos para controlar o navegador diz seu histórico. Não é que o histórico contém um objeto de localização, que é basicamente o mesmo que o outro objeto de localização que o componente está recebendo como parâmetro. A única diferença é que o objeto de localização no histórico é mutável,
portanto, não é recomendado usar algo. Temos o objeto de correspondência. Se eu navegar para sua página sobre, você pode ver como seu campo com dados diferentes tudo bem na próxima lição vai usar o objeto
muito para criar uma rota aninhada
10. Rotas aninhadas: Aqui está um exemplo fora de um Nester Seca Usuários é últimos detalhes. Na maioria das vezes, eles são duas partes, os principais usuários do caminho, neste caso em um caminho suave. Detalhes. Neste caso, geralmente a parte macia é definida como uma parte suportável. Então, neste caso, muitas vezes eu d. Ele pode levar valores como um ou dois. Na verdade, vamos implementar uma rota aninhada para ou eles um projeto como este. E para isso, vamos usar a grande propriedade. Lembre-se disso. É um objeto que contém as seguintes propriedades Barham e objeto com valor chave pares partes do Ural correspondente ao caminho por rebeldes, sua exata em barras com o valor verdadeiro se eles são muito o padrão de banho usado no e você é uma string que representa a parte mágica da URL. Tudo bem,
então, para a seção de usuários, queremos exibir uma lista de usuários, e cada item da lista será um link como se fosse o último usuário. São os últimos dois usuários, e assim por diante que mostramos os detalhes desse usuário, então vamos começar modificando o componente usuários para gerar links para alguns usuários de amostra. Para manter as coisas simples, eu só estou indo para a função final que bom retornar uma lista. Outra opção será chamar um B I para tirar a lista. Os usuários na empresa fez o método de atualização e uma loja menos no estado do componente . Então precisamos de mudanças. Pode ser processado. Mas eu só estou indo para encontrar uma matriz. E com um loop de quatro, eu sinto seu anel com objetos que apenas contêm uma propriedade
ID que representa a idéia dos usuários em retorno. Pelo menos agora eu vou substituir o corpo do componente e chamado a função. Então usei o método matemático. Lembre-se que este método cria uma nova matriz com os resultados de uma função chamada em cada elemento no raio. Então esta função vai tomar um perímetro, esse usuário de álcool que representa o objeto com a propriedade idéia que eu sou para cada usuário. Este componente irá renderizar um elemento H dois. Lembre-se que renderizaria em um arrendado elementos. Reagir requer uma propriedade chave com um valor exclusivo em cada elemento. Então eu vou ter um componente asa para criar um link para mostrar os detalhes desse usuário. Finalmente, no link de importação em. Se eu executar o aplicativo, veremos os links são renderizados corretamente. Além disso, observe como o Ural muda. Eu clico em Sun Off This links. Agora podemos fazer algo para melhorar isso. Em vez de codificar duro os usuários parte fora do caminho que podemos usá-los muito do
componente ainda recebe. Se eu abri o desenvolvedor reagir espinal loja, Eu olhar para o componente de usuário podemos ver A propriedade euro tem o valor, seus últimos usuários. Então, podemos o instrutor corresponder a partir do objeto propriedades que o componente recebe e usar muito dot yura em vez do valor hard core é o último, os usuários este menos eo início é importante porque caso contrário, estaremos criando aninhado rotas sob o ponto do usuário. Ótimo. Os links ainda estão funcionando. A próxima lição irá adicionar a funcionalidade para mostrar os detalhes de cada usuário
11. Como usar parâmetros de rota: Certo, vamos usar seus parâmetros para mostrar os detalhes de cada usuário. Após a lista off links de usuário, eu vou declarar em torno de componente com um parâmetro para capturar o usuário i d. Essas idéias são números para que possamos impor a regra com uma expressão regular. Lembre-se que os morcegos aceitam qualquer expressão que a biblioteca, mas para Rogic pode lidar. Estou colocando o componente da haste aqui porque eu quero que o componente do usuário apareça após o mínimo. Se você quiser que este componente substitua a lista de usuários, você terá que colocar o mínimo no app dot sim, ao lado do outro componente de rota. De qualquer forma, se houver uma correspondência, o componente de usuário será renderizado. Então eu vou importar o usuário e rotear componentes e criar um novo arquivo. Você disse que é homossexual? Sim, para este exemplo, eu vou apenas mantê-lo simples em exibição. A idéia do usuário, mas não é como o I D é extraído do muito objeto do Barão usando o mesmo nome que é definido no banho. Se você abrir o navegador, você deve ver algo semelhante a isso. Agora vamos ter outras quatro mensagens algo como Selecione um usuário no mínimo. Mas em vez de criar um componente para demisões, usarei a propriedade de renderização fora do componente de estrada. Vamos ver, aí está. Mesmo que um caminho incorporado seja inserido, a mensagem ainda é exibida. Também podemos subir essas rotas em um componente de estiramento para garantir que apenas um dos dois seja correspondido. Deixe-me importar o componente switch e testar sua aplicação. Ótima. Está funcionando e terminamos. Mas há uma última coisa que quero mencionar. Você tem que ter cuidado com a forma como declara rota. Por exemplo, se você declarar a rota que renderiza a patroa primeiro, o componente de usuário nunca será renderizado porque o caminho como este
último usuário bem, im muito. O caminho é os últimos usuários. Então, se você declarar a rota nesta ordem que exatamente para evitar esse comportamento para que possamos dizer que a lição aqui é sempre declarada as rotas mais específicas primeiro. Agora vamos crescer este copo
12. Considerações finais: Tudo bem. Até agora, você deve ter uma boa compreensão sobre o que são aplicativos de pasta única. Como criar um com reagir e reagir. A viga. Você aprendeu que uma rota ou mantém sua aplicação você y eo Ural você pensa e reage. Roteador é a biblioteca de rotor mais popular para reagir. Além disso, você aprendeu a configurar o roteador React, seu componente mais importante. Como as rotas funcionam sobre como construir Ninho Dinâmico, a seca com parâmetros de peças, pois ainda há muito mais para desenterrar. A documentação oficial abrange alguns exemplos interativos básicos, bem como mais avançados . Agora, no projeto da turma, você vai juntar tudo isso. Você terá que criar um aplicativo único com pelo menos os seguintes recursos. Home page, outro paciente com algum texto e não da página em uma página de detalhes mestre Com Nestor Seca, os valores podem ser Marco, por exemplo, um catálogo de produtos ou uma lista de mensagens. O aplicativo pode ser um dedo inchado, coath, penn ou casaco sandbox para que todos os outros possam verificá-lo. Lembre-se que você pode encontrar o crescimento completo da fonte fora do projeto Dem A em Get the Link está na descrição da classe. E se você tiver dúvidas ou problemas, deixe um comentário e eu tentarei responder o mais rápido possível. Tudo bem, espero que tenha gostado da aula. Agradeço se você tem tempo para deixar um comentário e se você gosta da aula, siga-me para ser notificado. Quando eu liberar mais aulas, te vejo na próxima vez e obrigado por assistir.
Esteban Herrera, How can I help you?
