Dominando o roteamento do React com o React Router para navegação perfeita com seus aplicativos da web

1. Introdução ao curso: Oi, aí. Bem-vindo a este curso sobre dominar o passeio com o react, e eu serei seu instrutor durante Estou muito empolgado em guiá-lo nessa jornada maravilhosa do roteador react, que é a boa solução para lidar com a navegação em aplicativos modernos de reação. Atualmente, o roteamento é uma parte fundamental de qualquer aplicativo da web, sem permitir que os usuários naveguem para diferentes páginas da web Como se fosse improvável que você pudesse criar aplicativos de nível de produção no mundo real. E é aí que o roteamento entra em cena. E é também por isso que você deve aprender sobre roteamento hoje Agora, sem um sistema de roteamento sólido, até mesmo os melhores aplicativos de design podem parecer desorganizados e difíceis de usar E é exatamente isso que vamos dominar neste curso em particular. Então, falando sobre esse curso, vamos abordar uma introdução. Vamos fazer uma introdução ao roteamento de reação o que é e como o roteador de reação funciona Aprenderemos e entenderemos como podemos configurar rotas em nosso aplicativo react. Também aprenderemos como você pode adicionar navegação, como criar rotas aninhadas e também aprenderemos como criar uma página 404, e também aprenderemos como criar que é um tipo de mensagem de página não encontrada para o usuário Então é isso que vamos fazer. E sim, com este curso específico, você terá total confiança na criação de aplicativos de várias páginas com react, adicionando a funcionalidade de roteamento, e poderá garantir uma navegação suave, proporcionando aos usuários uma experiência de navegação perfeita Agora, para quem é esse curso? Portanto, este curso é perfeito para desenvolvedores de React de todos os níveis, quer você esteja apenas começando com o React ou seja um desenvolvedor avançado de React. Este curso é perfeito para você porque, neste curso em particular, tornei coisas grandes o suficiente e amigáveis. Então eu explico tudo, então vai ser realmente uma caminhada fácil para você. E se você é um desenvolvedor de nível avançado, este curso ainda é o melhor porque, você sabe, é uma boa atualização dos conceitos relacionados ao roteamento e você pode aprender algo novo nesse curso específico Então é isso que é. E da forma como este curso foi elaborado, é totalmente prático. Eu me certifico de codificar na maioria das vezes e mostrar exemplos diferentes, em vez de usar apresentações em PowerPoint Então essa é a USP desse curso. Agora, você está pronto para levar suas habilidades de reação para o próximo nível? Vamos mergulhar e começar a criar aplicativos dinâmicos amigáveis à navegação juntos? 2. Começando a configurar o React Project: Oi, aí. Então, agora é hora de começarmos a criar nosso aplicativo react, e vamos fazer isso com a ajuda da linha de comando. Então, a primeira coisa que vou fazer é acessar ou navegar pela linha de comando até a pasta do projeto. Agora, o que quero dizer com pasta de projeto é que é uma pasta de minha escolha onde eu desejo ter meus projetos de reação organizados, ok? Então, o que você pode fazer é acessar o Finder. exemplo, se você estiver no Mac, pode acessar o Finder ou, se estiver no Windows como eu, pode acessar o Explorer, certo? E criar uma pasta no local de sua escolha, você pode chamar a pasta, como quiser Eu diria que é reagir. E então, na linha de comando, você pode simplesmente navegar até o local em que criou a pasta. Então, eu criei essa pasta react aqui neste local específico, e CD é o comando, que é alterar o diretório, e está me ajudando a navegar ou acessar essa pasta específica ou estar nessa pasta a partir da linha de comando. Então, agora que estou nessa pasta específica, vou limpar todo o resto. Tudo bem. Agora, nesta pasta específica, vou começar a criar meu aplicativo react. E para isso, vou usar o NPX, ok? Opa. Então, eu já criei alguns aplicativos de reação antes. Então você pode ver essa sugestão aqui, ok, mas não há nada que eu possa fazer sobre a sugestão. Está bem? Mas ignore essa sugestão por enquanto, porque o que esse terminal uh em particular faz é que, o que quer que ele veja em seu histórico, ele continua sugerindo você, o que é bom. Mostrando todo o comando, tudo bem. Então, NPX, vou usar o NPX, ok? Agora, a sintaxe do NPX está correta. É usado para executar os pacotes de nós ou para executar os pacotes. E então vamos usar o aplicativo Create react. Tudo bem. Agora, o que é o aplicativo Create React. O aplicativo Create React é uma ferramenta que ajuda você a criar todo o aplicativo react. Agora, por que estamos fazendo uso disso? Como o projeto react precisa ser organizado de uma certa maneira, ele precisa ter a pasta SRC, alguns arquivos e tudo isso reunido e eles permitem que você ou seu aplicativo funcione perfeitamente, certo? Portanto, você também pode criar esses arquivos manualmente, mas essa é uma ferramenta que permite criar , criar ou configurar a estrutura do aplicativo da maneira correta. Está bem? E depois disso, vou apenas mencionar o nome do meu aplicativo, que eu possa chamá-lo de aplicativo MyRact, algo assim Está bem? E o que eu posso fazer é simplesmente pressionar Enter. No momento em que eu pressiono Enter, o que isso fará é criar uma pasta nesse local específico. Então, nesse local específico, ele criará essa pasta. Por que está criando uma pasta nesse local? Porque eu naveguei até essa pasta a partir do terminal, e esse será o nome da pasta sob a qual todos os arquivos do meu projeto react existirão Está bem? Assim, você pode pressionar Enter e deverá ver algum tipo de processamento acontecendo. Assim, você pode ver a criação de um novo aplicativo de reação nesse local específico. Ele está instalando alguns pacotes e isso pode levar alguns minutos. Então, ao instalar, ele também informa o que está instalando. Está instalando react, react Dom, react scripts e tudo, tudo o que precisa. Então, vamos esperar um pouco até que todo esse processo seja concluído e vejamos uma confirmação. Então, recebi a confirmação e também recebi uma pequena mensagem. OK. Então, quando comecei a gravar este vídeo, há uma nova versão secundária, que diz sobre o NPM, que está disponível, e está me perguntando se eu posso atualizar Ok, então eu vou atualizar mais tarde. Você pode não ver isso, ok, mas sim, vou ignorar isso por enquanto. É só uma notificação de upgrade. Você pode ver a confirmação aqui, happy hacking. Tudo bem. E se você rolar até aqui, verá todo o processo do que aconteceu. Então, executamos esse comando aqui. Opa. Deixe-me rolar para cima. Então, executamos esse comando aqui. Está bem? Se você vier aqui, você pode ver que ele adicionou tantos pacotes. Demorou 36 segundos. Se você vier aqui, ok, foi dito que o sucesso criou esse aplicativo específico neste local e dentro desse diretório. Então você precisa navegar até esse diretório, e dentro dele, você pode executar todos esses comandos aqui. Está bem? Agora, depois de navegar, ele fornece comandos prontos, como o NPM start Ele começará no servidor de desenvolvimento. Portanto, o aplicativo react que você criou vem com um servidor embutido incorporado Você pode executar este comando para agrupar o aplicativo e em arquivos estáticos, basicamente para implantação em produção. Isso iniciará o executor de teste, caso você queira executar casos de teste, NPM run Ok, isso é algo que você pode executar. Então, a sugestão é que você pode começar executando isso aqui. Vou copiar isso. Está bem? Vou colar aqui. Vou até este diretório, ok, e então ele lhe dirá o início do NPM Agora, esse é um comando usando o qual você pode iniciar um servidor de desenvolvimento em sua máquina local. Então eu posso executar esse comando também, ok? E você podia ver o aplicativo instalado e funcionando. Então esse é o aplicativo, ok? Você pode ver o navegador aberto automaticamente, e você pode ver que este é o aplicativo que está funcionando. Agora, este é um servidor que está mostrando seu conteúdo ou se está executando seu aplicativo react no navegador Agora, qualquer alteração que você fizer nos arquivos, você verá recarregamentos ao vivo acontecendo aqui Tudo bem? Agora, você pode ver a mensagem aqui, como se precisasse editar esse arquivo específico e salvá-lo para recarregar Está bem? Portanto, essa interface que vem desse arquivo em particular, é o que diz. E se você clicar aqui, esse é o link para o site oficial do react. É a isso que está vinculado. Está bem? Assim, você pode acessar esse site e conferir ou ler algumas coisas também. Tudo bem. Mas algumas coisas que eu gostaria de mencionar aqui são que, depois de iniciar o servidor de desenvolvimento, você pode pará-lo pressionando Control e C no Windows ou Command e C no Mac. Está bem? Estou no Windows, então pressiono Control C, e você pode ver que ele encerrou esse trabalho específico E aqui está, se você tentar atualizar, isso não vai funcionar Ok, porque o servidor está inativo, certo? Agora, para colocar seu servidor em funcionamento, você precisa executar o NBM start nessa pasta específica Está bem? Só então seu servidor estará ativo. Portanto, durante o desenvolvimento, você pode manter o servidor ligado e realmente modificar os arquivos, salvar e ver as mudanças acontecendo ao vivo. Está bem? Agora, vou falar um pouco mais sobre esse comando. Então, criamos o aplicativo react ou todo o aplicativo usando esse comando específico. Agora você também pode adicionar opções aqui no final. Está bem? Então, o que você pode fazer é usar os modelos aqui. Está bem? Agora, digamos que, ao trabalhar com o react, você também queira usar o texto datilografado Está bem? Então, se você estiver usando texto datilografado, você pode adicionar algo assim Você pode dizer template aqui e digitar script. Eu não vou executar isso, mas isso é apenas uma informação extra. O que isso fará é usar o modelo de texto datilografado para criar seu aplicativo e adicionar o suporte de texto datilografado desde o início, o que é útil se você estiver trabalhando em um projeto maior que pode se um projeto maior que pode beneficiar da Tudo bem. Então você pode usar esse comando dessa forma, tudo bem. Espero que este comando esteja claro NPX create react tap. Portanto, não temos o servidor instalado e funcionando, mas agora você pode reiniciá-lo novamente dizendo NPM run NPM start. Me desculpe. Então é o início do NPM, algo assim. E se você iniciá-lo, ele iniciará novamente o servidor. Tudo bem? Então, espero que isso seja útil e espero que você tenha conseguido acompanhar. 3. Configuração do IDE com o código do Visual Studio: Este é nosso primeiro aplicativo baseado em reação, que criamos, ou devo dizer que não criamos. Ok. Portanto, esse é um projeto gerado automaticamente usando o aplicativo Create React. Ok, e também está nos dando algumas dicas aqui. Você pode editar o aplicativo dot qs e salvá-lo para recarregá-lo. Está bem? Ele tem um link para aprender a reagir, que o levará ao site oficial do react. Tudo bem, até agora tudo bem. Portanto, este é o nosso aplicativo instalado e funcionando. Agora, o que precisamos fazer? Precisamos começar a codificar e modificar as coisas. E o que vamos fazer para isso? Vamos instalar um IDE, que é o código ID do Visual Studio. Ok. Então, isso é o que parece. Se você já o tem no computador, se não o tem, acesse este site oficial. É uma ferramenta gratuita, é gratuita, construída em código aberto, roda em qualquer lugar. Como estou no Windows, estou solicitando que eu baixe uma versão estável para Windows Você pode alternar para qualquer sistema operacional necessário. Mas se o seu sistema operacional tiver um instalador aqui, ele funcionará automaticamente. Então, se você estiver fazendo login do Mac aqui, ele mostrará o download do Mac. Está bem? Então, seja qual for a plataforma em que você estiver abrindo isso, ele mostrará esse botão e você poderá passar por isso se não souber o que é o código do Visual Studio Mas basta fazer o download e instalá-lo como qualquer outro programa de software. Eu já o tenho instalado, então não vou mostrar as etapas de instalação, mas as etapas de instalação não são nada complexas. É muito simples e direto. 4. Começando nossa jornada com os primeiros passos: Agora, depois instalar o código do Visual Studio com êxito, você verá uma página como esta. Portanto, se você abrir o código do Visual Studio, pela primeira vez, verá esta página de boas-vindas. Agora, sou usuário do Visual Studio Code há algum tempo, ok? E você está vendo todos esses projetos recentes. Portanto, é provável que você não veja a lista de projetos recentes, a menos que seja um usuário. Mas como sou usuário, como eu disse, estou vendo a lista de projetos recentes que usei ou criei no passado. Além disso, você verá essas opções aqui: novo arquivo, abrir arquivo, abrir pasta, clonar repositório Git, conectar-se a tudo É uma ferramenta muito útil. Código do Visual Studio, eu o uso o tempo todo. Agora, para abrir o projeto, você conhece a pasta em que criou o projeto. Então você pode simplesmente clicar aqui, Abrir pasta e navegar até o local da pasta onde você criou o projeto. Como alternativa, se por algum motivo você não estiver vendo isso, você pode ir para o arquivo nas opções do menu aqui e dizer abrir pasta. Ambos são iguais. Então, o que vou fazer é selecionar Abrir pasta, navegar até o diretório de minha escolha e abrir o projeto aqui. Agora, quando selecionei Abrir pasta, vi essa janela de pasta, que é exploradora, navegue até a pasta em que criei o aplicativo react E vou selecionar essa pasta específica. Este é o meu projeto de aplicativo react que criamos. Lá dentro, você verá alguns arquivos, mas precisará selecionar a pasta raiz. Eu direi que selecione e ela abrirá essa pasta específica para mim. Agora eu posso fechar esta página de boas-vindas aqui. Está bem? Então você pode ver o projeto aqui no lado esquerdo, ok? Você pode ver essa pasta inteira. Se você expandir isso, verá os arquivos dentro. Está bem? Então, quando você executou o comando chamado Create React app, ok com Create React app, ele criou tudo isso para você. Está bem? Você também pode criá-lo manualmente. Mas, como você pode imaginar, isso vai ser muito entediante, certo Então, essa ferramenta específica, aplicativo Create react, faz o trabalho para você, configurando toda a estrutura do projeto para você Está bem? Analisaremos essa estrutura de projeto em breve, mas, por enquanto, o que eu também gostaria de explicar é que temos o servidor instalado e funcionando a partir do terminal. Agora, o que posso fazer é não precisar usar um terminal externo. O código do Visual Studio tem uma maneira pela qual eu posso realmente ter um terminal dentro do código do Visual Studio Dessa forma, nunca preciso sair código do Visual Studio e mudar para um terminal local. Aqui no topo das opções, vou ver o terminal aqui. Você pode dizer novo terminal, e você pode ver que este é um terminal integrado dentro do código do Visual Studio. E se você disser PWD, que é o diretório de trabalho presente, o terminal é aberto automaticamente na pasta que você abriu dentro do código do Visual Studio, que é a pasta do projeto Portanto, você também não precisa navegar, não precisa executar comandos, CDs e tudo mais e navegar, isso funciona como um terminal local. Então, aqui, posso dizer que o NPM começa aqui. No momento em que eu disser, recebo um erro, você pode ver que algo já está sendo executado na porta 3.000 E o que está sendo executado, nosso próprio aplicativo está em execução e está nos perguntando se você deseja executar o aplicativo em outra porta. Eu não quero fazer isso. Eu vou dizer não. Ok, e isso simplesmente interromperá a execução. Está bem? Mas o que vou fazer é fechar esse servidor porque não quero mais usar um terminal externo, você sabe, externo por aqui. Está bem? Quero usar o terminal fornecido pelo código do Visual Studio, e vou dizer pin start, agora deve executar o servidor de desenvolvimento para você. Está bem? Dessa forma, o que podemos fazer é mover isso para uma nova janela. Então, aqui estamos na nova janela, e eu tenho o código do Visual Studio em execução na nova janela. Então, dessa forma, eu não preciso deixar o código do Visual Studio nunca. Eu posso até minimizar isso aqui assim. Está bem? Eu posso até mesmo criar um novo terminal a partir daqui, para que você possa ver mais, e você pode ter vários terminais funcionando aqui. Está bem? É muito útil, e essa é a razão pela qual. Então, esse tipo de ferramenta que o Visual Studio Code fornece é a razão pela qual ele é tão amado na comunidade de desenvolvedores. Agora, também mostrarei a lista de extensões que eu tenho. Então, aqui, se você acessar essa guia de extensão no lado esquerdo, aqui você tem algumas opções como pesquisar, controlar o código-fonte, executar e depurar, tudo isso, ok? Estou usando o Docker também em alguns dos meus projetos, então você também pode ver o Docker aqui Mas você pode não ver isso. Está bem? Isso precisa de uma extensão separada, ok? Mas se você for para a extensão. Agora, o que são extensões? Portanto, as extensões permitem que você aprimore ou estenda a funcionalidade padrão que Visual Studio Code já fornece. Então você pode ver, eu tenho uma extensão para notebook Jupiter. OK. Sempre que estou programando em Python , e se eu quiser suporte para notebook , eu uso essa extensão OK. Então eu tenho essa extensão. Isso não é necessário para reagir. Eu tenho a extensão Python. Está bem? Agora, essa tag de renomeação automática, isso pode ser útil para o React porque, você sabe, se você estiver renomeando uma tag, tudo bem, e se houver uma tag de fechamento, o que isso fará é renomear a versão paga dessa tag específica Ok, então isso é algo que você pode ter. É útil. Por exemplo, se eu tiver que dar um exemplo, deixe-me dar um exemplo. Então, digamos que se eu criar ou deixar eu abrir algum arquivo aqui. Ok, deixe-me abrir um arquivo HTML. Agora, essa coisa aqui, você pode ver, deixe-me ir até aqui, rolar para baixo. Portanto, esse título tem uma tag de abertura e uma tag de fechamento. Então, por causa dessa extensão específica, se eu renomear a tag de abertura, você pode ver que a tag de fechamento também está sendo renomeada Está bem? Então esse é o benefício dessa tag renomeada automaticamente Você não precisa renomear a tag de abertura primeiro e depois renomear a tag de fechamento, coloração por pares, como você pode ver pelo próprio ícone, está acostumada a destacar a cor do par final do colchete Isso é útil se você estiver usando muitos colchetes em seu Okay, Debugger for Java, contêineres de desenvolvimento, jango doco, tudo isso eu uso para outras linguagens, pacote de extensão para Java, gradle para Java, pacote de extensão para Java, gradle para Java, muitos colchetes em seu Okay, Debugger for Java, contêineres de desenvolvimento, jango doco, tudo isso eu uso para outras linguagens, pacote de extensão para Java, gradle para Java, itálico. Está bem? Isso é para desenvolvimento assistido por IA. Isso também serve para exemplos de uso da API Intelicode. OK. Eu tenho alguns para Python Então, tudo isso está relacionado ao Python. Vou rolar para baixo, um servidor ativo. Não precisamos desse Maven para Java. Isso também não é necessário. Mais bonito é algo que você pode usar. Isso formata o código. OK. Eu organizo o código para você OK. E sim, isso é o que temos. Ok. Também adicionarei algumas extensões agora mesmo aqui. Está bem? Então, o que você pode fazer é pesquisar trechos de código de reação aqui, algo assim OK. Ok, então você pode pesquisar o ES seven plus react, algo assim. E você verá essa extensão com quase milhões de instalações Então, são 12,9 milhões enquanto estou gravando este vídeo. Obviamente, isso continuará aumentando e você poderá ver um número diferente ao assistir isso. Então isso é extensão. Esse é o nome ES seven plus react redux react Native snippets Agora, o que isso faz é te dar modelos, ok? Por exemplo, se você quiser criar uma função, você pode dizer RAFC Você pode simplesmente digitar isso e ele fornecerá toda a definição da função para. OK. Então, esse tipo de atalho ele tem, o que ajuda você a economizar tempo Então você pode instalar isso. Vou clicar em Instalar e adicioná-lo à minha lista de extensões. Está bem? Então, sim, nós o temos instalado agora, ok? Você pode explorar mais plug-ins ou extensões de reação no mercado aqui e pode brincar com eles. E você pode aprimorar a funcionalidade padrão que o Visual Studio Code já fornece a você. Tudo bem. Então, sim, trata-se de configurar o código do Visual Studio, e espero que você o tenha achado útil. 5. Navegando na web: uma introdução ao roteamento do React: Hoje não, é muito comum o aplicativo tenha navegações, certo? Por exemplo, você pode criar um aplicativo que pode ter uma página de produto, uma página que mostra toda a categoria, uma página inicial na página sobre, uma página de equipes e assim por diante, certo Portanto, há navegação e você precisa navegar para URLs diferentes para ver o que há nessa página específica. E isso é muito comum. Ainda hoje, se você estiver criando um site simples, como seu próprio portfólio, ele terá coisas como habilidades e como entrar em contato com você. E se você tem um blog , pode cortar o URL do blog em seu domínio e conferir todos os artigos Está bem? Então, isso é muito comum. E quando se trata de criar aplicativos de página única, você precisa ter uma ótima experiência do usuário na qual seja capaz de navegar entre páginas diferentes ou até mesmo componentes sem recarregar a página inteira E é aqui que o roteamento entra em cena. Portanto, o roteamento é algo que permite a navegação entre diferentes páginas ou componentes sem recarregá-los Está bem? Portanto, a experiência do usuário é muito boa e há uma biblioteca que facilita isso É chamado de react Router. É uma biblioteca padrão usada para roteamento em aplicativos de reação Está bem? Agora, por que o roteamento é necessário? Claro, existem alguns pontos e eu listei alguns aqui. Por exemplo, o ponto número um é a experiência do usuário. Portanto, o roteamento melhora a experiência do usuário ao permitir uma navegação suave entre diferentes partes do seu aplicativo sem recarregar a página inteira Isso é importante, ok? Separação de componentes. Então, como o roteamento é possível, ele ajuda a separar as preocupações. Então, tornando seu código mais modular e fácil de manter. O que quero dizer aqui é, por exemplo, se você quiser mostrar uma barra de navegação, algum conteúdo intermediário, como, por exemplo, Sobre a página e na parte inferior, mostrar um rodapé Você pode criar três componentes. Você pode manter a barra de navegação e o rodapé consistentes e, em seguida, recarregar o componente intermediário, dependendo da URL Então, o componente é separado. Se isso não for possível, nesse caso, você precisará criar tudo em um único arquivo para que ele seja renderizado junto Mas como o roteamento é possível, você pode separá-lo E isso é algo que você aprenderá quando realmente começar a usar ou fazer roteamento em seus aplicativos. Gerenciamento de URL. Agora, o roteamento permite o uso de URLs para navegar até diferentes componentes, que ajuda a compartilhar visualizações específicas com as pessoas ao seu redor, ou você pode até mesmo marcar esses URLs como favoritos Então, tudo isso é possível por causa do roteamento. Portanto, o roteamento é realmente importante na criação de aplicativos web modernos Agora, o roteamento é possível com a ajuda do roteador react. OK. Então, o que vamos fazer é adicionar esse pacote ao nosso aplicativo, ok? Então eu criei um novo aplicativo e você vai para o terminal. OK. Vou trocar. Eu vou dizer roteamento de CD OK. Então esse é meu aplicativo. Está bem? Então, estou na pasta raiz do aplicativo real. OK. Eu vou dizer NPM install, react Router, Tom, algo assim Está bem? Então, isso é algo que vou adicionar ao meu aplicativo e você verá algum processamento e instalação acontecerem. E então você pode ir até o pacote dot JASN e você verá o react to Tom sendo adicionado aqui Está bem? Então, sim, é isso que vamos usar e terminamos a configuração. Está bem? Então, espero que você esteja claro sobre o que é roteamento e quais são as dependências que você precisa adicionar ao seu projeto 6. Definindo o caminho: configurando rotas no React: Agora, o que vamos fazer é construir três URLs, na verdade, e renderizar componentes diferentes quando esses URLs forem acessados componentes diferentes quando esses URLs forem Está bem? Portanto, precisaremos de três componentes como home about e contact, e esses três componentes serão renderizados com base na URL Então, a barra renderizará a barra inicial, a barra A renderizará aproximadamente. E então, se você clicar em Contato , você verá o contato Está bem? Então, a primeira coisa que precisaremos é que esses três componentes estejam presentes. Está bem? Então, o que vou fazer é acessar nossa estrutura de aplicativos e começar a adicionar esses três arquivos. Vou dizer home dot JSX aqui, e posso dizer função Opa aqui E vou falar sobre ou deixar que eu crie primeiro o componente doméstico. Está bem? Não precisamos de nenhum tipo de parâmetro, e isso vai voltar aqui, H dois para casa. Ok. Vou manter as coisas simples. Vou apenas retornar uma palavra de cada um dos componentes. Então esse é o lar. Vou falar sobre o JSX, e aqui, vou falar sobre algo que esqueci aqui, esqueci Eu vou dizer que a exportação é padrão. Para casa, L. Ok. E aqui, eu vou dizer exportação padrão. R L. Ok, cerca de casa, e eu preciso adicionar casa e contato. Ok, contato ou o sexo dela. Então eu preciso dizer função, preciso dizer contato. Ok. E aqui, volte. Vou dizer dois, entre em contato. E eu vou dizer que exportação padrão, entre em contato. Ok. Então, agora tenho três componentes configurados e prontos. Ok. O que vamos fazer é usar o roteamento aqui e configurar rotas para diferentes URLs Então, com base na URL, ok, componentes diferentes serão renderizados É assim que vai funcionar. Ok. Agora, para isso, precisaremos adicionar Importar. Vamos importar algumas coisas do roteador react doom que adicionamos ao nosso aplicativo Vou simplesmente derrubar isso aqui. Ok. Do que vamos precisar? Está bem? Então, vou adicionar uma declaração de importação. Eu vou dizer Importar. Eu vou dizer navegador. Roteador, tudo bem. E como roteador? Opa, como roteador, vou dizer roteador react, Tom. Ok. Então, por algum motivo, a sugestão de pedido não está chegando, mas deve estar em código único e eu direi reagir. Rota Tom. Oh, finalmente chegou. Não sei, talvez algum tipo de problema. Mas sim, é isso. Ok. Então, eu estou inserindo o roteador do navegador, primeiro lugar, ok? E também precisarei de rotas. Ok. Tudo isso está presente nessa biblioteca específica que adicionamos. Eu vou dizer rotas, e eu vou dizer rota por aqui. Assim. Ok. Agora, vamos entender o que são e por que precisamos dessas três coisas em nosso aplicativo. Portanto, o roteador do navegador, em primeiro lugar, é um componente básico que permitirá o roteamento em nosso aplicativo react Portanto, é um componente que vai monitorar a barra de endereço do navegador. Portanto, se a barra de endereço estiver em barra, é um URL base e aparecerá em casa Se for uma barra, vai aparecer sobre. Se for uma barra de contato, ela mostrará a página de contato aqui Está bem? Então você pode pensar nisso como se um gerente garantisse que a coisa certa fosse mostrada, ok? Ou o URL está sincronizado com os componentes. É o componente básico, como eu disse, que permite o roteamento em nosso aplicativo Está bem? Isso é tudo que você tem que lembrar. Rotas por aqui, estamos implementando isso com esse nome de roteador. Estamos criando um alias aqui. Ok, estamos dizendo roteador de navegador. Importe o roteador do navegador como roteador. Portanto, podemos nos referir a isso como roteador. Está bem? Você tem rotas. Agora é um contêiner para todos os componentes de roteamento de aplicativos. Está bem? E temos uma rota até aqui. O que a rota fará é definir ou mapear um caminho específico para um componente específico. Então, por exemplo, queremos mapear a barra Sobre para cerca aqui, sobre o componente Então Route vai nos ajudar aqui. Está bem? Agora, o que podemos fazer aqui é basicamente começar a usar isso e você terá mais clareza nesse contexto sobre como eles podem ser usados. Está bem? E depois de fazer isso, você também pode tentar acessar a URL no navegador e verá que isso está funcionando. Está bem? Então, primeiro, vou dizer roteador. É um componente básico aqui, ok. E você verá esse roteador sendo usado. Ok. Então eu vou dizer rotas por aqui. Ok. E dentro da rota, eu vou dizer rota. Então, para cada rota que eu preciso definir, eu preciso adicionar essa rota. Está bem? Então, isso vai ser uma etiqueta autofechada, o, e eu posso dizer caminho. Tem uma propriedade de caminho. Então, eu vou dizer que no slash, você precisa mencionar o elemento Então, qual elemento você deseja exibir? Está bem? No slash, queremos exibir a página inicial, certo? Então eu vou dizer aqui, em casa. Ok, então vou adicionar algo assim, em casa e assim. Isso é uma sintaxe, e eu preciso importar para casa, é claro. Então, pressionarei Control Space e isso será importado. Ou se você estiver no Mac, você pode pressionar Command e espaço e isso será importado. Está bem? A entrada é necessária Agora, se você salvar isso e acessar o aplicativo, verá isso sendo renderizado Agora, se eu comentar isso, deixe-me comentar isso. E se eu salvar e vier aqui, você verá que nada está sendo renderizado Espero que isso esteja fazendo sentido. Se eu controlar isso, save on slash home será renderizado Fazendo sentido. Então é assim que estamos definindo URLs agora Vamos dizer slash e o que é o próximo slash , certo Então eu vou falar sobre. Ok. E aqui, terei que acrescentar algo assim. Ok. E certifique-se de que também seja importado. Faremos o mesmo para entrar em contato aqui. Ok, por aqui. Por aqui, preciso entrar em contato. Entre em contato. O contato também é importado. E agora, aqui, se você vier, é Home Slash Contact Você pode ver o contato sendo renderizado e, sobre, você deve ver sobre ser renderizado Está bem? E se você acessar o URL raiz, está em casa. Está bem? Então é assim que você pode usar essas entradas que adicionamos na parte superior Está bem? Essas entradas que estamos no topo para fazer uso do roteamento e implementar o roteamento basicamente em nossos aplicativos de página única Está bem? Você também pode adicionar uma barra de navegação na parte superior, que permitirá que os usuários naveguem até as páginas. No momento, não adicionamos isso. Então, acabei de mostrar diretamente como, se você inserir esse URL no navegador, o componente será carregado. Está bem? Mas espero que isso esteja claro e espero que tenha sido valioso. 7. Transições perfeitas: adicionando navegação para uma experiência do usuário suave: Temos um aplicativo onde você pode ver diferentes componentes. Está bem? Então, se eu falar, ok, você vai ver se eu chegar em casa, você vai ver a casa aqui, e se eu entrar em contato, eu vou ver o contato. Portanto, componentes diferentes estão sendo carregados e transmitidos na URL que você digita Agora, haverá cenários em que você deseja adicionar uma barra de navegação Claro, não é um cenário, mas é obrigatório nos dias de hoje, devo dizer. Atualmente, é obrigatório que você tenha uma barra de navegação na parte superior na qual o usuário possa clicar e navegar Ninguém vai digitar a URL no navegador. É claro. Você precisa de botões que permitam a navegação, e é aqui que você pode ativar uma barra de navegação em seu aplicativo que permita navegar entre páginas diferentes. Então, o que vou fazer é adicionar links aqui. Está bem? Então, aqui, logo abaixo do roteador, o que vou fazer é adicionar um Nav aqui. OK. E aqui, pressionarei Enter e aqui, direi UL. OK. Vou adicionar uma lista não ordenada e, em seguida, adicionarei uma lista como esta. Está bem? Agora, dentro de uma lista, vou adicionar, ok, 1 segundo. Então, vou considerar isso em uma única linha. Está bem? Então eu vou ter várias listas aqui, vários itens da lista, ok? E dentro de cada lista, vou adicionar, tipo, Início, aqui vai ficar em casa ou deixe-me adicionar Link aqui, porque ele deve navegar. Então, eu vou dizer Link aqui e você pode ver isso está me mostrando um link do roteador react doom roteador React doom também fornece esse link, usando o qual você pode permitir navegações No momento em que você selecionar Link do React Router doom, você verá o link sendo importado aqui Você pode ver que a tinta foi adicionada a essa declaração de importação específica. Então, aqui, o que eu vou fazer é dizer o texto que vou mostrar. Então aqui está a casa, esta casa. E aqui, eu vou dizer dois. Para onde você deseja que esse link navegue? Então eu vou dizer, eu vou dizer slash. Este é um link para o slash, e eu posso duplicá-lo três vezes aqui Então, isso vai ser sobre, e isso vai ser contato. Este é apenas um texto que estamos exibindo aqui. Então, isso é sobre, e isso é contato. Eu vou dizer contato. Vou guardar isso. No momento em que você salva isso, se você vier aqui, haverá algum problema lá. Não sei por que não é refrescante. Deixe-me verificar o console, o que há de errado? OK. Então, deixe-me fechar isso. OK. E deixe-me executar isso de novo. Deixe-me ver. Ok , está funcionando bem. Provavelmente a recarga demorou um pouco. Eu não sei por quê. Talvez algum problema com meu sistema. Mas você pode ver que os links agora estão aqui. Está bem? Não parece muito sofisticado, não. Mas, por enquanto, vamos nos concentrar apenas na funcionalidade Ok, em breve vamos embelezar isso. Então você pode ver, você vai para cerca de. Você pode clicar em Entrar em contato com a página inicial e ver o URL também. O URL também está mudando. Você pode ver que tudo isso é sem nenhum tipo de recarga. Está bem? Esse é apenas o componente sendo recarregado ou componente sendo carregado, dependendo da URL em que você está, e esse é o conceito de manter URL sincronizada com o que será exibido Está bem? Então você pode ver como isso está funcionando bem. Agora, vamos embelezar isso um pouco, é claro que podemos melhorar a interface que você está vendo aqui E para melhorar a interface, podemos usar o que podemos chamá-la. Podemos fazer uso do Tailwind CSS. Está bem? Agora, agora, CSS branco do Tailwind, é fácil. É baseado em classes. Você só precisa usar algumas classes de utilitários que obtemos e um pouco de configuração. Então acesse tailwindsss.com, pesquise Tailwind CSS e você virá aqui Clique em Começar. Vá até a instalação. Então, aqui, a primeira coisa é a instalação. OK. Mas, por acaso, se isso não abrir, você pode clicar em Instalação aqui. Está bem? Agora, vamos usar o tailwind CLI ou o tailwind e eu também vou precisar do post CSS junto com o Autoprefixa post CSS junto com o Autoprefixa Portanto, esta é a documentação do mesmo. Está bem? É recomendável adicionar os três. Então, vou começar a adicionar esses comandos. Ok, então vou deletar isso e aqui vou ver Ok, 1 segundo, deixe-me ver se estou no diretório do projeto. Não estou no diretório do projeto, então posso dizer roteamento, reação, vou dizer claro E aqui, eu vou instalar isso. Está bem? Então, vai demorar um pouco para ser instalado. OK. Enquanto isso, viremos aqui. Vamos receber esse comando aqui. OK. E vou pegar isso e dizer que, no final, adicionarei o hífen P aqui. OK. E eu pressionarei Enter e você verá dois arquivos sendo criados, que são tailwind config e post CSS config Está bem? Agora, se você vier aqui, poderá ver dois arquivos. Configuração Tailwind CSS e pós-CSS. Agora, na configuração do tailwind, precisamos adicionar um pouco de configuração, então precisamos adicionar esse conteúdo que está sendo fornecido para Então, vou adicionar isso aqui. Está bem? Isso significa que, em SRC, tailwind deve ser aplicável ao HTML JS e também ao Também temos alguns arquivos JSX. Está bem? Portanto, deve ser aplicável lá. Vou rolar para baixo e você precisa adicionar isso no CSS do ponto principal. Vou rolar para cima. Está bem? Então eu tenho esse CSS de ponto de índice, que está sendo carregado no CSS de ponto principal. Você pode ver o CSS do ponto de índice. Está bem? Então, eu adicionei essas diretivas ou anotações nas diretivas tailwind basicamente OK. E é isso. Acho que o vento de cauda está lá para nós agora. Ok, podemos fazer uso disso. Então, vamos começar a fazer uso disso. OK. Eu também tenho tailwind italicens aqui. Está bem? Tailwind Se você pesquisar no mercado de extensões, você verá esse plug-in no Tailwind Portanto, ele fornece um bom recurso de autosuges para todas as classes E é muito útil. Eu recomendo fortemente se você estiver trabalhando com vento de cauda Está bem? Agora, aqui, o que precisamos fazer é basicamente ter UI, desculpe, UL, eu tenho NAV na parte superior, vou adicionar um TIF aqui Eu vou dizer TIF. OK. E eu vou dizer aqui, nome da turma. OK. Vou adicionar algumas aulas de tailwind Então, vou dizer uma tela H mínima aqui e um fundo de uma centena cinza. Está bem? Isso está feito. E vou adicionar esse fechamento depois, então isso deve fechar. Onde deveria fechar? Ele deve fechar um pouco antes da rota. OK. Sim, por aqui. OK. Então eu adicionei isso e agora o que precisamos fazer é adicionar um pouco de CSS aqui. Vou dizer o nome da turma aqui. Eu vou dizer BG. Vou manter isso como azul, azul de, digamos, 600. Isso parece decente. Ok, você pode ver. Você também pode comparar os diferentes tons de azul. Você pode ver. 600, 800 são mais escuros, então eu vou dizer 600. Está bem? 600 parecem decentes e mais quatro aqui. OK. E eu vou selecionar isso e vamos ver como é. OK. Portanto, o CSS não é aplicado por algum motivo. Está bem? Deixe-me ver, deixe-me reiniciar o servidor. Vamos ver se a reinicialização é o que está causando isso. Ok, agora está aplicado. Como eu fiz muitas mudanças de configuração, mudanças e dependências, não estava aparecendo, mas agora está aparecendo, você pode ver, ok? Isso é decente. Agora eu vou vir aqui. Eu tenho um pouco de CSS aqui. Agora, aqui para a UL, vou dizer, opa, vou dizer classe, nome da classe e vou dizer nome da classe flex and justify OK. E podemos ter um espaço de X e eu vou dizer seis talvez. Ok, seis. Vou ver isso. Vamos ver o que isso parece. Você pode ver como está. Ok, parece decente. E agora precisamos adicionar algum tipo de CSS basicamente ou algum tipo de classe aqui a todos os atributos do link. Então, vou levar isso para uma nova linha. Vou adicionar uma guia. Isso também está em uma nova linha, e vou dizer o nome da classe aqui. OK. Qual é o nome da classe? Vou dizer mensagem de texto. Ok, branco. Ok, eu preciso de branco aqui. O texto deve ser branco. O preto não parece bom. OH, o texto deve estar bem, amarelo. E há tantos lençóis amarelos, vou selecionar 300. OK. Eu direi que a fonte é média. Vamos usar a fonte como meio. Eu vou dizer transição Ok. Então venha aqui e eu direi uma duração de 300. Vamos ver se isso, vamos ver. Você pode ver como isso está funcionando. OK. Você pode ver? Um pouco de efeito. O que eu posso fazer agora é copiar essa classe para cada link que existe. Está bem? Então, vou copiar isso. Eu virei até aqui. Vamos simplesmente colocar o link aqui. OK. Vou tocar. OK. Opa. Então, tudo bem. Então, vou recuar isso e levar isso para uma nova linha, ok? Toque algumas vezes. OK. E sim, toque algumas vezes e eu vou colar. OK. Então, isso deve parecer decente agora. Você pode ver a casa quase em contato. Ok, parece muito grande porque estou um pouco ampliado. Está bem? Você pode ver. Esta é a visão real do site Está bem? Mas estou um pouco ampliado para que seja fácil ver se você está em dispositivos menores Normalmente, as pessoas apreciam isso. OK. Mas sim, eu basicamente adicionei isso, ok? Agora eu posso vir aqui, e o que eu posso fazer é toda essa rota até aqui. Eu posso embrulhar isso dentro em TIF algo assim , tão duro, vou cortar isso e vou adicionar aqui OK. Então eu adicionei todas essas rotas a essa rígida e a essa rígida, posso chamar isso de nome de classe, contêiner, OK, algo assim, e posso dizer X auto Opa, Auto aqui e Pi preenchendo cinco às oito. OK. E sim, é isso. Agora, o que podemos fazer é também estilizar componentes individuais. Então, agora, acabamos de estilizar a barra de navegação superior. Está bem? Vamos estilizar componentes individuais. Então eu vou até lá. Vou começar com minha casa aqui. OK. Principalmente, o estilo será semelhante para todos os componentes Ok, então tenha isso em mente. Vou me livrar disso. Primeiro de tudo, vou ter porque vou escrever várias linhas de código e vou dizer tab aqui. OK. Vamos adicionar esse Dev. Vou adicionar H dois aqui. H two é a página inicial. Ok, algo assim, e eu vou dizer a etiqueta P aqui. A tag P é bem-vinda à página inicial. OK. E eu posso dizer Explore, decida aprender mais, algo assim. OK. E agora vou até Dev e Div, vou dizer o nome da classe Ok, eu vou dizer flex, Flex, call, column, e eu vou dizer centro de itens OK. Então, devo adicionar isso ou deveria ser Vamos manter isso como coluna. O centro de itens justifica o centro. Algo assim, e eu vou dizer tela H mínima. Portanto, esta é a altura mínima que estamos adicionando, e posso dizer PG de cinza 50. OK. Vamos ver o que isso parece para casa. Está bem? O fundo cinza ainda não foi adicionado. É adicionado aqui no pacote, ok? E deixe-me realmente, você sabe , deixe-me realmente, tipo, pegar isso assim, ok? Então eu posso ver tudo lado a lado, certo. Então, sim, esse é um par de visualizações por enquanto, por algum tempo, vamos nos ater a esse tipo de visão. OK. Agora, para H dois, posso pressionar Enter. Vou ver o nome da classe. Assim. Ok, aqui. E aqui, vou dizer texto três em Excel e fonte em negrito, depois texto em azul 600. Assim. Você pode ver isso mudando. E então, para essa coisa aqui, eu vou dizer o nome da classe. Opa, crianças foram candidatadas. Opa. Então, vou mudar isso, vou adicionar o nome da classe aqui. Nome da classe Vou manter o texto em cinza. OK. Vamos manter o cinza de 700. OK. E margem superior a quatro e texto tão grande. OK. E você pode ver essa interface. Está ampliado agora, mas se você for até aqui, isso deve ser decente isso deve ser OK. Você pode ver. Parece um pouco decente, ok? Não muito, mas é decente. Tudo bem. Então, isso é algo que adicionamos e você pode replicar isso em todos os componentes Então, o que eu vou fazer é colocar essa etiqueta de retorno aqui. Vou até A e, daqui a pouco, vou adicionar a mesma etiqueta de retorno aqui. Está bem? Opa. Preciso me livrar disso. Isso está pronto e aqui, pêssego caseiro, então vou falar sobre pêssego OK. E eu vou dizer que nesta página, eu preciso adicionar algum texto aqui. Então, eu vou dizer que esta página fornece informações. Opa. Informações sobre nós e saiba mais sobre os valores de nossas máquinas e assim por diante. OK. Tudo bem. duplicar isso e adicioná-lo ao contato também Então, vou substituir isso aqui. Está bem? Para contato, esta é a página de contato. Tudo bem, entre em contato, e eu direi aqui. Vou me livrar disso. Direi que sinta-se à vontade para entrar em contato conosco por meio de nosso contato, formulário ou e-mail, algo assim. OK. E sim, adoraríamos ouvir alguém assim, ok? Agora, aqui, se você atualizar, poderá ver o contrato e ver como nosso pequeno aplicativo está lindo , você sabe, com poucas alterações na configuração do Tailwind CSS, usando poucas classes e adicionando uma barra de navegação na parte superior OK. Então este é o roteador dom react Router, em ação, ok? E espero que isso lhe dê uma ideia de como os aplicativos web modernos são desenvolvidos, ok? Você pode imaginar que, se isso aumentasse de tamanho, você sabe, você tem cerca de 20 ou 30 partes da rota aqui, e você tem alguns links no topo. Você pode até mesmo separar esses links em um componente separado chamado Navbar Você pode criar um componente separado chamado Navbar, e você pode simplesmente pegar essa coisa rígida , toda essa coisa, todo esse trecho de código, do NAV aqui até aqui, em um componente separado e simplesmente renderizar a barra NAV aqui Isso é algo que você pode fazer se a barra de navegação se tornar complexa Mas, por enquanto, eu declarei isso aqui, mas tudo pode ser segregado quando se trata de reagir, e você pode modularizar seu código de uma forma incrível. OK. Espero que isso tenha ajudado você a obter uma nova perspectiva e espero que tenha sido útil. 8. Organizando rotas como um profissional: dominando o roteamento aninhado: Agora, vamos começar a falar sobre rotas aninhadas. Então, aqui temos uma página A, que está sendo renderizada em Sobre Agora, digamos que queremos adicionar uma nova página, que é a página da equipe, e queremos exibir as informações sobre a equipe. Agora, essa página da equipe está logicamente relacionada a A e eu deveria querer que ela estivesse abaixo da URL, que está aqui. Se eu disser , a URL deve ser slash Auth Está bem? Então eu quero que o componente da equipe venha aqui, ok? Então, o que vou fazer nesse caso, vou usar rotas aninhadas, ok? E vou organizá-lo de forma que equipe seja uma equipe , na verdade, seja um subtópico, basicamente, e isso nos permita O que vamos fazer é manter essas rotas relacionadas juntas, ok? E vamos definir uma relação hierárquica. OK. Então, a barra Sobre renderizará a página Sobre e a barra Sobre a barra A equipe renderizará a página da equipe e especificará os detalhes da Está bem? E uma das melhores coisas sobre rota aninhada é que você pode usar o código que foi definido em sobre componente dentro ou nesta página da equipe, ok? Então, ao renderizar a página da equipe, você também pode exibir os componentes ou o código. Basicamente, isso é definido em cerca de. E deixe-me demonstrar isso sobre o que quero dizer, porque existe uma relação hierárquica entre dois, já que os estamos aninhando Como a equipe está aninhada dentro de cerca, existe uma relação hierárquica Então você pode reutilizar o layout sobre componentes, como qualquer tipo de layout, como cabeçalho, barra lateral ou qualquer tipo de conteúdo compartilhado, ok, no componente de equipe, E deixe-me mostrar como isso funciona, ok? O que eu vou fazer é, em primeiro lugar, eu realmente vou me livrar disso. Deixe-me me livrar desse comentário aqui. E aqui, eu tenho isso perto e vou remover o fechamento automático. Ok, vou fechá-lo separadamente assim. OK. E dentro disso, adicionarei a página da equipe, assim. Eu vou dizer slash team. OK. E eu vou dizer slash Team Agora a equipe não existe, é claro, então vou receber um erro se eu salvar esse arquivo. Mas o que vou fazer é adicionar uma página de equipe. Eu vou dizer team dot JSX. OK. Agora, em que consiste a página da equipe Agora, página da equipe, precisamos de uma página de equipe que seja muito, muito simples. OK. O que vou fazer é pegar o layout da casa. Vou colar para curtir a equipe. Vou apenas renomear isso para Team. Renomeie isso para Equipe e adicionarei algumas alterações de conteúdo, como esta é a página da Equipe Ok, ou podemos dizer que equipe conheça nossa equipe. OK. Vamos fazer com que seja um pouco divertido, conhecer nossa equipe, algo assim. OK. E aqui, eu vou ver o que dizemos? Nós podemos nos livrar disso. Podemos dizer que temos uma equipe talentosa de profissionais ou dedicada à nossa missão. Ok, vou manter as coisas simples. Ok, nós temos isso, e agora eu vou vir aqui e vou importar o T Team. Equipes importadas. Agora, o que deveria acontecer idealmente? Está bem? Isso está aninhado dentro de A, certo? É uma rota aninhada Então, se formos para slash About slash Team, devemos ver a equipe sendo renderizada Está bem? Na verdade, isso não vai acontecer. Deixe-me mostrar isso para você. Ok, então estamos recebendo algum erro aqui. Está bem? Então, deixe-me ver qual é o erro. É por isso que fui inspecionar aqui no navegador para ver o erro, e você pode ver que o caminho absoluto para a equipe de barra aninhada sob o caminho sobre não é válido Está bem? E eu sei por que não é válido. Portanto, aqui você não pode usar uma barra para frente. Está bem? Então eu vou me livrar disso e vou salvar isso. No momento em que eu salvo isso, funciona bem. Está bem? Portanto, isso está funcionando bem em relação à casa e ao contato. Agora, se eu for para At e disser slash team aqui, ok, você pode ver que a equipe não está sendo renderizada, apenas a página sobre está sendo exibida, E há uma razão para isso, ok? E a razão para isso é que não estamos usando um componente de saída. Agora, o que é componente de saída? Agora, o componente de saída é um espaço reservado para componentes aninhados e você precisa usar o componente de saída dentro do componente pai Agora, qual é o componente principal. No nosso caso, o componente principal é a página A. Então, dentro da página At, precisamos usar o espaço reservado de saída, ok? E isso é para dizer isso é para dizer ao React aqui. Que qualquer tipo de componente aninhado se existir, renderize-o aqui Está bem? Portanto, ele age como um espaço reservado E deixe-me mostrar como você pode realmente fazer uso disso. Então, o que vamos fazer é entrar aqui e entrar, já que este é um pai, temos que fazer uso dele aqui. Está bem? Pouco antes do último TIF, antes de fecharmos isso, o que vou fazer é adicionar mais um TF E eu estou estilizando isso porque o resto da página está com boa aparência Está bem? Então, eu vou dizer margem superior a oito e W completo aqui, largura de 100%. E eu vou dizer max Ok. E eu digo quatro Excel aqui. OK. Então essa é a largura máxima. E então aqui, eu vou dizer tomada. Agora, você pode ver a saída. Você precisa importá-lo do roteador React doom Você pode ver Ok. E é autofechável. Então eu vou fechá-lo. E você verá essa entrada sendo adicionada na parte superior. OK. Agora vou guardar isso e agora, se eu for até aqui, você pode ver o encontro ou a equipe. Está bem? Isso está sendo renderizado. Você pode ver como ele está sendo renderizado na página A. E se você se desculpar, não na página Sobre, mas em Sobre o Slash Team Agora, se você for para cerca de, você verá sobre, e se você for para A slash team, você verá sobre uma equipe OK. Então, A é o pai e a equipe é a criança. Ok, há uma relação hierárquica entre eles. E esse é um conceito de rotas aninhadas, ok? E é assim que você pode usá-lo. E, claro, isso também explica por que a tomada é necessária. Está bem? É como um espaço reservado Você pode ver aqui na documentação, renderiza a raiz secundária correspondente à raiz principal Ou nada se nenhuma raiz secundária corresponder. Então, se nada corresponder, ele não renderizará nada. Mas se você quiser renderizar alguma coisa ou se houver algum tipo de filho lá, do pai, ele vai renderizar isso. Está bem? Então, espero que tenha sido útil e espero que você tenha conseguido acompanhar. Apenas uma pequena atualização antes de eu parar este vídeo, o que eu fiz foi por dentro. Está bem? Então, anteriormente, não havia nenhuma ligação por aqui. Eu tive que confiar apenas na URL. Então, se você continuar falando, eu adicionei dois links aqui, equipe R, de volta para casa. Então, se você for para a equipe, verá esse discurso. De volta para casa, você voltará para casa. Ou você também pode voltar para mais ou menos aqui. Ok, então eu adicionei essa navegação para que você não precise depender, você sabe, de VRLs e, em vez disso, você pode clicar aqui e navegar E para isso, eu adicionei esse bloco dentro de cerca de. Ok, você pode ver a equipe e voltar para casa com CSS simples, ok? E eu tive que adicionar um link aqui, como o link do roteador react dom, ok, para adicionar esses links. Está bem? Então, sim, é isso, e espero que tenha sido útil. 9. Ups! Página não encontrada: criando uma página 404 personalizada: Agora, em nosso aplicativo, se navegarmos por rotas diferentes, veremos componentes diferentes e, basicamente, haverá cenários em que o usuário navega até uma URL que não Por exemplo, se eu digitar ABC aqui, ok, essa URL ABC não existe, mas não há nenhum tipo de feedback ou mensagem que eu esteja dando ao usuário para dizer que, Ei, isso não Então, basicamente, lidar com isso é conhecido como quatro, não quatro, ok? Portanto, você pode lidar com erros de quatro pés em que isso não foi encontrado, certo? Então você precisa mostrar ao usuário, certo? Mas agora, por padrão, você pode ver que isso é o que está acontecendo se você tentar acessar algo que não existe. OK. O que vou fazer é primeiro criar quatro páginas, não quatro, e depois lidar com isso usando roteamento Então, voltando ao nosso código, eu vou vir aqui. Vou replicar qualquer tipo de layout aqui. OK. E eu vou renomear isso para componente NotFound, e vou vir aqui para não encontrado, e vou dizer não encontrado aqui, algo assim OK. Ok, eu não deveria ter replicado a página sobre Na verdade, eu deveria replicar uma página simples, que é a página inicial OK. Então, vou copiar a declaração de retorno disso e colá-la aqui. OK. Agora, em vez da página inicial, direi quatro, não quatro OK. E aqui, vou adicionar uma mensagem. Vou manter as coisas simples. Eu posso dizer Opa Assim. OK. Opa. A página que você está procurando não existe, ok? Não existe, algo assim. Está bem? Agora, o que podemos fazer é usar essa página específica em nosso aplicativo. Está bem? Então, o que eu vou fazer, eu vou vir aqui. Está bem? Temos roteamento para todas as peças, certo? Agora, quero adicionar roteamento para qualquer outra coisa além dessas partes Então, qualquer coisa além disso deve ser redirecionada para essas quatro páginas, não quatro, certo? Como posso definir isso? Então, eu vou dizer rota até aqui. Está bem? Path e eu vou dizer estrela. OK. E eu vou dizer que o elemento é igual a. OK. E aqui, não encontrado, assim. OK. E eu vou fechar isso, assim. OK. E eu vou fechar isso também. OK. Agora, se alguém visitar qualquer outra página, você pode ver isso automaticamente, recarregá-la aqui Está bem? Então, phono quatro, você pode ver Opa, a página que você está procurando não existe. Está bem? Assim, você pode realmente navegar para qualquer outra página e, se digitar qualquer outra coisa além disso, qualquer outra coisa, obterá a fonte quatro. Assim, o componente de quatro pés seria carregado e exibido para o usuário. Então é assim que você pode lidar com os erros do quarto pé, ok? Você pode melhorar essa interface para muito melhor e algo que corresponda ao tema da sua organização. Mas espero que você entenda a funcionalidade de como criar isso. O objetivo deste vídeo é ensinar como criar a funcionalidade. O descanso pode ser resolvido, você sabe, os designs podem continuar mudando. Mas a funcionalidade é algo importante, certo? Então, espero que tenha sido útil e espero que você tenha conseguido acompanhar. 10. Conclusão do curso: E isso nos leva ao fim dessa empolgante jornada no mundo do roteamento com o react Abordamos muitos conceitos ao longo deste curso específico. Primeiro, entendemos o que é o react Router, como você pode configurá-lo e também aprendemos como criar aplicativos de várias páginas com o react implemente uma navegação intuitiva para uma experiência de usuário tranquila Também aprendemos como você pode estruturar rotas aninhadas para aprimorar a escalabilidade do seu aplicativo e como lidar com erros e personalizar para não usar lidar com erros e personalizar para não Mas lembre-se de que o aprendizado não para aqui . O verdadeiro poder de qualquer conceito no mundo da programação, como o react Router está na aplicação desses conceitos a projetos do mundo real. Portanto, você definitivamente deve aplicar esses conceitos aos seus próprios projetos. Você deve continuar explorando tópicos avançados e praticando tudo o que aprendeu , porque isso é muito importante Eu adoraria ver o tipo de projeto que você cria e como usa o roteador react. Em seus projetos. Por fim, este curso específico tem uma seção de projetos onde você encontrará um projeto de classe Eu o encorajaria fortemente a concluir o projeto da classe e compartilhar seu trabalho na própria seção do projeto. Agora, obrigado por se juntar a mim nesta jornada em particular. Espero que este curso tenha capacitado você com as habilidades para criar um aplicativo de reação bem estruturado e amigável para navegação, continuar construindo, explorando e programando de forma satisfatória