Construa seu primeiro aplicativo para Web React

1. Prévia do curso: tinha baixo todos. Como está indo? Aqui é o Quinton. Então, às vezes, quando você está aprendendo algo novo, a parte mais difícil é saber o suficiente para começar. E isso é chamado de barreira para a entrada. Então é isso que este curso pretende fazer. Ele tem como objetivo levá-lo sobre essa barreira para a entrada e começar a criar seus primeiros aplicativos de reação . Então vamos deixar de saber nada sobre reagir para criar nossa primeira reação. E esse é o aplicativo que vemos na tela agora. Então vamos criar um menu móvel que desliza para dentro e para fora. Nós também vamos estar fazendo uso de roteador reagir para dar ao nosso aplicativo muitas páginas. Mas você vai notar que se eu mudar de página que, ah, nós realmente não atualizamos o navegador e o conteúdo da página muda, então isso é chamado de aplicativo de página única, e é com isso que vamos trabalhar. Então, se eu voltar para a página inicial, você notará novamente o navegador e atualizará. Mas eu mostrei um pequeno símbolo de carregamento lá e que enviado através de um A P. Eu peço para buscar informações de um A P I. E se eu clicar no botão de visualização você pode ver que isso vai para a página do produto, e nós também enviamos através Outro pedido para obter essa informação de um p I. Então tudo isso é a quantidade mínima de coisas que você precisa saber para ser um reativo de nível júnior , um leproso ou um desenvolvedor de reação iniciante. Então, ao longo das próximas duas horas, você vai aprender a criar este aplicativo. E, a propósito, este aplicativo é intencionalmente projetado para ser apenas um bom boilerplate ou realmente bom ponto de partida para qualquer outro APS potencial que você deseja construir. Então você sempre pode clonar para baixo este código do meu repositório get up, e você está pronto para ir e começar a usar isso para qualquer outro potencial reagir projetos que você começar a criar no futuro. 2. Crie seu primeiro aplicativo de reação: Olá, todo mundo. Como está indo? Aqui é o Quinton. E bem-vindo a este tutorial. Siris em reagir. Agora, se vocês estão assistindo este vídeo que eu vou parecer que a maioria de vocês já ouviu falar reagir de alguma forma no passado porque reatores, uma das bibliotecas JavaScript mais populares lá fora. E, claro, também é construído pelo Facebook. Então este é um projeto de código aberto do Facebook no hub Get. E isso só significa que reagir é incrivelmente popular e usado por, ah, muitas empresas lá fora. Então, se você está tentando torná-lo como um desenvolvedor Web ou mesmo como um desenvolvedor móvel, em seguida, reagir é uma habilidade muito boa para adicionar ao seu conjunto de habilidades porque você tem, reagir e reagir nativo para o desenvolvimento móvel. Agora que sabemos o que é reagir, vamos falar sobre algumas coisas que você precisa saber antes começar a aprender a reagir. Claro, uma das coisas mais óbvias que você vai precisar saber é JavaScript, porque reagir é uma biblioteca JavaScript. Se você ainda não sabe alguns dos conceitos básicos do script Java em um monte de o que estamos fazendo nesta série tutorial vai passar muito sobre sua cabeça, então certifique-se de reboque, assistir meus vídeos em JavaScript primeiro, e então você pode voltar e assistir os vídeos em reagir. A próxima coisa que você vai precisar é que você vai precisar estar um pouco confortável trabalhando com o terminal. Então eu tenho alguns vídeos explicando como trabalhar com o terminal e Mac, e também como personalizar o terminal no Mac apenas para torná-lo um pouco mais confortável para você. Mas você realmente precisa saber como navegar seu caminho ou em seu computador, porque muito do que fazemos ao codificar e reagir vai envolver executar alguns comandos da linha de comando. E se você já não sabe como fazer isso, você precisa voltar e aprender isso primeiro, certo? Então, agora que sabemos como trabalhar com o terminal, a próxima coisa que queremos fazer é também instalar node.js em nosso computador se ele ainda não estiver instalado. Porque nó é, é claro padrão para qualquer ambiente de desenvolvimento JavaScript e especialmente para reagir porque reagir é basicamente apenas um pacote NPM ou um pacote de nó. Certo. Então vamos voltar para o terminal e eu vou digitar o nó traço de E. E isso vai me dizer que versão de nota eu tenho no meu computador, que neste caso é 13.7. Se isso não funcionar, significa que você não tem nota no seu computador. A próxima coisa que queremos fazer é também instalar yon, que é um gerenciador de pacotes. Isto é basicamente apenas uma alternativa ao NPM, e o que eu vou fazer é apenas digitar yon traço V para mostrar que versão eu tenho off yon instalado no meu computador, porque eu vou estar executando principalmente yon comandos e não comandos NPM no meu série de tutoriais. Então, basta ter certeza de que você instala isso e a última coisa que precisamos instalar em nosso computador é realmente apenas uma extensão de navegador para o Google Chrome, e isso é chamado de ferramentas de desenvolvedor reagir. Então certifique-se de instalar isso, porque o que isso vai permitir que você faça é inspecionar seus componentes e ajudar a criar bugs em seus aplicativos de reação. Então certifique-se de instalar isso, e uma vez que você tenha essa extensão de navegador instalada, a próxima coisa que você quer fazer é finalmente começar a criar seu aplicativo de reação, e vamos fazer isso usando a ferramenta Create React App e o que isso faz Sob o capô é apenas configurar seu pacote web, configurar seu balbuciar, configurar seu sim, Lynn configurar. Então ele cuida de todas as coisas difíceis do ambiente Dev para você. E tudo que você precisa fazer é executar um comando para configurar o, uh, uh, projeto para você mesmo. Então vamos copiar esse comando e colar isso no terminal. E eu só vou mudar o nome disto de meu apto para aprender a reagir. E isso vai usar N p X, que é nós pacote runner para executar o pacote de criação de aplicativo e fazer um pacote de aprendizado frio reagir. Então vamos bater, entrar. E uma vez que todo o processo estiver terminado, você terá uma pequena mensagem agradável no terminal aqui. Isso explica o que aconteceu. Então criamos todo o aplicativo. Nós também configuramos isso em criou um commit get. Então isso já está pronto para empurrar para cima para obter hub. E também temos alguns comandos que foram configurados para nos ajudar a começar a desenvolver nosso projeto. Então nós temos o início, que vai iniciar o Dev Server Young Bull para construir a versão de produção de nossos sites. Também temos alguns comandos de teste e temos um comando para ejetar do Web pack atual . Negrito. Mas provavelmente não vamos querer fazer isso, especialmente porque somos muito novos para reagir. Então, em vez disso, vamos apenas com o que eles sugerem que façamos aqui, e que é para CD no diretório. Então vamos CD para aprender reagir. E então eu vou também digitar em yon começar a iniciar o Dev Server, e você pode ver que isso já foi configurado como, ah obter repositório ou obter projeto. E então o que isso é feito por nós é que ele abriu nosso aplicativo de reação, o que acabamos de criar, e ele está executando em um servidor de desenvolvimento local, que é hosts locais Port 3000. E ele ainda nos deu um pouco de instrução aqui para dizer que você deve em seu aplicativo fonte Js ponto para editar este aplicativo. Então vamos realmente abrir isso em um editor de código, então eu vou voltar para o meu terminal e o que eu quero fazer é que eu não quero matar essa janela de terminal, porque se eu fizer, eu vou matar todo o Dev Server e nós vamos ter que começar isso de novo. Então, em vez disso, vamos abrir uma nova guia no terminal e eu vou ver o no diretório React Tutoriais e então eu vou Teoh também abrir, aprender reagir. E agora o que eu quero fazer é abrir isso no meu editor. Então eu vou digitar o código ponto barra e se você tiver o código do estúdio visual e seu computador, isso abrirá o projeto em código de estúdio visual. Então vamos bater. Entra, Dwight para abrir o “I d. E.”. E estes são todos os projetos. Feche a atualização. Mas estes são todos os arquivos do nosso projeto. Então aqui temos empacotado Jason e um arquivo leia-me. Então, se você quiser ler um pouco sobre o que realmente está acontecendo aqui, você provavelmente poderia ler através disso. E se abrirmos fonte e aplicativo J s, este é o aplicativo real que está no navegador, então você pode ver que temos a mesma textura em seu aplicativo de origem, Js e salvar para recarregar. Então o que eu quero fazer apenas para demonstrar que isso tem recarga quente é apenas puxar o eu d assim. E vamos puxar o navegador para o lado também. Vamos puxar isso ali. E agora se fizermos alguma alteração então vamos adicionar um novo parágrafo todos os anos e clicar em Salvar. Você pode ver isso sem que eu tenha que me refrescar. Ah, o navegador recarrega com todas as nossas mudanças configuradas e visíveis. 3. NPX crie o aplicativo de reação explicado: Então agora temos nossa APP aberta no navegador, e já sabemos que se fizermos alterações a isso em salvar isso, essas mudanças serão exibidas automaticamente no navegador. Mas vamos dar uma olhada mais profunda no que realmente está acontecendo aqui. Então há um monte de coisas que estão trabalhando juntas sob o capô para fazer isso acontecer. Claro, AP Js foi destacado como um dos primeiros arquivos a dar uma olhada. Então vamos olhar para este arquivo e, em seguida, trabalhar nosso caminho para trás para descobrir como tudo isso funciona. Então, dando uma olhada no óbvio, nós realmente temos um componentes reagir. Então, reatores feitos dessas coisas chamadas componentes em nosso componente de nível pai para nosso aplicativo vai realmente ser este componente APP aqui. Então, o que esta função está realmente fazendo é que eu sei que ele se parece com uma função chamada aplicativo. O que realmente está fazendo é criar um componente sem estado em reagir, e então ele está retornando o que se parece com HTML, exceto que há uma pequena diferença aqui porque isso não é realmente html. É algo chamado JSX no que o JSX permite que você faça é gerar variáveis JavaScript ou executar lógica JavaScript no código usando essas chaves. Então você vai ver muitas vezes quando se trabalha com reagir. A próxima diferença que você verá é que nós também temos o nome da classe em vez de pano. Então, sempre que você quiser aplicar uma classe a um desses elementos, você tem que usar os atributos de nome da classe em vez de usar fio dental. Ótima. Então é isso que está acontecendo aqui. O que está acontecendo no topo aqui são importações de JavaScript. Então você vai ver isso bastante ao trabalhar com componentes é que você pode querer importar código de outro arquivo. E isso é algo que é novo para JavaScript em? Sim, seis. Então, na verdade já existe há algum tempo, e alguns de vocês podem já ter usado importações de JavaScript no passado, mas alguns de vocês talvez não saibam disso. Portanto, o JavaScript importa. Sempre que você voltar a importar um arquivo que não tem um caminho de arquivo relativo, então JavaScript assumirá automaticamente que este deve ser um pacote, e então ele deve estar localizado na pasta de módulos de nó. E, claro, você nunca vai editar nenhum arquivo de pacote. Então você só precisa saber que reagir é um pacote e está localizado nos módulos de nó. Dobre ali. Não vamos nos preocupar em encontrá-la. Em seguida, o próximo a importações aqui realmente tem parte do arquivo relativo assim ponto Slash significa que este logotipo do arquivo dot s v g deve estar no mesmo diretório que ap Js porque esse é o arquivo que está realmente usando ele. Certo? Então, vamos dar uma olhada no AP Js que está no diretório de origem, e também temos um logotipo SPG no diretório de origem, então ponto barra significa olhar no mesmo diretório. Agora, se você não está familiarizado com a pausa final, você pode querer se tornar familiar porque você também vai estar usando coisas como ponto , ponto, barra para voltar atrás, mais velho e assim em. Certo? Então o logotipo que o SPG está apenas importando esse logotipo e aplicativo. CSS é, é claro, importar o aplicativo CSS para este arquivo, e estamos usando as classes de AP CSS aqui. E então nós também estamos importando esse logotipo que podemos usá-lo como fonte para esta imagem, e isso é realmente o que tem o logotipo reage girando aqui Agora, na parte inferior do arquivo, nós também estamos fazendo uso de uma exportação. E isso é um sinal muito bom para mostrar que este não é o ponto de entrada em nosso aplicativo. Na verdade, isso é apenas um componente, e isso está sendo usado por outro arquivo. Então, vamos dar uma olhada no Index Js que é tipicamente o principal ponto de entrada em qualquer aplicativo JavaScript . Então vamos abrir isso e você pode ver que por aqui nós também estamos fazendo uso da biblioteca de reação e os idiotas reagem. E também temos alguns arquivos CSS aqui. Mas o mais importante, temos importado aplicativo da APP. Então nós realmente importamos este aplicativo para o arquivo de índice e estamos fazendo uso disso aqui . E o que estamos fazendo é que nós estamos realmente vinculando a reação são reagir até o elemento documento , e nós estamos realmente procurando por um elemento com um i d fora de rota. Então, onde esse elemento está localizado? Bem, isso está na verdade neste índice dot arquivos html. Se abrirmos isso, este é o arquivo HTML que será enviado aos clientes sempre que visitarem nosso site. E então o que são trabalhos script está fazendo aqui é que ele está procurando por esta div com uma idéia de rota e está ligando toda a nossa aplicação de script de trabalho a esta div. E então, a partir daí, estamos condicionalmente renderizando todos os nossos componentes. Em primeiro lugar, nosso componente APP em nosso componente APP pode então renderizar o resto de outros componentes para que possamos ter componentes dentro de componentes, e é isso que vamos estar fazendo nos próximos vídeos. 4. Crie seu primeiro componente: Agora vamos dar uma olhada na criação de nossos próprios componentes de reação porque, como eu disse antes, tudo em reagir é um componente. Então, felizmente, nós já temos um bom exemplo de como um componente deve ser se olharmos para Apthe. Sim, então este é um componente de reator, e este é realmente um componente de reação apátrida. Isso é porque ele está usando uma função. Então, isso também é chamado de componente funcional. Agora vamos dar uma olhada em alguns dos erros que você pode encontrar ao trabalhar pela primeira vez com os componentes. A primeira coisa que eu vou fazer é apenas se livrar de tudo no componente APP e eu vou bater, salvar, salvar, e você vai ver que agora temos um token inesperado da era passando. E isso é porque sempre que você cria um componente em reagir, isso sempre tem que retornar um elemento rapper. Então, se eu colocar em uma div aqui e eu digo, se você pode ver que nós podemos nos livrar dessa era agora, é claro, se você alguma vez quis retornar vários componentes, você também vai receber um erro ou vários elementos. Em vez disso, você também vai ser Indiana, então vamos salvar, e agora você pode ver que nós temos uma era passageira. Eso JSX deve sempre ser embrulhado em um na tag de fechamento. Então, basicamente, se você quiser criar um componente que irá retornar vários elementos, todos eles devem ser embrulhados em um pai. Elementos disso poderiam estar à frente disso. Pode ser um “fazer”. Isto pode ser um agora. Isso pode ser o que você quiser, mas você deve sempre ter um elemento rapper e, em seguida, todos os outros elementos dentro disso e você pode ver que isso se livra da era. Mas vamos voltar a um DIV simples. Então eu vou adicionar um div novamente. E vamos nos livrar dessa importação de logotipo e vamos dar uma olhada na criação de nossos próprios componentes . Então o que eu vou fazer é eu vou criar um componente que irá retornar o nome do usuário para que nós vamos dizer algo como um componente Olá mundo. Então, no diretório fonte, eu vou criar uma nova pasta e vamos chamar essa pasta Componentes e dentro da pasta Componentes, eu vou criar um novo arquivo e podemos chamar isso de olá mundo ponto Js. Então, sempre que você criar um novo componente em reagir sua convenção de nomenclatura padrão é sempre RIA nomear seus componentes com uma letra maiúscula e, neste caso, porque é multi palavra sua letra maiúscula com maiúsculas de camelo. Certo, então vamos apertar Enter. E agora temos o nosso ficheiro “Olá Mundo”. A primeira coisa que queremos fazer é importar reagir de reagir. Agora que temos reagir importado, podemos declarar nossos componentes e há duas sintaxe diferente é para isso. Então o primeiro é um componente apátrida e, em seguida, o segundo é um componente que está usando a classe ES seis no imposto. Então vamos dar uma olhada no primeiro imposto, que é o componente apátrida do componente funcional. E isso é o mesmo que o nosso arquivo Js aplicativo aqui, então vamos criar uma função chamará este mundo Olá. Abra nossos parênteses, abra nossas chaves e isso pode retornar algo. Então vamos apenas devolver um H um e isso pode dizer olá Quinn é isso e assim vai codificar o nome e lá por enquanto. A próxima coisa que precisamos fazer é, obviamente, exportar isso para que vamos exportar padrão. Olá mundo. E agora podemos ir para ap Js E, a fim de fazer uso desse componente ou precisamos fazer é importar isso no topo do arquivo aqui. Então importe Olá mundo de ponto, barra componentes e Olá mundo. Portanto, certifique-se de que o caminho do arquivo está correto. E agora que fizemos isso, podemos usar nosso componente como um elemento basicamente assim e eu vou usá-lo como uma única tag. Então apenas olá, mundo. Agora, se eu tivesse salvo, você pode ver que temos um H um devolvido como Olá, Quinton. Então, se você quiser fazer isso um pouco mais dinâmico, você pode fazer uso de adereços, Então adereços em reagir Ah, apenas uma maneira de passar informações de um componente para outro. Então eu vou adicionar um adereço de nome e podemos ficar assim igual ao Jared. E agora que eu fiz isso, eu posso fazer uso deste adereço no meu componente Olá mundo primeiro aceitando adereços como um argumento. E, em seguida, no meu JSX, vou abrir algumas chaves e acessar a propriedade name fora deste prop, objeto ou objetos adereços. E agora, quando guardarmos isto. Você pode ver Oops. Na verdade, não temos nada acontecendo aqui, então vamos dar uma olhada nisso e certificar-nos de que eu guardo isso quando o AP Js não foi salvo. E agora temos Olá, Jared voltou no navegador. E, claro, sempre que você alterar esse nome, então a saída no navegador também mudará. Então é assim que você pausa informações de um componente para outro componente. Você estará usando adereços. Agora vamos dar uma olhada em declarar um componente usando a sintaxe baseada em classe alguém para cima, voltar para o arquivo hello world Js e vamos remover completamente essa função. E em vez de usar uma função, eu vou criar uma classe e vamos chamar essa classe de Olá Mundo, porque é isso que estamos exportando aqui em baixo. E isso vai estender componentes de ponto de reação. Então é por isso que importamos reagir no topo do nosso arquivo aqui. Em seguida, a próxima coisa que queremos fazer é adicionar em uma função de renderização porque esta cláusula deve retornar função Orender quando estamos indo estar retornando. Alguns JSX e essa função de renderização devem ter uma instrução return e esta instrução return pode retornar. São cada um junto com Olá e, em seguida, o nome do adereço que queremos dizer olá para. Então, a maneira como acessamos a prop ao usar uma sintaxe baseada em classe é um pouco diferente. Antes que usamos para acessá-lo com adereços nome ponto e você verá que o meu eu d corrigiu automaticamente isso para mim porque estamos usando a classe com base no imposto aqui. Então temos que acessar nossos adereços com a palavra-chave “this”. Então este adereços ponto ah nome ponto e que terá exatamente as mesmas saídas. Se eu voltar aqui e talvez mudar esse nome de volta para Quinton, você pode ver que ainda temos saída Hello, Quinton no navegador. As diferenças entre essas duas sintaxe é que você vai ver ambos na documentação. Mas você vai ver que são essas diferenças na sintaxe. Onde quer que você olhe na documentação sobre, isso é tudo que eu tenho para você neste vídeo 5. Use o Tailwind CSS com o React: Agora vamos dar uma olhada na criação de um layout de aplicativo básico com um menu que abre e fecha. E antes de começar, eu só quero mencionar que todo o código para este tutorial estará disponível no meu hub get . Então, dê uma olhada na descrição do vídeo abaixo para obter um link para o repositório, e agora vamos direto para ele. Então, começando com o código do tutorial anterior, a primeira coisa que eu quero fazer é criar um componente de cabeçalho na parte superior do nosso aplicativo. Então vamos passar para os componentes e vai criar um novo arquivo e podemos chamar esse ponto de cabeçalho Js E dentro disso, é claro, queremos importar reagir de reagir para que possamos fazer uso do nosso componente funcional. E vamos criar uma nova função aqui. Vou chamar isso de cabeça para cima, e isso vai devolver algum JSX. Então, por enquanto, vamos apenas devolver um Hedda com o nome do nosso aplicativo. Então, neste caso, vou apenas dizer “acontecer”. Oito. Agora podemos fazer que a exportação padrão, Então headem padrão ea próxima coisa que queremos fazer é apenas importar isso para o nosso aplicativo principal. Então eu vou duplicar esta linha para baixo e podemos mudar o nome aqui para “Ah “, e o arquivo para “Hedda”. E agora, se eu colocar em nossa cabeça um componente, devemos ter a cabeça do aplicativo na página. Agora, o que eu provavelmente quero fazer é estilizar isso e há um monte de maneiras diferentes de fazer isso porque nós poderíamos seguir o caminho convencional de apenas escrever nosso próprio CSS. E se eu fosse fazer isso, você pode ver que já estamos importando um arquivo chamado APP CSS todos os anos. Então, se eu abrir isso aqui, nós temos algum CSS e eu provavelmente poderia apenas remover tudo isso porque isso é o que foi enviado com a instalação MPX original. E podemos substituir isso pelo nosso próprio CSS. Então, se eu quisesse, eu poderia criar um aplicativo, Hedda, e então apenas pegar a classe CSS e colar isso no meu cabeçalho como um nome de classe. E, claro, lá temos um cabeçalho estilizado. Então essa é a abordagem CSS convencional, se essa é a abordagem que você gostaria de seguir. Mas eu acho que eu gostaria de fazer uso de uma estrutura CSS. E a estrutura CSS que eu realmente gosto de usar é Tailwind CSS. Então este é javascript configurável. CSS não é uma vez que estamos construindo um aplicativo javascript, é obviamente muito bom ter CSS que também é configurável com JavaScript. Então, vamos dar uma olhada na página de conceitos básicos, e isso nos leva diretamente para as etapas de instalação. Então, isto é, na verdade, quatro passos para instalar, o que é bastante simples. Então o que você quer fazer é, é claro, yon adicionar tailwind CSS. Então eu vou até a linha de comando e podemos acompanhar isso. Venha aqui. E, claro, isso vai instalar Tailwind no projeto ah. Agora, para aqueles de vocês que não estão familiarizados com pacotes NPM, se vocês derem uma olhada no pacote Jason agora, nós deveríamos ter Tailwind. CSS adicionado ao nosso pacote Jason arquivo. A próxima coisa que queremos fazer é também adicionar no tailwind CSS intar up. Então eu acho que o que eu vou fazer aqui é apenas se livrar do arquivo CSS aplicativo que acabamos editar. Então vamos apenas excluir isso completamente, e você pode ver que temos outro arquivo CSS índice aqui, e isso é realmente importado para Theo o o arquivo de índice principal do nosso aplicativo. Então eu acho que vai fazer uso deste arquivo de índice. Eso O que podemos fazer aqui é apenas se livrar de todo o CSS que está nele e bem ritmo em nosso CSS tailwind. E nós vamos pousar usando este ano diz arquivo para gerar o resto do nosso vento de cauda. CSS Agora, se isso não faz sentido para você agora, não se preocupe. Vamos fazer isso no próximo passo. Então o que queremos fazer primeiro é criar um arquivo de configuração tailwind. Então vamos voltar para o terminal e vamos executar isso no PX Command. E então o que isso fez foi criar um arquivo de configuração tailwind. Então, se você quiser dar uma olhada nisso, isso deve ser adicionado ao nosso projeto aqui em baixo. E é aqui que vamos eventualmente começar a definir qualquer uma de nossas próprias classes personalizadas que não são enviadas com Tailwind. Mas, por enquanto, acho que podemos deixar o arquivo como está para que possamos esquecê-lo. Vou fechar isso no último passo que realmente precisamos fazer aqui é processar nosso CSS. Então precisamos de alguma maneira de processar essas três linhas em CSS utilizável real. E vamos fazer isso com o Post CSS. Então o que eu vou fazer é copiar este código e você pode ver que ele diz que precisamos colocar este código em um arquivo post CSS con fig. Então vamos criar esse arquivo e podemos acompanhar esse código aqui. Claro que sim. Talvez apenas se livrar desses comentários. Então estamos fazendo uso fora do post CSS ou um arquivo de conflito posi Aceh, e isso será automaticamente pego pelo nosso projeto sempre que executarmos um posi Asus Command . Mas se dermos uma olhada no pacote Jason Package ou Post CSS não é um pacote em nosso projeto no momento. Então o que queremos fazer é também apenas executar yon add post CSS dash cli, e que vai instalar pro CSS é um dos pacotes. Então, dando uma olhada no pacote Jason agora, devemos ter post CSS adicionado ao nosso projeto. A última coisa que eu vou fazer apenas para uma boa medida é também instalar o prefixo automático, senhor, porque isso é um requisito de Tailwind. Então vamos voltar para a linha de comando e para o anúncio ou dois prefixos. Então, agora que temos todos os pacotes necessários, a próxima coisa que queremos fazer é adicionar um script que irá construir nosso CSS. Então o que eu vou fazer é colar essas duas linhas. E o que isso vai fazer é que ele vai executar um comando post CSS que vai pegar o arquivo de índice de origem , que é este arquivo, e então criar um APP CSS pai. Na verdade, poderíamos chamar isso de CSS Tailwind. E então agora se eu executar o comando CSS negrito no meu terminal de modo que é apenas saltar para trás. Sim, e executar Yon construir CSS. Isso deve gerar um arquivo CSS tailwind para mim. Então vamos voltar ao meu projeto. E lá vamos nós. Agora temos um arquivo CSS Tailwind que não existia antes. Então, se abrirmos isso, você pode ver que há um monte de CSS que foi gerado para nós, mas que foi tudo gerado e configurado usando script de trabalho usando ventos de cauda, padrões e, em seguida, alguns de nossos conflitos. Então, o que provavelmente queremos fazer é sempre que iniciamos nosso aplicativo, nós também queremos ter certeza de que construímos nosso projeto também. Então o que eu vou fazer é talvez apenas substituir tese, arte e linhas ousadas por este código ligado. O que isso vai fazer é apenas certificar-se de que construímos nosso CSS sempre que executamos o comando Iand start ou Yang build. Então, se eu voltar para o terminal, você pode ver que nós... Bem, vamos apenas matar a seiva e então correr. Janz pensou de novo. O que eles devem fazer é primeiro construir nosso CSS e, em seguida, iniciar nosso script de reação. E foi basicamente o que aconteceu. Então, espero que não tenhamos nenhum erro. Oops. Ok, Não podemos encontrar o arquivo CSS aplicativo fora do curso. Então, se voltarmos para o aplicativo CSS, você pode ver que estamos importando isso aqui. Mas eu apaguei que o arquivo não existe mais, então não precisamos mais disso. E então eu acho que a última coisa que realmente precisamos fazer. Como você pode ver, temos alguns tempos de textura padrão, novo texto romano. A última coisa que precisamos fazer é em nosso arquivo índice Js substituído o índice ver avaliar com Tailwind CSS porque queremos ter certeza de que estamos usando o arquivo CSS recém-gerado. E agora você pode ver que o vento da cauda deveria ter sido importado para o nosso projeto e podemos ver isso com a mudança de fundos. Mas se eu quisesse, poderia voltar à minha cabeça e agora começar a testar isso com algumas aulas de vento de cauda . Então diga que o vento tem uma classe chamada fronteira ser para o fundo da fronteira e agora devemos ter uma fronteira na parte inferior do nosso site. Também podemos definir isso para ter uma classe fora da frente Bold. E agora temos texto em negrito e o p três criará algum preenchimento. Cabeçalho ! Perfeito. Agora, apenas no caso de você estar se perguntando, essas aulas podem ser encontradas em documentações de ventos de cauda se você for para o site de ventos de cauda e procurar por algo como fronteira do que você pode olhar para fronteira com e nós temos um fronteira ser que nos dará uma borda de um pixel na parte inferior do nosso site. A mesma coisa para todas as outras classes. Então encontre Espere, temos fundo Bold, o que fará com que nosso fundo tenha um peso de 700, etc. Então, agora que temos um Hedda, vamos dar uma olhada na criação de um rodapé para o nosso site. Então eu vou criar um novo componente aqui, e nós podemos chamar isso de pé de A Js. E, claro, eu vou apenas usar o mesmo código que está em nossa cabeça, e nós vamos apenas mudar isso um pouco. Copyright 2020. E agora nós podemos provavelmente apenas adicionar algumas classes para estilizar isso. Mas antes de fazer isso, vamos realmente importar isso para o nosso aplicativo. Então condenem a linha para baixo e mudem isso para pé, uh, e pé ah, e então puxe nosso pé para aqui. Ótima. Então temos os direitos autorais lá. Eu acho, Vamos apenas nos concentrar em fazer algum estilo, então vamos dizer BG Gray 200 centro de texto e texto, X S e P três Apenas para fazer um pouco menor. Ótima. Eu acho que a última coisa que eu quero fazer com este pé é talvez posicionar que todo o caminho na parte inferior dos documentos eu vou adicionar em uma classe de zero absoluto e inferior e que deve jogá-lo todo o caminho até o fundo do nosso documento. Acho que a última coisa que devemos fazer é dar uma aula fora do W cheio. Então essa é a largura total. Ótima. Então nós temos a arte fora do que parece ser um bom aplicativo. No próximo vídeo, vamos dar uma olhada em criar o resto do layout e também criar nosso menu de navegação . Mas, por enquanto, é tudo o que tenho neste vídeo. 6. Crie um menu móvel: Agora vamos dar uma olhada na criação do menu animado. Mas antes de começarmos, eu só quero aconselhá-lo que você deve estar usando as ferramentas de desenvolvedor reagir que devem ser instaladas no Google Chrome. E com isso instalado, agora você pode inspecionar quais componentes estão atualmente em sua página. Por exemplo, os componentes do cabeçalho ou os componentes do mundo de saudação. E você também poderá ver quais adereços eles têm, que estado eles estabeleceram atualmente. E isso vai ser muito útil para depuração durante este tutorial, porque vamos estar fazendo uso de um componente que tem estado. Então o que eu vou fazer é ir para o meu diretório de componentes e vamos criar um novo arquivo e vamos chamar este médico de navegação. Sim, e isto vai ser bastante parecido. Cabeça do dedo do pé, um componente por enquanto. Então vamos importar esse código aqui ou copiar esse código aqui. E nós podemos mudar o nome da função para navegação, e nós vamos apenas exportar navegação e isso vai retornar um item de valete. E por enquanto, vamos apenas retornar o Neve para que possamos obter algum estilo certo, e eu vou passar para, ah, ah, componente de cabeçalho aqui, e eu estou realmente indo importar a navegação para este cabeçalho componentes. Então vamos importar navegação de ponto, barra de navegação, e então nós só queremos fazer uso disso aqui em baixo. Então, navegação. E agora podemos ver que temos o valete aparecendo aqui. Vamos dar uma olhada no estilo disso. Então, o que eu quero fazer é talvez se livrar da classe de fonte negrito, e nós podemos realmente apenas criar uma tag span aqui com a classe fonte Bold. E agora o que eu gostaria de fazer é pegar o valete e colocá-lo no canto superior. Então o que eu vou fazer é transformar isso em uma caixa flexível e então eu vou Teoh, justificar os, uh, uh, itens entre eles. E então eu também vou adicionar no centro de itens, que deve ser enviado horizontalmente para eles se isso nunca ficar maior do que o outro. Certo, então agora temos nossa navegação. A próxima coisa que queremos fazer é em vez de usar uma palavra que a Neve vamos dar uma olhada em substituir isso por um ícone. Então eu vou fazer o fundo de uso incrível, e eles têm um pacote muito bom para reagir, então você pode ver que eles recomendam isso aqui em suas docas. Então, se você clicar nesse link, isso vai te levar para a frente. Incrível. Obter ter página impressa. E se você rolar para baixo até a seção de instalação, você pode ver que você pode instalar este pacote usando NPM ou yon, e na verdade são três pacotes separados que temos que instalar. Então o que eu vou fazer é instalar todos os três com este comando aqui. Então, agora que temos esses pacotes instalados, a próxima coisa que queremos fazer é realmente fazer uso disso. Então precisamos importar a frente ou algum ícone, e então também precisamos importar o ícone específico que queremos usar. Neste caso. Quero usar o ícone de barras da FAA. Então eu só vou mudar isso para F A chefe e também apenas mudou o pacote para livre ícones sólidos. Então agora temos o componente ícone, e então também temos o ícone JavaScript que queremos usar eso. O que queremos fazer é adicionar isso como um fundo de componente ou algum ícone, e então isso precisa levar em um ícone de prop off. E esse ícone precisa ser um vaso. Os ícones iam colocar isso neles. E agora temos três patrões horizontais. A próxima coisa que quero fazer é talvez aumentar um pouco o tamanho disso. Então agora temos um ícone. A próxima coisa que eu quero fazer é sempre que eu clicar neste ícone, eu quero abrir e fechar o menu. Então precisamos fazer uso fora do estado para que eu possa dar a esta navegação alguns estados fazendo uso de um gancho de reação. Então vamos criar uma cobertura de reator. Sim, e este vai ser o menu show, ou esta vai ser uma variável chamada menu show on. Eu vou usar um método chamado set show menu sempre que eu quiser alterar o que está nessa variável, e então vamos usar o gancho de estado de uso, e eu vou adicionar na palavra false of year. Então o que isso está fazendo é criar uma variável chamada show menu, que vai ser o nosso estado para verificar se devemos mostrar o menu. Então também estamos declarando que vamos usar uma função ou um método aqui que vai mudar o valor dessa variável. E então nós estamos apenas usando o gancho de estado uso de reagir. E estamos configurando isso para ter um valor atual de false. Então, quero dizer, você deve sempre carregar fechado. E agora, se dermos uma olhada em nosso componente de navegação em metais reativos, você pode ver que temos um gancho aqui com um estado desligado. Falso. Então foi aí que esse valor foi aplicado. Claro, se definirmos isso como verdadeiro, então isso mudaria o valor aqui em baixo nos estados. Mas vamos usar o valor de true para determinar se o menu deve estar aberto ou não. Então, por padrão, ele deve ser falso. O menu deve estar fechado. E, em seguida, quando clicarmos neste ícone Então vamos no clique deste ícone. O que queremos fazer aqui é usar uma função de seta para alterar o valor fora do menu show. Então nós vamos estar usando o método set show menu aqui, e nós vamos passar este um valor off. Verdadeiro. Por enquanto, E agora o nosso aplicativo carrega com o estado como falso. Mas quando clicamos no ícone, então o estado se transforma em verdade. Então, não tenho certeza se talvez eu deva fazer isso um pouco maior para que possamos ver isso. Ah, mas agora o Estado tem um valor de verdade. Então o que nós também poderíamos fazer apenas para fazer este valor alternar é que podemos definir isso para o oposto fora do menu show. E isso significa que sempre que eu clicar neste botão, ele deve alternar o valor. Então temos verdadeiro e depois falso e depois verdadeiro e depois falso. Sempre que eu clicar nele, ótimo. Isso deve alternar nosso menu aberto e fechado. Então o que eu quero fazer agora é adicionar algum HTML para exibir quando esse valor for verdadeiro. Isso é frio, renderização condicional em reagir quando queremos mostrar um pouco de HTML, mas somente quando um certo valor é verdadeiro. Então o que eu quero fazer aqui é criar sua variável. E podemos definir isso igual a algum JSX como, uh, este é o menu, certo? E agora, se eu saísse essa variável na parte inferior da minha navegação. Então, quando minha navegação deve ser, nós temos agora. Esta é a saída do menu. Mas nós só queremos que esta exibição quando o menu é realmente abre o status do vento igual à verdade. Então o que eu gostaria de fazer é começar inicializando essa variável, mas como um valor nulo. E isso significa que os homens que você não vai mostrar. Mas então eu posso criar uma declaração if ainda, e eu posso verificar se show menu é igual a true. E se for igual a dois Verdadeiro, então eu gostaria de dar a esta variável de menu de valor. E isso pode ser uma div com o menu, certo? E então agora, quando eu abri o menu, nós temos o menu, e quando eu fecho o menu, nós não temos o menu exibido mais. Então é assim que você simplesmente renderiza coisas condicionalmente em reagir. A próxima coisa que eu quero fazer é provavelmente apenas dar a este menu um pouco de estilo. Então eu vou usar mais algumas classes CSS tailwind aqui, e eu vou dar a isso uma posição de fixo e um B G fora branco para um fundo branco. E então eu também vou posicionar seu zero superior, que deve posicioná-lo no topo do nosso navegador. E então eu também vou dizer zeros esquerdos que estarão no canto superior esquerdo. E então vamos dizer W a. W 4-5 deve ser 80%. E agora, se eu voltar para a navegação aqui e eu abri meu menu agora temos nosso menu aberto e fechando no canto superior. Claro, eu também quero dar a esta outra aula de cada um. E quando eu menu está aberto, ele deve ocupar o completo com fora da nossa página, e você pode ver que não está completamente ocupando toda a largura, e isso é porque o pé está posicionado. Absolutamente O que queremos fazer é talvez apenas dar este índice Z fora. 50. Poderia trazer isso à tona. Ah, um pouco. E então agora eu sou menu é realmente exibido em cima do nosso pé. Nós provavelmente só queremos dar a isso uma sombra ah também. Então, há uma classe chamada Sombra em Tailwind, e isso apenas deu um pequeno estremecimento ao longo do lado ali. Ótima. Então agora temos um item de menu ou um componente de menu que está basicamente entrando e saindo. Ah, a próxima coisa que eu quero fazer é provavelmente apenas dar um pouco fora de um menu, mesquita ou uma sobreposição de menu, uh, apenas para separar um menu do fundo porque agora é branco sobre branco, e isso não é muito visível. Então o que eu vou fazer é também criar uma mesquita de cardápio, e então nós vamos, ah, dar valor a esse cardápio mascote também. E esta mesquita cardápio será outra definição. E isso vai ser um div vazio. Mas também terá uma classe fora BG preto, e também será corrigido. E também estará no canto superior esquerdo. Então, o topo zero deixou Sierra. Isto vai ser w cheio e h cheio e os 50. E agora, quando abrirmos nosso menu, uh, oops, precisamos ter certeza de que também mostramos isso aqui, e isso vai ter que estar acima deles em você. Ok, então agora quando abrimos nosso menu, temos um fundo preto, e então também temos nosso menu. Ah, claro, seria muito melhor se este fundo fosse um pouco transparente. Então o que nós vamos ter que fazer é nós vamos ter que adicionar em nossa própria cor para Tailwind CSS . Então eu vou até Tailwind, e eu vou apenas ir para Theme Extend e eu vou estender as cores de fundo e eu vou adicionar em uma cor de fundo fora do chá preto para preto transparente 54 50%. E então vamos dar a isso um valor RGB RGB um off 000 e, em seguida, vírgula 00.5 para uma transparência de 50% . E agora, a fim de fazer uso desta cor, eu vou voltar de sua navegação e vamos adicionar no último BG preto t 50. Mas vou ter de reconstruir o meu CSS. Eu vou voltar para a linha de comando aqui, e eu estou indo para executar Yang Bulled CSS e isso deve construir S e Sanofi deste ano voltar para o meu aplicativo. Eu tenho uma cor preta ligeiramente transparente aqui e agora o que eu gostaria de fazer é quando eu clicar neste preto, ele deve fechar meu menu. Então o que eu quero fazer é adicionar em um em Click Listener e nós estamos Going Teoh também definir isso para uma função de seta, e esta função de seta também vai definir show menu. Mas ele sempre vai fornecer o valor off false, que significa que deve sempre certificar-se de que o menu é fechado sempre que você clicar nele . Então, se abrirmos o menu agora e, em seguida, clicar no fundo preto, você pode ver que isso fecha o menu. Claro, se eu abrir o menu e clicar com na parte branca do nosso menu, isso não é fluxo visitando o menu. Então agora temos um menu que está abrindo e fechando no próximo vídeo, vamos dar uma olhada em fazer as animações. 7. Anime o menu móvel: Agora vamos dar um chapéu de olhar fazendo esse menu animar dentro e fora sem problemas. E antes de começar, eu só quero mencionar que todo o código para esta série tutorial pode ser encontrado na minha página de sair . Então, por favor, dê uma olhada na descrição do vídeo abaixo para obter um link para o meu YouTube para o meu perfil get up . E agora vamos pular direto para o sartorial. Então, para fazer transições suaves, vou fazer uso de um pacote para Reacts chamado Reacts Spring. E se olharmos para baixo e olharmos para a transição de uso, um P I, você pode ver que há um monte de pequenas transições legais que serão capazes de usar, como este sinal de paz desvanecendo para dentro e para fora. E isso é realmente o que estamos mais interessados no momento. Porque este é o exemplo para montagem e passeio UNM. Um único componente revela, que é exatamente o que é o nosso menu. É um componente que está montando e montando fora, e a propósito, há um monte de outros exemplos aqui em baixo. Se você quiser dar uma olhada no que reagir primavera é capaz de off. Mas, por enquanto, vamos dar uma olhada em como usar isso. Então o que vamos fazer é copiar esta importação e vamos acelerar isso para o topo dos nossos componentes. E, claro, quando eu salvar isso, ele deve quebrar nosso aplicativo. E isso é porque eu preciso adicionar primavera reagir ao nosso projeto com yon add. Então vamos voltar para o meu terminal e eu estou indo para yon adicionar reagir primavera e claro, isso deve instalá-lo para mim. Então agora eu tenho primavera no meu projeto. A próxima coisa que quero fazer é começar a fazer uso dela. Mas eu acho que antes de fazer isso, eu vou fazer Teoh apenas fazer que eu vou salvar essas aulas em algum lugar. Então nós temos os óculos de menu A que eu coloquei lá e, em seguida, eu também vou colocar as classes de máscara aqui é bem, e isso é que eu estou apenas guardando para mais tarde. Mas agora o que eu posso fazer é me livrar de todo o nosso html atual envolvido para o menu na mesquita, e então nós também podemos nos livrar disso. E então nós quase temos um novo componente que não faz quase nada mais. Mas o que queremos fazer é olhar para a instalação na uma fora deste componente aqui, para que você possa ver que eles começam criando uma variável de estado. E nós já temos essa variável de estado aqui. Então eu não vou me preocupar muito em copiar isso. A próxima coisa que eles fazem é fazer uma variável para as transições. Então eu vou, Teoh, colocar isso no meu projeto. E acho que podemos consertar o recuo disso. A próxima coisa que eu quero fazer é que eu realmente vou precisar mudar esta variável aqui mostrar porque minha variável é mostrar menu que deve corrigir esse problema. A Andi. Agora o que precisamos fazer é dar uma olhada nas declarações de retorno. Vou copiar isto, e podemos colar isto aqui. Mas o que eles estão fazendo é que eles estão devolvendo um monte do Dave animado. Agora, nós realmente queremos todo esse código, mas queríamos dentro das navegações atuais. Eu vou pegar a transição, e nós vamos cortar isso e vamos abrir alguns colchetes aqui embaixo e colar isso . Em seguida, corrija o recuo um pouco. Vou me livrar da declaração de retorno. Ok, então espero que quando eu clicar no meu menu agora eu receba um pequeno sinal de paz que desaparece para dentro e para fora. É pequeno, mas está lá, e funciona. Então o que eu gostaria de fazer agora é em vez de usar esta div animada com o sinal da paz, nós podemos nos livrar disso. E eu vou quebrar isso um pouco, então vamos apenas organizar meu JSX e agora preencher meu menu. O que eu vou fazer é pegar o CSS que estamos salvando e eu vou colar isso aqui. E então eu vou apenas adicionar um texto para dizer que este é o menu. E agora, quando eu clico no meu menu, devemos ter este menu a desaparecer e a desaparecer. Então é isso que eu quero. Exceto que eu gostaria que isso deslizasse para dentro e para fora. Então vamos conseguir isso alterando as transições. Embora eu acho que o desbotamento funciona perfeitamente para o nosso fundo preto que deve ir atrás do menu. Então o que eu vou fazer é copiar isto para baixo ou para cima, e então esta primeira transição vai ser o nosso fundo negro sobre que eram as nossas mesquitas. Eu só vou ter essa aula e acelerar isso até aqui e nós podemos nos livrar disso. Então este vai ser apenas um fundo preto vazio que se desvanece para dentro e para fora. Então, agora, quando eu clicar sobre isso, você pode ver que alimentos de fundo preto em, bem como eu menu em. Claro, não está mais fechando. Então o que eu gostaria de fazer é adicionar um ouvinte não cortado aqui em baixo apenas para dizer que isso deve mais perto. Vai ser uma função de seta nesta busca deve definir Sherman vocês dois falsos. E ele deve sempre definir mostrar muitos para falso porque ele deve estar sempre fechando. O menu nunca deve estar abrindo limitando. Então agora Ah, isso desaparece. E se eu clicar nele, ele também fecha o menu. Agora, o que devemos fazer é provavelmente olhar para mudar essas transições. Nós podemos nos livrar desses comentários, e eu vou fazer uma mesquita transições para a nossa mesquita, e nós vamos aplicar essas transições mesquitas aqui. E então isso é na verdade apenas um mapa de matriz. Felizmente, você está um pouco familiarizado com javascript, e você sabe como mapear um raise funciona. E, em seguida, a próxima coisa que queremos fazer é copiar esta constante para baixo e esta será a transição do menu . Vamos copiar o nome da variável e pagaremos isso. Sim, e então vamos percorrer as transições variáveis. Exceto que agora o que queremos fazer é mudar o de, sair e capacidade. Então eu já preparei um monte de transições que eu vou apenas colar. O que isso faz é que ele irá de uma passagem e zero e, em seguida, também transformá-lo de 100 negativos no eixo X para opacidade um e também transformá-lo para 0% no eixo X, o que significa que isso deve deslizar para dentro do eixo X será do lado esquerdo do tela. Eso Now, se voltarmos ao nosso menu e abrirmos isso, você pode ver que o menu desliza para dentro e desliza para fora. Perfeito. Agora tudo o que precisamos fazer é adicionar alguns toques finais. Então o que eu vou fazer é apenas ir até o menu aqui, e é também dar que algum preenchimento e então nós vamos talvez adicionar em uma tag span com um pouco de uma batida ou apenas algo que diz Este é o menu. E então nós também podemos adicionar em um nordeste com alguns itens de lista como a página inicial, e que deve ser praticamente isso. Então, se abrirmos o menu Ops. Temos alguns erros de digitação lá. Então deve haver o cardápio. E eu também quero que isso tenha um nome de classe fora da frente. Negrito. Então, agora, se abrirmos isso, teremos um menu. 8. Roteamento de páginas com o React Router: Agora vamos usar reagir roteador para alterar o conteúdo em nossa página e também para alterar o URL aparecem no navegador sem realmente atualizar a página. Então, se eu der uma olhada no menu aqui, se abrirmos isso, podemos ir para a página sobre e há um novo conteúdo e a garota mudou. E se eu for para a página inicial, há conteúdo diferente e o U.R L mudou de volta para a página inicial, Ural. Então você notará que tudo isso está acontecendo sem que nossa página da Web tenha que atualizar. Começando com o código do tutorial anterior, eu vou adicionar React rotter ao nosso projeto. Então vamos pular para o terminal e eu vou adicionar reagir em torno de, uh, burro. Então, a razão pela qual há um reagir Rod Adam é porque Reagir realmente tem dois pacotes. Há reagir, podre burro para sites e, em seguida, reagir em torno de um nativo para APS nativo. Eles funcionam um pouco diferente, mas você usa a versão idiota para uma web. Agora que temos o pacote adicionado ao nosso projeto, podemos ir em frente e importar isso para o gênio APP e dar uma olhada em como isso funciona agora, imediatamente, há algumas coisas para importar, então eu estou apenas vai ritmo thes importações e você pode ver que estamos importando roteador navegador como roteador. Então este é apenas um pequeno atalho agradável para nos permitir usar o elemento roteador como este em vez de ter que digitar fora, navegar Arata. Então temos interruptores, rotas e ligações. Mas vamos dar uma olhada nos links primeiro porque um link obviamente vai nos ligar a outra página. Então o que eu quero fazer é talvez vamos criar uma lista fora do comum aqui e, em seguida, um item de lista , e então vamos criar um link, e este link leva em um prop, que é a página Thebe que queremos vincular para que o prop é chamado para, e então podemos simplesmente ter em um u R L aqui. Então, se quisermos que este link para a página inicial, então vamos apenas adicionar uma barra e vamos criar o link para a página inicial. Nós também podemos adicionar alguns estilos para isso usando o prop nome da classe em e adicionando em um nome de classe então eu vou dizer Texto azul 500 que é um Kloss tailwind. Então, se eu salvar isso agora, tudo deveria estar fora, e isso é porque estamos fazendo uso dessa tag de link fora de um roteador. Portanto, há uma maneira muito específica que temos de fazer as coisas quando trabalhamos com reagir. Rana. E uma delas é certificar-se de que nossa lista está sempre dentro do roteador assim, ou os links estão sempre dentro do bastante assim? Então agora eu tenho um link que me liga à página inicial. Então, obviamente, isso não é nada de especial porque nós só temos uma página inicial no momento. Então vamos em frente e adicionar em outro link e vai fazer este um link para cerca e, em seguida vamos mudar o texto aqui para cerca também. Logo depois que eu clicar na página sobre, você pode ver que a URL muda aqui na parte superior do navegador. Andi mudando de volta para casa que altera o URL novamente. Então nós temos uma página inicial e temos uma página sobre, mas você vai notar que nenhum fora do conteúdo na página muda sempre que as rotas modo que é realmente quer interrupções e rotas desativadas. Além disso, vamos dar uma olhada em como usá-los, e o que eu vou fazer é logo abaixo da minha lista aqui. Vamos abrir uma etiqueta de comutação dentro desta etiqueta de comutação. Vamos colocar algumas rotas. Então vamos criar uma rota para a home page, e esta rota vai levar em um prop chamado Path, e vamos definir isso igual a uma string off barra para a home page, e então vamos fazer exatamente a mesma coisa para a página sobre. Mas o caminho para as páginas sobre, claro, barra sobre então o que está acontecendo aqui é nosso switch vai procurar em torno disso, corresponde a este caminho e, em seguida, exibir o conteúdo dentro dessa rota. Então vamos acabar com isso. E dentro das rotas da página inicial, podemos criar um H. Eu vou copiar isso indo para baixo e vou fazer outra batida como essa para a página sobre . Então, se salvarmos isso e dermos uma olhada nisso no navegador e alternarmos entre páginas, você notará que a página inicial é agora o único conteúdo que está mostrando, não importa que página estamos. Então a razão para isso é porque a rota de barra aqui sempre corresponderá a todas as outras rotas em nosso aplicativo. Então essa é apenas a maneira de reagir em vez funciona. A menos que você decida dizer, Ei, eu só quero que esta rota seja exibida se esta for uma correspondência exata do Mac para a página inicial, então você só precisa adicionar o adereço exato aqui. E então isso significará que a rota no conteúdo da página inicial só será exibida na página inicial. Então, agora, dando uma olhada nisso no navegador. Se formos para a página inicial com mas o conteúdo da página inicial e se formos para a página sobre, temos o conteúdo da página sobre. Agora vamos dar uma olhada. Adicione mover este menu para os nossos componentes de menu em vez de ter essa exibição no corpo fora de nossa página. Então o que eu quero fazer é pegar essa lista ordenada, e vamos colar isso em nosso arquivo de navegação sobre a lista que tínhamos anteriormente E eu só vou consertar o recuo aqui um pouco, . mas agora, se eu salvar isso, você pode ver que nós temos Link é indefinido. Então nós só precisamos ter certeza de que estamos usando esta importação em nossa navegação no topo da página aqui. Mas não precisamos de nenhuma das outras coisas. Só precisamos da ligação. E se guardarmos isso agora, agora, provavelmente teremos outra era quando abrirmos nosso menu. E isso é que o link não deve ser usado fora de um ataque de rota. E isso é porque se voltarmos para o aplicativo sim, nossos links estão em ah, componentes de cabeçalho. Então o que precisamos fazer é levar todo o conteúdo fora dessa rota uma tag, e vamos colocar isso dentro do roteador. E eu vou fazer exatamente a mesma coisa para o meu pé também. Então vamos colocar isso dentro do roteador também. E agora, se salvarmos isso agora deve estar funcionando para que possamos abrir nosso menu. Mas agora temos outro problema. Onde quando mudamos a página inicial, o U R L muda, e se eu fechar o menu, eu posso ver que eu estou realmente na página inicial. E se eu for para a página sobre, a URL muda. E se eu fechar o menu, posso ver que estou na página sobre. Mas o menu está encerrando direito. Você esperaria que quando você clicar no link que o menu deve realmente fechar por si só . Então o que precisamos fazer aqui é voltar para sua navegação e passar para cada um desses links em. Vamos, na verdade, quebrar isso um pouco para que seja mais fácil de ler. E o que queremos fazer é que vamos ter que vamos adicionar em um ouvinte unclipped em cada um desses links, então vamos adicionar em um ouvinte unclipped e vamos definir isso igual a uma função de seta JavaScript . E isso vai definir Sherman Year Teoh falso. Então, isso irá fechar o menu. E nós vamos fazer exatamente a mesma coisa para todos os outros itens do menu dentro do nosso menu . Mas nós podemos realmente limpar isso um pouco mais porque você vai notar que este arquivo está realmente ficando meio longo. Esta navegação arquivado e este menu é realmente tudo localizado em um monte de transições de menu e outros javascript. E assim, para simplificar isso para o próximo desenvolvedor que quer simplesmente adicionar um item de menu, podemos pegar todo este menu e podemos colocar isso em outro componente. Então o que eu vou fazer é minha criação e você, uh, arquivar e vai chamar esse menu de navegação ponto Js e simplesmente adicionar isso como na exportação. Então agora podemos realmente importar este menu de navegação para o nosso arquivo de navegação. Então o que eu vou fazer é apenas ir até o topo aqui e importar menu de navegação do menu de navegação de ponto barra e nós podemos fazer uso disso aqui em baixo. Ótima. Então, qual link não está definido novamente? Isso é porque não estamos mais usando esse importante aqui. Na verdade, estamos fazendo uso disso no menu de navegação reagir. E agora você pode ver que este arquivo está realmente parecendo muito mais limpo, muito mais simples. Se alguém quiser mudar um item de menu, tudo o que precisa fazer é ir para o menu de navegação e eles podem ver que há apenas ah na lista ordenada com um monte de itens de lista. E se eles quisessem, eles poderiam copiar um para baixo e adicionar e você item de menu sempre que quisessem. Então, isso é obviamente muito mais limpo para trabalhar com para qualquer outra pessoa que começar a usar nosso aplicativo. Mas, uh, agora você vai notar que nós temos o próximo problema, que é que o menu show set não está definido. Então o que estamos tentando fazer é que estamos tentando disparar um gancho ou um setter do componente do menu de navegação . Então o que precisamos fazer aqui é simplesmente passar isso como um adereço. Então, clique no que eu quero fazer. Quero que o menu feche. Então vamos aceitar alguns adereços aqui e no clique deste irá passar em adereços Iniciar Fechar menu, que é um prop que atualmente não existe, mas vai colar isso aqui, trazê-la de volta para o menu de navegação, e em nosso menu de navegação, podemos simplesmente adicionar o prop menu fechar e definir que igual a algum script Java. E o JavaScript que vamos definir que igual a é a função de seta offset show menu como false. Então o que estavam efetivamente fazendo aqui é que estamos passando essa função para o nosso componente filho nosso componente de menu de navegação. E agora, quando abrimos o nosso menu e clicar na página sobre, que ainda deve fechar o menu e clicar na página inicial ainda deve fechar o menu . E agora, provavelmente, podemos adicionar alguns retoques finais. Então, em nosso link, eu vou adicionar em um preenchimento no eixo Y fora de três. Eu também vou adicionar em uma borda no topo e uma borda na parte inferior. E então eu também vou realmente, você sabe o que eu acho que é isso. Acho que vou fazer essa aula e copiar isso para a minha cerca. E podemos nos livrar da fronteira no topo porque isso pode duplicar fronteiras. Mas agora, se eu abrir meu menu Ah, vejo que temos as bordas, mas é meio que exibido em texto. Então vamos mudar a div o span, aparecer para um div. E então nós também podemos ter certeza de que esses, uh, links são exibidos como implementos de nível de bloco. Vou adicionar uma aula de bloco, e isso deve criar um pouco de espaçamento. Então nós temos agora espaçamento e bordas Eu acho que a próxima coisa que nós queremos fazer é talvez no menu aqui no mesmo preenchimento no eixo Y fora três. E, uh, isso está parecendo muito melhor. E nós podemos realmente apenas mudar isso para nome AP, bem como um toque final. Podemos cuidar do conteúdo dentro da visão principal do nosso arquivo. Então o que eu vou fazer é ir até Apthe. Sim, e vamos limpar tudo isso um pouco. Então vamos criar uma nova pasta e eu vou chamar essa visualização de pasta, e isso vai manter todas as nossas visões fora. Então o que eu vou fazer é criar um novo arquivo para o conteúdo da página inicial e vamos chamar isso Js home. E então eu vou criar outro novo arquivo para o conteúdo da página sobre e vamos chamar isso sobre Js. E estes são, é claro, apenas vão usar alguma placa padrão de reação. Então eu vou apenas copiar esse boilerplate sobre a página inicial e nós só temos que mudar o nome da função e o nome da exportação também. Então, agora que eu tenho esses dois arquivos, eu posso importá-los para o meu aplicativo e eu acho que apenas para arrumar as coisas um pouco O que eu vou fazer é mover o navegador, importar para o topo da página ali, e então criaremos outra importação para a nossa página inicial e que será importada da página inicial de visualizações. E então nós vamos duplicar isso para baixo e vamos importar sobre o sobre para você. E agora podemos pegar este título para a página inicial e colar isso em nosso conteúdo real da página inicial . E podemos fazer exatamente a mesma coisa para isso sobre bater na página e pagar isso no conteúdo da página sobre. E, de fato, se quisermos um pouco mais de informação na página sobre, tudo isso JSX pode ir até aqui e talvez apenas colocar uma margem na parte inferior desse cabeçalho. E então faremos a mesma coisa para a página inicial. Mas o que eu vou fazer é pegar o componente Olá mundo que está na verdade em nosso arquivo APP Js no momento e vai acelerar isso na página inicial e vai fazer uso desse componente Olá mundo aqui em baixo. Então vamos salvar estes E agora vamos voltar para o nosso arquivo Js aplicativo em e dentro da rota casa vai usar o componente de casa ou a vista de casa. E dentro da página sobre vai usar o componente about ou bem, o acima você. E então agora você considera uma era aqui o módulo Home Js não pode resolver componentes Olá mundo Então isso é só porque o caminho agora é alterado em relação aos componentes do mundo Olá que na verdade tem que ir para ponto, ponto, componentes de barra e olá, mundo. Ótima. Então, dando uma olhada nisso agora nós temos o conteúdo da página inicial e com o conteúdo da página sobre e eu só quero adicionar um pouco de preenchimento em torno do recipiente lá. Então eu vou tomar este interruptor inteiro e eu vou criar uma div que eu vou colocar isso dentro fora e isso pode ter uma classe de p três p traço três e isso vai corrigir o espaçamento um pouco. Então, o que tudo isso significa é que agora, sempre que queremos criar uma nova página para nossa visão, enfraquecer simplesmente copiar uma dessas rotas para baixo em um novo caminho para, digamos, a página Contact US, e então podemos criar uma visão de contato dos EUA e importar que entre em contato conosco. Ah, vista aqui embaixo. E isso é tão fácil quanto é criar uma nova página em nosso reagir. Mas, por enquanto, é onde vou terminar este vídeo. 9. Realize dados de uma API Parte 1: neste vídeo, vamos dar uma olhada em enviar uma solicitação http para um A p i para buscar dados e exibir isso em nossa página. Então, se eu atualizar isso, você notará que temos um pequeno símbolo de carregamento e, em seguida, os dados são carregados a partir desta solicitação http, você pode ver isso na guia rede no Google Chrome. E, de fato, podemos ver um exemplo melhor disso se simularmos três g lentos e carregarmos isso novamente, então você notará que demora um pouco mais, mas temos o símbolo de carregamento ligado. Em seguida, temos nossos dados carregando na página também estará olhando para parâmetros de rota dinâmica para fazer isso acontecer. Então, se eu fosse carregar o produto para, então nós teremos um produto completamente diferente carregado. Agora, antes que você possa seguir junto com este tutorial, você vai precisar ter um Jason a p I que você pode se conectar e buscar toda a perseguição e dados. Então, se você quiser aprender a criar o seu próprio um p eu tenho um tutorial completo Siris sobre como fazer isso com Lauraville e que é um curso livre. Então eu vou ligar para isso na descrição do vídeo fora deste vídeo. Vá em frente e dê uma olhada nele e você aprenderá a criar um projeto inteiro que retornará todos os dados que desejar. E, claro, você foi capaz de armazenar dados, etc. Mas para o propósito deste tutorial e manter este tutorial acessível a todos, eu vou mostrar-lhe um grande recurso livre que é chamado Mark A P I. E o que o Celozzi fazer é configurar um monte off marca AP olhos. Na verdade, você só tem um grátis, mas tudo bem. Isso é perfeito para este vídeo. E o que eu vou fazer é entrar e deixar eu te mostrar o que eu preparei para este vídeo. Então eu acabei de configurar uma lista de produtos com um monte de produtos, e esses produtos têm algumas imagens. Agora, se eu der uma olhada nos meus dados, eu acho que vamos clicar no botão de edição lá. Este é o mesmo que eu tenho para este tutoriais. Eu tenho produtos e podemos obter produtos com um I d. específico adicionando isso ao URL. Também temos postar colocando solicitações de exclusão. Se quisermos colocar mais alguns dados como editar dados no banco de dados e excluir dados do nosso banco de dados, então estas são as colunas que eu tenho no meu p I. Então nós temos um I D. Nós temos criado em Nós temos um nome, um material que o produto é feito a partir de um preço e todos estes são gerados com Vega Js. Então está gerando nomes falsos para nós e preços falsos. E então nós também temos um recurso de imagens que é um recurso filho, e isso é apenas este recurso aqui em baixo. Então, se fôssemos contar, dê uma olhada em um produto específico em nosso banco de dados. Podemos visitar um produto P I V One e, em seguida, a idéia do produto ser quatro. Ou vamos apenas dizer Vamos olhar para o terceiro produto em e estes são os dados que retornamos . Agora que você tem um A P I para se conectar, a próxima coisa que vamos fazer é abrir um novo arquivo. Então eu vou criar um novo arquivo chamado produto dot Js e esta vai ser a página do produto para o nosso aplicativo e eu vou apenas colar em algum código padrão reagir boilerplate aqui. A próxima coisa que eu quero fazer é ir para ap Js e adicionar essa página de produto aqui. Então vamos adicionar isso. E isso vai importar os componentes do produto. Então só precisamos ter certeza de que importamos isso aqui também. E agora vamos mudar o caminho. Então, vamos acessar este produto acessando os produtos de URL. E então nós vamos adicionar um curinga para a menina adicionando dois pontos e então o nome do curinga que estava passando, que neste caso, vai ser um I d. e se nós salvarmos isso agora, devemos ser capazes de acessar nosso produto nos produtos que você, Earl e, em seguida, adicionar um I d para o URL também. Então eu dei três i d dois que seja. E isso deve nos devolver a página do produto. Claro, ainda não sabemos onde nos pacientes do produto, então vamos adicionar um h só para dizer que esta é a página do produto. E, claro, agora sabemos que estamos lá. Eso nós vamos estar olhando para substituir esses dados pelo nome real do produto como eles estão indo. Mas para fazer isso, primeiro precisamos enviar através de um pedido para o nosso A p i para Fitch todos esses dados. Para enviar esse pedido, vamos fazer uso de uma biblioteca http chamada Axios, que é apenas um pacote bocejo, para que possamos copiar isso. Vamos lá. E podemos ir ao nosso terminal e adicionar Axios. E agora que você tem acesso em seu projeto, você pode ir até o arquivo. Você quer usar isso e importar Axios de Axios, e o que vamos fazer é usar Axios para enviar 31 dos pedidos http que você pode usar Axios para começar a postar para excluir ou qualquer um dos diferentes tipos de solicitações disponíveis. Mas neste caso, porque queremos uma busca de dados do nosso a p eu vamos estar fazendo uso de um pedido get e este pedido get leva em um turbilhão. Então o que queremos fazer é aceitar isso, você, você, Earl, e vamos encarar isso aqui. Claro que, para limpar um pouco as coisas, o que eu vou fazer é criar uma constante e esta constante será um u r l. E nós vamos definir isso igual à versão corda do nosso euro aqui em cima. Isso é talvez apenas perto que para que possamos ver isso um pouco melhor. Mas essa é a variável. E agora o que queremos fazer é Axios. assim que tivermos Eassim que tivermosesse euro, isso vai retornar uma promessa para que possamos acorrentar em uma função disso. Então a função pode, uh, nos dar de volta a resposta desse pedido e vamos executar uma função nessa resposta. E nessa resposta, vamos definir uma variável. Então o que eu realmente quero fazer é que eu quero criar outra variável de estado aparecer então vamos chamar este produto const Ah. Então vamos criar uma variável de produto e, em seguida, vamos criar um método para sentar esse produto chamado Set produto e vamos definir isso igual à função de estado de uso de reagir e vamos padrão isso para saber. Então, por padrão, nosso produto será não. Mas uma vez que enviamos através desta solicitação Axios, vamos definir o produto para os dados de início da resposta. Então vamos obter os dados de resposta do nosso pedido. Então, se eu salvar isso agora e voltar para o nosso projeto, você vai notar que nós poderíamos. Bem, primeiro lugar, você notará na guia da rede. Visto que eu tenho isso aberto, estamos enviando através de um pedido a cada segundo. E isso vai ficar um pouco demais. Claro que você não quer. Você está fazendo isso. Então este é um inseto enorme. Mas a razão pela qual isso acontece é porque estamos fazendo uso desta solicitação Axios dentro da função de produtos. Então o que precisamos fazer é realmente precisamos do Teoh. Corte isso, e precisamos fazer uso disso dentro de outro gancho de reação chamado efeito de uso. Então eu vou adicionar isso ao meu projeto, e nós vamos ter certeza de que isso é importado aqui, e então nós vamos definir isso para uma função de seta. Então esta seta Funchal com este gancho realmente leva em dois argumentos o 1º 1 é uma função fora do código que queremos executar. E então o segundo argumento é, ah, variável que queremos monitorar. E se essa variável alguma vez mudar, então é isso que queremos usar para executar novamente a solicitação. Então, por enquanto, podemos adicionar o U. R L nele. E então agora, se este U R L mudar, é quando o código dentro do efeito será reexecutado. Então o que vamos fazer é agilizar o pedido de acesso aqui. E quando salvarmos isso agora, devemos ter nossa solicitação de rede apenas sendo executada uma vez. E nós devemos ter este produto de conjunto. Ou devemos ter esses dados no produto definido para que eu possa experimentar Coloque isso em meus modelos aqui por estão colocando o nome do produto. E, claro, se eu salvar isso agora, teremos uma era enorme. Não é possível obter o nome da propriedade indefinido. E isso porque nosso produto primeiro é carregado como não. E vamos retornar um modelo que está tentando usar o nome do produto. Então o que precisamos fazer para contornar isso é que podemos criar uma declaração if para verificar se há realmente, uh, uh, um valor no produto para verificar se há realmente dados lá e, em seguida, retornar o nome do nosso produto . E então nós também podemos ter um retorno padrão aqui em baixo, uh, apenas uma div vazia para que possamos agarrar isso na cara que dentro, mas remover o cabeçalho com esses dados nele. Então você vai notar que quando eu realmente salvei isso agora e nós atualizamos, há um breve segundo em que não há dados, e então nós temos a saída do nome do produto. Então nós temos este modelo primeiro, e então nós realmente temos este modelo. Outra maneira de se locomover que é apenas criar uma variável chamada conteúdo para que possamos dizer conteúdo deixe igual a No. E então podemos produzir essa variável de conteúdo aqui embaixo. Mas na declaração se, poderíamos mudar o conteúdo para ser o, uh, o conteúdo que queríamos retornar, que nesse caso, foi na verdade ele fez com o título que eu queria para cima. Então, na verdade, é realmente apenas pegar Bem, vamos pegar todo o cabeçalho na mudança que variável para ser isso Ok. E isso basicamente faz a mesma coisa. - Não. Podemos acessar a prisão de nossos dados de produto e criar um pequeno modelo sobre o que eu fiz é que eu já preparei um pequeno modelo para nós. Vou colar no JSX no caminho. Estou captando todas essas variáveis. Se dermos uma olhada no pedido aqui, você pode ver que temos uma idéia. Nome do preço do material. Então essas são todas as coisas que eu posso acessar no caso das imagens. Isto é, na verdade, um array. Então o que eu estou fazendo é que eu estou apenas recebendo a primeira imagem na matriz e, em seguida, obtendo a imagem que você é l nessa imagem. E se olharmos para isso nos dados, eu estou apenas retornando APICs uma imagem, que retorna uma imagem aleatória cada vez. Eso Sempre que eu salvar este modelo agora, devemos ter ah, produto, e então devemos ter uma imagem aleatória. E toda vez que eu carregar a página, é claro, isso retornará uma imagem diferente. Agora, a próxima coisa que queremos fazer é nós. Na verdade, quando eu olho para fazer este dinâmico porque o problema é que sempre que eu acessar este produto, menina não importa se eu estou usando o eu d de um ou a idéia para eu estou sempre recebendo a mesma camiseta de granito artesanal. E isso é porque nós temos codificado duro que eu d aqui para o URL. Então o que eu vou fazer em vez disso é eu vou criar outra constante, e nós vamos chamar isso de I D. E na verdade, nós vamos fazer uso da estruturação JavaScript. Então eu estou fazendo Teoh criar uma variável aqui chamada I D. E eu vou definir isso igual a outro gancho que é chamado de Haram Usado. E isso é um gancho que pegamos do roteador do reator burro. E o que isso nos permite fazer é, uh , bem, ele vai apenas retornar todos os vocês são todos os parâmetros aqui em cima, e neste caso, ele vai nos dar que eu d. i d. A partir desses programas em. Agora podemos usar isso aqui, no final, fora de nossas forças. Eu estou indo Teoh ritmo em pequeno cifrão I D. Mas então nós precisamos cercar o resto de nossa string com ticks traseiros em vez de aspas , e assim que nos permitirá usar uma variável nas cordas Se nós salvarmos isso agora, devemos ser capazes de ter uma variável dinâmica na string na URL. Então, se eu for para o produto, eu deveria ter um atum macio feito à mão se eu for para o seu produto. Um. Eu tenho um produto diferente, que é incrível soft chips. E se eu for para o produto cinco, bem, eu tenho uma linda pizza de algodão, então agora estamos recebendo um produto dinâmico cada vez que mudamos a URL. 10. Realize dados de uma API Parte 2: Agora vamos dar uma olhada na criação de um símbolo de carregamento para enquanto nossos dados estão carregando no aplicativo, mas dando uma olhada no que temos atualmente. Se clicarmos no botão de atualização, há atualmente uma pequena parte do tempo em que poderíamos estar exibindo e carregando. E eu acho, vamos apenas simular três g eso estavam apenas imitando o dispositivo móvel de outra pessoa. Talvez tenham uma ligação à Internet muito lenta. Você notará que quando nosso aplicativo for carregado pela primeira vez, a pintura inicial acontece e então temos esse período em que fica em branco para uma boa, como um segundo ou dois segundos onde poderíamos realmente estar exibindo um carregador. Então daqui, até aqui, pode haver um símbolo de carregamento apenas para que o usuário saiba, Ei, nós estamos realmente enviando um pedido A P I e algo está acontecendo em segundo plano, mas os dados que devem ser exibido na página será exibido em breve, então vamos mudar isso de volta para estar online. E agora vamos dar uma olhada em como rastrear se a solicitação A P I está sendo carregada ou não. O que poderíamos fazer é transformar essa variável de estado atual em um objeto. Então agora vamos criar uma variável para carregar, e vamos definir que igual como falso por padrão. E então também criaremos dados e definiremos que não seja por padrão. E então agora, quando nós antes de buscar o nosso produto, vai definir o carregamento para ser verdade. E então armazenaremos todos os dados do nosso produto em dados. Então, a fim de fazer isso, nós vamos ter que modificar este método um pouco. Então, antes de enviar meu pedido, o que eu realmente quero fazer aqui é eu quero mudar de estado para que nós tenhamos um valor off loading para ser verdadeiro. E então queremos ter um valor fora dos dados ou o que quer que esteja em nosso valor de dados para não ser certo. E então quando enviarmos através da solicitação rápida e sabemos que essa solicitação é bem-sucedida , vamos fazer a mesma coisa aqui. Então vamos definir o carregamento de volta para falso, porque agora o APP fez o carregamento. A solicitação está concluída e vamos armazenar a resposta que os dados na variável de dados agora, é claro, se eu salvar isso devemos quebrar nosso aplicativo. E isso é porque não podemos ler propriedade indefinida, fora de zero ou propriedade zero de indefinido. Então isso é porque isso agora precisa ser alterado para ser dados de ponto do produto, e nós vamos ter que mudar todas as outras referências para as informações do produto. Então vamos apenas acompanhar todos eles. E, claro, em nossa declaração se, vamos verificar se os dados do produto, certo? Então vamos dizer isso agora. Onda, temos um trabalho de novo, mas ainda não temos aquele símbolo de carregamento aparecendo. Então, o que queremos fazer agora? Eu acho que o que devemos fazer é criar uma declaração se aqui. Isso é uma afirmação criativa, e vamos verificar se o produto está carregando é igual a verdadeiro. E se o produto está carregando, é igual a verdadeiro, então vai mudar conteúdo para o nosso aplicativo para ser um parágrafo, e isso pode apenas dizer carregamento por enquanto. Então, agora, se salvarmos isso, você pode realmente ver que isso está aparecendo. Há um breve segundo em que temos o carregamento e, em seguida, o nosso produto é carregado, por isso é provavelmente muito melhor se nós alterarmos isso para usar um componente de carregamento, então eu vou fazer é eu vou abrir em, uh, meu editor aqui, e nós vamos abrir um novo arquivo, vai chamar esse ponto carregador Js e que precisa ter um l maiúsculo. E agora podemos colar em algum html para uma carga acima. Então tudo o que eu fiz aqui é que eu criei uma div com uma classe de carregador, e agora nós realmente precisamos adicionar isso ao nosso CSS. Então, uma maneira que podemos fazer isso é simplesmente passar para indexar, ver, avaliar e adicionar em qualquer um de nosso próprio CSS personalizado sob os utilitários Tailwind. E eu vou colar nesta classe de carregamento, que também tem alguns quadros chave para fazê-la girar. E isso é apenas um freeloader que eu peguei na Internet. Você pode realmente ah, Google carregando carregador CSS e você vai encontrar uma abundância de diferentes exemplos de carregamento CSS. Se eu salvar isso, eu vou ter que voltar para o meu terminal e vamos apenas matar o meu servidor e iniciar o meu servidor novamente, que irá executar o CSS negrito e em vez disso colocar este parágrafo de carregamento aqui, eu agora posso fazer uso fora do meu componente de carregamento que criamos. Então vamos abrir isso ou o quê? Eu chamo isso de carregador, certo? E isso precisa que o Teoh seja importado todos os anos. Tão grande. Então agora temos um pouco CSS Loda que está carregando na página agora, algo que ainda não pensamos muito é o que acontece se houver uma era. Então vamos tentar acessar um produto que não existe. Como, por exemplo, produto 90. Bem, agora que o produto não existe, e eu posso ver em minhas solicitações de rede que nós realmente temos uma era aqui, então isso não foi encontrado, mas nós não tratamos essa era em nosso aplicativo. Então agora temos apenas este símbolo de carregamento que continua a carregar para sempre. Então vamos dar uma olhada em como rastrear essa era. Então o que eu vou fazer é nas minhas variáveis de estado. Vamos adicionar uma era para monitorar quando há uma era, mas por padrão, vamos definir isso como falso. E então nós também vamos copiar isso e vamos acelerar isso aqui em produtos definidos ou antes de enviarmos através do nosso pedido. Também queremos que o nosso erro seja falso. E quando nossos pedidos foram passa e um sucesso. Podemos ter essa era também ser falsa porque sabemos que isso significa que a resposta foi, ah, bem sucedida, então nós realmente não temos nenhum erro. Mas porque Axios é uma biblioteca baseada em promessa, podemos fazer uso de uma declaração catch aqui porque podemos pegar uma promessa fracassada em. Vamos então ter uma era do nosso A p I e podemos executar uma função nessa era e, em seguida, também fazer a mesma coisa aqui, disse Produto. Mas neste caso, não teremos nenhum dado porque não estamos recebendo uma boa resposta do AP I. Então nossos dados serão “não”. E agora podemos definir a nossa era para ser verdadeira. Agora, normalmente, o que eu faço aqui é tentar usar os dados que vieram de R A P I e salvar isso e relatar isso ao usuário. Infelizmente, se dermos uma olhada nisso como vamos acessar produto 90 aqui, este um p I está apenas voltando, não encontrado. Não nos está a dar dados utilizáveis. Nem sequer está a fornecer isto como um Jason observa. Infelizmente, o relatório de erro sobre este um p eu não é tão grande, mas podemos apenas usar era definido como verdadeiro. E assim, na verdade, podemos simplesmente usar uma função de seta em vez da palavra era ali ou a resposta de erro ali. Ok, então agora devemos saber quando nossa variável ou quando nosso produto tem uma era. Então, se você voltar para o nosso aplicativo, vamos voltar e atualizar novamente e você verá que esse símbolo de carregamento não continua carregando para sempre. Nós temos uma era aqui. E se fôssemos verificar o nosso estado, na verdade, vamos fazer isso. Agora vamos aos nossos componentes e encontrar o componente do produto em nosso estado. Devemos ter um valor de erro fora verdadeiro sobre eles. Então o que podemos fazer agora é adicionar em outra declaração, se. Então nós já verificamos se o carregamento e já verificamos se o produto realmente tem dados, mas também podemos criar outra instrução if aqui para verificar se há uma era, e então podemos apenas retornar um pouco de HTML se houve uma era, então, neste caso, eu vou apenas retornar um parágrafo que diz que há waas em erro, por favor. Você estava fresco? Tentaremos de novo mais tarde. Algo assim, certo? Então, agora, se a resposta falhar, pelo menos temos um erro que pode ser relatado de volta ao usuário. Claro, quanto melhor o seu p. Eu posso lidar com erros no back-end. Você poderia repórter 404 ou dizer que o produto não existe. Neste caso, nós realmente não temos muitos dados para trabalhar com a partir do A p I. Não está nos dando nada dito para não encontrado de modo que não tão grande, mas pelo menos podemos lidar com isso desta maneira. 11. Como redefinir uma lista de dados de produtos: Agora vamos dar uma olhada em buscar uma lista inteira de produtos, e eu sei que essas fotos são os mesmos, mas temos títulos diferentes foram incríveis chips macios e atum macio artesanal. Os preços são diferentes, mas o que vamos fazer é buscar uma lista de produtos e, em seguida, ter esses links através da página do produto em. Volte para a página inicial, vamos buscar a lista novamente. Então, a fim de obter uma lista de produtos, se nós voltarmos para marcar um p I, nós acessamos isso com e cortar produtos. Vocês são todos, então eu realmente tenho isso aberto no meu navegador aqui. Então eu também adicionei algumas consultas de string aqui, mas os produtos de barra você, Earl vai nos dar uma lista de todos os nossos produtos. Desembalar gin ated sem limites. Então, há apenas um monte de produtos, você sabe, você pode querer realmente limitar isso. Então eu vou adicionar duas cordas Berries, que é página é igual a um, e limites é igual a 10. E isso nos dará 10 produtos na primeira página. Então agora devemos ter 10 de desconto nesses produtos. E se eu quiser ir para a página dois, então eu apenas mudo a paginação aqui em cima para página três, etc, e isso nos dará a próxima página de produtos. Então nós realmente temos um URL que podemos Pagine oito com. Então agora o que eu vou fazer é abrir nossa página inicial e eu vou substituir alguns dos conteúdos que estão aqui. A primeira coisa que queremos fazer é talvez tornar este título um pouco mais de produtos, amigáveis. Eu vou saltar de volta para o meu aplicativo em Vamos mudar o título aqui para ser algo como best-sellers e que, obviamente, é um pouco mais relacionado com produtos que vão obter uma lista de nossos best sellers 10 de nossos best sellers. E então podemos remover o componente Hello World porque não vamos precisar mais disso. Mas vamos fazer uso de algum conteúdo dinâmico, algo semelhante ao que temos na página do produto. Então vamos realmente abrir isso e nós provavelmente podemos comparar algumas das diferenças aqui, mas você pode ver que nós criamos conteúdo lead igual a não e dependendo do estado em que nossa solicitação Axios estava. Nós realmente mudamos o conteúdo e saída que na página vamos fazer a mesma coisa para a nossa página inicial, certo? Vamos subir, colocar uma variável chamada conteúdo aqui, e então podemos mudar dinamicamente isso. Então eu vou apenas declarar isso aqui em cima também. Então deixe o conteúdo igual. - Não. E isso ainda deve continuar funcionando. Acabamos de receber um título sem conteúdo na nossa página. Então a próxima coisa que queremos fazer é realmente queremos re usar um monte do que temos na página do produto porque queremos enviar através de um pedido Axios e buscar todos esses dados. Então o que eu vou fazer é copiar o que temos na página do produto. Vou copiar tudo isso para baixo e vamos ter um monte de erros aqui, então vamos ter que trabalhar através de todos eles à medida que avançamos. Mas eu também quero usar os efeitos de uso porque queremos enviar através de um pedido Axios. Então, vamos também puxar isso. E agora, porque estamos usando isso duas vezes em dois lugares diferentes. Pode fazer sentido extrair isso para um lugar onde possamos reutilizá-lo, mas vamos dar uma olhada em fazer isso em alguns minutos. Vamos pôr isto a funcionar por enquanto. Então, se eu bater no cofre, você vai notar que eu tenho alguns erros. Portanto, programas de bom uso não está definido. E isso é porque estamos usando um parâmetro U R l aqui em cima. Mas a nossa página inicial não tem nenhum “tu”, Earl. Então vamos nos livrar dessa linha. E se guardarmos isso agora, ainda teremos mais alguns erros. Então, ideias não definidas. Na verdade, vamos usar um “você “completamente diferente. Vamos usar essa garota aqui para conseguir uma lista de produtos. Então vamos realmente colar isso e isso vai se livrar dessa era. Então temos efeito de uso. Os estados de uso e Axios não são definidos. Então vamos voltar para a nossa página do produto e vai importar essas duas linhas e nós podemos realmente apenas acelerar isso aqui. Então nós temos reagir para usar o efeito de uso de estado e Axios todos os três desses. Então agora nós salvar Hey, gnome ou erros, Mas nós também enviou através de uma solicitação de rede para a página de produtos, e podemos muito dar uma olhada nisso. Então eu estou indo para produtos com uma página de um e um limite de 10 e isso nos deu 10 produtos do ano. Então, se você quiser dar uma olhada mais profunda nisso, nós temos uma matriz de 10 itens, e cada um desses itens tem as informações específicas do produto, então agora podemos realmente usar essa informação. Agora podemos começar a dar uma olhada em nossa colocação desses dados, e então vamos limpar nosso componente. É a primeira coisa que eu quero fazer é mudar a const aqui porque nós realmente vamos estar looping através de uma variedade de produtos. Nós não obtemos mais um produto começando mais de um produto, então ele vai ser produtos, e então vamos mudar o método aqui para ser produtos definidos. E, claro, vamos mudá-lo em todos os lugares onde estamos usando. Assim disse produtos que produtos e produtos definir. Então, se salvarmos isso agora, que ainda deve continuar funcionando, então a próxima coisa que queremos fazer é novamente pedir emprestado um pouco mais de conteúdo da página do produto. Então a primeira coisa que eu quero fazer é verificar se eles são alguns produtos e se eles não são, nós temos. Ou se os produtos tiverem uma era e também vamos pedir emprestado o carregamento. Então, se os produtos estão atualmente carregando, vamos começar com alguma coisa. Então vamos pegar esse conteúdo e acelerar isso aqui abaixo, onde nós realmente declaramos conteúdo. E vamos apenas verificar se há produtos dessa época e produtos que carregam. Então, se eu salvar isso agora, tudo bem, nós temos uma era. Carregamento não está definido, Então nós só precisamos ter certeza de que nós importa carga de ah ponto barra foi ponto, ponto, barra componentes e Loda. Ok, então agora nós realmente temos nossa carga parecendo muito bem. E nós também devemos ter uma era aparecendo muito bem se talvez ah, colocar no URL errado. Então nosso Cherestal também funciona. Ótima. Então agora sabemos que Thies para trabalhar. Vamos dar uma olhada em realmente obter o conteúdo. Então a última coisa que vai fazer é dar uma olhada nos produtos que a garota de dados e vai acelerar isso aqui e nós obviamente também vamos verificar se os produtos têm dados e se eles têm dados por enquanto, estes não vão realmente funcionar. Então, se eu salvar isso e deveria ter uma era para que o produto não fosse definido, isso é porque enquanto nós temos produtos lá, mas mesmo que eu mudasse esses nomes, eles não funcionariam. Então vamos apenas a saída lá, porque há alguns dados. E, claro, agora sabemos que há realmente alguns dados lá. Queremos fazer um loop através desses dados. Então, em vez de retornar uma div, vamos mapear através de produtos parar dados porque sabemos que isso é um array. Então os produtos ponto dados mapa ponto em. Então isso levará em argumentos. O primeiro argumento vai ser o nome singular para cada item que nós loop através, que vai ser produto em. O segundo item vai ser a chave. Então, esse é realmente o nosso índice fora de qual atual quais produtos estamos atualmente no array. E, em seguida, isso irá retornar algum HTML ou algum JSX em vez. Então o que podemos fazer aqui é então criar uma div e produzir o nome do produto atual, e isso vai ter que ser cercado por chaves. Então nós estamos recebendo esse produto daquele produto ali, e este produto é uma versão singular desse produto ou aquela variedade de produtos grande . Então agora nós realmente temos uma lista de todos os nossos nomes de produtos. A próxima coisa que queremos fazer é realmente criar um pequeno modelo agradável para isso. Eu acho que a melhor coisa a fazer para isso é simplesmente criar um cartão de produto. Então vamos abrir nossos arquivos aqui e em componentes. Vamos criar um novo arquivo e vamos chamar esse cartão de produto ponto Js. E assim isso vai realmente devolver um cartão de nossos produtos. E, claro, agora tudo o que eu preciso fazer é colar em algum padrão reagir coalhada caldeirada para criar um componente. E se guardarmos isso, podemos voltar para a página inicial, e eu posso substituir isso pelos meus componentes reais. Então vamos importar isso. Espero que seja importado aqui agora. Nós podemos fechar isso, e o que eu quero fazer é realmente eu quero, exceto em alguns adereços. Então vamos passar o produto como um adereço, e então começar a exibir todos os dados aqui para que pudéssemos voltar para a página inicial em Let's Pass in a Product Prop e que será o produto atual em que estamos. E se salvarmos isso, podemos voltar para o cartão do produto e podemos começar a colocar alguns desses dados. Então, se eu acessar adereços produto ponto esse nome, eu também posso acessar prop produto inicial no preço, e que deve produzir o nome eo preço. Então agora vamos realmente formar isso, e eu vou rapidamente apenas colar um pouco de coalhada um por um, e eu vou explicar como eu ir junto. Mas a primeira coisa que eu quero fazer é retornar uma div com uma borda e ele vai ter alguns cantos arredondados e vai ter estouro atingido, e ele também tem uma margem inferior na parte inferior do cartão. A próxima coisa que eu quero fazer é realmente eu quero produzir uma imagem de produto, e eu vou usar uma imagem de fundo. Então vamos apenas colar isso e você verá que estamos fazendo uso de um atributo de estilo aqui , e isso está tomando em um objeto, que é por isso que há chaves duplas e estamos passando por uma imagem de fundo. Então, essa é a propriedade CSS da imagem de fundo como um objeto e foram, em seguida, fornecendo em um turbilhão . Mas estamos fazendo uso fora de ticks para trás aqui para que possamos usar variáveis em uma string e, neste caso, que está passando na primeira imagem dentro da matriz de imagens do produto. Então, salvar isso nos dá uma imagem de fundo que deve carregar, e que tem cantos arredondados. A próxima coisa que eu quero fazer é que eu realmente quero que este def para ser um link que vai nos ligar para a página do produto. Então, o que vou fazer é colar isso. E então agora isso vai nos vincular à página do produto, fornecendo o argumento dos produtos que eu d aparecer na URL e novamente estamos fazendo uso de ticks de volta para que possamos passar uma variável como uma string em javascript. Então, salvar isso agora resultará em um erro. Então o que precisamos fazer é importar link de reagir Rodham no DSO Agora, esta imagem deve realmente ser um link. Se clicarmos nele. Deve nos levar até a página do produto. Então, a segunda imagem Emma nos levou ao produto para. E se voltarmos para uma dessas outras imagens aqui em baixo que nos leva ao produto para a próxima coisa que você vai notar é agora que nós podemos realmente rolar, meu rodapé está rolando para cima da página, então vamos dar uma olhada em corrigir isso no final do vídeo. Mas, por enquanto, vamos continuar consertando este cartão. Então a próxima coisa que eu quero fazer é criar um DIV com preenchimento fora três, e então isso vai abrigar o resto fora de nossos produtos. Conteúdo é a primeira coisa que eu quero fazer é colar nos produtos batendo, e isso tem alguns óculos CSS apenas para torná-lo negrito e grande. E então estamos ligando para o mesmo link que temos aqui em cima, que é apenas para a página do produto com o argumento fora do produto I d. Nós também temos o nome do produto e o título. A próxima coisa que vamos fazer é adicionar e o preço abaixo desse título, vamos inventar isso e a última coisa que eu quero fazer. Ou segunda última coisa que eu quero fazer é adicionar na descrição do produto, Então salvar isso agora deve nos dar um título, um preço e uma descrição em então eu acho que também podemos adicionar em um botão na parte inferior do nosso cartão. Então isso vai ser apenas um link com algumas classes para fazer com que pareça um botão, e ele vai ter a exibição de texto, então nós salvamos isso. Agora temos um cartão que, quando clicamos no botão Ver, nos leva através de você para a página do produto. Então, agora, se dermos uma olhada no console, vocês notarão que temos uma lista deve ter um E. único então há um aviso no cônsul aqui. E isso é só porque sempre que você trabalha com um loop na reação, você está percorrendo elementos. O elemento de nível superior precisa ter uma chave que reage, pode identificar esse elemento e quando re renderizar esse elemento. Então o que queremos fazer é apenas adicionar uma chave, e podemos definir isso igual a chave. Neste caso, esse é o índice fora do nosso array. Nós também poderia se livrar dessa chave em si e apenas usou o ponto do produto i d como a chave em vez e salvar que vai se livrar dessa era. E então agora não temos nenhum erro lá. Mas ainda temos esse problema estranho com o rodapé, então vamos resolver isso. E acho que para fazer isso, vamos ter que abrir o AP Js. A razão pela qual isso está acontecendo é porque esse rodapé realmente tem uma classe off absoluto, então ele está posicionado absolutamente na parte inferior da tela. Então, o que queremos fazer é corrigi-lo tomando o elemento pai do rodapé, que também é o elemento de nível pai do nosso aplicativo em. Nós vamos adicionar em uma classe de parente, e isso deve fazer o pé uma exibição todo o caminho para baixo na parte inferior da página. Mas agora você vai notar que há um pouco de um problema de espaçamento lá, então nós vamos dar a essa classe fora do PB 10 4 estofamento inferior 10 e isso deve corrigir o problema de espaçamento. Então agora nós realmente tivemos um pouco de espaço entre este último cartão no rodapé. Mas se formos para a página do produto agora, o pé não aparece mais na parte inferior da página. E isso é porque este aplicativo provavelmente deve ser apenas uma altura mínima fora da tela. Então, há uma classe para isso em reações chamado Homens H Tela em que vai empurrar isso para baixo . Mas novamente, se voltarmos para a página inicial, o pé ainda estará lá embaixo. Não é rolar sem conteúdo, modo que foi um pequeno toque final. Eu acho que no próximo vídeo vamos dar uma olhada em limpar alguns da corrente aqui então vamos fazer com que não estamos repetindo o efeito de uso tanto na página inicial quanto na página do produto, porque isso é um monte de código para estar reutilizando 12. Crie seus próprios ganchos personalizados para reusabilidade: Agora vamos aprender como fazer nossos próprios ganchos em reagir e demonstrar como isso pode limpar seu código. Então, se dermos uma olhada na minha home page, você pode ver que temos algum estado. E então nós também temos efeito usado aqui em baixo. E isso é praticamente palavra por palavra, exatamente o mesmo código que está na minha página do produto. E nós temos o estado, e então temos efeito de uso. Então, qualquer coisa que realmente mudou aqui é o nome da variável. Então eu acho que o que podemos fazer é extrair isso para gancho e torná-lo reutilizável entre essas duas páginas. Então o que vamos fazer é criar uma nova pasta no diretório fonte, e vamos chamar isso de Hooks e, em seguida, dentro de ganchos, vamos criar um novo arquivo, e vamos chamar isso de solicitações http Dr Js. e vamos chamar isso de Hooks e, em seguida, dentro de ganchos, vamos criar um novo arquivo, e vamos chamar isso de solicitações http Dr Js. agora podemos criar um gancho. Então vamos importar, reagir de reagir, e então vamos declarar uma função, e é meio importante que a função seja nomeada com a chave usaria na frente dela . Isso é apenas um padrão de reação. Eso que reagem sabe que isso é realmente um gancho. Então vamos dizer, Use Axios, obter como o nome da função em. Então podemos terminar isso e o que podemos fazer é aqui embaixo. Uso de exportação, Axios obter. Ou podemos apenas colocar a palavra-chave na frente da função aqui para que possamos apenas dizer função de exportação, usar Axios, obter a mesma coisa agora. O que queremos fazer é colar em todo o código que temos repetido. Então vamos ver a página inicial e vamos pegar o estado e vamos acelerar isso aqui. E então podemos passar para a questão do efeito da UE e podemos copiar tudo isso no ritmo que aqui também. Então agora nós realmente precisamos importar estes porque nós temos efeito de uso, um novo estado, e se eu tentar executar este arquivo, então nós teríamos uma era em ambos. Então vamos importá-los. Agora que foram importados, podemos cortar este código da nossa página inicial. Então, vamos realmente remover tudo isso. E vamos dar uma olhada em como usar nosso gancho personalizado. Então o que queremos fazer é realmente queremos obter valor deste gancho personalizado. Então o que queremos fazer aqui é ter certeza de que isso está devolvendo algo. Então vamos retornar o nome dos Estados que criamos neste caso, são produtos. Mas acho que vamos mudar esse nome em breve. Então vamos devolver isso aqui e depois na página inicial. O que vamos fazer é criar uma variável aqui chamada produtos, e isso pode ser uma constante. Bem, na verdade, vamos chamá-lo de deixar que a Andi deixe os produtos igualar o que for devolvido do nosso gancho. Então vamos usar Axios, ter certeza de que isso é realmente importado aqui, e que, em seguida, tomará em um argumento. Porque, lembre-se, nós temos este u R l parece que ainda precisamos passar para o nosso pedido Axios. Então o que vamos fazer é pausar essa garota assim, e então vamos ao nosso pedido HTTP e vamos aceitar que vocês estão todos aqui. Já estamos usando isso aqui em baixo, então tudo bem. Então, se guardarmos isto e quando salvarmos a nossa home page Oh, droga. Usar Axios não está definido. Então nós só precisamos ter certeza de que nós pegamos essa importação e colocamos em solicitações http em e em quem? Tudo parece estar funcionando, mas agora estamos usando isso com um gancho. Tudo parece estar funcionando, Então, agora, sempre que queremos enviar através de um pedido ou precisamos fazer é adicionar nesta linha de código e que vai cuidar do nosso estado Para nós. Ele vai cuidar da importação Axios para nós e tudo mais, para que possamos ir para o produto e podemos fazer exatamente a mesma coisa. Vamos remover esse código. Vamos remover os efeitos aqui e agora podemos criar uma variável chamada Produto e que pode vir dessa garota lá em cima. Então, se guardarmos isso agora, o que está bem? Use Axios não está definido, então só precisamos ter certeza de que realmente importamos esse boom. Ok , são eles. Então, agora, quando vamos para a página específica do produto, isso ainda funciona. Mas novamente, agora estamos fazendo isso com apenas uma linha de código em vez de toda a constante, e eles usam efeito. Então agora o que podemos fazer é realmente mudar as variáveis aqui, então não vamos chamar isso de produto. O que estamos realmente fazendo é que estamos enviando através de uma solicitação para que possamos chamar essa solicitação, e então podemos chamar esse método set request on. Então podemos mudar o nome desse método aqui, aqui e aqui. E então, é claro, quando exportamos ou devolvemos isso, queremos devolver o que está no pedido. Portanto, nosso pedido terá dados de carregamento ou uma era, e isso ainda continua funcionando. Mas, novamente, nós fizemos isso com apenas uma linha de código aqui.