O curso definitivo de React 2025 — crie 3 projetos reais

1. Introdução à Masterclass de React: Bem-vindo ao curso definitivo de reação. Neste curso, aprenderemos a reagir desde sua base até conceitos mais avançados. Então, começaremos com o funcionamento do react. Por que o react é uma compreensão tão popular de Bb e JSX, criando componentes, adicionando eventos, variáveis de estado, ganchos importantes, acessando armazenamento local, reagindo ao modo street, filtrando e encurtando dados, pesquisando com autorizgons, roteamento e navegação usando a biblioteca mais popular react filtrando e encurtando dados, pesquisando com autorizgons, roteamento e navegação Router Dom. Depois disso, também veremos a chamada de APIs, o tratamento de erros, a exibição da funcionalidade do carregador, gerenciamento e a validação do formulário, a paginação, a rolagem infinita, a autenticação e autorização do usuário com o token web JSON, autenticação e autorização do usuário o que é muito importante, a chamada de APIs protegidas, chamada de APIs protegidas criação Se você é um iniciante absoluto em reagir, talvez não conheça esses conceitos Então, deixe-me mostrar a implementação desses conceitos. Usando esses conceitos, criaremos três aplicativos de reação do mundo real. O primeiro é o aplicativo gerenciador de tarefas, e podemos dizer que é do difícil ao básico. Neste aplicativo, o usuário pode gerenciar suas tarefas diárias. Então, usando esse formulário, podemos adicionar tarefas selecionando as tags e, de acordo com o status, ela será exibida aqui. Além disso, podemos remover essa tarefa do nosso aplicativo, para que seja o melhor projeto para iniciantes. Agora, deixe-me mostrar nosso segundo projeto, que é um aplicativo de filmes. O incrível desse projeto é que esses dados são reais, que estamos obtendo de outro site. Também a partir daqui, podemos filtrar nossa lista de filmes e reduzi-la por data e classificação, além de ascendente e decrescente Podemos dizer que é de nível de dificuldade a intermediário. Agora deixe-me mostrar nosso terceiro projeto. Esse projeto é muito empolgante. Então, vamos criar um aplicativo de comércio eletrônico parecido com este Você pode ver como isso é lindo. Neste projeto, implementaremos muitos conceitos avançados, como roteamento, chamada de uma API, rolagem infinita, encurtamento de produtos por preço ou classificação, pesquisa de produtos com sugestões automáticas, autenticação, como inscrição, login e saída, login e saída, gerenciamento de nosso carrinho de compras e E depois de concluir este projeto, mostrarei o processo de implantação do aplicativo react. Agora você pode perguntar quem sou eu? Sou engenheiro de software e também ensino programação em linguagem fácil de explicar usando meu canal no YouTube. Deus te abençoe e com meus cursos online. Além disso, darei muitas dicas e truques que ajudarão você a criar aplicativos de reação melhores. Depois de concluir este curso, você escreverá o código de reação com mais confiança e usando as melhores técnicas. Sei que você está empolgado em aprender e criar aplicativos de reação rápida. Então, vamos começar e mergulhar neste curso. 2. O que é o React?: Bem-vindo à primeira seção do curso definitivo de reação. Agora, antes de começarmos a aprender a reagir, vamos entender adequadamente o que é reagir. O React é uma biblioteca JavaScript de código aberto usada para criar aplicativos front-end. Em palavras simples, com o react, podemos criar aplicativos de front-end melhores e mais rápidos. React foi criado pelo Facebook em 2011, atualmente, é a biblioteca de front-end JavaScript mais popular e mais usada. Além disso, existem outras bibliotecas de JavaScript como Angular e view, mas elas não são tão melhores quanto o React. Se você está procurando emprego como front-end ou desenvolvedor full Stack, você deve saber como criar um aplicativo melhor e mais rápido com o react Você pode perguntar: o que há de especial no react? Por que o react é tão popular? Antes da criação do react, quando nossa página da web era carregada em um navegador, nosso navegador cria uma estrutura em forma de árvore com nosso código STML Essa estrutura em árvore é chamada de Modelo de Objeto de Documento ou, abreviadamente, dom. Agora, usando esse doom em JavaScript, podemos adicionar várias funcionalidades ao nosso aplicativo Esconder a barra lateral ao clicar no botão, manipular as entradas do formulário, etc. Então, aqui está o exemplo de ocultar a barra lateral no evento de clique no botão Esse é o código do Vanilla JavaScript, o que significa código JavaScript puro sem usar nenhuma ferramenta externa. Agora imagine se criarmos aplicativos de grande escala como Instagram ou Amazon com JavaScript Vanilla. E quantas linhas de código precisamos escrever? Mesmo se conseguirmos escrever esse código longo, nosso código ficará confuso e difícil de gerenciar Agora, nesse momento, a reação entra em cena. Com o react, não precisamos nos preocupar em escrever código Javascript Vanilla. Em vez disso, dividiremos nosso aplicativo em um pequeno trecho de código. Esse pequeno trecho de código é chamado de componentes e, em seguida, react cuidará de escrever código simples para criar e atualizar o dom. Os componentes são usados para escrever código reutilizável e melhor organizado Deixe-me explicar com o exemplo. Então, aqui temos nosso Projeto três, que é um aplicativo de comércio eletrônico. Aqui podemos ver que temos a Nova Barra e, no lado direito da barra Neb, temos alguns links para páginas diferentes Assim, podemos criar separadamente o componente Nabar e, nesse componente, também podemos adicionar componentes para esses links e, em seguida, podemos reutilizá-lo várias vezes para links Ny Bar Agora, na página de produtos, temos a barra lateral e aqui temos a lista de produtos, então criamos outros dois componentes, barra lateral e lista de produtos Agora, nesta lista de produtos, temos alguns cartões de produtos, que possamos definir outro componente para cartão de produto e reutilizá-lo várias vezes nesta lista de produtos Então, construímos todos esses componentes individualmente e depois os combinamos para criar nossa página. Ao criar pequenos componentes, podemos gerenciar facilmente nosso código e nosso aplicativo também funciona rapidamente. Além disso, com o react, podemos criar um aplicativo de página única, o que significa que nosso aplicativo carrega apenas uma vez e, em seguida, todas as páginas vêm sem recarregar a página inteira, que tornará nosso aplicativo quase 50% mais rápido do que os aplicativos SDML CSS e JavaScript normais Agora, outra razão pela qual o react é tão rápido é que o react tem o recurso de dom virtual. Agora, esse é o tópico pelo qual muitos desenvolvedores se confundem, mas é muito simples. Então, deixe-me explicar com um exemplo. Imagine que você tem um quebra-cabeça na sua mesa. É uma bela imagem de paisagem e contém muitas peças de quebra-cabeça que se encaixam para formar a imagem completa. Cada peça do quebra-cabeça representa uma parte diferente da sua página da web, como um cabeçalho, uma barra lateral ou uma seção de conteúdo principal Agora, digamos que você tenha um assistente mágico chamado Virtual Puzzle Solver Esse assistente tem uma cópia exata do seu quebra-cabeça, mas é virtual, não real Agora, sempre que quiser fazer uma alteração em seu quebra-cabeça, descreva as mudanças em seu solucionador de quebra-cabeças virtual Em vez de manipular diretamente as peças reais do quebra-cabeça. Por exemplo, você pode dizer: Ei, solucionador de quebra-cabeças virtual, quero mover a peça azul do canto inferior direito para o canto superior esquerdo Em vez de mover fisicamente a peça do quebra-cabeça na mesa real, seu assistente rapidamente examina sua própria cópia. Em seguida, descubra as alterações necessárias e diga à direita, remova a peça azul do canto inferior direito e adicione-a à parte superior esquerda. Agora você faz essas alterações no quebra-cabeça real com base nas instruções do seu assistente. A vantagem é que seu solucionador de quebra-cabeças virtual pode identificar rapidamente quais peças você precisa mover para completar a imagem atualizada sem precisar reorganizar cada peça manualmente Neste exemplo, o JigsoPuzzle real representa a destruição real e o solucionador de quebra-cabeças virtual representa a cúpula solucionador de quebra-cabeças virtual representa a representa a Agora vamos aplicar esse conceito ao Rax Virtual doom. Então, quando você cria uma página da web com o react, ela mantém uma representação virtual da sua página da web e é chamada de Virtual Dom. Sempre que quiser atualizar sua página da web, você descreve as alterações no dom virtual em vez de modificar diretamente o doom real O Reax Virtual doom compara eficientemente o novo dom virtual com o anterior mesmo que seu solucionador de quebra-cabeças virtual, identificando rapidamente quais quebra-cabeças PCs precisam mover em seu próprio quebra-cabeça Depois disso, o react sabe exatamente qual parte do Dom real precisa ser alterada para mesclar o novo dom virtual Ao usar essa abordagem de dom virtual, react otimiza o processo de atualização do doom real, que significa que ele aplica apenas as alterações necessárias, tornando sua página da web mais eficiente e responsiva, especialmente quando há atualizações ou interações frequentes acontecendo Em resumo, o solucionador de quebra-cabeças virtual torna a atualização do quebra-cabeça real mais gerenciável, DX Virtual doom torna a atualização do verdadeiro doom mais suave e eficiente, aprimorar o desempenho e a experiência do usuário desempenho e a experiência do torna a atualização do quebra-cabeça real mais gerenciável, o DX Virtual doom torna a atualização do verdadeiro doom mais suave e eficiente, além de aprimorar o desempenho e a experiência do usuário de seu aplicativo web. Então, isso é tudo para a teoria. Por enquanto, não se preocupe com tudo isso. Você entenderá esses conceitos quando criarmos vários projetos. 3. Configurar ambiente de desenvolvimento: Vamos configurar um ambiente de desenvolvimento para este curso. Então, primeiro de tudo, precisamos do node JS. Uma coisa que eu quero especificar estamos usando apenas uma parte do node JS, que é o NPM chamado de Node Package Manager Esse NPM é usado para instalar aplicativos de reação e alguns recursos adicionais Acesse nodjs.org e baixe a versão estável mais recente do NodeJS Clique em oito e o download começará. E eu tenho uma sugestão, se você já tem o NodeJS instalado em seu sistema, remova essa versão e instale a versão mais recente do node Agora abra essa configuração e clique em Avançar. Aceite os termos a seguir, novamente , a seguir, a seguir e instale. E veja se o processo de instalação foi iniciado. E está feito. Portanto, instalamos o nodejs com sucesso em nosso sistema. Agora, vamos verificar isso. Portanto, abra o prompt de comando no Windows ou, se você for Mguser , abra o terminal e escreva o nó V e pressione Enter Se você instalar o nodejs com sucesso , verá esta versão Se você receber algo que o node não é reconhecido como um comando interno ou externo , será necessário instalar o node novamente. Depois disso, escreva NPM e pressione Enter. E também temos essa versão, adorável. Agora, a próxima coisa que precisamos para este curso é o Vascde, que é um dos melhores editores de código e quase 95% dos desenvolvedores usam o quase 95% dos desenvolvedores usam Então vá até code.visualstudio.com e instale-o. É extremamente fácil. Abra o código VS e, para tornar nossa experiência de codificação boa, instalaremos algumas extensões Vá para este painel externo e primeiro pesquisamos sete React Snippets e instalamos essa extensão Esta é uma das melhores extensões para escrever código JS de reação rápida. Depois disso, temos outra extensão bacana chamada prettier Essa é a extensão que todo desenvolvedor usa no código Vas. Prettier formatará seu código de maneira muito organizada. Instale essa extensão. Agradável. Agora temos que fazer pequenas configurações para a instalação do prettier Na seção de instalação, role para baixo até a seção do formatador padrão e copie essa primeira linha de código Agora abra as configurações e, no canto superior direito, abra a configuração, cães e arquivo e cole essa linha no final Salve esse arquivo. Agora, volte à configuração e ao formato de pesquisa ao salvar. Não foi possível fazer isso e pronto. Agora, mais uma coisa, muitos estudantes pedem meu tema de código VS. Pesquise AU e instale esta extensão do tema. Agora clique nessas configurações e vá para o tema do código e defina-o como borda AU, e pronto. Nosso ambiente está pronto. Agora, na próxima lição, criaremos nosso primeiro aplicativo de reação. 4. Criando um aplicativo React: Portanto, há duas maneiras de criar aplicativos de reação. Primeiro, podemos usar o aplicativo Create React ou podemos usar branco. O aplicativo Create React é antigo e leva mais tempo para ser criado. Usaremos o branco para criar os novos aplicativos de reação. Então, primeiro de tudo, crie uma pasta na qual você deseja praticar react e abra essa pasta no comando prom E se você é usuário de Mac, abra o terminal de pastas e agora escreva NPM, crie, branco, o mais tardar, e pressione Enter para continuar, escreva Y e Agora escreva aqui o nome do seu aplicativo. Eu escrevo o primeiro aplicativo e pressiono Enter. Agora, aqui, precisamos selecionar a estrutura. Então, selecionamos react e pressionamos Enter. Agora, aqui, podemos selecionar Ja Script ou TypeScript. Não se preocupe com isso. selecionar Ja script e pressionar Enter. Em apenas alguns segundos, nosso aplicativo está pronto. Isso cria um modelo de reação básico, portanto, não precisamos criar um aplicativo de reação do zero. Esse comando nos fornecerá um modelo de reação rápida. Agora, aqui, precisamos escrever esses três comandos. Então, primeiro, temos que entrar nosso aplicativo gravando um CD, pressionando tab e pressionando Enter. Agora escreva NPM, instale e pressione Enter. Esse comando instalará todos os pacotes necessários para criar um aplicativo de reação como o webpack, que é usado para agrupar arquivos diferentes em um Outro pacote importante é a Bíblia. Esse pacote é usado para converter JSX, que é o código JavaScript moderno que diz código JML Então, a Bíblia converte esse JSX em código JavaScript simples, que os navegadores Não se preocupe, vou te mostrar isso nesta seção. Agora, basta escrever o código, pontuar e pressionar Enter. Este comando abrirá a pasta Curen no código VS. Podemos fechar esse terminal. Nós não precisamos disso. Agora, para executar esse aplicativo react em nosso sistema, abrimos o terminal pressionando Control plus Peptic ou Command plus BTI, escrevemos NPM run dive e Esse comando levará algum tempo e aqui obtemos o link do nosso aplicativo do host local. Mantenha pressionado Controle ou comando e clique neste link. Ele abrirá nosso aplicativo em nosso navegador. Então, essa é a aparência do react Starter Pack e veja que está sendo executado no host local 5173 Então, criamos com sucesso nosso aplicativo de reação. Agora, na próxima lição, escreveremos primeiro código em nosso aplicativo react. 5. Vamos entender o modelo do React: Em primeiro lugar, vamos entender o que obtemos nesse modelo de reação. Primeiro, obtemos a pasta que não é de módulos. Nesta pasta, temos todos os pacotes instalados para nosso aplicativo. Sem esses módulos de nós, podemos executar nosso aplicativo react, mas não se preocupe, nem sequer tocamos nessa pasta. O engraçado é que, quando eu crio de dois a três projetos no react, eu nem sei o que essa pasta de módulos do node faz. Na SOT, node modules é a pasta onde ficam todos os nossos pacotes e bibliotecas de instalação Em seguida, temos a pasta pública. Essa pasta pública contém ativos estáticos que são servidos diretamente ao cliente. Por exemplo, aqui temos um tot SVG branco, que é nosso ícone fabuloso. Deixe-me te mostrar. Aqui na guia do navegador, podemos ver nosso ícone fabuloso Depois disso, temos a pasta SRC, que significa pasta de origem Essa é a pasta na qual passamos quase todo o nosso tempo escrevendo código. Aqui, primeiro temos a pasta ASES. Nesta pasta, colocaremos todas as nossas imagens, ícones, lagoas, etc., que usaremos em nossos Em seguida, temos vários arquivos. O primeiro é o app dot JSX, que é o componente raiz do nosso aplicativo, que significa que esse é o ponto de partida da nossa cadeia de componentes Observe que esse Jx é a extensão do componente react. É quase semelhante aos cães. Veremos a diferença nas próximas aulas. Por enquanto, vamos abrir isso e ver como os componentes se parecem. Todos os componentes do react têm essa estrutura básica. Na parte superior, importamos alguns arquivos, como outros componentes, arquivos CSS, ou importamos objetos de pacotes ou logotipos, imagens e tudo mais. Depois disso, temos uma função que tem o mesmo nome do nosso componente. Nesse caso, isso é aplicativo. Agora, essa função sempre retorna algo que parece semelhante. Marcação HTML. Mas observe que essa não é a marcação DML original. Isso é chamado de JSX, que significa JavaScript XML Então, usando esse JSX, podemos escrever códigos STML e JavaScript juntos, e esse é o cerne do react Então, essa é a parte que decide a aparência do nosso site, e essa saída de código é essa, o que estamos vendo em nosso navegador. Além disso, a sintaxe JSX é semelhante à marcação STML. Assim, podemos facilmente escrever código em JavaScript em menos código. E no final de cada componente, exportamos esse componente como padrão, para que possamos usá-lo em outro arquivo ou componente. Agora, como você disse antes, Weblelibrary, pegue esse código JSX e converta-o em um código JavaScript simples que nosso navegador pegue esse código JSX e converta-o em um código JavaScript simples que nosso navegador possa entender. Depois disso, temos o arquivo CSS app dot, que é usado para estilizar o arquivo JSX app dot E também o que inserimos na parte superior do componente do aplicativo. Em seguida, temos o arquivo JSX de ponto principal, que é o arquivo mais importante do react Esse é o arquivo que conecta nossos componentes com nosso arquivo HTML de pontos de índice, que temos aqui. Não se preocupe, é o mesmo que temos nosso arquivo STML. Este é o arquivo HTML principal que está sendo executado em nosso navegador. Deixe-me te mostrar. Eu mudo aqui este título para meu primeiro aplicativo de reação. Salve este arquivo e, no navegador, veja, aqui temos nosso título atualizado. Além disso, não precisamos atualizar nossa página como o SDML. React recarrega automaticamente nosso aplicativo quando salvamos nosso arquivo, e isso é muito legal Agora, com isso, temos o ícone F, que vimos anteriormente. Agora, desça até a seção do corpo e veja, aqui temos apenas duas tags. O primeiro é DU com uma raiz de ID. Essa é a tag principal na qual todos os componentes aparecerão. Deixe-me te mostrar. Em nosso navegador, clique com o botão direito na página e vá para Inspecionar. Aqui você pode ver que temos nosso Du com ID root e, dentro dele, temos nosso componente de aplicativo. Agora, depois disso, temos a tag Script e aqui vinculamos nosso arquivo JSX principal Vamos ver rapidamente a aparência do código dentro do arquivo JSX com pontos principais No topo, temos algumas importações. Agora, depois disso, temos linhas de código pelas quais podemos conectar nosso componente de aplicativo, aquele Du, que tem ID root. Portanto, temos o react Dom, que importamos do cliente react Dom, e que tem um método, create root. E dentro disso, ele tem como alvo a raiz por ponto do documento Obter elemento por ID. Depois disso, essa variável raiz tem um método chamado render e, dentro dele, passamos o componente que queremos mostrar nessa raiz Du. Não se preocupe com isso. Na próxima lição, escreveremos todo esse código do zero. Agora, após a pasta de origem, temos Getting nor file, no qual podemos definir quais arquivos ou pastas não serão carregados no Github. Em seguida, temos o arquivo package dot GSN, que contém todas as informações sobre nosso aplicativo Você pode ver aqui o nome, versão e, nesta matriz de dependências, temos vários pacotes que são instalados com a instalação e também temos sua versão Se, no futuro, perdermos nossa pasta nor models , usando esse arquivo de pacotes dot GSN, poderemos recriar nossos módulos de nós Agora também temos scripts, que são cartões de classificação para esses comandos. Por exemplo, anteriormente, usamos NPM run Dao para executar nosso aplicativo Então, internamente, isso executa esse comando react script Dav. Depois disso, temos pacotes log dot jSn, que é essencialmente usado para bloquear a dependência em um Vos e número específicos E, finalmente, temos o arquivo white dot confit js, que é o objeto de configuração do nosso aplicativo Por enquanto, não precisamos nos preocupar com esses outros arquivos. Primeiramente, nosso foco está em como criar aplicativos rápidos e com melhor reação. 6. Escrevendo código do zero: Agora vamos escrever código do zero. A razão pela qual quero que você escreva código do zero é porque quero mostrar como os componentes do react se conectam ao elemento raiz. Em primeiro lugar, exclua a pasta de origem completa, nós a criaremos do zero. Agora crie uma nova pasta chamada SRC e dentro dela, criamos um novo arquivo chamado main dot Jx Você se lembra do que esse arquivo Jx principal faz? Escrever? Ele declarará o componente raiz, ou podemos ver o que queremos mostrar nesta DU com ID root Agora, na parte superior, importamos alguns objetos da biblioteca e, usando esses objetos, podemos conectar nosso aplicativo ao arquivo DML de índice Primeiro, importe o objeto react da biblioteca react. Se você não está familiarizado com essa importação ou com nenhum conceito de JavaScript, não se preocupe, escreva esse código enquanto eu escrevo, porque na próxima seção, entenderemos todos os conceitos úteis de JavaScript que estamos usando no react. Em seguida, importamos o react Dom, do cliente react Dom. Agora, na próxima linha, criamos uma variável, const. Novamente, esse é o recurso de script ES six da, e mostrarei isso na próxima seção. Então, const e forneça o nome da sua variável. Digamos que meu primeiro elemento. Você pode pegar o que quiser. Depende totalmente de você. Igual a, aqui escrevemos H uma tag. Esse é meu primeiro elemento. E feche a etiqueta H one. Observe que essa não é uma marcação SDML. Isso é JSX, que se parece com SDML porque não adicionamos nenhum JavaScript Agora, depois disso, exibiremos esse elemento em nossa raiz D. Então, reagimos, Dom, pontuamos, criamos raiz. E dentro desse método, temos que direcionar nossa DU com ID raiz. Então, documente ponto, obtenha o elemento por ID e passe aqui a raiz em códigos duplos. E, finalmente, temos que declarar qual elemento ou componente queremos exibir Então escrevemos ponto, renderizamos e, dentro disso, passamos nosso elemento, meu primeiro elemento. Salve as alterações e dê uma olhada. Veja, aqui temos nosso texto. Esse é meu primeiro elemento. Agora, vamos verificar se isso está dentro do nosso ROOTT ou não. Então, coloque a perna direita no texto e vá inspecionar. E você pode ver que está em nossa raiz devido, então está funcionando. Parabéns, você criou seu primeiro aplicativo de reação. Agora, aqui adicionamos esse elemento. Mas no aplicativo real react, adicionaremos aqui nosso componente de aplicativo. Não se preocupe com isso. Prometo que você se sentirá confortável com o React em breve e não tentará entender todos os tópicos de uma só vez. Porque com a prática, você entenderá cada tópico. 7. Seção 02 Refresher do JavaScript ES7: Bem-vindo à segunda seção do curso definitivo de reação. Nesta seção, veremos alguns dos tópicos importantes do Javascript que usamos muito no react. Começamos com War, era ele let W sua sintaxe Cs ARWFuncton, acessando propriedades do objeto Depois disso, veremos a desestruturação de objetos. Então, métodos como mapear e filtrar, operador de propagação, operador ternário, módulos e muito mais Talvez você já conheça alguns desses conceitos, mas veja esta seção como um lembrete. Você está confiante em seu conhecimento de Javascript, então você pode pular esta seção Depende totalmente de você. O objetivo desta seção é preparar você com todos os conceitos necessários de JavaScript, que são usados no react. Assim, você pode aprender a reagir facilmente sem se preocupar com os conceitos modernos de JavaScript e focar 100% em aprender a reagir 8. var, let e const: t e const, essas três palavras-chave são usadas para definir variáveis em JavaScript. Latin Const é um novo recurso no JavaScript moderno. A maioria dos desenvolvedores usa Let e const em vez de usar War Vamos entender a diferença entre et const e War needed. Em nosso projeto anterior, que criamos na primeira seção, abra o arquivo JSX com pontos mínimos e aqui removemos todo A primeira pergunta é: o que há de errado com guerra? Precisamos usar novos recursos para declarar Então eu defino aqui uma função chamada loop de impressão, e dentro dessa função, usamos simple for loop. Primeiro, definimos variável, I igual a zero. Em seguida, colocamos a condição I em menos de três e, por fim, I mais. E dentro desse loop, queremos imprimir esse valor I. Então, console dot log I. Agora, no final, chamamos essa função de loop de impressão. Diga as mudanças e dê uma olhada. Veja, aqui temos zero, um e dois. Perfeito. Agora, deixe-me mostrar qual é o problema com a guerra. Então, aqui, após esse ciclo de outono, temos o slide I. Você consegue adivinhar como será nossa saída? Deixe-me te mostrar. Salve as alterações e C, aqui obtemos esse valor I, que é três. Então, aqui queremos definir a variável I somente para esse loop for. Em outras linguagens de programação, variável só deve ser acessível para o bloco em que foi definida, e isso é chamado de escopo. R não é uma variável de escopo de bloco. É a variável de escopo funcional, o que significa que podemos acessar essa variável I dentro de toda essa função. Agora imagine que temos que sempre criar um novo nome de variável. Então, para resolver esse problema na variável ESC Oxcope usando duas palavras-chave, let e const Então, simplesmente passamos por aqui, deixamos o local da guerra, salvamos as alterações e damos uma olhada. Veja, aqui temos o erro, I não está definido. Agora, essa variável I só pode ser acessada dentro desse loop de quatro. Podemos dizer esse escopo de bloco. Usamos war quando queremos acessar uma variável em plena função, mas isso é raro. Na maioria das vezes, usamos late ou const quando queremos acessar essa variável somente dentro do bloco de código que eles definiram Agora você pode pensar: qual é a diferença entre late e const Aqui, esse const significa constante. Constante significa que não podemos mudá-la. Deixe-me te mostrar. Vamos remover esse código e aqui definimos duas variáveis. Primeiro com lat, X é igual a dez, e segundo com const, Y é igual a Agora podemos reatribuir o valor da variável que declaramos com atraso Aqui, podemos fazer com que X seja igual a 20, mas não podemos reatribuir o valor da variável que declaramos com const, então não podemos escrever que Y é igual Isso nos dará erro. E pegue. Veja, aqui temos atribuição de erro de tipo à variável constante Portanto, se quisermos alterar seu valor , usamos const e, se você quiser alterar seu valor , usaremos late Então, para recapitular, não use a palavra-chave War porque ela tem escopo funcional e prefira usar a palavra-chave Cs antes da tarde Use apenas a palavra-chave at quando quiser reatribuir o 9. Função de seta: Então, o que é a função de seta? função de erro é outra forma de definir a função JavaScript. Em outras palavras, podemos escrever função JavaScript de forma simples e fácil. Esse é um recurso muito útil do Javascript quando estamos trabalhando em tópicos avançados. Eu adiciono nosso código anterior na pasta de origem se você quiser revisar os conceitos Aqui definimos a função chamada say hello. Dentro dessa função, simplesmente consolamos o log de pontos e queremos imprimir esse mundo Hello JavaScript. Definimos essa função com a palavra-chave function. Agora vamos ver como criar a mesma função usando a função de seta. Então, para definir a função de seta, primeiro de tudo, temos que usar let ou const. Mas, na maioria dos casos, usamos const porque não queremos reatribuir essa função Aqui escrevemos o nome da nossa função. Digamos que crie iguais a agora usamos parênteses para a função e, em seguida, usamos igual e maior que, que a agora usamos parênteses para a função e, em seguida, usamos igual e maior que, que constroem essa seta. E então adicionamos colchetes Ci para adicionar o bloco Cd para essa função de seta Dentro disso, escrevemos o log de pontos do console. Olá, mundo do JavaScript. Agora, vamos chamar essa função. Aqui, podemos chamar a função de seta pelo nome, mesma forma que chamamos nossa função normal. As mudanças e dê uma olhada. Abra o Console e veja aqui que obtemos o mesmo resultado. Portanto, as duas funções são iguais. Essa sintaxe da função de seta nos ajudará a usar Javascript avançado. Deixe-me mostrar meu truque para lembrar a sintaxe dessa função de seta quando comecei a aprender Javascript. Então, temos nossa função de dizer olá. Agora, remova essa palavra-chave da função e reproduza const. Então, entre o nome da função e os parênteses, adicionamos iguais a, e entre os parênteses e colchetes C adicionamos iguais a, e entre os parênteses e colchetes C adicionamos setas, simples como. Agora, se no bloco de código da função de seta, tivermos apenas uma linha , podemos remover esses colchetes Vamos removê-los. Salve as alterações e veja como é simples e fácil definir a função. Agora, vocês podem? Como podemos adicionar argumentos na função de seta? Certo, é da mesma forma que passamos na função normal. Então, adicionamos aqui o idioma e, dentro desse console, exibimos esse parâmetro de idioma. Agora, quando chamamos essa função, passamos aqui, digamos reagir. Salve as alterações e veja, recebemos hello Javascript world react. 10. Acessando os objetos: Vamos falar um pouco sobre objetos. Então, sabemos que o objeto é um par de valores-chave. Em outras palavras, o objeto JavaScript é uma coleção de valores nomeados. Você pode saber tudo sobre isso, mas eu só quero ter certeza de que os conceitos fundamentais do Javascript estão corretos. Desculpe por isso, se você sabe disso. Assista a esta lição como um lembrete. Então, aqui, eu uso const porque não quero reatribuir esse objeto com outro valor Portanto, const user é igual a em colchetes C, definimos dados no Então, o primeiro é o nome de Halley. A propósito, esse é meu nome favorito. E outra propriedade, digamos, envie um e-mail e configure para Halley 07 no gmail.com vermelho Você pode me dizer como podemos acessar essa propriedade? Certo, podemos usar o nome do ponto do usuário ou o e-mail do ponto do usuário. Então, simplesmente consolamos o nome do ponto do usuário do log de pontos. Guarde isso e veja aqui que compramos Harley com muita facilidade. Agora, deixe-me mostrar outra opção para acessar o valor do objeto. Então, no lugar desse nome de ponto, usamos colchetes e, em códigos duplos, passamos o nome da nossa propriedade Veja, aqui também temos a Autoização. Vamos ver, enviar um e-mail, salvar as alterações e dar uma olhada. Veja aqui que recebemos nosso e-mail. Usaremos o método de colchetes em alguma parte do react É por isso que eu adiciono esta lição. 11. Desestruturação de objetos: Agora, outro conceito de Javascript muito usado no react é a desestruturação de objetos Vamos ver o que é. Então, imagine que temos um objeto chamado usuário wTorsUser, detalhes como nome para SAM e e-mail para SAM email@gmail.com e país Neste código, queremos extrair o valor da propriedade desse objeto. Digamos nome, e-mail ou país. Para isso, escrevemos const name igual ao nome do ponto do usuário. Em seguida, escrevemos const email equals to user dot email. E, finalmente, escrevemos contra país igual ao país do ponto do usuário E depois disso, simplesmente imprimimos esses valores. Então, registro de pontos do console, nome, e-mail, país. Salve as alterações e dê uma olhada. Veja aqui que obtemos esses valores. Agora, o problema com esse código é o número de linhas. Imagine que temos de cinco a dez propriedades e, em seguida, temos que declarar de cinco a dez variáveis diferentes, e essa não é a melhor prática Para resolver esse problema, temos a desestruturação de objetos. Eu comento esse código anterior e escrevo aqui, const Agora, aqui temos que usar ulipacket igual ao nome do nosso objeto Agora você pensa no que temos que escrever nesses colchetes de Cali Temos que escrever aqui apenas os nomes das variáveis que queremos extrair desse objeto. Escrevemos nome, e-mail , país e pronto. Esse código de linha única funciona da mesma forma que essas três linhas de código. Vamos verificar isso. Salve as alterações e veja se funciona da mesma forma que antes. Você pode ver como é simples desestruturar objetos. Agora você pode perguntar: temos que sempre adicionar todas as propriedades no Calibacket e a resposta é não Precisamos adicionar apenas o nome das propriedades que queremos extrair. Por exemplo, se quisermos acessar apenas nome e e-mail , podemos remover essa variável de país. Agora, e se quisermos alterar o nome dessa variável de nome para, digamos, nome de usuário? Então, para isso, temos que adicionar aqui dois pontos e depois adicionar o nome de usuário Vamos verificar se isso funciona ou não. Mude seu nome para nome de usuário, salve as alterações e dê uma olhada. Veja, está funcionando. Isso chamamos de desestruturação de objetos. 12. Método de mapa: Agora, nesta lição, veremos o método de mapeamento para matriz. Esse é um dos métodos de matriz mais usados na aplicação react. No react, usaremos o método map para exibir a lista de dados. Por exemplo, imagine que estamos trabalhando em um projeto de comércio eletrônico. Agora, nesse projeto, temos uma variedade de produtos que queremos exibir. Aqui, usamos o método de mapa para exibir cada produto. Não se preocupe, basta dizer isso e você entenderá isso. Criamos aqui uma nova matriz de produtos igual a aqui adicionamos o produto um, o produto vírgula dois e o produto vírgula Agora, queremos exibir cada item da lista de produtos dessa forma. Então, podemos fazer isso usando o método MP. Então, escrevemos aqui o mapa de pontos dos produtos. Agora, neste método de mapa, temos que passar uma função de retorno de chamada que é executada para cada item Então, vamos definir a função aqui. Agora, como podemos obter o valor de cada elemento nessa função? Obtemos o valor de cada elemento usando o primeiro parâmetro nessa função. Digamos que item ou produto. Você pode usar um nome descritivo. Agora, simplesmente retornamos em códigos duplos, listamos a etiqueta do item. Agora, o que queremos adicionar aqui? Sim, este produto. Então, adicione mais produto, mais, e adicionamos códigos duplos, item da lista de fechamento. Lembre-se de que esse método de mapa retorna uma nova matriz. Isso não mudará a matriz anterior. Então, vamos armazenar essa nova matriz em uma variável chamada itens de exibição. E depois disso, simplesmente consolamos os itens de exibição do registro de pontos. Salve as alterações e dê uma olhada. Veja, obtemos uma variedade de itens da lista. Portanto, lembre-se sempre de que tudo o que retornarmos dessa função, ela adicionará uma nova matriz. E essa função é executada para cada item, simples assim. Agora, esse código parece um pouco longo, então podemos usar a sintaxe da função de seta, remover a palavra-chave da função e adicionar aqui a seta Agora podemos até mesmo simplificar esse código porque nessa função, temos apenas uma linha que está escrita. Então, removemos isso escrito e também podemos remover os suportes do carro Veja agora que nosso código parece fácil de ler. Vamos verificar esses trabalhos ou não. Salve as alterações e dê uma olhada. Veja, funciona da mesma forma que antes. Agora, aqui, isso parece um pouco feio. Em vez de usar esses códigos duplos, podemos usar literais de modelo Isso é muito simples e útil. Removemos toda essa declaração e adicionamos aqui acentos cravos dentro deles, escrevemos nosso item da lista de abertura e o item da lista de fechamento No centro das etiquetas, temos que adicionar esse único produto. Portanto, em literais de modelo, se quisermos adicionar variáveis , temos que usar colchetes Dollar e Cali E dentro deles, podemos acessar esse produto variável. Salve as alterações e dê uma olhada. Veja, novamente, obtemos o mesmo resultado. Portanto, depende totalmente de você qual sintaxe você deseja usar. Agora, na próxima lição, veremos outro método de matriz, que é filtro. 13. Método de filtro: Vamos ver o método de filtro, que é usado para filtrar a matriz. Em palavras simples, o filtro é usado para remover itens da matriz existente e sempre retornará uma nova matriz. Em nosso exemplo anterior de comércio eletrônico, imagine que precisamos adicionar a funcionalidade de pesquisa para nomes de produtos Ao usar esse método de filtro, podemos filtrar a matriz existente de acordo com nossa escolha. Deixe-me mostrar o que quero dizer. Estou removendo o código anterior, mas para sua referência, vou adicioná-lo em uma pasta separada, que você possa obtê-lo para revisão. Então, aqui criamos uma nova matriz chamada idades iguais a, em um pacote quadrado, cinco, 23, 14, 30 Vamos simplesmente registrar pontos do console nessa matriz. Agora, digamos que queremos filtrar arestas com mais de 18. Nós escrevemos um filtro de pontos por idade. Agora, dentro disso, passamos a função, mesma forma que fizemos no método map. Podemos definir a função ou também podemos usar a sintaxe da função de seta Como podemos obter cada item da matriz nessa função? Certo, ignorando a variável no primeiro parâmetro. Adicionamos aqui uma variável chamada idade. Nessa era, obtemos cada item dessa matriz. Primeiro, chegamos aqui cinco, depois temos 23 e depois 14 e 30 e 21. Agora, nesta função, temos que retornar a condição. Digamos, idade maior que 18 anos. Qual elemento passa por essa condição, esse elemento será adicionado em uma nova matriz. Então, primeiro, esse método de filtro, verifique a condição de f, que não passará por essa condição para que o método de filtro não faça nada. Em seguida, ele verifica a condição 23, que passará por essa condição, então adicionará uma nova matriz. Depois disso, 14, o que não passará. Depois desses 30, que passarão por essa condição , adicionará 30 e depois também adicionará 21. Agora, esse método de filtro sempre retorna uma nova matriz. Vamos armazenar isso em uma variável chamada adultos; no final, vamos registrar pontos no console desses adultos. Salve as alterações e veja aqui que obtemos 23, 30 e 21. Aqui também podemos remover esse retorno e chamar os colchetes. Veja, parece mais simples. Basta lembrar que em qual elemento passa essa condição, adicionamos uma matriz innu, simples assim Agora, digamos que dessa matriz, queremos remover esse 30. Aqui passamos que a idade não é igual a 30. Salve isso e veja sem 30, obtemos todos os elementos. Então é assim que usamos o método de filtro para filtrar dados. 14. Operador de spread: Agora, outro recurso útil do JavaScript moderno é o operador de propagação. Então, aqui criamos uma matriz chamada matriz um, e adicionamos aqui um, dois, três e quatro. Agora, depois disso, definimos outra matriz chamada matriz dois. E adicionamos aqui sete, oito, nove e dez. Como podemos combinar essas duas matrizes em uma única matriz? Então, para combinar essa matriz, criamos um novo número constante igual à matriz de um ponto Aqui usamos o método concat, que é usado para combinar duas ou várias matrizes E dentro desse método concat, passamos nossa segunda matriz, que é a matriz dois Vamos ver o que obtemos. Registre pontos do console nesta matriz de números. Salve as alterações e dê uma olhada. Veja, combinamos com sucesso essas duas matrizes. Agora, deixe-me fazer um pequeno exercício. Aqui, queremos adicionar os números que faltam entre essas duas matrizes Portanto, nossa saída deve ser semelhante a esta de um a dez em ordem. pausa nesta lição e tente adicionar cinco e seis entre essas matrizes Agora, eu também tento resolver isso com outro método. Se você tiver seu método, poderá colocá-lo na seção de perguntas e respostas Então, criamos uma nova matriz com cinco e seis. E no método concat, adicionamos essa matriz antes da matriz dois E com isso, obtemos nosso resultado. Agora, deixe-me mostrar a maneira moderna de fazer isso. Então, comentamos essa linha e escrevemos números constantes iguais a agora, aqui criamos uma matriz, e dentro dela, primeiro, precisamos obter todos os valores da Então escrevemos ponto, ponto, ponto, que é chamado de operador de dispersão, e então adicionamos nosso nome de matriz, que é matriz um. Essa expressão retornará todos os valores dessa matriz um. Agora, depois disso, queremos adicionar a matriz dois. Então, escrevemos novamente a matriz de operadores de dispersão dois. Salve isso e dê uma olhada. Veja, aqui temos essas duas matrizes combinadas. Agora você pode perguntar: queremos adicionar cinco e seis entre eles. Então, para isso, não precisamos criar nenhuma nova matriz como fizemos antes. Então, quando quisermos adicionar nossos elementos, podemos simplesmente escrevê-los nesse local. Se quisermos adicionar algo no início ou no final, também podemos simplesmente fazer isso, salvar os genes e dar uma olhada. Veja, aqui temos cinco e seis. Você pode ver usando o operador de propagação, não precisamos nos preocupar com nada. Basta escrever ponto, ponto, ponto, um nome de matriz e obtemos todos os valores dessa matriz. Simples assim. Também podemos usar o operador de propagação com objetos. Então, aqui definimos o objeto constante um. E dentro disso, adicionamos nome à metanfetamina. E depois disso, definimos outro objeto constante dois. E dentro disso, adicionamos hobby a uma variedade de ensino e aprendizagem. Agora, queremos combinar esses dois objetos. Então, definimos constante, digamos que usuário seja igual Agora, aqui temos que usar objetos porque queremos obter um novo objeto, e o que escrevemos aqui é escrever, operador de propagação, objeto um, operador de propagação com, objeto dois. E depois disso, vamos simplesmente consultar o log de pontos desse objeto de usuário. Salve as alterações e dê uma olhada. Veja, aqui combinamos dois objetos. Agora, como fazemos na matriz, também podemos adicionar mais propriedades nesse objeto. Adicionamos aqui, digamos, o YouTube ao code plus. Guarde isso e veja, aqui temos nossa propriedade. Você pode ver como é simples combinar matrizes e objetos usando o operador de propagação É por isso que o operador de spread é muito útil. 15. Operadores ternários: Portanto, nesta lição, aprenderemos sobre operador ternário ou operador condicional Pelo nome, você pode adivinhar para que será usado. Certo, é usado para adicionar condições. Em palavras simples, o operador ternário é o atalho para escrever a condição Então, aqui está uma sintaxe do operador ternário. Na primeira posição, temos nossa condição. Depois disso, temos o ponto de interrogação, que basicamente significa se e então temos a expressão verdadeira, que será executada se a condição for verdadeira. E então temos a coluna, que significa se, e se a condição for falsa, essa expressão falsa será executada. Então, em palavras simples, se a condição for verdadeira, primeira expressão será executada, segunda expressão será executada. Vamos ver isso na prática. Vamos remover esse código e simplesmente criar uma variável usando const Mx igual Agora, depois disso, queremos adicionar uma condição. Se o máximo for maior que 35, então queremos retornar, passar, senão retornamos, falhamos. Então, escrevemos nossa condição na primeira posição, que é no máximo maior que 35. Adicionamos um ponto de interrogação e aderimos a string, que queremos retornar. Então, em códigos, passe, e depois disso, adicionamos dois pontos, e adicionamos aqui uma sequência de caracteres nos códigos, falha Agora, aqui estamos retornando uma string dessa expressão, então temos que armazená-la na variável. Digamos que resultado. E no final, basta que o console registre esse resultado. Salve as alterações e dê uma olhada. Veja, aqui obtemos aprovação porque nosso máximo é maior que 35. Agora, se mudarmos nosso máximo para 30, salve isso e veja aqui que obtemos uma falha. Assim, você pode ver como é simples usar operadores ternários se tivermos uma expressão de linha única Se tivermos que escrever o mesmo código na condição ELs , teremos que escrevê-lo dessa maneira. Então, primeiro, declaramos a variável de resultado. Em seguida, adicionamos a condição ELs para preencher esse resultado. Veja aqui que usamos let porque queremos reatribuir o valor dessa variável De qualquer forma, você pode ver como o operador ternário reduz as linhas de código para adicionar a condição de Essa é a beleza dos recursos modernos de JavaScript. Os operadores Dinari dessa função de seta são pequenas coisas que aumentarão sua velocidade de escrita código e reduzirão as linhas de código Desenvolvedor inteligente não é quem escreve mais linhas. Desenvolvedor inteligente é aquele que consegue escrever código em menos linhas, mas ainda assim funciona melhor do que código errado. 16. Módulos em JavaScript: Módulos são um dos conceitos mais importantes do JavaScript moderno usado no react, ou podemos dizer que o react funciona em módulos. Então, vamos começar com o que é módulo. Módulo é um arquivo que contém código para realizar uma tarefa específica. Ele pode conter variáveis, objetos, funções e assim por diante. Então, à medida que nosso aplicativo cresce, temos que escrever milhares de linhas de código. Mas, em vez de colocar tudo em um único arquivo, podemos dividir nosso código em arquivos separados por sua funcionalidade, que podemos chamar de módulos. E usando esses módulos, podemos tornar nosso código organizado e super fácil de gerenciar. Vamos ver isso na prática. Então, vamos remover esse código anterior e simplesmente criar uma função chamada post para nosso aplicativo. Por enquanto, imagine que essa função retornará a parte da interface do usuário de uma única postagem. Nesta função, escrevemos o log de pontos do console. Esta é uma postagem. Agora, depois disso, criamos mais uma função chamada feed para exibir várias postagens dentro dessa função, primeiro escrevemos o log de pontos do console. Isso é feed e depois disso, chamamos aqui essa função de postagem. Como imaginamos, essa função de postagem retorna a interface de usuário de postagem, e essa função sentida retornará a postagem múltipla Nós simplesmente chamamos essa função de postagem várias vezes. Eu sei que isso é um pouco confuso, mas não se preocupe com isso No final desta lição, tudo isso faz sentido. Vamos ver o que temos aqui. Então, no final, chamamos essa função de feed, salvamos as alterações e damos uma olhada. Veja, primeiro chegamos aqui, isso é feed, e depois disso, temos várias postagens. Agora, essa é apenas uma parte do nosso aplicativo. Temos mais funções ou podemos dizer mais partes, então gerenciar esse código não será fácil. Assim, podemos dividir esse código em várias partes chamadas módulos, e então podemos gerenciar facilmente nosso código e também podemos reutilizá-lo em diferentes aplicativos Então, cortamos essa função post daqui e em nossa pasta de origem, criamos um novo arquivo chamado post dot jsx, e isso também é chamado de módulo post E dentro desse arquivo, nós apenas colamos essa função de postagem. Agora podemos ter uma pergunta: como podemos usar essa função de postagem em nosso arquivo JSX de pontos principal Porque atualmente podemos acessar essa função de postagem apenas no arquivo postjsx Primeiro de tudo, temos que tornar essa função pública para que possamos acessá-la em outros módulos. Para isso, no início, simplesmente adicionamos o teclado de exportação. Agora, à medida que exportamos, podemos acessar essa função de postagem em qualquer arquivo. Portanto, no arquivo principal ou JSX, temos que importar essa função Então, na parte superior, escrevemos colchetes Cali de importação e, nesses colchetes CL, temos que adicionar o nome da função que queremos No nosso caso, a partir de agora é postado em códigos, temos que escrever o caminho dos módulos dos quais queremos importar. Então, escrevemos ponto ou ponto e barra. Isso se refere à pasta atual e veja, aqui temos as sugestões. Selecione publicar e pronto. Observe que aqui também podemos escrever arquivo GSX post dot se tivermos post dot TXT ou qualquer outro arquivo post com outras extensões, mas isso é raro Portanto, nem sempre escrevemos essa extensão dot GSX. Salve as alterações e dê uma olhada. Veja, funciona da mesma forma que antes. Criamos com sucesso nosso primeiro módulo. Agora, deixe-me te dar um pequeno desafio divertido. Aqui criamos o módulo de postagem. Você precisa criar um módulo de feed separado desse arquivo Gx de ponto principal e chamar essa função de feed nesse arquivo JSX de ponto principal Eu sei que você pode fazer isso. Apenas experimente um pouco. Então, faça uma pausa nesta lição e, depois disso, veja esta solução. Espero que você resolva esse exercício. Se você não conseguir concluir este exercício, não se preocupe. Agora você pode aprender que estamos todos aqui para aprender. Mas o importante é que pelo menos você tente resolver isso. Então, dê crédito a si mesmo por isso. Então, primeiro de tudo, no ponto principal Jx five, cortamos essa função de alimentação com a instrução import porque estamos usando a função post somente dentro dessa função de alimentação E criamos um novo arquivo chamado feed dot JSX, e dentro desse arquivo, colamos essa função de feed Agora, para tornar essa função acessível em outros arquivos, temos que exportá-la. Salve isso e, no arquivo JSX principal na parte superior, importamos os colchetes Cali e o que passamos Escreva o nome da função ou variável que queremos acessar. Então, adicionamos feed a partir de códigos, ponto final, barra e selecionamos feed Salve as alterações e dê uma olhada. Veja se funciona da mesma forma que antes. Assim, você pode ver como dividimos ou dividimos nosso código em vários arquivos chamados módulos. E se você aprender esse sistema de módulos, poderá entender facilmente os componentes do react. Agora, na próxima lição, veremos uma maneira um pouco diferente de exportar e importar módulos, que usamos muito na próxima seção. 17. Exportar como padrão: Agora, na lição anterior, definimos módulos e os exportamos para torná-los acessíveis para outros módulos. Agora imagine que temos mais uma função nesse módulo de alimentação chamada outra função. E dentro disso, nós simplesmente consolamos dot log Another function. Agora, para exportar essa função, adicionamos aqui a palavra-chave export, salvamos isso e, no arquivo Jx principal do ponto, também podemos importar essa outra função Aqui, removemos esse feed da Importação e basta pressionar Control plus space no Windows ou Command plus space no Mac para abrir a lista de sugestões. Agora, aqui podemos ver a lista de objetos ou funções exportados D é o que chamamos de exportação de nome, que significa que, usando o nome da variável, podemos importá-las. Mas há outra forma de exportar, que é exportar como padrão Então, eu alimento um arquivo JSX de pontos, quero fazer com que essa função de feed, que é a função principal desse módulo de feed, exporte isso como padrão Então, para tornar a exportação como padrão, basta adicionar a exportação padrão no local da exportação. Simples assim. Você pode pensar qual é a diferença entre essa exportação e o padrão de exportação. A única diferença está na declaração de importação. Deixe-me mostrar o que quero dizer. Salve este arquivo e, no arquivo Jx principal, no local dos colchetes, aderimos diretamente ao feed e pronto Aqui podemos dar qualquer nome a essa função. Essa é a única diferença. Agora, se quisermos também importar outra função do módulo de alimentação , também podemos importar usando colchetes de vírgula e aqui podemos importar toda a nossa exportação nomeada do módulo de Agora você pode se perguntar por que precisamos aprender esse padrão de exportação? Porque no react, também veremos essa exportação padrão para exportar todos os componentes Não quero que você se confunda procurando outra sintaxe de exportação Agora, neste arquivo GXS de pontos de alimentação, esse padrão de exportação parece um pouco feio Podemos remover isso na parte inferior, adicionar o padrão de exportação e aqui passamos o nome do nosso objeto ou variável, que queremos exportar, que é feed. E também podemos remover essa exportação e, após a exportação padrão, escrevemos export e, no objeto, passamos o nome da nossa função ou variável, simples assim. Resumindo, para a exportação padrão, nossa declaração de importação tem a seguinte aparência. E para exportação nomeada, nossa declaração de importação tem a seguinte aparência. Só temos que usar colchetes Cal. Isso é tudo sobre módulos e exportações. Parabéns. Agora você está completamente pronto para aprender o react Jazz. Se você estiver assistindo continuamente a este curso, faça uma pausa de cinco a dez minutos na tela e respire um pouco de ar fresco, e nos vemos na próxima seção. 18. Seção 03 Conceitos básicos do React: Bem-vindo à seção básica do react. Nesta seção, você aprenderá alguns dos conceitos básicos que são muito importantes no react. Começamos criando componentes, entendendo JAX e web, adicionando elementos, adicionando expressões, atributos e eventos em Javascript , atributos e eventos Depois disso, o conceito mais importante de reação, que é estado e também um dos estados de gancho mais usados. Manipulação de entradas, lista de mapeamento e muito mais. Estou muito entusiasmado com esta seção e espero que você também esteja, porque usando esses conceitos, vamos criar nosso primeiro aplicativo na próxima seção. Então, vamos fazer isso. 19. Configurando um novo projeto: Vamos primeiro criar um aplicativo totalmente novo, que usaremos em nosso primeiro projeto. Então, abra o prompt de comando ou terminal na sua pasta na qual você deseja criar este aplicativo. E você se lembra de como criar um aplicativo de reação? Escreva usando o NPM, crie branco o mais tardar em vermelho? Agora escreva o nome do nosso aplicativo, que é faixa de tarefas, e pressione Enter. Certifique-se de que sempre escrevemos nome do nosso aplicativo em letras minúsculas e sem sublinhado Caso contrário, isso nos dará um erro. Agora, aqui selecionamos o aplicativo react e, depois disso, selecionamos a variante JavaScript. Bom. Agora, vamos executar esses três comandos. Então, primeiro de tudo, temos que mudar o diretório por CD e pressionar Tab duas vezes. Agora vamos instalar todos os pacotes e bibliotecas usando o NPM Install. E está feito. Agora, vamos abrir esse novo projeto no código VS. Então, escrevemos o ponto final do espaço de código. Isso abrirá o código VS neste diretório. Vamos fechar esse prompt de comando. Nós não precisamos disso. Ótimo. Agora vamos verificar se configuramos nosso aplicativo com sucesso ou não. Abra o terminal usando Control plus Batak ou Command plus Bata e simplesmente escreva NPM run DV Veja, obtemos esse modelo de reação, e isso significa que configuramos nosso aplicativo com sucesso. 20. Construindo um componente próprio: Agora, nesta lição, construiremos nosso primeiro componente de reação. Para recapitular rapidamente, o componente é um trecho de código reutilizável usado para definir determinada parte da interface do Aqui na pasta de origem, criamos uma nova pasta chamada components. Nessa pasta, armazenamos todos os componentes do nosso aplicativo, exceto nosso componente raiz, que é esse componente do aplicativo. Agora, nesta pasta, criamos um novo arquivo chamado card dot JSX ou Js. Agora você pode ter uma pergunta: qual é a diferença entre a extensão JSX e JS Em primeiro lugar, podemos escrever qualquer extensão porque ambas funcionam da mesma forma. Mas, geralmente, usamos extensão JSX porque, quando nosso aplicativo cresce, talvez precisemos escrever algum código JavaScript. Nesse momento, essa extensão JSX dirá qual arquivo é componente traseiro e qual arquivo é apenas código JavaScript Vanilla. Além disso, quando usamos dot JSX, nosso editor de código pode nos oferecer serviço melhor, como sugestão de sintaxe, verificação de erros e Usado para escrever código JSX. Mas alguns desenvolvedores também usam a extensão dot js e, se você estiver trabalhando em um único projeto com vários desenvolvedores, precisará usar a mesma extensão que eles já estão usando. Então, aqui usamos o ponto JSX. Esses são os pequenos detalhes que muitos desenvolvedores experientes não conhecem e os entrevistadores gostam de fazer esse tipo de pergunta Então você pode observar esse ponto. E mais uma coisa, sempre escreva nome do componente com letra maiúscula. Caso contrário, não funcionará no navegador. Eu vou te dizer o motivo na próxima lição. Agora, neste componente na parte superior, temos que importar o react do pacote react. Depois disso, temos que definir aqui a função ou classe, que retornará JSX Portanto, esses são dois tipos de componentes de reação, componentes funcionais e componentes de classe. Os componentes de classe são pouco antigos atualmente porque, para implementar componentes de classe, precisamos aprender alguns dos conceitos avançados de JavaScript. Além disso, o componente de classe é pouco complexo do que o componente funcional. Quando o Facebook foi desenvolvido, reaja pela primeira vez, eram apenas um tipo de componente que é componente de classe. Mas, à medida que o react se desenvolve, ele tinha componentes funcionais e isso torna o react muito simples e fácil. Atualmente, quase todos os desenvolvedores mudam para o componente funcional e é por isso que eu decido criar um discurso usando componentes funcionais Aqui definimos a função com o mesmo nome do nosso componente, que é cartão. E dentro dessa função, simplesmente retornaremos H uma tag com texto, digamos, componente de cartão. Observe que também podemos criar uma função usando a sintaxe da função R, e pronto Criamos nosso primeiro componente de reação. Você pode ver como é simples criar um componente de reação. Só precisamos importar o react da biblioteca react e, depois disso, uma função com o nome do componente e retornar o elemento que queremos exibir. Agora, vamos verificar esses trabalhos ou não. Como sabemos, temos que adicionar esse componente no método de renderização de arquivo principal ou JSX Então, para isso, temos que exportar essa função de cartão desse componente de cartão. Lembramos como exportamos a função do módulo diretamente usando a palavra-chave Export. Você está indo muito bem. Então, escreva a exportação, e essa função de cartão é nosso método principal. Assim, podemos exportar o padrão e escrever aqui o cartão de nome da função. Salve isso e agora temos que importar essa função do cartão no arquivo dot sx principal Então, aqui, após a entrada do aplicativo, importamos o cartão e, nos códigos, temos que passar o caminho do arquivo. Então, cartão de componentes do período. Agora, no lugar desse componente do aplicativo, simplesmente passamos o componente do cartão. Salve esse arquivo e dê uma olhada. Veja, aqui temos nossa tag H one com texto. Então, é muito, muito simples criar componentes no React. Se você estiver um pouco confuso, não se preocupe com a prática, você dominará o React. Quando comecei a aprender a reagir, também fiquei confusa, mas continuei aprendendo e, o mais importante, praticando. Agora, aqui, eu tenho um truque de atalho para criar a estrutura básica dos componentes em apenas 1 segundo Certifique-se de instalar a extensão ES seven react Nippet Isso é necessário para isso. Então, removemos esse código completo e escrevemos aqui RAFCE, que significa componente de função de seta de reação com exportação e pressione tab Veja, aqui temos o padrão para os componentes do React . Ao usá-los, não precisamos digitar manualmente essa função de importação e exportar instruções repetidamente. Elogie a tampa do cursor único e, aqui mesmo, do componente do cartão. Use as alterações e dê uma olhada. Veja, funciona da mesma forma. Agora você pode perguntar: por que não mostro esse tipo de corte no início? Então, o motivo é que eu quero explicar a estrutura completa da criação de componentes. Se eu mostrar esse truque pela primeira vez, você não conseguirá entender os componentes adequadamente. E aposto que você entende muito bem a criação de componentes. Agora, deixe-me fazer um pequeno exercício. Preciso criar outro componente real chamado create todo. Em troca de tags simples, crie um novo todo a partir daqui na tag H one. Tenho certeza de que você pode concluir este exercício. 21. Solução deste exercício: Agora, antes de começarmos nossa próxima lição, deixe-me mostrar a solução do exercício anterior muito rapidamente. Então, nesta pasta de componentes, criamos um novo arquivo chamado createdo dot E dentro desse componente, escrevemos RAA, CE e pressionamos a etapa, e nosso componente está pronto Agora pressione Escape e, no lugar desse D, escrevemos h uma tag e criamos uma nova tarefa a partir daqui. Salve-os e, na pilha principal do ponto jsx, importamos create to do, e também podemos ver Selecione a sugestão e isso importará nosso componente da nossa pasta. Agora, simplesmente passamos aqui, criamos para fazer. Salve as alterações e veja, aqui temos nosso componente create to do. Se você não conseguir concluir este exercício , também não se preocupe. Você pode assistir novamente à lição anterior. Está tudo bem. Não há pressão alguma. 22. Como JSX e Babel funcionam: Agora, na lição anterior, criamos nosso componente e também escrevemos um código parecido com o código HTML. Mas, como eu disse antes, isso não é código HTML. É JSX, que é código moderno para escrever STML e Vimos isso na seção, mas isso é apenas uma pequena introdução. Agora, vamos entender como isso funciona internamente. Então, como você deve saber, nosso navegador não consegue entender o código JSX, mas pode entender o código JavaScript Vanilla. Precisamos converter nosso código JSX em código JavaScript Vanilla, para que nosso navegador possa entendê-lo Para isso, precisamos de um compilador chamado Babble. Ele converterá nosso código JSX em código JavaScript simples, que os navegadores podem entender e Deixe-me mostrar isso na prática. Em nosso navegador, abra uma nova guia e vá até o Bblejs dot IO E vá para esta seção de redação. Então, aqui podemos escrever nosso código JavaScript moderno, e o Babble converterá esse código em código JavaScript que os navegadores possam entender Então, aqui simplesmente escrevemos um cabeçalho const igual a H E passe aqui a string. Isso é JSX. E veja, aqui temos esse código. Então, o JSX é convertido nessa função JSX. Agora, o primeiro argumento desse método é H um, que é nosso tipo de elemento. E o segundo argumento é o objeto que tem propriedades chamadas filhos. Basicamente, crianças são o que passamos dentro do nosso elemento. Agora, aqui, também podemos passar o atributo de classe igual ao título principal e ver aqui obtemos a propriedade de classe neste objeto Para desenvolvedores, escrever código usando JSX é mais simples e fácil do que escrever esse código JavaScript básico. Resumindo, sempre usamos JSX para nossos componentes, e o Webble compilará nosso código nessa E essa é a razão pela qual não precisamos importar compulsoriamente a biblioteca react na parte superior Mas antes da atualização do React 18, precisamos importar o react na parte superior. Agora você pode pensar: como podemos ver o antigo método de reação de pontos de criação de elementos? Então, aqui, nesta opção, temos o tempo de execução do react. Por padrão, ela é definida como automática, que é essa função JSX, e podemos alterá-la para clássica E veja aqui, temos esse método antigo de transformar JSS em código JavaScript usando o método read dot create element Se você quiser ler mais sobre esse tópico , leia este artigo. Vou anexar o link oficial da documentação. Então é assim que o JSX e o Babel funcionam no aplicativo react. 23. Adicionando elementos em componentes: Agora, nesta lição, adicionaremos alguns elementos em nosso componente. Então, depois dessa tag de cabeçalho, queremos adicionar um botão. Então, adicionamos o botão chamado na tarefa. Agora, aqui temos um erro em nossa expressão JSX. Vamos analisar isso e ver se a expressão JSX deve ter um elemento pai Agora você pode pensar por quê. Portanto, na lição anterior, mostro que a expressão JSX é convertida na função de tempo de execução JSX Além disso, vimos o método reatt create element. Neste método de ambos os métodos, aqui só podemos especificar um elemento. Portanto, se escrevermos vários elementos em JSX, ficaremos confusos sobre qual elemento devemos escolher Então, no JSX, sempre adicionamos elementos em um elemento pai. Então, adicionamos aqui Du e movemos nosso código entre esse dado. Salve as alterações e veja formato mais bonito do nosso código de forma estruturada. É por isso que os desenvolvedores amam tanto o prettier e prettier também adicionam esse parêntese Isso se deve à inserção automática de ponto e vírgula do JavaScript. Por exemplo, se tivermos apenas return e nada mais nessa linha, JavaScript colocará automaticamente vírgula aqui. Deixe-me te mostrar. Movemos nosso JSX para a próxima linha. Agora, se salvarmos esse arquivo, veja o script Ja e aqui Sami Colin por causa disso, essas próximas linhas nunca serão executadas É por isso que, mais bonito, coloque aqui um parêntese, salve as alterações e dê uma olhada Veja aqui o título e o botão. Vamos inspecionar oito para que também possamos ver a marcação. Aqui na raiz du, obtemos nosso du e dentro desse du temos nossos elementos. Agora, às vezes, não queremos adicionar esse div indesejado para todos os componentes do react Vamos ver outro método para adicionar vários elementos. No react, temos um método chamado fragmento. Esse fragmento é usado para adicionar elemento pai em nosso JSX, mas não retornará nenhum componente de interface Deixe-me mostrar o que quero dizer. Então, no lugar deste Du, escrevemos o fragmento de ponto de reação. Agora, se você quer saber como eu altero esses textos de abertura e fechamento juntos, é porque estou usando essa extensão de tag autoem Você também pode instalar essa extensão ou aumentar sua velocidade de digitação E aqui está a extensão de instalação atual que eu usei, para que você também possa verificá-la. Este tema de ícone de material é para o tema de Con. Eu gosto muito disso. Agora, de volta ao nosso tópico, adicione o fragmento de reação como elemento pai Salve as alterações e dê uma olhada. Veja, na inspeção, temos aqui apenas nossos dois elementos sem aquele devido indesejado Agora também, há mais um atalho e um método fácil para adicionar fragmentos de reação Podemos simplesmente remover esse fragmento de ponto de reação e pronto Essas tags vazias também funcionam da mesma forma que os fragmentos de reação Salve as alterações e veja se funciona da mesma forma. 24. Expressão JavaScript em JSX: Então, na lição anterior, tínhamos vários elementos SDML em nosso JSX Agora, vamos ver como adicionar uma expressão ou código Javascript ao JSX Então, em vez de mostrar esse texto, queremos mostrar o número total de tarefas como essa. Agora, esse zero está codificado, mas queremos mostrar dinamicamente o número real de tarefas Então, apenas para demonstração antes de nossa declaração escrita, criamos uma variável chamada tarefa igual a, digamos, cinco Agora, como podemos mostrar essa variável de tarefa no lugar desse número codificado? E a resposta é muito simples. Portanto, remova esse número e cole os colchetes Cully. E entre esses colchetes, podemos adicionar qualquer expressão JavaScript válida. Então, adicionamos aqui a variável de tarefa, salvamos as alterações e, aqui, obtemos cinco. Vamos alterar essa tarefa para zero e também podemos adicionar texto no início ou depois desses colchetes. Salve isso e veja, aqui temos a tarefa zero. Então, entre esses colchetes, podemos escrever qualquer expressão Javascript. Essa expressão deve retornar um valor que será exibido na deposição Por exemplo, se escrevermos aqui apenas true e guardarmos isso, não obteremos nada. Então, se não quisermos exibir nada, por que escrevemos aqui essa expressão em JSX É por isso que estou dizendo para você adicionar uma expressão, que retorna um valor, ou podemos até mesmo chamar uma função, que pode retornar um valor. Então, após essa tarefa, criamos uma função, chamada tarefa de contagem, função de erro, e dentro dela, retornamos essa variável de tarefa. E no local dessa tarefa, chamamos a função de contagem de tarefas. Salve as alterações e dê uma olhada. Veja, aqui temos zero novamente. Agora, vamos tornar esse núcleo um pouco interessante como exercício. Então, nesta função, quando essa variável de tarefa é definida como zero, queremos mostrar uma mensagem, nenhuma tarefa disponível, caso contrário, é o número da tarefa atual. Isso é realmente muito simples. Espero que você possa fazer isso. Dicas, podemos remover esse texto da tarefa e retornar a string completa dessa função Portanto, dedique algum tempo a este exercício e, depois disso, você poderá observar a solução. Então, primeiro de tudo, nesta função, adicionamos a condição se a tarefa for igual a zero e, em seguida, não retornamos nenhuma tarefa disponível E então retornamos a string usando a string do modelo. Se você não sabe disso na string do modelo, podemos acessar a variável com string. Basta ver isso, adicionamos acti, task, dois-pontos e, para acessar a variável, adicionamos colchetes e Agora, vamos remover essa tarefa do Jx. Não precisamos disso. Entre e dê uma olhada. Veja, aqui não temos nenhuma tarefa disponível. E se mudarmos nossa tarefa para duas, chegaremos aqui também. Você pode ver como é simples. Eu sei que você completou este exercício, ou pelo menos você tentou resolver isso. Então, leve o crédito por isso. Agora, deixe-me mostrar um equipamento de atalho para escrever esse mesmo código Então, eu comento esse código e, no lugar de usar Ils, usamos operadores ternários, que vimos na seção anterior Então escreva return, e primeiro, adicionamos condição, tarefa igual a zero. Agora adicione um ponto de interrogação para verdadeiro e volte aqui, nenhuma tarefa disponível. Depois disso, coloque dois pontos para quedas e retorne aqui carrapatos, tarefa, dois pontos, dólar, colchetes ci, Salve isso e veja se funciona da mesma forma que antes. Podemos testá-lo alterando seu valor para zero. E veja, não temos nenhuma tarefa disponível. 25. Definindo atributos em elementos: Agora, vamos ver como podemos adicionar atributos nesses elementos. É muito simples. fazer isso da mesma forma que fazemos no SDML Por exemplo, queremos adicionar aqui uma propriedade de valor para esse botão. Então, simplesmente adicionamos aqui um valor igual ao botão da tarefa. Agora vamos fazer com que esse botão seja desativado dinamicamente. Então, em nossa função, definimos uma nova variável chamada botão Ocultar, igual a verdadeira. Agora, quando essa variável do botão de altura é definida como verdadeira, desativamos nosso botão na tarefa. Então, aqui escrevemos disable equals to now no excesso de variável, adicionamos colchetes e passamos Salve isso e veja que nosso botão está desativado. E se definirmos nossa variável para cair , nosso botão não será capaz. É assim que usamos atributos simples e dinâmicos dentro dos elementos. Agora, deixe-me te fazer uma pergunta. Como podemos passar o atributo de classe para elementos? Você pode dizer que classe é igual a dois, e passamos o nome da classe aqui, mas isso nos avisará Vamos salvá-los e abrir o Console. Veja, aqui recebemos esse aviso de classe de propriedade dom inválida, e ele também nos dá uma sugestão Você quis dizer nome da classe? No JSX, temos que usar atributo de nome de classe em vez de usar uma classe simples. Mas por quê? Então, como eu disse antes, essa expressão JSX é convertida em um objeto Javascript simples e, nesse objeto, se usarmos o atributo de classe e em JavaScript, atributo de classe e em JavaScript, palavra-chave de classe já está reservada É por isso que, no react, usamos o nome da classe no lugar do atributo da classe. Agora, outro atributo importante e diferente são os estilos , usados para especificar um estilo embutido para um elemento Então, em HTML simples, escrevemos algo assim Estilo é igual a, e em códigos duplos, escrevemos nossos estilos, digamos, em vermelho Salve isso e C, obtemos aqui um erro, que diz que temos que usar aqui valores, não uma string. No JSX, temos que definir esse atributo de estilo como um objeto de script Ja simples , que contém Na parte superior, criamos um objeto chamado estilos iguais ao Agora temos que passar todas as propriedades CSS na notação camel case, o que significa que, exceto a primeira letra, cada primeira letra da nova palavra é Por exemplo, se você quiser adicionar uma cor de fundo , escrevemos o plano de fundo e uma nova palavra que é cor C e passamos o valor para vermelho. Sei que isso é um pouco confuso, mas não se preocupe 99% do tempo, nem usamos esses estilos embutidos Agora, vamos passar esse objeto de estilos nesse atributo de estilo. Para isso, adicionamos aqui colchetes de Cali porque estamos adicionando JavaScript e adicionando aqui o objeto Styles Salve as alterações e dê uma olhada. Veja, aqui temos esse fundo vermelho. Agora, alguns desenvolvedores não definem esse objeto separadamente. Eles o adicionam diretamente nos colchetes. Deixe-me te mostrar. Então, recortamos esse objeto daqui e o colamos nesse objeto de estilos. Então, esses dois primeiros Calibackets são para acessar JavaScript e, para estilizar, temos que passar o objeto, que é outro Calibacket que torna esses estilos embutidos muito confusos E é por isso que geralmente não usamos estilos embutidos no JSX. Então, vamos remover esses estilos embutidos e também remover essas variáveis de estilos 26. Eventos no React: Agora vamos falar sobre como podemos definir ou lidar com eventos no react. Portanto, lidar com eventos no react é muito semelhante ao tratamento de eventos em STML Vamos primeiro limpar nosso componente, então removemos essa constante, aceitamos essa tarefa e também removemos essa função e removemos esse elemento H. E entre elas, passamos a tarefa de calibragem de tarefas e também removemos essa propriedade de desativação Perfeito. Agora, como eu disse a Liu, todos os elementos reagem como eventos baseados em eventos SGML Por exemplo, aqui queremos adicionar um evento de clique no botão Tarefa. Então, aqui temos um clique, também temos um clique duplo. Adicione aqui um evento ao clicar igual a e entre colchetes C. Agora você pode me dizer por que estamos adicionando aqui colchetes ci? É porque temos que adicionar aqui a expressão JavaScript. Nesse caso, adicionaremos função que é executada neste clique de botão. Agora, no react, temos uma convenção de nomenclatura popular para lidar com eventos Criamos todos os nomes dos métodos de eventos, começando com handle. Apenas observando o nome da função ou do método, podemos dizer que isso é para lidar com esse evento. Então, aqui criamos a chamada de função handleClick. Se estivermos lidando com clique duplo, esse nome será manipulado com clique duplo. Um aviso de que na maioria das vezes usamos a notação CamelCase. Então, manipule a função de clique na seta e, dentro dessa função, simplesmente consolamos o registro de pontos na tarefa. Agora temos que passar essa referência de função neste evento ao clicar. Então, aqui, clique com o botão direito. Salve as alterações e dê uma olhada. Clique neste botão e veja que estamos recebendo a mensagem da tarefa. Agora, certifique-se de não chamarmos essa função porque, se chamarmos essa função aqui, ela só será executada quando esses componentes forem renderizados no navegador. Agora, nesta função, queremos incrementar várias tarefas Então, para isso, primeiro de tudo, temos que fazer essa constante para t porque queremos reatribuir seu valor E em nossa função, aqui simplesmente escrevemos task plus plus. Salve as alterações e dê uma olhada. Clique no botão Tarefa e você verá que as contagens de tarefas não estão sendo atualizadas na página, mas estamos recebendo isso na mensagem da tarefa. Isso significa que a função está funcionando bem. Então, vamos verificar se o valor dessa tarefa está aumentando ou não. Então, após essa mensagem, adicionamos vírgula e adicionamos variável de tarefa Salve isso e reprima esta página. Clique no botão e você verá que os valores estão aumentando, mas isso não será refletido na página da web, e esse é o tópico da próxima lição. Não. 27. O que é Estado: Então, na lição anterior, vimos que o valor da nossa tarefa está aumentando, mas não está sendo atualizado no dom. Então, quando queremos exibir alguma alteração em nosso dom, podemos definir que a variável, objeto ou matriz é a variável JavaScript normal. Portanto, para exibir a alteração no dom, temos o estado em react. Esse estado nos permite gerenciar e exibir os dados alterados em nosso aplicativo. Então, quando definimos nossa variável como variável Javascript normal, react não refletirá essas mudanças se alterarmos o valor dessa variável. Mas se definirmos nossa variável como estado , o react refletirá essas mudanças se alterarmos o valor dessa variável. Então, em palavras simples, estado é usado para dizer ao react qual é essa variável e, se ela mudar , refletir essa mudança no dom. Então, como sabemos, o react tem dom virtual. Quando mudamos o estado de um componente, react pega esse novo componente e compara esse novo componente com o componente antigo e, em seguida, reflete apenas essas alterações no dom real. Simples assim. State é um conceito muito importante de reação, e muitos desenvolvedores iniciantes lutam com esse conceito, mas não se preocupe, todas as suas dúvidas se esclarecerão quando você ver isso na prática Agora você pode perguntar: como podemos definir uma variável como um estado? Então, para definir a variável como um estado no componente funcional, como usar um gancho. Mas antes de usar o gancho, vamos entender o que é gancho. 28. Introdução de ganchos do React: Então, o que são ganchos? Ganchos são as funções para usar alguns recursos de reação em componentes funcionais Em outras palavras, podemos dizer que ganchos são funções que fazem com que os componentes funcionais funcionem como componentes de classe Eu sei que isso parece um pouco complicado, mas não é. Vamos entender com essa história. Antes de o react lançar os hooks, só havia uma maneira de usar os métodos de estado e ciclo usando os Os desenvolvedores tiveram alguns problemas com componentes de classe, como os de classe, que são um pouco difíceis, especialmente para aqueles que estão apenas começando a reagir. Confuso com essa palavra-chave, temos que escrever todo o clichê repetidamente quando criamos um Portanto, o react leva algum tempo para desenvolver funções especiais. Podemos usar um componente funcional e essas funções especiais são chamadas de ganchos Então, acho que agora você entende o que são ganchos de reação, que são funções que fazem componentes funcionais funcionarem como componentes de classe E hoje em dia, ganchos são um conceito muito importante de reação, que todo desenvolvedor de reação precisa aprender Agora, na próxima lição, veremos o primeiro gancho usado para definir a variável como um estado. 29. useGancho de Estado: Agora vamos definir essa tarefa como a variável de estado. Para definir o estado, temos um gancho chamado use state, e esse é um dos ganchos mais importantes e mais usados no react. Então, para usar qualquer gancho, primeiro, precisamos importar esse gancho da biblioteca react. Um nome de todos os ganchos começa com o prefixo use. Todas essas funções que começam com o uso são ganchos de reação. No topo, após essa reação, adicionamos vírgula e, entre colchetes Ci, importamos o estado de uso Agora, em nosso componente funcional, chamamos isso de gancho usado. Dentro disso, temos que passar o valor padrão da variável, que é zero porque queremos definir a tarefa como zero. Agora, essa função retornará uma matriz. Vamos armazenar isso em uma variável chamada matriz de contagem. Depois disso, vamos simplesmente consultar log de pontos dessa matriz de contagem para ver o que está dentro dessa matriz. Salve as alterações e dê uma olhada. Veja, essa matriz tem dois elementos. O primeiro elemento é nosso valor original, que é zero, e o segundo elemento é uma função. Deixe-me te mostrar. Então, primeiro de tudo, armazenamos o primeiro elemento, índice de matriz de contagem zero em uma variável chamada contagem. E agora vamos exibir essa variável Tate na página da web. Então, aqui, não estou removendo essa variável normal porque quero mostrar a diferença. Então, duplicamos essa linha pressionando sift mais alter, mais a seta para baixo no Windows e Saft mais Opson mais a seta para baixo Esses são pequenos trigonômetros que aumentarão sua velocidade geral Agora, no lugar dessa variável de tarefa, aqui adicionamos a contagem. Salve isso e veja se os dois parecem iguais. Agora vamos ver como podemos atualizar esse valor do estado de contagem. Portanto, para atualizar o valor do estado, temos a função como segundo elemento nesse estado de uso. Então, voltando ao código VS, armazenamos essa contagem em um segundo elemento, em uma variável chamada set count. Essa é a convenção de nomenclatura comum para o estado. Então, valor do estado, chamamos um nome de variável normal e função que pode definir o valor dessa variável, definimos o prefixo para o nome dessa função Por exemplo, contar, definir contagem, carregar, definir carregamento, etc Seja qual for o valor que passarmos nessa função de contagem definida, será o valor dessa variável de contagem. Deixe-me mostrar o que quero dizer. Então, aqui queremos aumentar essa contagem um quando clicamos no botão Tarefa. Então, escrevemos a contagem do conjunto e, dentro disso, queremos o valor atual, que é contagem e mais um. Então, quando clicarmos neste botão, primeiro, ele obterá o valor atual da contagem e, em seguida, adicionará um a ele, e essa função de contagem definida definirá esse valor, que é zero mais um como essa contagem, simples como. Salve as alterações e dê uma olhada. Clique neste botão e veja que o estado da contagem está aumentando em um, mas as variáveis da tarefa ainda são as mesmas e as tarefas sempre permanecem iguais. Por quê? Porque quando qualquer estado muda em nosso componente, componentes inteiros são renderizados ou podemos dizer que são executados novamente. E é por isso que a tarefa é sempre permanecer em uma. Não se preocupe Entenderemos essa renderização em detalhes na próxima seção Outra coisa, se atualizarmos a página, essa contagem começa novamente com zero porque aqui definimos o valor padrão como zero Se passarmos aqui cinco , na atualização, chegaremos aqui cinco Então, agora vamos remover essa variável de tarefa e também remover essa tag atual Agora, aqui nosso código parece um pouco feio porque podemos ver que, para criar uma variável de estado, temos que escrever três linhas de código Imagine se tivéssemos de três a quatro variáveis de estado , o quão confuso nosso código parece Vamos encurtar esse código usando a desestruturação de matrizes. Deixe-me te mostrar. Eu comento essas três linhas e escrevemos aqui use state, e dentro delas, passamos o valor padrão para zero. Vamos armazenar isso na variável e no lugar do nome da variável, adicionamos colchetes e, dentro disso, primeiro, escrevemos o primeiro nome da variável, que é count, e depois escrevemos o nome da função, que é set count Essa única linha funciona da mesma forma que essas três linhas, e isso tornará nosso código limpo e fácil de manter. Vamos recapitular isso use tt hook. O tt usado é usado para criar variáveis de estado no componente funcional. Para usar o gancho usado, precisamos primeiro importá-lo e usá-lo dentro do componente funcional. Aqui podemos passar qualquer tipo de dado, como booleano, número, texto, objeto, matriz, qualquer coisa, e depois armazená-los usando a desestruturação de matrizes A primeira variável é seu valor atual e a segunda variável é a função para atualizar esse valor. Simples assim. Eu sei que algumas pessoas ficam um pouco confusas aqui. Também fiquei confuso quando soube que usei o gancho pela primeira vez. Mas com a prática, aprendi esse conceito e o uso em meus projetos. 30. Lidando com as entradas do usuário: Agora, muitas vezes em nosso aplicativo, precisamos receber a opinião dos usuários. Por exemplo, o usuário preenche um formulário longo ou escreve algo na barra de pesquisa, então precisamos obter esse valor de entrada em nosso componente. Então, vamos criar uma entrada com texto digitado. Agora, quando escrevemos algo nessa caixa de entrada, queremos exibir esse valor. Então, para isso, aderimos ao evento onchange, que é executado toda vez que algo muda nessa caixa de entrada O mesmo que fazemos em Vanda Javascript. Então, nesse evento de mudança, tivemos uma função chamada handle change. Agora, vamos definir essa função. Então, const, handle change é igual a, aqui usamos a função aqui usamos Agora, neste caso, queremos consultar o valor atual inserido do log de pontos Para isso, temos que passar aqui o objeto de evento, e esse objeto de evento contém várias informações sobre esse campo de entrada. Então, escreva CLG pcsle dot log e adicione aqui o valor do ponto alvo do ponto de destino do evento Essa expressão retornará o valor atual dessa caixa de entrada. Salve as alterações e dê uma olhada, escreva algo e veja aqui que obtemos esses valores, então está funcionando. Agora, queremos mostrar esse texto atual em nossa página da web. Então, você pode adivinhar o que vamos deixar eu te dar uma pequena dica. Esse valor atual está mudando e precisamos exibir essas mudanças. Podemos usar variáveis normais? Não, então o que vamos usar? Certo, usamos use state. Agora, antes de usar o estado americano, vamos remover essas três linhas de código. Nós não queremos isso. Além disso, removemos essa tarefa plus plus e o log de pontos do console da função handleClick Agora, aqui está mais uma coisa. Sempre definimos nosso gancho de estado de uso na parte superior de nosso componente de função, para que possamos usar esse estado em toda a função. Então, chamamos aqui use state e, dentro disso, passamos nosso valor padrão. E para entrada, queremos configurá-la como uma string vazia. Agora, vamos armazenar isso na variável, e usamos aqui a reestruturação da matriz, entrada e a entrada do conjunto Agora, nesta função de mudança de alça no local deste registro de pontos do console, escrevemos a função de entrada set, simples como set. Agora, no final, vamos exibir a entrada atual. Então, adicione outra tag h one e insira na entrada Ci Brackets. Salve as alterações e dê uma olhada, escreva algo aqui e veja imediatamente que estamos obtendo o valor atual. Então é assim que obtemos o valor das entradas no react. Aqui, tenho um pequeno bônus para você, e essa é a maneira mais rápida de escrever essa linha de estado de uso Então, basta escrever use state. Se você não está entendendo, instale a extensão ES seven, que eu disse para você instalar no início deste curso. Selecione isso e veja aqui que obtemos o modelo para o estado de uso. Aqui temos vários cursores, o que mudará o nome desses dois. Então, escreva a entrada e pressione tab. Isso gravará automaticamente a entrada definida em camel case e passará aqui o valor padrão, string vazia e pressionará escape, e nossa nova variável de estado estará pronta Essa é a beleza da extensão des. Então, espero que você goste desse truque. Agora, na próxima lição, veremos como exibir a lista e reagir. 31. Mapeamento de listas: Agora vamos ver como podemos exibir a lista de matrizes no react Por exemplo, aqui criamos uma matriz chamada tarefa e, por enquanto, adicionamos aqui a Tarefa um, tarefa dois e a tarefa três. Agora, aqui temos que exibir cada tarefa em nossa página da web desta forma. Adicionamos uma lista não ordenada e, dentro dela, adicionamos três itens da lista Temos que fazer isso usando o método map. Então, aqui, temos que adicionar pacotes de calibragem, porque vamos adicionar aqui a expressão JavaScript. Então, ponto da tarefa MAP e dentro disso, obtemos cada função de seta de tarefa e agora simplesmente retornamos aqui JSX, que é o item da lista Deixe-me explicar para você o que está acontecendo aqui. Então, quando usamos o método map nesta única tarefa, primeiro obtemos essa tarefa. Portanto, temos que exibir essa string de tarefas aqui entre esse elemento JSX Então, novamente, usamos colchetes cul para acessar a expressão Javascript dentro do JSX e passamos aqui essa tarefa. Simples assim. Agora, vamos adicionar aqui nossa lista abaixo e, dentro dela, moveremos os itens da nossa lista. Salve as alterações e dê uma olhada. Veja aqui que obtemos essa lista com todos os itens. Se você tiver dúvidas sobre o método map, poderá assistir novamente aula do método MP na atualização de JavaScript Agora, aqui está um pequeno problema. Em nosso console, recebemos esse erro. Cada criança em uma lista deve ter um suporte de chave exclusivo. O motivo pelo qual estamos recebendo esses erros é que precisamos identificar de forma exclusiva cada item dessa lista porque se algo mudou em algum item da lista no dom virtual react precisa identificar rapidamente qual item foi alterado e, de acordo com isso, o react precisa atualizar o dom real Então, voltando ao código VS, e lembre-se sempre de que quando usamos o método MP no react, precisamos passar uma chave exclusiva para o elemento de retorno. Então, escrevemos aqui a chave, e aqui temos que passar um valor dinâmico exclusivo, que é essa string de tarefa. Então, simplesmente passamos essa tarefa. Aqui estamos usando essa sequência de tarefas, mas em aplicações do mundo real, temos cada objeto de tarefa com um ID exclusivo e, nesse momento, passamos o ID do ponto da tarefa. Não se preocupe com isso. Também veremos isso nas próximas seções. Além disso, observe que essa chave só precisa ser exclusiva na lista atual. Isso não significa que você não possa exibir essa lista novamente neste aplicativo, ok? Salve as alterações, atualize a página e veja que o erro desapareceu É assim que mapeamos a lista no react. Então, parabéns. Você executa com sucesso os conceitos básicos do react. Agora, usando esses conceitos, vamos construir nosso primeiro projeto. Estou muito empolgado com isso e espero que você também esteja. Então, nos vemos na próxima seção. 32. Seção 04 Criando o primeiro projeto no React: Bem-vindo à seção quatro do curso definitivo de reação. Nesta seção, criaremos nosso primeiro design de aplicativo de reação no qual veremos como o desenvolvedor pensa antes de começar a desenvolver o aplicativo e como decidir quais componentes criar em nosso projeto. Nesta seção, não adicionaremos nenhuma funcionalidade ao nosso projeto. Vamos nos concentrar apenas na criação de componentes e UIP. Estou muito empolgado com esse projeto e espero que você também esteja, porque esse tipo de projeto é ótimo ponto de partida para qualquer iniciante no react. Então, vamos mergulhar nesse projeto. 33. Visão geral e planejamento do projeto: Em primeiro lugar, deixe-me dar uma visão geral rápida desse projeto chamado de Task Track. É um bom nome, certo? O objetivo básico desse aplicativo é reduzir a tarefa. Então é assim que nosso aplicativo se parece quando não temos nenhuma tarefa. Depois disso, para adicionar uma tarefa, escrevemos a tarefa nessa caixa de entrada. Em seguida, selecionamos as tags que desejamos e também podemos desmarcá-las e, usando esse menu suspenso, selecionar a categoria da tarefa a ser E então adicionamos a tarefa. E no momento em que clicamos nele no botão Tarefa, sem atualizar a página, nossa tarefa é exibida aqui Podemos até adicionar várias tarefas e, se não precisarmos delas , podemos remover essa tarefa individual. Portanto, este é um projeto muito bom e agradável, que você também pode adicionar ao seu currículo ou portfólio. Agora, antes de começarmos a construir qualquer projeto, eu pessoalmente gosto de planejar o processo de criação do projeto. E com um plano, podemos economizar muito tempo e esforço. Esse é o segredo pelo qual eu crio projetos rapidamente e sem escrever, uso código. Tudo bem se você não quiser seguir esse processo ou se puder criar seu próprio processo. Então, deixe-me contar como eu penso em criar o projeto de arte. Primeiro, criaremos a parte SDML e CSS do aplicativo, o que significa a aparência do nosso aplicativo sem nenhuma funcionalidade Agora, depois que nosso design estiver pronto, passamos para a parte de funcionalidade, o que significa que, se clicarmos em Ettask, a tarefa será adicionada às seções ou excluirá a tarefa, etc Aqui também podemos definir alguns componentes. Por exemplo, aqui temos esse design tecnológico igual para muitos lugares, e esse é o único componente. Depois disso, temos o componente de cartão único. O esqueleto de todas as cartas é o mesmo. Só temos que mudar os detalhes, e esse é nosso outro componente. Depois disso, temos o mesmo design para essas três seções. Mesmo assim, temos que apenas alterar os dados dentro disso, mas o esqueleto é o mesmo, que é outro componente Então é assim que podemos adivinhar os componentes do projeto Rag Mas não se preocupe com isso. Também podemos descobrir isso ao criar o design do nosso projeto. Você só precisa encontrar algum design e podemos criá-lo como um componente. Posso ver os componentes apenas observando o design, porque eu pratico em muitos projetos de reação e, com a prática, você também fará isso. Portanto, não se preocupe com essas coisas vamos começar a construir nosso primeiro projeto. 34. Criando o layout do site: Então, primeiro de tudo, criaremos o layout básico, ou podemos dizer, o esqueleto do nosso aplicativo Portanto, nossa página da web é dividida em duas seções, o cabeçalho e a principal. E na seção principal, temos três subseções Então, vamos criar esse layout. Então, voltando ao código VS, e primeiro de tudo, redefiniremos todo o CSS predefinido, todos os elementos, porque sabemos que algumas margens e preenchimentos já foram adicionados pelo navegador a alguns Precisamos remover isso. No arquivo CSS de pontos de índice, removemos todos os estilos predefinidos e adicionamos estrela para todos os elementos dentro dele. Primeiro, definimos a margem como zero, preenchendo com E o tamanho da caixa para a caixa de borda. Esses são todos os conceitos de CSS que eu acho que você já conhece. Salve esse arquivo e, depois disso, no arquivo JSX app dot, que é nosso componente raiz, removemos todo o código e escrevemos RAFC para adicionar o No arquivo JSX app dot, adicionaremos nossos componentes de aplicativos porque esse é o principal ponto de entrada para a hierarquia de componentes de aplicativos Agora, primeiro de tudo, neste DU, adicionamos uma tag de cabeçalho para nossa seleção de cabeçalho. E dê a ele um cabeçalho de sublinhado do aplicativo com o nome da classe. Lembre-se, temos que usar o nome da classe no local da aula. R, aqui estou usando o SNACCSE para escrever todas as classes CSS. Você pode usar o que quiser. Depois disso, adicionamos uma tag principal nossa seção principal e passamos nome da classe para o sublinhado principal do aplicativo Agora, dentro desta seção principal, queremos adicionar três seções. Então, escrevemos uma seção e adicionamos a coluna de tarefa do nome da classe e duplicamos essa pontuação mais duas vezes Então, neste dado, adicionamos aqui o nome da classe ao aplicativo, e pronto. Agora vamos adicionar CSS para esse layout. Na parte superior, importamos códigos, períodos para a pasta atual e o CSS de pontos do aplicativo. Essa é uma etapa que quase todos os iniciantes ou mesmo desenvolvedores experientes esqueceram de adicionar Antes de adicionarmos CSS a qualquer componente, certifique-se de inserir esse arquivo CSS na parte superior do componente, pois sem isso, nosso CSS não será aplicado. Salve esse arquivo e agora vamos abrir o arquivo CSS do app dot. E vamos remover todos esses ladrilhos. Nós não precisamos disso. E no topo, nós do aplicativo, e dentro dele, temos que simplesmente dividi-lo em seções. Então, para isso, usamos cred so write display para avaliar e avaliar as linhas do modelo porque queremos definir linhas de 150 pixels para a linhas de 150 pixels seção do cabeçalho e automáticas para a seção principal Salve esse arquivo e vamos ver o que obtemos. Oh, desculpe, esquecemos de adicionar nosso componente de aplicativo como componente raiz Portanto, no arquivo JSX principal, no local dessa criação escrevemos o aplicativo e também removemos essas duas importações Não precisamos mais disso. Salve as inges e aqui obtemos apenas o cabeçalho porque não adicionamos nada em nossa tag principal Então, de volta ao código VS. E na seção da coluna de tarefas, tivemos a Seção um. Depois disso, seção dois. E a seção três. Salve as alterações e veja, aqui temos essas três seções na seção principal. Agora, queremos exibir essa seção da tarefa uma por uma, na coluna. Então, para isso, usaremos linho. No arquivo CSS do app dot, nós do app underscore main dentro deles, escrevemos o sinalizador de exibição para applyFlexBx e também para definir Depois disso, configuramos o conteúdo justificado para espaçar uniformemente para alinhar essas seções E também adicionamos um pouco de preenchimento de 20 pixels para a parte superior inferior e 8% para a direita e esquerda Salve as alterações e dê uma olhada. Veja, aqui temos nossa seção no centro. Vamos verificar isso usando o Inspect. Então, clique com o botão direito do mouse nesta seção e vá para inspecionar. Veja aqui nossa seção está no centro. Agora, queremos tornar essa seção grande o suficiente para que ela cubra o espaço. Então, adicionamos uma nova coluna de tarefas de classe e definimos a largura para 333 3% Por enquanto, vamos adicionar cor de fundo ao tomate. E, finalmente, adicionamos alguma margem a 20 pixels. Salve as alterações e dê uma olhada. Veja aqui nossa seção aborda a largura. Agora, na próxima lição, criaremos nosso formulário de cabeçalho. 35. Criando um componente de formulário de tarefa: Então, como sabemos, o react funciona com uma abordagem baseada em componentes. E aqui, em nosso aplicativo, não criamos nenhum componente. Então, vamos começar com nosso primeiro componente para nosso formulário de tarefas artísticas. Antes disso, vamos remover esses dois componentes. Nós não precisamos deles. E criamos um novo componente chamado taskfm JSX. Bom. Agora, me diga o que fazemos primeiro no componente. Certo. Usamos o RAFC como padrão Agora abra o arquivo JSX do aplicativo. Coloque essa tag de cabeçalho e cole-a em nosso componente de formulário de tarefas. Agora, no lugar desse texto de cabeçalho, primeiro, queremos adicionar o formulário. E dentro desse formulário, primeiro, adicionamos uma entrada com texto digitado e atribuímos um nome de classe à entrada de sublinhado da tarefa e também um espaço reservado para inserir sua Agora, depois disso, temos que adicionar a tag DV com o nome da classe ao formulário de sublinhado da tarefa, sublinhado inferior e linha de sublinhado Depois disso, temos que adicionar alguns botões de tag. Então, adicionamos um botão com a tag de nome da classe. E dentro disso, passamos HTML. Agora vamos duplicar essa linha mais três vezes e alteramos esse texto para CSS Depois disso, Ja script. E reaja. Estou indo um pouco mais rápido nessa parte de design e CSS porque esse é nosso STML e CSS simples Acho que você já conhece esses estilos. Eu posso te dar todos os estilos, mas isso não é justo porque se você está trabalhando no react, você também precisa escrever STML e CSS Então, depois disso, selecionamos a entrada para menu suspenso e adicionamos o nome da classe ao status de sublinhado da tarefa E dentro delas, adicionamos uma tag de opção com o valor to todo e display tags to todo. A segunda opção vale a pena fazer, e passe aqui também fazendo. E o valor da terceira opção está concluído, e aqui também está feito. E, por fim, adicionamos um botão com tipo submate class name à tarefa underscore submate e escrevemos aqui mais na tarefa. Salve esse arquivo. E agora vamos exibir esse componente no componente do aplicativo. Então, um arquivo JSX de pontos de aplicativo e simplesmente adicionamos aqui o colchete angular, formulário da tarefa e o código C VS sugere automaticamente Selecione isso e pressione Enter ou tab e veja nosso componente importado automaticamente na parte superior Agora, certifique-se de fechar essa tag de componente. Caso contrário, obteremos um erro de compilação. Podemos usar aqui o elemento de fechamento automático. Bom, salve as alterações e dê uma olhada. Veja, aqui temos nosso formulário. Agora, na próxima lição, adicionaremos estilos para esse componente do formulário. 36. Adicionando estilos para o componente do formulário: Então, vamos adicionar estilos para esse componente do formulário. Então, para adicionar estilos, aqui criamos um novo arquivo chamado taskform dot css Agora você pode perguntar por que precisamos criar um arquivo separado para esse componente? Podemos adicionar os estilos no arquivo CSS do app dot? E a resposta é sim. Podemos adicionar estilos no arquivo CSS do app dot, e é isso que alguns desenvolvedores fazem, mas essa não é a abordagem correta porque atualmente temos apenas um componente, mas imagine se tivermos cinco a dez componentes e adicionarmos todos os nossos estilos no mesmo arquivo, para alterar os estilos específicos, temos que encontrar o CSS nesse único arquivo, e isso será difícil e também estressante É por isso que definimos cada estilo de componente em um arquivo CSS separado. Então, primeiro de tudo, importe códigos, períodos, taskfm, dot Salve-os e vamos ver os estilos neste arquivo. Primeiro de tudo, queremos mover todo esse formulário para o centro. Adicionamos o cabeçalho de sublinhado do aplicativo e, dentro dele, primeiro configuramos a exibição de duas bandeiras e alinhamos os itens no centro, que colocará nosso formulário no centro vertical e justificará o conteúdo também no centro, o que colocará nosso formulário no centro que colocará Por fim, adicionamos fundo de água a um pixel sólido com DC DC DC. Salve isso e dê uma olhada. C, nosso formulário está no centro. Agora, vamos adicionar estilos para essa caixa de entrada. Portanto, pontue a tarefa para sublinhar a entrada. E nos colchetes Gully, tamanho da fonte até 20 pixels, espessura da fonte até 500, cor de fundo tem F 9f9f9, cor para água preta para um pixel, sólida e colorida para um DF E três, sólida e colorida para um DF E três Depois disso, o raio da água é de cinco pixels, preenchimento de oito pixels e 12 pixels, margem inferior é de 15 pixels e a largura Salve isso e veja como a entrada está pronta. Agora, queremos tornar esse formulário grande. Então, aqui adicionamos o cabeçalho de sublinhado do aplicativo de pontos, o colchete angular , a forma de destino e, dentro disso, definimos sua largura para, digamos, 40% Salve isso e veja se a largura do nosso formulário está boa agora. Agora, vamos definir estilos para as tags. Mas antes disso, precisamos separar essas tags com esse menu suspenso e adicionar o botão Tarefa. Então, no componente do formulário de tarefas, agrupamos todas essas tags com tag Dv e envolvemos outra parte com outra div Salve esse arquivo e, no arquivo CSS taskfm, adicionamos a linha inferior do Formulário de Tarefas E dentro dos colchetes, apenas adicionamos DF e C, isso sugere Esses são pequenos truques que aprendi com a experiência de criar muitos aplicativos. Depois disso, adicionamos itens de alinhamento ao centro e justificamos o conteúdo no espaço entre eles Vi isso e veja nossas tags, e essas duas são separadas. Agora, vamos definir o estilo das tags. Então, escrevemos a tag e , entre colchetes, primeiro adicionamos o tamanho da fonte a 14 pixels, a espessura da fonte a 500, a cor do plano de fundo, dois tem F nove, F nove, borda, um pixel, sólido tem DFE três, E seis, raio da borda a cinco pixels, depois disso, adicionando dois pixels para a parte superior inferior e dez pixels para a esquerda direita, margem direita para dez pixels e cursor primeiro adicionamos o tamanho da fonte a 14 pixels, a espessura da fonte a 500, cor do plano de fundo, dois tem F nove , F nove, borda, um pixel, sólido tem DFE três, E seis, raio da borda a cinco pixels, depois disso, adicionando dois pixels para a parte superior inferior e dez pixels para a esquerda direita, margem direita para dez pixels para Salve os genes e dê uma olhada. Veja, aqui temos nossos estilos de texto. Agora vamos definir o CSS para o menu suspenso. Então, fazemos o status de sublinhado da tarefa. Dentro disso, adicionamos o tamanho da fonte a 16 pixels, o peso da fonte a 500 wer a um pixel, sólido tem um raio de 999 Bader a Depois disso, largura de 120 pixels, altura de 40 pixels e preenchimento de zero e cinco pixels Salve isso e veja que uma lista suspensa também está pronta. Agora, último estilo para esse botão de envio. Então, volte ao código VS e escreva dot Task underscore submit. E dentro desse último tamanho de um para 16 pixels, um peso para 500, cor de fundo, dois têm 64 57f9 Cor para branco, que tem F, raio da água de cinco pixels, altura de 40 pixels Depois disso, o preenchimento em três pixels contém pixels, margem esquerda em dez pixels, a borda em nenhum e o cursor Esses são estilos muito básicos. Não quero perder seu precioso tempo explicando esses estilos. Se existem alguns estilos importantes , certamente vou explicar isso. Salve as alterações e dê uma olhada aqui, ampliamos um pouco e vemos como nosso formulário está muito bom. Só uma coisa. Quero mudar a cor desse espaço reservado porque parece um pouco escuro Então, de volta ao Aced. E depois desse estilo de entrada, adicionamos a entrada de sublinhado da tarefa com pontos , dois pontos duplos e espaço reservado E dentro dos colchetes, adicionamos cor a um 686868 Guarde as alterações e dê uma olhada. Veja agora, está bom. 37. Criando um componente de tag: Então, na lição anterior, criamos nosso componente de formulário e, nesse componente, podemos ver que temos essa tag de botão, que estamos usando várias vezes. Além disso, quando criamos um cartão de tarefas, também usaremos esse botão de tag. Portanto, é melhor armazenar uma única tag em um componente diferente. Então, vamos copiar essa tag de botão único. E nessa pasta de componentes, criamos um novo componente chamado tag dot Jx write RAFC for Agora, aqui, simplesmente mijamos esse botão. Agora, à medida que criamos um novo componente para essa tag, também vamos criar um arquivo separado para seu CSS. Criamos outro arquivo chamado tag dot css e, como sabemos, antes de escrever CSS, precisamos importá-lo nesse componente. Importe o ponto da tag do período (CSS). Salve esse arquivo. Bom. Agora abra o arquivo CSS taskfmt E recortamos esse estilo de texto daqui, salvamos e colamos em nosso arquivo css tag dot. Guarde isso. Agora, vamos adicionar esse componente de tag no componente tarefa no lugar dos botões de tag. Então, escrevemos colchete angular, etiquetamos e selecionamos a sugestão automática Ele inserirá automaticamente o componente da tag. Agora, podemos remover todos esses botões e duplicar esse componente tecnológico mais três vezes. Salve as alterações e dê uma olhada. Veja, aqui temos esse botão de quatro tags STML. Agora você pode perguntar: como podemos alterar o texto do botão? E esse é o tópico da próxima lição. 38. Acessórios no React: Agora vamos ver como podemos mudar o nome desse botão de tag. Então, para isso, temos o conceito de adereços em react. Então, primeiro de tudo, o que são adereços? Props significa propriedades e props são argumentos passados para componentes de reação Em palavras simples, adereços são usados para passar variáveis em componentes de reação Vamos ver isso na prática. Agora, primeiro de tudo, vamos fechar todos os arquivos pelo link direito no nome do arquivo e selecionar fechar tudo. Agora, vamos abrir nosso componente de formulário de tarefas. Se você quer saber como estou abrindo esses arquivos, basta pressionar Control plus P ou Command plus P e aqui, o nome do arquivo que queremos abrir e pressionar Enter. Veja, sem usar o mouse, podemos abrir os arquivos, e esses são pequenos truques de produtividade que os desenvolvedores usam Agora, aqui queremos passar um nome de tag diferente para esse componente de tag. Então, aqui, à medida que adicionamos atributos em elementos SDML, aqui também podemos adicionar atributos no componente Então, passamos o nome igual a, e aqui queremos passar o nome da tag Então, adicionamos códigos e, dentro deles, adicionamos SDML. Aqui, eu quero esclarecer uma coisa. Podemos dar qualquer nome a esse atributo. É totalmente nossa culpa. Por exemplo, aqui podemos passar o nome da tag ou qualquer coisa. E usando esse nome de atributo, acessaremos esse valor nesse componente. Eu sei que isso é um pouco confuso, mas não se preocupe, assista esta lição completa e todas as suas dúvidas ficarão claras Por enquanto, vamos comentar essas outras três tags, selecioná-las e pressionar Control plus slash ou Command plus slash Aqui passamos nosso atributo. Agora vamos ver como podemos acessar esse valor de atributo dentro do nosso componente. Salve esse arquivo e abra o arquivo JSX tag dot. Para acessar o valor de props, podemos simplesmente passar aqui props como parâmetro nesta função de componente Esse adereço é um objeto, que contém todos os valores do atributo que definimos no componente tecnológico Então, simplesmente consolamos adereços de log de pontos e adicionamos aqui adereços. Salve as alterações e dê uma olhada. Abra o Console e veja, aqui temos esse objeto, que tem a propriedade do nome da tag e seu valor. Agora, vamos imprimir esse valor para o nosso botão de tag. Então, aqui no lugar desse HTML, adicionamos colchetes porque estamos escrevendo uma expressão JavaScript e, dentro dela, escrevemos props dot Salve as gangues e veja, aqui temos o SGML Agora vamos adicionar outras três tags. Então, voltando ao nosso componente , removemos o comentário das tags usando Control plus slash ou Command plus slash E aqui passamos o nome da tag para CSS. Depois disso, marque o nome da tag em JavaScript e, por fim, o nome da tag em Ra , salve as alterações e dê uma olhada. Veja, aqui temos essas tags com nomes de tags diferentes, e é assim que passamos atributos para componentes. Vamos recapitular rapidamente tudo sobre adereços. Props é uma forma de passar dados do componente pai para um componente filho No nosso caso, o formulário de tarefas é nosso componente pai e tag que está dentro desse componente pai, nós o chamamos de componente filho e queremos passar dados do taskfm para o componente tag Simplesmente passamos o atributo do nome da tag e aqui passamos o valor da string. Mas também podemos passar matrizes, objetos ou até mesmo funções nos adereços Depois disso, para acessar o valor desses adereços, adicionamos o parâmetro props nessa função de componente e colocamos nossos dados nesse componente filho, simples assim 39. Construindo o componente de lista de tarefas: Agora vamos criar cada coluna da lista de saída. Aqui podemos ver que, em nosso design, essas três colunas estão juntas. Só temos que mudar o título da coluna e do Imoge. Mas a estrutura de todas essas colunas é a mesma. Podemos criar um componente para a coluna e depois reutilizar esse componente É assim que precisamos pensar quando estamos trabalhando no react, porque o react é baseado na estrutura dos componentes. Vamos criar um novo componente chamado task Column dot JSX. Dentro disso, adicionamos um padrão e, no arquivo JSX do aplicativo, simplesmente recortamos essa seção da coluna de tarefas e a colamos em nosso componente de coluna e a colamos em Agora, primeiro de tudo, nesta coluna, queremos adicionar um título. Então, criamos tem que marcar e escrevemos para fazer. Agora, como sabemos, temos aqui a imagem. Então, abra a pasta de recursos e, dentro dela, temos a pasta Assets. Agora, basta arrastar todas as imagens dessa pasta e soltá-las na pasta de ativos do projeto. Agora vamos ver como podemos adicionar imagem no react porque é um pouco diferente do que fazemos no SDML Portanto, adicionamos a tag de imagem a essa tag ST, e aqui não podemos adicionar caminho relativo da imagem. Isso não vai funcionar. Portanto, para adicionar qualquer imagem, seja JPG, PNG ou mesmo SVG, primeiro precisamos importar essa imagem na parte superior Como sabemos, o react usa um bundler como webpag para agrupar todo o código e ativos usados E quando inserimos o arquivo de imagem em nosso componente , o bundler sabe que deve incluir a imagem no pacote É por isso que precisamos importar a imagem. Então, escrevemos no topo: “ Importe todo”, a partir daqui, colocamos os ativos em uma pasta e importamos diretamente os arquivos PNG de pontos dshit Agora, nesta fonte de imagem, adicionamos calibracets e adicionamos nosso todo Agora você pode perguntar o que há dentro desse estúdio? Portanto, isso nada mais é do que um caminho de nossa imagem, colocado por pacote. Deixe-me te mostrar. Portanto, antes de retornar, basta consultar o log de pontos deste estúdio, salvar as alterações e dar uma olhada Oh, parece uma massa. Então, primeiro de tudo, vamos remover esse console de adereços. Abra o arquivo tag dot jsx e remova essa linha de log de pontos do console Salve as alterações e não obteremos nada porque precisamos adicionar nosso componente de coluna de tarefas em nosso componente de aplicativo. De volta ao código VS e em nosso componente de aplicativo, adicionamos o componente de coluna de tarefas e vemos em Import works. Salve as alterações e dê uma olhada e veja aqui o caminho da nossa imagem. Além disso, podemos adicionar URL diretamente na fonte, mas é assim que adicionamos imagens locais no react. Agora vamos adicionar estilo para essa imagem e título. Então, nesta tag de imagem, adicionamos o nome da classe ao ícone da coluna da tarefa. Além disso, para esse título, adicionamos o nome da classe ao título da coluna da tarefa. Salve esse arquivo e vamos criar um arquivo separado para nossos estilos de coluna de tarefas, chamado taskcolumn dot CSS A razão pela qual sempre damos a ele o mesmo nome do nosso componente é que, apenas observando o nome do arquivo, podemos saber que esse arquivo contém CSS desse componente da coluna de tarefas. Então, vamos primeiro importar o arquivo CSS de pontos da coluna da tarefa na parte superior do nosso componente. Guarde isso. E agora vamos adicionar um pouco de CSS. Então, primeiro de tudo, queremos tornar nossa imagem pequena. Então, escrevemos o ícone da coluna de tarefas. E dentro disso, escrevemos largura 30 pixels, margem e gravamos em cinco pixels. Esses e nosso ícone parecem perfeitos. Mas esse texto e ícone não estão no centro vertical. E também, vamos remover esse fundo de tomate. No cabeçalho da coluna Tarefa, e dentro desses colchetes de Cully, adicionamos duas bandeiras e alinhamos Salve isso e vamos remover o fundo de tomate do arquivo CSS do app dot. Então, abra esse arquivo e remova essa propriedade de fundo. Salve as alterações e dê uma olhada. Veja agora nosso título parece bom. Agora, vamos substituir essas duas seções nosso componente de coluna de tarefas. Então, vá para o arquivo app dot GSX e removemos essas duas seções E simplesmente adicione mais dois componentes da coluna de tarefas. Diga as mudanças e dê uma olhada. Veja, temos três seções. Agora, aqui está um pequeno exercício para você. Simplesmente, precisamos alterar o título dessas duas colunas. Não se preocupe em mudar essa imagem. Apenas tente mudar esses títulos. 40. Solução deste exercício: Então, espero que você resolva esse exercício. E se você não conseguir resolver isso , não se preocupe, pelo menos tente isso. E isso é o importante. Agora, vamos ver a solução desse exercício. Então, aqui, temos que usar adereços porque queremos passar dados do componente pai para o componente filho Então passamos aqui adereços, título para Tudo segundo, título para fazer e último título para fazer Salve esse arquivo e vamos acessar esses adereços no componente da coluna de tarefas Nessa função de componente, passamos adereços como parâmetro e simplesmente substituímos esse todo por colchetes e título de pontos de adereços Então, vamos remover esse console. Não precisamos disso, salve as alterações e dê uma olhada. Veja, nós recebemos títulos. Então, agora eu acho que você tem uma compreensão clara de como usar adereços Agora vamos ver como podemos mudar esses ícones. Para isso, também usamos adereços. Deixe-me contar a lógica. Primeiro, inserimos as três imagens nesse componente do aplicativo. Vamos passar isso como adereço. Na parte superior, primeiro importamos o ícone para fazer ativos de períodos e o PNG de pontos térmicos diretos. Depois disso, importe o ícone de ação dos ativos e o PNG com pontos estelares brilhantes Por fim, importamos o ícone De dos ativos e marcamos o botão de ponto PNG. Agora, vamos passar esses ícones usando adereços. Aqui escrevemos ícones iguais e usamos colchetes. Você pode me dizer por que escrever? Porque estamos escrevendo uma expressão JavaScript e passamos para o ícone do. Da mesma forma, con é igual a fazer Con depois disso, con é igual Salve esse arquivo. E no componente da coluna de tarefas no local dessa tarefa, simplesmente escrevemos o ponto C. Salve as gangues e dê uma olhada Veja, aqui temos esses ícones. Você pode ver como é simples reagir. No começo, quase todos os desenvolvedores tinham medo de reagir, até eu tinha medo de reagir. Mas com a prática e a criação de mais aplicativos, aprendemos a reagir rapidamente. Então não se preocupe com isso. Apenas pratique suas habilidades e, com isso, você também dominará o React. Aqui em nosso componente, podemos ver que sempre que quisermos acessar qualquer adereço, temos que escrever aqui o título do ponto do adereço e o ícone do ponto do adereço Mas isso parece um pouco feio. Então, podemos usar a reestruturação de objetos para isso. Então, aqui escrevemos contras ( objeto igual a adereços). E dentro desse objeto, simplesmente passamos aqui nossos nomes de propriedades, título e ícone. Ou podemos até mesmo simplificá-los adicionando diretamente esse objeto no lugar desses adereços, ambos funcionam da mesma forma Então, o mais comum, usamos esse método, removemos essas linhas e, no lugar desse ícone de ponto de adereço, escrevemos o ícone e, aqui, escrevemos o título Salve as alterações e tudo funcionará da mesma forma que antes. Agora, na próxima lição, criaremos nossa última parte da interface do usuário, que é o cartão de tarefas. 41. Construindo o componente TaskCard: Então, vamos criar um novo componente chamado Tascard JSX. Além disso, criamos um novo arquivo CSS chamado Tascard dot CSS Agora, em nosso componente de cartão de tarefas, vamos adicionar um padrão para esse componente usando RAFC e, na parte superior, simplesmente importamos o arquivo CSS do simplesmente importamos Portanto, não precisamos nos preocupar com isso. Agora, vamos adicionar elementos para esse cartão. Então, no local desta DU, podemos escrever um artigo com o cartão de tarefa do nome da classe. Você também pode usar DU, mas eu gosto de usar tags semânticas Agora, dentro disso, primeiro criamos um parágrafo para adicionar detalhes da tarefa e nome da classe ao texto de sublinhado da tarefa E dentro deles, simplesmente escrevemos que este é um exemplo de texto. Agora, na próxima linha, precisamos de texto no lado esquerdo e botão de exclusão no lado direito. Então, criamos um devido aqui com nome da classe, cartão de tarefa, resultado final. E dentro disso, adicionamos mais dois DUO com nome da classe, etiquetas do cartão de tarefas e, segundo, nome da classe com exclusão da tarefa. Agora, na primeira dupla, adicionamos nosso componente técnico, vemos qual entrada não funciona. Então, no topo, inserimos o componente de tecnologia do módulo de tag. E vamos adicionar esse componente em nosso cartão. Agora, simplesmente passamos aqui adereços de nome para, digamos, DML. Vamos duplicar essa tag e mudar o nome para CSS. Feito. Agora vamos adicionar uma imagem nesta tarefa delete. E para adicionar imagem na parte superior, precisamos importar a imagem. Importe, exclua o ícone de ir uma pasta para cima dos ativos e exclua o PNG de pontos. E na fonte da imagem, passamos colchetes, excluímos o ícone e também o nome da classe para excluir Salve esse arquivo e agora vamos adicionar esse componente na coluna de tarefas. Então, um dos componentes da coluna de tarefas. Então, aqui, depois do nosso título, adicionamos o componente do cartão de tarefas, e C agora para Importar funciona. Salve as alterações e dê uma olhada. E, aqui temos nossos elementos. Agora, vamos adicionar estilos para esse cartão. Portanto, nosso cartão parece um cartão real. Então, no arquivo CSS de pontos do cartão de tarefas, escrevemos o cartão de tarefas. E nos colchetes, primeiro adicionamos largura a 100%, altura média de 100 pixels, borda a um pixel, sólido tem DC DC Em seguida, o raio da borda é de dez pixels. Preenchimento de 15 pixels e margem de 15 pixels para superior e inferior e zero para esquerda e direita Depois disso, tivemos estilos para texto. Então, escrevemos o texto da tarefa com pontos. E nos pacotes CLI, tínhamos tamanho de fonte 18 pixels Espessura da fonte até 600, margem inferior até 15 pixels. Salve os ins e não vejo nenhuma diferença por causa desse ícone gigante. Então, vamos adicionar estilos para isso. Então, adicionamos sublinhado de tarefa delete. E dentro disso, escrevemos a largura de 35 pixels de altura a 35 pixels. Raio de água de 100% para completar o círculo. Agora, queremos definir o ícone de exclusão no centro, para adicionar sinalizadores de exibição, alinhar os itens ao centro, justificar o conteúdo, também centralizar, o cursor até o ponteiro e fazer a transição para 0,3 segundo de entrada e Isso é para adicionar uma pequena animação suave. Agora, vamos adicionar o efeito Hover para o fundo do ícone. Então, a tarefa de pontos sublinha a coluna DLate, mouse e queremos apenas alterar a cor de fundo. Dois têm IB, IB, Ib Agora, depois disso, vamos tornar nosso ícone pequeno. Então, não exclua o ícone. E dentro disso, adicionamos 220 pixels de largura. Salve as alterações e dê uma olhada. Tudo bem. Agora, aqui precisamos fazer essas duas divs em uma única linha e colocá-las no canto esquerdo e direito Então, voltando ao código VS, adicionamos aqui tarefa de ponto, cartão, linha inferior. Dentro disso, escrevemos a exibição em bandeiras, alinhamos os itens ao centro e justificamos o conteúdo Guarde isso e veja se recebemos nosso cartão. Agora deixe-me mostrar um pequeno truque que eu usei muito. Atualmente, esse ícone de exclusão parece muito escuro. No CSS do ícone de exclusão, adicionamos opacidade a 50%. Também adicionamos aqui a transição: todos os 0,3 segundos entram e saem. E depois disso, adicionamos dot task, delt, call on hover, space, dot tilt, icon, e aumentamos a opacidade para 80% porque queremos aumentar a opacidade porque queremos aumentar desse ícone quando alguém passa o mouse sobre um círculo Diga as mudanças e dê uma olhada. Veja agora nosso carro está bonito. Agora, na próxima seção, começaremos a adicionar funcionalidades para esse aplicativo, que é o objetivo principal deste curso. Eu sei que escrevo CSS um pouco rápido, mas isso é porque estamos aqui para aprender a reagir. Se, no curso de reação, aprendermos CSS, talvez alguns de vocês não gostem disso. Além disso, estou escrevendo esse CSS primeiro porque pratico esse aplicativo antes de gravar este curso. Portanto, não confunda com isso. E se você estiver assistindo continuamente a este curso, faça uma pausa de dez a 15 minutos e tome um pouco de ar fresco. Nos vemos na próxima seção. 42. Seção 05 Adicionando funcionalidades no Project 1: Bem-vindo à seção cinco do curso definitivo de reação. Nesta seção, concluiremos nosso primeiro projeto, que é o aplicativo Sask Track Entendemos o básico da funcionalidade, manipulando formulários, selecionando tags e, em seguida, adicionando tarefas por sua propriedade, implementando a funcionalidade de exclusão e também aprenderemos segundo gancho mais importante de reação, que é o efeito de uso. Depois de concluir esta seção, sua confiança na criação do aplicativo react aumentará. Estou muito empolgado com isso e espero que você também esteja. Então, vamos mergulhar nessa seção. 43. Forma de cabo: Agora, antes de começarmos a adicionar funcionalidades em nosso aplicativo, primeiro vamos entender a lógica desse aplicativo. Então, aqui, primeiro, criamos uma matriz de tarefas que têm todas as tarefas. Agora, cada tarefa é o objeto com três propriedades. Primeiro, a tarefa em si, depois disso, temos o status da tarefa, que pode ser feita, feita ou concluída. E terceiro, temos textos, que é a matriz do texto selecionado. Então, quando o usuário adiciona uma nova tarefa, adicionamos um novo objeto de tarefa com essas três propriedades e, em seguida, as mostraremos na coluna de tarefas, simples assim. Então, primeiro de tudo, vamos lidar com esse formulário. O manuseio do formulário significa que aqui precisamos obter valores de entrada do usuário, como texto, status da tarefa e texto selecionado. Se não temos esses detalhes , como podemos armazená-los? Então, quando se trata de um componente de formulário de tarefas, você se lembra do que usaremos para obter a opinião do usuário? Certo, é usado o State Hook. Aqui na parte superior, inserimos useTatehok e dentro do nosso componente, na parte superior, criamos uma variável de estado chamada tarefa e definimos tarefa Como valor padrão, passamos aqui uma string vazia. Agora, quando algo muda em nossa entrada, simplesmente definimos esse valor nesse estado de tarefa. Então, aqui passamos o evento chamado mudança. E dentro desse evento, temos objeto de evento, função de erro, e aqui simplesmente chamamos set task. Agora, como sabemos que qualquer valor passarmos nessa função de tarefa definida, será o valor do estado da nossa tarefa valor do ponto alvo. Agora, vamos verificar se estamos cumprindo nossa tarefa ou não. Basta que o console registre essa tarefa. Salve os genes e dê uma olhada, escreva algo nesta caixa de texto e veja se estamos obtendo o valor de entrada Agora, no lugar de escrever essa expressão aqui, podemos escrevê-la em uma função separada. Então, passamos aqui, nome da função, manipulamos a alteração da tarefa. E dentro disso, passamos esse objeto de evento. Agora, vamos definir essa função. Portanto, const handle task change é igual a aqui obtemos nosso objeto de evento, que passamos daqui, a função de seta, e dentro dela, definimos a tarefa como o valor do ponto de destino do evento Salve as alterações e veja, funciona da mesma forma que antes. Podemos escrever esse código em ambos os métodos. Agora, aqui, podemos até mesmo encurtar esse código. No local dessa expressão no react, podemos passar diretamente o nome da nossa função, que é lidar com a mudança de tarefa. Ambos funcionam da mesma forma. Mas lembre-se, temos que usar aqui a sintaxe da função de seta. Caso contrário, isso não obterá o objeto de evento. Nós obtemos o valor de nossa contribuição. Agora vamos ver como podemos obter o valor dessa lista suspensa. Então, como fazemos com essa entrada, mesmo que fazemos com esse menu suspenso. Então, primeiro de tudo, criamos mais uma variável de estado para armazenar o valor do estado atual. Então, declaramos e passamos aqui status e definimos o status e, como valor padrão passamos aqui para fazer porque, por padrão, se os usuários não selecionarem nenhum valor, adicionamos o status a fazer. Agora, nesta tag de seleção, adicionamos aqui o evento chamado de mudança. E dentro disso, passamos nova referência de função, lidamos com a mudança de status. Agora, vamos também definir essa função. Também podemos duplicar essa função e, no local desse nome, escrevemos nosso novo nome de função , lidamos com a mudança de status E no local dessa tarefa definida, escrevemos o status definido e pronto. Vamos verificar se funciona ou não. Então, aqui também adicionamos status no console, salvamos as alterações , damos uma olhada , escrevemos algo e, por padrão, podemos ver o status. Agora, vamos alterar o valor do menu suspenso e ver aqui obtemos esse valor. Então está funcionando. Agora, aqui está um problema. Como podemos ver para cada valor, temos que criar aqui variáveis de estado e também definir função separada para lidar com a mudança, e isso dá muito trabalho. Você pode perguntar: existe algum truque de atalho para isso? A resposta é sim. Há um pequeno truque que veremos na próxima lição. 44. Truque de atalho para lidar com formas: Portanto, atualmente em nosso formulário, temos apenas dois preenchimentos de formulário Mas imagine se tivermos de cinco a seis preenchimentos e você criar uma variável de estado para cada entrada, que torna nosso código confuso e difícil de gerenciar Então, vamos ver como lidar com várias entradas usando a função single on change Na lição anterior, criamos variáveis de estado individuais para preenchimentos de formulários E então, em cada função de mudança de alça, definimos esse valor para nossa variável de estado. Mas nesse método, criamos apenas uma variável de estado para todos os preenchimentos de entrada. Deixe-me te mostrar. Vamos comentar esse código e, na parte superior, criamos uma nova variável de estado chamada dados da tarefa e definimos os dados da tarefa. E agora, como valor padrão, passamos aqui o objeto. E nesse objeto, temos várias propriedades no par de valores-chave. Então, adicionamos tarefa à string vazia e status a todo. Agora vamos criar uma nova função, manipular mudanças iguais à função de erro E chamaremos essa função em todas as entradas do evento de mudança Então, em nosso campo de entrada, escrevemos aqui handle change. Agora, vamos simplesmente copiar esse evento de alteração e colá-lo em nossa tag de seleção. Portanto, sempre que digitarmos ou alterarmos o valor em qualquer um desses campos, somente essa função de alteração de identificador será executada. Agora, etapa mais importante e sem essa etapa, esse método não funcionará. Portanto, a etapa é adicionar todas as propriedades como seu atributo de nome do nosso objeto de estado. Deixe-me mostrar o que quero dizer. Portanto, para a entrada de nossa tarefa, queremos armazenar seu valor de entrada nessa propriedade da tarefa. Então, em nossa tag de entrada, adicionamos aqui o atributo name igual à tarefa. Agora, para nossa lista suspensa de status, queremos definir seu valor nessa propriedade de status. Então, adicionamos esse atributo de nome de campo selecionado ao status. Certifique-se de escrever o mesmo nome que escrevemos no objeto de dados da tarefa. Agora, dentro dessa função de mudança de alça, escrevemos nossa lógica principal. Então, aqui passamos esse E como objeto de evento para todos esses preenchimentos, e vamos simplesmente registrar pontos do console esse alvo de pontos E. Salve as alterações e dê uma olhada. Veja, quando digitamos a entrada da tarefa, obtemos essa entrada da tarefa e, quando selecionamos o valor no menu suspenso, obtemos essa tag de seleção Nossa lógica principal é quando digitamos o campo do formulário, primeiro obtemos o nome e o valor do campo e, com esse nome, que será o mesmo da propriedade de dados da nossa tarefa, substituímos seu valor pelo valor atual. Eu sei que isso parece um pouco complicado, mas não é. Vamos ver isso e depois disso, tudo ficará claro. Criamos aqui a variável de nome igual a e ponto alvo Nome do ponto alvo E criamos outro valor de variável igual a um ponto alvo Value E vamos consolar essas duas variáveis. Diga as mudanças e dê uma olhada. Veja, obtemos o nome do preenchimento e seu valor quando digitamos os preenchimentos de entrada Agora, basta definir esse valor dentro da nossa variável de estado relacionada ao nome da propriedade. Então, escrevemos aqui os dados da tarefa definida e obtemos aqui os valores anteriores por meio desse parâmetro anterior. Esse valor anterior é igual ao valor atual dos dados da tarefa. Agora, nesta função de seta, retornamos o objeto Em primeiro lugar, retornamos todo o valor anterior usando o operador de propagação. Agora só precisamos atualizar o campo com seu valor. Então, o que quer que retornemos dessa função de retorno de chamada, esse será o valor da nossa variável de estado Agora, aqui sabemos que podemos acessar propriedade do objeto usando colchetes e passar essa variável de nome dentro oito e Colm seu Agora, se escrevermos qualquer coisa dentro da entrada da tarefa, primeiro, isso retornará todas as propriedades anteriores e, em seguida, encontraremos a propriedade task e substituiremos seu valor pelo valor preenchido pela tarefa. Simples assim. Vamos consultar o dot log dessa variável de dados da tarefa e ver se obtemos valores ou não. Guarde os gengivas e dê uma olhada. E, quando atualizamos qualquer campo, obtemos seu valor em nosso objeto de estado, então ele está funcionando. Agora podemos tornar esse código ainda mais curto usando a reestruturação de objetos Então, escrevemos e dot target e, usando a reestruturação de objetos buscamos uma variável de nome e valor Então, essas duas linhas são iguais a esse código de uma linha. Então, removemos essas duas linhas. Agora, queremos consolar esse objeto de dados da tarefa quando clicamos no botão de envio da tarefa. Então, criamos aqui uma nova função chamada handle submit. E dentro dessa função, simplesmente movemos esse console. Agora, na tag do formulário, passamos o evento de envio e passamos aqui a função de envio de handle. Agora você pode perguntar: podemos passar essa função no evento onclick desse botão E a resposta é sim. Você também pode transmitir essa função no evento ao clicar. Mas por que passamos essa função ao enviar? O motivo é quando alguém escreve na caixa de entrada e pressiona Enter e também quando alguém clica no botão Enviar, em ambos os casos, essa função de envio do identificador será executada. Só passamos essa função no evento tlk, então ela só funcionará com o botão Salvar as alterações e dar uma olhada, escrever alguma tarefa E selecione o valor suspenso e clique em consumar. Veja, por apenas um segundo, obtemos o valor, mas depois disso, nossa página é atualizada porque é o comportamento padrão do Portanto, sempre que enviarmos o formulário, essa função de envio de identificador será executada e , em seguida, atualizará a página. Temos que parar com isso. Então, aderimos esse E como objeto de evento. E escreva E previne Default. Essa função evitará o comportamento padrão do formulário. Salve as alterações e dê uma olhada. Preencha este formulário e veja aqui que obtemos esses detalhes. Vamos recapitular rapidamente esse truque. Em primeiro lugar, no local de criar um estado de uso múltiplo, criamos uma única variável de estado, que é objeto. E nesse objeto, adicionaremos o nome das propriedades e o valor padrão. Agora, esquecendo o nome do campo do formulário, passaremos a propriedade name exatamente igual ao nome das propriedades desse objeto Depois disso, passaremos uma única função para todos os campos do formulário no evento alterado. Dentro dessa função, primeiro, obtemos o nome e o atributo de valor do objeto de evento e, em seguida, substituímos o valor atual do nosso objeto de dados da tarefa, simples assim. É assim que gerenciamos vários campos de formulário no react usando o método de atalho Você pode ver que, usando apenas duas linhas de código, podemos definir valores em nosso objeto. 45. Modo React estrito: Agora, deixe-me te mostrar algo interessante. Aqui, simplesmente duplicamos dados da tarefa do disconsol e os movemos para fora em Agora, uma das perguntas mais frequentes que todos os iniciantes do React me fazem é quando fazemos o log de pontos do console, por que estamos vendo todos os dados duas vezes Devemos fazer algo errado? E quando eu estava aprendendo a reagir pela primeira vez, também fiz a mesma pergunta. A resposta é não. Você não está fazendo nada de errado. Isso está acontecendo por causa do modo de reação. Em nosso projeto, abra o arquivo JSX principal. Aqui podemos ver o react embrulhar nosso aplicativo com esse componente de modo estrito de reação Por enquanto, vamos comentar esse componente do modo rico. Salve as alterações , dê uma olhada e veja aqui que obtemos nossos dados uma vez. Então, é firme. Isso se deve ao modo react street. Mas por que precisamos desse modo de rua. Portanto, o react Street Mode é uma ferramenta fornecida pela react que ajuda os desenvolvedores a escrever códigos de melhor qualidade destacando os possíveis problemas durante o desenvolvimento Quando agrupamos nosso aplicativo com o react dot Street Mode, ele ativa verificações e avisos adicionais que ajudarão você a identificar problemas antes que eles causem problemas na produção Por exemplo, ele verificará se há APIs e componentes de reação não suportados ou obsoletos, salvará atualizações diretas, renderizará novamente potencialmente desnecessárias e é salvará atualizações diretas por isso que renderizará por isso que Portanto, é melhor ativar o modo de rua para nosso aplicativo. Vamos remover esses comandos e ativar o modo de rua para nosso aplicativo. Salve as alterações e dê uma olhada. Veja, novamente, obtemos dois objetos de dados. Então eu reajo 18, o modo de rua está ativado por padrão e o react renderiza cada componente duas vezes Então é assim que o modo estrito funciona no processo de desenvolvimento. Quando implantamos nosso aplicativo para produção, o modo de rua não é adicionado e isso renderizará nossos componentes apenas uma vez. Então não se preocupe com isso. Também vamos remover nossa linha de registro de consulta. Na próxima lição, veremos a implementação da seleção de impostos. 46. Seleção de tags: Agora vamos implementar a funcionalidade de seleção de tags. Mas antes disso, vamos remover esse código de comentário. Agora, em nossa variável de dados da tarefa, adicionamos outra propriedade chamada tags e passamos uma matriz vazia como valor padrão. Quando selecionamos qualquer tag, adicionaremos essa tag a essa matriz. E se essa tag já estiver nessa matriz, então removeremos essa tag simples assim. E esse é o meu truque para implementar qualquer lógica na programação. Se eu te dar esse truque, deixe-me te dar. O truque é que, sempre que quisermos adicionar alguma funcionalidade, descreva essa funcionalidade em linguagem humana e pronto. É assim que você pode decifrar a lógica de qualquer funcionalidade. Então, primeiro de tudo, aqui criamos uma nova função chamada select tag, função de erro, e essa função será executada quando clicarmos em qualquer tag. Então, temos que passar a função dentro desse componente de tag. Podemos fazer isso? Usando adereços. Aqui, simplesmente passamos adereços chamados select tag e passamos aqui o nome da nossa função , que é select tag Aqui, estamos usando o mesmo nome de propriedade do nome da nossa função porque não precisamos nos preocupar em dar o novo nome. Você pode escrever aqui qualquer nome. Depende totalmente de você. Agora, vamos copiar isso e colar em todos os componentes da tag. Salve isso, agora vamos abrir esse componente de tag. E aqui no suporte, podemos desestruturar o objeto e obter aqui o nome da tag e a tag Celac Agora, vamos remover esses adereços e também aqui passamos o evento click e simplesmente passamos a tag Celac E é isso. Nossa função SellAcTag será executada neste clique do Estag Agora vamos escrever nossa lógica para a função sectag. Em primeiro lugar, a pergunta é: como podemos obter a tag selecionada atualmente? Porque sem saber o nome da tag, como podemos escrever qualquer lógica? Portanto, no componente técnico, podemos passar esse nome de tag como argumento dessa função de seleção de tecnologia. Mas não podemos chamar essa função aqui porque nossa função será executada apenas uma vez. Então, para resolver esse problema, podemos passar aqui o erro da função e dentro disso, podemos chamar a função selecteg e passar o nome da tag como argumento Salve esse arquivo e no componente do formulário de tarefas, obtemos aqui a tag como parâmetro, e basta consultar o log desta tag, salvar os Gengs e dar uma olhada Veja, quando clicamos nesse botão de tag, obtemos esse nome de tag. Mas nosso formulário também é enviado porque estamos recebendo o objeto de dados da tarefa aqui. Vê? Então, vamos resolver isso. Então, abra o componente de tag. Temos que simplesmente passar aqui o tipo de botão para o botão. Porque em todos os navegadores, exceto o Internet Explorer, tipo padrão de botão é enviar, e é por isso que nosso formulário é enviado. Salve-os e veja, agora só temos o nome da tag. Agora, nossa próxima tarefa é armazenar essa tag em uma matriz de texto. Então, na função Seat tag, em primeiro lugar, escrevemos se é condição, e aqui queremos verificar. Nossa etiqueta já está disponível na matriz fiscal ou não. Então, escrevemos tags de pontos de dados de tarefas. Agora, aqui usamos algum método, e dentro dele, obtemos aqui cada item, função de seta, e temos que passar aqui a condição, item é igual a Eg. Explique essa expressão. O método sum retornará um valor verdadeiro ou falso. Estamos verificando aqui cada item da nossa matriz de tags de pontos de dados de tarefas e aqui o comparamos com o nome de uma tag. Por exemplo, selecionamos a tag STML , essa expressão verificará cada valor dessas tags e, se o STML estiver disponível nessa matriz, ela retornará verdadeiro, caso contrário, falso, simples assim O que faremos se a tag já estiver disponível, removeremos essa tag dessa matriz. Então, escrevemos dados da tarefa, texto com pontos, filtro de pontos. Agora, também nisso, obtemos a função de seta de cada item e passamos aqui a condição, item não é igual à tag. Agora, como sabemos, esse método de filtro obterá itens que passarão por essa condição e retornarão uma nova matriz. Então, armazenamos isso em uma variável chamada tags de filtro. Agora temos que atualizar nosso valor de texto por meio dessas novas tags de filtro. Então, escrevemos dados de tarefas definidas. Primeiro, obtemos aqui o valor anterior, função de erro e, dentro dele, retornamos aqui o objeto e, primeiro, adicionamos todos os valores anteriores usando o operador spread. E simplesmente substituímos as tags para filtrar as tags. Agora adicionamos a condição Ls, o que significa que nossa tag não está disponível nessa matriz de texto, podemos adicionar essa tag diretamente em nossa matriz. Escrevemos dados de tarefas definidas dentro disso, obtemos o valor anterior, função de seta e aqui retornamos o objeto, e aqui adicionamos todos os valores anteriores usando o operador de propagação. Porque sem isso, nossa tarefa e status também serão substituídos. Depois disso, sobrescrevemos tags e aqui passamos nossa tag atual Agora vamos ver se isso funciona ou não. Então, basta consolar o log de pontos, marcar dados dot tex, salvar as alterações e dar uma olhada Selecione qualquer tag e veja se obtemos essa tag aqui. Agora, novamente, clique nessa tag. Veja se foi. Agora, aqui está um bug. Selecione uma tag e, em seguida, selecione outra tag. Você pode ver que nossa tag anterior sumiu. Então, por que isso está acontecendo, vamos descobrir isso. Então, aqui na condição, substituímos diretamente o valor das tags pela tag atual, e é por isso que nossa tag antiga foi substituída pela nova tag. Aqui, também usamos tags de ponto anteriores do operador de propagação, que têm todas as tags antigas e simplesmente adicionamos uma nova tag no final. Eu cometo esse erro intencionalmente porque quero mostrar a importância desses valores anteriores Salve as alterações e dê uma olhada. Selecione as tags e veja se está funcionando. 47. Exibir a tag selecionada na UI: Agora, quando selecionamos nossa tag, não podemos mostrar nenhum efeito em nossa página, e essa é a má experiência do usuário. Portanto, para exibir a tag selecionada, precisamos apenas verificar se essa tag está disponível em nossa matriz de tags ou não. Aqui, criamos uma nova função chamada função Jack tag arrow. Agora, dentro disso, simplesmente queremos retornar verdadeiro ou falso para a tag. Você se lembra de qual método usamos para verificar? Já fizemos isso na função de tag Sylac, que está usando algum método Simplesmente retornamos aqui os dados da tarefa, etiquetas de pontos, pontos. Dentro dela, obtemos função de seta de cada item e verificamos que o item é igual à nossa tag, e obtemos essa tag a partir do parâmetro. Agora passamos esse valor verdadeiro e falso para cada tag. Então vá até o componente técnico. Passamos aqui mais um adereço chamado selected, e aqui chamamos a função check tag E dentro disso, passamos o nome da nossa tag em códigos duplos. Observe que escrevemos o mesmo nome que passamos no nome da tag. Salve este arquivo e, no componente técnico, obtemos aqui os adereços selecionados Agora, usando esses testes selecionados, podemos adicionar o efeito selecionado Aqui, usaremos estilos embutidos porque queremos definir cores diferentes para a tag SDML CSS, JavaScript e react Para isso, criamos uma variável chamada estilo de tag e declaramos que como objeto e dentro desse objeto, estamos no par de valores-chave Deixe-me te mostrar. Primeiro, passamos SDML e aqui como valor, passamos objeto com propriedade de cor de fundo E o valor para um FD é 821. Agora você pode perguntar por que adicionamos aqui o objeto. O motivo é que sabemos que, em estilos embutidos, precisamos passar um objeto de estilo Assim, podemos adicionar diretamente esse objeto pelo nome da tag. Agora, vamos adicionar estilos para outras tags. Duplique esse par de valores-chave mais quatro vezes e, aqui, adicionamos CSS e alteramos cor de fundo para 15 d4c8 Agora, para JavaScript, mudamos cor de fundo dois para FF D um, dois C e, para a cor de fundo do react, dois para C, DA FC. Observe que temos o mesmo nome de tag que passamos nos adereços do nome da tag Caso contrário, não funcionará. Agora você pode pensar por que adicionamos mais um par de valores-chave. Este último é o plano de fundo padrão para nenhuma tag selecionada. Portanto, adicionamos a cor de fundo padrão para F 9f9f9. Agora, vamos adicionar estilos de acordo com as condições. Adicionamos aqui um estilo igual aos colchetes Coli porque estamos adicionando a expressão Javascript, ou seja , se selecionada for verdadeira, adicionamos o tecido têxtil e, em um colchete colchetes Coli porque estamos adicionando a expressão Javascript, ou seja , se selecionada for verdadeira, adicionamos o tecido têxtil e, em um colchete, passamos o nome da tag. Caso contrário, adicionamos o padrão de pontos têxteis. Simples assim. Salve as alterações e dê uma olhada. Veja, quando selecionamos a tag, sua cor de fundo muda e, depois disso, volta ao normal. Agora, com outras tags, não vemos esses estilos porque não passamos adereços selecionados para eles. Então, de volta ao componente do formulário de tarefas, aqui selecionamos os adereços selecionados e os copiamos daqui e colamos aqui, e alteramos o nome da tag para CSS Agora, o mesmo que fazemos com o JavaScript e também fazemos o mesmo com o react. Veja as mudanças e dê uma olhada. Veja agora que nossas tags têm esse efeito selecionado. Eu sei que esse objeto de estilo embutido está confundindo você. Mas se você revisar esse código, entenderá isso corretamente Depois disso, você verá como é simples implementar essa funcionalidade de seleção. Basta pensar na linguagem do dia a dia e não pesquisar tudo no Google. Se você tentar algo e estocar, use isso como uma ferramenta. Agora, aqui temos todos os detalhes sobre a tarefa nessa variável de dados da tarefa. Então, na próxima lição, veremos como podemos exibir essa tarefa em nossa seção? 48. Exibindo os cartões de tarefas: Agora, vamos adicionar nossa principal funcionalidade desse aplicativo, que é adicionar tarefas. Sem esse recurso, nosso aplicativo não é útil. Então, aqui vamos armazenar todas as nossas tarefas em uma única matriz e, usando a propriedade status, as exibiremos em cada seção. Criamos essa matriz como uma variável de estado porque, quando adicionamos ou excluímos a tarefa, queremos ver as alterações em nossa cúpula Agora, a questão é: em qual parte do nosso aplicativo precisamos dessa matriz. Em primeiro lugar, precisamos acessar essa função de conjunto de matrizes em nosso componente de formulário de tarefas porque, quando enviamos nossa tarefa, queremos adicioná-la a essa matriz. E depois disso, precisamos exibir esse estado da matriz nesse componente da coluna de tarefas. Portanto, precisamos da matriz de tarefas nesses dois componentes, taskfm e coluna de tarefas Portanto, temos que criar essa variável de estado nesse componente do aplicativo. Então, podemos passar isso como adereços nesses dois componentes. Então, no topo, importamos o estado de uso da biblioteca react. E no componente, escrevemos State e passamos o nome da variável, tarefa e a tarefa definida. E passamos mt array como valor padrão. Agora, vamos passar essa função de tarefa definida como adereços nesse componente do formulário de tarefas Este arquivo e segure o controle ou comando e basta clicar no nome do componente. Isso nos levará a esse arquivo de componente. Agora, aqui no parâmetro, nós desestruturamos adereços. Eu sei que neste componente, não precisamos disso, mas essa é uma boa prática que nos ajuda no futuro. Então, aqui temos a tarefa definida e, na função de envio do identificador, definiremos os dados da tarefa na função definir tarefa. Então, na parte inferior, escrevemos a tarefa definida. Agora, aqui também, obtemos os primeiros valores anteriores, função de seta e a matriz de retorno aqui, e primeiro adicionamos todos os valores anteriores usando o operador spread. E depois disso, simplesmente adicionamos objeto de dados da tarefa e pronto. Agora, vamos ampliar um pouco meu código VS com Controle e menos ou Comando e menos Salve esse arquivo e vamos verificar o que obtemos. Então, de volta ao arquivo JSX do app dot e simplesmente ao console dot log Tasktask, salve as alterações e Escreva isso e podemos ver que estamos obtendo uma matriz de texto. Então, vamos limpar esse console. Abra o componente do formulário de tarefas e aqui removemos essa linha de texto do console. Salve isso e vamos atualizar a página. Isso é gravação de tarefas, selecionamos tags, selecionamos o status a ser executado e clicamos em Attask Veja, aqui temos essa tarefa. Agora, vamos adicionar mais uma tarefa. Marca o status para realizar uma tarefa. Veja, eu também entendo isso. Então isso está funcionando. Agora, vamos exibir essas tarefas nessa coluna. No componente do aplicativo aqui neste componente da coluna de tarefas, passamos a primeira tarefa como adereços e, depois disso, temos que filtrar essas tarefas por status Por exemplo, se o status estiver funcionando, exibiremos apenas a tarefa que o status está executando. Então, passamos aqui um status igual a a. Agora vamos copiar esses dois adereços e passar aqui nesta coluna de tarefas E simplesmente mudamos o status para fazendo e aqui também colamos esses adereços e mudamos o status para concluído Guarde esses. Agora, no componente da coluna de tarefas, simplesmente desestruturamos aqui a tarefa e o status Agora, no lugar deste cartão de tarefa estático, aderimos ao calibraket task dot Aqui obtemos cada tarefa e também o índice, e simplesmente adicionamos aqui a condição, status do ponto da tarefa é igual a esse status e ao componente puritano da tarefa e, dentro dele, passamos o atributo-chave para cada item exclusivo, que é nosso Esse operador final servirá apenas para expressão verdadeira. Portanto, somente se essa condição for verdadeira, retornaremos esse componente do cartão de tarefas. Caso contrário, não obteremos nada, salve as alterações e dê uma olhada. Veja, aqui temos duas cartas. Um para fazer e outro para fazer. Agora só temos que alterar esses detalhes dentro deste cartão. Portanto, para exibir esses detalhes em nosso componente de cartão, precisamos passá-los usando adereços Então, aqui nós no título é igual ao ponto da tarefa Tarefa. Depois disso, as tags são iguais ao texto do ponto da tarefa. Salve esse arquivo. E agora vamos exibir esses dois valores em nosso cartão. Então, no componente do cartão, nós desestruturamos os adereços aqui e obtemos o título e Agora, no local deste texto, escrevemos o título, e no lugar desse texto, usamos colchetes Cul e método de mapa de pontos de texto Aqui obtemos cada tag e também o índice para passá-la para a Key. função, e retornamos aqui o componente tag, e passamos a chave para o índice e o nome da tag para a tag. Salve as alterações e dê uma olhada. Veja, aqui temos esses detalhes e tags. Agora, por último, queremos mostrar etiquetas coloridas. Então você se lembra que selecionamos uma propriedade? E com isso, podemos adicionar etiquetas coloridas. Deixe-me te mostrar. Então, aqui passamos apenas os iguais selecionados para verdadeiros, e pronto Salve as alterações e dê uma olhada. Veja agora nosso cartão parece muito bom. Além disso, se quisermos passar qualquer valor de props para true o tempo todo, podemos escrever somente esse nome de prop. Da mesma forma que escrevemos o atributo de desativação em HTML. Salve isso e veja se funciona da mesma forma que antes. 49. Excluindo uma única tarefa: Agora, antes de começarmos a implementar a funcionalidade de exclusão, vamos corrigir essa pequena coisa em nosso formulário. Então, quando adicionamos nossa tarefa, esses detalhes antigos ainda estão aqui. Então, se o usuário quiser adicionar outra tag, ele deve primeiro dissecar as tags, e isso não é uma boa experiência para o usuário Portanto, ao criar um site para qualquer cliente, você também precisa se considerar o usuário desse aplicativo e descobrir quais problemas ou bugs estão disponíveis em seu aplicativo. No componente de formulário de tarefas, queremos redefinir esse formulário depois de definir nossos dados de tarefa na função definir tarefa. Basicamente, estamos redefinindo esse objeto de dados da tarefa para o valor padrão Então, escrevemos dados de tarefas definidas e, dentro disso, simplesmente copiamos esse objeto padrão e o colamos aqui, e pronto. Diga as mudanças e dê uma olhada. Envie o formulário e veja nosso texto ser redefinido, mas essa caixa de texto e esse menu suspenso ainda são os mesmos. Por que isso acontece? Vamos descobrir isso. Então, aqui, nesse elemento de entrada, não estamos vinculando o valor da nossa tarefa a esse valor de entrada Deixe-me mostrar o que quero dizer. Então, aqui, quando algo mudamos nessa entrada, esse valor de entrada será adicionado à nossa propriedade de tarefa ponto de dados da tarefa. Mas quando alteramos a propriedade ponto da tarefa nos dados da tarefa , a forma como reagimos alterará o valor de entrada. Não fizemos nada por isso. Não se preocupe. Isso é muito simples. Para isso, basta adicionar aqui atributo de valor e , entre colchetes CL, dados da tarefa, ponto, tarefa Além disso, nesta seleção, passamos o atributo de valor igual ao status do ponto dos dados da tarefa É por isso que precisamos agregar valor à propriedade para que funcione nos dois sentidos. Salve as alterações e dê uma olhada. Escreva a tag de seleção de tarefas e também selecione o status, envie o formulário e veja nosso formulário ser redefinido corretamente. Agora, vamos ver como podemos excluir a tarefa daqui. Então, voltando ao nosso componente de aplicativo, aqui criamos uma função, que lidará com a funcionalidade de exclusão. Agora, como podemos excluir uma tarefa específica? Então, aqui sabemos que cada elemento da tarefa tem seu índice exclusivo. Então, passamos aqui o índice de tarefas. Agora, dentro deles, usamos o método filter, então task dot Filter, aqui obtemos cada tarefa e, no segundo parâmetro, função de erro de índice, e aqui passamos nossa condição. Queremos realizar apenas essa tarefa, cujo índice não é igual ao índice da tarefa. Agora sabemos que esse método de filtro retorna uma nova matriz. Então, simplesmente armazenamos isso em uma variável chamada nova tarefa. E depois disso, definimos essa nova tarefa na função de tarefa definida. Nossa função de exclusão está pronta, precisamos fazer com que essa função seja executada apenas em nosso evento de exclusão de clique. Então, passamos novos adereços nesses três componentes da coluna de tarefas, clicamos aqui e seguramos alt ou option e clicamos aqui e aqui Isso criará vários cursores, e simplesmente escrevemos aqui, handle delete equals to handle E pressione Escape. Salve esse arquivo e agora abra esse componente da coluna de tarefas, e aqui vamos lidar com as propriedades de exclusão e simplesmente passá-las neste componente do cartão de tarefas Lidar com atraso é igual a lidar com exclusão. E também passamos índice igual ao índice porque precisamos passar esse índice nesta função handle delete E podemos ver que aqui estamos passando testes aninhados, que é essa função handle delete Salve esse arquivo e, agora, no componente do cartão de tarefas nos probs, obtemos o handle delete e index Agora, neste DU, passamos por aqui um evento chamado em clique. E aqui passamos a função handle it. Agora temos que passar o valor do índice nesta função handle it. Caso contrário, a funcionalidade do nosso site não funcionará. Então, como podemos fazer isso? Certo, simplesmente passamos aqui a função de seta, salvamos as alterações e damos uma olhada. Clique no ícone Excluir e você poderá ver como essa tarefa foi tranquila. Então, é simples implementar a funcionalidade de exclusão. Agora, aqui você pode ter uma pergunta sobre por que criamos a função de exclusão em nosso componente de aplicativo. Podemos criar isso no componente da tarefa. Sim, também podemos criar função de exclusão de identificadores no componente do cartão de tarefas. Mas aqui você pode ver essa função Delit manipula data da tarefa e também define a função da tarefa Criamos a função handle delete no componente do cartão de tarefas, então temos que passar essa tarefa e definir a tarefa como adereços, e se criarmos handle delat no componente do aplicativo, que tem ambas as variáveis , temos que passar apenas a função handle t como adereços. Então esse é o motivo. 50. Noções básicas de usoGancho de efeito: Então, vamos primeiro entender o que é efeito de uso. O efeito de uso é usado para realizar efeitos colaterais em nosso componente. Então, quais são os efeitos colaterais? Os efeitos colaterais são ações que são realizadas com o mundo exterior. Realizamos um efeito colateral quando precisamos sair de nossos componentes de reação para fazer alguma coisa. Por exemplo, a busca de dados da API atualiza diretamente a cúpula na qual usamos o documento ou o objeto Window ou a função de cronômetro, como definir tempo limite ou definir intervalo Esses são os efeitos colaterais mais comuns no react. Portanto, para realizar qualquer tipo de efeito colateral, precisamos usar o gancho de efeito. Não se preocupe com essa teoria. Digamos isso de forma prática. Então, para usar qualquer gancho, precisamos primeiro inserir esse gancho da biblioteca react. Então, escrevemos aqui use effect, e agora podemos usá-lo no componente de função. Nós nos chamamos de effect hook, que aceita dois argumentos. Primeiro, a função de retorno de chamada, que é uma função na qual escrevemos nossa lógica de efeitos colaterais Essa função será executada sempre que algo mudar em todo esse componente. E o segundo argumento é dependências, que é uma matriz de variáveis e é um argumento opcional Em termos simples, o primeiro argumento é o que executar e o segundo é quando executar. O efeito de uso é executado em cada renderização, que significa que quando a contagem muda, ou quando o final acontece, o que aciona outro Mas podemos controlar isso por meio de dependências. Se você estiver familiarizado com os componentes da classe, o efeito de uso é a combinação de componente montado, componente atualizado e componente desmontado O efeito de uso tem três variações. Não se preocupe Veremos cada variação em detalhes na próxima seção. Mas, atualmente, deixe-me contar resumidamente. Então, primeiro, use o efeito sem dependências. Portanto, se não passarmos nenhuma dependência, essa função de retorno de chamada será executada sempre que algo mudar em nosso componente Em segundo lugar, use o efeito com uma matriz vazia. Portanto, se passarmos apenas uma matriz vazia, essa função de retorno de chamada será executada apenas uma vez quando nossos componentes forem renderizados por E terceiro, use o efeito com variáveis. Por exemplo, se passarmos uma variável de tarefa, quando o estado dessa tarefa mudar, somente então essa função de retorno de chamada será executada, e é isso que queremos fazer aqui Dentro dessa função de retorno de chamada, escrevemos um item de conjunto de pontos de armazenamento local Agora, no primeiro parâmetro, passamos o nome da nossa variável, que é tarefa. E no segundo parâmetro, passamos nossa matriz de tarefas. Mas aqui, temos que converter essa matriz em formato de string porque o armazenamento local só pode armazenar strings como valores Se armazenarmos diretamente uma matriz como um valor , ela será automaticamente convertida em string, mas não poderemos acessar essa letra como uma matriz. Então, usamos aqui o método UPI de cadeia de pontos Json. E passe nosso conjunto de tarefas aqui. Essa função também converterá nossa matriz no formato de string. A única diferença é que podemos converter essa string em matriz novamente e usá-la, salvar as alterações e dar uma olhada, enviar uma tarefa e obter a tarefa aqui. Agora, vamos ver se ele também está sendo armazenado no armazenamento local ou não. Abra o armazenamento local e aqui vemos nossa nova tarefa. Agora, se adicionarmos outra tarefa, veremos nosso armazenamento local ser atualizado. Agora, como sabemos, armazenamos nossa matriz em string. Então, quando obtemos essa matriz, temos que convertê-la novamente em matriz. Então, de volta ao nosso componente de aplicativo e no lugar dessa matriz vazia, passamos json dot pars e, dentro dela, passamos esse valor de tarefa antigo Esta função converterá nossa string em matriz. Salve as alterações e atualize a página. Veja, não perdemos nossa tarefa, excluímos uma tarefa e também tentamos atualizar a página Veja, também recebemos uma tarefa atualizada, então ela está funcionando corretamente. Agora, aqui está um pequeno bug. Abra o armazenamento local e, se excluirmos essa matriz de tarefas daqui, e depois disso, atualizaremos esta página Veja, aqui temos esse erro porque não conseguimos encontrar a tarefa no armazenamento local. Então, para resolver isso, passamos aqui o operador. Aqui, matriz vazia. Se essa expressão retornar null , ela usará uma matriz vazia como valor padrão Salve os anéis e dê uma olhada. Agora nosso aplicativo funciona bem. 51. Adicionando fontes personalizadas: Agora nosso projeto está quase pronto. Eu adiciono aqui algumas tarefas para demonstração. Agora, só precisamos alterar nossos estilos de fonte para nosso aplicativo. Portanto, existem duas maneiras mais populares de adicionar fontes no aplicativo react. primeira é que temos um arquivo de fonte offline em nosso sistema e também podemos usar CD e Link para adicionar fontes. Vamos ver a maneira mais fácil, que é usar CD e Link. Veremos o método offline posteriormente neste curso. Não se preocupe com isso. Então, neste projeto, vamos adicionar a fonte Montserrat. Então, acesse o Navegador, abra uma nova guia e pesquise quando estiver no Google Font. Abra o link desta postagem. Agora, neste site, temos muitas fontes gratuitamente. Além disso, temos outro site, o Font Squirrel. Você pode usar o que quiser. Depende totalmente de você. Aqui, podemos selecionar diferentes estilos de fonte que queremos usar. Então selecione 400, 500, 600, 708 centenas. Agora, nesta seção, temos a opção, basta selecionar a seção Importar e copiar esta instrução de importação e em nosso arquivo CSS de pontos de índice na parte superior, colamos este CD e o link. Bom. Agora, volte ao navegador novamente role para baixo e copie esse CSS para essa família de fontes. E em nosso arquivo CSS de pontos de índice, adicionamos aqui estilos para o corpo e, dentro dele, colamos nossa família de fontes. Salve este arquivo e veja, obtemos nossos estilos e fontes. Agora, nosso aplicativo parece realmente incrível. 52. Encerrando o projeto 01: Parabéns. Você conclui com sucesso seu primeiro projeto no react. Eu sei que você aprende muito com isso e também pode ver que não é muito difícil criar um aplicativo no React. É muito simples. Você precisa aprender a funcionalidade e os recursos do react. Não se preocupe em aprender todos os conceitos uma só vez, pois isso o sobrecarregará Portanto, aprenda alguns recursos e pratique-os; depois, novamente, aprenda alguns recursos e pratique-os novamente. prática é a chave para o sucesso, e esse deve ser nosso foco principal. Se você quiser praticar esse projeto completo novamente, então você pode fazer isso. Dessa forma, você pode aprender mais sobre o React e, se estiver confortável para seguir em frente, poderá continuar este curso. Depende totalmente de você. Pessoas diferentes gostam de abordagens diferentes. Muito obrigado por construir este projeto. Sei que sua confiança no react aumentou, nos vemos na próxima seção. 53. [Opcional] Recurso Arrastar e Soltar no React: Dragon RopFeature é um recurso muito útil para dar mais flexibilidade aos usuários do seu site, e também parece muito legal Podemos mover esse cartão de tarefa cima e para baixo no mesmo status da tarefa, ou também podemos alterar o status, que pode estar em andamento ou concluído. Então, neste tutorial, veremos como implementar o recurso Dragon rob no react Existem muitas bibliotecas para isso, mas eu não sou muito fã de usar essas bibliotecas. Em vez disso, podemos criar recurso Dragon rob usando eventos drop do SDMLPi É muito simples. Não se preocupe com isso. Assista a este tutorial completo e todas as suas dúvidas ficarão claras. Então, sem perder tempo, vamos começar a implementar o recurso Dragon drop neste aplicativo react to do Então deixe-me te perguntar uma coisa. O que está acontecendo no recurso Dragon rob. Não pense em escrever código, pense em como Dragon Rob acontece na vida real. Estamos pegando uma coisa e colocando-a em outro lugar Simples. Suponha que temos uma lista de tarefas e as dividimos em duas categorias para fazer e fazer, e também as organizamos em ordem de prioridade, o que significa qual tarefa queremos fazer primeiro, e depois segunda , terceira, etc., e também podemos realizar várias tarefas ao mesmo tempo Agora, suponha que queiramos mover a segunda tarefa para a lista de tarefas, mas na segunda prioridade. Outros detalhes que precisamos aqui. Pense nisso. Então, a primeira coisa precisamos é qual tarefa estamos realizando. Além disso, precisamos em qual categoria estamos colocando essa tarefa para fazer ou fazer. Além disso, precisamos em qual posição estamos colocando essa tarefa. Nesse caso, isso é o segundo. E pronto, simplesmente movemos essa tarefa para essa categoria e posição, simples assim. Neste aplicativo, temos três categorias, mas o recurso dragon rob permanecerá o mesmo Então, dividi o recurso Dragon Rob em três etapas. Primeiro, devemos saber qual carta estamos movendo. Em segundo lugar, criamos uma área de descarte onde podemos colocar nosso cartão porque não queremos colocá-lo em todo o aplicativo, então criaremos uma área de descarte para E na última parte, escreva a função para colocar a tarefa na posição e alterar o status se passarmos para outro status. Vamos começar com a etapa número um, saber qual carta estamos movendo. Atualmente, em nosso aplicativo, nosso cartão não pode ser arrastado Em primeiro lugar, temos que torná-los arrastáveis. Portanto, neste aplicativo, para cada coluna, criei esse componente de coluna de tarefas que reutilizamos e, para cada cartão de tarefa, temos um componente de cartão de tarefas Portanto, temos que tornar esse componente do cartão de tarefas rastreável. Agora, para tornar nosso cartão de tarefas rastreável, temos o atributo SML phi rastreável como verdadeiro ou só podemos escrever rastreável Salve isso e agora podemos ver como podemos mover nosso componente do cartão de tarefas. Agora, aqui queremos saber qual carta estamos movendo. Portanto, precisamos de algo exclusivo para cada cartão, como ID da tarefa, mas não temos ID em nossa lista de tarefas. Não se preocupe. Também podemos usar aqui esse índice, que também é exclusivo para cada tarefa. Agora, para armazenar esse índice de cartão de arrasto, necessário criar uma variável de estado local porque podemos selecionar qualquer cartão, e o valor do cartão de arrastamento também mudará Agora, a questão é onde criamos essa variável de estado tragável, onde precisamos do estado da placa frontão Portanto, em nosso componente de aplicativo, temos nosso estado de tarefa e, também no componente de aplicativo, precisamos de um índice de cartão de frontão, para que possamos modificar nossa lista de tarefas atual Então, após esse estado de tarefa, criamos uma nova variável de estado chamada active card set active card. Como valor padrão, nós o definimos como nulo, o que significa que nenhuma carta está sendo arrastada Agora, quando começamos a arrastar qualquer cartão, armazenamos o valor do índice do cartão nesse estado ativo do cartão E quando o arrasto terminar, novamente tornamos o valor do cartão ativo como nulo Agora, para definir o cartão ativo para esse índice do cartão de tarefa, precisamos definir a função do cartão ativo no componente do cartão de tarefas e como podemos fazer isso. Certo, usando adereços. Então, de volta ao componente do aplicativo, movemos o cursor para aqui, pressionamos Alt ou opção e também clicamos nesses dois componentes da coluna de tarefas. Ao segurar Alt ou option, podemos criar vários cursores Passamos um novo adereço, definimos a carta ativa igual a definir a Pressione escape para sair da edição com vários cursores. Salve isso e no componente da coluna de tarefas, primeiro, obtemos o cartão estativo em adereços e também o passamos no componente do cartão de tarefas, cartão setivo é igual ao cartão catectivo Salve isso e, no componente do cartão de tarefas, finalmente, obtemos a função de cartão cetativo Agora, na tag do artigo ou se você tiver , nessa tag, eventos da tag SDMLPi ddt. Aqui, precisamos arrastar o início porque, quando começamos a arrastar esse cartão de tarefa dessa vez, configuramos o cartão ativo para o índice atual do cartão, que é esse índice Então, função de seta e simplesmente seta o cartão para indexar. Além disso, quando nosso arrasto terminar, queremos definir null como carta ativa Então, adicionamos outro evento na função de seta de arrastar, definimos o cartão ativo como nulo. Salve as alterações. E para degustar, vamos imprimir o cartão ativo. No componente do aplicativo na parte inferior da tag principal, adicionamos uma tag H e simplesmente imprimimos aqui o cartão ativo. Salve as alterações e dê uma olhada. Arraste uma carta. Veja aqui, obtemos o índice da tarefa, e no momento em que soltamos nosso cartão, veja, ele sumiu. Agora, aqui, quando estamos arrastando nosso cartão de tarefas, podemos destacar nosso cartão selecionado para uma melhor experiência do usuário Então, no arquivo CSS de pontos do cartão de tarefas, após o estilo do cartão de tarefas, adicionamos cartão de tarefa, dois pontos ativos e, dentro dele, primeiro definimos a opacidade em 0,7 e a borda em um pixel, o sólido tem 111, que E também para o cartão de tarefas, colocamos o cursor para pegar. Salve isso e veja agora que obtemos esses blocos. Então, nosso primeiro passo está pronto. Agora, a segunda etapa, que é criar uma área de descarte, significa onde podemos soltar nosso cartão ativo Podemos arrastar nosso cartão em dois lugares. Depois de cada cartão ou antes da nossa lista de tarefas, que é o lugar entre o cabeçalho do status da tarefa e a primeira tarefa da lista. Então, esses são os lugares onde podemos colocar qualquer cartão. Então, quando arrastamos nosso cartão para aquele local, podemos mostrar algo como soltar aqui ou uma caixa simples. Deixe-me mostrar como criar isso. É muito simples. Então, em nossa pasta de componentes, criamos um novo componente chamado drop area dot JSX Estamos criando um componente separado para mostrar área de queda porque podemos usar esse mesmo componente várias vezes Aqui, adicionamos código padronizado usando RAFC no local desta entrega, podemos adicionar uma tag de seção e aqui escrevemos o texto drop-here Salve isso e vamos exibir esse componente da área de descarte após cada cartão Então, aqui, no componente da coluna de tarefas, aqui podemos ver que estamos mapeando todas as tarefas na coluna. Então, após esse componente do cartão de tarefas, adicionamos nosso componente de área de descarte Agora, aqui temos um erro de tempo de execução porque aqui estamos retornando aos componentes. Então, para resolver isso, podemos envolver os dois componentes com o fragmento de ponto de reação E mova esse fragmento de fechamento após soltar o componente da área. E aqui, temos que passar uma chave igual ao índice no fragmento de pontos de reação porque aqui estamos Veja as mudanças e dê uma olhada. Veja, depois de cada cartão de tarefa, obtemos o componente drop here. Agora também precisamos desse componente de área de queda aqui no topo da lista. Então, de volta ao código VS. Aqui, antes deste mapa de tarefas, adicionamos a área de lançamento. Salve as alterações e dê uma olhada. Veja, aqui temos essa área de entrega. Vamos tornar esses estilos um pouco melhores porque aqui eu acho que é uma questão de margem. Então, abra a coluna de tarefas dot Cssle e, para esse título, adicione a margem inferior a 15 pixels, salve isso e também no arquivo CSS do Tascard Em vez dessa margem, definimos a margem inferior em 15 pixels. Salve isso, e agora parece um pouco bom. Agora vamos estilizar essa seção de área de queda. Então, voltando ao componente de área de descarte aqui, damos o nome dessa classe de componente para eliminar a área de sublinhado Agora, para CSS, eu gosto de criar um arquivo CSS separado, drop area dot CSS. Aqui tínhamos uma área de queda e dentro dessa largura 200% de altura até 100 pixels, a cor tem DC DC DC, a borda de um pixel tem DC DC DC, raio wer é de dez pixels, preenchimento, 15 pixels e margem inferior, também Agora, para aplicar esses blocos ao nosso componente de área de lançamento, precisamos importar esse arquivo na parte superior. Portanto, importe dot slash drop area dot css. Uma coisa que eu esqueci muito quando comecei a aprender a reagir Salve as alterações e dê uma olhada. Veja, é assim que parece. Agora, por padrão, não queremos mostrar essa área de descarte. Queremos mostrar apenas quando arrastamos nosso cartão de tarefas na área de lançamento Para isso, precisamos criar uma variável de estado local no componente de área de queda. Então, indique e dê um nome, show drop, set, show drop e, por padrão, transformamos seu valor em falls. Agora, a lógica simples é quando arrastamos nossa carta nesta seção , transformamos esse estado em verdadeiro. E quando sairmos desta seção, faremos com que o estado caia, o que significa não aparecer. Portanto, na tag de seção, temos outro evento chamado arrastar a função Enter arrow e definir show drop como True. E adicionamos outro evento na função de arrastar a seta Liu e simplesmente chamamos set showdrop ao que caímos Além disso, para esse nome de classe, podemos adicionar condição. Então, aqui, adicionamos colchetes C. Se showdrop for verdadeiro, então adicionamos a classe drop area, caso contrário, adicionamos a classe hide underscore drop Salve as alterações e, na área de lançamento do arquivo CSS de pontos, adicione mais alguns estilos. Então, na área de queda, adicionamos opacidade a um e também fazemos a transição para todos os 0,2 segundos de entrada e saída E no ponto inferior Hyde underscore top, simplesmente definimos a opacidade Então, as mudanças e dê uma olhada. Arraste uma carta e simplesmente sobre uma área solta. Veja como isso parece lindo. Então, aqui nossa segunda etapa também está concluída. Agora só precisamos saber em qual posição estamos soltando nosso cartão E então, de acordo com isso, escrevemos uma função para atualizar nossa lista de tarefas. Agora, primeiro, como podemos saber em qual coluna estamos descartando a tarefa Então, na coluna de tarefas, eu passei o status anteriormente, para que possamos usar esse status e também esquecer a posição que temos aqui no índice Portanto, se você quiser adicionar nossa tarefa ao lado dessa tarefa , nosso novo índice será índice mais um. Não se confunda. Eu vou te mostrar em apenas um minuto. Então, no componente do aplicativo, criamos uma nova função chamada on drop. E no parâmetro, obtemos o status, que é em qual coluna, estamos descartando nossa tarefa Além disso, obteremos o índice, ou podemos dizer posição, que é a posição de descartar a tarefa Por enquanto, eu simplesmente o cartão ativo Consol dot log Ti dollar será colocado no status de dólar e na posição do índice do dólar O local do índice, eu gostaria de dar o nome desse parâmetro à posição. Eu acho que é mais preciso. Agora temos que chamar essa função quando soltamos nosso cartão na área de depósito, porque é quando queremos fazer alterações em nossa tarefa Então, passamos essa função como adereços nessas três colunas de tarefas Acho que, por engano, forneço um nome de função escrita Selecione isso e pressione F dois e renomeie o nome da função. Salve esse arquivo, no componente da coluna de tarefas. Primeiro, obtemos soltar como adereços e simplesmente passamos essa função ao soltar como adereços neste componente de área de soltar Além disso, para a função on drop, temos que passar um status igual ao precisamos de um índice, que é índice mais um porque queremos colocar esse cartão após esse cartão de tarefa. Agora, em vez de passar esses três testes, podemos fazer algo assim Nos adereços on drop, podemos passar a função de retorno de chamada e simplesmente chamamos aqui a função on drop E primeiro parâmetro, passamos status, que é o status dessa coluna de tarefas. E então passamos o índice mais um. Se você se confundir com esse método, poderá passar três adereços separadamente e, no componente de área de queda, deverá chamar simplesmente assim Vamos salvar esse arquivo e, no componente drop area, obtemos a função drop. Agora, nesta seção, temos outro evento chamado on drop, que será executado quando colocarmos algo nesta seção. Então, aqui passamos a função de retorno de chamada e, primeiro, simplesmente chamamos isso de função on drop sem parâmetro porque já passamos esse parâmetro em adereços anteriores E também aqui temos que esconder a área de lançamento depois de soltarmos o cartão. Portanto, o set deve cair em quedas. Guarde isso. E se arrastarmos e soltarmos em qualquer área de soltar, não receberemos nossa mensagem do console porque precisamos evitar o comportamento padrão de arrastar sobre o evento. Adicionamos aqui ao arrastar, obtemos aqui a função de erro de evento, padrão de prevenção de pontos de evento. Salve isso e, agora, se arrastarmos e soltarmos novamente a tarefa, receberemos a mensagem do console, qual será a opção na posição três, porque esse primeiro índice de cartas pode ser dois, mas isso não importa. Portanto, estamos obtendo os dados necessários e também a posição. Agora, se arrastarmos e soltarmos nosso cartão no início da lista, obteremos um erro. On drop não é função porque não passamos a função drop como adereços nessa área de drop Então, eu simplesmente os copio em adereços suspensos da parte inferior e simplesmente colo aqui Agora, você pode me dizer qual propriedade precisamos mudar aqui? Certo, só precisamos mudar o índice porque o status será o mesmo. Então, em que posição está essa área de queda? Simplesmente, está em zero porque na matriz, índice zero é a primeira posição. Aqui estão as mudanças e dê uma olhada. Agora recebemos a mensagem do console, temos o status e a posição do cartão ativo. Agora só precisamos escrever a lógica para reorganizar nossa tarefa na função on drop Em primeiro lugar, verificamos se o cartão ativo é igual a nulo ou o cartão ativo é igual Então, simplesmente retornamos desse ponto. Depois disso, vamos simplesmente escolher a tarefa que queremos mover. Portanto, const task to move é igual a task, e obtemos Depois disso, para atualizar nossa lista de tarefas, primeiro precisamos remover o cartão de identificação atual da nossa lista de tarefas Filtro de pontos da tarefa, aqui obtemos cada tarefa e também a função de seta de índice, e aqui passamos índice de condição não igual ao cartão ativo Esse método de filtro removerá nosso cartão ativo atual dessa lista de tarefas e retornará a matriz de tarefas atualizada. Assim, podemos armazenar essa matriz na variável chamada tarefa atualizada. Agora, só precisamos colocar nossa tarefa para nos movermos em nossa posição caída. Portanto, podemos usar um método de emenda como esse, emenda de pontos de tarefa atualizada Agora, no primeiro parâmetro, escrevemos onde queremos colocar nosso novo item. No nosso caso, ele é armazenado na posição. Depois disso, escrevemos zero, o que basicamente significa zero elementos removidos. E no terceiro parâmetro, podemos passar nosso objeto ou item, que queremos armazenar nessa posição. Então eu adiciono aqui o objeto e, em primeiro lugar, distribuo todas as propriedades da tarefa para mover o objeto e, depois disso, podemos simplesmente alterar a propriedade de status para esse status de parâmetro. Agora, como sabemos, atualizamos a lista de tarefas, para que possamos simplesmente definir a tarefa como tarefa atualizada. Além disso, na parte inferior, vamos remover essa etiqueta h one, que está exibindo um cartão ativo. Salve as alterações e dê uma olhada. Veja, agora podemos mover nossa tarefa de uma lista para outra, e também podemos movê-las em uma lista simples. Então, é isso para este tutorial. Este é um longo tutorial, mas espero que você veja que Dragon Drop não é muito difícil. Temos que fazer o processo passo a passo. 54. Seção 06 Projeto 02 - MovieManiac: Bem-vindo à Seção seis do curso definitivo do React. Nesta seção, vamos começar a construir nosso projeto também, que é o filme Maniac Você pode ver como está legal e os detalhes do filme estão vindo de outro site. Também podemos filtrar esses filmes por sua classificação e, depois disso, também podemos classificá-los por data de lançamento ou classificação, crescente e decrescente O objetivo deste projeto é aprender os recursos de chamada, filtragem e classificação do EPI recursos de chamada, filtragem e classificação que são usados em muitos aplicativos do mundo real Saiba que você está entusiasmado com esse projeto, então vamos mergulhar nesse projeto. 55. Configurando o projeto e o estilo do layout: Vamos começar criando o novo projeto. Então, abra a pasta do projeto react e abra o prompt de comando ou terminal nessa pasta. Agora, você pode me dizer qual comando usaremos para criar um novo aplicativo? Escreva NPM, crie branco, aerado, mais recente e pressione Enter Agora, aqui escrevemos o nome do nosso projeto movie Maniac, e pressionamos Enter Agora, selecione a estrutura, que é react, e depois selecione a variante, que é JavaScript e pressione Enter. Agora só precisamos executar esses três comandos. Então, primeiro de tudo, entre nesta pasta com o CD e pressione tab, selecione a pasta Movie Maniac Agora vamos instalar todas as dependências. Então instale o NPM e pressione Enter. Isso levará algum tempo. Então, até lá, vamos planejar nosso aplicativo. Então, primeiro de tudo, podemos dividir layout do nosso aplicativo em duas seções. O primeiro é Nevar e o segundo é essa lista de filmes. Agora, vamos definir os componentes que podemos criar para esse aplicativo. Uma coisa que eu quero esclarecer é que esse processo de planejamento não é o plano absoluto. É apenas um ponto de partida rápido. Podemos adicionar ou remover componentes de acordo com nossas necessidades. Então, primeiro, podemos separar esse componente Naba. Depois disso, podemos criar um componente para essa placa de filme. Depois disso, nesta seção de exibição, temos mais três seções, que são a popular seção mais votada e a próxima seção. Mas você pode ver que a estrutura básica de toda a seção é a mesma. Todos têm cabeçalhos, filtros, curtas-metragens e lista de cartões de filmes Então, também podemos criar componentes reutilizáveis para isso, e acho que é tudo o que precisamos Agora vamos verificar nossas dependências instaladas ou não. E sim, está instalado. Então, vamos abrir este projeto no código VS por ponto de espaço de código e pressionar Enter. Bom. Agora podemos fechar este terminal. Nós não precisamos disso. Além disso, fechamos nossa pasta. Agora, vamos garantir que nosso projeto esteja funcionando ou não. Então, abra o terminal com Control plus Batak ou Command plus Batak e escreva NPM run DO e Mais uma coisa, se você quiser parar este aplicativo, pressione Control plus C ou Command plus C para isso. Agora segure Control ou command e clique na URL do host local. E está funcionando. Agora, vamos criar um layout básico para nosso aplicativo. Então, abra o arquivo JSX do app dot, removemos todo o código daqui e criamos um componente funcional com o RAF Agora, primeiro de tudo, atribuímos a essa classe um nome igual a app. E dentro desse Du, queremos criar o primeiro NaBR, escrevemos aqui a tag Naw e damos a ela o nome de classe Na Bar, aqui escrevemos o conteúdo do Navbar Depois disso, criamos nossa seção principal do nosso aplicativo e, dentro dela, simplesmente escrevemos o conteúdo principal. Salve-os e vamos ver o que obtemos. Veja, aqui temos as duas seções. Agora, vamos definir o estilo de cada um deles. Mas antes disso, precisamos remover alguns estilos básicos. No arquivo CSS de pontos de índice, removemos todos os estilos e, na parte superior, escrevemos Calibackets em estrela e escrevemos C, ele escreverá a margem zero. Depois disso, B zero, e obtemos o preenchimento zero e o tamanho da caixa na caixa de borda Esses são os truques que aprendi trabalhando em vários projetos. Mas eu gostaria de ter os truques no começo, e é por isso que estou lhe dando esses truques mais cedo. Agora, depois disso, adicionamos estilos para o corpo e vamos mudar nossa cor de fundo para 101010 E pinte para FFF, que é branco. Salve esse arquivo. Agora vamos adicionar CSS ao nosso layout. Portanto, em nosso arquivo CSS de pontos de aplicativo, removemos todos os estilos e aplicativos e, dentro desses colchetes, escrevemos a exibição linhas do modelo de grade de grade em 80 pixels e automaticamente Portanto, a altura da primeira seção é de 80% e a altura da segunda seção está automática. Você já sabe disso, certo, e isso é tudo o que precisamos para o layout. Salve esse arquivo e dê uma olhada. Não entendemos nossos ótimos estilos. Você pode me dizer qual é o motivo? Certo? Não importamos arquivo CSS de pontos do aplicativo em nosso componente de aplicativo, e foi isso que muitos desenvolvedores se esqueceram de fazer Então, escrevemos Import period slash app dot css, salvamos as alterações e damos uma olhada Veja, nós entendemos nossos estilos. Agora, na próxima lição, criaremos nossa seção Navbar 56. Adicionando fontes personalizadas: Agora, vamos adicionar uma fonte para esse aplicativo. Então, como eu disse, temos duas maneiras de adicionar fontes em nosso aplicativo react. No primeiro projeto, vimos como adicionar fonte usando o CDN Link. Agora vamos ver como adicionar uma fonte offline. Então, novamente, vamos usar MonstFont porque essa é minha fonte favorita Então, em nosso navegador, abra uma nova guia, pesquisamos as fontes Monsaet do Google e abrimos este primeiro link Agora, aqui no topo, temos a opção Baixar família. Clique nele e veja o download iniciado. Vamos abrir isso na pasta Download e simplesmente descompactá-lo aqui Agora vamos abrir MonsttFolder. E aqui temos esse tipo de estrutura de pastas. Nessa pasta estática, temos todos os pesos de fonte individualmente. Agora, de volta a esta pasta, e aqui temos os dois arquivos de fontes completos que contêm todo o peso da fonte. Aqui, não queremos itálico, queremos fonte normal Mas o tamanho dessa fonte é bem grande. Podemos ver que é 218 KV, que é o tamanho grande dos arquivos de fonte Você pode converter esse arquivo de fonte em um tamanho pequeno de arquivo de fonte. Então, no navegador em New Tab, pesquisamos TTF, que é nosso formato de arquivo atual, para W FF two, que é o arquivo de fonte mais popular para navegadores da web Abra este site do Cloud Convert e aqui temos que selecionar nossa fonte. Selecione a fonte Monster At, abra-a e clique em C Converter. Isso levará pouco tempo. E clique em Baixar. Agora, em nossa pasta Download, podemos ver que o tamanho do arquivo foi reduzido para 82,8 KB, o que representa uma redução de quase 60 a 70% Aqui, renomeamos esse arquivo para Monsratt WFF. Agora, vamos verificar se esse formato de telefone está funcionando para todos os navegadores ou não. Então acesse caniuse.com e, no topo, pesquisamos WFF two E veja, ele está funcionando em quase todos os navegadores. Mais especificamente, 97% dos navegadores suportam essa fonte. Então, de volta ao código VS, e em nossa pasta de ativos, criamos uma nova pasta chamada fontes e, nessa pasta, simplesmente arrastamos e soltamos essa fonte. Agora, vamos ver como podemos aplicar essa fonte em nosso aplicativo. Abra o arquivo css de pontos de índice. Aqui no topo, definimos nossa fonte. Então, basta escrever na fase da fonte e selecionar essa sugestão automática. Agora, aqui temos duas propriedades. A primeira é a família de fontes, e aqui passamos o nome da fonte, que queremos usar. Então, podemos escrever aqui uma fonte importada ou qualquer coisa. Para simplificar, acabo de escrever Montserrat. Na URL, temos que passar o caminho do nosso arquivo de fonte. Então, em códigos duplos, escrevemos uma barra de ponto final, temos ativos Nisso, temos fontes, e aqui temos nossa fonte. Agora, em nosso corpo, adicionamos a família de fontes ao Monseret Sanserif. Lembre-se, seja qual for o nome que passarmos nessa família de fontes, o mesmo nome que temos que passar aqui. Caso contrário, não funcionará. Salve os genes e dê uma olhada. Veja, temos a resposta na fonte. Então é assim que adicionamos fontes off-line em nosso aplicativo. Mas, na minha humilde opinião, se possível, tente usar o link CDN para adicionar fontes Eu só mostro isso porque alguns clientes querem adicionar sua própria fonte para o projeto. E é assim que você pode adicionar essas fontes. 57. Construindo o componente Navbar: Então, vamos criar nossa seção Navbar. Agora, esse tipo de barra N é muito comum em muitos aplicativos, e também não queremos complicar nosso componente de aplicativo. Assim, podemos definir nosso Nabar no componente separado. Então, em nossa pasta de origem, criamos uma nova pasta chamada components e, dentro delas, criamos mais uma pasta chamada Nabar Dentro dessa pasta NaBR, criamos o arquivo JSX navbar Também criamos o arquivo css de pontos Navbar. Agora vamos criar um clichê em nosso componente Nabar e, na parte superior, importamos o arquivo css de pontos Navbar do período e salvamos esse arquivo Agora, voltando ao componente F, obtivemos essa tag Nab e, no lugar dela, adicionamos nosso componente NaBr e vemos como importar trabalhos Salve este arquivo agora de volta nosso componente no local deste DU, colamos nossa tag NAO Agora, vamos adicionar todos os elementos do nosso Navar. Então, primeiro, adicionamos uma tag H one e escrevemos aqui o nome do nosso aplicativo, que é movie Maniac Agora, para adicionar três links, criamos um Du e atribuímos a ele um nome de classe, NaBr, links de sublinhado Deixe-me mostrar um atalho para criar isso. Escreva ponto e aqui adicionamos nosso nome de classe NaBr, sublinhado, tintas e Veja, obtemos DV com esse nome de classe. Isso é chamado de T, o que nos ajuda a escrever o código primeiro. Agora, dentro desses links do Nebar, criamos uma tag âncora e escrevemos algo popular Agora, depois disso, queremos adicionar Imoge para isso. Então, em nossa pasta de recursos, que você baixou anteriormente. E nisso, temos projeto a pasta e, dentro dela, temos a pasta Assets. Agora arraste todas essas imagens para nossa pasta de ativos. Bom. Agora, em nosso componente Number na parte superior, importamos fogo, a partir daqui vamos dois conjuntos de pastas e disparamos pontos png. Agora vamos importar mais duas imagens para os links mais votados e os próximos. Duplique esse link mais duas vezes e, primeiro, alteramos esse fogo para estrela e a imagem para estrela brilhante, ponto PNG, por último, importamos festa da fase da festa, ponto Agora, para adicionar essas imagens, adicionamos a tag de imagem e passamos aqui, fire, e em Alt fire Imoge e também o nome da classe para NabarUnderscore Agora vamos duplicar essa tag âncora mais duas vezes e alteramos o nome do link para melhor avaliado e a imagem para estrela e lt para estrela. Imoge último link para os próximos e a imagem para festa e lt para imagem da fase da festa Salve as alterações e chegaremos aqui ao erro. Podemos ver que é um caminho que não está disponível. Então, aqui em nossa fase de despedida, temos que corrigir a ortografia Salve as alterações e veja, obtemos nossos elementos. Agora, vamos adicionar estilos para eles. Então, primeiro, separamos esse nome de aplicativo e esses links. Então, no arquivo css navbar dot, escrevemos Navbar e , entre colchetes, adicionamos dois adicionamos Coloque os itens no centro, justifique o conteúdo no espaço entre preenchimento de zero na parte superior inferior e 30 pixels na esquerda e direita E de baixo para um pixel, sólido tem E seis, E seis, E seis. Salve isso e veja se eles estão separados. Agora, depois desse NaBr, tivemos o colchete angular Nab, H um, e nos colchetes, um tamanho de até 30 pixels e a cor Agora, depois disso, adicionamos estilos para nossas tags nga. Portanto, pontue os links NaBr, sublinhe , o ângulo, o alvo V, A e, dentro dos colchetes, exiba as bandeiras, alinhe os itens ao centro, o tamanho da fonte em 20 pixels, a espessura da fonte em 500, a cor em branco, a decoração do texto em nenhuma preenchimento em zero e 15 Diga isso, Nice. Isso parece bom. Agora, vamos tornar essa Imoge pequena. Então, adicionamos aqui o ponto NabarUnderscore, Imo g e, entre colchetes Coli, adicionamos largura a 25 pixels, altura a 25 pixels e margem esquerda Salve as alterações e dê uma olhada. Parece bom, mas não temos nossos links em fila. Então, vamos inspecionar isso e ver aqui que esquecemos de adicionar sinalizadores de exibição para os links de Nevar devido. Em nosso arquivo CSS, aqui adicionamos links de sublinhado NBR de pontos e, entre colchetes Guli, escrevemos display nas bandeiras e alinhamos os Salve as alterações e dê uma olhada. Veja agora nosso Nabar está perfeito. Eu sei que estou indo um pouco mais rápido para parte de SDML e CSS porque você já sabe disso 58. Construindo o componente MovieList: Agora, vamos criar nosso componente de lista de filmes. Então, criamos uma nova pasta na pasta de componentes chamada Lista de filmes. E dentro dessa pasta, criamos um novo arquivo chamado movilest dot CSS e também movilest dot e também movilest Agora vamos adicionar nosso código padronizado pelo RAFC e, na parte superior, importamos o arquivo css Movist dot com barra de ponto Então, não nos preocupamos com isso. Agora, no local deste DU, seção e adicionamos nome da classe, a lista de sublinhados do filme Agora, nesta seção, temos duas partes. Uma é para nossa linha de cabeçalho, que contém o título do último filtro e classificação, e a segunda parte é a lista de carros do filme Adicionamos uma tag de cabeçalho e atribuímos a ela um nome de classe, cabeçalho da lista de filmes. Agora, dentro disso, primeiro adicionamos a tag e adicionamos o nome da classe, o título da lista de filmes. Agora, dentro disso, adicionamos nosso título, que é popular. E depois disso, queremos adicionar Imoge. Então, adicionamos a tag de imagem e, no código-fonte, passamos fire Alt para disparar Imoge e passamos nome da classe para Navar underscore Imog que adicionamos em Agora temos que importar esse fogo Imoge no topo. Importe o fire a partir daqui, colocamos duas pastas nos ativos e aqui obtemos o fire dot png. Vamos adicionar D ao nosso filtro e encurtamento e dar a ele um nome de classe MovistFSFS para filtro e curto-circuito. Agora, primeiro, quero adicionar um item não ordenado e, dentro dele, adicionaremos um item de filtragem Então, escrevemos o filtro de sublinhado MV de todos os pontos, colchete angular, ponto, filtro de sublinhado do filme, item de sublinhado, multiplicamos por Veja, aqui temos esse código. Esse é o poder do Emet. Agora passamos aqui oito mais estrelas, sete mais estrelas e seis mais estrelas. Agora, depois dessa lista, temos que adicionar duas caixas suspensas. Então, adicionamos o encurtamento de sublinhado MV de ponto selecionado. E dentro disso, queremos três opções. Agora, para a primeira opção, passamos ordenar por, que é padrão, datação e classificação. Agora podemos simplesmente duplicar essa tag de seleção e aqui queremos apenas duas opções Então, podemos remover essa única opção, e aqui escrevemos ascendente e, finalmente, temos descendente Salve as alterações e não obteremos nada porque esquecemos de adicionar o lista de filmes em nosso componente de aplicativo Portanto, no componente do aplicativo no local desse conteúdo principal, adicionamos o componente da lista de filmes. Salve as alterações e dê uma olhada. Veja, aqui temos nossos elementos. Agora, vamos adicionar estilos para eles. Então, no arquivo CSS de pontos da lista de movimentos, adicionamos a lista de sublinhados do filme de pontos E nos colchetes, adicionamos preenchimento de dez pixels para a parte superior inferior e 30 pixels para parte superior inferior e 30 pixels para Depois disso, configuramos a exibição como sinalizadores, os itens Alan como centralizados, justificamos o conteúdo como espaço entre eles porque queremos separar o cabeçalho com o filtro e a cabeçalho com o filtro e Depois disso, adicionamos a margem inferior a cinco pixels. Agora, adicionamos estilos ao nosso título, então pontilhe o título Movist E nos clipackets, adicionamos dois sinalizadores de exibição, itens de linha ao centro e tamanho da fonte A cor dois tem frases FFE 400 e não entendemos nossos estilos Então, vamos verificar isso. Em nosso componente de lista de filmes, aqui podemos ver que precisamos adicionar estilo ao cabeçalho da lista de filmes. Em nosso arquivo CSS, alteramos essa classe da lista de filmes para a classe de cabeçalho da lista de filmes. Diga as mudanças e veja, separamos essas duas partes. Agora, aqui eu sei que o tamanho da fonte é um pouco pequeno. Você pode aumentá-los de acordo com suas necessidades. Agora, vamos definir estilos para esse filtro e o menu suspenso. Então, voltando ao código VS, e adicionamos aqui que o filme é FS. E nos colchetes de Cali, adicionamos display para sinalizar os itens da linha no centro. Agora, aqui está uma coisa. Estamos repetindo essas duas linhas várias vezes em nosso aplicativo Veja aqui, aqui, e também usamos no arquivo CSS Nabar. Então, vamos criar uma classe separada para essas duas linhas. Então corte essas duas linhas e abra o arquivo CSS de pontos de índice. No final, adicionamos uma nova classe, Align underscore center e, dentro dela, colaremos nossos estilos Agora, sempre que quisermos adicionar esses dois estilos, podemos simplesmente adicionar essa classe Align Center a esse elemento, e é assim que o Telvin CS é feito Salve este arquivo e, no arquivo CSS de pontos da lista de filmes, temos que adicionar a classe Align Center para esses dois elementos Então, removemos essas duas linhas daqui. E também remova esse estilo de classe. Guarde isso. E no componente da lista de filmes, primeiro, adicionamos o Align Center antes do cabeçalho e também adicionamos o Align Center antes desse Além disso, para este dia e também antes deste filtro de sublinhado do filme Salve as alterações e isso está funcionando bem. Agora, de volta ao arquivo CSS de pontos da lista de filmes, adicionamos filme de pontos, filtro e estilo de lista a nan, um tamanho de 16 pixels. Agora vamos adicionar filme de pontos, item de filtro. E nos calibracedes, adicionamos preenchimento a cinco pixels e dez pixels e o cursor ao dez pixels e Agora, depois disso, adicionamos estilo ao nosso menu suspenso. Então, pontue o curta-metragem do filme e, dentro desses colchetes, adicionamos borda a nun, contorno ao raio da borda de Alsan cinco pixels, tamanho da fonte de 16 pixels, peso da fonte a ser herdada, para que ele possa usar MonsetFont em nossa lista suspensa possa Depois disso, altura para 30 pixels, adicionando zero e cinco pixels e margem para zero e dez pixels. Salve as alterações e dê uma olhada. Veja, nós entendemos nossos estilos. Agora, finalmente, eu só quero exibir esse filtro selecionado para que o usuário possa ver qual filtro ele selecionou. Então, no componente mobilizado, neste item da lista, adicionamos mais uma classe chamada ativa Trocaremos essa classe ativa por filtro ativo. Salve esse arquivo e, no arquivo CSS, após esse filtro de filme IAM, adicionamos colchetes curvos ativos do filtro de movimento m dot e, dentro dessa parte inferior de Boer, um sólido de um pixel tem E seis, E seis, E seis e a espessura da fonte Salve as alterações e dê uma olhada. Veja, isso está lindo. Agora, após essa tag de cabeçalho, criamos mais um du com nome da classe, cartões de sublinhado do filme Nesta dupla, adicionaremos todos os nossos cartões de filmes. Então, na próxima lição, criaremos esse componente de cartão de filme. 59. Construindo o componente MovieCard: Agora, vamos construir nosso último componente, que é o componente da placa de filme. Então, na pasta da lista de filmes, criamos um novo arquivo chamado movecard dot CSS e criamos outro arquivo chamado movicardt A razão pela qual criamos esse componente no MovilistFolder é porque a placa de filme faz parte do Você também pode criar uma pasta separada para isso. Depende totalmente de você. Agora vamos adicionar um código padronizado e, na parte superior, simplesmente importamos o arquivo CSS de ponto movecard, barra e ponto Agradável. Agora, neste componente, retornamos a tag âncora porque quando alguém clica na placa de filme , abriremos esse link e atribuiremos o nome da classe ao cartão de sublinhado do filme Agora, nesta tag âncora, queremos adicionar nosso pôster do filme Então, adicione a tag Image e adicione o nome da classe ao pôster de sublinhado do filme Agora vamos encontrar um pôster fictício temporário. Então, em nosso navegador, abra uma nova guia e pesquise a imagem do pôster do filme, selecione qualquer uma das imagens e link direito na imagem e copie o endereço da imagem Agora, volte ao código VS e cole este link na fonte e, em Alt, adicionamos o pôster do filme Salve as alterações e, novamente, não obteremos nada porque esquecemos de adicionar esse componente de cartão de filme em nosso componente de lista de filmes Então, no componente Move List, adicionamos aqui o componente da placa de filme. Salve as alterações e C, recebemos nossa postagem. Agora, em nosso aplicativo, quando passamos o mouse sobre a placa de filme, queremos exibir alguns detalhes sobre o filme, como nome, data de lançamento, classificação e uma pequena descrição Então, após este pôster, adicionaremos um DU com nome da classe e detalhes do sublinhado do filme Depois disso, adicionamos a tag S three por nome do filme e adicionamos o nome da classe para mover os detalhes do sublinhado e o título do sublinhado E dentro deles, escrevemos o nome do filme. Agora, depois disso, adicionamos um dia com nome da turma, data de sublinhado do filme, taxa de sublinhado E dentro disso, primeiro adicionamos um parágrafo no qual mostramos a data de lançamento do filme e, depois disso, outro parágrafo para exibir a classificação. Agora, no lado direito dessa classificação, queremos exibir o ícone de estrela. Então, adicionamos a tag de imagem, fonte à estrela, Alt ao ícone de classificação e atribuímos um nome de classe ao sublinhado do cartão Imoge Agora temos que importar esse ícone de estrela. No topo, importamos estrelas de. Aqui vamos para folders up assets slash star dot png. Bom. Agora, no final, queremos mostrar uma pequena descrição. Depois disso, adicionamos outra tag de parágrafo e atribuímos a ela um nome de classe ao filme sob a descrição escocesa. Dentro disso, adicionamos texto Dummi, BLR 15 e pressionamos Então vá e dê uma olhada. Veja, nós temos nossos elementos feios. Então, na próxima lição, nós os tornaremos lindos. 60. Estilizando o componente MovieCard: Então, vamos adicionar rapidamente estilos para o componente da placa de filme. Primeiro de tudo, eu fecho todos os outros arquivos. Agora, no arquivo CSS de pontos do cartão de filme, cartão de filme de pontos. E entre colchetes, adicionamos largura a 200 pixels, altura a 300 pixels, margem a 15 pixels, transbordamento para o raio de água oculto a dez pixels e cor a E sombra da caixa em zero pixel, três pixels, oito pixels para desfoque, RGBA, zero, zero, zero, 0,25 Agora, depois disso, adicionamos um pôster de filme com pontos e, dentro dele, 200% e altura 200% Diga as mudanças e veja, não entendemos nossos estilos. Vamos descobrir o problema. Então, clique com o botão direito do mouse em nosso cartão e vá inspecionar. Selecione esta etiqueta de ancoragem e veja aqui que nossa largura e altura não são aplicadas E está sugerindo que tentemos definir a exibição para algo diferente de em linha porque se nosso elemento estiver definido como em linha, isso evitará a propriedade de largura. Mas há outra maneira de resolver isso. Podemos fazer nossos cartões de cinema devido às bandeiras. Então, no arquivo CSS de pontos da lista de movimentos, adicionamos cartões de filme de pontos. E dentro disso, escrevemos display em bandeiras. Flexione o envoltório para embrulhar e justificar o conteúdo para espaçar uniformemente. Defina as alterações e veja, recebemos nosso cartão aqui. Agora temos que mostrar nossa seção de detalhes do filme. Então, aqui precisamos usar a posição absoluta. Então, primeiro de tudo, no arquivo CSS do cartão de filme, criamos nosso elemento do cartão de filme, que é nosso elemento pai desses detalhes do filme, e definimos sua posição como relativa. E depois disso, na parte inferior, adicionamos detalhes do filme com pontos e, dentro deles, adicionamos a posição ao topo absoluto até zero. Largura 100%, altura até 100% e preenchimento de dez pixels. Diga isso, e aqui temos os detalhes desse filme. Agora, vamos dividir esse texto. Então, de volta ao nosso arquivo CSS e adicionamos aqui os detalhes do filme de pontos, adicionando e dentro desse tamanho único de 16 pixels e a cor dois tem FFE 400 Depois disso, adicionamos filme com pontos, data, taxa e, dentro dos colchetes, exibimos para sinalizar e alinhamos os itens ao Oh, desculpe, nós já criamos uma classe para isso. Então, removemos esses dois estilos e adicionamos conteúdo justificado ao espaço entre o tamanho da fonte até 12 pixels, a espessura da fonte até 500, a margem de cinco pixels para a parte superior inferior e zero para a esquerda e a direita, e a cor tem FF E 400 Agora, vamos primeiro adicionar a classe Align Center no componente da placa de filme antes dessa classe, caso contrário, vamos esquecê-la Salve esse arquivo e volte para o nosso arquivo CSS. Agora, depois disso, tínhamos o cartão de pontos Imog e, dentro dele, definimos a largura em 20 pixels, a altura em 20 pixels e a margem esquerda em cinco pixels E, finalmente, nós da ME Underscore descrevemos, e nela o tamanho da fonte é 12 Excel e o estilo da fonte para a Itália Diga as mudanças e dê uma olhada. Veja, aqui temos nossos estilos, mas precisamos fazer algumas mudanças. Primeiro, queremos adicionar um pouco de fundo para esse conjunto de detalhes para texto pareça claro e também queremos colocá-lo na parte inferior. Então, de volta ao Vacde e aqui na aula de detalhes do filme, adicione a imagem de fundo ao gradiente linear e, dentro dela, passamos duas cores para Então RGBA, 00, zero, zero, RGBA, 00, zero, Ambos são de cor preta, mas o primeiro com zero opacidade e o segundo com uma Depois disso, exibimos duas bandeiras, sinalizamos a direção da coluna e justificamos o conteúdo para terminar Schans e pegue um al. Veja agora, nossos detalhes parecem muito claros, e esse é o poder do gradiente. Agora, aqui, eu não obtenho nenhum efeito para esta linha de data e taxa. Então, vamos ver o que fizemos de errado. De volta ao nosso componente de placa de filme. Aqui podemos ver que temos nome da turma, sublinhado do filme, data e taxa de sublinhado Provavelmente eu cometo um erro nessa ortografia. Vamos inspecionar nosso cartão , ver o DU e ver. Aqui não estamos comprando estilos para isso. Então, de volta ao nosso arquivo CSS, corrijo o nome da nossa classe, vejo as alterações e dou uma olhada. Veja, nós obtemos nossos detalhes corretamente. Agora, queremos mostrar esses detalhes somente quando passamos o mouse sobre essa carta e também queremos torná-la grande quando passamos o mouse Então, na parte superior, adicionamos aquela placa de filme chamada Hover Effect e, dentro dela, simplesmente adicionamos transform à escala 1,08 Agora, nos estilos de detalhes do filme, adicione mais uma propriedade, opacidade a zero por padrão E quando conectarmos nossa placa de filme , definiremos sua opacidade Então ponha o cartão de filme, ligue e aspire os detalhes do MVE. E dentro dessa opacidade para um. Simples assim. Diga gangues e dê uma olhada. Veja, aqui temos o que queremos. Agora, esse efeito é muito repentino. Queremos que isso seja suave. Então, em nossos estilos de cartão de filme, fizemos a transição para que todos os 0,2 segundos entrassem e saíssem. E também, o mesmo que aplicamos aos detalhes do filme. Diga as mudanças e dê uma olhada. Veja, aqui temos um efeito suave. Então, aqui temos todos os componentes prontos com estilos. Agora só precisamos adicionar funcionalidade ao nosso projeto. Se você estiver assistindo continuamente a este curso, faça uma pausa de dez a 15 minutos e respire um pouco de ar fresco. Cuide dos seus olhos e nos vemos na próxima lição. 61. O que é uma API: Antes de começarmos a chamar uma API, vamos entender o que é EPI API significa interface de programação de aplicativos e é uma forma de dois programas se comunicarem entre si. Vamos entender isso com o exemplo. Aqui está um restaurante. Estamos sentados na primeira mesa e queremos pedir comida. Nesse caso, o que faremos? Não vamos diretamente à cozinha e pedimos nossa comida ao chef. Em vez disso, chamaremos um garçom. O garçom pegará nosso pedido e o entregará na cozinha Depois disso, a cozinha começa a fazer nosso pedido e dá comida ao garçom E então o garçom entregará a comida na nossa mesa. Então, aqui, o garçom é como um mensageiro que pega nosso pedido e passa o pedido para o nosso destino E então ele receberá uma mensagem de resposta do destino e a trará de volta para nós. Então imagine que essa mesa em que estamos sentados é o front-end do nosso aplicativo. Queremos obter alguns dados sobre roupas, então chamaremos a API, que é nosso garçom e enviaremos solicitações para comer Agora, a API transferirá essa solicitação para o servidor ou banco de dados, que é nossa cozinha, e esse servidor ou banco de dados compartilhará a resposta, que são os dados que queremos, e a API entregará os dados da resposta ao nosso front-end. Agora que você entende o que é API, EPI é uma forma de dois programas se comunicarem entre si Deixe-me explicar com outro exemplo do mundo real. Então você provavelmente visita o site que reserva as passagens aéreas, certo. Então, nesse aplicativo, digamos que, na Emirates, escrevemos nossa cidade de partida. Digamos que Londres e um lugar para chegar, digamos que Mumbai. E inserimos nossas datas, tipo de assento, pesquisamos os voos e ele exibirá detalhes dos voos. Isso é possível por causa da API. Chamamos uma API, e essa API obterá esses dados do servidor e nos fornecerá esses dados. Simples assim. Aqui está uma coisa. Como estamos usando este site da Emirate, estamos recebendo apenas os detalhes dos voos da Emirate. Mas existem alguns sites nos quais você pesquisa detalhes do voo e eles retornam vários voos com várias companhias aéreas. Como isso é possível? Muitas empresas lançam sua API para uso público, e chamamos essa API de API pública. Ao usar essa API pública, podemos acessar seus dados. Agora, como os dados estão abertos publicamente, a empresa precisa usar alguma proteção. E para proteção, muitas APIs públicas têm sua chave de API. Então, quando nosso front-end envia solicitações para a API, front-end precisa enviar apiKey com essa Depois disso, a API passará essa solicitação para o servidor e, antes de receber a solicitação, o servidor solicitará que o APike acesse os dados Portanto, nossa API passa nossa APIKey para o servidor, o servidor verifica se a chave é autêntica, somente então o servidor retornará Caso contrário, o servidor retornará um erro, o acesso será negado. Simples assim. Agora você pode perguntar: como podemos obter APIKey se quisermos acessar a API pública Para obter a chave da API, precisamos registrar em seu site quais empresas fornecem a API, e elas nos enviarão a ApiKey Na próxima lição, obteremos nossa APIKey para dados de filmes 62. Gerando a chave da API: Então, em nosso projeto movie maniac, vamos usar a API pública do TMDB para obter os dados dos Não estamos criando a API aqui. Estamos apenas usando a API pública. A razão pela qual eu quero ensinar a você a API pública é que hoje em dia ela é um recurso muito comum do aplicativo. Por exemplo, algum aplicativo, então as informações meteorológicas e o que eles estão usando são apenas APIs públicas de outra empresa. Ao usar a API pública, você pode tornar seu aplicativo mais útil. Além disso, se você está se candidatando a um emprego de desenvolvedor do React , ao analisar seu projeto, entrevistador também sabe que você também pode usar APIs públicas Então, vamos ver como podemos obter a chave da API TMDB. Então, acesse o site do TMDB e vá para mais opções e opções de API aberta Aqui podemos ver essa opção de link de API para se registrar no ApiKey Abra isso e aqui você pode ver é necessária uma conta de usuário do TMW para solicitar uma Então, vamos pegar nossa APIKey. Então clique em entrar no TMW Link e preencha este formulário com seus dados Nome de usuário Cb 24, Digite sua senha. Novamente, escreva e confirme a senha entre na sua conta de e-mail real e clique em inscrever-se. Agora temos que verificar nossa conta de e-mail. Então abra seu e-mail e abra o e-mail TMW e clique em Ativar minha conta Agora podemos fechar isso. Agora podemos entrar em nossa conta. Então, escreva sua senha aqui e clique em Login. Veja, nós redirecionamos para o nosso painel. Agora, aqui podemos ver que precisamos solicitar a chave da API. Então clique aqui e selecione desenvolvedor. E aceite esse acordo. Você pode ler isso se quiser. Agora temos que preencher este último formulário para o APike. Eu sei que esse é um processo pouco longo, mas eles estão nos fornecendo dados úteis, e esse processo é muito comum para obter APike de qualquer empresa como Google ou Facebook Em primeiro lugar, selecione o tipo de uso, nome pessoal do aplicativo para o filme Maniac, URL do aplicativo para o host local. Coluna 5173 resumo do aplicativo para o filme Miniac, é um aplicativo que contém detalhes de filmes tão populares, mais bem avaliados e futuros Agora, depois disso, escreva seu nome, sobrenome, número de telefone, endereço um, endereço dois, cidade, estado, código postal e, no final, clique em enviar e teremos que escrever o endereço errado. Agora, clique em enviar e veja aqui que obtivemos nossa chave de API com sucesso. Agora vamos ver como podemos obter a API. Então, abra este link de documentação e aqui temos que ir para a seção de referência da API. E nesta documentação, eles explicam todos os endpoints de sua API Mas só queremos obter a API de filmes. Então, role para baixo nesta seção e vá para a seção detalhada do filme. Agora, aqui temos essa API popular, mais bem avaliada e futura. Então, vamos abrir o popular agora no lado direito, podemos ver os detalhes sobre essa API. Observe que aqui nosso método SDTP é GT. Discutiremos esses métodos SDTP nas próximas seções , nas quais veremos como podemos chamar nossa API privada Por enquanto, lembre-se método GET é usado para obter os dados da API, simples assim. Agora não se preocupe, basta copiar essa API daqui e, em nossa nova guia, abriremos essa API. Veja aqui que ele retorna um erro chamado chave de API inválida, e você deve receber uma chave válida Basicamente, ele está solicitando uma chave de API. De volta à nossa guia de configurações da API M, aqui podemos ver que temos esse exemplo de API, então basta copiar esse ponto de interrogação e a variável chave da API. Agora, em nosso TRL, passamos essa apiKey como E veja aqui que estamos obtendo os dados de filmes populares. Se você quer saber como pode ver seus dados nesse belo formato, precisará instalar uma extensão do Chrome chamada JSON Viewer Pro Então, parabéns. Você cria sua primeira chave de API. 63. Chamando a API usando o método Fetch: Agora, vamos ver como podemos chamar essa API em nosso aplicativo usando o método Fetch Confie em mim, é muito simples e fácil. Agora, antes de chamarmos a API, precisamos decidir em qual componente precisamos chamar a API. Portanto, precisamos de dados de filmes em nosso componente de lista de filmes e, usando esses dados, os exibiremos em cartões de filmes. Agora, aqui queremos chamar a API quando esse componente for renderizado Você se lembra de qual gancho usaremos para executar a lógica na renderização de componentes? Certo, usaremos o gancho de efeito de uso. Agora, como eu disse, o efeito de uso é usado para três variações diferentes. Aqui, precisamos de uma segunda variedade, que é passar uma matriz vazia na matriz de dependências porque queremos chamar a API apenas uma vez quando esse componente da lista de filmes for renderizado Então, vamos escrever aqui use o efeito e pressione tab. C, ele é importado automaticamente na parte superior. Agora, na verdade, sabemos que temos que passar dois argumentos. primeira é para a função de retorno de chamada, que é a função que queremos executar, e a segunda é a matriz de dependências Aqui passamos uma matriz vazia. Simples. Agora, nesta função de retorno de chamada, escreveremos nossa lógica para chamar a API Então, para chamar a API, estamos usando o método fetch Se você já trabalhou em JavaScript, então você já conhece esse conceito. E se você não conhece o método de busca, não se preocupe, veja isso e você entenderá Então, aqui nós adicionamos o método fetch. Agora, nesta função na primeira posição, temos que escrever nossa URL de API. De volta ao navegador, e aqui copiamos o URL da nossa API. E em nosso método de patch, em códigos duplos, vamos colá-lo. Agora, essa expressão retorna uma promessa. Basicamente, prometer significa que obteremos o resultado no futuro, não imediatamente. O resultado pode ser nossos dados ou, se algo der errado, obteremos um erro, mas definitivamente obteremos alguma coisa. Deixe-me mostrar o que quero dizer. Então, vamos armazenar isso em uma variável chamada resposta. E depois disso, basta que o console registre essa resposta. Salve os genes e dê uma olhada. Abra o Console e veja aqui que recebemos promessas. Se expandirmos essa promessa, aqui teremos o estado da promessa cumprido porque essa API está funcionando. E nesse resultado da promessa, recebemos uma resposta da API. E nesse corpo de resposta, obteremos nossos dados e outros detalhes sobre a chamada de API. Para lidar com as promessas do JavaScript, temos dois métodos method e acing await Não se preocupe. Veremos os dois um por um. Então, primeiro de tudo, vamos remover essa variável de resposta e também o log de pontos do console. E depois desse método de busca, adicionamos pontos DN Agora, neste método de dez, temos que passar a função de retorno E aqui obtemos nossa resposta como função de seta de parâmetro. E agora vamos simplesmente registrar essa resposta por pontos no console. Salve isso e dê uma olhada. Veja, aqui temos várias propriedades relacionadas à nossa chamada de API, como status, URL, corpo. Esse corpo tem todos os nossos dados. Agora você pode pensar: por que não podemos ver isso? É porque precisamos converter esses dados para o formato JSN Então, no lugar dessa resposta, escrevemos o ponto de resposta JSON Guarde isso e veja se novamente recebemos a promessa aqui. E nesse resultado promissor, obtemos os dados de nossos filmes. Para acessar esses dados, precisamos retornar o ponto de resposta json dessa função E por causa disso, recebemos outra promessa. Agora, usamos novamente o método then para lidar com essa promessa. E dentro disso, escrevemos função de retorno de chamada e obtemos aqui os dados como parâmetro, e simplesmente consultamos o log de pontos desses dados Salve isso e dê uma olhada. Veja, obtemos dados de filmes nesses resultados, então está funcionando. Agora, esse método de patch com dois métodos parece um pouco feio Vamos ver o segundo método de lidar com promessas. Vamos remover esses dois métodos. Nós não precisamos deles. Agora, antes desse método de patch, adicionamos uma espera, o que significa que nosso código aguardará a conclusão da execução dessa promessa. Você não conhece esses conceitos, então eu recomendo assistir aos Fetch Method e Async Rona Esses são conceitos realmente muito importantes. Agora, para usar await, precisamos tornar nossa função assíncrona Então, aqui, após nosso efeito de uso, criaremos uma nova função chamada Fetch movies Agora, para tornar essa função assíncrona, precisamos passar uma palavra-chave antes Agora vamos mover nosso método fetch para essa função. Bom. Agora sabemos que essa expressão retorna a resposta. Então, vamos armazenar isso em uma variável chamada resposta. E depois disso, simplesmente consultamos ou registramos essa resposta. Agora, não se esqueça de chamar nossa função de patch movies em nosso efeito de uso. Salve os genes e dê uma olhada. Atualize a página e veja se obtemos a mesma resposta que recebemos em nosso primeiro método then Portanto, temos que converter essa resposta para o formato JSON. Então, escrevemos aqui o ponto de resposta JSON. E isso vai voltar novamente, prometo. Então, escreveremos novamente aqui await e vamos armazenar esses dados JSN em uma variável chamada E, no final, vamos registrar esses dados com pontos no console. Salve os genes e dê uma olhada. Veja aqui que obtemos nossos dados. E ao usar acing await, nosso código parece limpo Portanto, sempre que quisermos exibir dados da chamada da API, seguiremos esse método. Se você tiver pouca confusão , não se preocupe com a prática, sua confusão desaparecerá. E eu adicionei uma seção inteira, especialmente para chamar a API. Então não se preocupe com isso. 64. Exercício para MovieCard: Agora é hora de fazer um pouco de exercício. Então, na lição anterior, obtemos nossos dados de filmes. Agora, você precisa exibir os dados em vários cartões. Aqui estão algumas propriedades que você precisa usar. A dica é que você precisa usar o UTT Hook por algum motivo. Então, dedique algum tempo e tente resolver esse exercício. E depois disso, venha e veja a solução. 65. Solução para este exercício: Então, vamos ver a solução desse exercício. Espero que você tente resolver isso. Então, primeiro de tudo, na parte superior, criaremos uma variável de estado para armazenar esses dados do filme. Então escreva o estado de uso e pressione tab, vou importar o uso na parte superior. E agora escreva, use trechos de estado, filmes e filmes ambientados E como valor padrão, passamos uma matriz vazia. Agora, no lugar desse registro de pontos do console, simplesmente usamos filmes definidos e armazenamos aqui os resultados de pontos de dados porque estamos obtendo a matriz de filmes no resultado de pontos de dados. Agora, vamos exibir esses filmes em nosso componente de cartão de filme. Então aqui estamos em culibackets, movies dot MAP. E dentro disso, obtemos um único item de filme, função de seta e retornamos o componente da placa de filme. Agora você se lembra que sempre que usamos o método map, temos que passar o valor uni como chave. Adicionamos a chave e passamos aqui o ID do ponto de movimento, que é exclusivo para cada filme. Agora, aqui temos que passar os detalhes de cada filme, que queremos exibir em nosso componente de cartão de filme. No lugar de passar cada detalhe individualmente, podemos passar o objeto inteiro em uma variável. Deixe-me mostrar o que quero dizer. Simplesmente passamos aqui, filme é igual a, e passamos aqui cada item do filme Salve esse arquivo e abra o componente da placa de filme. E aqui podemos desestruturar nossos adereços cinematográficos. Agora, primeiro de tudo, vamos exibir todo o texto. Então, no lugar do nome desse filme, escrevemos o título original do sublinhado em move dot No local desta data, a data lançamento do filme sublinha Classificação para mover a taxa de pontos, média de sublinhado. E descrição do filme para mover a visão geral dos pontos. Salve isso e veja aqui que obtemos nossos detalhes. Mas a descrição desse filme é muito longa. Então, vamos primeiro resolver isso. Se você resolver este exercício até este ponto, confie em mim, você está indo muito bem. Portanto, há muitas maneiras de fazer isso. Simplesmente adicionamos aqui o método de corte de pontos e passamos zero e 100 e depois disso, mais em códigos duplos ponto ponto ponto ponto Então, basicamente, a função de fatia exibirá apenas as primeiras cem letras e, depois disso, exibimos três pontos Salve-os e veja se obtemos essa boa descrição. Agora, vamos mudar nosso pôster. Então, vá para a guia de configuração e abra a documentação da API TMDB e aqui na seção de imagens, abrimos esta etapa básica Aqui, eles mencionam como podemos adicionar o caminho das imagens. Então, basta copiar o URL dessa imagem e, no lugar da nossa imagem codificada, adicionamos colchetes e acentos de Cully e simplesmente colamos Agora, neste URL, só precisamos alterar esse ID da imagem. Então, removemos esse ID de imagem e também removemos uma barra e simplesmente adicionamos colchetes em dólares Cali, movemos o ponto Poster O motivo pelo qual removemos essa barra é porque a barra já está disponível na variável de caminho de sublinhado do pôster Salve as alterações e dê uma olhada. Veja, aqui temos nossos pôsteres de filmes. Queremos abrir a página oficial desse filme no site da TMW ao clicar no cartão do filme Então, aqui em nossa tag âncora em HRF, adicionamos novamente colchetes, acentos cravos, e aqui passamos HTTP como Colmlaww, e aqui passamos HTTP como Colmlaww filme db.org slash movlatlar c Brackets, move Queremos abrir esse link em New Tab. Adicionamos aqui, alvo é igual a sublinhado em branco. Salve as alterações e dê uma olhada. Clique em qualquer cartão e veja se ele será aberto em uma nova guia. Perfeito. Aqui, concluímos nossa parte básica desse aplicativo. Espero que seja uma experiência divertida e de aprendizado para você. Se você tiver dúvidas, pode perguntar na seção de perguntas e respostas. Agora, na próxima seção, começaremos a implementar os recursos de filtro e encurtamento 66. Seção 07 - Recursos de filtragem, classificação e modo escuro: Bem-vindo às seções do curso Ultimate React. Nesta seção, veremos como podemos implementar a funcionalidade de filtragem, classificação e um bônus, funcionalidade de filtragem, classificação e um bônus, que fará com que nosso aplicativo se destaque da multidão, que é o recurso do modo escuro e claro Estou muito empolgado com isso e espero que você também esteja. Então, vamos começar isso. 67. Filtro vs Classificação: Antes de começarmos a implementar filtro e a funcionalidade curta, deixe-me esclarecer a diferença básica entre o filtro e os recursos curtos. Então, usamos a funcionalidade de filtro para filtrar alguns dados. Por exemplo, em nosso aplicativo, se clicarmos na classificação de oito mais estrelas , somente os registros devem ser exibidos cuja classificação seja superior a oito estrelas. Então, estamos filtrando outros dados do filme. Agora, por outro lado, o encurtamento serve para organizar dados. Por exemplo, em nosso aplicativo, se selecionarmos a gravação por data, teremos que reorganizar os dados de nossos filmes para que a funcionalidade esteja sempre organizando os dados na ordem Ele não removerá nenhum dado, e isso é o que chamamos de encurtamento. Então, em palavras simples, filtrar é manter apenas dados úteis, e encurtar é manter os dados em alguma ordem A razão pela qual eu explico isso é essa explicação o ajudará a entender e implementar claramente a lógica. 68. Implementando o recurso de filtro: Portanto, antes de começarmos a escrever a lógica para o filtro, primeiro precisamos obter o filtro selecionado atualmente. Então, após esse estado do filme, criamos mais um estado de uso e damos a ele um nome, classificação média e definimos a classificação média. E como valor padrão, passamos zero. Agora, o que queremos fazer é, ao clicar nesse item da lista , definir nossa classificação média para essa taxa. É muito simples. Deixe-me te mostrar. Então clique aqui e, se você tiver Windows, segure Alt ou, se tiver Mac, segure Option. E agora clique aqui e aqui. Ao usá-los, podemos criar vários cursores e adicionar aqui o evento de clique, seta e a função de filtro de alça. Pressione SCA para remover o cursor múltiplo e simplesmente passe aqui as classificações oito, sete e Agora vamos definir essa função. Podemos minimizar outras funções como essa. Essa técnica eu sempre uso quando escrevo mais linhas de código. Agora, após essa função, const handle filter, e aqui temos a taxa, a função de seta e, dentro desta primeira, definimos a classificação mínima para essa taxa Agora, você se lembra de qual método usaremos para filtrar dados Certo, é o método de filtro. Você já sabe disso. Agradável. Então, simplesmente escrevemos filmes com filtro de pontos. E dentro disso, obtemos cada função de erro de filme, e aqui temos que passar a condição. sublinhado do voto em movimento por ponto média do sublinhado do voto em movimento por ponto é maior ou igual à taxa. Simples assim. Agora, esse método de filtro retornará uma nova matriz. Então, armazenamos isso em uma variável chamada filtro. E agora podemos definir filmes e passar aqui o filme filtrado. Salve as alterações e dê uma olhada. Agora, antes de verificarmos nossa funcionalidade, noto nos detalhes deste filme que não recebemos classificação. Então, vamos corrigir isso. Abra o componente da placa de filme e role para baixo até os detalhes do filme. Aqui temos que mudar essa média de taxa para média de votos. Salve as alterações e veja, aqui temos nossa classificação. Agora, clique em Filtrar. Vamos dizer sete e ver se está funcionando. Agora, clique em oito e ele também está funcionando. Mas aqui está um grande bug. Novamente, clique em sete ou seis. Isso não vai funcionar. Deixe-me explicar para você o que está acontecendo aqui. Portanto, quando selecionamos a classificação sete ou mais, essa função de filtro de alça será executada. Dentro disso, nosso estado de taxa média será atualizado em sete. Depois disso, esse método de filtro filtrará os filmes e definimos esses filmes nessa função de set movie. Agora, se você clicar na classificação seis ou mais, esse método de filtro filtrará somente os dados filtrados anteriormente , todos com classificação de sete ou mais, em vez de usar nossos 20 filmes originais, e esse é o problema Vamos resolver isso. A solução é que originalmente definiremos todos os filmes nessa variável de estado do filme da API e, depois disso, não tocaremos nessa matriz. Criará mais uma variável de estado e armazenará nossos filmes nessa variável. E quando quisermos filtrar nossos dados, obteremos dados do estado original do filme e, em seguida, armazenaremos nossos dados de filtro em nossa nova variável de estado. Eu sei que isso é um pouco confuso, mas veja isso e você entenderá Então, aqui criamos mais uma variável de estado e damos ela o nome de filtrar filmes e definir filmes de filtro. E como valor padrão, passaremos uma matriz vazia. Primeiro de tudo, temos que preencher essa matriz de filmes de filtro quando chamamos nossa API. Então, duplicamos a linha de set movies e passamos aqui os filmes de set filter Então, esses filmes de filtro e filmes são iguais. Agora, na função de filtro Handel no lugar dos filmes definidos, definimos filmes de filtro Portanto, não estamos mexendo com a matriz original de filmes. Em vez disso, estamos apenas usando-o para armazenar dados originais. Agora, na parte inferior, temos que usar filmes de filtro no lugar da matriz de filmes. Diga as mudanças e dê uma olhada. Selecione sete, depois oito, depois seis e C. Agora está funcionando corretamente. Agora, se selecionarmos o filtro seis , se clicarmos novamente nesse filtro, queremos exibir todos os nossos filmes. Vamos implementar isso. Aqui na função de filtro de alça, adicione se a taxa de condição for igual à classificação média E dentro disso, primeiro definiremos a classificação média como padrão, que é zero, e depois definiremos os filmes de filtro para nossos filmes originais. E então vamos passar por essa lógica. Simples assim. Salve as alterações e dê uma olhada. Clique na classificação oito e, novamente, clique na classificação oito. Veja, nós recuperamos os dados. Então, está funcionando agora. Agora, aqui está uma última mudança. Queremos exibir o filtro selecionado atualmente. Então, voltando ao código VS, e no lugar dessa classe de string, adicionamos colchetes Ci, e aqui adicionamos a condição, quero dizer, classificação igual Se for verdade, retornaremos às aulas, item de filtro de filme e ativo, item de filtro de filme e caso contrário, retornaremos apenas o item de filtro de filme. Vamos copiar essa expressão e colá-la para esses dois filtros. E basta mudar aqui sete e seis. Diga as mudanças e dê uma olhada. Veja, aqui temos essa linha de filtro ativa. Você pode ver como é simples implementar o recurso de filtro. Agora, aqui em nosso filtro de filmes, esse é um processo repetível Assim, podemos separar nosso componente de filtro de filme e isso faremos na próxima lição. 69. Criando uma seção de filtro resusável: Então, em vez de apenas colocar esse item da lista em um componente separado, colocaremos toda essa lista desordenada no novo componente Vamos cortar isso e, em nossa pasta de lista de filmes, criamos um novo componente chamado grupo de filtros dot JSX Agora, aqui adicionamos nosso clichê e simplesmente retornamos nossa Agora, neste componente, precisamos dessas duas propriedades, escrita mínima e função de filtro de manipulação. Então, como podemos conseguir isso? Certo? Ao usar adereços, você pode ver que reagir é muito simples Salve esse arquivo e volte ao nosso componente de lista de filmes. E aqui adicionamos o componente do grupo de filtros. Agora, dentro disso, passamos a classificação masculina, igual à classificação média E para o filtro de alça, passamos adereços na classificação de clique igual ao Você pode ver aqui que estamos usando esses nomes relacionados porque essa é a melhor prática para desenvolvedores, e também podemos trabalhar melhor com outros desenvolvedores. Guarde isso. E agora, no componente do grupo de filtros, nas sondas, nós o desestruturamos e obtemos aqui a classificação média e , na classificação Agora, vamos substituir essa função de filtro de alça, pressionar Control plus D ou Command plus D para selecionar exatamente o mesmo código e basta escrever aqui na classificação e clicar. Salve as alterações e dê uma olhada. Veja se ainda está funcionando. Agora, mais uma coisa que eu quero mudar nesse componente do grupo de filtros. Então, hoje, queremos mostrar apenas três filtros. Amanhã, se decidirmos adicionar cinco mais quatro mais ou nove mais estrelas, teremos que duplicar várias vezes esse item da lista, e essa é a má prática Então, podemos usar array para isso. Então, um componente de lista de filmes e adicionamos aqui mais um adereço chamado classificação igual a entre colchetes de Cali, adicionamos matriz e, dentro deles, adicionamos oito, sete Portanto, se você quiser adicionar ou remover um valor de filtro , podemos simplesmente fazer isso usando essa matriz de classificação. Salve este arquivo e, de volta ao componente do grupo de filtros, na parte superior, obtemos as classificações. Agora, depois da nossa lista de substantivos, adicionamos Calibrackets, ratings Recebemos aqui a função de erro de taxa única e retornamos essa tag de item da lista. Agora, no lugar desse oito codificado, adicionamos a taxa aqui, também a taxa e aqui também a taxa de colchetes Ci Agora, aqui está faltando uma coisa no método de mapeamento. Você pode me dizer? Certo. É uma propriedade fundamental. Então, passamos uma chave igual à taxa O. Aqui, todas as nossas tarifas são exclusivas e é por isso que podemos passá-las como chave. Caso contrário, adicionaremos um índice. Agora, vamos remover esses dois itens da lista. Não precisamos deles, salve-os e veja como nosso código parece limpo usando esse método de matriz. 70. Lidando com a seleção de classificação: Vamos ver como lidar com a seleção de classificação. Então, primeiro de tudo, aqui temos que criar uma variável de estado para armazenar detalhes de classificação Então, indique, dê a ele um nome e defina a classificação. Agora, como valor padrão, passamos aqui o objeto. Esse objeto tem duas propriedades. primeira é comprar e nós a configuramos como padrão e fazemos o pedido como ASC, o que significa ascendente Nesta primeira compra de propriedade, podemos adicionar foto por data ou foto por classificação. E em ordem, armazenamos ascendentes e descendentes. Em nossa primeira tag de seleção, passamos o nome para comprar, primeiro valor para o padrão. Segundo valor para divulgar a data de sublinhado e terceiro valor para a média de votos Agora, na segunda tag de seleção, passamos o nome para o pedido, primeiro valor para o ASC e segundo valor para o DSC, que é Agora você pode pensar por que passamos apenas esses valores. Não se preocupe com isso. Eu vou te explicar mais tarde. Por enquanto, nos concentramos apenas em lidar com essa seleção. Você se lembra de como lidamos com várias entradas usando a mesma função Vamos aplicar esse truque aqui. Passamos aqui um evento, uma mudança é igual a lidar com abreviatura E o valor da compra de shot dot. E também para essa seleção, passamos o mesmo evento de alteração para lidar com Short. E valor em ordem curta de pontos. Agora vamos definir rapidamente essa função curta de alça. Após essa função de filtro de alça, definimos uma nova função chamada handle short igual a aqui obtemos o objeto de evento, a função de seta Nesta função, primeiro, obteremos o nome e o valor da entrada atual. Portanto, objeto C, o valor do nome é igual ao alvo E. E depois disso, chamamos set sort. Primeiro, obtemos o valor anterior, a função de seta. E aqui simplesmente retornamos o objeto. E nisso adicionamos valores anteriores usando o operador spread, e depois disso, entre colchetes, nomeamos o valor de Callan, simples assim Agora podemos até mesmo encurtar esse código. Então, da função, queremos retornar o objeto, então podemos remover esse retorno e também remover o colchete C e o colchete C nosso objeto entre parênteses porque se direcionarmos para colchetes, nosso código entenderá que colchetes ci são blocos de código Agora, vamos ver se obtemos nosso valor nessa variável curta ou não. Então, basta consultar este breve registro de pontos, salvar as alterações e dar uma olhada. Abra o console e selecione a data nesse menu suspenso e veja se a data de lançamento está definida. Depois disso, selecionamos descendente, e aqui também entendemos isso Agora, aqui está um pequeno problema. Sempre que quisermos ver o estado de qualquer um dos nossos componentes , precisamos consultar ou registrar essa variável de estado, que é um pouco chato Na próxima lição, usaremos ferramenta de depuração para 71. Depurando o aplicativo React: Portanto, para depurar o aplicativo react, usaremos a extensão de navegador mais popular chamada React Então, abra uma nova guia no seu navegador e pesquise na Chrome Web Store. Abra o primeiro link. E nessa caixa de pesquisa, escrevemos React Developer Tools. Se você estiver usando outro navegador, poderá pesquisar diretamente na extensão Google React Developer Tools para esse navegador. Você pode ver essa extensão baixada por 4 milhões de usuários, por isso é bastante popular. Agora clique em AttuCrom e dê permissão para adicionar. Bom. É adicionado. Agora feche essa guia. Nós não precisamos disso. Vamos abrir as Ferramentas do Desenvolvedor. E nesta lista, aqui você pode ver a opção chamada componentes. Abra isso. Portanto, esta é a nossa árvore de componentes do aplicativo. Você pode ver aqui que obtemos nosso componente de aplicativo, que é nosso componente raiz. Depois disso, temos Nabar e depois disso, lista de filmes, e na lista de filmes, temos grupo de filtros e vários componentes da placa de filme Agora, aqui podemos ver o estado de todos os componentes selecionando-os. Então, selecionamos o componente da lista de filmes. Aqui podemos ver a seção do gancho, e esse é o nosso estado curto. Se mudarmos nosso valor curto, veja, podemos ver aqui esse valor. E aqui também podemos ver a lista de filmes. Agora, se quisermos ver o trecho de código desse componente, clique nesse ícone de código e veja aqui o nosso código Agora, de volta aos componentes Stab. Agora, se tivermos uma estrutura t complexa , também podemos pesquisar nosso componente nessa caixa de pesquisa. Portanto, no geral, as ferramentas de desenvolvedor do React são uma ferramenta muito útil para depurar e entender Podemos ver os componentes, o estado, os adereços e muito mais E, ao usá-los, podemos facilmente identificar e corrigir problemas em nosso aplicativo. 72. Implementando o recurso de classificação: Agora, vamos implementar o recurso de classificação em nosso aplicativo. Portanto, há muitas maneiras diferentes de implementar o recurso de encurtamento Então, aqui vamos usar uma biblioteca externa chamada LDSh É uma biblioteca muito popular em JavaScript para lidar com objetos e matrizes. Então, abra o terminal e, no novo terminal, escrevemos NPM I dash Zi é a abreviação de Instalar. E se você quiser usar exatamente a mesma versão que estou usando, você pode escrever aerate 4.17 0.21 e Veja-o instalado. Vamos minimizar bem esse terminal. Agora, para usar qualquer biblioteca, precisamos importar essa biblioteca de seu pacote. Então, no topo, escrevemos o sublinhado de importação do Low dash. Aqui, você também pode escrever Low dash ou qualquer outro nome, mas esse é o nome mais comum que os desenvolvedores gostam de usar Agora você pode pensar: por que eu escrevo importações às vezes aqui e às vezes abaixo desta lista. Então, sempre que eu quero importar alguma coisa dos pacotes , eu os importo na parte superior. E se eu quiser importar qualquer coisa de componentes locais, imagens, fisicamente, o que criamos na pasta de origem, eu importo isso nesta segunda lista. Ao fazer isso, podemos ver facilmente quais pacotes estamos usando e quais componentes estamos usando. Você também pode separá-lo ou escrever todas as entradas juntas Depende totalmente de você. Mas o que quer que você faça, faça o mesmo em todos os componentes. Agora vamos nos concentrar no recurso de classificação. E uma coisa que eu quero dizer sobre o react é que o react executa a atualização de estado de forma síncrona, que significa que se mudarmos nosso estado curto nessa função , o react não atualizará esse estado imediatamente Deixe-me mostrar o que quero dizer. Então, aqui resumimos os métodos de classificação selecionados atualmente. Vamos simplesmente mover esse registro de pontos do console aqui. Diga as mudanças e dê uma olhada. Mude alguma coisa no menu suspenso e veja, aqui está nossa foto antiga. Se mudarmos novamente essa foto para taxa, C, obteremos o estado anterior. Então, está claro, o react não está atualizando o estado imediatamente. Mas por que o react funciona assim? Deixe-me explicar para você. Então, quando em react, uma função é executada, reaja primeiro, deixe a função inteira ser executada. E se houver várias atualizações de estado, ele as empilhará em uma linha e as executará uma a uma Depois de concluir a execução completa da função, porque se o react atualizar imediatamente um estado , isso trará uma nova renderização indesejada para aquele componente completo, e isso não é uma coisa boa. É por isso que o react executa comandos de mudança de estado após concluir a execução completa da função. Portanto, podemos escrever nossa lógica de classificação nessa função de classificação de manipuladores Precisamos usar algo que executado automaticamente quando nosso estado curto mudar. Você conhece algo semelhante, que já usamos? Certo? É um gancho de efeito de uso. Após esse gancho de efeito de uso, adicionamos outro gancho de efeito de uso. E, como sabemos, o primeiro argumento é nossa função de retorno de chamada e segundo argumento é a matriz de dependências, e nessa matriz, passamos nosso estado curto Agora, dentro desse retorno de chamada, adicionamos uma condição I short B não igual Não queremos abreviar nada para o estado padrão. Dentro disso, escrevemos o sublinhado, que é nossa ordem baixa de pontos em traços Esse método é usado para encurtar e alterar ordem para ascendente ou decrescente, ambos na mesma função Então, na primeira posição, temos que passar nossa matriz atual que queremos encurtar, que é filtrar filmes porque é possível filtrar filmes com apenas sete estrelas ou mais, e então queremos encurtá-los. Agora, no segundo parâmetro, temos que passar array e dentro dele, temos que passar a propriedade pela qual queremos encurtar. Então, ponto SOT B. E dentro delas, também podemos passar várias propriedades Agora, no terceiro parâmetro, temos que passar, novamente, a matriz, e dentro disso, temos que passar ASC para ascendente ou DSC para decrescente, e armazenamos esse valor em Lembre-se de que, no primeiro parâmetro, passamos nossa matriz que queremos fotografar. No segundo parâmetro, passamos uma matriz de propriedades pelas quais vamos fotografar. No nosso caso, pode ser a data de lançamento ou média de votos que estão disponíveis na matriz de filmes. E por último, no terceiro parâmetro, passamos ascendente ou descendente, simples assim Agora, essa expressão retorna uma nova matriz. Então, armazenamos isso em uma variável chamada filmes curtos. E depois disso, definimos os filmes filtrados em dois filmes classificados. Simples assim. Além disso, da nossa função, removemos esse registro de pontos do console. Nós não queremos isso. Salve as alterações e dê uma olhada. Feche nosso console e atualize a página. Defina nossa classificação como atualizada e veja se ela está mudando. Agora mude a ordem para decrescente e veja que também está funcionando Assim, você pode ver como é simples implementar a classificação usando esse pacote de cargas Se você não quiser usar essa biblioteca, você pode escrever uma lógica de encurtamento sozinho desta forma. Está totalmente bem. Mas, na minha humilde opinião, essa biblioteca cheia funciona melhor para nós Eu pessoalmente o usei em projetos de muitos clientes. 73. Adicionando interruptor para o modo de luz escura: Agora vamos ver como podemos adicionar um interruptor de modo escuro e claro em nosso projeto. Então, eu crio essa opção para o projeto do meu cliente usando seu STML e CSS Então, na pasta de recursos, abra nossa pasta Project two, e aqui temos essa pasta de componentes do modo escuro. Então, basta arrastar essa pasta para a nossa pasta de componentes. E é isso. É assim que você pode usar outros componentes do projeto em seu projeto. Esse é o poder de criar componentes separados. Agora, vamos ver o que está dentro desse componente. Então, componente do modo escuro, e aqui podemos ver que temos uma entrada com caixa de seleção de tipo, e depois disso, temos o rótulo, e nele, adicionei dois, que é o componente, sol e lua Deixe-me mostrar como isso parece. Então pressione Control plus P ou Command plus B e pesquise o componente Navar Agora, na parte superior, temos que importar o componente do modo escuro da pasta do modo escuro e adicionar esse componente do modo escuro antes de nossos links de navegação Salve as alterações e dê uma olhada. Aqui temos algum erro. Vamos abrir o Console e ver aqui obtemos esse erro. Isso ocorre porque o branco não suporta essa importação de componente de reação, usando isso, podemos importar SVG como componente Para resolver esse problema, temos que usar a biblioteca chamada White plug em SVGRnpMitPlug em SVGR e depois biblioteca chamada White plug em SVGRnpMitPlug em SVGR e depois Enter. Bom, terminal minimizador e configuração de ponto branco aberto JSNfle Agora, aqui no topo, inserimos SVGR a partir do plugin branco, ds SVGR E nessa matriz de plugins, após essa reação, chamamos essa função. Salve as alterações e dê uma olhada. Veja como esse switch está lindo. Você pode usar qualquer opção ou design para isso. Depende totalmente de você e você também pode modificar esse CSS do modo escuro. Agora, aqui na pasta do modo escuro, podemos ver que temos dois Swigs Podemos colocá-los em nossa asssFolder para que nosso projeto seja melhor organizado Selecione esses dois Swiges e mova-os para a pasta Assets E, de repente, recebemos esse erro, que diz que o SVG não foi encontrado na localização atual porque o movemos Portanto, temos que mudar nosso caminho de SVG. Então, aqui estão duas pastas, SATs e sun dot SVG O mesmo fazemos para esse caminho também. Ponto lunar SVG. Salve isso e funcionará novamente. Agora, a razão pela qual eu forneço essa opção de modo escuro pronta é porque ela é pura baseada em STML e CSS Se eu explicar cada parte de STML e CSS, muitas pessoas ficam impressionadas isso porque estamos aqui para aprender Além disso, fornecerei o link do tutorial Ts, no qual você pode ver como criar essa opção do zero. 74. Implementação do modo escuro: Antes de começarmos a implementar a funcionalidade do modo escuro, primeiro vamos entender a lógica de mudar o tema. Basicamente, estamos apenas mudando as cores do nosso site. Simples assim. Não estamos adicionando nenhum elemento nem alterando o tamanho dos elementos. Nada Estamos mudando as cores do nosso aplicativo. Portanto, a melhor solução para esse recurso é definir variáveis CSS para cada cor em nosso site para o tema escuro por padrão. E quando os usuários alteram o tema para claro, substituímos o valor de cor de todas as variáveis, simples assim, neste componente do modo escuro. Primeiro, criamos uma função chamada definir tema escuro. E nessa função, eu quero adicionar um atributo ao elemento do corpo. Portanto, documente o seletor de consulta de pontos e passe aqui o corpo. Atributo do conjunto de pontos, e aqui passamos o nome do atributo, que é a vírgula do tema de dados, e definimos como escuro Então, usando essa propriedade, obteremos o estado do nosso tema. Agora vamos duplicar essa função e alterar nome dessa função para definir tema da luz e o valor do atributo como luz Agora vamos chamar uma dessas funções aqui. Digamos que defina um tema escuro e veja se está funcionando ou não. Salve as alterações e dê uma olhada. Clique com o botão direito na página e vá para inspecionar. Na tag body, você pode ver aqui que deixamos tema de dados escuro, então está funcionando. Agora, queremos ativá-los na alteração desse togal , então escrevemos uma nova função chamada tema Tgal, e obtemos aqui objeto de evento, e obtemos aqui objeto de evento E primeiro de tudo, verificamos se a verificação ponto alvo do evento é verdadeira. Em seguida, chamamos de definir a função de tema escuro, se chamamos de função de tema de satélite. Agora, queremos passar essa função nesta entrada sobre o evento de mudança. Portanto, nossa própria mudança é igual ao tema total. Salve as alterações e dê uma olhada. Veja, quando alternarmos esse tema, ele mudará aqui. Agora, vamos mudar no CSS. Então, separe o arquivo CSS de pontos de índice. Primeiro de tudo, na parte superior, usamos a raiz da coluna. E dentro delas, declaramos todas as variáveis de cor para tema escuro do aplicativo porque queremos definir o tema escuro por padrão Então, escreva um traço duplo e escreva o nome da variável. Digamos que o corpo sublinhe o fundo e o valor dois tenha 101010 Em seguida, temos um traço duplo, a cor do sublinhado do corpo e o valor E, em seguida, um traço duplo adicionando cor e valor de sublinhado a um FFE 400 Se você estiver trabalhando em outro projeto, precisará adicionar todas as cores nessas variáveis que deseja alterar. Agora, vamos definir variáveis de cor para o tema claro. Portanto, temos que direcionar aqui os dados de que o tema é igual à luz. Você deseja iluminar o tema como padrão, então você deve adicionar cores claras ao tema nessa raiz e, nessa condição, adicionar escuro. Agora, dentro deles, definimos o traço duplo, fundo do sublinhado do corpo e o valor Certifique-se de usar o mesmo nome de variável para o tema claro, que ele substitua essas variáveis do tema escuro. Em seguida, temos a cor do sublinhado do corpo do traço duplo. Valor como preto e, por fim , sublinhado do cabeçalho em dois traços, cor, também Agora temos que substituir todas as cores em nossos arquivos CSS por essas variáveis. Então, aqui, no corpo, alteramos esse valor de cor de fundo para variável e, nesse caso, passamos o nome da variável, traço duplo, fundo sublinhado do corpo Cor para variável, traço duplo, sublinhado do corpo. Salve esse arquivo. Agora, vamos substituir as cores por variáveis em outros arquivos CSS. Então, arquivo CSS de pontos panabar. Aqui, podemos alterar a cor do título para variável, traço duplo, título e cor de sublinhado Além disso, mudamos a cor do link para variável, traço duplo, cor de sublinhado do corpo. Salve esse arquivo. E agora vamos verificar o arquivo CSS de pontos da lista de filmes. Aqui, temos que alterar a cor do título desta lista de filmes para variável, traço duplo e cor de sublinhado do título Você pode pensar por que não estamos alterando cor dessa borda, porque não queremos mudar sua cor quando mudamos o tema e isso é tudo que queremos mudar. Diga as mudanças e dê uma olhada. Veja, aqui temos um tema escuro e, se for para uma garota, temos um tema claro. Mas, por padrão, esse controle deslizante está no modo claro. No componente de modo escuro em nossa entrada de caixa de seleção, passamos mais uma propriedade chamada default check equals Salve as alterações e veja se está no modo escuro, então está funcionando. Mas essa mudança de tema é muito repentina. Vamos adicionar uma pequena transição, para que seja suave. Então, aqui no índice desse arquivo CSS, em todos os nossos estilos, adicionamos transição a todos os 0,3 segundos de entrada e saída. Salve as alterações e dê uma olhada. Veja, temos essa transição de modo. Aqui está uma coisa. Se atualizarmos esta página, ela começará, por padrão, com o tema escuro Mas queremos que nosso aplicativo se lembre de que, se você usa um tema total ou leve , na atualização, ele permanecerá com um tema claro Portanto, temos que salvar essa configuração no componente de armazenamento local, sabão e modo escuro. E nesta função de definir tema escuro, adicionamos aqui o item de conjunto de pontos de armazenamento local ao tema selecionado e o valor ao escuro. Agora copie esta linha e cole-a na função de tema do satélite e altere seu valor para luz. Agora, depois disso, criamos uma variável chamada tema selecionado e obtemos aqui nosso tema armazenado. armazenamento local não obtém o item, e passamos aqui esse nome que é o tema selecionado. Em seguida, adicionamos a condição se o tema selecionado for igual à luz, então chamamos essa função de definir tema de luz Caso contrário, por padrão, começará com o tema escuro. Então, adicionamos e simplesmente chamamos aqui a função set dark theme. Salve as alterações e dê uma olhada. Defina o tema para o modo claro e veja, agora que atualizamos a página, ainda estamos no modo claro Mas aqui, temos que corrigir esse botão total. Portanto, em nossa tag de entrada, simplesmente adicionamos o atributo padrão marcado, tema selecionado, não igual à luz. Portanto, se o tema selecionado for uma string vazia ou o modo escuro, o controle deslizante permanecerá no modo escuro Salve as alterações e veja como nosso switch Togal está funcionando bem Assim, você pode modificar esse código de acordo com suas necessidades. Mas a lógica do modo escuro permanecerá a mesma. 75. Tornando o componente MovieList reutilizável: Agora, atualmente, nosso componente de lista de filmes é estático. Queremos torná-lo reutilizável, que significa que podemos passar o nome do título, o ícone e chamaremos uma API diferente para os principais filmes relacionados e os próximos filmes Então, vamos fazer isso. Deixe-me mostrar minha trigonometria, que usei para saber quais dados queremos passar por meio dos adereços Então, no componente da lista de movimentos , em primeiro lugar, queremos alterar essa API. Então, de volta à documentação da API TMDB. Abra a API de filmes mais bem avaliados e aqui podemos ver que é a mesma URL da API que usamos para filmes populares. Só temos que substituir o popular pelo melhor sublinhado. E para os próximos filmes, temos que deixar de lado os próximos. Desestruturamos os adereços aqui e primeiro adicionamos tipos, que podem ser populares, mais votados ou futuros Alteramos os códigos duplos com marcações invertidas e, no lugar desse popular, passamos colchetes cifrados Agora, a seguir, queremos alterar esse título dinamicamente. Passamos aqui Culibackets e passamos aqui o título. Também mudamos essa Imoge, passamos aqui Imoge. E também mudamos esse t com marcas, dólar, colchetes, ícone Imoge e pronto Vamos adicionar essas propriedades em adereços. Então, título e Imoge. Então isso está muito claro. Só temos que passar essas três propriedades como adereços. Agora, na parte superior, podemos remover essa imagem inbot. Nós não queremos isso. Salve esse arquivo e volte ao nosso componente de aplicativo. Neste componente de lista de filmes, passamos aqui tipo igual ao título popular para popular e ImogetFR vamos importar esse Imoge Na parte superior, importe fogo de ativos de corte de períodos e png de pontos de disparo Vamos também importar e aderir ao Imoges. Portanto, importe estrelas do período, ativos, pontos estelares brilhantes PNG E, finalmente, parte de importação do período, separação de ativos, após PNG Deixe-me verificar a ortografia. Sim, está certo. Agora vamos adicionar aderir à lista de filmes mais bem avaliados e futuros. Portanto, duplique esse componente mais duas vezes e, por um segundo, altere o tipo para sublinhado mais votado, título para melhor avaliado e Imagem para estrela E para o terceiro tipo, para o próximo título para o próximo e Imagem para a festa. Salve as alterações e dê uma olhada. Veja, temos três seções diferentes para filmes. Agora, no topo, temos links Neva que não estão fazendo nada Então, quando clicamos no link mais votado, nossa página deve rolar até a seção com melhor classificação. E se clicarmos no próximo link, nossa página deverá rolar para a próxima seção. Implemente isso. É muito simples. Portanto, em nosso componente de lista de filmes, já digitamos adereços, para que possamos passar o tipo como o ID dessa seção da lista de filmes E esse é o poder de criar componentes reutilizáveis. Você pode ver que, em comparação com aplicativos SDML, CSS e JavaScript, podemos tornar nosso front-end rápido e muito dinâmico Salve esse arquivo e abra o componente NBR. E no primeiro link, passamos por populares. E para o segundo link, We Pass tem a melhor pontuação de sublinhado E no último link, passamos como próximos. Salve a pesquisa e os Gs e dê uma olhada. Clique no link mais votado e C nossa página role na seção mais bem avaliada. Agora, se clicarmos em nossa página futura, vá para a próxima seção. Mas isso é um pergaminho muito repentino. Vamos tornar isso mais realista. Então troque o arquivo css de pontos de índice. Aqui, adicionamos estilos para tags SDML, colchetes e comportamentos de rolagem para suavizar colchetes e comportamentos de rolagem para suavizar. E é isso. Sim, não precisamos fazer nenhuma outra coisa. Salve as asas e pegue uma. Clique no link A e veja, obtemos esse efeito de rolagem suave Além disso, nossos recursos de filtro e curto-circuito funcionam bem com componentes individuais Portanto, esse aplicativo parece muito simples, mas tem muitos recursos do mundo real que tornarão nosso aplicativo moderno e fácil de usar. Então, parabéns. Aqui, nosso projeto de filme maníaco está concluído. Você pode ver que o react é muito fácil e simples de usar. Basta dominar alguns conceitos básicos, como componentes, estado, adereços e alguns métodos de RM, e você está pronto para começar E mais uma coisa, assistir apenas ao curso não ajudará você a criar um aplicativo sozinho. Precisa programar comigo, ou você pode assistir a uma aula e depois escrever o código sozinho. Com esse método, você entenderá melhor o React e sua construção lógica também será refinada com o tempo Se você tiver alguma dúvida, pode me perguntar na seção de perguntas e respostas Adoro responder suas perguntas e nos vemos na próxima seção. 76. Seção 08 Roteamento do React: Bem-vindo à Seção oito do curso definitivo de reação. Nesta seção, aprenderemos sobre roteamento, que é o conceito muito importante de reação Se você vai trabalhar em qualquer grande projeto de reação, definitivamente precisa adicionar roteamento de reação em seu projeto Veremos várias rotas, roteamento em ritmo único, parâmetros de rota, sequência de caracteres de consulta, roteamento aninhado, navegação e Depois de concluir esta seção, você tem uma sólida compreensão de como o roteamento funciona no react Então, vamos começar esta seção. 77. Configurando o projeto: Agora, vamos configurar nosso novo projeto porque também não queremos estragar nosso projeto e também não aprendemos todos os conceitos de roteamento nesse Depois de aprender isso, também adicionaremos roteamento em nosso projeto. Então, na pasta de recursos, você obtém uma pasta chamada modelo de roteamento Abra essa pasta e abra-a no código VS. Então, anteriormente, estávamos construindo nosso projeto do zero. Agora, é assim que você pode usar outros projetos de reação e começar a trabalhar neles. Então, abrimos nosso terminal pressionando Control plus backtick ou Command plus backtick E simplesmente aqui, NPM executa o Dow e pressiona Enter E aqui recebemos essa mensagem. O branco não é reconhecido como um comando interno ou externo. Por que recebemos essa mensagem? O motivo é que não temos módulos de nós neste projeto. Agora, como podemos adicionar módulos de nós? Usando a instalação do NPM e pressione Enter. Esse comando executará todos os pacotes e bibliotecas que usamos em nosso projeto. Em outras palavras, ele instalará todas as dependências com versões disponíveis em nosso arquivo sn do pacote E é por isso que o pacote JSnfle é mais importante do que Agora podemos executar o NPM run Dov. Desculpe, eu cometi um erro de digitação aqui. Deixe-me dirigir o NPM da Dow. Abra esta URL e veja aqui que obtemos nosso aplicativo. Vamos ver o que eu adiciono neste aplicativo. Portanto, no componente do aplicativo, temos NaBR na parte superior e uma tag principal para nosso aplicativo Nesta tag principal, queremos realizar todo o roteamento. Agora vamos ver o que está dentro desse NaBr. Você pode ver que o NaBR tem apenas uma lista de pedidos com quatro itens da lista E dentro deles, temos uma etiqueta de ancoragem simples com HF e mencionamos links diferentes aqui 78. Adicionando roteamento para aplicativo React: Agora, antes de implementar o roteamento, vamos primeiro entender o que é roteamento Então, aqui temos algumas etiquetas de ancoragem. Se clicarmos em qualquer link, redirecionaremos para esse link Veja, em URL, temos um host local, ligue para 5173 slash Então, quando estamos no URL dos artigos, queremos mostrar a página do artigo, e isso chamaremos de roteamento em palavras simples Se clicarmos no link de produtos, queremos exibir a página de produtos. Esse é um recurso muito comum em qualquer site. Em nossos dois projetos, não adicionamos roteamento porque nosso aplicativo tem apenas uma página Mas se criarmos outro projeto e precisarmos adicionar outras páginas, precisaremos de roteamento. Então, como sabemos, react é uma biblioteca Ja Script e não tem nenhum recurso para implementar a funcionalidade de roteamento Para adicionar roteamento em nosso aplicativo, usaremos uma biblioteca externa chamada React Router Dom Essa é uma das bibliotecas mais populares para lidar com roteamento. Então, abra o terminal e adicione um novo terminal e escreva NPM install, roteador React Dom Se você quiser instalar a mesma versão que estou usando, adicione aqui na taxa 6.11 0.1 e pressione Enter Portanto, se no futuro o react Router Dom for atualizado de forma importante, você ainda poderá seguir este código. Agora, para adicionar roteamento em nosso aplicativo, primeiro precisamos agrupar nosso aplicativo com um componente de roteador de navegador disponível no pacote react Router Dom Então, penmin dot no arquivo JSX e, na parte superior, importamos o roteador Browser do react Router Dom Que não estou escrevendo o nome completo, estou apenas escrevendo a primeira letra dessa biblioteca, RRD, e pressionando Enter Agora, antes do nosso componente de aplicativo, tínhamos o componente roteador do navegador e movemos essa tag de fechamento após o componente do aplicativo. Esse componente do roteador do navegador é muito importante porque, sem isso, o roteamento não funcionará Além disso, esse componente mantém um registro do URL atual e da navegação do nosso histórico. Não se preocupe Veremos essa história nas próximas aulas. Por enquanto, lembre-se de que sem esse roteador de navegador, nosso roteamento não funcionará Salve esse arquivo e volte ao nosso componente de aplicativo. Aqui, definiremos nosso roteamento. Então, primeiro de tudo, adicionamos aqui um componente chamado rota. Ao usá-los, podemos definir em qual página qual componente deve ser exibido. Não se preocupe, veja isso. Então, primeiro de tudo, queremos definir nosso componente doméstico, e aqui adicionamos nosso caminho que é o lar. Então, só adicionamos aqui slash Now, qual componente queremos exibir Queremos exibir esse componente doméstico. Então, adicionamos o atributo do elemento igual a entre colchetes CL, adicionamos Aqui podemos ver que a importação automática não está funcionando. Então, aqui, temos mais uma extensão para isso. Abra o painel de extensão pesquise Importação automática e abra esta segunda extensão. Observe esse nome, você precisa instalar essa mesma extensão. Vamos fechar essa guia de extensão e, novamente, aqui, a página inicial. Veja, agora temos entrada automática. Portanto, essa linha de rota informará ao nosso aplicativo se o URL do navegador é esse caminho e exibirá esse elemento. Simples assim, salve as alterações e dê uma olhada. Abra o console e aqui temos um erro. Uma rota só deve ser usada como filha do elemento routes. Por favor, inclua sua rota em nossas rotas. Portanto, é claro que devemos envolver nosso componente de rota com o componente de rotas. Então, no topo, importamos rotas após essa rota. E antes de nossa rota, adicionamos o componente de rotas. Mova esta etiqueta de fechamento após esta rota, salve os centímetros e dê uma olhada. R, aqui temos nosso componente inicial na página de índice do nosso aplicativo. Agora vamos definir outras rotas. Duplique esse componente de rota mais três vezes. Primeiro, mudamos o caminho para cortar produtos e de elemento para componente de produtos Veja qual importação está funcionando corretamente. Caminho para artigos e elemento para componente de artigos. E, finalmente, o caminho para cortar o administrador e o elemento para o componente administrativo Salve as alterações e dê uma olhada. Veja, primeiro estamos em casa. Agora clique no link de produtos. Recebemos produtos, artigos e administração. Portanto, está funcionando bem. Agora você pode perguntar por que definimos nossas rotas somente aqui? Podemos definir rotas em outro lugar? Sim, podemos definir nossas rotas em qualquer lugar onde quisermos exibir a rota. Por exemplo, criamos um site de comércio eletrônico e queremos adicionar roteamento nesse projeto Este site tem uma seção diferente como Navbar na parte superior, rodapé na parte inferior, painel lateral esquerdo para exibir novos produtos e uma seção principal Agora, na Navbar, temos alguns links, como celulares, laptops, relógios, roupas etc. Quando clicamos em qualquer um desses links, precisamos abrir essa página nesta seção principal. Outras partes do site permanecerão as mesmas. Apenas esta seção principal é alterada. Portanto, nesta seção principal, temos que definir nossas rotas e exatamente isso que fizemos em nosso projeto de roteamento Resumindo, lembre-se que em qual parte definimos rotas, somente essa parte mudará quando redirecionarmos para outra página 79. Adicionando página não encontrada: Agora, em nosso aplicativo, o usuário deseja redirecionar um URL como perfil de barra Então, se nosso projeto não tem página de perfil, você pode ver aqui que não temos nada, o que é bom. Mas queremos exibir a página 40, quatro não encontrada quando o usuário redireciona para a página, que não está definida em nossas rotas Então, vamos ver como podemos fazer isso. Então, depois de todas essas rotas, adicionamos mais um componente de rota. E passamos por um caminho igual à estrela, o que significa qualquer caminho que não esteja disponível nessas outras rotas, e passamos o elemento para o componente não encontrado Agora, vamos ver o que está dentro desse componente não encontrado. Veja, acabei de adicionar uma tag com 404, texto de página não encontrada e adiciono cor ao vermelho Então, de volta ao nosso componente de aplicativo, salve as alterações e dê uma olhada. Veja, aqui temos a mensagem 404, página não encontrada Você pode adicionar estilos personalizados a essa página não encontrada. Depende totalmente de você. Agora, se formos para a página inicial, obtemos nossa página inicial e, se redirecionarmos para qualquer outro URL, digamos ABC, obteremos 404, 80. Fazendo um aplicativo de página única: Agora, em nossa implementação, temos poucos problemas. Se você perceber, quando clicamos em qualquer link, toda a nossa página é atualizada. Deixe-me te mostrar. Abra as ferramentas do desenvolvedor e acesse NetworkTab. Agora clique em Anink e veja aqui que estamos fazendo essa solicitação 21 Mas sabemos que o react agrupa todo o código em um arquivo de pacote e, em seguida, o navegador buscará esse código de acordo com sua necessidade Não precisamos enviar um pacote completo para cada página. Por exemplo, se usarmos o YouTube, site do YouTube carregará apenas por algum tempo. Depois disso, se abrirmos um vídeo, ele apenas carregará a parte necessária, mas não será atualizado novamente Esse tipo de aplicativo é chamado de aplicativo de página única. Então, vamos tornar nosso aplicativo um aplicativo de página única, que é o recurso mais comum de qualquer site moderno. Então, para isso, abrimos nosso componente Nebr e, no lugar dessa tag âncora, adicionamos um componente chamado Link, que obtemos do react router Veja a entrada automática na parte superior. Vamos também substituir essas tags de ancoragem esse componente de link Agora, no lugar desse HRF, esse componente de link tem que atribuir Selecione esse hf e pressione Control plus D ou Command plus D e substitua esse HRF Sem esses dois atributos, esse componente de link não funcionará. Salve as alterações e dê uma olhada. Agora clique em qualquer link e veja que não estamos fazendo todo o SGTPRquest e também nossos sites não são atualizados toda vez que abrimos Assim, você pode ver como é simples tornar nosso aplicativo um aplicativo de página única. Só precisamos usar o componente Link no lugar dos links de ancoragem Às vezes, queremos destacar o link da rota atual, que significa que, se estivermos na página de produtos , destacaremos o link para que o usuário saiba em qual página está atualmente. É muito simples. Substitua esse componente de link por outro componente chamado Navink, vamos remover esse link Import Nós não precisamos disso. Salve os genes e dê uma olhada. Funciona da mesma forma que antes. Agora deixe-me te mostrar uma coisa legal. Inspecione este link e veja se selecionamos o link de produtos, chegamos aqui à classe ativa Portanto, qualquer que seja o link selecionado, componente New Bar adicionará uma classe ativa a esse Então, usando CSS, podemos mudar seu estilo. Então, em nosso arquivo CSS de pontos da barra de navegação, nós em dot Navbar, listamos, ancoramos pontos Active Cali Brackets, fonte ajustada para 500 e cor para azul Salve as alterações e a galeca. Veja, aqui destacamos o link de nossos artigos. Você pode ver como funciona sem problemas, e esse é o poder do react router dom. 81. Parâmetros de rota (useParams): Agora, às vezes, em nosso aplicativo, precisamos usar parâmetros de rota. Deixe-me experimentar você com o exemplo. Então, aqui temos nosso componente de produtos. Agora vamos definir alguns links para esse componente. Então, depois dessa tag AHT, adicionamos uma lista não ordenada e, dentro dela, precisamos de Li e, dentro dela, precisamos do componente de link E aqui passamos o atributo dois igual a dois em produtos de códigos duplos Queremos três aliados com link interno. Então, envolvemos essa tag âncora Ali, vinculamos com parênteses, multiplicamos por três e pressionamos tab Veja, nós temos esse MT. Eu sei que isso é um pouco complicado, mas é só um momento de prática. No momento em que você se cansar de digitar códigos repetidos, tentará usar METs e atalhos para isso Vamos passar aqui o produto um, apertar aba, produto dois, aba e produto. Agora, queremos adicionar esse ID de caminho de link para cada produto, cortar dois e três Então, se abrirmos produtos como um, o que significa que queremos ver um produto que tenha ID um, ou qualquer parâmetro que passemos aqui. Essa é a estrutura comum de roteamento e é chamada de parâmetros de rota Ao usar esse ID, buscaremos detalhes sobre esse produto específico e exibiremos esses detalhes em nossa página da web Salve as alterações e dê uma olhada. Vá para a página de produtos e aqui temos um erro. Então abra o Console e veja, aqui temos a tinta não definida. Então, de volta ao código VS, e aqui importamos esse componente de link. Salve as alterações e dê uma olhada. Clique no primeiro produto e veja, aqui temos uma página 404 não encontrada porque esquecemos de adicionar uma rota para este Então, de volta ao componente do aplicativo, e aqui após essa rota de produtos, adicionamos mais um caminho de rota para cortar produtos, cortar dois pontos, e agora aqui adicionaremos nosso nome de parâmetro de rota Digamos que ID. Observe que estamos apenas passando aqui um parâmetro de rota porque precisamos de apenas um. Mas também podemos passar quantos parâmetros de rota quisermos. Lembre-se de que, se quisermos adicionar o parâmetro de rota , teremos que usar dois pontos no início Caso contrário, não funcionará. Agora o elemento é igual a aqui, adicionamos um único componente do produto Salve as alterações e dê uma olhada. Clique no link de qualquer produto e veja como redirecionamos para um único componente do produto. Então está funcionando. Agora você pode perguntar: qual é o propósito desse parâmetro de rota? Estamos recebendo a mesma página para cada produto. Deixe-me te mostrar isso. Uma tarefa é que queremos obter esse ID nesse único componente do produto. Portanto, em um único componente do produto, e para buscar o parâmetro de rota do URL, temos um gancho no react router dom Então, na parte superior, inserimos os parâmetros de uso do dom do roteador react. Params representam parâmetros. Agora, em nosso componente funcional, chamamos isso de use params hook e esse gancho retorna automaticamente o objeto dos parâmetros de rota, e pronto Não precisamos fazer nenhuma outra coisa. Vamos armazená-los em variáveis chamadas params. E depois disso, basta que o console registre esses parâmetros. Salve as alterações e dê uma olhada. Abra o console. E veja aqui que obtemos parâmetros de rota no objeto. Lembre-se de que o nome dessa propriedade é o mesmo que descrevemos em nossa rota aqui. Agora, no aplicativo do mundo real, usando esse ID, podemos buscar dados do nosso back-end e também fazer muitas outras coisas Por enquanto, vamos simplesmente exibir esse ID aqui. Então, desestruturamos esse objeto e obtemos aqui o ID. Agora remova esse console e vamos imprimir esse ID após esse título. Salve as alterações e dê uma olhada. Veja se formos para o produto dois, obtemos o produto único dois. E se formos para o produto três, obtemos um único produto três. Então, isso é tudo sobre parâmetros de rota. 82. String de consulta: Agora, vamos digitar o parâmetro de URL, que é uma string quadrada De dados, queremos passar com nossa solicitação de URL. Deixe-me dar um exemplo. Então, aqui está a página. Imagine que temos uma lista de artigos e queremos encurtar esse artigo por data e categoria para eletrônicos. Esses são os dados que queremos passar em nossa URL. Então, aqui passamos a URL, o interrogação e, depois disso, tudo o que passamos aqui vai como string de consulta, e podemos obter essas variáveis em nosso componente de artigo. Outro exemplo mais comum de sequência de caracteres de consulta é a pesquisa. Deixe algo no YouTube. Observe que a URL muda nos resultados, interrogação e aqui temos a string de consulta. Se causarmos o URL e colá-lo em outra guia, obteremos o mesmo resultado de pesquisa. Então esse é o trabalho da string de consulta. Então, voltando ao nosso exemplo, queremos passar aqui para a string de consulta. Primeiro, escrevemos o nome da nossa variável, abreviado por igual a agora sem nenhum código, passamos aqui nosso Digamos que encontro. Agora, para passar o segundo parâmetro, usamos a categoria de pessoa igual à eletrônica. Agora, vamos ver como aqui. Eu sei que isso é um pouco chato, mas esses conceitos são muito importantes quando estamos trabalhando em qualquer grande componente de artigo aberto e, na parte superior, precisamos importar um gancho para obter os parâmetros da string de consulta Use a pesquisa por AmsrRouter doom. Esses parâmetros de pesquisa de uso são muito semelhantes ao nosso gancho de estado de uso Chamamos isso de gancho aqui em nossa função. E ore com dois itens. Então, armazenamos isso em variáveis e usando a desestruturação R, aderimos aos parâmetros de pesquisa, pesquisa por conjunto de vírgulas. Você pode ver que é muito semelhante ao uso Agora, nesta primeira propriedade, parâmetros de string. E usando os parâmetros de pesquisa definidos, podemos definir os parâmetros da sequência de caracteres de consulta Vamos primeiro ver os parâmetros de pesquisa. Esses parâmetros de pesquisa têm um método chamado GT. E entre parênteses, temos que passar o nome da nossa variável. Digamos que seja curto B. Certifique-se de escrever o mesmo nome de variável que passamos na string de consulta e armazená-lo na variável chamada sort B. Agora, vamos duplicar essa linha usando save plus lt mais a seta para baixo Opção Plus mais seta para baixo e altere essa foto por categoria. Agora, vamos imprimir isso aqui. Então colchetes, fotografados por, e depois, categoria de colchetes cruzados. Veja as mudanças e dê uma olhada. Veja, aqui temos essas duas variáveis de string de consulta. Agora, vamos ver como podemos usar definir perms de pesquisa para definir parâmetros de sequência de caracteres de consulta Depois dessa tag AT, criamos um botão chamado shot B views. E também, passamos aqui ao clicar e dentro dele, passamos function, handle, short, B. Agora, vamos definir essa função. Então, const handle shot by. Função de seta, e aqui usamos definir perms de pesquisa e aqui precisamos passar variáveis de string de consulta no par de valores-chave Classifique por e valorize as visualizações. Qualquer objeto que passarmos aqui, ele será definido como string de consulta. Salve as alterações e dê uma olhada. Clique neste botão e veja na URL, obtemos uma string de consulta curta com B igual a visualizações, mas nossa categoria Nesse objeto, adicionamos mais uma categoria-chave e um valor a essa variável de categoria. E, como sabemos, se a chave e o valor forem iguais, podemos remover isso. Salve as alterações e dê uma olhada. Volte para nossa página e clique novamente neste botão. Veja, aqui temos nossa string de consulta. Você pode ver como é simples. 83. Roteamento aninhado: Agora vamos imaginar essa página de administração como painel de administração do site. Nessa página, o administrador pode ver todos os detalhes de vendas e todos os detalhes dos vendedores Então, componente administrativo, queremos adicionar dois componentes de link. Então, subjacente a ele, precisamos de Ali e, dentro dele, precisamos de um componente de link com atributos dois iguais a admin, e agrupamos esse componente de Ali e link com parênteses. Agora, para o primeiro link , adicionamos vendas e Link também cortamos vendas cortamos Em segundo lugar, vincule vendedores e vendedores e certifique-se importar o componente de link do React Router doom Salve as alterações e dê uma olhada. Se clicarmos no link de vendas, ele nos redirecionará para a página de vendas do administrador Mas aqui temos uma página não encontrada. Aqui, não queremos abrir uma nova página. Em vez disso, queremos mostrar a página de vendas nesse painel de administração. Algo parecido com isso. Clicamos na página de vendas e, em seguida, a página de vendas será aberta abaixo deste painel de administração. E se abrirmos a página do vendedor , essa página também será exibida aqui. Então imagine que esses quatro links são nossa barra horizontal e esses dois links são nossa barra lateral. Esse roteamento é chamado de roteamento aninhado. Então, vamos ver como podemos adicionar roteamento aninhado. Portanto, agora, componente do aplicativo, para definir o roteamento aninhado, precisamos agrupar nossas rotas aninhadas Então, no lugar dessa tag de fechamento automático, adicionamos uma tag de fechamento separada. Agora, entre elas, precisamos definir nossa rota aninhada Então, adicionamos outro caminho de rota. Aqui passamos por nossa rota aninhada. Então, se você quiser definir slash admin slash sales, aqui , só precisamos escrever sales porque slash admine Agora, elemento para componente de vendas. Agora vamos duplicar esse código e, no local da venda, passamos o elemento vendedores para também Guarde as inges e dê uma olhada. Agora, se clicarmos no link de vendas, não obteremos a página de erro 404 e também obteremos esse painel de administração em ambas as páginas Agora, por que não recebemos nosso componente de vendas e vendedores. Então, para isso, precisamos seguir mais uma etapa. Então, componente administrativo no qual queremos exibir esse NasdaRouting E aqui temos um componente que especifica em qual ponto queremos exibir o roteamento NASDA Então, na parte superior, inserimos a saída do react Router doom. E onde queremos exibir nosso roteamento aninhado logo após esses dois links Então, aqui adicionamos nosso componente de saída e pronto. Salve as alterações e dê uma olhada. Veja, aqui temos nossas páginas. Ambas as páginas estão funcionando bem. Então, vamos recapitular essa lição. Portanto, para definir o roteamento aninhado, envolveremos nossas subpáginas com o componente de rota principal Nesse caso, é adicionar agora, tudo o que passarmos nesse elemento será exibido nas duas páginas. Se não passarmos aqui esse elemento , não veremos esse elemento nessas páginas. Isso é chamado de roteamento SAD porque estamos exibindo uma página dentro de outra página E para exibir o roteamento SAD, precisamos passar a saída nesse componente administrativo, simples assim Além disso, esse roteamento aninhado não é muito comum para aplicativos de reação Só que às vezes precisamos disso, não se preocupe com isso. Agora, aqui, nosso componente de aplicativo parece um pouco feio por causa de todo esse roteamento Então, vamos armazenar esse roteamento em um componente separado. Então, cortamos todo esse roteamento e, em nossa pasta de origem, criamos um novo componente chamado routing dot Adicionamos código padronizado e, no local dessa DU, colamos nossas rotas Agora, vamos também cortar todas as entradas do componente do aplicativo exceto esse Nabriput, e colá-las no componente de roteamento Além disso, vamos cortar essas rotas e o componente de rota daqui e colá-los em nosso componente de roteamento Salve esse arquivo e volte ao nosso componente de aplicativo. Vamos adicionar aqui todos os componentes de roteamento. Salve isso e veja como nosso componente do aplicativo parece limpo. 84. Navegação programática: Vamos ver outra característica importante do roteamento, que é a navegação Então, imagine que quando o usuário visita esta página do painel de administração, queremos verificar se a função do usuário é de administrador ou não. Então, aqui, primeiro, eu fecho todos os outros arquivos, e aqui definimos um objeto chamado usuário igual a objeto e passamos aqui a objeto e passamos aqui propriedade role e value para, digamos Isso é apenas por exemplo de navegação. Depois disso, podemos transmitir sua condição, como se a função de ponto do usuário não fosse igual a Admin, então redirecionaremos esse usuário para a página inicial ou página Então, para navegar, temos um componente chamado Navigate. Então, no topo, importamos o Navigate de um roteador doom. E neste blog, simplesmente retornamos esse componente de navegação. E dentro desse componente, adicionamos atributos a um caminho inicial igual, e pronto. Certifique-se de retornar esse componente de navegação porque ao gravar esta lição, esqueci de devolvê-lo e perco muito tempo encontrando esse erro Salve as alterações e dê uma olhada. Tente abrir o painel de administração e veja como redirecionamos diretamente para a página inicial Agora há mais uma maneira de navegar. Então, aqui, quando vamos para uma única página de produto, queremos adicionar aqui o botão Voltar. Abra um único componente do produto. Primeiro, adicionamos aqui o botão chamado voltar e adicionamos aqui o evento em click equals to Agora, vamos definir essa função. Então, const, guidão, função de seta. E dentro disso, escrevemos nossa lógica de navegação. Isso é chamado de navegação programática. Então, para isso, precisamos usar um gancho chamado use Navigate. Então, na parte superior, inserimos use o gancho Navigate agora, dentro desse componente, chamamos esse gancho, e esse gancho nos dá a função de navegação Então, armazenamos essa invariável geralmente chamada de Navigate. E dentro dessa função de bolsa, simplesmente chamamos essa função de navegação E dentro disso, temos que seguir nosso caminho. Então, aqui acabamos de passar menos um. Se quisermos navegar para uma página específica , podemos escrever algo assim. Corte os artigos. Agora, vamos mudar isso para menos um, salvar as alterações e dar uma olhada Veja, quando clicamos nesse botão, vamos para a página anterior. É assim que podemos navegar para páginas diferentes em nossos recursos importantes do react router dom. Se você quiser saber mais sobre essa biblioteca , leia sua documentação. Mas para criar aplicativos de reação modernos. Se você tiver alguma dúvida, pode me perguntar na seção de perguntas e respostas e desculpe por esses estilos de projeto de roteamento, e desculpe por esses estilos de projeto de roteamento pois quero que você entenda conceitos importantes de roteamento sem se preocupar com estilos Os desenvolvedores não sabem, então fique à vontade para fazer perguntas sobre isso. 85. Exercício para roteamento: Agora é hora de fazer exercícios de roteamento. Então, em nosso projeto de filmes anteriores, não temos roteamento. Portanto, sua primeira tarefa é rotear este projeto. A rota deve ser assim. Na página inicial, mostraremos, por padrão, a lista de filmes populares. Agora, quando clicarmos nos filmes mais votados, redirecionaremos para a rota mais bem avaliada e, se clicarmos no próximo link , redirecionaremos para a próxima página e os próximos dados serão exibidos Na barra de navegação, você também pode ver a rota ativa. Agora, depois disso, sua segunda tarefa é que, ao clicarmos em qualquer placa de filme, ela redirecionará para o movie slash seu ID Não se preocupe com essa página. Você precisa exibir o ID do filme nessa página. Sem estilos, nada. Apenas um texto simples. Só estou praticando o roteamento aqui. Se você quiser adicionar esse projeto ao seu portfólio, certifique-se de duplicar esse projeto e seguida, concluir este exercício sobre código duplicado Portanto, dedique de 15 a 20 minutos neste exercício e fique à vontade para assistir novamente a essas aulas em particular. Está completamente bem. O objetivo deste exercício é examinar os conceitos básicos de roteamento Então, nos vemos depois de concluir este exercício. 86. Adicionando roteamento ao Project 02: Espero que você tente resolver este exercício, porque tentar resolvê-lo indica que você realmente deseja aprender a reagir. Então, se você tentar, então se agradeça por isso. Agora, vamos ver a solução do nosso exercício de roteamento. Então, primeiro de tudo, não vou interromper nosso projeto antigo Em vez disso, criaremos um projeto duplicado. Portanto, copie todos os arquivos, exceto os módulos de nó e o arquivo GCN do pacote dot log dot dot E na pasta do nosso projeto, criamos uma nova pasta chamada exercício de roteamento E dentro dela, colamos nossos arquivos. Agora, vamos abrir isso no código VS. Bom. Primeiro, vamos instalar todas as dependências do nosso projeto. Abra o terminal e escreva aqui, instale o NPM e pressione Enter O que esse comando fará? Escreva. É para adicionar e instalar a pasta de módulos do nó. Depois disso, precisamos instalar mais uma biblioteca para roteamento, que é react router dom Escreva NPM install, react router dom e pressione Enter. Vai levar algum tempo, ótimo. E no final, vamos executar esse aplicativo com o NPM run Dow E abra esse link em nosso navegador. Veja, está funcionando. Agora, vamos começar adicionando roteamento. Em primeiro lugar, precisamos decidir em qual parte queremos exibir o roteamento. Portanto, precisamos adicionar roteamento após nosso componente NaBR. Mas antes disso, precisamos envolver todo o nosso aplicativo com o componente roteador do navegador. Portanto, no arquivo JSX de ponto principal, importamos o componente roteador do navegador do Rag Router doom e vamos agrupar nosso componente de aplicativo com esse componente com esse Salve esse arquivo e vamos definir nossas rotas. No componente do aplicativo na parte superior, importamos rotas e rotas do Rag Router dom Agora, aqui, após esse componente numérico, é melhor adicionar a tag principal e, nessa tag, adicionaremos o roteamento. Então, primeiro de tudo, adicionamos o componente de rotas e, dentro deles, adicionamos nosso componente de rota. Estou indo um pouco mais rápido porque já os vemos nesta seção. Portanto, neste componente de rota, temos o caminho, e primeiro definimos o caminho para quem, ao qual podemos adicionar um elemento forward las aqui, simplesmente cortamos esse componente da lista de filmes com um título popular e o passamos aqui. Agora, vamos definir outra rota e definir o caminho dois, barra, sublinhado superior classificado e elemento para esta lista de filmes com o componente mais votado E, por fim, definimos outra rota com o caminho próximo e o elemento desta lista de filmes com o próximo componente. Fisicamente, estamos dizendo neste caminho, mostre esse elemento. React não se importa se estamos renderizando o mesmo componente ou não Salve as alterações e dê uma olhada. Veja, na página inicial, só temos uma lista de filmes populares. Agora mudamos nosso URL para o sublinhado mais bem classificado e vemos que obtemos o componente mais bem avaliado, então está funcionando Agora, vamos destacar esses links da Navbar. Então, abra o componente Nu Bar e no lugar dessa etiqueta de ancoragem Qual componente adicionaremos? Certo, é um componente Nowlin, e veja que é inserido automaticamente na parte superior Agora também substitua isso por New Link e também por este último. Depois disso, no lugar de todo o HRF, adicionamos ao atributo, selecionamos HF e, usando a edição com vários cursores, substituímos todo o HRF Agora, para o primeiro link, passamos o HomeLink, que é a barra frontal Em segundo lugar, adicionamos a barra com a classificação máxima de sublinhado e, no último link, adicionamos a barra futura Salve os genes e dê uma olhada. Se clicarmos nesse título popular, obteremos um título popular. E se formos para os mais votados, chegaremos aqui aos títulos mais votados, mas os filmes não estão mudando. Então, vamos corrigir isso bem rápido. Portanto, em nosso componente de lista de filmes, estamos buscando dados nesse gancho de efeito de uso E, como sabemos, esse gancho de efeito de uso será executado apenas uma vez quando esse componente for renderizado E, no nosso caso, esse componente busca dados da API quando estamos em uma página popular Mas se mudarmos nossa página para a mais votada, somente o título do tipo e as propriedades do emoji mudarão E é por isso que esse efeito de uso nunca mais será executado. Então, para resolver esse problema, temos que executar esse gancho de efeito de uso quando esses adereços de tipo estão mudando Então, aqui simplesmente passamos a matriz de independência de tipo. Se você está um pouco confuso, não se preocupe. Na próxima seção, veremos esses conceitos em detalhes. Salve as alterações e dê uma olhada. Veja agora nossos filmes estão mudando de acordo com seu tipo. Agora, vamos inspecionar esse link. E aqui podemos ver a classe ativa. Então, só precisamos adicionar CSS para essa classe ativa. Então, um arquivo CSS de pontos Nabar. E depois dessa âncora de links Naba, adicionamos o colchete angular Nabarlink E nos colchetes Gali, adicionamos o peso da fonte a 700 Veja as mudanças e dê uma olhada. Veja, aqui temos tinta destacada. Você pode ver como é simples adicionar roteamento. Muitos desenvolvedores tornaram isso muito difícil porque tentam fazer tudo em uma única etapa, mas sempre tentam fazer qualquer implementação passo a passo. 87. Definindo parâmetros de rota para um único filme: Agora, aqui, quando clicamos em qualquer um desses cartões, não queremos abrir o TMW Link Em vez disso, queremos abrir outra página em nosso site, que possa exibir os detalhes do nosso filme. Então, vamos mudar esse link primeiro. Abra o componente da placa de filme. E na parte superior, importamos componente Link do roteador React Dom. Agora, no lugar dessa tag âncora, adicionamos o componente de link e podemos remover esse atributo de destino Não precisamos dele no local desse HF, adicionamos dois atributos Além disso, remova esse URL base do DMD. Nós apenas mantemos o ID do filme, salvamos as alterações e damos uma olhada Clique em qualquer cartão de filme e veja, nós redirecionamos para o ID do filme slash Então, nossa metade da tarefa está concluída. Agora, queremos apenas exibir esse ID do filme nesta página. Mas antes disso, temos que definir essa rota de página. Então, componente do aplicativo, e aqui na parte inferior, adicionamos mais um componente de rota. O caminho é igual a agora o que passamos aqui? Escreva a coluna de barra do filme. E aqui adicionamos nosso nome variável, ID ou ID do filme. Eu acho que isso é mais específico. Agora, elemento, aqui queremos adicionar um novo componente. Então, em nossa pasta de componentes, em nossa pasta de lista de filmes, criamos um novo componente chamado single movie dot jsx Agora, vamos adicionar aqui nosso código padronizado. Bom. Salve esse arquivo em nossa rota. Adicionamos um único componente de filme e a importação automática funciona. Você pode ver o quão rápido podemos escrever nosso código usando a extensão de importação automática. Salve as alterações e veja aqui que temos um único componente de filme, então está funcionando. Agora, vamos simplesmente exibir esse ID do filme, então você se lembra do que usaremos para isso? Certo? Usamos o PeramShok do roteador react dom Então, voltando ao componente de filme único no componente funcional, adicionamos o uso permanente e selecionamos essa sugestão e ela receberá entrada automática Aqui chamamos esse gancho, e isso retornará o objeto de parâmetros de rota. Então, vamos armazená-los em variáveis, parâmetros de chamada, ou podemos até mesmo desestruturar isso e adicionar aqui o ID do filme porque em nossa rota, definimos o nome da variável de rota como ID do filme Agora, no lugar desse DU, adicionamos à tag e, aqui mesmo, filmes individuais entre colchetes, ID do filme e pronto Salve as alterações e dê uma olhada. Veja, aqui temos nossa identidade. Espero que todas as suas dúvidas relacionadas ao roteamento estejam esclarecidas agora. Sempre há atualizações ou sintaxe diferente para escrever código, mas os conceitos básicos nunca mudarão, e é isso que eu quero ensinar a vocês Depois que seus conceitos principais estiverem claros, você poderá aprender novos conceitos e sintaxe rapidamente Se você está assistindo continuamente a este curso, faça uma pequena pausa e tome um pouco de ar fresco. Nos vemos na próxima seção. 88. Seção 09 Chamando uma API: Bem-vindo à seção nove do curso definitivo de reação. Então, como sabemos, o react é usado para criar a frente e parte do nosso aplicativo. No mundo real, também temos back-end, que executa a lógica e armazena dados no banco de dados e também é usado para autenticação Se você quiser trabalhar apenas como desenvolvedor do react, não precisa aprender back-end, como no Js, jango ou asp.net Mas você precisa aprender como podemos conectar nosso aplicativo de reação ao back-end E isso é o que vamos aprender nesta seção. Então, vamos mergulhar nisso. 89. useEffect hook em detalhes: Antes de começarmos a chamar um EPI, primeiro, vamos entender adequadamente o que é use effect hook e como podemos usá-lo Portanto, o SiluusEfect é usado para realizar efeitos colaterais em Os efeitos colaterais são ações que são realizadas fora do mundo. Realizamos um efeito colateral para alcançar fora de nossos componentes de reação e fazer alguma coisa. Por exemplo, buscar dados da API, armazenar dados no armazenamento local, o que vemos no Project one, que vemos no Project one, atualiza diretamente a função de cúpula e cronômetro como definir tempo limite ou definir intervalo Esses são os efeitos colaterais mais comuns no react. Então, para realizar qualquer tipo de efeito colateral, precisamos usar o efeito Hook. Agora vamos ver como esse efeito de uso funciona. Nesta seção, usaremos nosso projeto de roteamento anterior porque criar um novo projeto porque criar um novo projeto para cada seção é um pouco entediante Então, aqui, neste componente do vendedor, primeiro, importamos o efeito de uso do react e, depois disso, chamamos esse efeito de uso em nosso componente funcional. Agora, como você sabe, esses ganchos de efeito de uso usam dois argumentos primeira é a função Colbek na qual realizamos nossos efeitos colaterais e, depois disso, temos a matriz de dependências Por enquanto, não vamos passar essa matriz de dependências e, dentro dessa função de retorno de chamada, simplesmente escrevemos o componente de log de pontos do console Salve esse arquivo e dê uma olhada. Abra o console e vá para a página de administração. Veja, nós redirecionamos para a página inicial porque temos que definir uma função de usuário Então, no componente de administração, mudamos essa função para administrador. Salve-os e agora tente abrir a página de administração e ir para a página do vendedor. Aqui podemos ver que obtemos a montagem do componente. Recebemos esse console duas vezes por causa do modo de reação, que eu já disse antes. No modo React Stit, renderize nosso componente duas vezes no processo de desenvolvimento Agora, esse efeito de uso será executado em cada montagem e será renderizado novamente. Mas vamos primeiro entender quando nossos componentes são montados ou renderizados. Portanto, a montagem do componente ocorre quando nosso componente é exibido pela primeira vez em nosso navegador. Agora, depois que nosso componente for montado em nosso navegador, se algo mudar ou atualizar esse componente, isso causará uma nova renderização Portanto, se não passarmos nenhuma dependência aqui, essa função Colvec será executada na montagem e renderização do componente, que significa que quando algo mudar no componente do vendedor Então, digamos isso ao vivo. Aqui, não temos nada para ver renderizar. Primeiro, adicionamos aqui fragmentos de reação porque vamos adicionar vários elementos Agora vamos adicionar uma caixa de entrada para lidar com seu valor, criamos um nome de chamada de variável de estado e definimos o nome e passamos uma string vazia como valor padrão. Já fizemos isso muitas vezes, certo. Agora, aqui passamos o evento inalterado e aqui obtemos o objeto do evento, função de seta e definimos o nome para seu valor atual Então, como podemos obter o valor atual? Certo? Usando o valor do ponto alvo do evento. Simples. Salve as alterações e dê uma olhada, atualize esta página, e aqui podemos ver que obtemos a montagem do componente, agora escrevemos algo nesta entrada e você pode ver, novamente obtemos a montagem do componente Agora, novamente, se escrevermos algo e C, obteremos a montagem do componente mais uma vez. Deixe-me explicar para você o que está acontecendo aqui. Depois que nosso componente for montado, escrevemos nessa caixa de entrada, que mudará o nome do estado em nosso componente e causará renderização e, por causa disso, nosso efeito de uso será executado. Sempre que queremos executar algum código na montagem e renderização, usamos o efeito de uso sem nenhuma dependência. Agora, nesta próxima lição, veremos outras duas variedades de gancho de efeito de uso. 90. Dependências do useEffect: Então, na lição anterior, vemos como podemos executar a função na montagem e na renderização novamente. Agora, às vezes queremos executar nossa função de retorno de chamada apenas uma vez quando nosso componente é montado ou exibido no navegador É muito simples e fácil. Só temos que passar aqui a dependências como uma matriz vazia, salvar as alterações e dar uma olhada, aqui temos a primeira montagem do componente Depois disso, se alterarmos alguma coisa em nosso componente, esse efeito de uso não será executado. Ao usar essa dependência do ETR, obteremos dados da API porque queremos apenas testar os dados uma vez, que também já fizemos em nosso projeto, certo? Outro exemplo, suponha que chamemos uma API, que retornará o número da notificação, para que possamos alterar o título da nossa página da web acordo com esse número. Primeiro, armazenamos o número de notificação do domínio cinco e depois disso, aqui escrevemos o título do ponto do documento igual a em CTI, adicionamos colchetes de dólar C, notificação e, depois disso, novas Salve as alterações e dê uma olhada. Veja, aqui temos um título de notificação personalizado. É assim que muitos aplicativos de reação exibem títulos dinâmicos. Agora, suponha que, no local dessa notificação, desejemos exibir esse estado de nome. Aqui, escrevemos o nome e o dólar entre colchetes de Cali. Aqui, adicionamos o nome, salvamos as alterações e damos uma olhada. Atualize a página e veja aqui que obtemos apenas o texto do nome porque atualmente nosso nome é uma string vazia. Mas se escrevermos algo nessa entrada, não obteremos esse nome em nosso título porque esse efeito de uso será executado apenas uma vez por causa dessa matriz vazia. Mas aqui queremos executá-lo sempre que essa variável de nome for alterada. Então, aqui nós apenas passamos variável de nome nesta matriz de dependências Também pode passar aqui várias variáveis, salvar as alterações e dar uma olhada. Você pode ver agora que nosso título tem um nome atualizado, então é assim que as dependências funcionam. 91. função de limpeza do useEffect: Agora vamos ver o último e importante conceito de efeito de uso Hook. Então, às vezes, precisamos adicionar a função de limpeza para remover os efeitos colaterais Por exemplo, aqui estamos apenas atualizando o título. Agora imagine que aqui estamos nos inscrevendo na sala de bate-papo e, se mudarmos para outra página, queremos cancelar a assinatura dessa sala de bate-papo Portanto, para cancelar a assinatura da sala, precisamos usar a função de limpeza Saber que esse exemplo é um pouco difícil de entender. Deixe-me simplificar para você. Imagine que este é o nosso componente de bate-papo no qual as pessoas estão conversando. Quando duas pessoas estão conversando, ambas precisam inscrever ou se conectar ao mesmo ID da sala. Por causa disso, ambas as pessoas estão recebendo a mensagem imediatamente na tela. Mas se uma pessoa sair da sala de bate-papo, teremos que cancelar a inscrição ou nos desconectar dessa sala para que essa pessoa não receba a mensagem na tela Na maioria dos casos, às vezes não precisamos usar a função de limpeza , e é por isso que quero mostrar isso a vocês. Então, aqui, vamos remover esse código indesejado e adicionar novamente o componente de log de pontos do console. E no final da nossa função de retorno de chamada, queremos adicionar a função de limpeza. Então, aqui retornamos uma função. E nessa função, podemos escrever nossa lógica de função de limpeza Essa função de limpeza será executada quando nosso componente for desmontado ou removido da tela Então, aqui, simplesmente escrevemos componente de log de pontos do console unmount Salve as alterações e dê uma olhada. Atualize a página e, aqui, podemos ver primeiro a montagem do componente, depois a desmontagem do componente e, novamente, a montagem do componente Como eu disse, por causa do modo react street, nosso componente é renderizado duas vezes. Então, primeiro, ele montará, depois reagirá no modo de rua, removerá esse componente, e é por isso que temos aqui a desmontagem do componente E depois disso, nosso componente é montado novamente. Agora, se você for para qualquer outra página, aqui temos novamente desmontagem do componente porque nosso componente foi removido da nossa tela Então é assim que a função de limpeza funciona. Não se preocupe com isso. Só usaremos a função de limpeza quase uma vez em nosso aplicativo. Então, para recapitular rapidamente, usefect é usado para realizar efeitos colaterais em nosso componente O efeito US tem dois parâmetros, primeiro, função de retorno de chamada e segundo, matriz de dependência, que é opcional Por matriz de dependência, o efeito de uso tem três variações. O primeiro é sem nenhuma dependência, que executa essa função de retorno de chamada na montagem e a cada nova renderização segunda é a matriz vazia, que executa essa função Calbeck somente na montagem e a última é a matriz de dependência com variáveis, que executa essa função Calbeck na renderização e também quando qualquer uma dessas variáveis muda Mais uma coisa, à medida que adicionamos gancho de estado de uso múltiplo em nosso componente, também podemos adicionar um gancho de efeito de uso múltiplo em nosso componente, simples assim. Não, repito esse gancho de efeito de uso várias vezes, mas só quero ter certeza de que você tem os fundamentos corretos para usar o gancho de efeito Além disso, quero explicar como montar, renderizar novamente e desmontar, que chamamos de ciclo de vida do componente Então você aprende os dois conceitos usando uma única lição. 92. Noções básicas de solicitações HTTP: Agora, antes de chamarmos a API, vamos ver o que é SDDPRquest Então, como conhecemos nosso cliente, ou podemos dizer se nosso navegador deseja alguns recursos, ele solicitará o servidor usando a Internet. Essa solicitação é chamada de SDDPRquest. Então, em palavras simples, esse SDDPRquest funciona como uma ponte entre clientes e servidores Agora, quando o servidor recebe o SDDPRquest, ele retornará alguns recursos solicitados pelo cliente Exemplo: anteriormente, definimos STDPRquest para obter os dados do filme Então, o servidor TMDB pega nosso STDPRquest e depois nos envia Agora, existem alguns métodos que descrevem o tipo de tarefa que queremos realizar. Então, primeiro, temos a solicitação Get, que é usada para buscar dados do servidor Nós já vimos isso direito. Em seguida, temos a solicitação de postagem, que é usada para enviar dados ao servidor, como formulário de inscrição ou formulário de login Em seguida, colocamos a solicitação, que é usada para substituir os dados no servidor. Depois disso, temos a solicitação de patch, que é usada para atualizar dados específicos no servidor. Agora você pode perguntar: qual é a diferença entre colocar e remendar? Por exemplo, temos um servidor que tem informações sobre dez livros. Agora, se quisermos substituir esse livro por novos detalhes do livro , usamos put request. Mas se quisermos atualizar detalhes específicos do livro, como queremos atualizar seu preço, aqui não estamos substituindo todos os detalhes do livro, mas apenas alterando a parte específica dos detalhes do livro. Portanto, neste caso de uso, usamos o método patch. E por último, temos o método delete, que é usado para excluir dados específicos. Já estamos fazendo essa solicitação quando estamos usando qualquer site e usamos o Get request várias vezes ao dia. Por exemplo, abrimos o site udemy.com. Aqui estamos enviando uma solicitação para obter a página da web do servidor, para que o servidor retorne essa página da web como resposta Aqui estamos usando o GetQuest sem saber. Agora, na próxima lição, enviaremos a solicitação Get para obter dados do servidor. 93. Buscando dados de vendedores: Agora vamos começar com a obtenção de dados da API. Eu sei que você já sabe disso, mas eu quero revisar você e também sem obter dados, como podemos realizar a atualização ou exclusão de funcionalidades Vamos obter rapidamente os dados da API. Aqui, usaremos uma API falsa, que funcionará da mesma forma que a API original, que você obterá do desenvolvedor do Bend. Acesse Jason placeholder.typicod.com. Essa API foi criada para degustar e aprender sobre como chamar uma API Desça até a parte inferior e aqui podemos ver diferentes tipos de dados, postagens, comentários, fotos, tarefas, etc Vamos usar os dados desse usuário. Abra-os e aqui podemos ver que obtemos esses dados de usuários diferentes. Consideraremos esses usuários como vendedores do nosso projeto. Copie esse URL da API e volte para o código VS. Não precisamos desse efeito de uso e vamos adicionar o efeito de uso do zero. Portanto, use o efeito, a função de retorno e aqui o que adicionamos à matriz de dependência com variáveis ou sem Certo, adicionaremos uma matriz vazia como dependências porque só queremos obter dados uma vez da API Agora, dentro dessa função de retorno de chamada, chamaremos nossa API para obter dados Agora, anteriormente, usamos método fetch para chamar a API em nosso segundo projeto Mas agora usaremos a biblioteca mais popular para chamar API no react, que é o xOS. Então, abra o terminal e adicione um novo terminal, e aqui, o NPM instale o AXOS e pressione Enter Não se preocupe com o Axios. É mais fácil de usar do que o método fetch. Agora, na parte superior, inserimos o Axios do pacote Axios. Agora, em nosso gancho de efeito de uso, escrevemos Axios dot Agora, aqui, temos que adicionar nosso método SDTP, que é get para buscar os dados Agora, dentro dessa função, temos que adicionar nossa API em códigos, mesma forma que fizemos no método fetch Agora, essa expressão retorna uma promessa. Então, para lidar, prometer, o que podemos usar, escreva. Podemos usar o método then para acing await. Aqui escrevemos então e obtemos aqui a resposta, função de seta, e simplesmente consultamos o log de pontos desta resposta. Guarde os gengivas e dê uma olhada. Abra o console. Veja, aqui obtemos essa resposta da API. Vamos ver essa solicitação com mais detalhes. Então, aqui abrimos a guia Rede. Por enquanto, não recebemos nenhuma solicitação. Atualize esta página e veremos várias solicitações de documentos e scripts Mas só queremos ver a solicitação de busca. Então, aqui selecionamos Filter, fetch ou XHR, que significa XML SDDPRquest aqui recebemos a solicitação de dois usuários devido Aqui, podemos ver o código de status para 200, o que significa o tamanho bem-sucedido de nossa solicitação, e temos tempo para concluir essa solicitação. Esses são detalhes sobre essa solicitação STTP específica. Vamos ver o que há dentro disso. Aqui podemos ver os cabeçalhos dessa solicitação SDTP. Portanto, cada solicitação e resposta de SDTP é dividida em seções, cabeçalho no qual definimos metadados e, no corpo, definimos ou obtemos os Então, aqui podemos ver alguns detalhes gerais do cabeçalho sobre nosso SDDPRquest Podemos ver aqui URL, método, código de status, endereço remoto, que é o endereço IP do cliente. Agora, depois disso, temos cabeçalhos de resposta que o servidor envia com a resposta Na maioria das vezes, não precisamos nos preocupar com isso e, finalmente, temos o cabeçalho da solicitação. Além disso, não nos preocupamos com isso. Agora, na guia de visualização, temos a visualização prévia dos nossos dados. E nessa guia de resposta, obtemos nossos dados de forma estruturada. Agora, vamos voltar ao console. E aqui podemos ver neste objeto de resposta estamos obtendo esses dados de configuração nos quais obtemos nossos dados, cabeçalhos pelo status 200 da solicitação XOs, que é para sucesso e texto de status Na maioria das vezes, estamos lidando apenas com esses dados. Então, vamos exibir essa lista de dados na página do nosso vendedor. Portanto, para exibir os dados, precisamos armazená-los em um estado. Então, criamos uma variável de estado chamada vendedores e definimos vendedores e passamos aqui uma matriz vazia Agora, no local desse log de pontos do console, passamos a função Setsellers e, dentro dela, passamos dados de pontos de resposta Agora, vamos simplesmente mostrar esses vendedores. Então, entre colchetes Ci, mapa de pontos do vendedor, aqui pegamos cada vendedor e retornamos uma tag de parágrafo e passamos aqui o nome do ponto do vendedor E, como sabemos, para o método map, também precisamos adicionar o atributo-chave. Portanto, a chave é igual ao ID do ponto do vendedor, que é exclusivo para cada Veja as mudanças e dê uma olhada. Veja, aqui temos o nome desse vendedor. Você pode ver que, usando axios, não precisamos fazer uma etapa adicional, que fizemos no método fetch Espero que todas as suas dúvidas sobre o método G estejam agora esclarecidas. 94. Adicionando indicador de carga: Agora, quando enviamos solicitações para o servidor, levará algum tempo, como meio segundo ou menos. Mas, às vezes, se nossos dados forem grandes ou a conexão com a Internet do usuário estiver lenta, precisamos exibir o indicador de carregamento em nossa página da web. Então, no topo, aqui criamos uma variável de estado chamada Ioading e definimos Iloading Como valor padrão, passamos false. Agora, em nosso gancho de efeito de uso, antes de começarmos a corrigir os dados, definimos o carregamento como verdadeiro E depois de obtermos nossos dados, que estão nesse método then, adicionamos aqui o bloco de código e, em uma nova linha, definimos o carregamento como falso. Simples assim. Agora, antes do nosso método de mapeamento, podemos adicionar culipracket e adicionar aqui condição se Em seguida, exibimos aqui a tag ST e, dentro, adicionamos o texto de carregamento. Salve as alterações e dê uma olhada. Atualize a página e veja aqui que carregamos tags apenas por milissegundos porque minha conexão com a Internet é rápida e o tamanho dos dados é pequeno Agora, vamos tornar nossa Internet lenta. Então, na aba de redes, aqui nesse trotoning podemos selecionar três G rápidos, três G lentos, também offline Então, vamos selecionar três G lentos e reprimir a página. Você pode ver aqui que obtemos esse texto de carregamento, então está funcionando bem. Agora, às vezes, queremos exibir o indicador de carregamento da página inteira. Por exemplo, aqui exibimos dados e também temos a tag S three de entrada. Só queremos exibir o carregador quando os dados do vendedor estão ficando rápidos Mas às vezes queremos exibir o carregador para a página inteira. Para isso, simplesmente adicionamos a condição if antes desta escrita e a condição é a mesma Se o carregamento for verdadeiro, retornaremos essa tag ST com carregamento Salve as alterações e dê uma olhada. Atualize a página e veja aqui que obtemos esse texto de carregamento para toda a página do centro de administração Por enquanto, não precisamos disso. Então, vamos remover essa condição if e salvar esse arquivo. Agora, vamos adicionar rapidamente o botão giratório de carregamento no local desse texto de carregamento Então, vá para o carregamento do dot IO slash CSS. A partir daqui, temos 12 carregadores CSS gratuitos básicos em SDML e CSS puros Vamos supor que queremos exibir esse carregador. Clique nele e aqui temos a marcação SDML na parte inferior e os estilos CSS na Copie essa marcação STM e, na pasta de componentes, criaremos mais uma pasta chamada Common e, dentro dela, criaremos um novo componente específico para A razão pela qual adicionamos esse carregador nessa pasta comum é que esse carregador não é específico apenas para a página de administração Podemos usar o carregador em páginas diferentes. Depende totalmente de nós. Primeiro, aqui adicionamos um clichê e colamos aqui, nossa E no local dessa classe, adicionaremos o nome da classe. Agora, no topo, vamos importar o carregador de arquivos CSS dot CSS. E para isso, criamos um novo arquivo em pasta comum, loader dot Css Agora, de volta ao navegador, copie esses estilos daqui e cole-os no arquivo css do loader dot Agora podemos ver que atualmente a cor do nosso carregador é branca. Podemos mudar isso a partir daqui. Vamos mudar para um CD CD CD, que é do tipo cinza. Salve esse arquivo e também salve esse componente do carregador. E agora vamos exibir esse carregador. O local desse texto de carregamento. Remova isso e adicione aqui o componente do carregador. Salve as alterações e dê uma olhada e veja aqui que estamos recebendo esse carregador após essa entrada Vamos movê-lo para a nova linha. Então, aqui podemos simplesmente embrulhar este carregador com Du. Salve as alterações e veja, aqui temos o carregador em uma nova linha Isso parece muito bom. 95. Tratamento de erros: Quando trabalhamos com a API, é importante lidar com erros porque, se conexão com a Internet dos usuários acabar ou eles tentarem obter dados indesejados, teremos que mostrar um erro. Agora, antes disso, aqui eu noto algo. Em vez de envolver esse componente do carregador em Dieu, podemos adicionar o elemento JSX do carregador Então, componente do carregador de canetas, e aqui embrulhamos esse molde com outro par. Salve esse arquivo e volte para o componente do vendedor. Aqui, após esse estado de carregamento, adicionamos mais uma variável de estado de uso chamada errors e definimos erros. E aqui passamos uma string vazia como valor padrão. Agora, como você deve saber quando estamos trabalhando com promessas, podemos usar o método catch para tratamento de erros. Deixe-me te mostrar. Então, após esse método then, adicionamos o método cache, e aqui obtemos o objeto de erro, a função de erro e vamos simplesmente registrar esse objeto de erro no console. Basicamente, quando temos um erro nessa promessa ou nesse método then, obtemos esse erro nesse objeto de erro. Então, vamos cometer um erro de digitação aqui na API, salvar as alterações e dar uma olhada Abra o console e veja, obtemos um objeto de erro com vários detalhes. Nessa propriedade de mensagem, recebemos a mensagem de erro e, nessa resposta, recebemos a mensagem de erro do servidor. Atualmente, essa API JCNPlaceholder não está enviando nenhuma mensagem, mas se tivermos nossa própria API, ela poderá retornar nossa mensagem de erro personalizada Vamos exibir essa mensagem em nossa tela. Aqui, adicionamos cod blog. Primeiro, queremos definir o carregamento quedas porque, mesmo se recebermos um erro, ainda queremos fazer o carregamento para quedas e, por fim, configuramos os erros para a mensagem de pontos de erro Agora, vamos adicionar uma condição após esse carregador. Se houver erros disponíveis , retornamos a tag de ênfase e aqui simplesmente exibimos a variável de erros. Salve as alterações e dê uma olhada. Veja, aqui estamos recebendo esse erro. Agora, vamos remover o Tipo da URL da API, salvar esse arquivo e ver aqui obtemos nossos dados. Portanto, está funcionando bem. Você pode ver como é simples exibir carregador e os erros com a chamada de API Só precisamos entender o básico. 96. Promessa com espera assíncrona: Agora, vamos ver rapidamente como podemos lidar com promessas e erros com uma espera de sincronização Então, por enquanto, eu comento esse código e, após nosso efeito de uso, criamos uma nova função chamada fetch sellers, função de erro E dentro disso, adicionamos essa expressão daqui. E também na parte superior, adicionamos set is loading para true. Agora, como sabemos, essa expressão retorna nossa promessa. Então, adicionamos aqui await e, para usar await, temos que tornar nossa função assíncrona Agora, vamos armazenar esse valor em uma variável chamada resposta. E depois disso, simplesmente copiamos nosso código do método then e o colamos aqui. Agora, vamos chamar essa função em efeito de uso. Salve as alterações e dê uma olhada. Veja, está funcionando. Agora vamos ver como podemos lidar com erros. Portanto, para tratar o erro como uma espera, temos que usar o bloco try and catch. Então, escrevemos try catch, selecionamos essa sugestão e obtemos esse bloco de tentativa e cache. Esse é o poder da extensão ES seven. Agora vamos mover esse código no bloco Try e mover esse conjunto para fora desse bloco. Agora, no bloco catch, simplesmente copiamos o código desse método catch. Alteramos o nome desse atributo de erro para error. Então, em palavras simples, se algo deu errado neste bloco seco, esse bloco de esboço será executado. Vamos fazer um erro de digitação aqui, dizer as alterações e reprimir Veja, aqui temos esse erro. Então é assim que lidamos com erros e promessas no Awit assíncrono. Mas aqui podemos comparar esses dois códigos. Podemos ver que nosso código anterior parece mais sustentável e organizado do que esse ávido assíncrono Em nosso projeto Movie Maniac, erros, e é por isso que nosso código parece mais simples com um zincavt Portanto, no restante desta seção, usaremos esse método de banda. Você pode usar o que quiser, dependendo totalmente de você. 97. Adicionando um novo vendedor: Agora, vamos ver como podemos adicionar ou criar novos dados de vendedores. Então, primeiro de tudo, após essa entrada, adicionamos um botão chamado Ed seller. Também adicionamos aqui ao clicar no evento e passamos aqui o nome da função, adicionamos vendedor. Agora vamos definir essa função de adicionar vendedor. Então, const, adicione vendedor, função de seta e, dentro dessa função, primeiro, temos que criar um novo objeto de vendedor Portanto, const, novo vendedor é igual a objeto. E primeiro de tudo, temos que passar o nome e definir esse estado de nome. Aqui, chave e valor, ambos os nomes são iguais, então podemos removê-los. Aqui, também precisamos adicionar o ID porque estamos adicionando esse ID como chave em nossa lista. Então, aqui definimos o ID para o comprimento do ponto da matriz do vendedor mais um. Agora, existem duas maneiras de lidar com dados no site enquanto enviamos ou atualizamos dados usando a API. Primeiro, podemos atualizar nossos dados ou a interface do usuário no navegador. Depois disso, podemos chamar API para adicionar ou atualizar esses dados. Esse método é chamado de atualização otimista. Agora, há uma segunda maneira pela qual primeiro chamamos a API para adicionar ou atualizar os dados e, depois disso, atualizaremos nossa interface do usuário. Esse segundo método é chamado de atualização pessimista. Quase todos os sites modernos usam uma abordagem otimista porque são rápidos e mais fáceis de usar em comparação com a abordagem pessimista Por exemplo, pense em um site de mídia social. Se você gosta de uma postagem, ela deve exibir imediatamente a curtida. Se usarmos uma abordagem pessimista, navegador chama a API para adicionar curtidas nessa postagem e, depois disso, ela mostrará ao usuário qual é a mais rápida Claro, otimista. Aqui, também usamos uma abordagem otimista. Antes de chamarmos a API, definimos os vendedores como uma matriz aqui, primeiro adicionamos os dados dos vendedores usando o operador de spread e, depois disso, adicionamos nosso novo objeto de vendedor Ou podemos adicionar esse novo objeto de vendedor primeiro. Eu acho que isso é mais benéfico. Salve as alterações e dê uma olhada. Escreva o nome aqui e clique em adicionar vendedor. Veja, aqui temos um novo vendedor, então está funcionando. Agora, vamos chamar a API para adicionar ou criar novos dados. Então, usamos aqui o método axios dot post para criar os novos dados Agora vamos copiar essa API da nossa função fetch e passá-la aqui Agora, depois disso, no segundo parâmetro, temos que passar nosso novo objeto vendedor porque queremos adicionar esse objeto. Observe que essa API de postagem não usará nosso ID porque o ID é sempre gerado pelo back-end. Mas aqui, estamos usando ID em K, e é por isso que adicionamos esse ID em nosso objeto. Eu vou te mostrar isso em apenas um segundo. Então, como sabemos, essa expressão retorna uma promessa. Então, adicionamos o método, e aqui obtemos a resposta e a resposta tem os novos dados do usuário que obtemos do servidor. Dentro disso, adicionamos vendedores de conjuntos e, aqui, primeiro, adicionamos esses dados de pontos de resposta e, depois disso, adicionaremos aqui vendedores antigos usando o operador de spread Salve as alterações e dê uma olhada. Escreva aqui o nome e clique em adicionar vendedor. No painel Rede, podemos ver aqui a nova solicitação. Vamos ver isso. E aqui no cabeçalho, temos o URL da solicitação, o método de solicitação para postar e o código de status para 201, que é usado para dados criados com sucesso. Agora vamos ver a carga que enviamos com a API e, na pré-visualização, obtemos o objeto do usuário, que essa API retorna Lembre-se de que essa API de espaço reservado JSON é um back-end falso apenas para aprender a Ele sempre retornará um novo objeto de usuário com ID 11. Deixe-me te mostrar. Novamente, clique no vendedor de anúncios. Aqui na carga, vemos o ID 12, que estamos enviando e, na pré-visualização, podemos ver que obtemos o ID 11 Não importa quantos registros enviemos, ele sempre retornará um objeto com ID 11, e é por isso que recebemos um erro no Console. Crianças com a mesma chave 11. Agora, nesta API, precisamos lidar com nosso erro. Então, para isso, o que usamos, certo, usamos o método catch. Aqui obtemos o objeto de erro e, primeiro, definimos os erros como error dot Message. E depois disso, precisamos redefinir nossa lista de vendedores para a lista anterior. Por exemplo, aqui adicionamos um novo vendedor. Agora, antes de chamar essa API, estamos definindo esse novo vendedor em nossa lista. Mas se, por algum motivo, recebermos um erro ou ficarmos offline , teremos que restaurar nossa lista. Então, defina os vendedores e aqui passamos diretamente a matriz de nossos vendedores Salve as alterações e dê uma olhada. No NetworkTab, deixamos nosso site offline, agora adicione o nome e clique em Adicionar vendedor Veja, por apenas um segundo, vemos nosso nome, mas depois disso, restauramos nossa lista para a lista anterior porque temos um erro de rede. Então é assim que fazemos uma solicitação de postagem. Você pode ver como é simples. 98. Excluindo o vendedor: Agora vamos ver como podemos excluir vendedor individual da nossa lista. Então, primeiro de tudo, temos que adicionar um botão de exclusão para cada nome de vendedor. Mas antes disso, vamos configurar nosso aplicativo sem aceleração Agora, aqui em nossa função de mapa, envolvemos essa tag de parágrafo com Du e, no final, adicionamos um botão chamado Excluir. Salve isso e obteremos um botão para cada vendedor. Mas isso parece um pouco feio. Em vez de mostrar em Du, podemos usar tab aqui. Antes dessa lista, adicionamos uma tabela e, dentro dela, queremos o corpo. Agora vamos mover nossa lista para dentro desse corpo de chá e, no lugar dessa dupla , adicionamos TR para tabelas E envolvemos isso na etiqueta TD. Então, adicionamos vários cursores usando Alter plus click ou Option plus click e adicionamos aqui TD e vamos mover essa tag TD de fechamento no final. E, finalmente, temos que adicionar a chave à nossa tag principal, que está dentro dessa tag TR. As mudanças e dê uma olhada. Veja, aqui temos o botão de exclusão em uma linha e com o mesmo espaço. Mas aqui, temos esse preenchimento extra. Então, em nossa tag TD, removemos essa tag de parágrafo. Nós não queremos isso. Salve isso e veja, obtemos a lista perfeita. Agora, vamos adicionar uma funcionalidade atrasada. Então, aqui neste botão, adicionamos o evento de clique e passamos aqui, excluímos a função do vendedor. Mas aqui, precisamos passar a ID atual do vendedor porque, ao usá-la, excluímos nosso vendedor. Então, como podemos passar por isso? Certo, adicionamos aqui a função de seta e, depois disso, podemos passar aqui o ID do ponto do vendedor. Simples assim. Agora, vamos definir essa função, excluir o vendedor. Aqui temos a função ID e seta. Aqui, primeiro temos que exibir a alteração da interface do usuário e, depois disso, chamaremos a API para exclusão. Você pode pausar esta lição e começar a fazer isso sozinho, ou pode acompanhar Agora, como sabemos, usamos o método de filtro para excluir. Filtro de pontos para vendedores. Dentro disso, pegamos cada vendedor e aqui passamos a condição como ID, não igual à Agora, esse método de filtro retornará uma nova matriz, para que possamos passá-la diretamente para a função set sellers Envolvemos isso com parênteses e adicionamos os vendedores do conjunto. Agora, vamos chamar a tarefa de atraso de queda da API. Nossa API deve ter essa aparência. Se quisermos remover o vendedor que tem iDFi, no final desta API, adicionaremos pi Axios dot Delight. Aqui adicionamos essa API em vectis e, no final, adicionamos slash Dollar Calipacket e aqui adicionamos Agora, depois de excluir isso, não queremos fazer nada porque já removemos esse objeto da nossa lista, então não precisamos do método then, mas precisamos do método cach para nosso tratamento Assim, podemos copiar esse método de captura da função do vendedor de anúncios e simplesmente colá-lo aqui. Portanto, se tivermos algum erro , ele restaurará a lista do vendedor. Salve as alterações e dê uma olhada. Clique em excluir e veja-o removido daqui. Além disso, na guia Rede, temos uma solicitação e, em seu cabeçalho, temos um método para excluir e, em resposta, não recebemos nada. Agora vamos verificar o tratamento de erros. Então, adicionamos aqui um erro de digitação, salvamos esse arquivo e clicamos em excluir , recebemos um erro e nossa lista também é restaurada. Portanto, também está funcionando. Agora, antes de esquecermos de remover esse erro de digitação, vamos corrigir isso 99. Exercício para chamar API: Agora é hora de fazer um pouco de exercício. Então, à medida que adicionamos a funcionalidade Excluir, quero que você adicione a funcionalidade de atualização. Portanto, para cada vendedor, temos o padrão de atualização e, quando clicamos nele, alteramos o nome do vendedor para nome e atualizamos no final. Simples assim. Deixe-me dar uma pequena dica. Nossa expressão Axios é assim. Usamos seu método de correção porque estamos alterando apenas um detalhe. Agora, esse vendedor atualizado é o objeto do vendedor no qual atualizamos o nome atual do vendedor. Então, eu quero que você experimente este exercício porque praticar sozinho o tornará um desenvolvedor melhor. Então, experimente e veja a solução. 100. Solução atualizando o vendedor: Agora, vamos ver a solução desse exercício. Primeiro, vamos adicionar o botão Atualizar para cada vendedor. Então, antes desse botão de exclusão, tínhamos uma tag TD e, dentro dessa tag, adicionamos um botão chamado Atualizar. Agora, vamos também passar evento onClick e passar aqui a função chamada atualizar vendedor E aqui queremos passar o ID. Então, função de seta e passe o ID do ponto do vendedor. Agora, vamos definir essa função de atualização do vendedor. Portanto, const update seller é igual a aqui obtemos ID, Agora, dentro dessa função, primeiro crie um objeto de vendedor atualizado. Portanto, const, vendedor atualizado é igual a objeto. Agora, aqui queremos adicionar todos os outros detalhes sobre o vendedor atual. Portanto, no local dessa identificação, precisamos dos detalhes completos do vendedor. Por isso, alteramos esse ID de ponto do vendedor para vendedor, que é o objeto atual do vendedor. Agora vamos colocar o objeto do vendedor aqui. Então, agora podemos adicionar detalhes completos do vendedor usando o operador de spread. E depois disso, substituiremos o nome. Então, nomeie o nome de dois pontos do vendedor, que é o nome atual mais o espaço atualizado em códigos duplos. Agora, atualizamos o objeto do vendedor, mas precisamos substituir nossos detalhes antigos do vendedor por esses novos detalhes em nossa matriz de vendedores Não se confunda, veja isso. Então, aqui adicionamos o mapa de pontos dos vendedores. E dentro disso, obtemos cada função de seta do vendedor, e aqui passamos a condição se ID do ponto for igual ao ID do ponto do vendedor, que estamos atualizando Se for verdade, retornaremos esse objeto de vendedor atualizado. Caso contrário, escrevemos sobre o mesmo objeto do vendedor. Simples assim. Agora, vamos salvar essa matriz como nossos vendedores. Então, envolva essa matriz com parênteses e adicionamos aqui os vendedores do conjunto Se você estiver confuso com esse uso direto, poderá armazenar essa matriz em uma variável separada e depois passá-la aos vendedores do conjunto Depende totalmente de você. Salve as alterações e clique em Atualizar e veja aqui que obtemos esse nome atualizado, o que significa que está funcionando. Então, nossa metade da tarefa está concluída e agora temos que chamar apenas a API. Então, aqui adicionamos o Axios e usamos o método patch e passamos aqui nossa API Então, vamos copiar isso da função excluir vendedor e colar aqui. Agora, no local dessa identificação, estamos no Seller Dot ID. E no segundo parâmetro, passamos nosso vendedor atualizado. Agora, depois de concluir essa chamada de API, novamente, não queremos fazer nada, então não precisamos do método then, mas precisamos do método cache. Então, vamos copiar esse método de captura. E cole aqui. Salve as alterações e dê uma olhada. Clique em Atualizar e está funcionando. Podemos ver, em resposta, que recebemos o nome atualizado do servidor. Agora vamos verificar se há erros. Então, cometemos um erro de digitação aqui e salvamos isso. Clique em Atualizar e veja aqui que obtemos um erro e nossa lista foi restaurada com dados antigos. Portanto, também está funcionando. Agora podemos remover esse erro de digitação. 101. Criando uma variável axios para solicitações HTTP: Então, aqui, em nosso aplicativo, sempre que estamos fazendo uma solicitação de API, toda vez que precisamos escrever nosso URL completo, que possamos definir nosso URL base para esse aplicativo. E depois disso, só precisamos escrever para os usuários. Deixe-me mostrar o que quero dizer. Então, nessa pasta de origem, criamos uma nova pasta chamada Utils. Dentro dessa pasta, criamos um novo arquivo chamado API ds client dot js para criar SDDPRquest Então, dentro deles, primeiro, inserimos Xos a partir de XOs. Depois disso, escrevemos Xos dot create agora nesta função, temos que passar nosso objeto de configuração. E nesse objeto, temos a propriedade de URL base. E aqui, podemos passar nossa URL base. Então, volte ao componente do nosso vendedor e copie esse URL base, que é o mesmo em todas as APIs, e cole aqui. Se você está trabalhando em um projeto diferente, então você tem que passar aqui você está de volta e o URL. Aqui, também podemos passar nossos cabeçalhos de API, que queremos enviar com nossa solicitação de API Novamente, isso depende da API. Agora, isso retornará a instância para chamar a API. Vamos exportar isso como padrão. Salve esse arquivo e, agora quando quisermos fazer uma solicitação de API com XOs, simplesmente inserimos essa instância e fazemos o mesmo que fazemos com os XOs originais. Então, voltando ao componente do vendedor, e em vez de importar o Axios original, importamos o cliente de API a partir daqui, colocamos duas pastas, Utils e Agora, no lugar do Axios, usamos o cliente API Então, pressione Control plus D ou Command plus D várias vezes e adicione aqui o cliente de API. Agora, em vez do URL completo, nós apenas passamos aqui os usuários. Portanto, use esse URL base e, com a edição com vários cursores, remova todo esse URL base Salve isso e veja se funciona da mesma forma que antes. Portanto, esse cliente de API funcionará da mesma forma que o Axios, mas não precisamos passar baseUrl para todas as E por causa de recursos como esse, maioria dos desenvolvedores prefere usar o Axios em vez do método patch Esses são os conceitos básicos de como chamar uma API para lidar com erros e um carregador de exibição À medida que o react cresce, muitas bibliotecas surgirão nesse cenário, mas os conceitos básicos de chamar uma API permanecerão os mesmos. Portanto, selecionar uma biblioteca depende inteiramente de você. 102. Seção 10 - Aplicativo de comércio eletrônico do Projeto 03: Bem-vindo à Seção dez do curso Ultimate react. Nesta seção, vamos construir nosso terceiro projeto, que é o aplicativo de comércio eletrônico. Neste projeto, tentei abordar todos os conceitos importantes, úteis e avançados que você precisa aplicar em aplicações do mundo real. Então, esse será um grande projeto em seu portfólio. Você pode ver uma bela landing page deste site. Depois disso, temos o roteamento e isso nos leva à página de produtos Aqui temos a lista de todos os produtos com recurso de rolagem infinita De cima para baixo, também podemos classificar nossos produtos por preço e classificação. No sideware, temos algumas categorias, e aqui temos apenas produtos dessa categoria Agora, se clicarmos em qualquer cartão de produto, obteremos uma página detalhada do produto, que tem esse seletor de imagens, e também aqui podemos adicionar um item ao nosso cartão com a quantidade desejada E a parte bonita é que esse site é dinâmico, o que significa que todos esses dados vêm do Ben real que eu criei para este projeto. Agora, no momento em que adicionamos um item ao cartão no Nebr, podemos ver aqui que obtemos vários itens em nosso cartão Agora, na página do cartão, obtemos os detalhes do cartão nesta tabela simples. A partir daqui, também podemos alterar a quantidade de itens. Com essa mudança, essa tabela de faturas será atualizada e obteremos o custo final na parte inferior. Podemos verificar nosso pedido e nosso CAT ficará vazio, e podemos ver os detalhes do pedido na página Meu pedido. Portanto, é um projeto importante, mas não difícil , porque concluiremos esse projeto passo a passo. Muitos desenvolvedores acham difícil um grande projeto porque tentam criar tudo de uma só vez. E é por isso que eles acham difícil um projeto simples. Portanto, neste projeto, também tentaremos criar nossa interface de usuário primeiro e, depois disso, conectaremos nosso aplicativo ao back-end do node JS. Então, estou muito empolgado com esse projeto e espero que você também esteja. Então, vamos mergulhar nisso. 103. Configurando o estilo do projeto e do layout: Vamos começar com o novo projeto de frase. Então, abra a pasta na qual você deseja trabalhar , abra o terminal ou o prompt de comando nessa pasta. E aqui, NPM, crie branco, o mais tardar em vermelho, e pressione Enter Agora, aqui adicionamos o nome do nosso projeto, que é card Wish. Você pode usar o que quiser. Eu gosto desse nome. Agora selecione a estrutura que é react, e aqui temos que selecionar a linguagem, que é JavaScript. Vamos entrar nesse projeto em CD, Cartwis, e apertar Enter Agora escreva NPM install para instalar todos os pacotes. Bom. Esta pasta em nosso código VS. Então, ponto de código. Vamos fechar esse terminal. Não precisamos disso e também fechamos esta pasta. Agora, vamos verificar se nosso projeto está funcionando ou não. Então, abra o terminal por Control plus BT ou Command plus BT e escreva NPM run Down. Pressione Controle ou comando e clique neste link, e ele está funcionando corretamente. Agora, vamos ver alguns estilos e layouts básicos para nosso projeto. Portanto, temos duas seções em nosso aplicativo. primeira é, obviamente, a Navbar, e a segunda é a seção principal de roteamento Então, aqui, vamos abrir o componente do aplicativo e, primeiro, remover todo o código e simplesmente adicionar aqui o código padronizado Agora, vamos definir o layout do nosso site. Então, primeiro de tudo, adicionaremos aqui o nome da classe ao aplicativo. Agora, dentro disso, temos para NaBr, adicionar a tag Nau e passar aqui Agora, em seguida, adicionamos a tag principal e, dentro dela, executaremos todo o roteamento. Agora vamos adicionar estilos para esse layout. Na parte superior, importamos o arquivo CSS de pontos do aplicativo Period Slash App. Salve esse arquivo e abra o arquivo css do app dot. Vamos remover todos os estilos daqui e adicionar o aplicativo de pontos. Queremos definir nosso aplicativo em linhas. Portanto, usamos aqui display para avaliar e classificar as linhas do modelo em um pixel para a primeira seção e Auto para nossa seção principal. As mudanças e C, colocamos nosso layout no meio. Então, vamos remover os estilos padrão, que adicionamos ao nosso projeto. Então, abra o arquivo CSS de pontos de índice e vamos remover todos esses blocos. Nós não precisamos disso. Em primeiro lugar, tínhamos colchetes em estrela ci, margem a zero, preenchimento a zero e tamanho da caixa à caixa Agora, no corpo, adicionamos o tamanho da fonte a 16 pixels, cor de fundo dois tem F seis, FFA Salve as alterações e dê uma olhada. Veja, aqui temos nosso layout, mas nossa fonte parece um pouco feia Vamos adicionar uma fonte rapidamente, abrir o site do Google Fonts e já selecionamos nossa fonte, que usamos no projeto anterior. Vá para a seção Importar, copie este CDN de importação Em nosso arquivo CSS de índice na parte superior, colamos esse link CDN Agora, para aplicar a fonte, copiamos a família de fontes e a colamos em nosso estilo corporal. Salve as alterações e dê uma olhada. Agora nossa fonte parece boa. 104. Construindo o componente Navbar: Agora vamos construir nossa Navbar. Então, em vez de escrever todo o código no componente do aplicativo, criaremos um componente separado para nossa Navbar Então, vamos cortar essa barra de navegação daqui e, na pasta de origem, criamos uma nova pasta chamada components Dentro dessa pasta, criamos mais uma nova pasta chamada Navbar E dentro disso, criamos um novo arquivo chamado navbar dot JSX e também criamos mais um arquivo para navbar Agora, em nosso componente, digamos código clichê E na parte superior, não se esqueça de importar o arquivo css de pontos e barras navbar de pontos com pontos Agora, primeiro de tudo, vamos fazer uma marcação para nosso componente Navbar Assim, podemos dividir nosso Nabar em seções. primeira é a parte esquerda do nosso Nabar, que tem o nome do nosso site e uma caixa de entrada com o botão de pesquisa A segunda parte é que temos vários links. Então, no local desta data, colamos nossa tag NOW e atribuímos a ela um nome de classe para Navbar Agora, dentro dessa etiqueta, tínhamos duas dívidas, uma para o lado esquerdo e outra para o lado direito Agora, na primeira dupla, adicionamos H uma tag e passamos aqui o nome da classe para o cabeçalho de sublinhado NaBr. E aqui adicionamos o nome do nosso site Cart Wish. Agora, depois desse H, adicionamos um formulário com o nome da classe, forma de sublinhado NaBr. Eu vou te dizer mais tarde por que adicionamos aqui o formulário. Agora, neste formulário, adicionamos uma entrada com texto digitado e também adicionamos o nome da classe à sublinhado da Barra de Navegação e espaço reservado para pesquisar espaço reservado para E depois disso, adicionaremos um botão com o tipo enviar e atribuiremos o nome da classe, botão de sublinhado da pesquisa e, aqui mesmo, a pesquisa E isso é tudo o que queremos adicionar em nossa primeira parte do NaBR. Adicionaremos a segunda parte, que tem links na próxima lição. Salve as alterações e dê uma olhada. Não recebemos nada porque esquecemos de adicionar nosso componente Nabar em nosso componente de aplicativo Então, no componente do aplicativo, adicionamos aqui a Nova Barra e a importação automática funciona. Salve as alterações e dê uma olhada. Veja aqui que obtemos nossos elementos. Agora vamos adicionar estilos para esses elementos. Portanto, no arquivo CSS de pontos Navbar, adicionamos Navbar e, nos colchetes Ci, primeiro definiremos a exibição para sinalizar, alinhar os itens ao centro e justificar o e justificar Com isso, nossas duas partes se separam uma da outra. Agora preenchendo para zero e 40 pixels e a cor de fundo para branco Depois disso, tínhamos o título de sublinhado Nebr com pontos, colchetes, margem direita de 20 pixels e tamanho da fonte Salve isso e veja aqui nosso rumo. Agora temos que mover esse formulário na mesma linha. Então, para isso, também precisamos usar display flex e alinhar os itens ao centro Então, vamos criar uma classe separada para essas duas propriedades porque elas serão muito usadas em nosso aplicativo. Então, corte essas duas linhas e, no arquivo CSS de pontos de índice na parte inferior, adicionamos uma nova classe chamada Align Center e os dtiles anteriores dentro dela Salve este arquivo e vamos adicionar essa classe primeiro antes nova classe e também para nome da primeira classe devido se alinhe ao centro Salve-os e volte para o arquivo css do Nabart. Agora vamos definir estilos para nosso formulário. Classifique o formulário NebruerScore. E nos colchetes CL, adicionamos largura a 450 pixels, altura a 40 pixels, Bader a um pixel, sólido tem CD CD CD CD, raio de água cinco pixels e preenchimento a três pixels Depois disso, tivemos a barra de pesquisa por pontos, pesquisa por sublinhado, os colchetes de Cali e, dentro deles, adicionamos sinalizadores a um porque queremos que nossa entrada cubra todo o espaço disponível Então, para isso, também precisamos adicionar a classe Align Center ao nosso formulário Salve isso e volte para o nosso arquivo CSS. Aqui, adicionamos altura a 100%, preenchimento a zero e sete pixels, um tamanho a 20 pixels, uma espessura a 500, borda a nenhuma e também contorno a Salve as alterações e dê uma olhada. Deixe-me diminuir o zoom para 100% e ver se está bem. Agora, vamos adicionar estilo a esse botão de pesquisa. Então, adicionamos o botão de sublinhado de pesquisa, colchetes Ci, altura 200%, preenchimento em zero e tamanho da fonte de dez pixels em 20 pixels, espessura fonte em 500, Wer em nenhum , raio da borda Cor redonda com 64, 57f9. Cor para branco e cursor para ponteiro. Salve as alterações e dê uma olhada. Veja, temos nossa barra de navegação esquerda, mas aqui está uma coisa. Todas essas entradas e botões têm uma família de fontes padrão. Eu quero usar nossa fonte para eles também. Então, no arquivo CSS de pontos de índice, mova essa família de fontes dentro de todos esses estilos. Um elemento, um monstro na fonte. Diga isso e veja se isso parece bom. 105. Adicionando links da barra de navegação: Agora, digamos que links em seu NaBr. Então, aqui no segundo dia, adicionamos o nome da classe ao NabrUnderscore Agora, dentro disso, queremos criar links. Então, adicionamos a tag ECA e HF ao has e, dentro disso, adicionamos home E para Imog, adicionamos uma tag de imagem e atribuímos a ela um nome de classe para sublinhado de tinta Agora vamos definir algumas imagens para o nosso projeto. Na pasta de recursos, temos a pasta Project three e, dentro dela, temos ativos. Basta selecionar todas essas imagens e soltá-las em nossa pasta VS code Assets. Agora, no topo, importamos o foguete. A partir daqui, vamos duas pastas até os ativos e cortamos o foguete, E vamos simplesmente passar esse foguete aqui. Salve as alterações e dê uma olhada. Aqui temos o que queremos. Agora, vamos adicionar estilo a esse link. Então, primeiro, passamos o nome da classe nessa tag âncora e definimos como Align underscore center e também adicionamos Align underscore center antes dos links de sublinhado Navbar para alinhar itens Salve-os e, no arquivo css navbar dot na parte inferior, adicionamos colchetes Navbar underscore Links Cl, um tamanho Depois disso, adicionamos links de pontos NabrUnderscore, Aqui, temos como alvo a tag Anger e, dentro dessa margem, 15 pixels. E, por fim, adicionamos o ponto Link, sublinhado, iMogliBackets, largura de 25 pixels e margem esquerda de cinco pixels e Diga as mudanças e veja aqui que obtemos um bom link. Agora vamos definir alguns estilos básicos para todas as tags âncora. Portanto, no arquivo CSS de pontos de índice, adicionamos Calibackets âncora, tamanho da fonte a ser herdada e peso da fonte a 500 fonte Decoração de texto para não, cor, para herdar e cursor para ponteiro Veja as mudanças e dê uma olhada. Veja, aqui temos nosso estilo, mas acho que nosso tamanho de fonte não é aplicado. Então, eu os inspeciono e vejo aqui que não obtemos a propriedade do tamanho da fonte Provavelmente eu escrevo o nome da classe errado. Então, no componente Nava, aqui podemos ver, eu tenho que adicionar sublinhado NBR. Desculpe por isso. Salve isso e veja se ficou muito bom. Agora você pode pensar quando adicionamos outros links, para que possamos criar um componente para esse link individual. Então recorte esse link aqui e na pasta Nabar, criamos um novo arquivo chamado ink with icon JSX e também criamos um novo arquivo para link with Agora, às vezes, você pode perguntar por que criamos cada arquivo CSS de componente separadamente. O motivo é que, se criarmos um arquivo CSS separado para cada componente, poderemos usar esse componente diretamente em outros projetos com seu CSS. Aqui, adicionamos nosso código padronizado do RAFC e, na parte superior, importamos tinta de barra de período Bom. Agora, no local desta entrega, colamos nosso link. Além disso, vamos recortar esse estilo de imagem de link do Nabar e colá-lo em nosso link com o ícone do arquivo CSS Agora, vamos tornar esse componente reutilizável. Então, aqui precisamos de três adereços, primeiro título do link, que é esta casa depois disso, link, que podemos passar neste HF, e por último, precisamos do Imog que usamos nesta Vamos substituir os valores estáticos por nossos adereços. Título do link e imagem. Salve este arquivo e, agora, no componente Nebar, adicionamos aqui o link com o componente ícone, e aqui passamos nossos adereços Então, título para casa, link para frente, barra e Imoge para Agora vamos duplicar esse link mais cinco vezes. E para links diferentes, precisamos de Imogs diferentes Então, precisamos também inserir isso na parte superior. Vamos também duplicar essa declaração de entrada mais cinco vezes e alteramos esse título para estrela e a imagem para PNG com pontos estelares brilhantes Em seguida, temos o botão ID e o botão ID da imagem. Em seguida, temos memorando e imagem, ponto de nota PNG. Em seguida, peça uma imagem para empacotar. E, finalmente, temos a imagem de log para registrar o PNG de pontos. Agora, na parte inferior, alteramos o título do nosso segundo link para produtos, link para produtos de barra e a imagem para estrela Em seguida, título para login, Links Login e botão Imog to ID Em seguida, temos o título para se inscrever, link para a barra de inscrição e Imoge Em seguida, temos o título para M Orders, link para cortar My Orders e Imoge to order E, finalmente, temos título para sair, link para barra, sair e Imoge para fazer login Salve as alterações e dê uma olhada. Veja, nós temos esses lindos links. Agora, só precisamos adicionar o link do carrinho, que é um pouco diferente desses links porque precisamos adicionar nossa contagem de cartões. Então, aqui adicionamos mais uma etiqueta de carro, HRF ao carrinho de barras e aqui passamos o nome da classe para o centro da linha Agora, dentro deles, passamos o nome do nosso link, que é cart. Para contar, adicionamos um parágrafo e o nome da classe ao centro da linha e às contagens de sublinhados do carrinho E dentro disso, passamos nosso número de contagem, que é zero. Salve isso e vamos adicionar estilo a isso. Então, no arquivo CSS de pontos Navbar na parte inferior, adicionamos contagens de sublinhados de cartões, colchetes Cl e, dentro dele, adicionamos conteúdo de justificação ao centro, e é por isso que adicionamos alinhamento da classe central adicionamos contagens de sublinhados de cartões, colchetes Cl e, dentro dele, adicionamos conteúdo de justificação ao centro, e é por isso que adicionamos alinhamento da classe central antes da contagem de cartas. Depois disso, largura de 20 pixels, altura de 20 pixels, raio do pedido de 200% para o círculo completo Cor de fundo para 64, 57f9, cor para Um tamanho para 15 pixels e margem esquerda para cinco pixels. Aproveite as mudanças e dê uma olhada. Veja, aqui temos nossas contas. Então você pode ver como essa barra de navegação está linda. Eu sei que a parte de estilizar é um pouco chata, mas também é uma parte necessária de qualquer projeto Então, temos que fazer isso. E enquanto estamos fazendo isso, vamos simplesmente fazer isso com alegria 106. Construindo a seção de heróis: Agora, vamos criar nossa seção de heróis para a página de destino. Esta seção de heróis é a primeira coisa que o usuário verá em nosso site. Então, temos que tornar isso muito bom. Então, primeiro de tudo, aqui criamos uma nova pasta chamada home, na qual armazenaremos todos os nossos componentes relacionados à página inicial Portanto, crie um novo arquivo chamado homepage dot JSX. E aqui adicionamos código padronizado usando o RAFC. Você notou como essa reação se torna rápida e simples quando criamos apenas dois aplicativos? Imagine que você trabalha com cada projeto com essa intensidade, até onde você pode ir na carreira de desenvolvimento web. É só uma questão de tempo. Então, em nossa página inicial, queremos exibir a primeira seção de heróis, depois temos produtos em destaque e, em seguida, também a seção de heróis O motivo pelo qual não criamos arquivo CSS de pontos na página inicial é porque não queremos adicionar nenhum estilo à nossa página inicial Tudo o que você faz parte são componentes separados. Na pasta inicial, criamos um novo arquivo chamado herosection Além disso, criamos outro arquivo, Herosection dot JSX. Adicione o código padrão aqui e, na parte superior, importamos a seção hero, esse Bom. Agora, no lugar deste de, adicionamos uma seção e atribuímos a ela um nome de classe, seção de sublinhado do herói Precisamos de duas partes. Primeiro para detalhes e segundo apenas para imagem. Portanto, crie D com a classe Align underscore center times dois. Bom. Agora, na primeira parte, adicionamos dois com nome da classe, título do herói e, dentro dele, escrevemos pelo iPhone 14 P. Depois disso, adicionamos um parágrafo e damos a ele um nome de classe, subtítulo de sublinhado de herói E passamos aqui dummiteg para legenda, então escreva Lorem, 15, e pressione tab E depois disso, adicionamos uma etiqueta âncora ao botão By now e atribuímos a ela o nome da classe, hero underscore ink Agora, na segunda parte, temos que adicionar a tag de imagem, fonte do iPhone e atribuir um nome de classe à imagem de sublinhado do herói Agora, vamos importar essa imagem na parte superior. Então, eu importo o iPhone daqui, colocamos duas pastas ativos iPhone 14 prob P. Salve isso e vamos adicionar o componente de seção herói em nosso componente de página inicial Salve isso e também temos que adicionar nosso componente inicial em nosso componente de aplicativo. Você pode ver como a Autoiport agiliza nosso processo. Diga as mudanças, e aqui temos um erro. Desculpe, por engano, eu adicionei o arquivo css de pontos da seção inicial. Então, em nosso componente de seção de heróis, mudamos isso para arquivo css de pontos da seção de heróis. Diga as mudanças e dê uma olhada. Não conseguimos ver nada por causa da nossa imagem grande. Então, vamos adicionar estilo à nossa seção de heróis. No arquivo CSS de pontos da seção hero, primeiro adicionamos a seção de sublinhado Hero, colchetes Gully e, dentro dela, configuramos a exibição como GED, configuramos a exibição como GED colunas temporárias do GED um FR e um FR para Altura de 550 pixels, preenchimento de zero e 60 pixels para esquerda e direita Cor de fundo para preto e cor do texto para branco. Agora, depois disso, adicionamos seção de sublinhado do herói, colchete angular Aqui, temos como alvo o Du Culiacket e adicionamos conteúdo justificado ao centro, direção flexível à coluna e linha de texto ao e Aqui podemos usar a propriedade flexbox porque já definimos a classe central Align para esses Agora, depois disso, adicionamos estilo por título de herói, então pontuamos o título de Hero sublinhado e o tamanho da fonte em 45 pixels, a espessura da fonte em 700 e a margem inferior em 15 pixels Depois disso, recebemos o subtítulo Hero underscore. E dentro disso, adicionamos tamanho da fonte a 24 pixels, margem inferior, 232 pixels e largura a 70% Agora, após esse subtítulo, temos nosso link, então o link dot Hero underscore E dentro disso, adicionamos preenchimento a 16 pixels e 32 pixels. Transformação de texto em maiúsculas com espaçamento entre letras de 1,5 pixel, espessura da fonte até 700, borda em dois pixels, sólido como FFF, raio da borda em 32 pixels, fundo em branco e cor borda em dois pixels, sólido como FFF, raio da borda em 32 pixels, cor de fundo em branco e cor em preto. Estou indo um pouco rápido para a seção de estilo porque não quero entediar você explicando cada um dos Além disso, não quero usar estilo simples, porque se nosso aplicativo tem boas funcionalidades, mas o estilo não é bom , seu projeto pode parecer um pouco chato Agora, vamos adicionar o efeito O para esse link. S dot Hero underscore Link, coluna O. E dentro desse fundo, cor para transparente e cor para branco Também podemos adicionar aqui a transição a todos os 0,3 segundos de entrada para suavizar o efeito. Agora vamos definir o estilo da nossa imagem de herói. Então, dote a imagem de sublinhado do Hero e, dentro dos colchetes, adicione a altura a 500 pixels e também queremos adicionar o efeito de foco para esta A transição para todos os 0,3 segundos é de entrada e saída. Depois disso, adicionamos a imagem de sublinhado do herói, coluna O dentro dela, simplesmente transformamos para a escala 1,05, salvamos as alterações e damos uma olhada Veja como isso parece lindo. Eu gosto muito desse estilo. Vamos tornar esse componente da seção de heróis reutilizável. Então, no componente da seção de heróis, quais adereços queremos. Primeiro, queremos título, depois subtítulo, tinta para B agora e imagem para mostrar a imagem do herói Agora, vamos substituir essas cordas por nossos adereços. Então, título com título Dmitex para subtítulo. E aqui passamos tinta em HRF, e finalmente temos imagem, substituímos esse iPhone por imagem Vamos lá no topo, pegaram essa importação daqui. Não precisamos disso neste componente. Salve isso e, no componente inicial, adicionamos essa importação na parte superior. Além disso, importamos mais uma imagem do Mac de duas pastas até os ativos e, aqui, vamos ver o nome da nossa imagem. Selecione este sistema Mac, pressione F dois e copie esse nome daqui. Eu uso esse truque porque não quero cometer erros ao importar imagens Então, podemos simplesmente colá-lo aqui. Agora vamos passar nossos adereços neste componente da seção de heróis. Então, primeiro, o título é igual ao do iPhone 14 P. Subtitle para experimentar o poder do iPhone 14 mais recente com nossa câmera mais profissional Por enquanto, basta encaminhar a barra e a imagem para o iPhone. Diga as mudanças e está funcionando da mesma forma. Agora vamos duplicar esse componente da seção do herói e movê-lo para a parte inferior Agora, no lugar deste título, construímos a configuração definitiva. Para legendas, acrescentamos que você pode adicionar uma tela de estúdio e acessórios mágicos com cores correspondentes à sua bolsa depois de configurar o Mac Mini Novamente, vincule novamente a barra para frente, nós a alteraremos posteriormente e a imagem para Mac Aqui eu percebo que cometi um erro no título do iPhone 14. Eu me certifico de usar legendas longas durante esta gravação, mas cometi um erro no começo Preciso trabalhar na minha digitação, salvar as entradas e dar uma olhada Veja, temos nossas duas seções de heróis. Isso parece muito bom. Agora, na próxima lição, criaremos uma seção de produtos especiais, que adicionaremos entre essas duas seções de heróis. Eu sei que essa é uma pequena lição longa. Você pode fazer uma pausa de cinco a 10 minutos e tomar um pouco de ar fresco, e nos vemos na próxima lição. 107. Adicionando seção de produtos em destaque: Agora, vamos adicionar a seção de produtos em destaque à nossa página inicial. Então, aqui na pasta inicial, criamos um novo arquivo chamado produtos em destaque ponto CSS e também criamos um novo componente chamado produtos em destaque ponto JSX Agora você pode perguntar por que estou criando primeiro o arquivo CSS e depois o arquivo JSX É simplesmente porque, se finalmente criarmos o arquivo CSS, teremos que mudar para o arquivo JSX novamente Então, neste arquivo JSX, adicione nosso código B Blet e, na parte superior, importamos nossos produtos em destaque para o importamos nossos produtos em destaque para Bom. Agora, no local deste de, adicionamos seção com o nome da classe, produtos de sublinhado em destaque Agora, nesta seção, o que queremos. Primeiro, queremos um título, então dois e adicione aqui os produtos em destaque. Agora, depois disso, queremos adicionar três cartões de produtos, então temos que envolvê-los em outro De e dar a ele um nome de classe, lista de produtos em destaque. E sabemos que isso é uma lista, então podemos usar aqui o Flexbox Então, antes desse nome de classe, adicionamos o centro de sublinhado Aline Agora, dentro disso, criamos um artigo e atribuímos a ele um nome de classe, cartão de sublinhado do produto E por enquanto, basta passar aqui o produto. Salve as alterações e dê uma olhada. Desculpe, esquecemos novamente de adicionar nosso componente de produtos em destaque em nossa página inicial Então, entre essas duas seções de heróis, adicionamos nosso componente de produtos em destaque. Salve as alterações e dê uma olhada. Veja, aqui temos nossos produtos em destaque. Agora vamos definir estilos para eles. No arquivo CSS de pontos dos produtos em destaque, primeiro, adicionamos produtos de sublinhado em destaque, colchetes frios e margem de 65 Depois disso, adicionamos produtos de sublinhado em destaque, colchetes angulares e aqui temos como alvo duas tags, que são o nosso título E aqui, um tamanho para 48 pixels, texto alinhado ao centro e a margem inferior para 65 pixels Por fim, vamos definir o estilo da nossa lista de produtos. Então, ponha os produtos sublinhados em destaque, a lista de sublinhados, colchetes e adicione aqui, justifique o conteúdo É por isso que adicionamos a classe Align Center a essa lista. E depois disso, adicionamos Margem, baixo para 65 pixels. Estou novamente dizendo que posso escrever esse CSS porque pratico muito neste projeto. Se eu criar este projeto pela primeira vez , também terei que fazer tentativas e erros para esses blocos. Eu pratico isso porque não quero perder seu precioso tempo tentando e errando com estilos simples Veja as mudanças e dê uma olhada. Veja, temos nossa seção de produtos especiais. Agora, na próxima lição, criaremos um cartão de produto para este projeto. 108. Criando um cartão de produtos: Agora, vamos criar um componente de cartão de produto possamos usá-lo várias vezes. Então, aqui, vamos cortar essa tag de artigo e criamos um novo arquivo chamado product card dot CSS. E depois disso, criamos um novo componente chamado product card dot JSX Vamos adicionar um clichê aqui e, na parte superior, importamos o arquivo CSS do cartão do produto Bom. Agora, no local desta edição, colamos nossa tag de artigo que acabamos de recortar. No cartão do produto, o que queremos? Queremos DuS. Um para exibição, pôster ou imagem do produto e segundo, para detalhes do produto Então, aqui adicionamos Du e damos ele um nome de classe, imagem de sublinhado do produto E dentro desse Du, adicionamos nossa tag de imagem e damos a ela uma fonte, digamos, iPhone e arte para a imagem do produto. Vamos importar essa imagem na parte superior. Então, EmbodiOnef, aqui vamos duas pastas acima dos ativos, barra Agora, aqui está uma coisa. Quero redirecionar o usuário para a página do produto selecionado, na qual o usuário pode ver outros detalhes sobre esse produto Assim, podemos embrulhar essa imagem com a tag âncora. Se quiser saber como estou fazendo isso, deixe-me mostrar que é muito simples. Primeiro, selecione a tag que você deseja embrulhar e pressione Control plus Sift plus P ou Command plus Sift plus P W aqui, envolva com a abreviatura, selecione isso e aqui o nome da tag e Veja, nós entendemos isso. Agora, no HRF, podemos passar como se esse produto fosse um. Essa é a ID do produto. Agora, após essa DU, adicionamos mais uma DU com nome da classe e detalhes do produto sublinhados Dentro delas, primeiro, adicionamos a tag H three e atribuímos a ela um nome de classe, preço de sublinhado do produto E aqui escrevemos dólar 999. Depois disso, criamos mais um parágrafo e atribuímos a ele um nome de classe, título de sublinhado do produto E aqui mesmo, o iPhone 14 Pro. Agora, finalmente, temos uma linha, que tem duas seções. O primeiro tem classificação e contagem de avaliações, e o outro tem o botão do carrinho. Então, criamos uma tag Potter e atribuímos a ela um nome de classe, um centro de linha e um rodapé de informações do produto Agora, dentro disso, adicionamos um DU e damos a ele um nome de classe, um centro de linha. Agora, dentro desse d, precisamos de dois parágrafos, um para classificação e outro para contagem de avaliações. Adicione o primeiro parágrafo e o nome da classe para alinhar o centro e a classificação do produto Você pode ver como a classe central Align é mais útil em termos de centralizar Agora, dentro disso, adicionamos imagem e, na fonte, estrela e arte à estrela também. Aqui escrevemos nossa classificação, 5.0. Agora, após este parágrafo , dê a ele um nome de classe, produto, avaliação de sublinhado, contagem de sublinhados E aqui, 120. E por fim, após esse mergulho, adicionamos o botão aqui e atribuímos a ele um nome de classe, adicionamos ao carrinho. E dentro disso, adicionamos imagem e, na fonte, passamos a cesta e o RT para a cesta. Agora, vamos inserir essas duas imagens na parte superior. Então, duplique essa entrada mais duas vezes, e aqui escrevemos a estrela e nome da imagem em branco dstar dot png E por último, mudamos para cesta e imagem para cesta PNG de pontos. Salve as alterações. E no componente de produtos de recursos, adicionamos o componente de cartão de produto. Agradável. E agora vamos duplicá-los mais três vezes. Salve isso e veja, estragamos nossa landing page Vamos definir um estilo para isso. Então, na pilha CSS de pontos do cartão do produto, primeiro lugar, adicionamos o cartão de sublinhado do produto com pontos Colchetes El e dentro dessa largura até 275 pixels, altura até 330 pixels, margem até 20 pixels, raio de vento até 12 pixels, caixa SDO para RGBA, zero, zero, zero, 0,24 E depois disso, zero pixel para XX, três pixels para o eixo Y e oito pixels para o efeito de desfoque Se você quiser explorar outras sombras de caixa , tenho um site que uso muito quando quero adicionar sombras de caixa Então, na nova guia, pesquise, obtenha o CSS scan. E aqui temos 93 lindas sombras de caixa. E podemos copiar o CSS diretamente clicando nessa caixa. Então você pode marcar este site como favorito. De volta ao nosso arquivo CSS. Aqui, adicionamos a cor de fundo ao branco. Agora, depois disso, adicionamos a imagem de sublinhado do produto pontilhado e, dentro dos colchetes de Cali, adicionamos altura a 200 pixels, alinhamos o texto ao centro e a borda inferior a um pixel, sólido tem if E depois disso, temos como alvo o produto pontual, a imagem de sublinhado e a tag de imagem E dentro dessa altura até 100%. Salve as alterações e dê uma olhada. Veja, nossa seção de imagens está pronta. Agora vamos definir o estilo para essa seção de detalhes. Então, adicionamos aqui os detalhes do produto com pontos e sublinhados. E dentro disso, adicionamos preenchimento de dez pixels para a parte superior inferior e 20 pixels para a esquerda e para a direita Depois disso, direcionamos o produto por pontos, o preço do sublinhado, Calibacket e, dentro disso, adicionamos o tamanho da fonte em 21 pixels e a espessura da fonte Agora vamos adicionar estilo ao produto pontilhado e ao título do sublinhado. E aqui adicionamos um tamanho a 18 pixels e a margem superior a quatro pixels. Salve isso, e ainda assim nosso cartão parece massivo por causa dessa imagem. Então, vamos corrigir isso. Então, aqui adicionamos produto pontilhado, informação de sublinhado, rodapé de sublinhado Ali estão os colchetes, e aqui adicionamos, justificam o conteúdo ao espaço entre e a margem de dez pixels para a parte superior inferior e zero para a esquerda e para Depois disso, direcionamos classificação de sublinhado do produto por pontos, colchetes de Cali, altura de 30 pixels, preenchimento de quatro pixels e espessura da fonte de oito pixels para Raio da borda até cinco pixels, cor de fundo, até um FC, 311, e cor Depois disso, direcionamos produto por pontos, a classificação de sublinhado, a imagem, colchetes e, dentro deles, com até 20 pixels e a margem direita para cinco Depois disso, adicionamos produto por pontos, análise de sublinhado, contagem de sublinhados, colchetes de Cali e, dentro desse tamanho de fonte, 16 pixels, margem esquerda de dez pixels, cor de cinza, preenchimento de zero e dez pixels e água à esquerda de dois pixels, e água à esquerda de dois pixels, sólido Salve isso e dê uma olhada. Aqui, podemos ver nosso estilo por causa dessa imagem de cesta. Então, código cts, e aqui colocamos o ponto em dois colchetes CAT Coli, e dentro dele com 40 pixels, altura até 40 pixels, borda até zero, raio da borda em 100%, fundo E cursor até o ponteiro. Por fim, direcionamos o ponto A para os colchetes e a largura de Cully do cartão e da etiqueta de imagem para 100% e a altura para Diga as mudanças e dê uma olhada. Veja, agora nosso cartão parece muito bom. Por enquanto, não estamos tornando esse componente do cartão de produto dinâmico porque obteremos esses dados do nosso back-end na próxima seção. Portanto, nossa página de empréstimos está pronta agora. 109. Construindo uma página de produtos: Então, na lição anterior, concluímos nossa página inicial. Agora vamos começar nossa segunda página, que é a página do produto. Assim, podemos dividir essa página do produto em seções. primeira seção é a barra lateral na qual exibimos todas as nossas categorias e, no lado direito, temos uma lista de produtos Então eu fecho todos os arquivos daqui. E agora, em nossa pasta de componentes, criamos uma nova pasta chamada produtos. E dentro disso, criamos um novo arquivo chamado Productspage dot css E depois disso, crie um novo componente chamado product page dot JSX Agora, vamos usar o código padronizado usando RFC e, na parte superior, inserimos o CSS de pontos da página de produtos do período Agora, no local desse orvalho, adicionamos uma seção e atribuímos a ela um nome de classe, produtos e página de sublinhado E dentro desta seção, temos duas coisas: barra lateral e lista de produtos Então, vamos adicionar aqui uma etiqueta lateral e atribuir a ela um nome de classe, produtos e barra lateral de sublinhado E dentro disso, escrevemos a barra lateral. Depois dessa barra lateral, criamos mais uma seção e nomeamos dois produtos, lista de sublinhados e seção de sublinhados E aqui, lista de produtos. Vamos ver o que obtemos. Salve esse arquivo e, no componente do aplicativo, comentamos esta página inicial e adicionamos aqui a página de produtos E aqui podemos ver que eu adiciono página de produto que é diferente do arquivo CSS. Então, mudamos esse nome de arquivo para página de produtos dot Jx. Além disso, nesse componente, alteramos o nome da nossa função para página de produtos e também atualizamos essa exportação. E na parte superior, adicionamos pontos css da página de produtos. Salve esse arquivo e, em nosso componente de aplicativo, adicionamos aqui o componente da página de produtos. Não se preocupe Adicionaremos roteamento após concluirmos nossos estilos. Por enquanto, não queremos nenhuma complexidade. Salve as alterações e dê uma olhada. Aqui temos a barra lateral e a lista de produtos. Vamos definir o estilo para o layout da página de nossos produtos. No arquivo CSS de pontos da página de produtos, adicionamos produtos pontilhados, página de sublinhado, Calibrackets display ao GED porque queremos dividir nosso aplicativo em seções, colunas do modelo GED um quadro e quatro quadros e preenchimento Salve as alterações e dê uma olhada. Veja, temos seções separadas. Agora, vamos adicionar nossa barra lateral. Então, em vez de escrever toda a seção da barra lateral aqui, podemos criar um novo componente separado para a barra lateral Então, corte essa tag de lado e, na pasta de produtos, criamos um novo arquivo, produtos, ponto CSS da barra lateral e criamos outro arquivo Produtos, ponto da barra lateral JSX Aqui, adicionamos um padrão e vamos importar o arquivo css de pontos da lateral dos produtos com barra de período Bom. Agora, no lugar desse DU, colamos nossa tag de IA. Agora, vamos remover esse texto da barra lateral e, dentro disso, primeiro, adicionamos a tag Astro e passamos aqui a categoria Depois disso, para exibir os links, criamos uma DU com links de sublinhado da categoria do nome da classe E dentro deles, adicionaremos nossos links por categoria. Então, vamos adicionar estilos para essa parte. Então, em nosso arquivo CSS, adicionamos produtos pontilhados, barra lateral de sublinhado e colchetes Hi E dentro deles, adicionamos preenchimento de dez pixels para a parte superior inferior e 20 pixels para a esquerda e direita, raio da borda para cinco pixels e a cor de fundo para Depois disso, adicionaremos estilo ao título da categoria. Portanto, os produtos pontilhados sublinham a barra lateral, e temos como alvo dois colchetes de Cali, tamanho da fonte em 26 pixels e a margem inferior Guarde isso. E no componente da página de produtos, vamos adicionar nosso componente de barra lateral de produtos. Salve este arquivo e veja, aqui temos uma boa barra lateral. Agora vamos definir links de categorias. Então, os links de categorias se parecem com isso. No lado esquerdo, temos Imog ou ícone e, no lado direito, temos o título do link, onde vemos esse tipo de estrutura, à direita, ele está vinculado ao componente do ícone A diferença é exatamente essa. Temos que mudar suas posições, o que podemos fazer facilmente com CSS. Deixe-me te mostrar. Então, aqui adicionamos o link com o componente de ícone, C, a entrada automática funciona e, em adereços, passamos o título para, digamos eletrônicos, após esse link para produtos, categoria de ponto de interrogação é igual Então, aqui estamos passando nossa string de consulta de categoria e, usando isso, podemos buscar dados dessa categoria Depois dessa imagem, digamos foguete. Agora vamos importar essa imagem. Importe foguete a partir daqui, vamos duas pastas até ativos foguete dot png Salve as alterações e dê uma olhada. Recebemos o mesmo link que recebemos em nossa barra de navegação. Agora, como esse link com o componente de ícone sabe, queremos adicionar esse link à barra lateral ou à barra Na. Para isso, passaremos mais um adereço para este link com o componente ícone A barra lateral é igual à verdadeira. Ou também podemos remover isso. Ambos funcionam da mesma forma. Mas, para uma melhor compreensão, não estamos removendo isso. Salve isso e vá até o link com o componente de ícone. Aqui, após essa imagem, desestruturamos mais um adereço, que é a barra lateral Agora, aqui podemos adicionar uma condição e, com base nessa condição, adicionaremos estilos. Então, no lugar desta classe Align center, adicionamos colchetes cli porque estamos adicionando a expressão JavaScript e adicionamos aqui a condição I que a barra lateral é verdadeira, então retornamos Align center e o link de sublinhado da barra lateral, pois retornamos apenas Align center e o link de sublinhado da barra lateral adicionamos colchetes cli porque estamos adicionando a expressão JavaScript e adicionamos aqui a condição I que a barra lateral é verdadeira, então retornamos Align center e o link de sublinhado da barra lateral, pois retornamos apenas Align center. Agora vamos definir o estilo para esse link de sublinhado da barra lateral. Então, no link com o ícone, ponto, arquivo CSS, e na parte inferior, adicionamos tinta de sublinhado na barra lateral, Calibraket e, dentro disso, primeiro, precisamos mudar a posição da nossa Portanto, a direção da flexão também justifica o conteúdo para linho e, usando essas duas propriedades, podemos reverter a posição de Depois disso, um tamanho para 21 pixels, preenchimento para dez pixels e 15 pixels, raio de borda para cinco pixels e transição para todos os 0,15 segundos entram e saem Você já sabe por que adicionamos essa transição, efeito de pH. mouse sobre o link do clã na barra lateral e, dentro dela simplesmente mudamos a cor de fundo para F seis, F seis, F seis Salve isso e dê uma olhada. Veja, nós entendemos nosso estilo de link. Agora vamos tornar nosso ícone um pouco grande e adicionar a margem direita. Então, aqui adicionamos o link de sublinhado da barra lateral de pontos e direcionamos o elemento da imagem Dentro disso, alteramos a largura para 30 pixels, margem esquerda para zero e a margem direita para oito pixels. A razão pela qual deixamos a margem esquerda para zero é porque neste link sublinhado Imoge temos uma margem esquerda de cinco pixels Salve as alterações e dê uma olhada. Veja, aqui temos nosso estilo de link. Então é assim que podemos usar o mesmo componente e usá-lo para outro estilo. 110. Criando seção de lista de produtos: Agora, vamos criar uma seção de lista de produtos para nossa página de produtos. Então, para esta seção, criamos um componente separado. Portanto, nesta seção a partir daqui e em nossa pasta de produtos, criamos um novo arquivo, lista de produtos, ponto CSS, e também criamos um novo componente, lista de produtos, ponto JSX, adicionamos um padrão e, na parte superior, importamos o arquivo CSS de pontos da lista de produtos Agora, no local deste vencimento, o que faremos, colamos nossa seção. Agora, essa seção da lista de produtos tem duas seções. O primeiro é o cabeçalho e, nele, adicionaremos o título do produto e, no lado direito, adicionaremos menu suspenso para encurtar Na segunda seção, temos uma lista de produtos. Vamos adicionar aqui cabeçalho com nome da classe, centro de alinhamento e produtos, lista de sublinhados, cabeçalho de sublinhado Dentro desse cabeçalho, primeiro adicionamos a tag e dentro desses produtos. E depois disso, adicionamos o nome da tag de seleção à abreviação e atribuímos a ela um nome de classe, produto e classificação por sublinhado Agora, dentro disso, adicionamos nossas opções. Então, opção, valor para nulo e passe aqui relevância. Esse é o valor padrão e é por isso que não passamos nenhum valor. Vamos adicionar o valor da segunda opção ao preço, DSE para quê, certo, para decrescente, e passar aqui, preço alto para Duplique essa linha e alteramos nosso valor para preço, ASC e alteramos aqui, preço, de baixo para Agora, vamos duplicar essas duas opções e, no local do preço, mudamos para tarifa e aqui também para taxa Agora, após esse cabeçalho, adicionamos um dia com a lista de sublinhados dos produtos do nome da classe E dentro disso, temos uma lista de produtos que exibiremos no cartão do produto. Então, em vez de definir componente do cartão do produto na pasta inicial, podemos movê-lo para aqui na pasta de produtos. Então, veja assim, arquive e solte na pasta de produtos. Você pode ver como é fácil mover componentes em nosso projeto, ou podemos até mesmo usá-los em diferentes projetos com seu arquivo CSS. Mas aqui está uma coisa. Temos que alterar a declaração de entrada no componente de produtos em destaque. Então, vamos fazer uma pasta com os produtos cortar o cartão do produto. Guarde isso. E no componente da lista de produtos, adicionamos aqui o cartão do produto. E duplique algumas vezes. Salve esse arquivo. E em nossa página de produtos, adicionamos esse componente da lista de produtos. Não se esqueça de fazer isso. Salve as alterações e dê uma olhada. Veja, nós temos esses elementos. Agora vamos adicionar estilo a esta seção. Então, no arquivo CSS de pontos da lista de produtos, adicionamos produtos pontilhados, lista de sublinhados, seção de sublinhados, colchetes de Cali, preenchimento de dez pixels e preenchimento esquerdo de 30 pixels Depois disso, adicionamos produtos com pontos, sublinhado por último, cabeçalho de sublinhado E dentro deles, adicionamos conteúdo justificado ao espaço entre eles porque já tínhamos uma classe central alinhada para esse Depois disso, direcionamos nossos dois produtos de açúcar, listamos dois colchetes de Cali no cabeçalho E aqui escrevemos o tamanho da fonte em 26 pixels. Depois disso, direcionamos nossos produtos para sublinhar o encurtamento, os Calibackets e, dentro desse tamanho de fonte, 18 pixels, a espessura da fonte até 500, a família de fontes herdará a altura para 35 pixels, o preenchimento para zero e cinco pixels para a esquerda e para a Borda com freira, contorno com freira e raio da borda com cinco pixels Salve as alterações e veja que nossa seção de cabeçalho está pronta. Agora, basta adicionar estilo a essa lista de produtos. Então, na parte inferior, adicionamos à lista de sublinhados dos produtos E dentro dos colchetes Scully, adicionamos bandeiras de exibição, embalagem de linho para embrulhar e justificamos o conteúdo para espaçar embrulhar e justificamos o conteúdo para espaçar Salve as alterações e dê uma olhada. Veja, nossa lista de produtos está pronta. Então, parabéns. Concluímos nossas duas páginas importantes. Isso parece muito bom. O que você acha? Deixe-me saber na seção de perguntas e respostas. 111. Criando um componente de produto único: Agora, vamos criar uma única página de produto para nosso projeto. Nesta lição, criamos apenas a parte de seleção de imagens. Então, aqui temos uma matriz de imagens e, quando selecionamos qualquer imagem essa imagem será exibida aqui. É muito simples. Deixe-me te mostrar. Então, primeiro de tudo, no próximo artigo 0R na recursos, abra a pasta do projetório E nisso, temos o arquivo JS de pontos dos produtos. E dentro disso, você obtém esse objeto de produto. Este objeto tem todos os detalhes que obteremos do back-end. Por enquanto, só precisamos desses dados Dummi. Portanto, para uma única seção de produto, criamos uma nova pasta na pasta de componentes chamada produto único. Dentro disso, criamos um novo arquivo chamado CSS de ponto de página de produto único. E também criamos um novo componente chamado single product page dot Jx Aqui, adicionamos código padronizado e, na parte superior, e, na parte superior, importamos um único arquivo CSS de pontos de página de produto Bom. Vamos adicionar nosso objeto de produto aqui porque precisamos dele. Agora, no local desta DU, adicionamos uma seção e atribuímos a ela um nome de classe, uma linha, um centro e um único produto. Dentro disso, temos duas seções, uma para seleção de imagens e a segunda para exibir os detalhes do produto. Adicionamos aqui Du com nome da classe, alinhamos, centralizamos e, em segundo lugar, Du com nome da classe, alinhamos, centralizamos, detalhes únicos do produto Agora, neste du de imagens, adicionamos mais um du com o nome da classe, miniaturas de sublinhado simples E dentro disso, exibiremos todas as imagens em miniatura, que significa imagens pequenas Quais imagens queremos exibir. Certo, queremos exibir essa matriz de imagens. Portanto, adicione colchetes Coli, mapa pontos das imagens do produto Dentro disso, obtemos cada imagem e também o índice aqui. Isso é muito básico, certo? Já fizemos isso muitas vezes e aqui retornamos a tag da imagem. E na fonte, passamos nossa imagem Alt para o título do ponto do produto. Agora, após esse vencimento, adicionamos uma fonte de imagem à imagem pontilhada do produto. E dentro disso, temos que passar de zero por enquanto. Alterne para produto, título do ponto e nome da classe para produto com sublinhado único, exibição de sublinhado Salve as alterações e teremos que adicionar essa página em nosso componente de aplicativo. Circule nossa página de produto e simplesmente adicione aqui uma única página de produto Salve os genes e dê uma olhada. Nós obtemos nossos elementos. Agora vamos definir o estilo desta seção. Portanto, em um arquivo CSS de ponto de página de produto único, primeiro adicionamos um único produto de sublinhado, calibraket, e aqui adicionamos conteúdo justificado ao centro e preenchimento de 32 pixels para a parte superior inferior e 48 pixels para a esquerda e direita Em seguida, focamos em um único produto com sublinhado, miniaturas sublinhadas, colchetes e, dentro dessa tela, sinalizar a direção do linho até a coluna, a embalagem em linho, o espaço em 14 pixels, o preenchimento em oito pixels e a preenchimento Depois disso, vamos focar nas pequenas imagens que podemos selecionar. Portanto, aquele único produto de sublinhado, miniaturas de sublinhado, largura de calibackets de imagem até 80 comprimidos, altura de 80 comprimidos, objeto adequado para cobrir o raio de água de cinco pixels e cursor até raio de água Depois disso, vamos adicionar produto de sublinhado único com ponto único, tela de sublinhado, Calibrackets e, no interior, a largura de 600 pixels, a altura também de 600 pixels, a objetos e o raio da água Tudo isso é CSS básico. É por isso que não estou explicando seu estilo. Salve as alterações e dê uma olhada. Veja, nós conseguimos o que queremos. Quando clicamos nessas imagens, nada acontece. Então, vamos definir essa funcionalidade. Então, para isso, temos que criar uma variável de estado chamada imagem selecionada, conjunto de imagens selecionadas, e essa variável de estado armazenará o valor do índice da imagem selecionada. Por padrão, selecionaremos a primeira imagem. Vamos também importar o estado do react. Bom. Agora, na parte inferior, no lugar do zero, adicionamos a imagem selecionada. Agora, quando clicamos em qualquer uma dessas imagens, basta definir o valor da imagem selecionada para esse valor de índice. Deixe-me te mostrar. Aqui, adicionamos um evento de clique nesta função de seta thmalimage e definimos a imagem selecionada para indexar Salve as alterações e dê uma olhada. Mude a imagem e veja, nós temos essa imagem aqui. Agora só precisamos mostrar qual imagem está atualmente selecionada. Então, em nossa tag de imagem, adicionamos aqui, nome da classe é igual a aqui que passamos a Se a imagem selecionada for igual ao índice, adicionaremos a classe de imagem de sublinhado selecionada, caso contrário, não adicionaremos nada Isso e vamos adicionar estilo para essa classe. Portanto, no arquivo CSS, após nosso estilo de imagem, adicionamos colchetes Coli da imagem com pontos selecionados transformamos em escala 1,12 Salve as alterações e veja, aqui temos a imagem selecionada. Agora, esse efeito é muito repentino. Então, vamos suavizar isso. Nesse estilo de imagem, fizemos a transição para todos os 0,2 segundos, entrar, salvar as alterações e dar uma olhada. Veja, temos esse efeito de transição suave. Você pode ver como o recurso seletor de imagens é muito simples. Só precisamos pensar de forma simples. Agora, na próxima lição, adicionaremos a seção de detalhes do produto a esta página. 112. Adicionando seção de detalhes para página de produtos: Agora, vamos adicionar a seção de detalhes para uma única página do produto. Nesses detalhes, adicionamos a tag H one com nome da classe, produto único, título e, dentro dela, exibiremos o título do ponto do produto. Depois disso, adicionamos um parágrafo com nome da classe, descrição única do produto. E dentro disso, adicionamos a descrição do ponto do produto. Esse é o benefício do objeto do produto. Depois disso, adicionamos mais uma tag de parágrafo e atribuímos ela um nome de classe, preço único do produto, e adicionamos aqui colchetes em dólares , preço em pontos do produto, ponto dois fixo e, dentro disso, passamos Isso arredondará nosso preço para dois dígitos. Agora, depois disso, adicionamos duas tags com nome da classe, quantidade, título e passamos aqui a quantidade. Depois disso, adicionamos um dado com entrada de nome, alinhamento, centro e quantidade da classe entrada de nome, alinhamento, centro e quantidade E dentro desse du, adicionamos um botão com o nome da classe igual à quantidade de entrada, botão e passamos aqui menos e, por padrão, adicionamos disable como true para o Duplique esse botão, remova essa desativação. E basta passar aqui mais. E entre esses dois botões, adicionamos um parágrafo com nome da classe, entrada de quantidade, contagem. Bom. Agora, finalmente, temos o botão de ir para o carrinho. Então, adicionamos botão com nome da classe, Serge, botão e adicionamos carrinho E aqui passamos da cabeça ao carrinho. Salve as alterações e dê uma olhada. Veja, aqui temos todos os nossos elementos. Agora, vamos definir estilos para eles. Portanto, em nosso arquivo CSS na parte inferior, adicionamos detalhes únicos do produto, colchetes de Cali com 35% e preenchimento de 16 pixels e 24 pixels Depois disso, temos um único título de produto. E aqui escrevemos a margem inferior em 16 pixels e o tamanho da fonte em 32 pixels. Depois do nosso título, temos a descrição. Então, essa descrição única do produto, colchetes em c, e aqui adicionamos a margem inferior, 16 pixels e a altura da linha a 1,4 Depois disso, temos o preço, então pontue o preço de um único produto. E dentro desses colchetes escamosos, adicionamos a margem inferior a 16 pixels, tamanho da fonte a 24 pixels e a espessura da fonte a 600 Depois disso, temos o título da quantidade. Então, título da quantidade. Tamanho da fonte até 20 pixels e espessura da fonte até 700. Salve as alterações e dê uma olhada. Primeiro, precisamos fazer nossos detalhes em uma coluna. Portanto, nosso único componente de produto, aqui em nossos detalhes, adicionamos bimestalmente um centro de linha. Nós não queremos isso. Salve as alterações e veja, agora temos pouca estrutura boa. Vamos adicionar o resto dos estilos. De volta ao nosso arquivo CSS. Depois disso, temos a entrada de quantidade de pontos, du e dentro dela, definimos o tamanho da fonte para 20 pixels, espessura da fonte para 700 e a margem para cinco pixels para a parte superior, zero para a esquerda e direita e 16 pixels para a parte inferior. Depois disso, direcionamos o botão de entrada de quantidade de pontos, Calibrackets, e dentro dele, adicionamos largura a 35 pixels, altura a 35 pixels, para tamanho de 25 pixels, cor de fundo tem FF 8848, cor para branco, borda, freio, raio wer para 100%, para círculo e cursor para Agora vamos definir o estilo para o botão desativado. Botão de entrada de quantidade, Callan desativado e, dentro dele, adicionamos opacidade a 0,3 e cursor ao 0,3 e cursor Salve isso e veja se obtemos nossos estilos de botão. Agora só precisamos adicionar estilo para esse botão de contagem e adicionar ao cartão. Então, adicionamos aqui entrada de quantidade, contagem, colchetes de Cali, margem a zero e 40 pixels para esquerda e direita, e linha de texto ao centro E, finalmente, temos como alvo o botão do cartão com pontos oito, colchetes de Cali, e dentro dele cabemos o conteúdo e preenchimento de oito pixels na parte superior e inferior e 18 pixels na esquerda Diga as mudanças e dê uma olhada. resto dos estilos estão bem, mas aqui precisamos fazer uma pequena mudança. Adicionamos aqui a margem inferior e também vamos ver por que não obtemos margem para essa matriz de entrada de quantidade. Então, em nosso estilo de título de quantidade, adicionamos a margem inferior a três pixels e aqui removemos esse dado. Queremos aplicar esse estilo para entrada de quantidade. Salve as alterações e dê uma olhada. Veja como nossa página única de produto é linda. A razão pela qual eu recomendo escrever seu próprio estilo é porque depois de concluir este projeto, você orgulhosamente dirá que eu criei esse projeto do zero Mais uma coisa, se removermos parte CSS do desenvolvimento do front-end , o react perderá seu valor tremendamente Sem o CSS correto, nosso site parece muito feio. Dê crédito a si mesmo por criar este projeto do zero. 113. Construindo um componente de página de carrinho: Agora, vamos criar uma página de carrinho para esse projeto. Então, nesta lição, criaremos todas as coisas sem essa tabela. Criaremos uma tabela na próxima lição. Então, na pasta de componentes, criamos uma nova pasta chamada CAT e dentro dela, criamos um novo arquivo chamado Cardpage dot CSS E depois disso, criaremos mais um componente chamado Cardpaget Aqui é um clichê e, na parte superior, importamos o arquivo CSS de pontos da página do cartão Agora, no local desse DU adicionamos uma seção e atribuímos a ela um nome de classe, linha, centro e página do carrinho. Dentro desta seção, primeiro, queremos criar informações do usuário. Então, podemos criar esse elemento aqui ou podemos separar esse componente. Nós podemos fazer o que quisermos. Depende totalmente de nós. Aqui, não vamos reutilizar essas informações do usuário, então não estou criando um componente para isso Dot Align Center Para adicionar outra classe em T, podemos adicionar outras informações de usuário de pontos Veja, nós temos essas duas classes. Agora, dentro disso, primeiro queremos adicionar a imagem do perfil do usuário. Tag de imagem e fonte para o usuário Altere para o perfil do usuário. Agora, depois dessa imagem, queremos um Du e dentro desse Du adicionamos um parágrafo com o nome da classe, nome do usuário. E podemos passar seu nome para Halley. E depois disso, criamos outro parágrafo com o nome da classe, e-mail do usuário e passamos seu e-mail para Halley em dire Salve isso e, no componente do aplicativo, precisamos adicionar essa página do cartão. Comente a página única do produto e, depois disso, adicionamos o componente da página do cartão. Salve as alterações e não obteremos nada. Então, abra o console e, finalmente, podemos ver o erro de referência detectado, usuário não está definido e também obtemos um nome de arquivo, página do cartão e também o número da linha. Então, de volta ao código VS, e vamos importar esse usuário. Então importe o usuário de vamos para pastas up assets, usuário dot web P. Salve as alterações e dê uma olhada. Veja, obtemos informações do usuário. Agora, vamos adicionar outros elementos. Então, aqui damos espaço para a mesa de cartas. Depois disso, adicionamos uma tabela para a fatura do carrinho. Tabela e dê a ela um nome de classe, lista de sublinhados do carrinho. Aqui adicionamos Tbody e, dentro dele, adicionamos a linha da tabela e os dados da tabela Aqui, passamos o subtotal e outro dólar de dados para nove. Vamos duplicar essa linha da tabela mais duas vezes e, no lugar desse subtotal, adicionamos a taxa de envio e, aqui, cinco dólares Depois disso, na última linha, adicionamos o total final e, finalmente, o dólar 1004 Agora, após essa tabela, adicionamos o botão com o nome da classe, botão de pesquisa, que definimos na Navbar, e também adicionamos mais uma classe, o botão Checkout E aqui passamos pela finalização da compra. Salve as alterações e dê uma olhada. Aqui temos nossos elementos. Agora vamos definir estilos para eles. Então, no arquivo CSS de pontos da página do carrinho, primeiro adicionamos Cali Brackets da página do carrinho de pontos e, dentro disso, adicionamos direção flexível à coluna, justificamos o conteúdo na largura central até 60% da margem até zero e automático e badding em 32 pixels e Depois disso, adicionamos informações do usuário de dados e, entre colchetes de Gali, espaço para 16 pixels e margem inferior para 32 Depois disso, segmentamos os dados de sublinhado do usuário, informações , imagem e, dentro disso, adicionamos largura a 80 comprimidos, altura a 80 fotos L, pés do objeto para cobrir e raio da borda a 100% para Agora, depois disso, temos como alvo o nome do sublinhado do usuário dot. E nos pacotes Cully, adicionamos o tamanho da fonte a 21 pixels e o peso da fonte a 600, salvamos os ângulos e damos uma olhada Veja, temos boas informações de usuário. Agora vamos definir estilos para essa tabela e botão. Então, na parte inferior, adicionamos os colchetes iniciais do carrinho de pontos Bill e, dentro do autoalinhamento, para flexionar e com até 400 pixels, água, colapso em colapso, um tamanho para 16 pixels, margem superior para 16 pixels e cor de fundo Em seguida, adicionamos parênteses de gráfico de pontos, Bill, TD e Ci E dentro disso, passamos o preenchimento para 12 pixels e 20 pixels e a borda para três pixels, sólido tem EI EI, ei Depois disso, adicionamos o carrinho de pontos, Bill, TD, call on last child, colchetes de Cali e, dentro dele, a linha de texto e a largura de 120 pixels Depois disso, direcionamos o Dot Cart, Bill, final e, dentro desse tamanho de fonte, para 20 pixels e a espessura da fonte para 700. E, finalmente, temos como alvo o botão Checkout, colchetes Ci Primeiro, adicionamos align self ao flex porque queremos exibir esse botão no lado direito E também, adicionamos isso ao carrinho Bill. S? Depois disso, altura de 38 pixels, margem importante 16 pixels para parte superior inferior e zero para esquerda e direita, e preenchimento de zero e 16 pixels para esquerda e direita Também adicione importante aqui. Salva e dê uma olhada. Isso parece bom, mas nossos estilos finais não são aplicados. Então, de volta ao componente da página do carrinho. Aqui, adicionamos o nome da classe ao cartão Bill final. Salva e dá uma olhada. Veja, esses estilos parecem muito bons. Agora, na próxima lição, criaremos uma mesa de cartas. 114. Criando um componente de tabela comum: Vamos criar um componente de tabela comum. Você pode pensar: por que precisamos disso. Deixe-me te mostrar. Aqui na mesa de cartas, temos um estilo de mesa específico e o mesmo estilo que temos na página Meu pedido. A diferença é apenas um dado. Aqui temos dados diferentes com cabeçalhos diferentes. Você pode criar um componente de tabela comum e usá-lo nas duas páginas. No lugar dessa tabela de cartas, chamamos de componente de tabela assim. E para cabeçalho, passamos aqui adereços, cabeçalhos iguais a entre colchetes, matriz, e dentro disso, matriz, e dentro disso, passamos todos os cabeçalhos que queremos Então, primeiro, passamos o preço, a quantidade, o total e o removemos do item. Agora, vamos definir esse componente da tabela. Eu sei que isso é um pouco confuso por enquanto, mas basta ver isso e você entenderá isso Então, na pasta de componentes, criamos uma nova pasta chamada comum e, dentro dessa pasta, adicionaremos todos os nossos componentes comuns. Agora, vamos criar um novo arquivo chamado table dot css. E depois disso, criamos um novo componente chamado tablet JSX Vamos adicionar código padronizado e, na parte superior, importamos o arquivo css de pontos da tabela Agora, no lugar desse de, adicionamos a tag de tabela e atribuímos a ela o nome de classe common table. Agora, dentro disso, adicionamos THAD e dentro dele, adicionamos tabelas para cabeçalho Agora, como sabemos, vamos usar adereços de cabeçalho, que é array Então, desestruturamos adereços e obtemos aqui cabeçalhos e, dentro desse TAD, podemos Então, os cabeçalhos pontuam MAP dentro dele, obtemos cada item e também a função de seta de índice, e aqui retornamos a tag Ts, a chave para o índice e apenas passamos aqui o item Por enquanto, vamos ver o que temos. Guarde isso. Na página do carrinho, precisamos importar esse componente da tabela da pasta de componentes comuns. Salve isso e veja, temos essa tabela com cabeçalhos. Agora, para exibir dados, podemos passar aqui outros adereços, mas vamos usar outro método Às vezes, precisamos passar o JSX como adereços. Por exemplo, aqui queremos passar a tag T body com a lista de itens, que é nosso JSX Então, queremos passar esse JSX nesse componente estável. Como podemos fazer isso? É muito simples. Em vez de passar JSX em adereços, podemos adicionar isso Deixe-me mostrar o que quero dizer. Então, aqui, em vez de fechar automaticamente esse componente estável, podemos usar esse componente como nossa tag STML E entre o componente de abertura e fechamento, adicionamos nosso JS, então aqui estamos no corpo T e dentro dele, na linha da tabela e dentro dela, temos os dados da tabela. iPhone seis, duplique isso mais quatro vezes porque temos cinco títulos Aqui temos o preço, dólar 999, quantidade em um, total em dólar 999 e, no final, adicionamos remover Salve isso e dê uma olhada. Não obtemos nossos dados porque não definimos onde queremos mostrar essas crianças JSX Então, um componente da tabela e, nos adereços, temos uma propriedade chamada children Esse filho tem todo o JSX, que passamos entre nosso componente de abertura e fechamento Agora vamos adicionar esse componente simplesmente aqui. Salve os anéis e dê uma olhada. Veja, aqui temos nossos dados. Portanto, nosso componente está funcionando. Vamos definir estilos para essa tabela comum. Então, no arquivo CSS de pontos, em primeiro lugar, adicionamos a tabela Common Underscore, colchetes e, dentro dela, adicionamos largura a 100% da margem inferior a 16 pixels, colapso da borda, para contrair, cor de fundo para cor de fundo E sombra da caixa em zero pixel, três pixels, oito pixels, RGBA, zero, zero, zero e opacidade Depois disso, adicionamos a tabela comum de pontos, cabeça T e os colchetes TR C e, dentro deles, passamos a altura para 50 pixels, a cor do plano de fundo, dois tem 36, 34 A, cor para branco e a transformação do texto para c superior. Depois disso, temos como alvo a tabela.com, o corpo T, os colchetes TR, Cali, altura até 50 xl e Textaine para a cabeça T e os colchetes TR C e, dentro deles, passamos a altura para 50 pixels, a cor do plano de fundo, dois tem 36, 34 A, a cor para branco e a transformação do texto para c superior. Depois disso, temos como alvo a tabela.com, o corpo T, os colchetes TR, Cali, altura até 50 xl e Textaine para o centro. E até mesmo para a linha da tabela, queremos alterar a cor do plano de fundo, para que nossa tabela fique assim. Então, tabela comum de pontos, corpo T, TR, coluna, enésima criança E aqui passamos por Evan. Colchetes C, cor de fundo, dois como FI, FI FI Diga as mudanças e dê uma olhada. Por que não temos estilo para essa cabeça em T? Vamos inspecionar isso, e podemos ver aqui que não estamos entendendo estilo para essa cabeça T. Voltar ao código VS. E na mesa comum Thad. Deixe-me verificar a ortografia. Sim, é verdade. Oh, aqui precisamos atingir TH, salvar as inges e dar uma olhada Veja, nossa mesa está muito bonita. 115. Modificando o componente da página do carrinho: Agora, antes de começarmos a criar nossa última página, vamos aplicar algumas alterações em nossa página de carrinho. Aqui no local dessa quantidade, queremos exibir a quantidade com o botão de mais e menos Já criamos isso em nossa página única de produto. Podemos simplesmente usar isso aqui. No componente de produto único, precisamos disso. Em vez de copiar e colar esses elementos, vamos criar um componente utilizável para Recorte e, em uma única pasta do produto, criamos um novo arquivo chamado CSS de ponto de entrada de quantidade. Além disso, criamos um novo componente, ponto de entrada de quantidade JSX Vamos adicionar código padronizado e, na parte superior, importamos o arquivo CSS de pontos de entrada de quantidade Agora, no local desse vencimento, simplesmente devolvemos nossos elementos. Você pode ver que isso nos dá um erro de compilação. Então, envolvemos esses elementos com os fragmentos de reação. Bom. Salve isso e vamos também separar o CSS desses elementos. Antes disso, em um único componente de produtos, adicionamos nosso componente de entrada de quantidade, salvamos isso e, no arquivo CSS de um único produto, na parte inferior, cortamos esses três estilos, salvamos e, no arquivo CSS de entrada de quantidade , colamos isso. Agora, na página do cartão no lugar deste, adicionamos o componente de entrada de quantidade. Salve as alterações e dê uma olhada. Veja, obtemos nossos controles de quantidade sem escrever nenhum código CSS ou STML Essa é a beleza de criar componentes. Agora vamos corrigir esse problema de estilo. Então, aqui adicionamos o nome da classe, o centro de alinhamento e a entrada de quantidade Salve as alterações e, no arquivo CSS cat page dot na parte inferior, adicionamos a entrada da quantidade da tabela, colchetes CL e, dentro dessa altura, 50 pixels e justificamos o conteúdo Veja as mudanças e dê uma olhada. Veja, nós entendemos nossos estilos. Agora, mais uma alteração no local desse ícone de remoção de texto, que queremos exibir, remover. Então, vá para o componente da página CAT e, no local desse texto de remoção, adicionamos imagem e fonte para remover e arte para remover o ícone e colamos o nome da classe ao ícone de remoção do CAT. Vamos importar esse ícone de remoção na parte superior. Então importe, remova daqui, vamos para pastas e ativos e removemos pontos PNG. Salve isso e vamos adicionar estilo a esse ícone. No arquivo CSS de pontos da página do carrinho, adicionamos o ícone de remoção do carrinho de pontos que calibra a largura em 35 pixels, a altura em 35 pixels e o cursor no ponteiro Guarde as coisas e dê uma olhada. Vê? Nossa pasta parece muito boa. 116. Formulário avançado da Seção 11: Bem-vindo à 11ª seção do curso definitivo de reação. Nesta seção, aprenderemos todas as coisas sobre formulários, como criar o formulário, gerenciar o formulário sem nenhuma biblioteca e também com a biblioteca de formulários react hook. Veremos as duas formas. Depois disso, veremos validação de formulários usando uma das bibliotecas mais populares chamada ZOD e também como podemos lidar com a entrada de arquivos ou imagens no react Então, vamos mergulhar nisso. 117. Construindo formulário de login: Primeiro de tudo, vamos criar nossa interface de usuário do formulário de login. Então, depois disso, podemos aprender sem nos preocupar com seu design Então, aqui criamos mais uma pasta chamada autenticação. E nessa pasta, criaremos nossa página de formulário de login. Então, criamos um novo arquivo chamado Login page dot CSS. Além disso, criamos um novo componente chamado Login page dot JSX Aqui, adicionamos código padronizado e, na parte superior, importamos o arquivo CSS de pontos da página de login Bom. Agora, no local deste dia, adicionamos uma seção com o nome da classe, o centro de alinhamento e a página do formulário Agora, nesta seção, adicionamos a tag Form e atribuímos a ela um nome de classe, formulário de autenticação. Agora, vamos adicionar aqui nosso título ao formulário de login. E depois disso, temos Du, que tem todos os preenchimentos de entrada e dá a ele um nome de classe, inputs de formulário Agora, dentro disso, por enquanto, estamos adicionando nome e número de telefone, mas não se preocupe, mudaremos isso em breve. Então, para entrada individual, adicionamos um DU e, dentro dele, passamos o rótulo e passamos seu nome. Não passe nada neste DML para ser revisado. Eu vou explicar para você em apenas um minuto. Depois disso, simplesmente adicionamos caixa de entrada com texto digitado e atribuímos a ela um nome de classe, formulário, entrada de texto e espaço reservado para inserir seu nome Agora, duplique isso e, no local desse nome, escrevemos o número de telefone e, aqui, insira o tipo para o número de telefone e espaço reservado para inserir seu número de telefone E, por fim, adicionamos um botão com o tipo enviar e atribuímos a ele um nome de classe, botão de pesquisa e envio de formulário, e passamos aqui, enviar. Salve isso e agora temos que adicionar esse formulário em nosso componente de aplicativo. Então, comente esta página de pedido M e adicione aqui a página de login. Salve as alterações e dê uma olhada. Veja, temos aqui elementos de formulário. Agora só precisamos adicionar estilos para eles. Portanto, no arquivo CSS de pontos da página de login, em primeiro lugar, centralizaremos nossa seção ; portanto, pontilhem o FOM Page Cali Brackets e justifique o conteúdo no centro ; portanto, pontilhem o FOM Page Cali Brackets justifique o conteúdo Depois disso, adicionamos colchetes Coli do formulário de autenticação e, aqui, largura em 30%, preenchimento de 32 pixels na parte superior inferior e 48 pixels na esquerda e direita, margem superior em 32 pixels e cor de fundo Depois disso, direcionamos o título do nosso formulário. Para que a autenticação, no formato H dois e dentro dos colchetes, adicionamos o tamanho da fonte a 40 pixels, a margem inferior a 30 pixels e o texto se alinhe Salve isso e veja que o título da nossa página está bonito. Agora, só precisamos adicionar estilo para esse rótulo, preenchimentos de entrada e botão de envio Mas antes disso, vamos definir esse rótulo e as entradas na coluna Então, aqui adicionamos entradas em forma de ponto, D, e dentro dessa tela duas linhas, direção de linho para coluna e margem inferior Depois disso, adicionamos entradas de sublinhado , rótulo, colchetes de Cali e, aqui, adicionamos o tamanho da fonte em 18 pixels, a espessura da fonte em 600 e a margem Agora vamos direcionar nossos preenchimentos de entrada, ou seja, forma de ponto, entrada de texto, colchetes de Cali e, dentro dessa altura, 35 pixels, preenchimento para zero e oito pixels para esquerda e Tamanho da fonte para 17 pixels, espessura da fonte para 500 e contorno para nenhum Por fim, adicionamos.com, enviamos a altura do Calibraket para 40 pixels de largura para 100% e a margem para 25 pixels na parte superior, zero para a esquerda e direita e dez pixels Salve as alterações e dê uma olhada. Nosso formulário está pronto. Agora você pode perguntar por que deixei essa etiqueta vazia. Muitos desenvolvedores realmente não sabem o que esse atributo estim four faz Até eu acabei de aprender isso no meu quarto ou quinto projeto, quando comecei. Esses quatro atributos especificam para qual elemento do formulário esse rótulo está vinculado. Deixe-me explicar isso para você na prática. Por enquanto, se clicarmos nesse rótulo de nome, não veremos nenhum efeito. Agora, aqui em nosso campo de entrada, adicionamos o atributo ID e passamos aqui o nome. Agora, nesses rótulos estimados por atributo, temos que adicionar o mesmo ID que adicionamos em nossa entrada Então, escrevemos aqui o nome. mesmo que fazemos com esse número de telefone, ID para telefone e tM para atributo ao telefone Guarde as informações e dê uma olhada. Veja se clicarmos nesse rótulo, colocamos nosso cursor nesse preenchimento de entrada. É assim que usamos rótulo como atributo, que especifica a qual elemento do formulário nosso rótulo está vinculado. 118. Entendendo o gancho useRef: Agora vamos ver outro gancho importante no react, que é usar RF Fok Então, primeiro de tudo, o que é usar gancho Rf e por que é importante Use Rf é um gancho para acessar elementos dom e também para criar várias variáveis, que não renderizarão novamente o componente Esses são os dois casos de uso mais comuns do Rf Fok. Por enquanto, não vamos nos preocupar em criar uma variável mutável Primeiro, vamos entender como podemos acessar os elementos dom. Então, aqui em nosso formulário de login, definimos temporariamente o tipo de entrada dos números de telefone como senha. Agora, como sabemos, muitos sites têm esse recurso no qual podemos ocultar e mostrar a senha de entrada. Após essa entrada, adicionamos um botão, digitamos botão porque se não especificarmos o atributo de tipo , por padrão, ele está configurado para enviar e já temos o botão de envio. Então, aqui passamos a senha de altura e duplicamos esse botão e alteramos isso para mostrar a senha Diga as mudanças e dê uma olhada. Veja, aqui podemos digitar nossa senha que atualmente não está visível. Agora, o que queremos fazer é ao clicar nesse botão de senha, definir nosso tipo de entrada como texto simples. E quando clicarmos no botão Altura , definiremos o tipo como senha novamente. Então, para isso, precisamos acessar esse campo de entrada. Agora vamos ver como podemos fazer isso usando o gancho Rf. Então, primeiro de tudo, em nosso componente, escrevemos ref Hook e selecionamos essa sugestão automática. Agora, neste caso, temos que passar o valor padrão, mesmo que fazemos em use date hook. Normalmente, sempre adicionamos aqui null. Agora, esse gancho use ref retorna um objeto com apenas uma propriedade chamada current. Vamos fazer isso na variável chamada password ref. Agora, qual elemento queremos acessar? Certo, é nosso preenchimento de senha. Então, nesse elemento, temos que adicionar um atributo chamado Rf E aqui passamos nosso nome de referência, que é a senha Rf. Agora vamos ver o que obtemos nessa senha Rf. Então, por enquanto, neste botão Ocultar, adicionamos o evento de clique, e aqui adicionamos a função de seta e o registro de pontos do console, senha ref dot current. Salve as alterações e dê uma olhada. Abra o console e clique no botão Ocultar. Veja, aqui temos essa entrada com o ID Phone. Agora, com esse elemento, podemos fazer qualquer coisa que fazemos com elementos Dom no JavaScript Vanilla. Agora você pode perguntar: como podemos saber quais métodos podemos usar com elementos e também como podemos lembrá-los. Então, a resposta é: você não precisa se lembrar de nenhum método. Deixe-me mostrar meu truque para ver todos os métodos que podemos usar com elementos. Então, aqui, basta remover essa propriedade atual. E salve-o. Agora, no Console, você pode ver esse objeto de referência de senha com a propriedade atual. Agora clique nessa pequena seta e, novamente, clique nessa seta. Então, aqui podemos ver todos os métodos que podemos aplicar nesse elemento. Por exemplo, queremos aplicar estilo. Desça até a parte inferior e clique nesse ícone para ver mais corretamente. E aqui você pode ver a propriedade de estilo. Clique nele e você poderá ver todas as propriedades de estilos. Simples assim. Então, em nosso exemplo, aqui queremos alterar o atributo de tipo para essa entrada. Portanto, no local desse registro de pontos do console, escrevemos a senha ref dot current dot type é igual a e codificamos a Nós apenas copiamos esse evento onclick e o colamos neste botão so E aqui nós apenas mudamos o tipo para texto. Salve as alterações e dê uma olhada, digite algo nesta entrada. Por padrão, está em Ocultar. Agora clique em Mostrar e aqui podemos ver nossa senha. Novamente, clique em Ocultar e é Ocultar. E veja com que facilidade podemos acessar elementos dom usando o Rf Hook Apenas por um limite, temos que primeiro declarar uma variável usando Rf Hook e passar aqui nosso valor padrão, que é E depois disso, basta passar o atributo RF para qualquer elemento que desejamos acessar e passar nosso nome de variável use Rf Simples assim, se usarmos o JavaScript Vanilla , teremos que escrever aqui ponto do documento Obtenha o elemento por ID ou nome. Mas, em reação, não precisamos fazer isso. Usamos Rf ok para acessar o elemento. 119. Manipulando formulários usando o gancho Ref: Então, no primeiro projeto, vemos como podemos lidar com o formulário usando use date hook. Agora, vamos ver como podemos lidar com a forma usando o gancho Rf. É muito simples. Deixe-me te mostrar. Então, vamos remover esses dois botões. Não precisamos disso e também removemos esse atributo f. Acabei de adicioná-los para explicar o uso do gancho RF. Altere esse tipo para número e também remova esse atributo p. Agora, aqui chamamos use Rf e passamos aqui null valor padrão e damos a ele um nome, chamamos o nome Agora, neste nome ref, queremos obter a referência dessa entrada de nome. Então, na entrada, adicionamos o atributo ref e aqui passamos o nome ref. Agora, vamos lidar com o envio deste formulário. Então, aqui adicionamos nosso evento de envio e passamos aqui, gerenciamos a função de envio. Agora, vamos definir essa função. Fizemos isso anteriormente, agora nesta função, por enquanto, simplesmente consolemos log de pontos desta corrente de pontos NameRv E nisso, temos que acessar esse valor de entrada, salvar as alterações e dar uma olhada, inserir o nome aqui e clicar em conenviar Veja, nossa página é atualizada. Por que isso acontece? Você sabe? Certo. É porque não adicionamos a função de prevenção padrão. Agora você pode ver que conhece muitos pequenos detalhes sobre o react. Você está indo muito bem. Então, aqui adicionamos o objeto de evento e, dentro disso, adicionamos a função padrão e dot prevent. Salve as alterações e dê uma olhada. Abra o console, escreva aqui o nome e veja, temos esse nome aqui. Agora, vamos fazer o mesmo com esse número de telefone preenchido. Então, aqui criamos uma nova constante ref, passamos aqui null e damos a ela um nome, phone ref Você pode usar o que quiser. Depende totalmente de você. Agora, nesta entrada de número de telefone, adicionamos o atributo f e passamos aqui nossa referência de telefone. E em nossa função de envio de identificadores, vamos registrar pontos do console neste telefone rev dot current dot VLU Diga os detalhes e dê uma olhada. Preencha essas entradas e envie-as. Veja aqui que obtemos esses valores. Agora, no mundo real, enviaremos o objeto de nossos dados para o servidor. Então, aqui criamos um objeto chamado usuário e, dentro dele, adicionamos propriedade name e a atribuímos a uma string vazia. E aqui temos o telefone e, como valor padrão, adicionamos zero. Agora, no local desse console, definimos o nome do ponto do usuário igual ao valor atual do ponto de referência do nome E depois disso, o ponto de telefone do usuário é igual ao valor atual do ponto de referência do telefone Agora, finalmente, consulte o registro de pontos deste objeto de usuário. Salve as alterações e dê uma olhada, preencha o formulário e aqui obtemos nosso objeto de usuário, que podemos enviar para o servidor. Uma pequena mudança, precisamos converter essa sequência numérica em apenas um número. Então, aqui colocamos esse valor parênteses e adicionamos aqui Salve as alterações, envie um formulário. Veja aqui, temos aqui o número. É assim que podemos lidar com valores de formulários usando use Rf. Agora você pode perguntar: qual é a melhor maneira de lidar com o formulário? Use Rf ou use state. A resposta é usar o estado. Mas usar Rf também é útil se tivermos até dez preenchimentos de entrada, porque quando usamos sref, isso não fará com que o componente seja renderizado Se tivermos de cinco a seis preenchimentos de formulários, podemos simplesmente usar o uTateHok Use apenas o gancho sref para manusear o formulário. Se o estado estiver causando problemas de desempenho, use UseRefhuk para acessar elementos Na próxima lição, trataremos nosso formulário conosco State Hook. 120. Manipulando formulários usando gancho de estado: Então, primeiro de tudo, vamos remover essas constantes, remover essas linhas do handle submit e também remover esses atributos f de ambas as entradas Agora, primeiro, criamos uma variável de estado usando SNIPID e atribuímos a ela um nome de usuário, usuário definido e um valor padrão, e um valor padrão passamos o objeto com o nome da propriedade para uma string vazia e o telefone também uma string vazia Agora, no topo, em vez de importar UF, importamos o Tate Hook Agora, em nossa entrada de nome preenchida, adicionamos o evento de alteração e, dentro disso, obtemos o objeto do evento, função de seta e definimos o usuário como objeto. Primeiro, obtemos todos os valores do objeto de usuário anterior e apenas substituímos o nome pelo valor do ponto alvo e ponto. Agora, para a entrada Fon, fazemos o mesmo. Portanto, copie essa alteração e cole-a nessa entrada. E simplesmente mude esse nome para telefone. Anteriormente, criávamos uma função separada para lidar com a mudança, mas também podemos fazer dessa maneira. Você pode usar o que quiser. Depende totalmente de você. Agora, finalmente, na função handle submit, nós no console registramos esse objeto de usuário. Salve as alterações e dê uma olhada, preencha o formulário e envie. Veja, aqui temos nosso objeto de usuário. Além disso, precisamos converter esse número de telefone em número inteiro. Então, envolva esse valor com parênteses e o que usamos, certo, analise int Agora, aqui também temos um pequeno problema. Sabemos que todos os campos de entrada no SDML têm uma propriedade de valor para manter seu próprio estado Mas com essa implementação, também temos a variável de estado do usuário. Portanto, é possível que a propriedade e as entradas fiquem fora de sincronia Isso não ocorrerá muitas vezes, mas é melhor prevenir do que remediar. Então, para resolver esse problema, adicione a propriedade value e defina como nome do ponto do usuário, e também aqui o valor para o telefone do ponto do usuário Então, aqui podemos chamar esse campo de entrada como um componente de controle porque seu estado é totalmente controlado pelo react. Isso significa simplesmente que o valor dessa entrada não é gerenciado pela cúpula, mas é controlado pelo estado do componente 121. Gerenciando formas com React Hook Form: Agora, aqui temos apenas dois preenchimentos de entrada. Amanhã, se nosso formulário ficar mais complexo , gerenciar o formulário com used se tornará mais difícil e demorado pois para cada campo de entrada, precisamos definir propriedades como valor e evento onchange Nessa situação, podemos usar uma das bibliotecas mais populares, que é o react hook form. Essa biblioteca nos ajudará a criar formulários rápidos e não precisamos nos preocupar com o gerenciamento do estado do formulário. Essa biblioteca faz isso automaticamente no último código. Então abra o terminal e, no novo terminal, escreva NPM, eu reajo, gancho em 7,43 0,9 e pressione enter Agora, minimize esse terminal. Agora, no topo do nosso componente, temos que importar um gancho chamado use form da biblioteca de formulários react hook. Agora, em nosso componente funcional, chamamos isso de use form hook. Esse formulário de uso retorna um objeto de formulário. Então, armazenamos isso em uma variável chamada formulário e, depois disso, basta consolar ou registrar esse formulário para ver o que estamos obtendo nesse objeto de formulário Salve as alterações e dê uma olhada. Veja, aqui temos muitas propriedades e métodos, como lidar com envio, registro, redefinição, redefinição de preenchimentos e assim por diante Então, aqui podemos desestruturar nosso formulário. E antes de tudo, precisamos do método de registro. Esse método de registro usa o nome do preenchimento como argumento e retorna algumas propriedades. Deixe-me mostrar o que quero dizer. Então, aqui no local deste formulário, adicionamos a função de registro e passamos aqui o nome do preenchimento. Digamos nome. Salve as alterações e dê uma olhada. Veja aqui, obtemos esse objeto com alguns preenchimentos como nome no desfoque na alteração e atributo F. Então, essencialmente, essa forma de gancho de reação usará o gancho f para lidar com o formulário. Então, como eu disse, temos que usar essa forma de gancho de reação para a forma complexa. E quando temos uma forma complexa, usamos o gancho f. Então, no lugar dos atributos de mudança e valor, podemos adicionar calibradores, e aqui chamamos essa função de registro E passe aqui nosso nome de preenchimento de entrada, que é nome. Agora, como acabamos de ver, essa função retorna algumas propriedades. Então, para adicionar isso aqui, podemos usar o operador spread. mesmo que fazemos neste preenchimento de entrada, removemos essas propriedades e adicionamos aqui função de registro e passamos aqui nosso nome de preenchimento, que é telefone e simplesmente espalhamos isso. Portanto, agora não precisamos dessa variável de estado e também removemos essa função de envio do identificador. Agora, aqui em nosso gancho de uso do Form, obtemos mais um método chamado handle submit. Essa função de tratamento de envio é usada para lidar com o envio de formulários. Então, aqui chamamos esse identificador função de envio em um evento de envio. E como argumento, temos que passar uma função de retorno de chamada E nessa função, recebemos nossos dados do formulário. Então, aqui obtemos os dados do formulário e simplesmente registramos pontos desses dados do formulário Então, quando enviarmos o formulário, essa função de seta será executada de forma simples assim. Salve as alterações e dê uma olhada. Preencha o formulário. E clique em enviar e veja aqui que obtemos nossos dados e não precisamos escrever muito código. Agora, aqui estamos recebendo esse número de telefone como uma string. Então, para isso, temos que passar o segundo argumento nessa função de registro. Então, objetamos e definimos o valor como número como verdadeiro, salvamos as alterações e atualizamos a página, preenchemos o formulário e aqui obtemos nosso número Então está funcionando. Em aplicativos do mundo real, não queremos simplesmente consultar ou registrar esses dados no envio, mas chamaremos a API ou muitas outras coisas. Então, em vez de definir essa lógica aqui, podemos definir separadamente essa função. Então corte essa função de seta, e aqui criamos uma nova função chamada de envio e simplesmente cole nossa função de seta aqui e passe isso para enviar aqui. Você pode ver agora que nosso formulário parece limpo e mais fácil de manter Esse é o poder da biblioteca de formulários react Hook. 122. Validação de formulários: Portanto, na aplicação do mundo real com formulário de construção, também precisamos aplicar a validação do formulário para o nosso formulário. Então, vamos primeiro entender o que é validação de formulários. A validação do formulário é uma técnica para garantir que o usuário insira os dados corretamente ou não. Por exemplo, aqui temos nosso nome preenchido e o usuário insere apenas dois caracteres, então temos que mostrar o erro ao usuário, como se o nome tivesse três ou mais caracteres. Enfrentamos esse tipo de erro muitas vezes. Isso é chamado de validação de formulário. Aplicar a validação usando o formulário react hook é muito fácil. Defina o segundo parâmetro, passamos aqui nosso objeto de validação e, dentro dele, adicionamos a propriedade de validação, como necessária, para dois e o comprimento mínimo para três. Salve as alterações e dê uma olhada Sem escrever nada, clique em enviar e veja aqui não obtemos nada porque o formulário react hook só será enviado ao formulário se todos os campos forem validados Se escrevermos três ou mais caracteres, somente então nossa função de envio será executada. Agora vamos ver como podemos obter erros do nosso formulário. Então, para isso, temos uma propriedade chamada form state neste gancho de formulário de uso. Adicione isso aqui e simplesmente registre o estado do formulário no Consol. Salve isso e dê uma olhada, atualize a página e veja aqui o objeto e, dentro dele, temos algumas propriedades, como erros no carregamento, envio, validade e assim por diante Vamos simplesmente imprimir erros de formatstate dot. Salve isso, atualize a página. E veja que atualmente temos um objeto vazio. E no momento em que enviamos o formulário, recebemos aqui um erro com a propriedade do nome. E dentro deles, obtemos tipo desse erro que é necessário. Se escrevermos aqui uma letra, obteremos outro erro com o tamanho médio do tipo. Então, usando esse objeto de erros, podemos exibir erros. Então, após nossa caixa de entrada, adicionamos uma tag de ênfase e atribuímos a ela um nome de classe, formulário e erro de sublinhado E dentro disso, adicionamos digite seu nome. Agora, queremos mostrar esse erro somente se tivermos erro de nome. Portanto, envolva essa ênfase com colchetes Cl e adicione aqui os erros de ponto de formato de estado de condição Agora, em vez de escrever erros de ponto Fmst, podemos desestruturar a propriedade de erros do estado do Formulário Então, na parte superior, adicionamos aqui dois pontos e aqui obtemos erros. Remova esse registro de pontos do console. Não precisamos disso. Agora, na parte inferior, podemos usar erros: nome do ponto, ponto de interrogação, tipo de ponto igual ao necessário. Se for verdade, somente mostraremos esse erro. Agora você pode perguntar por que eu adiciono aqui um ponto de interrogação. Esse ponto de interrogação e ponto final são chamados de encadeamento opcional Precisamos disso porque o assunto dos erros pode estar vazio, o que significa que, se não tivermos erros nesse campo de nome, não obteremos erros na propriedade de nome de ponto e, se não tivermos essa propriedade de nome de ponto de erro , queremos acessar essa propriedade de tipo isso nos dará erro. Esse ponto de interrogação informará ao navegador se o nome do ponto de erro está disponível, somente então verifique essa condição, caso contrário, ignore-a. Agora, vamos adicionar erro para o comprimento médio. Duplique essa linha e aqui adicionamos o comprimento médio. E também altere essa mensagem de erro para que o nome tenha três ou mais caracteres. Salve as alterações e dê uma olhada. Envie um formulário e veja aqui que recebemos essa mensagem de erro. Por favor, insira seu nome. E se escrevermos algo , a mensagem de erro mudará para que o nome tenha três ou mais caracteres. E se escrevermos três ou mais de três caracteres , o erro desaparece, e isso é muito legal, certo? Vamos mudar essa cor de erro. Portanto, no arquivo CSS de pontos da página de login na parte inferior, adicionamos o erro de sublinhado do ponto FM E nos colchetes de Cali, adicionamos cor ao vermelho Diga as alterações e veja, aqui temos um erro na cor vermelha. 123. Validação de formulários com base em esquema: Então, na lição anterior, tivemos a validação do formulário entre nossa marcação. Agora, se no futuro tivermos uma forma complexa , nossa marcação ficará muito complexa e nosso código não será mais sustentável Então, nessa situação, podemos usar outra técnica chamada validação baseada em esquema Portanto, na validação baseada em esquema, podemos manter todas as nossas regras de validação em um único lugar Existem algumas bibliotecas como Yup e Zod. Atualmente, Zod é muito famoso, então vamos usar isso. Abra o terminal e no novo terminal, à direita NPM, eu Zod Ou se você quiser instalar a mesma versão que estou usando, adicione aqui em 3.21 0.4 e pressione enter Ótimo, minimize esse terminal. Agora, na parte superior do nosso componente, importamos um método chamado Z do Zod Usando esse Z, podemos definir o esquema para nosso formulário. Em palavras simples, o esquema é um conjunto de regras para campos. Agora, quero alterar nossos campos do formulário para e-mail e senha. Eu apenas uso os campos de nome e fonte para explicar sobre o formulário. Então, em nosso formulário, alteramos esse rótulo para e-mail, também aqui e-mail e também alteramos esse ID para e-mail. E dentro dessa função de registro, também mudamos isso para e-mail. E aqui também podemos alterar o tipo de entrada para e-mail. Altere esse espaço reservado para inserir seu endereço de e-mail. Agora, depois disso, mudamos esse telefone para a senha. E também aqui senha, digite a senha, ID para senha e espaço reservado para inserir sua senha E nessa função registrada, também passamos a senha. Agora, vamos definir o esquema para esses dois preenchimentos. Então, no topo, estamos em z dot Object. Agora, dentro dessa função, temos que passar um objeto, que tem todos os campos e também regras para esses preenchimentos Portanto, nosso formulário de login tem o primeiro e-mail, que é string, então Z dot string dot email. Este método verificará se nosso e-mail é válido ou não. Além disso, definiremos um mínimo de três caracteres. Então, aqui definimos três regras para nosso campo de e-mail, string, e-mail e no mínimo três caracteres. Agora, o mesmo que fazemos para o campo de senha. Uma sequência de pontos e média para oito. Se você quiser aplicar mais regras de validação , confira a documentação do Zo . É muito simples. Aqui, preparamos nosso esquema para realizar preenchimentos, para que possamos armazená-lo em uma variável chamada Agora você pode se perguntar: como podemos aplicar esse esquema ao nosso formulário Então, para isso, precisamos de mais uma biblioteca chamada Hook Form resolvers Então abra o terminal e escreva NPM, eu no Hook Form slash Em 3.0 0.1 e pressione Enter. Ao usar esses resolvedores, podemos adicionar facilmente nosso esquema or em nosso formulário de hook de reação Agora, no topo, importamos o resolvedor ZR do formato de gancho, resolvedores de barra SOD. Bom. Agora, em nosso gancho de formulário de uso, passamos aqui o objeto e, dentro dele, temos uma propriedade chamada resolvedor, e aqui adicionamos o resolvedor ZR e, dentro dele, passamos nosso esquema. Agora vamos recapitular rapidamente o que fizemos nesta lição Então, primeiro de tudo, usando o método Z, criamos nosso esquema de validação, que é um conjunto de regras para preenchimento de formulários E então, usando o dissolvedor Zod, aplicamos esse esquema à nossa forma de gancho de reação Portanto, quando tivermos erros, isso será adicionado diretamente ao erro do formulário de gancho de reação. Simples assim. Agora vamos ver como podemos exibir esses erros. Então, primeiro de tudo, na função de registro, podemos remover esse objeto de validação. Nós não precisamos disso. Além disso, podemos remover essa condição, e aqui não precisamos verificar esse tipo de erro. Em vez disso, podemos fazer algo assim. Se tivermos erros no e-mail, somente então exibiremos o erro. Além disso, no local dessa mensagem de erro codificada, podemos usar a mensagem de ponto de e-mail de erros Essa mensagem é a mensagem padrão adicionada por Zod, mas também podemos personalizar, então vamos copiar esse trecho de código daqui e colá-lo para preencher a senha Agora, no local deste e-mail, adicionamos erros dot password e também erros dot password dot message. Salve as alterações e dê uma olhada. Atualize a página e não escreva nada e envie. Veja aqui que recebemos uma mensagem de erro como e-mail inválido e a string deve conter pelo menos oito caracteres O e-mail e a senha são preenchidos e enviados. Veja, aqui temos nossos dados, então está funcionando. Agora, vamos personalizar essa mensagem de erro. Então, para adicionar nossa mensagem personalizada, podemos passar aqui um objeto com a propriedade de mensagem. E passe aqui a mensagem, insira um endereço de e-mail válido. Além disso, para essa senha, passamos o objeto e a mensagem para a senha deve ter pelo menos oito caracteres. Salve as alterações e dê uma olhada, atualize a página e envie o formulário Veja, recebemos nossa mensagem de validação personalizada, para que você possa ver como é simples e fácil lidar com o formulário e a validação usando o formulário react hook e a biblioteca SOT. 124. Exercício para formas: Agora é hora de fazer um pouco de exercício. Quero que você gerencie este formulário de inscrição com o react Hook da biblioteca e também adicione validação para esses preenchimentos de entrada Não se preocupe em lidar com a entrada de imagens, lidar com preenchimentos de entrada e adicionar validação para eles. Isso é muito fácil, e eu sei que você pode fazer isso. Aqui estão os detalhes da mensagem personalizada de validação e, ao usá-los, você precisa adicionar regras de validação. Agora, antes de começar este exercício, quero lhe dar a página de inscrição porque, nesta seção, nosso foco principal está no formulário Então, abra a pasta de recursos, que você baixou no início deste curso, abra Projeto 3 e vá para a pasta de exercícios do Formulário. Aqui, adicionei o componente da página de inscrição e também o arquivo CSS Então, curtimos esses dois arquivos e soltamos esses arquivos na pasta de autenticação. Agora vamos adicionar essa página em nosso componente de aplicativo. Então, comente esta página de login e adicione aqui a página de inscrição, e estamos prontos para começar. Na parte inferior, também adiciono uma mensagem de validação para este formulário. Portanto, dedique algum tempo a este exercício e depois volte e veja esta solução. 125. Solução deste exercício: Agora, vamos ver a solução desse exercício. Eu sei que você resolve este exercício, e se você persistiu em alguma coisa, então não se preocupe, você pode aprender agora, mas pelo menos você tenta e isso é mais importante. Portanto, não vou demorar muito e mostrar diretamente a solução. Então, primeiro de tudo, na parte superior, inserimos use form hook da biblioteca de formulários react hook. E dentro do nosso componente, chamamos isso de use form hook. E armazene isso de forma constante e desestruture diretamente o método de registro e também manipule o método de envio Agora, no campo de entrada do nome, adicionamos a função de registro e passamos aqui nosso nome de preenchimento, que é nome. Como sabemos, esse método de registro retorna alguns atributos e eventos. Para adicionar isso, temos que espalhar isso. Vamos copiar isso e colar em todos os outros preenchimentos de entrada. Pressione Alt ou opção e, com um clique, criamos vários cursores e simplesmente os colamos. Agora, para e-mail, adicionamos aqui e-mail, aqui adicionamos senha. Depois disso, confirme a senha e, finalmente, o endereço de entrega. Agora, vamos lidar com o envio. Então, em nosso formulário, adicionamos um evento de envio e, dentro dele, chamamos esse identificador de função de envio. E dentro disso, passamos nossa função, chamamos de submit. Agora, vamos definir essa função. Então, contras ao enviar, temos aqui os dados do formulário, função de seta e vamos simplesmente consultar ou registrar os dados desse formulário. Salve as alterações e dê uma olhada, preencha este formulário. E clique em Con Submit. C, aqui temos nossos dados. Portanto, lidamos com nosso formulário com sucesso. Agora vamos adicionar validação usando o Zod. Então, no topo, importamos Z do Zod e também importamos o gancho do resolvedor ZR do resolvedor Zod Por que precisamos desse resolvedor ZR correto para aplicar o esquema com a forma de gancho de reação Agora vamos criar um esquema para nosso formulário de inscrição. Então, escrevemos um objeto de ponto e, dentro dele, adicionaremos nosso objeto de validação. primeiro campo é o nome, que é uma sequência de pontos Z ponto Min 23. E aqui passamos nossa mensagem de erro personalizada. Portanto, a mensagem do objeto para nomear deve ter pelo menos três caracteres. Em seguida, temos o e-mail, que é uma sequência de pontos, então e-mail com pontos. E dentro disso, passamos mensagem. Por favor, insira um e-mail válido. Depois disso, adicionamos a senha, que é uma sequência de pontos. Também significa oito e passe aqui a mensagem personalizada para a senha deve ter pelo menos oito caracteres. Agora, para confirmar a senha, basta adicionar uma sequência de pontos. Eu vou te explicar o porquê em apenas um minuto. E, finalmente, temos o endereço de entrega, que também é uma string e também tem 15 caracteres. E passe aqui, nossa mensagem personalizada para endereçar deve ter pelo menos 15 caracteres. Precisamos comparar nossa senha com nossa senha de confirmação preenchida. Então, para isso, depois desse objeto, adicionamos um método refinado. Dentro disso, podemos adicionar a função de retorno de chamada, que tem parâmetro de dados Basta ver isso e suas cotas desaparecerão. Agora, aqui passamos a condição, os dados, que são o objeto atual do nosso preenchimento de formulário, senha de ponto é igual aos dados ponto de confirmação Agora, para isso, também podemos passar uma mensagem personalizada no segundo parâmetro. A mensagem para confirmar a senha não corresponde e precisamos adicionar mais uma propriedade chamada path. E aqui entre colchetes, adicionamos nosso nome de campo, que é a senha confirmada Então, basicamente, isso significa que se senha do ponto de dados e a senha de confirmação do ponto de dados não forem iguais, receberemos essa mensagem de erro nosso campo de confirmação da senha, simples assim. Então, aqui temos o esquema pronto. Então, vamos armazenar isso em uma variável chamada esquema. Bom. Agora, precisamos apenas adicionar esse esquema em nosso formulário de hook de reação Então, em uso do gancho de formulário, adicionamos um objeto e, dentro dele, temos o resolvedor, e aqui chamamos ZorrSolver e passamos Agora, vamos simplesmente exibir esses erros de validação. Portanto, neste formulário de uso, obtemos o estado do formulário e aqui podemos desestruturar os erros Agora, abaixo dessa entrada de nome, adicionamos pacotes Cali, e aqui adicionamos se o nome do ponto de erro for verdadeiro então exibimos a tag de ênfase com o nome da classe, erro de sublinhado do formulário E dentro disso, adicionamos erros nome do ponto mensagem do ponto. Copie essa condição e cole-a abaixo de todos os outros preenchimentos de entrada Agora, para e-mail, que neste caso , dois erros, ponto e-mail para senha, que neste caso, para erros, ponto senha. Para confirmar a senha, alteramos isso para errors dot confirm password. E, finalmente, para endereço de entrega, alteramos isso para endereço de entrega com pontos de erro. Salve as alterações e dê uma olhada, envie um formulário e veja aqui que recebemos todas as mensagens de validação. Agora preencha o formulário completo e clique em Enviar. Veja, obtemos nossos dados de entrada. Você pode ver com que rapidez e facilidade podemos lidar com formulários e validações usando o formulário React e a biblioteca ZO. 126. Como lidar com o upload de imagens: Agora vamos ver como podemos lidar com formulários com imagem de carregamento ou qualquer upload de arquivo. Portanto, existem várias maneiras de lidar com a imagem da carga. Quero mostrar meu método favorito e mais fácil. Então, aqui, primeiro de tudo, criaremos uma variável de estado usando apenas trechos e daremos a ela um nome, perfil e definiremos o pico do perfil E como valor padrão, passamos aqui null. Também no topo, temos que importar o estado do react. Bom. Agora, quando adicionarmos nossa imagem, vamos defini-la no estado de pico do perfil, mesma forma que fazemos com os preenchimentos de entrada Portanto, nesta entrada de arquivo, adicionamos um evento inalterado e aqui obtemos o objeto do evento, função de seta e definimos o pico do perfil Defina arquivos de pontos de destino. Nesses arquivos, podemos ter uma lista de. Aqui, precisamos apenas da primeira imagem, então indexe até zero. Agora vamos ver o que obtemos nesse pico de perfil. Basta consolar o registro de pontos, dar uma olhada no perfil, salvar as alterações e dar uma olhada Atualize a página e, primeiro, obtemos null, que é o valor padrão Agora vamos fazer o upload da imagem e ver aqui obtemos nosso objeto de arquivo, que tem algumas propriedades como nome, tamanho, tipo, etc Então, quando temos que carregar a imagem para o servidor, temos que enviar esse objeto de arquivo para o nosso back-end. Não se preocupe, veremos isso na próxima seção. Por enquanto, vamos nos concentrar em lidar com o upload de imagens. Obtivemos esse objeto de imagem com sucesso. Agora, precisamos exibir apenas nossa imagem selecionada dentro dessa visualização da imagem. É muito simples. Deixe-me te mostrar. Aqui na fonte da imagem no local deste usuário, adicionamos aqui uma condição. Se o pico do perfil não for nulo, renderizaremos o pico do perfil, caso contrário, manteremos nossa imagem padrão, que é usuário Defina as alterações e dê uma olhada, reprima a página e faça o upload de uma imagem Veja aqui nossa imagem padrão sumiu, mas não estamos obtendo a imagem selecionada. O motivo é que simplesmente retornamos nosso objeto de seleção de perfil, que não é a imagem. Temos que converter esse objeto em imagem, e como podemos fazer isso simplesmente usando o método creat Object URL Portanto, aral dot create Object URL é um método em JavaScript que nos permite criar um URL exclusivo para um determinado arquivo Esse URL é usado para exibir a imagem na tag de imagem ou reproduzir um arquivo de áudio ou vídeo no Media Player. Observe que esse é apenas um URL temporário, o que significa que, se fecharmos nossa página , ela desaparecerá. Então, no local desse pico do perfil, passamos l dot create Object URL e dentro dele, passaremos nosso objeto de imagem, que é o pico do perfil, salvaremos as alterações e daremos uma olhada. Veja, aqui temos nossa imagem selecionada. Você pode ver como é simples e fácil lidar com o upload de imagens no react. Agora, com isso, concluímos nossa seção de formulários avançados. Agora, na próxima seção, conectaremos nosso aplicativo react ao back-end real que criei para este projeto. S na próxima seção. 127. Seção 12 Conexão com o backend: Bem-vindo à 12ª seção do curso definitivo de reação. Nesta seção, conectaremos nosso aplicativo react ao back-end. Eu criei esse back-end, especialmente para esse aplicativo usando nodejs, express Js e MongoDB porque, acima de tudo, desenvolvedores gostam de usar Aqui, quero esclarecer uma coisa: não estamos criando o Bend porque esse não é o escopo deste curso e nosso foco principal é aprender a reagir. Na próxima lição, instalaremos o Mongo DB em nosso sistema, que é o banco de dados Se você já tem o Mongo Di B em sua máquina, então também na minha sugestão, tente instalar a versão mais recente do Mongo Di B. Vamos começar esta seção 128. Instale o MongoDB e o Compass no Windows: Então, vamos instalar o Mongo Di B no Windows. Se você tem Mac, pode pular esta lição. Então, primeiro de tudo, acesse mongodib.com e *** Em seguida, na Community Edition, selecione Community server. Role para baixo. E aqui, podemos selecionar a versão do MongoDB. Na minha recomendação, por favor, não a altere. Em seguida, podemos selecionar nossa plataforma e, em seguida, selecionar o pacote. Não se preocupe com isso. Basta clicar em Baixar. Veja como o download é iniciado. Agora, depois de concluir o download, abra essa configuração e ela solicitará permissão de instalação. Permita isso. Clique em Avançar, aceite o contrato, clique em Avançar, clique em Concluir. Depois disso, a partir daqui, você pode alterar o caminho da instalação. Mas se você não tiver nenhum motivo, não o altere. Basta clicar em Avançar. Certifique-se de selecionar esta bússola de instalação do MongoDB, que é o aplicativo para o Mongo DB no qual podemos visualizar todas as tabelas do banco de dados e editar Clique em Avançar e instale. Isso levará cerca cinco a 10 minutos porque também estamos instalando o Mongo DB compass Depois de concluir a instalação, vamos verificar isso. Então, no prompt de comando, escreva Mongo e pressione Enter. Recebemos esse erro. O Mongo não é reconhecido como um comando interno ou externo Então, para resolver esse erro, precisamos acessar novamente o site do Mongo DB e aqui na parte superior, produtos e ferramentas, SeaClnw, clique em SeaClnw E basta baixar isso. Agora abra a pasta de download e o zip extra de pontos, que baixamos. Abra essa pasta e, na pasta Bin, obtemos o arquivo x do Mongo Então copie isso e abra a unidade C. Arquivos de programa, servidor MongoDB, feijão 6.0 e cole aqui Esses Mongos são nossa célula MongoDB. Agora temos que fazer apenas uma última etapa, que é definir o caminho para a variável de ambiente. Copie esse caminho no início, pesquise a variável de ambiente e abra a edição das variáveis de ambiente do sistema. Agora clique nessas variáveis de ambiente e nas variáveis do sistema, selecione o caminho e clique em Editar. Agora temos que adicionar esse caminho de vinculação aqui, clicar em Novo e acompanhar esse caminho. Clique em OK. Ok, e tudo bem. Reinicie o prompt de comando e abra-o novamente. Aqui, Mongos e aperte Enter. Obteremos a célula Mongo Di B, então instalaremos com sucesso o Mongo Di B em nosso sistema Agora, deixe-me fazer um rápido tour sobre a bússola Mongo DiBe Portanto, quando abrimos esse aplicativo pela primeira vez, precisamos inserir nossa string de conexão, que é host local. Então, escreva essa string de conexão, que eu escrevo e clique em Cnnect Veja, aqui temos todos os nossos bancos de dados e tabelas. 129. Configurando o backend: Depois de instalarmos o MongoDB e Mongo DB compass em nosso sistema, é hora de configurar nosso back-end e preencher Agora você pode perguntar: qual é a necessidade desse back-end e por que estamos adicionando dados em nosso banco de dados Então, anteriormente, vimos como chamar uma API pública no react. Mas, à medida que criamos sites para empresas, muitas empresas têm seu próprio back-end Então, criei esse back-end para nosso aplicativo, e também não é necessário apenas o back-end Temos que armazenar dados de nossos produtos e dados de usuários em nosso banco de dados. Assim, podemos obter esses dados e exibi-los em nosso aplicativo. Atualmente, em nosso Mongo Di B Compass, podemos ver que temos apenas um banco de dados gerado pelo sistema Temos que adicionar os nossos. Abra a pasta de recursos e, na pasta Project three, temos o back-end do cartwis Abra isso e abra no código VS. Agora você não precisa se preocupar com nada dentro desse back-end. Basta fazer o que eu estou fazendo e você está pronto para ir. Então, primeiro de tudo, temos que instalar todos os pacotes. Então, abra o terminal, escreva NPM install e pressione Enter. Agora, neste ponto de dados JSNfle, eu adiciono alguns dados para produtos e categorias Então, para preencher esses dados em nosso banco de dados, basta escrever aqui os produtos node, arquivo dot js e pressionar Enter. E veja aqui que banco de dados é preenchido ou restaurado com sucesso. Vamos verificar isso. Mude para Mongodi, nós compassamos e atualizamos E aqui podemos ver o banco de dados Catews. Abra isso e dentro desse banco de dados, atualmente temos apenas duas tabelas, categorias e produtos. Abra o, e aqui obtemos os dados dessas categorias. E se abrirmos produtos , obteremos dados de produtos. A partir daqui, podemos visualizar, atualizar e excluir esses registros. Agora podemos minimizar essa bússola Mongo D B e em nosso código Ben VS, executamos node index dot js e C, obtemos que o servidor está rodando na porta 5.000 e também no banco de dados conectado. Vamos verificar se essa API está funcionando ou não. Abra uma nova guia no navegador e na URL, escreva a coluna 5.000 do host local porque nosso back-end está sendo executado na categoria de API do host local 5.000 e pressione Enter Veja, aqui temos essa matriz de todas as categorias, então está funcionando. Não feche este terminal. Sem esse terminal funcionando. Não podemos conectar nosso aplicativo de reação ao Ben. Portanto, certifique-se de que ele esteja em execução enquanto fazemos chamadas de API. 130. Implementando roteamento em nosso aplicativo: Agora, antes de começarmos a corrigir os dados, vamos implementar o roteamento em nosso aplicativo, pois atualmente precisamos adicionar componentes manualmente em nosso componente de aplicativo Então, abra o terminal e, no novo terminal, escrevemos NPM, instalamos, reagimos ao roteador Dom em 6.11 0.2 e pressionamos Bom, minimize esse terminal. Agora, qual é a primeira etapa para aplicar o roteamento? Certo, temos que envolver nosso aplicativo com o componente roteador do navegador. Então, abra o componente principal e, na parte superior, importamos o roteador do navegador do react Router doom e envolvemos nosso componente de aplicativo com o componente roteador do navegador Salve as alterações e agora abra o componente do aplicativo. Aqui temos todas as páginas que criamos, e é por isso que eu disse para você comentar essas páginas aqui, para não esquecermos de adicionar nenhum componente de página. Além disso, vamos definir todo o roteamento em um componente separado. Caso contrário, nosso código ficará feio. Na pasta components, adicionamos mais uma pasta chamada routing e, dentro desse roteamento, criamos um novo componente chamado routing Vamos adicionar aqui um clichê e, na parte superior, importamos, em primeiro lugar, rotas e rotas do roteador react Agora vamos remover esse devido e adicionar aqui o componente de rotas. E dentro dessas rotas, podemos adicionar nosso componente de rota única. Mas antes disso, vamos adicionar todas as importações do componente do aplicativo. Aqui, recortamos todas essas importações e as colamos em nosso componente de roteamento Bom. Agora vamos definir a rota. Então, primeiro de tudo, encaminhe o caminho para a barra, que é a página inicial e o elemento para a página inicial Agora, depois disso, adicionamos outro caminho de rota para cortar produtos e um elemento para a página de produtos Agora duplique essa rota mais cinco vezes. E aqui adicionamos um caminho para cortar produtos e um elemento para uma única página de produto Em seguida, temos o caminho para se inscrever e o elemento para a página de inscrição. Em seguida, temos o caminho para o login e o elemento para a página de login. Em seguida, adicionamos um caminho para o carrinho e um elemento para a página do carrinho. E, finalmente, tínhamos um caminho para meus pedidos e um elemento para minha página de pedidos. Salve as alterações e vamos definir esse componente de roteamento em nosso componente de aplicativo Portanto, remova todas essas páginas e simplesmente adicione aqui o componente de roteamento Como desenvolvedor, na minha humilde opinião, você deve sempre tentar adotar uma abordagem passo a passo Não tente implementar todas as funcionalidades ou tarefas de uma só vez. Ao fazer isso, você ficou menos preso e pode pensar com mais clareza. Salve as alterações e vamos ver como o roteamento está funcionando ou não Veja, aqui estamos recebendo um erro. É porque entramos no caminho errado. Portanto, no componente de roteamento no lugar desses componentes de fatia de período, temos que adicionar ponto duplo Selecione isso e pressione Control plus D ou Command plus D para edição de vários cursores e adicione aqui ponto final. Diga as mudanças e dê uma olhada. Veja, aqui temos nossa página inicial. Agora clique na página de produtos e veja, obtemos a página de produtos, então está funcionando. Mas temos que substituir esses links componente NewLink Então, componente p Never, temos todos esses links vinculados componente do ícone e esse link na tag âncora aqui Então, vamos substituir essa âncora componente Newlin e substituir o HRF Salve isso e, em tinta com o componente de ícone, substituímos a âncora pelo componente Newlin e pelo HRF 22 Você pode ver com que facilidade podemos modificar nosso código. E é por isso que armazenamos esse link em um componente separado. Salve isso e vamos adicionar CSS para o link ativo. Então, no arquivo CSS de pontos Navbar, aqui, adicionamos tintas NabarUnderScoe de pontos, colchetes angulares, âncora, colchetes Active Coli de pontos e definimos o peso da fonte como 600 . Diga as mudanças e dê uma olhada. Mude as páginas e veja aqui o nosso roteamento. 131. Buscando produtos: Agora, vamos chamar nossa primeira API para obter a lista de todos os produtos. E para chamar a API, usaremos o Axos, abriremos o terminal e escreveremos abriremos o terminal e escreveremos NPM install xOS e pressionaremos Minimize esse terminal e vamos primeiro definir nossa URL base de API para cada solicitação. Então, na pasta de origem, criamos uma nova pasta chamada Utils e dentro dessa pasta, criamos um novo arquivo chamado api Client Js Isso é para fazer STDPRquest usando Xos. Lembre-se, nós já criamos isso. Dentro desse arquivo, inserimos Xos a partir de Xos e depois escrevemos Xos dot RET, passando aqui nosso objeto de configuração. Neste objeto, temos a propriedade de URL base. E aqui, podemos passar nossa URL base. Então, aqui, nosso URL base é coluna SDDP, host local de barra dupla e API de barra coluna 5.000 Agora, aqui também podemos passar nossos cabeçalhos de API que você deseja enviar com nossa solicitação de API Novamente, isso depende da API. Se você é desenvolvedor de front-end , obtém todos os detalhes da API por desenvolvedores de back-end Você não precisa se preocupar com isso. Vou vincular nossa documentação da API na pasta de recursos ou você pode baixá-la dos anexos Agora vamos exportar isso como padrão. Guarde isso. E agora, quando queremos fazer uma solicitação de API com o AXIOS, simplesmente inserimos esse cliente de API e fazemos o mesmo que fazemos com os XOs originais Então, quando se trata de uma página de produto, aqui precisamos decidir onde precisamos chamar a API dos produtos. Portanto, em nosso componente de lista de produtos, estamos exibindo todos os nossos produtos. Então, podemos chamar nossa API aqui. Então, primeiro de tudo, neste componente, precisamos criar uma variável de estado para armazenar a lista de produtos. Então escreva use e pressione tab para importar ust e escreva-nos trechos e dê a ele um nome, produtos, conjunto de produtos e, como valor padrão, passamos aqui Agora, crie também mais uma variável de estado chamada error e defina erros. E como valor padrão, passamos uma string vazia. Agora, no gancho que chamamos de API de nossos produtos, chamamos nossa API in use effect hook porque precisamos obter dados quando o componente é renderizado Então, use o efeito e, dentro dele, função de retorno de chamada e o segundo parâmetro é para a matriz de dependência. Agora, vamos chamar nossa API. Na parte superior, importamos o cliente de API, que acabou de ser definido a partir do cliente de API Utils Agora, vamos adicionar aqui o ponto do cliente da API. Agora, dentro disso, passamos nossa URL, que é slash products Essa expressão retorna uma promessa. Então, resposta, função de seta, defina os produtos. Agora, aqui precisamos passar nossa matriz de produtos. Então, para verificar essa resposta, abra uma nova guia no navegador e escreva nosso método GAT Host local, API da coluna 5.000 , corte os produtos e pressione Enter E veja aqui, obtemos esse objeto de resposta com várias propriedades. Por enquanto, não vamos nos preocupar com isso. Só fazemos uma tarefa por vez. Então, de volta ao código VS, e aqui passamos dados de pontos de resposta, que são nosso objeto, e obtemos aqui produtos de pontos. Agora, para lidar com erros, adicionamos o método catch e aqui obtemos o erro, função de erro e definimos o erro como mensagem de ponto de erro. Agora vamos ver se obtemos os dados de nossos produtos ou não. Salve as alterações e volte ao nosso aplicativo. Abra as ferramentas do desenvolvedor e abra a etapa do componente aqui. Pesquise a lista de produtos e aqui temos nossa lista de produtos. Selecione e veja neste estado, obtemos nossa matriz de produtos que tem oito produtos, então está funcionando. Agora, vamos exibir esses produtos no cartão. Portanto, no lugar dos vários cartões de produtos, aqui no mapa de pontos dos produtos, obtemos um único produto, função de erro e simplesmente devolvemos o componente do produto, sem esquecer de adicionar o atributo-chave ao ID de sublinhado do ponto do produto, que é o ID exclusivo de todos os produtos Salve os NGs e dê uma olhada. Veja, aqui temos um cartão de oito produtos. Vamos lidar com o erro dessa solicitação de API. Portanto, antes dessa lista de produtos, adicionamos uma condição. Se o erro estiver disponível, imprimimos esse erro aqui. Portanto, enfatize a tag e dê a ela um nome de classe em caso de erro. E aqui adicionamos esse erro. Agora, vamos gerar um erro. Então, no local dessa URL da API, cometemos um erro de digitação, salvamos as alterações e damos uma olhada, reprimimos a página e vemos aqui que obtemos esse Perfeito. Vamos remover esse erro de digitação Agora, na próxima lição, tornaremos nosso componente de cartão de produto dinâmico. 132. Criando um cartão de produtos dinâmico: Agora vamos tornar nosso componente de cartão de produto dinâmico, abrir um único objeto de produto, só para ver o que está dentro dele. Aqui temos avaliações, que exibimos aqui, ID de sublinhado, imagem do título é matriz Não precisamos de matriz, precisamos apenas da primeira imagem para pôster. Agora, depois disso, temos preço e estoque. Então, componente do cartão de produto, e aqui, primeiro adicionamos todos os adereços que precisamos nesse componente Coloque os adereços da estrutura. Primeiro obtemos a identificação, depois as imagens. Depois disso, precisamos de preço. Depois disso, o título, a classificação, a classificação contam e, finalmente, precisamos de estoque. Agora vamos substituir os valores estáticos por esses adereços. No lugar deste iPhone, adicionamos imagem. Depois disso, aqui adicionamos o preço. Então aqui nós adicionamos o título. Depois disso, a classificação e, aqui, a classificação conta. Agora só mostraremos esse botão de cabeça para carta se o estoque for maior que zero. Então veja como este botão e pressione o colchete esquerdo. Isso envolverá nosso código entre colchetes da CLI. Se você pressionar os colchetes direitos , esse código será substituído pelo colchete direito. Aqui passamos a condição. Se o estoque for maior que zero, mostre apenas este botão de cabeça para o cartão. Agora, no topo, desculpe, esquecemos de adicionar o ID do produto neste link Então, removemos essa etiqueta âncora e adicionamos aqui Novo link ou componente de link e atributo aos colchetes, Batak, slash product, slash dollar Então, terminamos com o componente do cartão de produto. Agora só precisamos passar esses adereços para o cartão do produto. Então, na parte superior, removemos essa importação de imagem, salvamos esse arquivo e abrimos o componente da lista de produtos. Aqui, após essa chave, passamos o ID para o ponto do produto, o ID de sublinhado, a imagem para a imagem do ponto do produto e aqui obtemos a primeira imagem Preço em relação ao produto, preço por ponto , título por produto, classificação por ponto do produto, rotação por ponto A contagem de avaliações de acordo com a contagem de pontos do produto reverte a contagem de pontos. E estoque a produto ponto Estoque. Salve as alterações e dê uma olhada. Veja aqui que obtemos todos os detalhes, mas não estamos obtendo a imagem. Vamos ver por que não estamos obtendo essa imagem. Clique com o botão direito na imagem, selecione a imagem, abra esse DU e na tag Anchor, temos nossa imagem Aqui podemos ver que estamos passando apenas o nome da imagem na fonte. Precisamos passar o URL da imagem aqui. Eu já tinha detalhes sobre isso na documentação da API. Então, em nosso componente de cartão de produto, no lugar desta imagem, Bates, aqui adicionamos HTTP, coluna dupla para nossa barra, host local, coluna 5.000 Corte a barra de produtos aqui, adicionamos o nome da imagem do nosso produto. Então, imagem do dólar, defina as alterações e dê uma olhada. Veja aqui a nossa imagem. 133. Buscando categorias: Agora vamos buscar todas as categorias e exibi-las nessa barra lateral Então, no componente da barra lateral dos produtos, e aqui também fazemos o mesmo para buscar dados Em primeiro lugar, criamos uma variável de estado usando ust Hook e damos a ela um nome, categorias e categorias definidas. E, como padrão, passamos uma matriz vazia. E depois disso, criamos mais uma variável de estado chamada errors e definimos erros, e passamos uma string vazia como valor padrão. Agora, vamos chamar nossa API in use effect hook. Então, use o efeito, e dentro disso, adicionamos a função de retorno de chamada, e aqui apenas adicionamos uma matriz vazia como dependência Agora, na parte superior, vamos importar o cliente de API para chamar a API. Aqui vamos para fullers up, Utils e API client. Bom. Agora, aqui chamamos o método dot Get do cliente API. Aqui, passamos nossa URL da API, que é a categoria de barra e sabemos que essa expressão retorna uma promessa Lidamos com a promessa com o método então. Aqui obtemos resposta, função de seta e definimos categorias para dados de pontos de resposta. Agora, para lidar com erros, adicionamos o método de cache. Aqui obtemos o erro, função de erro e definimos o erro como mensagem de ponto de erro. Guarde as dobradiças e dê uma olhada. Abra as ferramentas do desenvolvedor e abra a guia de componentes. Pesquise aqui a barra lateral dos produtos e veja aqui as nossas categorias. Agora vamos exibi-las em nossa página. Então, de volta ao código VS. E aqui adicionamos categorias DOT MAP. Dentro deles, obtemos a função de erro de categoria única e simplesmente cortamos esse link com componente de ícone e o retornamos aqui. E antes que esqueçamos, vamos adicionar Chave igual ao ID de sublinhado da categoria Agora, alteramos nosso título para nome do ponto da categoria. E envolvemos nosso link com colchetes de Cali e mudamos isso para Batis No lugar dessa eletrônica, apenas adicionamos colchetes de Cali em dólares, apenas adicionamos colchetes de Cali em dólares Agora, no lugar desta imagem E, passamos o URL da nossa imagem. Então, em impostos, STDP, coluna dupla quatro, barra, host local, coluna 5.000, categoria, barra e aqui adicionamos nossa Então, imagem de pontos da categoria. Salve as alterações e dê uma olhada. Veja, aqui temos nossas categorias. Agora vamos exibir o erro. Antes da nossa lista de categorias, adicionamos condições. Se o erro estiver disponível, imprima o erro na tag de ênfase e no nome da classe para formar o erro, e simplesmente adicionamos aqui o erro. Agora, aqui, vamos cometer um erro de digitação, salvar as alterações e dar uma olhada, atualizar a página e ver aqui obtemos nosso Remova esse erro de digitação e veja se estamos obtendo nossas categorias. 134. Criando um gancho personalizado: Agora, como podemos ver, buscar produtos e buscar categorias são quase a A única diferença é que isso é um PIURL. Assim, podemos criar nosso próprio gancho personalizado, que podemos usar para quase todos os detalhes de busca Alguns desenvolvedores acham que ganchos personalizados são um conceito assustador, mas é muito simples Portanto, ganchos personalizados são basicamente uma função reutilizável. Em termos simples, ganchos personalizados são nossos próprios ganchos que criamos para nosso próprio uso e podemos usá-los várias vezes em nosso projeto Deixe-me mostrar, então aqui na pasta de origem, criamos mais uma pasta chamada Hooks Agora, nessa pasta, criamos um novo arquivo chamado sedata dot js Agora você pode pensar: por que eu uso aqui extensão dot js em vez de dot JSX Então, a razão pela qual eu uso a extensão hear dot js é porque neste gancho personalizado, não vamos usar nenhum JSX Escreveremos nossa lógica em JavaScript simples. Vamos definir o código padrão e remover essa Não queremos devolver o JSX aqui. Agora, do nosso produto lado a componente, cortamos as variáveis de data e usamos o gancho de efeito a partir daqui e colamos em nosso componente de gancho personalizado. Agora, no topo, importamos o efeito de uso e o usamos como gancho. E também insira o cliente da API do cliente Utils API. Agora, como estamos usando esse gancho personalizado para obter dados da API, é melhor renomear o nome dessa variável de dados para data Então veja essas categorias e pressione F dois, aqui mesmo, dados. E também renomeie essas categorias definidas para definir dados. E aqui passamos null como valor padrão porque não usamos esses dados para armazenar somente matrizes Também podemos armazenar objetos nesses dados. Agora precisamos apenas alterar essa URL da API. Então, substituímos essa URL pela variável URL e também obtemos essa variável de URL como parâmetro. Bom. Agora, a partir dessa função de gancho personalizada, simplesmente retornamos dados e variáveis de erro. Salve esse arquivo e, no componente da barra lateral do produto, aqui simplesmente chamamos nosso gancho personalizado, usamos dados e passamos nosso endpoint, que é a categoria de barra Agora, esse gancho retorna um objeto com dados e erros. Assim, podemos desestruturar esse objeto e obter aqui dados e erros Além disso, podemos renomear esses dados como categorias. E aqui, antes de nossa função de mapa, adicionamos uma condição se as categorias não forem nulas, só então executamos essa função de mapa porque o valor padrão desses dados é nulo e não queremos executar o método map para Isso pode nos dar erro. Agora, vamos remover essas importações indesejadas, selecionar a importação que você deseja remover e pressionar Controle mais período ou Comando mais período e selecionar excluir todas as importações não utilizadas Veja, todas as importações indesejadas sumiram. Além disso, vamos remover isso. Salve os genes e dê uma olhada. Veja, obtemos o mesmo resultado de antes. Agora vamos usar nosso gancho personalizado para obter dados de produtos. Então, um componente da lista de produtos remova essas variáveis e use o Effect Hook. E aqui chamamos usar dados de gancho e passar e apontar para fatiar produtos Retornará dados e erros, e podemos renomear esses dados para produtos E também podemos adicionar aqui condição se os produtos não forem nulos, somente então executar esse método de mapeamento E, por fim, removemos todas essas importações indesejadas e também removemos esses colchetes Salve as alterações e obteremos um erro. Vamos abrir o console e ver aqui os produtos. O mapa de pontos não funciona porque, em nosso gancho de dados de uso, armazenamos nossos dados de pontos de resposta nessa função de dados definida. Mas a partir da API de produtos, obtemos um objeto de resposta com algumas propriedades. Você se lembra, deixe-me te mostrar. Então, basta consultar o dot log desses produtos aqui. Salve as alterações e dê uma olhada. Veja, aqui temos esse objeto de dados. E nesse objeto, temos uma matriz de produtos. Portanto, podemos usar aqui produtos de pontos de dados ou podemos reestruturar esse objeto de dados e obter produtos aqui Acho que a reestruturação é um pouco confusa para nós. Vamos remover isso agora na parte superior, alteramos esses produtos para produtos pontos de dados e também aqui para produtos de pontos de dados. E, na parte superior, simplesmente consolamos os dados do log de pontos com esses dados. Salve as alterações e dê uma olhada. Atualmente, estamos recebendo nossos produtos. Agora vamos atualizar a página e ver se estamos recebendo um erro. ferramentas do desenvolvedor e no console, estamos recebendo o erro, não é possível ler a propriedade de null Vamos ver o que está acontecendo aqui. Em primeiro lugar, em nosso gancho de dados de uso, passamos null como valor padrão Agora, no momento em que nossos dados são nulos, aqui nessa condição, estamos tentando acessar produtos de pontos de dados, e é por isso que estamos recebendo esse erro E depois disso, buscando dados do back-end, estamos obtendo esses dados em nosso console Então, para isso, podemos colocar encadeamento opcional nessa condição. Portanto, se os produtos com pontos de interrogação de dados estiverem disponíveis, somente então execute esse loop. As mudanças e dê uma olhada. Veja, agora nosso código está funcionando bem. Assim, você pode ver como podemos resolver o erro simplesmente dividindo-o em uma pequena parte. Em primeiro lugar, precisamos saber por que estamos recebendo esse erro e, em seguida, precisamos encontrar a melhor solução para isso. Não entre em pânico ao ver erros. Sempre ocorrerão erros. Depende de você, de como você lida com isso. 135. Adicionando um esqueleto de carga: Agora, atualmente, nossa página de produto está funcionando bem. Temos uma boa conexão com a Internet e também estamos obtendo dados do servidor local. Portanto, estamos obtendo dados muito rapidamente. Mas imagine que se a conexão do usuário está lenta ou nosso servidor está demorando muito , essa página do produto não parece boa. Deixe-me te mostrar. Abra o console e estamos chegando aqui um aviso. Vamos ver aqui que a chave está faltando. Portanto, no lado do produto , mas no componente deste link com o componente de ícone na parte superior, adicionamos o atributo-chave e passamos aqui o ID de sublinhado do ponto da categoria Salve isso e veja aqui o aviso desapareceu. Agora abra a guia Rede, e aqui selecionamos o passo três G. Atualize a página. E aqui podemos ver que não parece bom sem que, enquanto estamos buscando, possamos mostrar o esqueleto de carregamento Parece que. Você pode ver quase todos os sites modernos têm esses esqueletos de carregamento Então, vamos primeiro criar esse esqueleto de carregamento. Então, em nossa pasta de produtos, criamos um novo componente chamado product card skeleton dot JSX Vamos configurar o código de atualização. Agora, para criar o esqueleto, podemos usar CSS ou podemos usar a Biblioteca A escolha é sua. O que você quer usar? Gosto de usar a biblioteca porque é fácil de usar. Se você quiser criar um esqueleto do zero , assista a esses tutoriais Vou colocar o link na pasta Recursos. E no novo terminal, esqueleto de carregamento do NPM e pressione Enter Bom. Agora, no topo, importamos o esqueleto da biblioteca de esqueletos de carregamento do react E depois disso, esse arquivo. Portanto, ele adicionará blocos CSS para esse componente de esqueleto. Então, importe reac carregando esqueleto, esqueleto dist, dist Agora, a partir desse componente, simplesmente retornamos esse componente do esqueleto e vamos ver o que obtemos Guarde isso. E em nosso componente de lista de produtos nesta matriz de lista de produtos, adicionamos nosso novo esqueleto de cartão de produto de componentes Salve as alterações e dê uma olhada. Veja, aqui temos pequena área de esqueleto de carregamento, mas não podemos vê-la Então, para torná-lo grande, temos que adicionar estilos para esse componente do esqueleto Então, voltando ao nosso componente básico, podemos adicionar aqui estilos e também podemos adicionar classe para adicionar o nome da classe ao cartão de sublinhado do produto E para esse esqueleto, temos que adicionar largura externamente porque, por padrão, é esqueleto, adicione largura de Deixe-me te mostrar. Salve isso e veja aqui que obtemos todas as outras propriedades, mas não a largura. Você pode verificar isso inspecionando. Então, de volta ao nosso componente e adicione aqui com 275 pixels. Salve as alterações e dê uma olhada. Veja, aqui temos esse esqueleto, igual ao cartão do produto Agora, vamos adicionar vários esqueletos de carregamento. No componente da lista de produtos, podemos duplicar esse esqueleto várias vezes, mas isso é uma má prática Então, na parte superior, remova esse registro, e aqui criamos uma matriz chamada esqueletos e passamos aqui um, dois, três, quatro, cinco, seis, sete e oito Agora, em nosso JSX, adicionamos o mapa de pontos dos esqueletos. Aqui obtemos cada número e simplesmente devolvemos o esqueleto do cartão do produto E passe aqui, chave é igual ao número. Salve as alterações e dê uma olhada. Veja, aqui temos oito cartões de carregamento. Agora vamos vender a lógica de carregamento. Então, em nosso gancho de dados de uso, criamos uma nova variável de estado. A chamada está carregando e o set está carregando. E como valor padrão, nós o definimos como false. Agora, aqui, antes de chamarmos nossa API, simplesmente definimos o carregamento E como verdadeiro. E depois de obtermos nossos dados aqui no método then, adicionamos o bloco Cd e aqui configuramos o carregamento como falso. Além disso, definimos o carregamento de Es como falso se recebermos um erro. Então, adicione aqui o bloco de código e defina o carregamento E como falso. Bom. Agora podemos simplesmente retornar carregamento do Es a partir daqui para que possamos acessá-lo em nossos componentes. Salve as alterações e, no componente da lista de produtos na parte superior, desestruturamos aqui a propriedade de carregamento E aqui simplesmente passamos a condição se o carregamento for verdadeiro, só então mostramos esses esqueletos. Salve as alterações e dê uma olhada, atualize a página e veja como ela fica bonita com esse esqueleto carregando É assim que poucos recursos adicionam mais impacto à experiência do usuário. 136. Buscando produtos por categoria: Agora, atualmente, temos nossos dados de produtos e também categorias. Agora, quando clicamos em qualquer categoria, queremos buscar produtos de acordo com essa categoria Acho que cometemos um erro nesse link. Então, voltando ao código VS e no componente da barra lateral do produto aqui neste link, temos que adicionar produtos slash Se adicionarmos apenas produtos, ele adicionará esse link no URL atual, como este. Portanto, não se esqueça de adicionar essa barra. Salve isso e volte para nossa página, clique na categoria. Veja que está adicionando uma sequência de caracteres de consulta. Agora, queremos buscar produtos dessa categoria. Então, de volta ao componente da lista de produtos, e no topo da nossa solicitação de API, temos que passar apenas a categoria como parâmetro de consulta. Agora você pode perguntar como podemos passar o parâmetro de consulta. Portanto, há duas maneiras de fazer isso. Podemos simplesmente passar nossa categoria em nosso endpoint desta forma Ou podemos passar o objeto Configure neste gancho de dados de uso. A escolha é totalmente sua. Pessoalmente, gosto de passar o objeto configure porque, por enquanto, precisamos passar apenas o parâmetro de consulta. Mas se, no futuro, quisermos passar algo mais, então, definitivamente, precisamos usar configure object e, nesse momento, nosso código fica confuso Portanto, é melhor usar configure object. Então, neste gancho de uso de dados, passamos o objeto no segundo argumento e, dentro dele, passamos params, que é o objeto, e aqui podemos passar todos os nossos parâmetros de consulta Então, na categoria dois, por enquanto, vamos passar pelos laptops. Agora temos que adicionar esse objeto em nosso gancho de dados de uso. Salve esse arquivo e abra o arquivo us data dot js. E aqui temos o objeto Configure, e o chamamos de configuração personalizada. Aqui também, alteramos o nome desse parâmetro de URL para endpoint. Acho que isso poderia ser mais específico. Agora, aqui, alteramos essa URL para endpoint e simplesmente passamos nosso objeto de configuração personalizado aqui. Simples assim. Diga as mudanças e dê uma olhada. Veja, aqui temos apenas detalhes do laptop. Agora, em nosso componente de lista de produtos, se passarmos aqui smartphones , obteremos apenas dados de smartphones. Portanto, passamos com sucesso string de consulta da categoria em nossa chamada de API. Agora, no lugar desse valor codificado, temos que passar a categoria do URL Você se lembra de como estamos obtendo a string de consulta? Certo? Usamos parâmetros de pesquisa Vimos isso na seção de roteamento. Então, aqui adicionamos os parâmetros de pesquisa de uso, e isso retornará todos os parâmetros de consulta Então, contras da matriz, e aqui temos a pesquisa e definimos a pesquisa. Vamos obter a sequência de caracteres de consulta da categoria a partir dessa pesquisa. Portanto, a categoria Const é igual a search dot gt. E aqui passamos o nome da nossa string de consulta , que é categoria. Agora, no lugar desses smartphones, adicionamos a variável de categoria. Ou também podemos remover essa categoria. Por quê? Porque nome e valor são iguais. Salve as alterações e dê uma olhada. Atualize a página e veja, aqui temos nossos consoles de jogos Se você mudar para fones de ouvido , atualize a página Veja, aqui temos todos os produtos de fones de ouvido. Então está funcionando, mas temos que atualizar toda vez que mudamos de categoria, e isso não é bom Então, vamos corrigir isso. Então, aqui, temos que passar essa categoria como dependência na nossa. Portanto, neste gancho de uso de dados, passamos a matriz de dependência no terceiro parâmetro e adicionamos aqui a categoria porque queremos relembrar o efeito de uso quando a categoria mudará Diga isso e, em uso do gancho de dados, primeiro, obtemos a matriz de dependência como deps e, no lugar dessa matriz vazia, passamos Agora, se aderirmos apenas deps , em todas as funções de dados do usuário, teremos que passar uma matriz de dependência, o que não queremos, Então, aqui, simplesmente colocamos uma condição. Se deps estiver disponível, só então adicione deps, caso contrário, adicionamos uma matriz vazia, simples assim Salve as alterações e dê uma olhada. Veja, agora não precisamos atualizar nossa página. Podemos navegar de categoria em categoria. 137. Paginação: Agora, atualmente, recebemos apenas oito produtos, mas no banco de dados, temos 24 detalhes do produto. Por que eu retorno apenas oito dados do servidor? É porque essa é uma técnica pela qual podemos reduzir a carga de dados na API. Deixe-me explicar o porquê. Atualmente, nosso aplicativo é muito pequeno. 24 dados não são um grande problema. Mas imagine que, à medida que nosso aplicativo cresce, podemos ter 1.000 ou 10.000 produtos como a Amazon. Então, nesse momento, se obtivermos todos os detalhes do produto em uma chamada de API , isso levará mais tempo e isso não proporcionará uma melhor experiência ao usuário. Então, em vez de obter todos os dados em uma única solicitação, nós, desenvolvedores, os dividimos em páginas, como se tivéssemos apenas oito ou dez dados em uma única solicitação. Se o usuário precisar de mais dados , buscaremos os próximos dez dados Então, aqui está a iniciação da página que vamos criar. Na primeira página, temos apenas oito registros. Depois disso, quando clicarmos na segunda página, obteremos os próximos oito dados, simples assim. Até agora, para buscar outros dados da página, precisamos passar apenas a string de consulta do parâmetro da página e definir esse número de página. Deixe-me te mostrar. Então vá para a página de produtos. Você pode observar esses produtos. E agora, em nosso assunto Param, adicionamos uma página a, digamos, duas. Salve as alterações e dê uma olhada. Você pode ver aqui que obtemos outros dados de oito produtos. Se mudarmos a página para três , obteremos outros dados de produtos. Agora, no local de configurar esta página como codificada, também podemos obtê-las em nossa string de consulta Então, aqui escrevemos uma página Cs igual a search dot get. E aqui passamos o nome do nosso parâmetro, que é page. Então, agora podemos definir a página para esta página. E para simplificar, podemos remover essa página. Não se esqueça de passar a página nessa matriz de dependências. Caso contrário, quando alterarmos o número da página , o efeito de uso não será executado. Guarde isso. E agora vamos ver como podemos definir o número da página em nossa string de consulta. Então, para isso, definimos aqui a função de pesquisa. Então, para Demonstrate temporary, criamos um botão abaixo dessa lista de produtos chamado página dois. E no evento de clique no botão, passamos a função de seta e aqui chamamos manipular mudança de página. E passe aqui o número da nossa página, que é dois. Agora, nesta função, escreveremos nossa lógica de página e definiremos o parâmetro da página para esse número de página. Vamos definir essa função na parte superior. Então, const, lide com a mudança de página. Aqui obtemos nossa página como parâmetro, função de seta e, dentro dela, simplesmente configuramos a pesquisa como objeto, página para esta página. Vamos ver se está funcionando ou não. Volte para a página de produtos e clique nesta página para clicar no botão. Veja, obtemos os dados da segunda página e, também em nosso URL, podemos ver a página dois. Agora, aqui está um pequeno bug, selecione qualquer categoria e clique nesta página para clicar no botão. E veja, estamos novamente em nossa página de produtos simples com a página dois. Você pode verificar isso consultando este URL. Veja, quando clicamos em qualquer categoria, temos uma categoria em nosso URL e, quando clicamos no botão Página, nossa categoria desaparece e só obtemos a página com duas. Por que isso está acontecendo, vamos verificar isso. Portanto, em nossa função de controle de mudança de página, definimos o surto somente para esta página. Isso substituirá todos os outros parâmetros de consulta do URL e definirá a página dois. Então, para resolver isso, temos que adicionar todo o valor anterior a essa função de pesquisa definida. E então temos que adicionar a página dois. Então, antes disso, criamos uma nova variável const, parâmetros atuais, igual ao ponto do objeto a partir das entradas E dentro disso, passamos uma matriz e, dentro disso, reestruturaremos a pesquisa Vamos ver o que estamos obtendo nos parâmetros atuais. Portanto, o console registra os parâmetros atuais. Salve as alterações, abra o console, selecione a categoria e clique no botão da página dois. C no console, aqui temos essa categoria. Essa expressão está retornando um objeto de sequência de caracteres de consulta, que está disponível nessa sequência de caracteres de pesquisa. Portanto, podemos simplesmente adicionar esse objeto usando a estruturação de objetos antes desta página Salve as alterações e aqui podemos ver que mudamos de categoria e clicamos na página dois, então nosso URL tem toda a string de consulta. Você pode se perguntar por que não estamos recebendo dados aqui. É porque nessa categoria, não temos a página dois, que significa que os produtos têm menos de oito nessa categoria. Mas na URL, podemos ver que nossa categoria ainda está lá. Então, fizemos nossa lógica de paginação. Agora só precisamos da interface do usuário para paginação, que criaremos na próxima lição 138. Criando uma interface de usuário: Agora, vamos criar um componente de paginação para adicionar a interface de usuário de paginação Então, na pasta comum, criamos um novo arquivo chamado pagination dot css e também criamos um novo componente chamado pagination A razão pela qual adicionamos esse componente de pombos na pasta comum é que podemos usá-lo em qualquer outro Aqui, adicionamos código padronizado e, na parte superior, importamos Css de piginação menstrual Bom. Agora, o que queremos desse componente. Queremos apenas números de página desse componente, e esse componente decide quantas páginas precisamos mostrar. Por exemplo, se temos 100 produtos e queremos exibir oito produtos por página , precisamos dividir 100 por oito, que é 12 em oito, que é 96, e precisamos mais uma página para outras quatro postagens. Então, no geral, precisamos de 13 páginas. Outro exemplo, se tivermos apenas sete produtos , não precisaremos mostrar a paginação Então, temos que lidar com essas lógicas. E para isso, precisamos passar três variáveis. Primeiro, precisamos aqui do total de postagens, postagem por página e da função de clique, que podemos executar com o clique do botão. Então, aqui criamos uma variável para armazenar números de página. Página é igual a uma matriz vazia. Agora, depois disso, adicionamos quatro loops para preencher essa matriz com números de página. Aqui, seja eu igual a um. Em seguida, escrevemos I ser igual ao total de postagens, dividimos por postagem por página e I plus plus Agora colocamos esse I nessa matriz, então escrevemos páginas, dot-push e aqui passamos I. Se nosso total de postagens for 80 e o post por página for dez, obteremos dez páginas. Mas se tivermos um total de 25 postagens e a postagem por página for oito, então 25 divida por oito, que é 3,125 Temos apenas três páginas e não é isso que queremos. Para resolver isso, temos um método em JavaScript chamado math dot Cal, que arredondará nosso número para o número inteiro mais próximo, que significa que se passarmos aqui 2,05, ele retornará três Então, envolvemos essa equação com esse método matemático de vedação de pontos. Só precisamos retornar esse botão de número de página. Aqui, criamos uma lista não ordenada e atribuímos a ela uma nação de página com o nome da classe Dentro dessa lista, exibimos nosso botão nos itens da lista. Mapa de pontos de páginas. Aqui obtemos cada função de seta de página e aqui retornamos o item da lista, passamos a chave para a página. Dentro disso, adicionamos um botão com nome da classe, paginação, botão de sublinhado E função de evento onclick para seta. E aqui chamamos a função onclick e passamos aqui o número da nossa página E dentro desse botão, simplesmente exibimos o número da página. Salve-os e vamos adicionar esse componente no componente da lista de produtos. Então, abra o componente da lista de produtos na parte inferior, removemos essa página para o botão e, depois disso, basta adicionar nossa página em um componente Lembre-se, temos que passar por três adereços. Primeiro, post total, que é o ponto de dados total de produtos. Publique por página até oito e clique para lidar com a mudança de página. Observe que aqui estamos apenas passando uma referência. Nós o chamamos em nosso botão de nação da página. Salve as alterações e dê uma olhada. Veja, aqui temos os botões da nossa página Nação. Clique no botão dois e veja, obtemos a segunda página. Clique na página três e obtemos a página três, está funcionando. Agora, aqui temos um pequeno bug. Se definirmos nossa categoria, então, para apenas três itens, receberemos um botão para esta página, o que é bom, mas eu não gosto. Em nosso componente de paginação, passamos aqui uma condição Se o tamanho do ponto das páginas for maior que um, somente então retornaremos essa lista de paginação. Aqui obtemos um erro de compilação porque se o comprimento dos pontos das páginas não for maior que um, esse componente não retornará nada Podemos empacotar esse código com fragmentos de reação. E r se foi. Adorável. Agora você pode se perguntar por que não adicionamos condições em nosso componente de lista de produtos. Então, o motivo é que, se amanhã usarmos esse componente de paginação em outro componente , também precisaremos passar a condição para lá, e não queremos isso É por isso que eu adiciono condição neste componente de paginação. Salve as alterações e dê uma olhada. Veja, acabou com menos de oito produtos. Se redirecionarmos para produtos, poderemos ver a paginação Agora, vamos definir o estilo desses botões. Portanto, no arquivo CSS de pontos de paginação, primeiro adicionamos paginação e, em pacotes encaracolados, adicionamos menos estilo a nenhum, exibimos dois linhos, justificamos o conteúdo no centro e envoltório de linho em embrulho. E margem para 16 pixels. Em seguida, definimos o estilo para paginação por pontos, botão de sublinhado, colchetes e, dentro deles, definimos a largura para 40 pixels, a altura para 40 pixels, a margem para zero e tamanho da fonte de dez pixels para 16 pixels, o peso da fonte para seis e vermelho, borda para um pixel, sólido tem Ii ei, ei, raio da borda para seis pixels, cor de fundo para branco, cor para preto E cursor até o ponteiro. Salve as alterações e dê uma olhada. Veja, temos um bom botão. Agora, aqui não sabemos qual página está selecionada. Portanto, em nosso componente de paginação, no nome da classe do botão, adicionamos a condição, a página atual é igual a esta página Em seguida, retornamos às classes, paginação, botão de sublinhado Caso contrário, retornamos apenas a paginação, a classe do botão de sublinhado. Agora também temos que chegar aqui na página selecionada atualmente. Então, adicionamos essa variável de página atual em adereços. Salve isso e, em nosso componente de lista de produtos, na parte inferior, passamos mais um adereço, a página atual, para esta página, que obtemos do uso de PAMs de pesquisa Salve as alterações e vamos usar CSS para ativar o botão. Portanto, paginação por pontos, botão de sublinhado, Calibracket ativo por pontos, fundo em preto e cor em branco E neste botão de paginação, fazemos a transição para 0,2 segundo de entrada e saída Salve as alterações e dê uma olhada. Ainda assim, não estamos obtendo uma classe ativa porque essa página atual é uma string e essa página é um número. Aqui, envolvemos esta página atual com um método chamado parse Int As mudanças e dê uma olhada. Atualize a página e veja aqui que obtemos um erro. Vamos abrir o Console. Aqui está nos dizendo que não podemos ler propriedades de null. Portanto, quando nossos dados são nulos, não podemos acessar a propriedade total de produtos do ponto de dados Então, envolvemos nosso componente de paginação com colchetes de Cali e Se os dados estiverem disponíveis, renderize somente o componente de paginação. Salve as alterações e dê uma olhada. Veja, aqui temos nosso número de paginação. Agora estamos quase terminando. Temos um último bug. Então, aqui, quando mudamos número da nossa página, algo está acontecendo. Deixe-me te mostrar. Então, uma aba de rede e coloque a conexão em três G. Agora mude o número da página e veja aqui que podemos ver nosso esqueleto de carregamento, e também podemos ver nosso post antigo Então, vamos corrigir isso. Abra o componente da lista de produtos e, aqui, no local dessa extremidade, passamos um operador ternário Então, faça um ponto de interrogação e também remova esse colchete encaracolado. E aqui passamos por Colon. Então, se o carregamento for verdadeiro, exibimos o esqueleto, senão exibimos os produtos Salve as alterações e dê uma olhada. Veja como nossa página está limpa e bonita. Sei que essa lição é um pouco longa, mas você pode ver como é simples e fácil adicionar paginação em nosso aplicativo Só precisamos definir a página na string de consulta da API. Muitos desenvolvedores estão confusos com o conceito de paginação, mas você pode ver como é fácil e simples 139. Rolagem infinita: Agora, como vimos, a paginação é um conceito muito importante, mas é usada principalmente em aplicativos de banco de dados, como sites de blogs e sites educacionais, onde as pessoas estão dispostas a dar total atenção Mas se você estiver criando aplicativos como aplicativos de mídia social ou algo como Instagram ou YouTube nesses aplicativos, não podemos adicionar paginação Nesses aplicativos, precisamos adicionar um recurso de rolagem infinita como esse Se rolarmos até o final , obteremos os dados da próxima página e também poderemos ver nossos dados anteriores. Portanto, se usarmos o recurso de rolagem infinita em nosso aplicativo, podemos facilmente chamar a atenção do usuário, mesmo que o usuário não esteja disposto a dar toda a atenção E é por isso que as pessoas passam mais tempo nas mídias sociais porque precisam apenas rolar a tela. Então, vamos entender a lógica da rolagem infinita. A lógica é muito simples. Quando chegarmos ao final da nossa página , aumentaremos nossa contagem de páginas de uma forma simples. Então, vamos implementar esse recurso de rolagem infinita em nosso aplicativo Não estou removendo esse código de paginação. Acabei de comentar essa função e também comentar o componente de paginação, para que você possa usá-lo como referência quando precisar Agora vamos começar com a etapa número um, que é adicionar um evento de rolagem, que nos fornecerá informações quando chegarmos ao final Então, criamos um gancho de efeito de uso para adicionar ouvinte de eventos. Aqui, adicionamos a função de retorno de chamada e passamos uma matriz vazia para dependência porque queremos declará-la apenas uma vez Agora, dentro disso, escrevemos window dot add event listener. Agora passe o primeiro parâmetro, scroll, e o segundo parâmetro é a função que queremos chamar no evento de rolagem, manipule a rolagem. Agora vamos declarar essa função, manipular a rolagem no gancho de efeito de uso E dentro dela, escrevemos nossa lógica. Portanto, em JavaScript, temos alguns elementos para obter dados do Dom no elemento document dot Document. Então, aqui nós o desestruturamos e chegamos aqui, rolamos para cima. Depois disso, obtemos a altura do cliente e, por último, a altura de rolagem. Agora, vamos simplesmente registrar essas três variáveis no console. Então, registro de pontos do console, vá para cima até Scroll top. Depois disso, registro de pontos do console, altura do cliente até altura do cliente. E, finalmente, registro de pontos do console, rolagem até altura de rolagem. Não se preocupe com essas propriedades. Veja isso e você entenderá tudo isso. Veja as mudanças e dê uma olhada. Atualmente, não temos barra de rolagem. Então, vamos abrir as ferramentas do desenvolvedor e, no Console, aqui temos a barra de rolagem para nossa página. E quando rolamos, obtemos esses valores. Agora vá até o final e, para isso, queremos colocar uma condição. Aqui, a rolagem para cima é uma medida de até onde você rolou em uma página da web Basicamente, ele nos diz a distância do topo da página até onde estamos visualizando no momento. Agora, a altura do cliente é a altura da janela do nosso navegador. Ele representa a área visível da página da web que você pode ver sem rolar altura de rolagem é a altura total de toda a página da Web, incluindo as partes que não estão visíveis atualmente na sua janela. Então, em termos simples, a parte superior da rolagem indica o quanto você rolou para baixo, o cliente informa a altura do que você pode ver e a altura da rolagem indica a altura total da página inteira Então, quando chegarmos ao final da nossa página, essa parte superior de rolagem mais a altura do cliente sempre será igual à altura da rolagem. Então, aqui em nossa função de rolagem, adicionamos a condição I scroll top mais a altura do cliente maior ou igual à altura de rolagem Aqui, não sei por que, mas às vezes essa condição não funciona. Para resolver isso, basta somar aqui menos um. Antes de escolher L da parte inferior, essa lógica será executada. Você pode alterar esse valor de acordo com suas necessidades. Dentro dessa função, por enquanto, vamos adicionar o log de pontos do console, alcance até a parte inferior. E se você não estiver recebendo a barra de rolagem, poderá passar aqui no objeto Perms por página para dez Eu projetei essa API especialmente também possamos conseguir o que queremos. Por padrão, defino por página como oito, mas podemos passar o que quisermos. Salve as alterações e dê uma olhada e veja aqui que temos dez produtos. Na parte inferior, podemos chegar ao fundo. Então está funcionando. Agora, segundo passo, que é aumentar nossa contagem de páginas. Então, vamos usar a mesma lógica da nossa função de manipulação de página. Então, remova este comentário, e aqui no local desta página, adicionamos pontos de pH dos PAMs atuais mais um Agora chame essa função em nossa função handle scroll, ou podemos chamar essa função diretamente sem alterar nada, e depois disso, podemos passar parâmetros atuais dot page mais um aqui Mas não se preocupe com isso. Salve as alterações e dê uma olhada, vá até o final e não obteremos nada porque aqui estamos obtendo dados da página 11. Para corrigir isso, temos que pegar o valor atual da página de pontos dos parâmetros, que é uma string em um inteiro de análise Salve as alterações, dê uma olhada na primeira página e role até o final, e obteremos os dados da segunda página, mas os dados anteriores sumiram. Então, para isso, podemos fazer um pequeno truque, abrir o arquivo de dados de uso e, em nossa chamada de API, no método then, podemos ver que estamos configurando diretamente esses dados na função de dados definida. Então, em vez disso, podemos colocar aqui o endpoint da condição I igual a produtos de corte e verificar se os dados não são nulos e se os produtos de pontos de dados estão Agora, se essas condições forem verdadeiras, em dados definidos, obtemos aqui dados anteriores, função de erro e aqui queremos retornar somente o objeto. Então, entre parênteses, passamos o objeto. Aqui, primeiro adicionamos todo o valor do objeto anterior e substituímos nossos produtos por uma matriz aqui. Primeiro, obtemos os dados dos produtos anteriores, que são o operador de spread, os produtos de pontos anteriores. E depois disso, adicionamos o operador de spread, os novos produtos, que são produtos de pontos de dados de resposta. E se temos outros pontos finais, então simplesmente configuramos dados para esses dados. Se você está um pouco confuso , deixe-me explicar por que estamos fazendo isso. Portanto, apenas para solicitações de produtos, e se já tivermos produtos em nosso estado de dados , obteremos um objeto de quatro propriedades nas quais temos uma matriz de produtos, mas a maioria das outras solicitações do GAD retorna diretamente a matriz Portanto, se usarmos os mesmos dados definidos para todas as solicitações , sempre obteremos nossos dados no objeto e obteremos um erro. É por isso que temos que colocar essas condições, salvar as alterações e dar uma olhada. Voltar para a primeira página. E vá até o final. Veja, aqui estamos recebendo novos produtos com produtos anteriores. Agora, uma coisinha estranha está acontecendo aqui. Quando chamamos nossa API, não vemos nossos produtos anteriores. Então, para isso, em nosso componente de lista de produtos, na parte inferior, removemos esse operador ternário e usamos aqui colchetes e também removemos essa coluna e adicionamos Agora mova essa matriz de produtos antes desse esqueleto. Quando estivermos buscando novos dados, o esqueleto será exibido na parte inferior da lista Salve as alterações e dê uma olhada. E aqui mudamos nossa página para a página um. Role até o final e veja que temos um esqueleto na parte inferior. Agora temos outro pequeno problema nessa implementação. Na rolagem infinita, não precisamos mostrar esse número de página no URL Então, para a página no topo, criamos uma nova variável de estado chamada page e definimos a página. E como valor inicial, passamos aqui um. Agora podemos remover esta página daqui. Nós não precisamos disso. Basicamente, esse valor da página será substituído pela nossa variável de estado da página, então não precisamos alterar nada. Só mudamos aqui essa lógica. Então, no lugar dessa função de manipulação de mudança de página, adicione a página definida aqui, obtemos a página anterior, função de seta, a página anterior mais uma. Salve as alterações e dê uma olhada. Veja, agora não temos a página em nosso URL. Adorável. Estamos quase terminando a rolagem. Só precisamos adicionar uma função de limpeza neste gancho de efeito de uso porque atualmente estamos na página da lista de produtos. Se redirecionarmos para outra página , o evento de rolagem também será executado e isso afetará o desempenho do nosso aplicativo Então, em nosso uso Effect na parte inferior, escrevemos a função de seta e simplesmente copiamos escrevemos a função de seta e simplesmente copiamos essa expressão e a alteramos para window dot remove Event Listener Salve as alterações e isso funcionará. Agora vamos verificar novamente nossa página de produtos. Então, atualize a página. Recebemos produtos. Agora role. Ótimo, está funcionando. Agora, na parte superior, selecione a categoria e obtemos esses produtos na parte inferior Em vez disso, queremos substituir todos esses produtos por nossas categorias de produtos. Então esse é o pequeno Burg. Vamos encontrar isso. Abra o gancho de dados de uso. E aqui, nessa condição, nosso endpoint são produtos e produtos de pontos de dados estão disponíveis Em seguida, estamos adicionando novos dados de pontos de resposta na matriz anterior. Mas quando mudamos de categoria, essa condição também é verdadeira, e é por isso que estamos obtendo dados na parte inferior. Temos que adicionar mais uma condição, parâmetros de pontos de configuração personalizados, parâmetros de pontos de configuração personalizados página de pontos não é igual Só então execute essa lógica. Salve as alterações, dê uma olhada na página de produtos e reprima-a Role a página até o final e obteremos a próxima página. Agora, se clicarmos em qualquer uma dessas categorias , não obteremos esses produtos porque atualmente estamos na página dois e, no console de jogos, temos apenas três produtos. Então, para a segunda página, não temos nenhum produto. Então, vamos corrigi-los rapidamente. Então, eu listo o componente de produto na parte superior, após nosso gancho de dados de uso, aqui adicionamos um efeito de uso e passamos aqui, função de retorno de chamada, e na matriz de dependência, simplesmente passamos E dentro disso, simplesmente definimos a página como uma. Portanto, quando a categoria é alterada ou removida da sequência de caracteres de consulta, nossa página é definida como uma. E é isso que queremos, certo. Guarde as dobradiças e dê uma olhada. Volte para a página de produtos e, em seguida, veja a categoria e veja aqui que estamos obtendo nossos produtos por categoria. Agora deixe-me te mostrar uma coisa. Não sei se você percebe ou não. Quando chegamos ao final, às vezes ela carrega duas páginas juntas ou, às vezes, continua solicitando até mesmo nosso banco de dados promocional de patches de todos os produtos Então, precisamos corrigir isso. Então, em nossa função de rolagem com alça, aqui adicionamos algumas condições. Primeiro, se esse carregamento não for verdadeiro, outros dados estarão disponíveis e a última página será menor que o ponto de dados Total de páginas. Esse total de páginas que estamos recebendo do servidor. E como estamos usando aqui nossos dados e nossa variável de carregamento, precisamos editar nossa matriz de dependências, salvar as alterações, atualizar a página e rolar até o final, e todos os nossos problemas estão corrigidos É assim que podemos implementar recurso de rolagem infinita para tornar nosso aplicativo moderno e Portanto, você pode ver que a paginação e recurso de rolagem infinita não são muito complicados Só precisamos entender a lógica básica desses dois recursos. 140. Exercício de página de produto único: Agora é hora de fazer um pouco de exercício. Não se preocupe Isso levará apenas cinco a 10 minutos. Então, quando clicamos em qualquer produto, redirecionamos para uma única página de produtos E aqui queremos mostrar os detalhes desse único produto. Além disso, obtemos esse ID do produto em nossa URL. Portanto, você precisa chamar essa API com produtos de endpoint com a barra ID do produto no Isso retornará os dados desse produto aqui. E enquanto estamos obtendo esses dados, você também pode exibir aqui o texto carregando ou pode mostrar aqui o botão giratório, que você pode usar diretamente do nosso projeto de roteamento anterior Em seguida, não se preocupe com o botão de dois carrinhos. Só temos que lidar com esse aumento e diminuição de quantidade. A dica é que você precisa criar uma nova variável de estado para lidar com a quantidade, dedicar algum tempo este exercício e depois observar a solução Eu sei que você pode completar este exercício. 141. Solução deste exercício: Então, espero que você resolva este exercício ou tente resolver isso. O mais importante é você tentar. Ficar preso em algum lugar é muito comum. Às vezes eu também fiquei preso em algum momento, então não se preocupe com isso. Portanto, em nosso componente único de produtos, primeiro precisamos obter o ID atual do nosso URL. Lembre-se de que esse é um parâmetro, não uma sequência de caracteres de consulta. Para obter os parâmetros do URL, precisamos usar Perms. SperamShok do roteador react dom, e isso retornará o objeto de todos os parâmetros, para que possamos desestruturá-lo e O motivo pelo qual estamos recebendo esse ID aqui é porque, em nosso roteamento, definimos o ID do produto e da coluna Desculpe, adicionamos bimstalmente esse ID neste caminho. Podemos mudar isso para chamar no ID. E se você passar por aqui, ligue para o ID do produto e precisará desestruturar o ID do produto Salve isso e volte para um único componente do produto. Agora vamos chamar nossa API usando use data hook for endpoint, passamos backticks, slash products, slash dollar Ci Brackets ID Agora, isso retornará algumas propriedades. Desestruture-o e aqui obtemos nossos dados e os renomeamos para produto Além disso, obtemos erros e facilitamos o carregamento. Agora vamos mover esses parâmetros de uso abaixo do nosso estado de uso. Bom. E vamos remover esse objeto de produto que criamos, mas apenas temo. Agora, em nosso JSX, precisamos adicionar uma condição Então veja como tudo isso é devido e adicione aqui a condição de que o produto não seja nulo, só então exiba isso porque aqui estamos recebendo um erro de compilação porque estamos retornando vários elementos Então, envolvemos esse devido com fragmentos de reação. Salve as alterações e dê uma olhada, selecione qualquer produto e veja aqui que estamos obtendo esses dados, mas não imagens. Então, vamos mostrar nossas imagens. Já fizemos isso no cartão de produtos. Então, na fonte, passamos empates e, antes dessa imagem, adicionamos coluna STTP, barra dupla, host local, coluna 5.000, produtos de barra, imagem de barra com dólar e colchetes com dólar Agora, o mesmo que fazemos aqui. Baptis e, antes disso, adicionamos a coluna STDP, barra dupla, host local, coluna 5.000, produtos de barra, imagem selecionada com colchetes e colchetes adicionamos a coluna STDP, barra dupla, host local, coluna 5.000, produtos de barra, imagem selecionada com colchetes e colchetes. Salve as alterações e dê uma olhada. Veja, estamos recebendo nossas imagens. Perfeito. Agora vamos lidar com o erro e o carregamento. Portanto, por erro, cumprimos a condição. Se o erro estiver disponível, exibimos a tag de ênfase e atribuímos a ela um nome de classe a partir do erro, e simplesmente passamos aqui o erro. Agora, para carregar, exibimos o botão giratório de carregamento. Então eu abro nosso projeto de roteamento anterior. Na pasta de origem, temos componentes e, nessa pasta, temos uma pasta comum. E aqui, temos o componente do carregador. Selecione as pilhas JSX e CSS e esfregue-as em nossa Agora, em nosso componente, aqui adicionamos condição. Se esse carregamento for verdadeiro, adicionamos o componente carregador Salve as alterações e dê uma olhada, atualize a página e veja aqui que estamos recebendo nosso carregador Agora, última tarefa, quando clicamos nesse botão de adição, precisamos aumentar essa quantidade. Para isso, na parte superior, criamos uma nova variável de estado chamada quantidade e definimos quantidade e, por padrão, passamos uma. Agora temos que passar essa variável de estado para nosso componente de entrada de quantidade porque nesse componente, temos o botão de mais menos e também a contagem da quantidade Então, aqui passamos a quantidade para a quantidade, definimos a quantidade para definir a quantidade e o estoque para o SOC do ponto do produto Guarde as dobradiças e vamos lidar com elas. Portanto, em nosso componente de entrada de quantidade nos adereços, obtemos quantidade, quantidade definida e estoque Agora, aqui em nosso botão, simplesmente adicionamos o evento de clique, função de seta e aqui definimos a quantidade como quantidade menos um Agora mesmo, passamos pelo botão de adição. Copie esse evento de clique e cole no botão de adição no lugar de menos um, adicionamos mais um e, por fim, alteramos esse para esse estado de quantidade Salve as alterações e faça um. C, a quantidade está aumentando, mas temos que adicionar uma condição para esse atributo de desativação. Portanto, desabilitar é igual à quantidade, menor ou igual E também no botão de adição, passamos o atributo de desativação igual à quantidade maior ou igual Salve as alterações e dê uma olhada. Veja, quando temos mais de uma quantidade, botão menos não está desativado E se aumentarmos a quantidade em estoque, nosso botão de adição será desativado. Perfeito. Aqui, nossa 12ª seção está concluída. Espero que você aprenda muito com isso. Se você tiver alguma dúvida , pode me perguntar na seção de perguntas e respostas Na próxima seção, você verá a coisa mais importante de qualquer grande projeto, que é a autenticação e autorização do usuário. Se você está assistindo a esses cursos continuamente, eu recomendo que você faça pausa de 20 a 30 minutos da tela e tome um pouco de ar fresco, porque cuidar da nossa saúde também é importante. Nos vemos na próxima seção. 142. Seção 13 Autenticação e autorização: Nesta seção, aprenderemos a autenticação e o aplicativo de reação, como lidar com inscrição, login e logout Depois disso, veremos como podemos lidar com a autorização, como se somente o usuário logado pudesse adicionar itens ao cartão, cartão visualizador, etc Autenticação e autorização, ambos são tópicos muito importantes para qualquer grande aplicativo. Portanto, para autenticação, usaremos o token JSON Web Estou muito entusiasmado com esta seção e espero que você também esteja. Então, vamos mergulhar nisso. 143. Registrar uma nova API de usuário: Primeiro de tudo, vamos ver a API de registro para nosso usuário. Portanto, para degustação da API, temos duas opções. Podemos usar o Postman, que é o aplicativo externo, especialmente projetado para testar qualquer tipo de APIs, ou podemos usar a extensão de código VS chamada cliente Thunder, que tem Então, para simplificar, vou usar a extensão VSCode, mas você também pode usar o Postman Depende inteiramente de você. Abra o painel de extensão aqui e pesquise o cliente Thunder E instale essa extensão. Bom. Agora vamos abrir essa extensão de cliente de licitação. E aqui podemos ver esse tipo de interface. Não se preocupe, clique em Nova solicitação. E no lado direito, podemos ver que temos uma caixa de entrada por URL da API e também um menu suspenso para selecionar métodos STTP Portanto, selecione o método de postagem e o URL da API, escreva a coluna STTP, barra dupla, barra , host local, coluna 5.000, barra da API, barra do usuário, barra, inscrição Agora, como sabemos, para registrar um novo usuário, precisamos enviar dados do usuário no corpo da nossa solicitação de API. Então, para isso, simplesmente selecionamos aqui o corpo e, nesse caso, podemos passar nossos dados no formato JCN Então, primeiro, passamos o nome para o código. Em seguida, envie um e-mail para o código one@gmail.com. Em seguida, senha para, digamos, um, dois, três, 45678 e endereço de entrega, este é meu endereço de entrega Por enquanto, não estamos enviando nossa imagem de perfil porque se não selecionarmos nossa imagem de perfil , por padrão, ela será definida como JPG de pontos padrão. Agora, simplesmente concorde. E veja aqui que obtemos o código de status 201, que é para ser criado com sucesso. E também na resposta, obtemos um objeto com token longo. Esse é o token JSON Web ou JWT, que quase todos os aplicativos modernos usam para autenticar o usuário. Não se preocupe com isso. Vou explicar a você o JCN WebTken em detalhes na Por enquanto, somos um usuário registrado com sucesso. Podemos verificar que, por meio Mongo DBCompass, abra a coleção do usuário e veja aqui que obtemos nosso Agora vamos ver como podemos enviar imagens com nossa solicitação de API. Portanto, para enviar arquivos como imagens, áudio, vídeo, qualquer coisa, precisamos usar dados do formulário, que é outra forma de enviar dados com nossa solicitação de API porque, no formato JSON, não podemos enviar nosso arquivo Então, em vez de selecionar JSON a partir daqui, podemos selecionar Formulário Agora, aqui podemos ver as entradas de preenchimento do formulário e, no lado direito, podemos habilitar arquivos e ver aqui a opção de arquivos Agora, nos campos do formulário, adicionamos nome e valor ao code plus. Envie um e-mail para o código two@gmail.com. Em seguida, senha para 12345678 e endereço de entrega. Esse é o novo endereço Esse é Agora vamos selecionar a imagem do perfil. Então, para o nome do preenchimento, passamos o Perfil P com P maiúsculo, e aqui podemos escolher o arquivo. Então, aqui, estou selecionando o logotipo do meu canal. Agora vamos enviar dados. Veja, aqui temos um novo token, e isso significa que nosso usuário foi registrado com sucesso Abra o Mongoibcmpass e atualize os documentos. E aqui podemos ver que recebemos um novo usuário com o e-mail code@gmail.com. E perfil para algum nome de pico do perfil. Está funcionando. Agora, daqui na parte inferior, podemos renomear o nome da nossa API Digamos que a API de inscrição. Bom. Agora, na próxima lição, conectaremos nosso formulário de inscrição à nossa API de inscrição. 144. Conectando a página de inscrição com a API: Agora, aqui em nossa página de inscrição na função de envio, atualmente estamos apenas registrando esses valores do formulário no console Agora vamos conectar nossa página de inscrição à nossa API de inscrição. Então, em vez de escrever toda a lógica aqui, eu preferiria escrever a lógica em um arquivo JavaScript diferente. Então, em nossa pasta de origem, criamos mais uma pasta chamada services. E dentro dele, criamos um novo arquivo chamado serviços de usuário dot js. Você pode me dizer por que eu uso a extensão dot js? Certo, porque não estamos retornando nenhum elemento JSX daqui Agora, dentro disso, em primeiro lugar, inserimos o cliente de API a partir daqui vamos uma pasta para cima, utils, cliente de API Agora, aqui criamos uma função chamada inscrever-se ou registrar, você quiser chamar. E aqui estamos recebendo o primeiro objeto de usuário, que são os campos do nosso formulário de inscrição, e depois disso, passaremos nosso perfil, que é a imagem do perfil Agora, como sabemos, para enviar qualquer arquivo, precisamos enviar nossos dados no formato de dados do formulário. Então, para isso, aqui criamos uma variável chamada corpo igual aos novos dados do formulário Agora, aqui precisamos simplesmente adicionar todos os dados neste formulário corporal. Então, body dot up e dentro dessa função no primeiro parâmetro, definiremos o nome da nossa propriedade, que é nome. E no segundo parâmetro, definiremos o valor, que é o nome do ponto do usuário. Agora vamos duplicar essa linha mais quatro vezes, e aqui mudamos nosso nome para email e também para email com pontos de usuário Em seguida, temos a senha e a senha do ponto do usuário. Em seguida, temos o endereço de entrega e o endereço de entrega do ponto do usuário. E, finalmente, temos o perfil P com P, e passamos aqui nosso perfil. Observe que o nome de todos os preenchimentos depende da sua API. Em seu aplicativo, pode ser o nome de usuário no local deste e-mail. Você tem que passar aqui o nome de usuário. Não se preocupe com isso. desenvolvedor do Bend fornecerá esses detalhes sobre como chamar API porque, com esses nomes no back-end, podemos acessar esses valores Esses nomes dependem inteiramente do seu back-end. Agora, no final, chamaremos nossa API, então api client dot post, e aqui passaremos nossa API, que é sssers signup Depois disso, simplesmente passaremos nossos dados corporais. Quando chamamos essa função de inscrição, esses dados do formulário os geram primeiro e os enviamos para nosso back-end Essa expressão retorna uma promessa. Podemos simplesmente retribuir a promessa daqui. Agora, para usar essa função de inscrição em nosso formulário, temos que exportar essa função daqui Salve esse arquivo e, em nosso componente de página de inscrição aqui no método on submit, em vez do log de pontos do console, vez do log de pontos do console simplesmente chamamos a função Signup e você pode ver o funcionamento do autoiput Agora, no primeiro parâmetro, temos que passar nossos campos do formulário, que são esses dados do formulário. E depois disso, no segundo parâmetro, passaremos o perfil Peak. Agora vamos agrupar essa função em um bloco de código. Bom. Agora, essa expressão retorna uma promessa. Então, vamos usar aqui Await. E para usar o Await, temos que adicionar aqui assíncrono, simples assim Agora vamos remover esse console daqui. Nós não queremos isso. Salve as alterações e dê uma olhada. Abra as ferramentas de desenvolvedor para usuários do Windows, pressione Ftwel ou Option plus Command plus I no Mac Abra o Network Stab preencha o formulário com nome, e-mail, senha, senha de confirmação e endereço de entrega E clique em Enviar. Nada acontece, mas em nossa guia Redes, podemos ver aqui que recebemos uma solicitação de API, que é cadastrar-se, e na resposta, estamos recebendo um token. Agora selagpFile Image, e vamos mudar esse e-mail para Caso contrário, obteremos um erro. Além disso, alteramos esse nome para o código quatro e, no endereço, alteramos o quarto endereço de entrega. Clique em enviar e veja aqui que recebemos novamente o token em resposta. Com imagem ou sem imagem, os dois cenários estão funcionando. Você pode ver como é simples enviar uma imagem para o servidor no react. Só precisamos criar um objeto de dados do formulário e anexar nossos dados Agora, se clicarmos novamente em enviar , receberemos uma mensagem de erro em resposta. Na próxima lição, veremos como podemos lidar com erros retornados pela API de inscrição 145. Tratamento de erros para inscrição: Agora, para lidar com erros, podemos usar o bloco try and catch. Então, aqui, escrevemos apenas TryCatch e selecionamos essa sugestão e, veja, obtemos try and catch Block Agora, vamos colocar a função sino no bloco Tri, e no bloco de cache, aqui obtemos o objeto de erro Então, aqui estamos apenas exibindo o erro, que retornamos do nosso back-end. E para isso, temos que colocar aqui a condição se tivermos resposta de ponto de erro e o status de ponto de resposta de ponto de erro for igual a 400, que significa que nós, como clientes, fizemos algo errado Então, aqui nós simplesmente Consol dot log dot response object. Além disso, o motivo pelo qual eu uso tricach e acad é apenas para mostrar uma demonstração Você também pode usar dot Dan e o método cache, que vimos ao chamar uma seção de API. Salve as alterações e dê uma olhada, preencha o formulário e, para o endereço de e-mail, passamos o e-mail antigo e enviamos o formulário. E no console, podemos ver o objeto de resposta. E dentro disso, obtemos o status para 400 e, nos dados, temos uma mensagem para e-mail que já está registrada. Agora vamos exibir esse erro em nosso formulário. Então, para exibir esse erro, primeiro temos que armazená-lo na variável de estado. Então, na parte superior, criamos variável de estado chamada erro de formulário e definimos erro de formulário. Como valor padrão, definimos uma string vazia. Bom. Agora, aqui definimos o erro do formulário como ponto de erro ponto de resposta ponto de dados ponto Mensagem. Esse objeto de resposta depende inteiramente do seu back-end. No seu caso, você tem um erro de ponto de dados, então você deve definir esse erro de informação. Agora, na parte inferior, antes do nosso botão de envio, adicionamos aqui a condição. Se o erro do formulário estiver disponível, retornamos a tag de ênfase com o nome da classe e adicionamos aqui o erro do formulário. Diga as alterações e dê uma olhada, preencha o formulário e envie-o e veja aqui que recebemos nossa mensagem de erro. Atualmente, quando estamos enviando o formulário, estamos chamando apenas a API de inscrição. Mas no mundo real, temos que fazer login como usuário. Por enquanto, não se preocupe com isso. Faremos isso no futuro. 146. Faça login em uma API de usuário: Agora, vamos ver a API de login. Então, em nossa extensão de cliente de licitação, adicionamos uma nova solicitação de API. Também para fazer login, passamos aqui URL, STDP, Colm double forward slash Local host, Column 5.000 slash API slash user slash Login e também selecionamos o método Post. Agora, para essa API, enviaremos dados no formato JSON porque não estamos enviando aqui nenhuma imagem ou arquivo Caso contrário, precisamos enviar os dados do formulário. Agora, no corpo, nós gostamos de JSON, e aqui passamos duas propriedades O primeiro é o e-mail, que é o código one@gmail.com. Em seguida, passaremos nossa senha para 12345678 e Veja, aqui estamos obtendo token web JCN em nosso objeto de resposta e, por esse token, obteremos o usuário logado Por enquanto, não se preocupe com isso. Primeiro, conectaremos nosso formulário de login a essa API de login. Então, aqui está um pequeno exercício para você. Quero que você conecte nosso formulário de login essa API de login e também tente lidar com erros. E se for um erro do servidor, exiba-o antes do botão de login. O mesmo que fizemos com o formulário de inscrição. Isso dificilmente levará de dois a 5 minutos, experimente e então foi a solução. 147. Conectando a página de login com a API: Então, espero que você resolva esse exercício. Agora vamos ver a solução. Assim, à medida que criamos nossa função de inscrição no arquivo de serviços do usuário, adicionaremos uma nova função para login Então, funcione, faça login e aqui obtemos os dados do usuário, que enviamos do formulário de login. E aqui, simplesmente retornamos esta postagem de pontos do cliente API. Aqui passamos nosso caminho slash user slash Login. E no segundo parâmetro, simplesmente passamos esse objeto de usuário. Agora, para chamar essa função em nosso formulário de login, precisamos exportar essa função. Salve este arquivo e abra o componente da página de login e, na função de envio no local deste log de pontos do console, passamos a função de login dos serviços do usuário e simplesmente passamos aqui os dados do nosso formulário. Agora, essa expressão retorna uma promessa, então aguardamos por isso e, para usar await, precisamos adicionar aqui Salve as alterações e dê uma olhada, abra a página de login e digite nosso e-mail e senha oito Enter e nada acontece. Mas no Network Sab, podemos ver a chamada da API, que retorna o token JWT na resposta Então, nossa metade da tarefa está concluída. Agora, temos que lidar apenas com erros de formulário. Então, de volta ao código VS, e aqui adicionamos o bloco try and catch para lidar com erros. Mova essa linha no bloco try e também no método catch, que neste erro para o objeto de erro. Agora, dentro desse bloco de captura, adicionamos a mesma condição que adicionamos ao formulário de inscrição Então, no formulário de inscrição, copie esta condição I e simplesmente cole-a em nosso formulário de login Para usar o erro de formulário definido, precisamos criar essa variável de estado. Na parte superior, criamos uma variável de estado chamada erro de formulário, definimos erro de formulário e, como valor padrão, passamos aqui uma string vazia. Agora, finalmente, simplesmente vimos esse erro em nosso formulário. Antes do nosso botão de envio, adicionamos uma condição. Se o erro do formulário estiver disponível, costure a tag de ênfase com o nome da classe, erro do formulário e simplesmente passe aqui o erro do formulário Salve as alterações e dê uma olhada, preencha o formulário com detalhes errados e envie o formulário. Veja aqui que estamos recebendo esse erro. 148. O que é JWT e como funciona: Agora, antes de nos aprofundarmos na autenticação do usuário, o que fazemos usando o token JCN Web ou o JWT Vamos primeiro entender o que é o JWT. Portanto, JWT significa token JCN Web, que é usado para transferir informações com segurança entre duas partes, como Bend e front-end Vamos entender isso com o exemplo. Então aqui está uma Harley. Ele faz login com as informações da conta, e-mail e senha. Nosso servidor primeiro verifica as informações e, se forem verdadeiras, servidor retorna seu ID de usuário como resposta e o armazena na sessão ou no Cookie. Agora, sempre que ele solicita algumas informações seguras, digamos que todas as suas informações bancárias. servidor primeiro solicita o ID do usuário e, se ele tiver o ID do usuário, depois o servidor envia as informações seguras. Mas aqui está um grande problema. Esta sessão ou cookie na qual armazenamos nosso ID de usuário pode ser facilmente modificada no navegador. Digamos que eu altere esse ID de usuário para o ID de usuário de outra pessoa. Em seguida, obtemos as informações sobre o usuário de dados. Portanto, essa abordagem não é segura. Agora, para resolver esse problema, apresentamos o JSON Web Token Então, agora Halley faz login novamente com seu e-mail e senha. Agora, nosso servidor primeiro verifica as informações e, se forem verdadeiras, servidor retorna o token exclusivo criptografado por muito tempo como resposta e o armazena no armazenamento local. Agora, o melhor desse token é que ele é feito com detalhes do usuário e uma chave secreta, que definimos no servidor. Portanto, sempre que a Harley envia uma solicitação de informações seguras , o servidor primeiro solicita o token JWT e o verifica usando nossa chave secreta É verificado e, em seguida o servidor enviará essas informações seguras. Se alterarmos alguma coisa nas informações do usuário , nosso token mudará. Eu sei que isso é um pouco confuso. Deixe-me te mostrar de forma prática. Em nossa API de teste, copiamos esse token web JSON Em nosso navegador, abra uma nova guia e pesquise jwt DotIO. Esta é a documentação oficial do JWT. Aqui nas bibliotecas, você pode ver a implementação do JWT para diferentes bibliotecas Agora, role para baixo até a seção Depurador. Aqui podemos decodificar nosso token. Então, vamos entender o que o token contém. Então cole nosso token aqui. Agora, todos os tokens do GWT estão divididos em três partes. A primeira parte é sobre o cabeçalho, que está na cor vermelha. segunda parte é sobre a carga útil, que está na cor roxa, e a última e mais importante parte é a assinatura, que está na cor azul Agora, esse cabeçalho contém o algoritmo e o tipo de token, o que é muito comum. Não se concentre nisso. Agora, essa carga contém os dados que o servidor envia com nosso token Nesse caso, eu passo os dados desse usuário. Podemos definir no back-end quais dados queremos enviar nessa carga Assim, podemos exibir esses dados em nosso front-end sem chamar uma API separada, e temos mais dados I At, que significa emitido em, e o valor é o momento em que nosso token foi gerado e EXP é nosso tempo de expiração Agora, a última parte que está em azul é a assinatura, que é gerada com base nesse cabeçalho, dados da carga útil e na chave secreta, que só está disponível no servidor Portanto, isso evitará que os usuários obtenham seu próprio token e o modifiquem com o ID para fingir ser outra pessoa. Porque se você modificar alguma coisa nessa carga ou cabeçalho, essa assinatura será regenerada Portanto, não há chance de o usuário fazer algo antiético É por isso que o JWT é tão popular. Agora deixe-me mostrar o que é chave secreta. Essa chave secreta é uma string que definimos no back-end. Então, em nosso back-end, temos esse arquivo ENV de pontos e aqui definimos o segredo do JWT Sei que essa é uma senha fácil, mas eu a configurei para mostrar a você. Portanto, apenas com essa chave secreta, nosso token será validado. Caso contrário, isso nos dará um erro. Resumindo, quando os usuários fazem login ou se registram com sucesso, obtemos o token web JSON, que simplesmente funciona como um cartão de segurança Solicite dados pelo usuário, que só podem ser acessados por usuários logados, servidor primeiro verifique a placa de segurança, que é nosso token web JSON, e valide com a chave secreta do JWT E se esse token for verificado, somente o servidor retornará esses dados ao nosso usuário. Simples assim. 149. Armazenando o JWT após o login e o cadastro: Agora, como sabemos, se for um cadastro ou estiver logado com e-mail e senha válidos, obteremos o JSON Web Token em nossa resposta Portanto, temos que armazenar esse token no site do cliente. Agora você pode pensar onde armazenamos esse token. Lembre-se de que fizemos isso em nosso projeto de destruição de tarefas. Armazenamos nossa tarefa no armazenamento local, que é o pequeno armazenamento do navegador. Aqui estamos aguardando nossa API de login, que retornará o objeto de resposta. Então, vamos armazenar isso em uma variável chamada resposta e simplesmente registrar essa resposta no console. Salve as alterações e dê uma olhada. Preencha o e-mail e a senha válidos. E envie o formulário. Veja, aqui obtemos o objeto de resposta, e aqui nos dados, obtemos nosso token. Agora, vamos armazenar isso em nosso armazenamento local. Então, no lugar dessa resposta, podemos desestruturar isso e obter dados aqui Agora remova esse console e escreveremos o item de conjunto de pontos de armazenamento local. Esse método usa dois parâmetros. Primeiro, o nome da nossa variável, que é token e, segundo, o valor da variável, que é token de ponto de dados. Salve as alterações e, novamente, faça login com e-mail e senha válidos. E vamos ver se obtemos o token no armazenamento local ou não. Então, abra a guia do aplicativo aqui e em nossa porta, que é o host local 5173 Aqui temos nosso token. Agora, a última coisa que precisamos fazer é redirecionar o usuário para a página inicial após o Então, aqui chamamos use o Navigate Hook de um Crouterdm e o armazenamos em Navigate Agora, basta usar aqui, Navegar, e passar aqui a página inicial Salve as alterações e dê uma olhada. Preencha o formulário com detalhes válidos e envie-o. Veja, redirecione para a página inicial. Um formulário de login está funcionando corretamente. Agora faremos o mesmo quando o usuário se registrar em nosso site, porque não quero que o usuário tenha que fazer login novamente com o e-mail e a senha depois de se registrar. A partir daqui, copiamos essas duas linhas e, em nosso componente de página de inscrição, após a espera, paginamos essas Agora vamos armazenar essa resposta da API de forma constante, desestruturá-la e obter aqui os dados E, finalmente, temos que definir essa navegação. Então, após nosso estado de uso, chamamos use Navigate Hook e armazenamos isso constantemente, chamamos Navigate. Salve as alterações e dê uma olhada. Vá para a página de inscrição, preencha o formulário com nome, ID de e-mail, senha, confirme a senha e endereço de entrega E clicamos em conenviar. Veja, nós redirecionamos novamente para a página inicial. Então, isso também está funcionando. 150. Obtendo usuários do token: Portanto, na lição anterior, armazenamos com sucesso nosso token web JSON no armazenamento local Agora, você se lembra de quando decodificamos nosso token no site da JWT, obtemos os dados atuais do usuário na carga útil Portanto, precisamos decodificar os dados do usuário do token e armazená-los no estado Mas a questão principal é onde definiremos esse estado de usuário, onde precisaremos desse objeto de usuário. Nós simplesmente precisamos do objeto do usuário em todo o nosso aplicativo. No componente do aplicativo, definiremos nosso estado do usuário porque aplicativo é nosso componente raiz e, a partir daqui, podemos passar objeto do usuário em todos os nossos componentes como adereços No topo, tínhamos usado o gancho. Primeiro, importamos e depois adicionamos trechos usados e passamos aqui usuário e definimos usuário Como valor padrão, passamos null. Quando nosso componente é renderizado, precisamos decodificar nosso token web JSON e armazenar esses dados nesse estado E para isso, o que vamos usar, né, usamos o efeito de uso Hook, então chamamos de efeito de uso. Na primeira posição, passamos a função de retorno de chamada e, na segunda, passamos uma matriz vazia porque só precisamos decodificar nosso token Agora, nesta função de retorno de chamada, primeiro, obteremos o token do armazenamento local Sit local storage dot got m, e aqui passamos o nome da nossa variável, que é token. Agora vamos armazenar essa invariável, chamada token ou JWT, você quiser chamá-la Agora, para decodificar esse ZSN WebTken, temos uma biblioteca Então, abra o terminal, escrevemos NPM install JWT decode e Deus. Vamos minimizar esse terminal e, na parte superior, importamos a decodificação JWT da decodificação JWT E em nosso efeito de uso, chamamos essa função de decodificação JWT e passamos aqui nosso Agora, isso retornará o objeto do usuário. Armazene-o na variável do usuário JWT porque já usamos o usuário aqui e simplesmente consultamos o log de pontos desse usuário do JWT Salve as alterações e dê uma olhada. Atualize a página e, no Console, veja, aqui temos nosso objeto de usuário Vamos simplesmente armazenar isso em nossa variável de estado do usuário. Então, no local do log de pontos do console, adicionamos set user. Agora podemos passar esse objeto de usuário para o componente Nabar como adereços Mas antes de fazermos isso, vamos verificar uma condição. E se não tivermos o token em nosso armazenamento local? Portanto, na guia do aplicativo do navegador, selecione esse token e remova-o daqui. Agora atualize a página e no Console, C, obtemos o erro, que é um token inválido especificado Então, quando não temos token no armazenamento local, obtemos nada nessa variável JWT e, em seguida, esse valor nulo passa para o código JWT D, e isso está nos dando erro Portanto, para corrigir esse problema, aderimos ao bloco try and catch e simplesmente movemos esse código no bloco Try. Então, se tivermos um erro nesse código, simplesmente não fazemos nada. Se seu aplicativo funciona apenas para usuários de login, nesse método de esboço, podemos redirecionar o usuário para a página de login ou registro Mas para nosso aplicativo, esse não é o caso. Salve as alterações e dê uma olhada. Atualize a página e veja que, mesmo que não tenhamos um token, não recebemos nenhum erro Agora, aqui está mais uma coisa. Quase toda vez que o desenvolvedor de back-end define um prazo de validade para nosso token web JSN por motivos de segurança e pelo tempo em que obtemos nosso valor decodificado Neste Bend, defino o tempo de expiração para 1 hora, o que significa que após 1 hora o token não é válido e isso também nos causará um erro. Em nosso efeito de uso, depois de armazenar esse valor decodificado no usuário JWT, passamos aqui uma condição de data dot now É maior ou igual a JWTUser dot EXP, multiplique Se essa condição for verdadeira, nosso token não é válido. Então, aqui, podemos simplesmente remover o token do nosso armazenamento local. Então, armazenamento local, não remova o item e passe aqui Tgon E depois disso, simplesmente recarregamos nossa página. Então, adicione location dot reload. Agora passamos, o que significa que nosso token é válido. Só então configuramos o usuário para JWT. Simples assim. Agora você pode perguntar por que aqui multiplicamos por 1.000 Portanto, essa função date dot now retorna a hora atual em milissegundos. Então, para converter esse tempo de expiração em milissegundos, temos que multiplicá-lo por 1.000 Veja as mudanças e elas funcionarão para nós. 151. Ocultar mostrar componente dependendo do usuário: Agora temos o objeto de usuário, que indica que o usuário está autenticado. Então, com esse objeto, podemos mostrar ou ocultar componentes. Aqui na barra de navegação, só queremos mostrar esses links de logout e cat dos moderadores se o usuário estiver Então, aqui, no componente NaBR, passamos esse usuário como adereços Salve isso e, no componente Nabar, obtemos adereços de usuário Agora, na parte inferior, envolvemos esses três links com os colchetes e aqui simplesmente adicionamos Se o usuário estiver disponível, somente então mostre esses links, mas isso nos dará erro de compilação Portanto, temos que envolver esses links com fragmentos de reação. Agora, o mesmo que temos que fazer com esses links de login e inscrição , porque se o usuário já estiver logado, não precisamos de login ou página de inscrição Então, envolva-os com colchetes Cy, e aqui adicionamos que o usuário I não está disponível, somente então exibimos esses dois links E, novamente, temos que adicionar aqui fragmentos de reação agora, se quisermos exibir aqui o nome do usuário, também podemos fazer isso usando esse objeto de usuário, salvar as alterações e dar uma olhada Veja, atualmente não temos objeto de usuário, e é por isso que temos aqui links de login e inscrição. Vamos verificar isso. Nas ferramentas do desenvolvedor, abra a guia do aplicativo e veja aqui que não temos token. Agora, vamos abrir a página de login e fazer login com e-mail e senha válidos. E clique em enviar e veja aqui que recebemos nosso token. Mesmo assim, recebemos links de login e inscrição, mesmo que tenhamos o estado do usuário. Por que isso está acontecendo? Simplesmente porque no componente do aplicativo, esse efeito de uso só será executado uma vez quando nosso componente do aplicativo for renderizado. Então, quando fazemos login em nosso formulário, nosso componente do aplicativo já é renderizado e já está armazenado como usuário nulo Deixe-me te mostrar uma coisa legal. No momento em que atualizamos esta página, podemos ver aqui nossos links de login Para resolver esse problema, precisamos apenas atualizar nossa página no login Abra o componente da página de login e, no local dessa navegação, simplesmente escrevemos a localização dos pontos da janela igual a em códigos duplos passamos por nossa página inicial Agora vamos remover essa variável de navegação e também na parte superior, remover essa entrada de uso de navegação. Salve as alterações e dê uma olhada. Remova esse token do armazenamento local, atualize a página e, na página de login, faça login com e-mail e senha e envie Veja, nossa página atualizada e também recebemos links de login Agora vamos fazer o mesmo com a página de inscrição. Então, abra o componente da página de inscrição e, no local dessa navegação, escrevemos a localização dos pontos da janela igual à Agora remova essa variável de navegação e, também na parte superior, removemos o uso de Navigate Import e terminamos com isso. Agora, na próxima lição, implementaremos a funcionalidade de logout. 152. Implementando a funcionalidade de logout: Agora, para fazer login e sair, estamos removendo manualmente o token do nosso armazenamento local. Mas em nosso aplicativo, temos nosso link de logout, que podemos usar para implementar a funcionalidade de logout. Então, quando nosso componente de logout for renderizado, removeremos esse token do armazenamento local Então, para isso, no componente de roteamento na parte inferior, adicionamos mais uma rota e definimos caminho para dividir o logout Aqui, precisamos criar um novo componente para sair. Na pasta do componente, temos a pasta de autenticação e, nessa pasta, criamos um componente chamado logout. Agora vamos adicionar um código clichê. Além disso, removemos esse devido e retornaremos null porque não queremos renderizar nada Agora, para executar o código na renderização do componente, temos que usar use effect Hook. Então, aqui adicionamos o efeito de uso, função de retorno de chamada e, como dependência, passamos uma matriz vazia Agora vamos escrever nossa lógica dentro dessa função de retorno de chamada. ponto de armazenamento local remove m, e aqui passamos o nome da nossa variável, que é token. Salve as alterações. E em nosso componente de roteamento, aqui adicionamos o componente de logout nos adereços do elemento Salve as alterações e dê uma olhada. Clique no link de logout e não obteremos nada aqui. Mas se verificarmos nosso armazenamento local, podemos ver que o Token foi removido daqui. Agora temos que redirecionar o usuário para nossa página inicial. Então, para isso, o que usamos, certo, usamos a localização dos pontos da janela. Portanto, no componente de logout, adicionamos aqui a localização dos pontos da janela igual Salve as alterações e dê uma olhada. Faça login em nosso aplicativo com e-mail e senha. E veja se estamos logados. Agora, clique em Sair e veja se está funcionando. Portanto, agora nosso aplicativo tem os dois recursos de login e desconexão Então é assim que implementaremos a funcionalidade de login e logout Você pode ver como é simples. Quando os desenvolvedores não entendem JWT, só então eles acham isso complicado 153. Simplificar o código: Agora, em nossa implementação atual, há poucos problemas. Então, aqui, após o login, estamos trabalhando com o armazenamento local e configurando esse token nele. O mesmo que fizemos na página de inscrição. C. Também no componente do aplicativo, estamos obtendo esse token do armazenamento local e, no componente de bloqueio, estamos removendo esse token Amanhã, se decidirmos mudar o nome desse token para outra coisa , teremos que atualizar esse nome nos vários componentes. Portanto, é melhor colocar toda essa lógica em um único lugar. Portanto, em nosso arquivo de serviços ao usuário, na função de login, estamos apenas retornando a promessa de nossa API. Em vez disso, também podemos salvar nosso token nessa função. Deixe-me te mostrar. Portanto, no local de retorno, adicionamos await e, para adicionar await, temos que tornar essa função assíncrona Agora podemos salvar essa resposta em dados constantes e desestruturar aqui E, por fim, adicionamos item de conjunto de pontos de armazenamento local ao token e passamos aqui, o token de pontos de dados. Então, essa função de login, cuidando totalmente da nossa lógica de login. Salve isso e, em nosso componente de login, removemos essa constante e também não queremos esse item de conjunto de pontos de armazenamento local. Agora você pode se perguntar por que não movemos esse redirecionamento em nossa função de login Portanto, após o login bem-sucedido, onde os usuários devem redirecionar não é o escopo dessa função de login Depende inteiramente dessa função de login. Amanhã, decidimos redirecionar o usuário para um local diferente, então não precisaremos alterar essa função de login. Guarde isso. Agora vamos fechar esse componente da página de login e fazer o mesmo com nossa lógica de inscrição. Então, vamos cortar esse item do conjunto de pontos de armazenamento local e também remover essa constante. Salve as alterações e, no arquivo de serviços ao usuário no local dessa devolução, adicionamos await e armazenamos isso em dados constantes e reestruturados Depois disso, simplesmente colamos essa linha de armazenamento local e, no final de await, tornamos essa função assíncrona Bom. Agora vamos simplificar o recurso de logout Clique neste ponto de armazenamento local para remover a função IM. E em nossos serviços ao usuário na parte inferior, criamos mais uma função chamada Logout e simplesmente colamos aqui, removemos a linha do item e exportamos essa função desse arquivo Salve isso e, em nosso componente de logout, simplesmente chamamos essa função Logout. Salve esse arquivo. Agora temos que atualizar a última parte do código, que está no componente do aplicativo. Então, em nosso arquivo de serviços ao usuário, criamos outra função chamada Guser e nessa função, primeiro, obtemos o token do armazenamento local Portanto, Const JWT é igual ao armazenamento local dot get item. E aqui passamos o token. Depois disso, decodificamos nosso token JWT. Na parte superior, importamos a decodificação JWT da decodificação JWT. Depois disso, em nossa função, chamamos aqui JWT decode e passamos aqui esse Agora, isso retorna nosso objeto de usuário. Então, retornamos esse objeto daqui. Mas e se não encontrarmos esse token no armazenamento local? Para isso, tentamos capturar o bloco em nosso componente de aplicativo. Mas em outros lugares, se chamarmos essa função Get user , obteremos um erro. Então, adicionamos aqui, tente pegar o bloco. E mova essas linhas no tri blog. E se obtivermos algum erro, simplesmente retornamos aqui null, simples assim Agora, vamos exportar essa função get user, salvá-la e, em nosso componente de aplicativo, remover essa primeira linha e, no lugar dessa decodificação do JWT, chamamos a função Gatuser E na parte superior, vamos remover essa entrada JWT. Salve as alterações e volte ao nosso arquivo de serviços ao usuário. Agora, se quisermos alterar o nome da nossa variável de token , precisamos alterá-lo apenas neste arquivo. Agora podemos até mesmo armazenar o nome dessa variável na variável. Na parte superior, criamos uma variável chamada nome do token e a configuramos em tokens de códigos duplos. Agora, no sinal da função, selecione essa string de token e pressione Control plus D ou Command plus D para vários cursores e substitua-a pela variável do nome do token. Agora, precisamos alterar esse nome apenas em um único lugar e ver nosso código parecer mais limpo e fácil de manter Agora, na próxima seção, veremos como podemos chamar APIs protegidas e, com isso, quase concluiremos esse projeto S na próxima seção. 154. Seção 14 Chamando APIs e rotas protegidas: Bem-vindo à seção 14 do curso definitivo de reação. Nesta seção, veremos como podemos chamar APIs protegidas, significa simplesmente que algumas de nossas APIs são apenas para usuários ajustados Como em nossa página Meu pedido, precisamos obter todos os detalhes do pedido do usuário de login atual. Então, veremos como podemos chamar APIs protegidas e, se o usuário não estiver logado, simplesmente redirecionaremos o usuário para a Além disso, veremos como podemos gerenciar rotas protegidas. Estou muito entusiasmado com esta seção e espero que você também esteja. Então, vamos começar. 155. Entendendo o recurso Adicionar ao carrinho: Agora, antes de implementarmos o recurso head to cart em nosso aplicativo, vamos entender esse recurso profundamente. Então, primeiro de tudo, colocamos os componentes no botão do carrinho. primeiro está no cartão do produto e segundo na página única do produto. Então, para o carrinho, criamos uma variável de estado, que armazenará os produtos, que adicionamos ao nosso cartão com a quantidade. Por exemplo, se tivermos o iPhone 14, podemos selecionar a quantidade desse produto e, em seguida, clicar no botão Carrinho, e nosso iPhone 14 será adicionado à nossa matriz de carrinho com essa quantidade. Portanto, para cada produto, temos um novo objeto com duas propriedades, produto, que é o objeto do produto, e temos quantidade, que é a quantidade selecionada atualmente. Nessa matriz de carrinhos, podemos ter vários produtos e mostramos o tamanho do carrinho em nossa barra de navegação. Essa é a primeira parte. A segunda parte é que nosso cartão é uma variável local, o que significa que, se atualizarmos a página, esse cartão ficará vazio novamente. Nós não queremos isso, certo? Então, qual é a solução aqui? Portanto, depois de adicionar esses detalhes do cartão no estado, podemos armazenar os detalhes do cartão do usuário no back-end. E na atualização, obteremos os detalhes do cartão no back-end Se recebermos um erro ao adicionar produtos ao cartão , restauraremos nosso cartão no estado anterior. Simples assim. Já fizemos isso em nossa seção de chamada de PI. Primeiro, veremos como podemos armazenar os detalhes do nosso cartão no estado local. 156. Adicionar ao carrinho localmente: Vamos começar com nossa primeira etapa, que é adicionar produtos no estado local. Portanto, o primeiro passo para adicionar qualquer variável de estado é decidir onde criaremos nossa variável de estado. Então, aqui está um componente do nosso aplicativo. Temos o componente do aplicativo como componente raiz. Dentro dele, temos dois componentes: Nabar e roteamento. E dentro desse roteamento, temos um único componente de página de produto e, dentro dele, temos nosso botão de cabeça para cartão Precisamos de uma matriz em dois componentes, barra de Na e página única do produto. Agora, deixe-me dar um atalho para decidir onde definimos nossa variável de estado Se nossa variável de estado precisar ser acessada em dois componentes diferentes , devemos definir essa variável de estado no componente pai mais próximo. Em palavras simples, basta ver qual componente principal está mais próximo do NaBr e do componente único do produto Então, aqui, o componente principal mais próximo é nosso componente de aplicativo. E se definirmos carrinho em um componente, somente então poderemos passar esse estado do carrinho como adereços nesses dois componentes Então, em nosso componente de aplicativo, após esse estado do usuário, adicionamos mais uma variável de estado chamada cart e definimos cart. E como valor padrão, o que passaremos à direita, uma matriz vazia. Agora, primeiro de tudo, o que precisamos no componente NBR. Só precisamos exibir o número de produtos em nosso cartão atual. Então, como adereços, passamos contagem de cartas igual ao comprimento dos pontos do carrinho Salve isso e, no componente da NBA, obtemos a contagem de cartas nos adereços e, na parte inferior, no lugar desse zero, simplesmente exibimos essa contagem de cartas Diga isso e agora não precisamos nos preocupar com esse Navar. Agora, voltando a um componente aqui no local de passagem do cartão e do cartão lateral no componente de produto único, podemos criar uma função aqui, const head to cart, função de seta e, dentro dela, escrevemos nossa lógica para adicionar item na matriz do carrinho Aqui no parâmetro da função, obtemos o produto selecionado e também a quantidade desse produto, que é o número de produtos que precisamos adicionar. Aqui, simplesmente configuramos o cartão como matriz. Primeiro, adicionamos todos os valores anteriores do cartão e, depois disso, adicionamos um novo objeto, e aqui definimos o produto para esse produto e a quantidade para essa quantidade. Ou podemos simplificar esse código removendo os dois. Se você se confundir posteriormente com essa sintaxe, não se preocupe, você pode usar essa sintaxe antiga Depende totalmente de você. Agora, vamos passar essa função de cabeça para carta por meio de adereços. Então, no componente de roteamento, passamos de um cartão para outro cartão Salve esse arquivo e, no componente de roteamento, chegamos aqui à função do cartão nos adereços E, novamente, passe-o no componente de página única do produto. Então, ir ao carrinho é igual a ir ao carrinho. Salve esse arquivo e, em nosso único componente de página de produto, finalmente, chegaremos aqui, da cabeça ao carrinho, com os adereços E na parte inferior, em nosso botão de cabeça para o carrinho, passamos o evento de clique, e nele adicionamos a função de seta, e aqui chamamos a função cabeça ao carrinho. E como primeiro argumento, passamos nosso objeto de produto, que estamos recebendo do back-end. Olha, e como segundo argumento, passamos a quantidade. Veja as mudanças e dê uma olhada. Antes de tudo, abra as ferramentas do desenvolvedor, abra qualquer página do produto. E a partir daqui, podemos alterar a quantidade e clicar no botão Adicionar ao carrinho. E veja no topo, somos contrários a um. Agora, vamos abrir outra página do produto e clicar no botão Adicionar ao carrinho. E aqui podemos ver as contagens atualizadas. Agora, vamos ver nossa matriz de carrinhos. Então, a partir daqui, abrimos a guia Componentes e selecionamos nosso componente do aplicativo. Aqui podemos ver a matriz de carrinhos. Agora altere a mesma quantidade do produto e clique em dois cartões. Veja, aqui temos três produtos, e esse é o bug. Então, temos que consertar isso. Portanto, em nosso componente de aplicativo, removemos essa função de cartão definido e escreveremos a lógica do zero. Então, primeiro de tudo, criamos uma nova variável chamada cartão atualizado e adicionamos todo o valor anterior usando o operador de spread Agora, encontramos um índice de produto seletivo nessa matriz. Portanto, o cartão atualizado não encontre o Índice. Aqui, pegamos cada item e verificamos aqui se a condição é igual à ID ID do sublinhado do ponto do produto, ponto, E armazenamos esse índice na variável call product index. Agora, esse método find index retorna o valor do índice do produto. E se nosso produto selecionado não estiver disponível nessa matriz, ele retornará menos um Então, aqui, temos que passar a condição se esse índice de produto for igual a menos um, que significa que o produto não está em Em seguida, chamamos o método cart dot push atualizado. E aqui nós empurramos o objeto com o produto para o objeto do produto. Quantidade até essa quantidade. Caso contrário, atualizaremos apenas a quantidade do produto adicionado, defina o carrinho atualizado. Aqui, passamos a quantidade de pontos do índice do produto mais igual a essa Se o produto não estiver disponível, adicionamos um novo objeto com a propriedade de produto e quantidade. Caso contrário, adicionamos a quantidade à quantidade antiga de seu produto. Agora, no final, simplesmente configuramos o carrinho para nosso cartão atualizado. Salve as alterações e dê uma olhada, atualize a página, adicione um item e clique em Adicionar ao carrinho Veja se foi adicionado. Agora altere a quantidade e, novamente, clique no anúncio no carrinho. Veja aqui, somente atualizações de quantidade. 157. Chamando uma API protegida: Portanto, na lição anterior, armazenamos nossos produtos no estado do cartão local. Agora veremos como chamamos essa API head to card. Agora você pode se perguntar por que estou investindo tanto em chamar essa API? Essa é a mesma API usada buscar produtos ou obter categorias E a resposta é não, não é a mesma API que chamamos anteriormente. Essa é a API que só pode ser acessada pelos usuários logados. Deixe-me te mostrar. Então, o painel do cliente do Tender e aqui adicionamos uma nova solicitação, selecionamos aqui publicar solicitação e gravamos a API na coluna SDTP, barra dupla, host local, API de barra da coluna 5.000, barra CAT, aqui passamos nosso ID Por enquanto, basta passar aqui um ID aleatório, e temos que passar o número da quantidade no corpo dessa solicitação. Então, selecione o corpo e, aqui no JSON, passamos a quantidade para cinco E envie a solicitação. Aqui podemos ver que recebemos um erro, acesso negado, nenhum token fornecido. Agora, deixe-me mostrar como estamos obtendo esse erro do back-end No projeto Bend, temos essa pasta de rotas, e nela temos um arquivo CAT no qual eu defino todas as APIs CAT. Agora, na linha 27, temos que cortar uma rota, e aqui eu adiciono os dois utensílios de metal. Não se preocupe Se você não conhece o node jazz, estou apenas contando como estamos recebendo esse erro. Você não precisa codificar uma única linha no back-end. Portanto, esse juramento é um middleware que é executado primeiro, antes que nosso código de API principal Agora vamos ver o que está dentro desse bot. Então, na pasta middleware, temos ambos os middlewares, e aqui temos Primeiro, essa função obterá nosso token web JSON de nosso cabeçalho de solicitação chamado X a token E então, se não passarmos nosso token web JSON nesse cabeçalho, ele nos dará esse erro de acesso negado, cujo código de status é 401 E se tivermos um token e esse token for verificado pela chave secreta do JWT, ele executará nossa lógica média de API, como a visão geral desse middleware Resumindo, para acessar APIs protegidas, precisamos passar nosso token web JSN em nosso cabeçalho Só então podemos acessar APIs protegidas. Quase todos os aplicativos de alguma forma passam o token para o back-end e a forma mais comum e segura é por cabeçalho. Em nosso aplicativo, também precisamos definir nosso token web JSN no X ou token Então, para passar o token no cabeçalho em nossa pasta Utils, criamos mais um arquivo chamado set autocon dot js Agora, neste arquivo na parte superior, importamos o cliente de API desse arquivo de cliente de API, que é nossa variável axios pronta Depois disso, definimos a função const set token. E no parâmetro, obtemos nossa função de seta simbólica e, dentro dessa função, adicionamos uma condição. Se o token estiver disponível, definiremos os padrões de pontos do cliente da API, os cabeçalhos dos pontos comuns, os colchetes e aqui passaremos o nome do cabeçalho, que é Definimos o mesmo nome de cabeçalho no back-end. Em seu aplicativo , pode ser diferente. Então você tem que passar esse nome aqui igual a, passamos token Agora, em L, removeremos esse cabeçalho, excluiremos, copiaremos essa expressão e colaremos aqui. E, no final, simplesmente exportamos esse conjunto padrão ou função de token. Salve esse arquivo e, agora, em nosso componente de aplicativo fora dessa função, chamamos a função set ou token. E aqui precisamos passar nosso token web JSON, que pode ser armazenado no armazenamento local Então, podemos escrever aqui: armazenamento local , ponto, obter item e token. Agora, como sabemos, estamos definindo todos os nossos tokens de armazenamento local no arquivo de serviços do usuário. Então, em vez de escrever esse armazenamento local aqui, podemos recortá-lo e, no arquivo de serviços ao usuário na parte inferior, exportar uma nova função chamada Get JWT E dentro disso, simplesmente retornamos o item dot get do armazenamento local e aqui passamos o nome do token. Salve esse arquivo e, em nosso componente de aplicativo, podemos chamar aqui a função Gt JWT Simples assim. Agora, para nosso aplicativo, não precisamos enviar nosso cabeçalho de token em cada solicitação. Definimos isso para todas as nossas chamadas de API. 158. Chamando a API Adicionar ao carrinho: Agora vamos chamar nossa API Head to Card. Na pasta de serviços, criamos um novo arquivo, serviços de cartão de chamada, no qual definiremos todas as APIs do nosso cartão O mesmo que fizemos com os serviços ao usuário. Ao usar essa forma, podemos manter facilmente nossas chamadas de API e não precisamos escrever a mesma chamada de API várias vezes em nosso aplicativo. Então, no topo, importamos API do cliente de API Utils slash Agora, crie uma nova função chamada Add to Cart API. E dentro dessa função, chamaremos nossa API. Então, api client dot post. Aqui no backticks, adicionamos CRTs de barra, agora aqui, precisamos adicionar nosso ID do produto selecionado, para que possamos obter esse ID do produto como parâmetro dessa função, e precisamos da quantidade Agora, em nossa API, passamos o Dollar calibracets ID. E no segundo parâmetro, passaremos nosso objeto corporal. E nisso, definimos quantidade como quantidade ou podemos remover isso. Essa expressão retorna a promessa. Então, podemos simplesmente devolver essa promessa a partir daqui. , vamos exportar essa função daqui, salvar as alterações e, em nosso componente de aplicativo, na função head to cut, depois de atualizarmos nosso estado local, chamamos a função de API head to cut dos serviços de cartão. E aqui precisamos passar dois argumentos. primeira é a ID atual do produto, que é a ID de sublinhado do ponto do produto, e a segunda é a quantidade desse produto Agora, como sabemos, essa função retornará a promessa. Podemos lidar com isso usando o método then e cache, ou podemos usar try and catch também. Mas eu pessoalmente gosto de usar o método then and catch. Então, agora o que faremos se adicionarmos o produto ao CAT com sucesso. Aqui, podemos simplesmente exibir alerta ou mostrar uma notificação de torrada Então, por enquanto, simplesmente const dot log, esses dados de pontos de resposta E no método de cache, temos que lidar com o erro. Por enquanto, simplesmente registramos pontos no console essa resposta de pontos de erro. Além disso, se o produto não for adicionado ao nosso cartão, restauraremos o estado do cartão para o estado anterior. Basta definir cartão a cartão. Salve as alterações e dê uma olhada. Abra o console, altere a quantidade e coloque o Glicon no carrinho e veja aqui a mensagem, item adicionado ao cartão Agora vamos verificar isso em nosso banco de dados. Então, no Mongo D, torne-se passe, abra a coleção de cartas. Veja, aqui temos um documento e nele temos nosso produto. Perfeito. Agora, vamos simplesmente mostrar a notificação de sucesso e erro Agora você pode perguntar o que é notificação de torrada? Deixe-me te mostrar em apenas um minuto. Primeiro, abra o terminal e, no novo terminal, escrevemos NPM, I, react, dessify e Usando o React to Stify Library, podemos exibir nossas notificações forma muito fácil e moderna Agora minimize esse terminal e, na parte superior, importaremos o contêiner toast e também o método toast do react para a Biblioteca Stifi Além disso, temos que importar seu arquivo CSS para adicionar estilos. Então importe, reaja tostify dis react, Agora precisamos adicionar esse componente de recipiente de torrada em nosso aplicativo, para que possamos adicioná-lo em qualquer lugar neste tubo Então, aqui nós adicionamos o componente do recipiente de torrada. Agora só precisamos adicionar nossa mensagem nessa função toast Então, em nosso método then, no lugar desse console, adicionamos torradas Agora, aqui, podemos selecionar vários métodos. Por exemplo, temos sucesso que mostrará a notificação em texto verde. E aqui passamos nossa mensagem de produto, adicionada com sucesso. Agora, deixe-me mostrar outros métodos também. Portanto, duplique essa linha mais quatro vezes e altere esse método para erro para cor vermelha, aviso para aviso amarelo, informação para cor azul, e também temos o padrão Por isso, não aprovaremos nada. Além disso, no método catch, adicionamos o erro toast dot e a mensagem de falha na adição do produto Guarde os gengivas e dê uma olhada. Clique em para carregar o carrinho e veja aqui, no canto superior direito, que recebemos nossas notificações de brinde Se estivermos com o cursor na notificação, ela parará aí. Então, essas são as notificações do brinde. Você pode ver como podemos adicionar notificações de forma simples e fácil. Agora, no lugar de exibir as notificações de torradas no canto superior direito, quero mostrá-las no canto inferior direito No componente do recipiente de torrada, temos uma sonda chamada posição Se você não obtiver o autoizon, pressione Control plus space ou Command plus space e veja aqui algumas propriedades Aqui, selecionamos o canto inferior direito. Além disso, podemos personalizar mais essa notificação de torrada. Para isso, você pode consultar sua documentação oficial. Eles explicam isso em uma linguagem muito simples e fácil. Também a partir daqui, removemos essas notificações de torradas indesejadas. 159. Buscando o carrinho do usuário do backend: Então, atualmente, quando estamos adicionando produtos ao nosso cartão, ele é adicionado com sucesso em nosso banco de dados. Agora, em nossa página do cartão, precisamos exibir apenas os detalhes do cartão em nossa tabela. Então, quando um arquivo de serviços de cartão, e aqui definimos uma nova função chamada API Get card. E nessa função, simplesmente chamamos api client dot GAT E para obter o cartão de usuário, passamos pelo SCAT. Você pode usar nossa documentação de API como referência. Agora, essa expressão retorna uma promessa. Então, retornamos isso e vamos exportar essa função. Salve esse arquivo e, em nosso componente de aplicativo, após essa função de acesso ao cartão, criamos uma nova função chamada Obter cartão. E dentro dessa função, simplesmente chamamos nossa API Get card. Agora, o que essa função será escrita? Certo, chegamos aqui, prometo. Em seguida, obtemos a resposta e simplesmente configuramos o carrinho para os dados do ponto de resposta. No método catch, adicionamos erro toast dot, algo deu errado. Agora, em qual página queremos buscar a API do cartão. Você pode dizer na página do cartão, e essa é a resposta errada. Deixe-me mostrar o que acontecerá se chamarmos nossa função Gecard na página do carrinho No componente de roteamento, passamos os adereços do cartão Get para o carrinho G. Salve isso e dentro do componente de roteamento, primeiro, pegamos aqui os adereços e os passamos diretamente no componente da página do cartão Transfira o cartão para o cartão G. Salve isso e, no componente da página do carrinho, obteremos nossa função Gcard nos adereços e, no efeito de uso, chamaremos essa Portanto, use o efeito e passe a função Callback e a matriz vazia como dependência E na função de retorno de chamada, simplesmente chamamos a função Get card Diga as mudanças e dê uma olhada. Aqui temos um erro. Então, vamos ver isso no Console. Aqui obtemos getcardpi dot n não é a função. Em nosso componente de aplicativo, aqui, esqueci de chamar essa função, salvar as alterações e dar uma olhada Veja, nosso erro desapareceu e, em nossa guia de componentes, selecione o componente do aplicativo e aqui obtemos a matriz de cartões. Agora, se atualizarmos a página , também receberemos os detalhes do cartão Agora deixe-me mostrar o bug principal. Acesse a página de produtos e atualize a página. Atualmente, temos zero itens em nosso carrinho, mas no back-end, temos dois itens. Se tivéssemos o mesmo item , no estado local do carrinho, temos um novo produto com nova quantidade. Mas no back-end, temos outra quantidade. Basicamente, se chamarmos Obter cartão somente na página do carrinho , os dados do nosso cartão de back-end e estado local do carrinho terão dados diferentes e não queremos isso. Portanto, podemos chamar essa função Get card no componente do aplicativo. Então, em nosso componente de aplicativo, adicionamos outro efeito de uso e, aqui no retorno de chamada, chamamos nossa função Get card Mas aqui, temos que passar a condição. Se o usuário estiver disponível, somente então chamaremos essa função Get card porque essa API só pode ser acessada por usuários logados. E na matriz de dependências, podemos adicionar aqui o usuário Quando o usuário mudar, essa API Get card será executada. Salve as alterações e dê uma olhada, atualize a página e veja no cartão que estamos recebendo os detalhes do cartão Agora, uma pergunta que você pode fazer é por que não removemos a função Getcard do componente de página do cartão Assim, podemos usá-lo como uma verificação dupla dos detalhes do nosso cartão. Se você quiser remover esse efeito de uso, você também pode fazer isso. Está totalmente bem. Deixe-me também remover isso. Agora, só precisamos exibir os detalhes do nosso cartão nesta tabela. Portanto, para detalhes do cartão de exibição, precisamos do estado do cartão neste componente. Então, de volta ao nosso componente de aplicativo. No lugar desses adereços de carta de gato, adicionamos carta a carta E no componente de roteamento, também mudamos esse carrinho e passamos aqui de carrinho para carrinho E, finalmente, em nossa página CAT, aqui temos nossa matriz CAT. Agora, para verificar, registramos pontos no console essa matriz CAT, salvamos as alterações e, na página CAT, abrimos o console, atualizamos a página e vemos, aqui estamos obtendo a matriz CAT, que é a matriz de objetos com propriedades de produto e quantidade Então, em nosso componente de carrinho na parte inferior, no corpo do Te, adicionamos um mapa de pontos do carrinho. Aqui obtemos um único item, função de seta, e aqui simplesmente retornamos essa linha da tabela. Agora, aqui, esse item é um objeto, então podemos desestruturá-lo e obter aqui propriedades do produto e da quantidade Estou indo um pouco mais rápido porque estamos trabalhando no React há muito tempo, e você já sabia dessas coisas. Se eu explicar cada etapa, você definitivamente ficará entediado Então, primeiro, na linha da tabela, adicionamos o atributo-chave ao ID de sublinhado do ponto do produto Em seguida, substituímos esse nome pelo título do ponto do produto. Em seguida, adicionamos o preço do produto em pontos. Em seguida, temos a entrada de quantidade. Então, aqui passamos a quantidade para essa quantidade e o estoque para o estoque de pontos do produto. Por enquanto, usamos a função de quantidade definida. E no total, passamos quantidade para o preço do ponto do produto. Salve as alterações e dê uma olhada. Veja, na tabela, pegamos nossos itens. Linda. Agora vamos calcular esse subtotal. Então, para isso, na parte superior, criamos uma nova variável de estado, então selecione uste e selecione os trechos, dê um nome, subtotal e defina o subtotal e o valor Agora, para contar o subtotal, usamos use effect, pass here, função callback e, na matriz de dependências, adicionamos a matriz adicionamos Você pode me dizer por que usamos aqui o efeito de uso? Certo. Porque quando alteramos os dados do carrinho , também queremos ver o subtotal atualizado Então, na função de retorno de chamada, primeiro definimos total igual Em seguida, usamos o ponto do carrinho para o loop H. E aqui temos a função de seta de cada item. E aqui fazemos o total mais igual ao item, ponto do produto, ponto do preço em quantidade do item E, por fim, simplesmente definimos o subtotal para esse total. Agora, na parte inferior, passamos o subtotal e, no total final, escrevemos o subtotal mais a taxa de envio, que Salve as alterações e dê uma olhada. Veja, aqui obtemos nosso subtotal e total de acordo com os dados do nosso cartão 160. useGancho de contexto: Portanto, atualmente em nosso aplicativo, temos o estado do usuário e o estado do cartão em nosso componente do aplicativo. Agora, como em nosso componente de cartão, precisamos exibir esses detalhes e perfil do usuário na parte superior. Uma solução é passar nosso objeto de usuário usando adereços pelo componente de roteamento e depois pelo componente do cartão Já fizemos isso muitas vezes com esse estado de placa, mas isso é realmente perda de tempo e também é chamado de perfuração de hélice, o que significa que estamos perfurando todos os componentes para passar apenas um suporte para o componente secundário Outra forma de passar dados é usando use o gancho de contexto. Portanto, o Contact Hook é usado para gerenciar dados globais no aplicativo react, como tema, usuário, detalhes do cartão, etc Em palavras simples, usando o use Context hook, podemos fazer com que nossos dados sejam acessados globalmente por qualquer componente. Portanto, se tornarmos nossos dados de usuário globais, eles poderão ser acessados em qualquer componente que desejarmos sem passar manualmente pelos adereços Vamos ver como criar contextos. Então, para criar contexto no react, precisamos fazer três etapas simples. Primeiro, criando o contexto, segundo, fornecendo o contexto e terceiro, consumindo os contextos. Não se preocupe com nenhum deles. Veja isso e, no final, você verá a magia dos contextos. Então, vamos começar com a etapa número um, criando o contexto. Então, aqui estamos criando o estado global para nosso usuário. Então, na pasta de origem, criamos mais uma pasta chamada Context. E nessa pasta, definiremos todos os nossos contatos. Então, aqui criamos um novo arquivo chamado Contatos do usuário dot JS. Agora, para criar contexto, primeiro importamos a função create context da biblioteca react. Essa função é usada para criar contexto. Agora chamamos essa função de criação de contexto, e aqui passamos null para o valor padrão e armazenamos isso em uma variável chamada contexto do usuário Você pode dar o que quiser, mas é melhor chamar o mesmo nome que bom. E, no final, vamos exportar o contexto padrão do usuário. Então, nossa primeira etapa está concluída. Agora vamos fazer a etapa número dois, que é fornecer o contexto. Então, quando definimos nosso estado de usuário, temos que inserir os contextos nesse componente Então, no componente do aplicativo na parte superior, importamos contextos de usuário de Context, cortamos contextos de usuário Aqui, precisamos definir quais componentes devem acessar esse contexto de usuário. Então, novamente, nessa hierarquia, se você quiser passar dados do usuário para o componente do cartão, também queremos nossos dados do usuário no componente Navbar Então, aqui, precisamos apenas fornecer os dados aos componentes Navbar e de roteamento, e esses dados podem ser acessados em todos os seus componentes e esses dados podem ser acessados secundários Portanto, envolva esses dois componentes com o provedor de pontos de contexto do usuário. Portanto, qualquer componente que você passe entre esse provedor, ele e seus componentes filhos podem acessar esse valor de contexto. Agora podemos passar valor usando o atributo value neste provedor de contexto. Então, escreva o valor igual a, simplesmente adicionamos aqui esse usuário Nesse atributo de valor, também podemos passar funções, objetos, qualquer coisa. Agora vamos ver como acessar essa variável dentro do nosso componente de página do carrinho. Abra nosso componente de página de cartão no qual queremos usar esse valor. Mas como podemos acessar esse valor? Então, no topo, importamos use Context hook da biblioteca react. E dentro desse componente funcional, escrevemos contextos de uso, exceto um argumento, que é nosso contexto de usuário Portanto, precisamos importar esse contexto de usuário de nossos contextos e cortar o contexto do usuário Agora passe esse contexto de usuário dentro desse gancho de contexto de uso e armazenamos esse valor em uma variável chamada objeto de usuário porque já definimos o usuário aqui para nossa imagem. Agora vamos consolar Salve as alterações e dê uma olhada. Aqui no aplicativo, meu token expirou Então eu tenho que fazer o login novamente, e aqui vamos para a página do cartão. Veja aqui no console, obtemos nosso objeto de usuário. Portanto, seja qual for o valor que você passar neste provedor de contexto, podemos acessar esse valor usando use Context hook. Se você entende essas três etapas, parabéns. Você entende o uso do gancho de contexto. Então, aqui no lugar dessa imagem do usuário, adicionamos craques e, dentro desse SDDB, e, dentro desse SDDB duplo legal para nossa barra, host local, perfil de barra da coluna 5.000, barra e aqui adicionamos o nome da imagem do perfil barra e aqui adicionamos Então, dólar, colchetes de Cully, objeto do usuário, interrogação, ponto, escolha do perfil, porque se nosso usuário for nulo, obteremos Em seguida, no local desse nome, adicionamos nome ao objeto do usuário, nome ponto de interrogação. E a seguir, no local deste e-mail, passamos aqui o e-mail para o usuário Object, marcamos o email com pontos. Salve as alterações e dê uma olhada. Veja, aqui obtemos nossos dados de usuário sem passar por adereços. Agora, aqui não precisamos dessa imagem de usuário, então remova-a e agora podemos renomear esse objeto de usuário para usuário Agora, de volta ao nosso componente de aplicativo. Aqui, passamos o usuário como adereços. Não precisamos mais fazer isso. Remova esses adereços de usuário daqui e do componente mais novo no local de obtenção desse usuário dos Aqui, chamamos use Context hook e, dentro dele, passamos nosso contexto de usuário e armazenamos esse valor na variável do usuário. Salve-os e veja se funciona da mesma forma. 161. Exercício de criação de contexto de carrinho: Agora é hora de fazer um pouco de exercício. À medida que definimos nosso contexto de usuário, também podemos definir o contexto do carrinho porque o estamos usando na página do componente do cartão. E nesse contexto, passe valores como matriz do carrinho e função de ir para o carrinho. Quero que você defina o contexto do carrinho e faça que a função carrinho e Ed to cart em valor e obtenha esses valores no componente da página do carrinho e também atualize todos os componentes que estão usando função cart ou head to card a partir dos adereços Saiba que é um exercício fácil e você pode fazer isso em apenas dois a 3 minutos. Complete o exercício e , em seguida, observe a solução. Espero que você resolva esse exercício. Agora vamos ver rapidamente essa solução. Na pasta Context, criamos um novo arquivo chamado card context dot gs. O primeiro passo para definir contextos é usar a função Create Context Adicione aqui create context e veja, com a ajuda do autoiput, obtemos isso como valor padrão, passamos aqui null, agora armazenamos essa função em uma variável chamada contexto de cartão e, no final, simplesmente exportamos o contexto padrão desse Salve esse arquivo e no componente do aplicativo em que definimos nossa taxa de cartão, portanto, precisamos adicionar nosso provedor nesse componente. Então, aqui, após o contexto do usuário, adicionamos o contexto do cartão, selecionamos a importação automática, provedor de pontos e agrupamos nossos componentes com o provedor de pontos do contexto do cartão. E dentro desse provedor, temos adereços de valor iguais a agora, aqui no lugar de passar uma única variável, podemos passar objetos de variáveis Então, primeiro, passe a matriz do carrinho e, em segundo lugar, na função do carrinho. Aqui, isso significa ir ao carrinho para adicionar ao carrinho. Estou escrevendo diretamente o código SOT. Salve isso e, agora, em nosso componente de página de carrinho no local de obtenção da matriz de cartões a partir dos adereços, podemos simplesmente adicioná-lo, usar Context e, dentro dele, passar o contexto do cartão E obtemos esses valores aqui na variável chamada contexto do cartão. Ou podemos desestruturar esse objeto, e aqui obtemos o carrinho e a função de adição ao cartão Veja as mudanças e dê uma olhada. Veja, funciona da mesma forma que antes. Agora vamos substituir todas as cartas que estamos recebendo dos adereços. Portanto, sempre comece com o aplicativo do componente raiz, e podemos ver na barra Near estamos passando a contagem de cartas, que é o comprimento do ponto do carrinho. Assim, podemos remover o e no componente nebar no lugar desses adereços, chamamos aqui, usamos Contexto e passamos aqui, contexto do cartão, e armazenamos esse valor na variável e reestruturamos esse objeto e obtemos aqui armazenamos esse valor na variável e reestruturamos esse objeto e obtemos Agora, na parte inferior, no local dessa contagem de carrinhos, adicionamos o comprimento dos pontos do carrinho. Salve as alterações e dê uma olhada. Veja, também está funcionando. Agora vamos verificar outros componentes. Então, de volta ao componente do aplicativo. Aqui podemos ver o carrinho e o calor carrinho, ambos passando por adereços Portanto, remova esses dois adereços. E no componente de roteamento, também removemos esses adereços E também remova essa função no carrinho do componente único do produto e também remova os adereços do cartão do componente da página do cartão Já atualizamos esse componente da página do cartão, então não se preocupe com isso. Só precisamos atualizar esse único componente da página do produto. Então, abra esse componente e remova os adereços e chamamos aqui, usamos o Context Hook e simplesmente passamos aqui, o contexto do cartão Isso retornará nossos valores, então nós o desestruturamos aqui e entramos na função cart Salve as alterações e você verá como, de forma simples e sem fazer perfurações, podemos passar nossa variável na árvore de componentes 162. Removendo itens do carrinho: Agora, vamos implementar uma funcionalidade de remoção de itens. Primeiro, removeremos o produto do nosso estado local. Em seguida, também chamaremos a API para remover o item do nosso back-end. Então, primeiro, deixe-me fechar todos esses arquivos. E no componente do aplicativo, depois da função at to cart, criamos uma nova função chamada remover do cartão. E no parâmetro, obtemos o ID do produto que queremos remover. Portanto, nesta função, primeiro, armazenaremos nossa matriz CAT atual em uma variável chamada cartão antigo, igual à matriz e distribuiremos nossa matriz de carrinhos Agora escrevemos o filtro de pontos do cartão antigo. Aqui obtemos cada item, que é o objeto com propriedade de produto e quantidade. E aqui passamos a condição, item, ponto, produto, ponto, ID de sublinhado não é igual a esse Portanto, isso retornará uma nova matriz com todos os produtos cujo ID não corresponda a esse ID Então, armazenaremos isso em uma nova variável chamada nova carta e, depois disso, simplesmente definiremos a carta para essa nova carta. Agora, vamos verificar esse código. Então, aqui em nosso valor de contexto de cartão, passamos nossa função de remoção do cartão. Veja as alterações e, agora, em nosso componente de página do carrinho, acessaremos essa função. Após essa matriz de cartões, removemos isso para o cartão daqui. Não precisamos dele e chegue aqui, retire do carrinho. Agora, na parte inferior, temos nosso ícone de remoção. Nesta imagem, passamos o evento de clique, função de seta e aqui chamamos a função de remover do carrinho. E simplesmente passe aqui o ID de sublinhado do ponto do produto. Veja as alterações e dê uma olhada, reprima a página e vamos remover um item daqui Veja se o item foi removido da nossa matriz de carrinhos e também que nosso subtotal e total final foram atualizados de acordo com nosso novo cartão Agora, se atualizarmos a página, teremos nosso produto de volta porque estamos obtendo nosso cartão do banco de dados Para remover o produto, também precisamos removê-lo do nosso back-end. Abra o arquivo de serviços do cartão e, na parte inferior, definimos uma nova função chamada remover da API do cartão. No parâmetro, obtemos o ID do produto. Agora, dentro dessa função, chamamos o método dot patch do cliente da API porque estamos atualizando apenas parte dos nossos dados. Agora, para o backend da API, usamos aqui backticks, cart, slash remove, slash, agora aqui precisamos adicionar nosso ID do produto que queremos remover Agora retornamos essa expressão e também no final, exportamos a disfunção Salve esse arquivo e em nossa função remover do cartão, ao final, chamamos nossa API de remoção do cartão e passamos aqui nosso ID do produto. Agora, essa expressão retornará uma promessa. Aqui usamos o método then. Mas se removermos o produto do nosso cartão com sucesso , não queremos fazer nada. Remova isso e adicionamos o método catch. Se tivermos um erro, exibiremos em toast dot o erro e passaremos aqui que algo deu errado E depois disso, vamos colocar o carrinho no carrinho antigo. Simples assim. Salve as alterações e dê uma olhada. Remover item, item removido daqui. Atualize também a página e veja se ela também foi removida do back-end Você pode ver usando contatos e serviços como é fácil e simples chamar um PI. 163. Aumentar e diminuir a quantidade do produto: Agora vamos implementar o recurso de aumento e diminuição do CAT. Em nosso componente do aplicativo, depois que essa função foi removida do carrinho, definimos uma nova função chamada atualizar carrinho no parâmetro, obtemos o ID do produto, que queremos atualizar. Dentro dessa função, primeiro declaramos uma variável chamada cartão atualizado e armazenamos todos os valores anteriores do nosso cartão Observe que este é um cartão atualizado, não um cartão de atualização. Depois disso, escrevemos um cartão atualizado, dot find Index. Aqui obtemos um único item, e aqui passamos nossa condição, ponto do item, ponto, ID do sublinhado do produto, é igual a esse ID Isso retornará o índice do nosso produto selecionado. Armazene isso no índice de produtos de chamada variável. Agora, aqui fazemos algo assim, atualizamos a AT e passamos a quantidade de pontos do índice do produto mais igual a um. E então simplesmente configuramos o carrinho para o CAT atualizado. Agora, aqui está uma coisa. Vamos usar essa função para os dois casos de uso, aumentando e diminuindo. Mas aqui, estão realizando apenas uma lógica aumentada. Em nosso parâmetro de função, adicionamos mais um parâmetro inicialmente chamado tipo, que pode ser aumento ou diminuição. Depois de encontrar o índice, adicionamos a condição I do tipo igual para aumentar e, dentro desse bloco I, simplesmente movemos essa lógica Agora vamos duplicar esse bloco I e alterar esse tipo para diminuir e alterar isso para menos igual Agora, na parte inferior, vamos passar essa função em nosso valor de contexto. Salve as alterações e a pergunta é para onde vamos importar essa função? Devemos inserir isso no componente de entrada de quantidade? A resposta é não. Porque em nossa página única de produto, estamos usando o mesmo componente de entrada de quantidade apenas para alterar a quantidade do produto. Nesse local, não queremos chamar a API. Aqui está a solução. No componente da página do carrinho, obtemos nossa função de cartão de atualização. E na entrada de quantidade, definimos adereços de quantidade, que é a função que ativaremos no evento de clique do botão mais menos Eu sei que isso é um pouco confuso. Basta ver isso uma vez e você entenderá tudo isso. Portanto, nessa quantidade definida, passamos nossa função de cartão de atualização e também passamos seus novos adereços, e também passamos seus novos adereços, página do cartão para verdadeira e a ID do produto para a ID sublinhado do ponto do produto Salve-os e, no componente de entrada de quantidade nos adereços, obtemos aqui a página do cartão e o ID do produto Agora, nesta função de clique, aderimos à condição. Se a página do carrinho for verdadeira, chamaremos uma função de quantidade definida. Nesse caso, essa é a nossa função do cartão de atualização. Então, aqui temos que passar dois argumentos tipo e ID do produto. Então, primeiro digite para diminuir e segundo ID do produto. Agora, se nossa página do carrinho não for verdadeira, simplesmente definimos a quantidade como quantidade menos um Agora você entende por que adicionamos essa página do cartão e o ID do produto nesses adereços Agora, basta copiar esse evento onclick e colá-lo no local desse evento onclick E primeiro mudamos esse tipo para aumentar e em L mudamos isso para quantidade mais um. Salve as alterações e dê uma olhada. Na página do cartão, clique no botão mais menos e veja que nossa quantidade está mudando de acordo com isso Além disso, o preço é atualizado. Nossa metade da tarefa está concluída aqui. Agora só precisamos chamar a API para aumentar e diminuir. Onde definimos essas APIs no arquivo de serviços do cartão. Bom. Você está aprendendo muito rápido. Eu adoro isso. Agora, aqui, simplesmente duplicamos essa função removida da API CAT mais duas vezes porque essas três APIs são quase iguais Agora vamos alterar o nome dessa função para aumentar a API do produto e, no endpoint da API no local dessa remoção, temos que adicionar aumento, e isso é tudo que precisamos mudar Agora vamos fazer o mesmo para diminuir a API. Portanto, altere o nome da função para diminuir a API do produto. E no endpoint, mudamos isso para redução da barra do carrinho Salve as alterações e, no componente do aplicativo em nosso blog de tipos aumentados, chamamos de aumentar a API do produto e simplesmente passamos aqui o ID. Agora não precisamos do método então. Nós adicionamos diretamente o método de cache. E dentro desse método de cache, primeiro adicionamos o erro toast dot e passamos aqui, algo deu errado E depois disso, colocamos o carrinho no carrinho anterior. Mas aqui, nesta função, não temos carrinho anterior porque alteramos essa matriz de cartões atualizada. Então, no topo, definimos const old cart igual a array e spread cart array e simplesmente passamos esse carrinho antigo em nossa função de carrinho SAT Agora, no blog do tipo de diminuição, chamamos a API de diminuição do produto e também passamos aqui o ID, e podemos simplesmente copiar esse método de captura e colá-lo aqui. Salve as alterações e dê uma olhada. Altere a quantidade do produto e podemos verificar as alterações na repressão Veja, recebemos quantidade atualizada. Então, aqui concluímos com sucesso nosso recurso at to card, remove do cartão, aumente e diminua. 164. Adicionar ao carrinho no cartão de produtos: Vamos chamar a API Head to Cart para ver o ícone da cesta de cartões de produtos. No componente do cartão do produto, aqui podemos usar a função head to cart a partir do nosso contexto de cartão. Usamos o Context Hook e, dentro dele, passamos o contexto do Card. Agora, isso retornará o objeto, para que possamos desestruturá-lo e chegar aqui para a função de carrinho Agora vá até a parte inferior e, em nosso botão de cabeça para o cartão, adicionamos o evento de clique, função de seta e, aqui simplesmente chamamos nossa função de cabeça para o carrinho. Agora, aqui, temos que passar dois argumentos. O primeiro é o objeto do produto e o segundo é a quantidade. Infelizmente, não temos os dois aqui. Para quantidade, podemos simplesmente passar uma porque aqui não temos entrada de quantidade. Mas, para o objeto do produto, temos que fazer alguma coisa. Na parte superior dos adereços, podemos ver aqui que estamos obtendo todas as variáveis do nosso produto Então, abra o componente da lista de produtos. Aqui, em vez de passar todas essas informações em adereços individuais, podemos passar diretamente o objeto do produto aqui Remova tudo isso e nós apenas passamos aqui o produto para este objeto de produto. Salve esse arquivo e agora volte ao nosso componente de cartão de produto. Em vez de obter tudo isso, obtemos aqui um único objeto de produto. Agora vamos substituir todos esses valores. Então, no local do ID, adicionamos produto, ponto de interrogação, ID de sublinhado de pontos Aqui estamos usando o ponto de interrogação porque, se ID de sublinhado do ponto do produto não estiver disponível, obteremos um erro Agora, no local da imagem, temos o produto, interrogação dotimag, que é a matriz, e aqui temos nossa Depois disso, preço em relação ao produto, ponto de interrogação, preço em pontos, título em produto, interrogação, título em ponto. Classificação por produto, Qimark ponto rotativo por ponto T. Em seguida, classificação conta por produto, Qimark por pontos por avaliação, contagem de pontos e estoque por produto, Qimark dot STAC, agora podemos simplesmente passar esse objeto de produto nesta classificação conta por produto, Qimark por pontos por avaliação, contagem de pontos e estoque por produto, Qimark dot STAC, agora podemos simplesmente passar esse objeto de produto nesta função Adicionar ao carrinho. Salve as alterações e dê uma olhada. Abra a página do produto e clique em Adicionar ao carrinho. Veja se o produto foi adicionado em nosso cartão. Agora, aqui está uma coisa. Como sabemos, nossa API Adicionar ao carrinho é protegida, o que significa que somente usuários logados podem adicionar produtos ao cartão. Então, no topo, chamamos novamente de usar Contatos e passamos aqui os Contatos do usuário. Agora, isso retornará nosso objeto de usuário e, na parte inferior, em nossa condição de botão, adicionaremos outra condição. Se o usuário não for nulo, mostraremos esse botão de ir ao carrinho Salve as alterações e, se sairmos e entrarmos em nossa página de produtos, não obteremos o ícone da cesta. Agora vá para a página única do produto. E aqui também temos o botão de acesso ao carrinho. Agora chamamos use Context Hook e passamos os contatos do usuário aqui Isso retornará o objeto do usuário, então vamos armazená-lo na variável chamada usuário. E na parte inferior, enrolamos a cabeça no carrinho e também essa entrada de quantidade e cabeçalho de quantidade e passamos sua condição. Se o usuário estiver disponível , mostre apenas esses elementos. Agora, isso nos dará um erro de compilação porque estamos retornando mais de um elemento Então, como podemos resolver isso corretamente usando fragmentos de at? Então, embrulhamos isso e vemos que desapareceu. Salve as alterações e dê uma olhada. Aqui, obtemos as informações do nosso produto sem botões. Você pode ver como é fácil usar o Context Sook. 165. Chamando a API para checkout: Agora, antes de fazermos qualquer coisa, vamos entrar novamente porque nos desconectamos na lição anterior Agora vá para a página do carrinho. E aqui, vamos chamar nossa última API, que é a API de checkout Em nosso aplicativo, não estamos adicionando recursos de pagamento porque, ao adicionar qualquer forma de pagamento, front-end desempenha um papel muito pequeno Por exemplo, no stripe payment, que é a biblioteca de gateway de pagamento mais popular para implementar pagamentos, precisamos apenas chamar uma API do front-end A maior parte do código de pagamento vai para o back-end. Portanto, não é muito benéfico adicionar listras neste curso, porque nosso principal objetivo é aprender a reagir, e é isso que estamos fazendo muito bem Porém, se você quiser saber isso, diga-me na seção de perguntas e respostas, atualizarei esta seção com Mas, na minha sugestão, você ainda não precisa disso. Apenas se concentre em criar aplicativos agradáveis e de reação rápida. Para a API de checkout de pedidos na pasta services, criamos um novo arquivo chamado order services dot js Agora, neste arquivo, em primeiro lugar, importamos o cliente API do cliente Utils slash API e aqui criamos uma função chamada checkout API dentro dessa função, simplesmente chamamos aqui api client dot post e nos endpoints Order Agora, não precisamos passar nenhum dado porque ele buscará automaticamente os dados do cartão no back-end Agora, essa expressão nos promete simplesmente retornamos Salvar este arquivo e, no componente de página do cartão na parte inferior do botão de checkout, aqui adicionamos um evento de clique igual a aqui passamos a função Agora vamos definir essa função de checkout. Em segundo lugar, função de erro de checkout. E aqui chamamos de API de checkout dos serviços de pedidos. Agora, após esse checkout, temos que esvaziar nosso cartão Então, aqui adicionamos o método, a função de seta. E nos colchetes de Cali, primeiro adicionamos o Toast do react à Biblioteca S DiPi, e aqui adicionamos sucesso e aqui passamos nossa mensagem, E depois disso, temos que esvaziar o estado do nosso cartão. E para isso, precisamos definir a função do cartão. Então, vamos para o componente do aplicativo e passamos a função set card em nosso contexto de cartão. Salve esse arquivo e volte para a página do cartão. Aqui, neste contexto de uso, obtemos a carta definida e, em nossa função, definimos a carta como carta vazia. Ou podemos mover esse cartão de conjunto antes dessa chamada de API. Agora, e se obtivermos um erro para essa API? Então, adicionamos aqui o método catch e, entre colchetes, tivemos o erro toast dot e, como mensagem, algo E depois disso, vamos colocar o carrinho de volta no estado anterior. Então, no topo, definimos uma nova variável chamada carrinho antigo igual a matriz, e aqui distribuímos a matriz do carrinho Agora, no método de captura, simplesmente passamos o carrinho definido para o carrinho antigo. Use as alterações e dê uma olhada. Clique no botão Checkout e nosso gato estará vazio Agora, vamos verificar isso. Então, em nosso Mongo, nós bússolamos, abrimos nosso banco de dados CAT Wi Aqui temos a coleta de pedidos e, dentro dela, temos nosso pedido confirmado e o status definido como pago. 166. Exercício para obter ordem dos usuários: Agora é hora de mais um pequeno exercício. Aqui em nossa página Meu pedido, precisamos exibir todos os detalhes do pedido sobre o usuário atual, e você obtém as informações do pedido do usuário atual dessa API do GAT Suspenda de dois a 3 minutos neste exercício, e eu sei que você pode concluí-lo 167. Solução para este exercício: Agora, vamos ver a solução do nosso exercício. Observe que esse exercício tem duas soluções. Então, primeiro, criamos outra função no arquivo de serviços de pedidos para My Orders EPI, mas essa é a solução longa Portanto, a solução da Sten Street é que podemos usar nosso gancho personalizado, que podemos usar para buscar qualquer tipo de dado Então, aqui em nosso componente, chamamos use data hook no primeiro parâmetro, passamos nosso endpoint, que é order Agora, isso retornará um objeto com dados, que podemos renomear para pedidos Além disso, aqui podemos obter um erro e sua variável de carregamento. Agora, aqui podemos definir a condição para esse componente da tabela, seja , se a ordem não for nula, somente então exibir esse componente da tabela Agora, precisamos apenas exibir esses pedidos em nossa tabela. No corpo T, na parte superior, tínhamos colchetes, mapa de pontos de pedidos, e aqui obtemos uma ordem única, e também temos aqui o índice Agora, retornaremos simplesmente essa linha da tabela. E passe a chave para pedir o ID de sublinhado do ponto. E dentro dessa linha, adicionamos dados da tabela e, primeiro, mostramos o índice mais um. Depois disso, para o nome do produto, deixamos o mesmo por enquanto. Em seguida, temos o total, então o total do ponto do pedido e, por fim, adicionamos o status do ponto do pedido. Salve as alterações e dê uma olhada. Veja aqui que obtemos os detalhes do nosso pedido. Agora só precisamos mostrar os nomes dos produtos. Então, para isso, criamos uma nova função. Ligue para Obter sequência de caracteres do produto. E como parâmetro, temos aqui, ordem única, função de erro. E, em primeiro lugar, pedimos produtos com pontos, MAP de pontos. Eu nomeio entre colchetes, chamamos isso de função get product string e simplesmente passamos aqui esse Salve as alterações e dê uma olhada. Veja, aqui temos nossa sequência de produtos com a quantidade. Então, está funcionando muito bem. Agora, vamos adicionar aqui o carregador. Antes do nosso componente de tabela, adicione I I se o carregamento for verdadeiro e, em seguida, mostramos o componente carregador E também por erro, aqui passamos novos colchetes de Cully O erro está disponível, então retornamos a tag de ênfase com o nome da classe , erro do formulário e aqui dentro, mostramos o erro. Salve as alterações e dê uma olhada. Veja, está funcionando para nós. Perfeito. 168. Criando rotas protegidas: Agora, em nossa implementação atual, temos um pequeno bug aqui. Então, quando o usuário está logado, só então mostramos os links Moder, logout e cart Agora, se sairmos , não veremos esses links, mas aqui está uma coisa. Se em nossa URL definirmos o caminho para cortar CAT e pressionar Enter, também acessaremos essas rotas protegidas, e não é isso que queremos, certo? Portanto, se o usuário não estiver logado e tentar acessar rotas protegidas, como Moders ou página CAT , nós o redirecionaremos diretamente para a Então, para implementar isso, abriremos nosso componente de roteamento Aqui sabemos que, para definir a rota, usamos o componente de rota e aqui passamos os adereços do caminho e do elemento Então, aqui vamos definir um novo componente de rota. Chamaremos isso de rota protegida. Esse componente será apenas um invólucro desse componente de rota, que simplesmente verifica se o usuário não está disponível e, em seguida, o redirecionará automaticamente para a página de login Caso contrário, ele será redirecionado para essa página protegida. Não se preocupe, veja isso e todas as dúvidas serão esclarecidas. Em nossa pasta de roteamento, criamos um novo componente chamado protected route dot JSX Adicione aqui o código padrão para esse componente. Agora, primeiro de tudo, nesse componente, em troca, chamamos Get user function from user services, que retornará o objeto do usuário ou, se o token não estiver disponível, ele nos dará um valor nulo Portanto, se o usuário estiver disponível, retornaremos o componente Outlet. Caso contrário, redirecionamos para a página de login. Então, aqui usamos o componente Navigate do roteador React Dom e passamos o atributo para o slice login Se você esquecer a tomada, apenas para repressor rápido, no local dessa tomada, nossos componentes de roteamento aninhados aparecerão Não se preocupe, salve esse arquivo e, no componente de roteamento, quais rotas queremos proteger Certo, essas são as últimas três rotas, cart, Moder e Logout Então, na parte superior, adicionamos rota e agrupamos essas três rotas que queremos proteger. Agora, no elemento, passamos nosso componente de rota protegida e pronto. Salve as alterações e dê uma olhada. Aqui não estamos logados e tentamos acessar a página do cartão e, veja, redirecionamos para a página de login Agora vamos fazer login com e-mail e senha e tentar acessar a página do cartão. E agora podemos acessar esta página. Então, está funcionando nos dois sentidos. Agora, deixe-me explicar o que está acontecendo aqui. Aqui estamos usando o roteamento natural. Então, quando nosso aplicativo quiser navegar a partir dessas três rotas, primeiro, esse componente de rota protegida será executado e, dentro desse componente, temos a condição de Outlet e navegamos até a página de login. Portanto, se o usuário estiver logado, esse elemento será exibido no local da tomada, simples assim Então é assim que criamos uma rota protegida para nosso aplicativo. 169. Redirecionar para a página protegida anterior: Agora, na sessão anterior, vimos quando não estamos logados e tentamos acessar rotas protegidas, como a página do carrinho, e depois navegamos até a página de login E se fizermos login com nosso e-mail e senha, redirecionaremos para a página inicial Idealmente, devemos redirecionar novamente para essa rota protegida, que queremos acessar Isso não é um grande problema, mas aumentará um pouco a experiência do usuário. Então, vamos corrigir isso. Então, para isso, nosso componente de rota protegida, temos que passar pela localização anterior com esse componente de navegação. Não se preocupe com isso, veja isso e, no final, você entenderá tudo isso. Então, antes de retornar, chamamos use location hook do roteador Rea doom, vamos armazená-lo na variável, local da chamada Agora, esse local tem todas as informações sobre o local atual da página Então, vamos simplesmente registrar esse local por pontos no console. Observe que somente páginas protegidas acessarão esse componente de rota protegida. E, por enquanto, vamos comentar essa declaração de devolução. Salve as alterações e dê uma olhada. Abro o console e eu simplesmente entro aqui e tento acessar minha página de pedidos. Veja aqui, obtemos nosso objeto de localização e, nesse objeto, temos esse nome de caminho que queremos acessar. De volta ao código do VS, remova esse log de pontos do console e também remova esse comando. Agora, de alguma forma, precisamos passar esse nome de caminho de ponto de localização para nossa página de login. Neste componente de navegação, podemos passar dados adicionais nas props de estado O estado é igual aos colchetes C para adicionar código JavaScript, e aqui adicionamos o objeto com a propriedade de, e simplesmente passamos aqui o nome do caminho do ponto de localização Salve as alterações e, agora, em nossa página de login, só precisamos acessá-las do estado. Em nosso componente de login na parte superior, usamos novamente aqui, usamos o gancho de localização do Rea Router doom e armazenamos isso na variável chamada localização Agora vamos consultar esse registro, localização de login, e passamos aqui localização. Salve as alterações e dê uma olhada. Veja, aqui temos o objeto de localização de login. Abra isso e veja, aqui temos um estado, e nisso temos da propriedade até nosso caminho anterior, que é CAT. Então, aqui, na função onsubmit, antes da localização dos pontos da janela, temos a localização e buscamos propriedade do estado usando a desestruturação do objeto Agora, aqui na localização dos pontos da janela, simplesmente adicionamos a condição. Se o estado for definido, redirecionaremos para stat dot caso contrário, simplesmente redirecionaremos Salve as alterações e dê uma olhada. Faça login neste formulário e veja como redirecionamos para a página do cartão. Então está funcionando. Agora estamos quase terminando aqui. Mas atualmente estamos logados em nosso aplicativo e, se tentarmos acessar a página de login ou a página de inscrição, também obteremos essas páginas também obteremos essas Portanto, devemos redirecionar o usuário para a página inicial se o usuário já estiver logado Esses são cenários muito raros, mas é melhor cuidar deles. Então, vamos corrigir isso. Portanto, em nosso componente de página de login, aqui antes do retorno do JSX, adicionamos condições Aqui, chamamos a função do usuário a partir dos serviços do usuário. E se ele retornar um usuário, retornaremos aqui, navegaremos pelo componente do react Router doom e navegaremos até a página inicial Salve as alterações e dê uma olhada. Agora, se tentarmos acessar a página de login, veja, redirecionamos para a página inicial Vamos fazer o mesmo com a página de inscrição. Copie essa condição I e, em nosso componente de página de inscrição antes de nosso JSX, passe Simplesmente importamos Get user from user services e também importamos o componente de navegação do react Router doom, e terminamos aqui Então é assim que lidamos com APIs protegidas e rotas protegidas em aplicativos de reação Você pode ver que é muito simples e fácil de usar. 170. Seção 15 Corrigindo alguns problemas: Portanto, em nosso aplicativo, temos algumas coisas a fazer. Em primeiro lugar, na página inicial, precisamos buscar produtos em destaque no back-end e exibi-los nesta seção Em seguida, temos links para B agora aqui. Então, neste botão, adicionaremos o link da página de produtos e pronto para a página inicial Agora vamos para a página de produtos. Aqui temos uma opção curta, mas não adicionamos essa funcionalidade. Então, temos que fazer isso. A seguir, temos outro recurso importante que é pesquisar nosso produto. Então, concluiremos o recurso de pesquisa com sugestões automáticas. Você pode fazer uma lista para essa tarefa e, ao concluir cada tarefa, pode verificar se ela foi concluída. Isso lhe dará mais clareza e você poderá concluir uma tarefa por vez. Você pode ver que estas são minhas anotações quando estou concluindo este projeto. Além disso, você pode considerar todas essas tarefas como exercício e tentar resolvê-las antes de observar a solução. Então, em algumas aulas, concluiremos esse projeto. 171. Buscando produtos em destaque: Agora, vamos começar buscando produtos especiais, sabonetes e componentes de produtos especiais E aqui, neste componente, nós o chamamos de gancho de dados usado. Agora, no primeiro parâmetro, passamos nosso endpoint, que é slash products, slash Agora, como sabemos, esses dados usados retornam um objeto, então nós os desestruturamos, e aqui obtemos erros de dados e facilitamos o carregamento de propriedades Agora, vamos simplesmente registrar esses dados com pontos no console. Veja as mudanças e dê uma olhada. Abra o console e veja, aqui temos uma variedade de três produtos. Agora temos que exibi-las aqui. Portanto, abra o componente da lista de produtos e, na lista de produtos, copie esses dados, os produtos e o esqueleto E em nosso componente de produtos de características no lugar do cartão de três produtos, nós o colamos. Agora, primeiro, alteramos esses produtos de pontos de dados para apenas dados, e também aqui o mapa de pontos de dados porque estamos obtendo uma matriz em nossos dados. Depois disso, aqui precisamos importar o componente esqueleto Aqui importamos o esqueleto do cartão do produto. Como precisamos definir a matriz de esqueletos. No topo, esqueletos são iguais a matriz. Agora, quantos esqueletos queremos mostrar? Queremos três esqueletos. Aqui adicionamos um, dois e três. Vamos mostrar nosso erro. Novamente, volte ao componente da lista de produtos e simplesmente copie esse erro. E cole-o em nossa lista de produtos de recursos. Salve as alterações e dê uma olhada. Veja, aqui temos nossos produtos em destaque. Concluímos nossa primeira tarefa. Podemos verificar se a tarefa foi concluída. Agora, vamos corrigir isso agora, link. Em primeiro lugar, em produtos, aqui temos nosso produto iPhone 14, clique com o botão direito do mouse nesta imagem e copie o endereço do link. Agora volte ao código VS e abra o componente da página inicial. E aqui no primeiro link da seção de heróis, colamos o endereço do link. E, no início, removemos nosso URL base. Nós não precisamos disso. Agora, o mesmo que fazemos com a segunda seção de heróis. Então, aqui também temos o MacBook. Eu sei que este não é o produto tt, mas não temos o Mac Studio e é por isso que podemos redirecionar o usuário para o MacBook Então copie esse endereço de link e, em nosso componente, nós o colamos aqui. Além disso, remova o URL base, salve as alterações e dê uma olhada. Clique no botão Comprar agora e redirecionamos para a página do iPhone 14 Mas está atualizando nossa página. Vamos parar com isso. Então, volte ao código VS e abra o componente da seção de heróis. E aqui no lugar da tag Anchor, adicionamos o componente Link do React Router doom e renomeamos esse HF Salve as alterações e dê uma olhada página inicial, clique no botão Bynw e veja, nós redirecionamos Então, aqui também concluímos nossa segunda tarefa. Agora, na próxima lição, trabalharemos em nossa barra de pesquisa. 172. Buscando produtos por consulta de pesquisa: Agora, vamos adicionar a funcionalidade dos produtos de pesquisa. Então, aqui está a demonstração disso. Quando pesquisamos algo em nossa barra de pesquisa e pressionamos Enter ou clicamos na barra de pesquisa, buscamos apenas esses dados da API de nossos produtos E você pode ver quando clicamos em pesquisar que a string de pesquisa está sendo adicionada à string de consulta. Além disso, aqui temos sugestão automática para consulta de pesquisa e também podemos navegar com as teclas de seta É muito simples. Vamos ver isso. Em nossa implementação atual, precisamos definir apenas nossa entrada de pesquisa em nossa string de consulta de URL. E a partir dessa string de consulta, passaremos esse texto de pesquisa em nossa chamada de API. O mesmo que fazemos em nossa categoria. Então, em nosso componente NBR, temos nossa entrada de pesquisa Então, primeiro de tudo, precisamos obter o texto da entrada de pesquisa. Então, no topo, adicionamos aqui o usado e adicionamos trechos e damos um nome a ele, pesquisamos e definimos a pesquisa e passamos uma string vazia como valor padrão Agora, em nossa caixa de entrada de pesquisa, primeiro passamos o valor para a variável de pesquisa e, depois disso, passamos o evento onchange e, dentro dele, obtemos o objeto do evento, função de erro e simplesmente definimos a pesquisa como o valor do ponto de destino Então, aqui obtemos nosso valor no estado de pesquisa. Agora, só precisamos configurá-lo na string de consulta de URL. Então, primeiro de tudo, em nossa tag de formulário, adicionamos o evento de envio e passamos a função ER, tratamos de envio. Agora vamos definir essa função, manipular, enviar. Aqui obtemos o objeto de evento e, primeiro, definimos o padrão de prevenção de pontos E. E o que isso vai pontilhar? Isso evitará um comportamento ou formulário padrão. Agora, depois disso, passamos aqui uma condição se a pesquisa não for igual à string T. Em seguida, definiremos essa string de pesquisa na string de consulta. Então, aqui temos duas maneiras. Podemos usar parâmetros de pesquisa ou usar o gancho Navigate A escolha é sua. Vimos os dois se conectarem ao dom do roteador react. Eu pessoalmente gosto de usar aqui o Navigate porque é mais simples do que usar parâmetros de pesquisa Depois de usar State, chamamos use Navigate hook do react router doom e ele nos dará a variável Navigate Agora vamos adicionar a função Navigate em nosso identificador submit. E aqui passamos nosso URL. Então, em Betts, passamos por slash Products, ponto de interrogação, Sarge é igual a colchetes dólar, Sargento Salve as alterações e dê uma olhada, escreva algo e pressione Enter. Navegue até a página de produtos com a string de consulta de pesquisa. Agora remova esse texto e aperte Enter. Veja, estamos obtendo espaço na string de consulta, e não é isso que queremos. Em nossa função de envio de identificadores, em Navigate, passamos a pesquisa dottRemFunction Isso removerá todos os espaços indesejados. E também aqui, adicionamos creme de pontos de pesquisa. Salve as alterações e dê uma olhada em nossa página inicial. E quando adicionamos espaços e pressionamos enter, isso não redireciona para a página de produtos Então, nossa metade da tarefa está concluída. Agora, só precisamos passar essa consulta de pesquisa em nossa chamada de API. Então, em um componente da lista de produtos, primeiro obtemos nossa string de pesquisa da string de consulta. Então, query, definimos const, consulta de pesquisa é igual ao ponto de pesquisa GT e passamos aqui nome da variável da string de consulta, que Agora, simplesmente passamos essa consulta de pesquisa em nossos parâmetros. Antes de nossa categoria, adicionamos pesquisa à consulta de pesquisa. E à medida que mudamos nossa consulta de pesquisa, devemos chamar isso de PI, então temos que adicionar a consulta de pesquisa nessa matriz de dependências Salve as alterações e dê uma olhada. Pesquise algo aqui e pressione Enter. Veja, temos apenas dois produtos. Portanto, nossa consulta de pesquisa está funcionando. Vamos tentar mais uma vez, escrever algo e pressionar Enter. Veja se está funcionando. Agora deixe-me mostrar um bug. Vá até a página de produtos e vá até a parte inferior. Portanto, nossa página está definida como três. Agora pesquise algo e você verá que não obtemos esses dados. Por que isso acontece? Certo, porque não temos a página três para essa string de consulta. Então, qual é a solução para isso? Certo, nós já vimos isso. Então, temos que definir a página como uma. Então, em nosso efeito de uso, fizemos isso para nossa categoria. Agora, basta adicionar aqui a consulta de pesquisa. As mudanças, e agora nosso bug desapareceu. Você pode ver como é simples adicionar a funcionalidade de pesquisa no react. E aqui, nossa terceira tarefa está concluída. Portanto, em aplicativos de comércio eletrônico ou sites como o YouTube, essa funcionalidade de pesquisa é um recurso muito útil e importante Portanto, lembre-se sempre da lógica da barra de pesquisa. Primeiro, você precisa definir a string de consulta na URL e depois passar essa string de consulta na API, simples assim. 173. Sugestão automática na barra de pesquisa: Agora, atualmente, se escrevermos algo na barra de pesquisa, não receberemos nenhuma sugestão para o nome do produto. Portanto, nesta lição, mostraremos automação da nossa barra de pesquisa Portanto, em nosso componente N Bar, após nossa função de envio de handle, adicionamos use effect hook e, dentro dele, adicionamos a função de retorno de chamada e a matriz de dependência com o estado de pesquisa Então, quando nossa pesquisa mudar, essa função de retorno de chamada e dentro dessa função de retorno de chamada, chamaremos nossa API de sugestão Então, para a API, em nossa pasta de serviços, criamos um novo arquivo chamado product services dot js. Agora, dentro desse arquivo, em primeiro lugar, inserimos o cliente da API do módulo cliente da API Utils Depois disso, criamos uma nova função chamada API Get suggestions. E aqui temos a pesquisa como parâmetro e, dentro dessa função, e, dentro dessa função, simplesmente retornamos o api client dot GT agora para o endpoint, adicionamos acentos cravos, barras de produtos, sugestões de barra, ponto de interrogação, pesquisa igual a colchetes , pesquisa igual a colchetes , pesquisa simplesmente retornamos o api client dot GT agora para o endpoint, adicionamos acentos cravos, barras de produtos, sugestões de barra, ponto de interrogação, pesquisa igual a colchetes, pesquisa igual a colchetes , pesquisa. Já fizemos isso tantas vezes. Agora vamos simplesmente exportar essa função. Salve as alterações e volte ao nosso componente Navbar. Aqui, primeiro adicionamos a condição se search dot trim não for igual a uma string vazia e, em seguida, somente chamaremos nossa API Aqui ligamos para obter sugestões, função de API e passamos aqui nossa pesquisa. Agora, essa função retornará uma promessa. Então, aqui usamos o método then e, dentro dele, obtemos a resposta. E para armazenar sugestões, precisamos criar uma nova variável de estado. Então, após nosso estado de pesquisa, adicionamos mais um gancho de estado de uso chamado sugestões e definimos sugestões. E como valor padrão, passamos uma matriz vazia. Agora, em nosso método then, simplesmente definimos sugestões para responder aos dados de pontos. Depois disso, adicionamos o método catch, e aqui obtemos o objeto de erro e simplesmente registramos esse erro no console. Então, aqui adicionamos nossa condição de que a pesquisa não esteja vazia e, caso contrário, se a pesquisa estiver vazia, simplesmente definimos as sugestões para uma matriz vazia. Agora vamos registrar a matriz de sugestões no console , salvar as alterações, dar uma olhada, escrever algo na barra de pesquisa e, no console, aqui podemos ver que recebemos essas sugestões. Essas sugestões são uma matriz de objetos, e cada objeto tem apenas duas propriedades, ID de sublinhado e título Então, aqui temos nossas sugestões. Agora só precisamos exibi-los abaixo da nossa barra de pesquisa. Então, primeiro, temos que adicionar nossos elementos e, em seguida, adicionaremos estilo para a lista de sugestões. Após nosso botão de pesquisa na tag do formulário, adicionamos uma nova sublista com o nome da classe, resultado do sublinhado da pesquisa e, dentro dela, adicionamos a tag do item da lista com o nome da classe, sugestão de sublinhado de pesquisa, link de sublinhado Agora, dentro disso, simplesmente adicionamos componente de link do roteador Rea doom Passe para o suporte para fatiar os produtos por enquanto. Dentro disso, escrevemos o iPhone 14 Pro. Agora, o motivo pelo qual adicionamos aqui o componente Link, então, quando clicarmos nessa linha de sugestão, redirecionaremos o usuário para a página do produto Salve as alterações e dê uma olhada. Veja, aqui temos nosso link de sugestão. Agora vamos adicionar estilo para isso. Pare o arquivo css de pontos Nabar. Após nosso botão de pesquisa, adicionamos o resultado do sublinhado da pesquisa por pontos, colchetes e, dentro disso, primeiro, definimos a posição como topo absoluto em 100% e esquerda Agora, para usar a posição absoluta, temos que transformar a posição do nosso formulário em relativa, rolar para cima e, no formulário Navbar, adicionar a posição à relativa Agora, de volta ao nosso resultado de pesquisa. E aqui adicionamos com margem de 200% superior a dez pixels, água a um pixel, sólido tem CD CD CD, raio da borda a cinco pixels, cor de fundo a branco e, no final, índice Z a índice Z Agora, depois disso, adicionamos estilo ao link de sugestão de pesquisa, então pesquisa por pontos, sugestão, link e, dentro dos colchetes, configuramos a exibição como flexível Agora, depois disso, adicionamos estilo para a tag âncora, que está disponível no componente link Dart surge, sugestão, link, e aqui temos como alvo a etiqueta âncora, colchetes curvos, e aqui simplesmente adicionamos largura a 100%, adicionando dez pixels e 20 pixels, um tamanho a 18 pixels e cursor ao ponteiro E, no final, adicionamos o efeito de RH ao nosso link. Dart Surge, sugestão, link, passe o mouse sobre Callan. E nos colchetes, definimos a cor de fundo para E três, E três, E três. Salve as alterações e dê uma olhada. Veja, nosso link parece bom. Agora, vamos simplesmente mostrar nossa matriz de sugestões. De volta ao nosso componente Neva, e em nossa lista não ordenada, adicionamos colchetes CL, sugestões Aqui obtemos uma única sugestão, função de seta e simplesmente retornamos esse item da lista. Agora, em primeiro lugar, adicionamos o atributo-chave ao ID de sublinhado do ponto da sugestão E no componente de link, adicionamos colchetes Ci, contrastes e, dentro deles, adicionamos produtos de barra, ponto de interrogação, pesquisa igual a colchetes Ci em dólares, título adicionamos colchetes Ci, contrastes e, dentro deles, adicionamos produtos de barra, ponto de interrogação, pesquisa igual a colchetes Ci em dólares, título do ponto de sugestão. E no lugar desse título codificado, também adicionamos o título do ponto de sugestão Salve as alterações e dê uma olhada, digite algo na barra de pesquisa e veja se recebemos sugestões. Agora, se você clicar em alguma sugestão, redirecionamos para a página de produtos, e nossos produtos serão exibidos de acordo com a data Mas a lista de sugestões permanecerá a mesma aberta. Temos que fechá-lo. Então, aqui em nosso componente de link, adicionamos um evento de clique e uma função de erro interna. E entre colchetes Cul, primeiro, definimos E defina sugestões para uma matriz vazia. Salve as alterações e dê uma olhada, escreva algo e clique na sugestão. Veja, nossa sugestão desapareceu. Agora, também precisamos fazer o mesmo em nossa função de envio de identificadores. Então, após esse método de navegação, simplesmente adicionamos sugestões de conjunto à matriz vazia. Salve as alterações e dê uma olhada. Veja, agora está funcionando muito bem, mas aqui está uma coisa. Mesmo que não tenhamos nenhuma sugestão, ainda recebemos essas linhas. Então, clique com o botão direito nele e vá inspecionar. Aqui podemos ver que é nossa borda de lista não ordenada. Vamos consertar isso. Então, de volta ao código VS, envolvemos nossa lista não ordenada com colchetes e simplesmente passamos aqui a condição se o comprimento do ponto sugerido for maior que zero, só então mostramos Salve as alterações e dê uma olhada. Veja agora nossa barra de pesquisa está funcionando bem. Agora, aqui você pode pensar qual é a vantagem de clicarmos na sugestão e redirecionarmos para a página que tem apenas um item Portanto, em nosso banco de dados, atualmente temos apenas um único item para cada produto. Mas quando nosso banco de dados crescer, talvez tenhamos o iPhone 14 com várias cores e, nesse momento, essa página exibirá vários produtos. 174. Navegação para sugestão automática: Agora, em nossa barra de pesquisa, quando recebemos sugestões automáticas, precisamos clicar nessa sugestão para pesquisar. Mas no mundo real, 99% dos usuários não clicam no link de sugestão. Eles gostam de usar chaves ARO, e essa é a boa experiência do usuário. Portanto, nesta lição, veremos como adicionar a navegação por teclas Ero à nossa lista de sugestões. Então, primeiro, criamos uma nova variável de estado, chamamos o item selecionado, definimos o item selecionado e, como valor padrão, passamos aqui menos um Basta lembrar a lógica e todas as suas dúvidas serão esclarecidas. Então, quando pressionamos a tecla, valor do item selecionado aumentará em um, que é zero. E colocamos a condição se o item selecionado for igual ao índice da nossa linha de sugestões, então destacaremos essa linha, simples assim. Então, primeiro de tudo, em nossa entrada de pesquisa, temos que passar um evento chamado de key down, que será executado toda vez pressionarmos qualquer tecla nessa entrada. Aqui, passamos a função chamada chave de alça para baixo. Vamos primeiro definir essa função. Escreva const, segure a tecla. Obtemos aqui o objeto de evento e, dentro dele, simplesmente adicionamos dot log e dot kee do console. Ao usar essa tecla de ponto e, pressionamos o nome da tecla. Diga as alterações e dê uma olhada, selecione a caixa de entrada e pressione a seta para cima e veja aqui a seta para cima. Eu pressiono a seta para baixo e também Enter. Veja, aqui temos nossos principais nomes. Agora podemos adicionar nossas condições de acordo com isso. Então, nesta função, adicionamos nossa primeira condição I K igual à seta para baixo Certifique-se de escrever a mesma string, caso contrário, ela não funcionará. Agora, dentro disso, escrevemos o item selecionado do conjunto. Aqui obtemos nossa função de seta de valor atual e retornamos atual mais um. Depois disso, adicionamos outra condição, se K for igual à seta para cima E dentro disso, simplesmente copiamos essa expressão e a colamos aqui. Mas nós apenas substituímos isso pelo atual menos um. Agora, finalmente, adicionamos mais uma condição se e ponto K for igual a Enter e também o item selecionado deve ser maior que menos um, porque se o item selecionado for menos um e pressionarmos Enter, isso nos dará Se o item selecionado for maior ou igual a zero, navegaremos até esse link Então, primeiro, aqui definimos sugestão igual a sugestões e, em pacote quadrado, passamos o item passamos E depois disso, simplesmente navegamos com essa pesquisa. Então, como podemos simplificar isso usando o método de navegação? Então, aqui, copiamos esse link do componente de link e o colamos neste método de navegação. Depois disso, definimos a pesquisa para uma string vazia e também definimos sugestões para uma matriz vazia. Agora, última etapa, temos que destacar o índice ativo atual. Então, para isso, em nossa tag de item da lista, recortamos o nome dessa classe e addHeklBackets, Selecionei o item igual ao índice dessa sugestão, depois adicionamos o link da sugestão de pesquisa e a classe ativa Como acabamos de adicionar um link de sugestão de pesquisa. E também temos que obter o índice desse método de mapa. Salve esse arquivo e vamos definir CSS para essa classe ativa. Então, abra o arquivo CSS Navar dot, e aqui em nosso estilo ***, adicionamos outra classe chamada link de sugestão de pesquisa dot acTV, salve as alterações e dê uma olhada, escreva algo e pressione as teclas para baixo e para cima e veja se está funcionando Agora pressionamos Enter e C, o link será aberto. Mas aqui, quando chegamos ao fundo e pressionamos novamente a seta para baixo , nosso item selecionado não é destacado, o mesmo acontece com a seta para cima. Então, quando estamos no topo da nossa lista e pressionamos novamente a seta para cima , temos que definir o valor do item selecionado para o último item. Volte para o componente Naver aqui em nossa função de tecla de controle para seta para baixo, passamos aqui a condição se a corrente for igual às sugestões de comprimento do ponto menos um, que é o último item, então retornamos a zero, que é nosso primeiro item, caso contrário, retornaremos a corrente mais Agora, para flecha para cima, passamos a condição dela. Se a corrente for igual a zero, retornaremos sugestões de comprimento do ponto menos um, que é nosso último item, caso contrário, retornamos a corrente Salve as alterações e dê uma olhada. Veja, podemos ir de cima para baixo em nossa lista de sugestões, mas aqui está um bug. Se selecionarmos o último item e continuarmos escrevendo, teremos que pressionar a tecla upkey várias vezes, e essa é a má experiência do usuário Para resolver isso aqui em nossa função de tecla de controle. Adicionar uma condição Se eu selecionei item tem menos do que o tamanho do ponto sugerido. Só então executamos essa lógica. Portanto, mova esse código na condição I e, caso contrário, definiremos item selecionado para o valor padrão, que é menos um Salve as alterações e dê uma olhada. Veja agora que está funcionando corretamente. Você pode ver como é simples adicionar a navegação por erro à nossa lista de sugestões. 175. Método de desmascaramento para obter sugestões: Agora, atualmente, em nossa implementação, fizemos algo muito errado. Deixe-me te mostrar. Então, em nossas ferramentas para desenvolvedores, abra a guia Rede e digite aqui algo nesta barra de pesquisa. Aqui podemos ver que estamos fazendo uma chamada de API para o back-end toda vez que um usuário digita um caractere na barra de pesquisa. Por exemplo, aqui estamos enviando seis solicitações e realmente não precisamos das cinco primeiras respostas. Então, quando estamos enviando tantas solicitações, nosso aplicativo fica mais lento e a carga no servidor também aumenta Então, para reduzir o número de chamadas de API aqui, podemos usar uma técnica chamada debouncing depuração é um método para atrasar a execução de uma função até que um determinado período de tempo tenha passado Por exemplo, quando o usuário digita algo na barra de pesquisa, depois de algum tempo, chamaremos nossa API. Deixe-me mostrar como podemos fazer isso. É muito simples. Então, em nosso efeito de uso, aqui adicionamos a função de tempo limite definido Como sabemos disso, exceto função de retorno de chamada e um segundo parâmetro, temos que passar o tempo em milissegundos Aqui passamos 300 milissegundos. O que quer que adicionemos nessa função de retorno de chamada, ela será executada após 300 milissegundos Vamos mover essa lógica em nossa função de retorno de chamada. Bom. Agora temos que adicionar uma função de limpeza para esse tempo limite. Armazenamos esse tempo limite em uma variável chamada sugestões de atraso Na parte inferior, para limpeza, retornamos a função de retorno de chamada e, aqui, simplesmente limpamos o tempo limite e passamos sugestões de atraso Salve as alterações e dê uma olhada, atualize a página, forneça algo aqui, e podemos ver aqui que estamos enviando apenas uma solicitação, então está funcionando Agora, deixe-me explicar para você o que está acontecendo aqui. Quando nosso estado de pesquisa está mudando, a função de tempo limite definida executada e, após 300 milissegundos, chamamos nossa API de sugestões Agora, se o usuário digitar outro caractere em 300 milissegundos, o tempo limite será redefinido e a chamada da API será adiada Se o usuário não escrever nenhum caractere em 300 milissegundos, só então essa API será chamada Pode alterar esses milissegundos de acordo com nossas necessidades, mas 300 milissegundos é o tempo médio, nem muito lento nem muito rápido. Portanto, o método de depuração é muito útil se você quiser limitar o número de solicitações de API Então, nossa mais uma tarefa está concluída aqui. 176. Classificação de lista de produtos: Agora vamos concluir nossa última tarefa, que é encurtar nossa lista de produtos Então, quando um componente da lista de produtos, primeiro definimos uma variável de estado para armazenar o valor de classificação, e a chamamos de B curta e a definimos como curta B. E, como valor padrão, passamos uma string vazia Depois disso, criaremos outro estado de uso para armazenar os produtos classificados E como valor padrão, passamos uma matriz vazia. Agora, em nossa tag de seleção, primeiro, obtemos nosso valor de tiro atual. Então, aderimos ao evento alterado e, dentro dele, obtemos a função de seta do evento e simplesmente definimos a classificação B como valor do ponto alvo do ponto E. Agora vamos definir a funcionalidade de encurtamento. Então, em nosso projeto anterior, filmamos nossa matriz de filmes usando uma biblioteca de mesa baixa. Agora, deixe-me mostrar outra maneira de adicionar atalhos sem usar nenhuma biblioteca Então, primeiro de tudo, aqui adicionamos use Effect hook e pass callback function Na matriz de dependências, qual variável adicionamos Quando nossa diferença de valor muda, queremos vender nossos produtos e, quando nossos dados mudam , também queremos vender produtos. Agora vamos escrever a lógica para encurtar. Em primeiro lugar, adicionaremos uma condição: se os dados estiverem disponíveis e os produtos de pontos de dados estiverem disponíveis, somente então nosso encurtamento será executado Então, dentro dessa condição, primeiro criamos a cópia da nossa matriz de produtos. Portanto, os produtos Cons são iguais a produtos de matriz e distribuição de dados do operador Agora, vamos na condição I, encurtar B é igual ao preço decrescente e, dentro dela, usaremos o método Então, escrevemos produtos dot SHOT. Agora, deixe-me explicar seu método curto rapidamente. Então, dentro desse método de classificação, obtemos dois parâmetros A e B. A é o valor do primeiro item e B é o valor do segundo item. Não se preocupe com isso, veja isso. Para descer, temos que passar aqui, B menos um, e para subir, temos que passar A menos B, Agora, no nosso caso, temos uma matriz de objetos. Aqui, retornamos B, que é o preço do segundo item, menos A, que é o preço do primeiro item em pontos Agora, isso retornará uma matriz classificada, simplesmente a envolvemos com produtos classificados definidos e pronto Agora vamos adicionar outra condição. Então C classifica por igual ao preço ascendente. E dentro disso, copiaremos essa expressão e a colaremos aqui e alteraremos essa condição para ao preço menos o preço de B dot Agora vamos duplicar essas duas condições, e aqui mudamos I para sf Agora, no local da queda do preço, passamos a taxa decrescente E em nosso método de classificação, definimos a condição como B pontos de avaliações, taxa de pontos, menos A ponto de avaliações de pontos Agora, temos taxa ascendente e alteramos a função de comparação para ponto de avaliações de pontos menos B a taxa de pontos de avaliação de pontos Agora, se não tivermos esse valor de classificação para isso, adicionamos e simplesmente definimos produtos classificados como produtos Agora, em nosso JSX, no lugar dos produtos de pontos de dados, nós, em produtos classificados Salve as alterações e dê uma olhada. Altere a foto para preço alto para baixo e veja nossos produtos classificados por preço em ordem decrescente Lembre-se sempre de que, para ordem crescente, temos que passar a função comparada para A menos B e, para decrescente, usamos B menos um, e pronto É assim que implementamos o curto-circuito sem nenhuma biblioteca. Mas esse método de classificação só funcionará para números. Em nosso projeto anterior, temos que curtar filmes por data, e é por isso que usamos a biblioteca Low desk. 177. Seção 16 Ganchos de gerenciamento de código e desempenho: Bem-vindo à 16ª seção atualizada dos melhores reatores Alguns alunos estão me dizendo para explicar mais alguns ganchos de reação Portanto, nesta seção, veremos alguns truques de reação pelos quais você pode melhorar o desempenho do seu aplicativo como usar memo e usar Também veremos quando podemos usar esses ganchos e quando não podemos usá-los E depois desses dois ganchos, veremos outro gancho para gerenciamento de código, que é o gancho redutor de uso Esta é a minisseção, então vamos começar isso rapidamente. 178. Entendendo o gancho do useMemo: Agora vamos entender o que é usar o memorando e quando precisamos dele Use memo é um aro usado para melhorar o desempenho se tivermos cálculos caros em nosso aplicativo de reação Agora você pode perguntar o que são cálculos caros? Às vezes, em nosso aplicativo, temos cálculos complexos, como encontrar a soma de 1 milhão de produtos ou encontrar o fatorial ou encontrar a série Fibonaki, que são cálculos muito grandes e podem levar Nessa situação, podemos usar o memo hook para reduzir o tempo de cálculos indesejados e também podemos evitar renderizações desnecessárias E por causa disso, podemos melhorar o desempenho do nosso aplicativo. Deixe-me te mostrar isso na prática. Então, para demonstrar esses ganchos, estou usando um novo projeto porque não queremos massificar nosso aplicativo de comércio eletrônico E depois de aprender isso, implementaremos esses ganchos em nosso projeto Então, você pode apenas vê-los e depois implementar. Então, aqui, eu criei uma variável de estado chamada count. E no JSX, criei dois botões, menos e mais, e no centro, exibimos a Agora, vamos supor que temos que encontrar a soma total de 1 milhão de produtos. Isso é só um exemplo. Não se preocupe com isso. Então, para demonstrar isso, criei essa função de cálculo cara, que basicamente executa esse longo loop e retorna a soma do número da contagem. E em nosso JSX, estamos simplesmente exibindo esse total. Deixe-me mostrar como fica no navegador. Veja, obtemos aqui o total padrão. Agora deixe-me clicar nesse botão de adição. Veja, está levando de dois a 3 segundos por cálculo. Agora, está tudo bem porque precisamos calcular alguns, mas aqui está uma coisa. Mesmo se fizermos algo nesse componente, esse resultado será calculado novamente. Deixe-me mostrar o que quero dizer. Então, aqui em nosso componente, eu crio uma nova variável de estado chamada tema escuro e defino o tema escuro. Como valor padrão, eu passo false. Não se preocupe, isso é apenas uma demonstração. Eu não vou implementar o tema escuro e claro aqui. Agora, após nosso total, eu adiciono um du e dentro desse du eu adiciono tag e exibo aqui o tema. Se o tema escuro for verdadeiro, exibiremos o modo escuro L Modo claro. E depois disso, eu adiciono um botão chamado tema total. E para este botão, adiciono ao clicar no evento simple set tag theme ao false dag theme Agora vamos ver como nosso aplicativo funciona. Então, aqui, se aumentarmos ou diminuirmos a contagem, levará de dois a 3 segundos, o que é bom. Agora, deixe-me tentar resumir o tema. Você pode ver que novamente está demorando dois a 3 segundos para mudar o tema? Porque essa função cara está ligando novamente. Podemos ver isso usando essa linha de console. Então, por que está recalculando esse total? Certo, porque mudamos o estado do tema. E sabemos que quando mudamos o estado do tema, todo esse componente é renderizado novamente, e é por isso que esse total conta novamente. Então, a maneira ideal é quando mudamos essa variável de contagem, só então nossa cara função de cálculo deve ser executada. Caso contrário, nosso aplicativo ficará mais lento. Temos o problema que é uma renderização indesejada para cálculo e agora podemos resolver Aqui, podemos usar o gancho de memorando para interromper os cálculos indesejados Basta ver isso e todas as dúvidas serão esclarecidas. No lugar dessa função de cálculo cara, chamamos use memo hook e, da mesma forma que use effect hook for use memo, também precisamos passar para argumentos na função de retorno de chamada do primeiro parâmetro, que queremos executar dentro dela, queremos chamar a função de cálculo cara Passe nossa contagem como argumento. No segundo parâmetro, temos que passar uma matriz de dependência na qual temos que passar variáveis Sempre que essas variáveis se modificarem, somente essa função será chamada e é por isso que passo aqui a contagem. Sempre que essa variável de contagem é modificada, essa função de cálculo cara é executada e tudo o que retornarmos dessa função, ela adicionará nossa variável total. Vamos verificar se está funcionando ou não. LconPlus S, está levando de dois a 3 segundos. Mas agora, se clicarmos no tema total, isso mudará imediatamente Então é assim que o uso do Memo hook pode melhorar desempenho do nosso aplicativo interrompendo cálculos indesejados Agora, deixe-me te fazer uma pergunta. Como podemos obter o mesmo resultado sem usar o gancho Memo O que quero dizer é que se nossa variável de contagem for modificada, somente então essa função de cálculo cara deverá ser executada. Ou seja, temos outro método, pense nisso. Certo. Podemos obter o mesmo resultado com o uso do gancho de efeito. Aqui está a solução com o uso do gancho de efeito. Mas nessa implementação, temos que criar mais uma variável de estado chamada total e definir o total. Mas no memorando de uso, não precisamos criar uma variável de estado separada Esse total funciona como variável de estado total. Então, essa é uma etapa extra para a implementação desse efeito de uso. Caso contrário, os dois funcionam quase da mesma forma. Portanto, é melhor usar o gancho de notas para lidar com cálculos complexos 179. Exercício para SubTotal: Agora é hora de fazer um pouco de exercício. Então, em nosso projeto Cart wis, vamos modificar nossa lógica subtotal e usar o Memo Hook para Eu sei que você pode fazer isso com muita facilidade. Então experimente e então foi a solução. Agora vamos ver a solução. Abra o componente da página do carrinho, em primeiro lugar, deixe-me remover essa variável de estado subtotal Simplesmente no local desse gancho de efeito de uso, adicionaremos o gancho de memorando de uso Uma boa entrada automática funciona. Agora, no lugar de definir esse total como subtotal, simplesmente retornamos esse total porque use memo sempre retorna valor. Você se lembra? E, finalmente, vamos armazenar esse total na variável const subtotal Agora vamos remover o efeito de uso e usar a entrada do topo. Nós não precisamos disso. Salve as alterações e dê uma olhada. Veja, funciona da mesma forma que antes. Você pode ver como é simples usar o gancho Mamo. Como efeito de uso, use memo requer dois argumentos. Primeiro, função de retorno de chamada, que sempre retorna valor E se não quisermos retornar nenhum valor dessa função de retorno de chamada, por que usamos use memo hook, E o segundo argumento é a matriz de dependências. Portanto, use o gancho de notas quando precisar lidar com cálculos complexos Agora, na próxima lição, mostrarei um gancho muito semelhante, que é use o gancho de retorno de chamada, até a próxima lição 180. Entendendo o uso do gancho de retorno: Agora, vamos aprender como usar o gancho de retorno de chamada. Esse gancho é muito semelhante ao uso do memo hook, que significa que é usado para melhorar o desempenho de nosso aplicativo de reação e evitar renderizações indesejadas A única diferença entre usar memo e usar callback é use memo retorna um valor e use callback retorna uma função. É isso mesmo. Eu sei que isso é um pouco confuso. Deixe-me te mostrar de forma prática. Então, aqui, eu removo nosso código use mammo anterior e, primeiro de tudo, crio uma variável de estado usando o estado de uso chamado counter e set counter, e o valor padrão como um Criamos outra variável de estado chamada set theme e como valor padrão para light. Agora, em nosso JSX, eu crio aqui como tag e simplesmente exibo aqui o tema e no tema Gully Basta ver isso e você entenderá o uso do callback Hook. Agora, para alternar o valor do tema, criamos um botão e passamos aqui para o tema ogle Para o evento onclick, adiciono aqui uma referência de função ao tema GL. Agora vamos definir essa função na parte superior. Portanto, o tema total de Cons é igual à função de seta e simplesmente chamamos função set theme e obtemos aqui o valor anterior, função de seta e passamos Se o tema for igual à luz, então mudamos para escuro, senão mudamos para claro Agora você pode pensar: por que não estou exibindo o contador. Portanto, para exibir o contador, criamos um novo componente em nossa pasta de origem chamado counter dot JSX Eu sei que você tem muitas perguntas, mas depois dos resultados, você entenderá o que eu quero lhe mostrar. Vamos adicionar código padronizado usando RAFC e aqui simplesmente retornamos a tag e exibimos aqui retornamos a tag e exibimos contador. Para alterar esse contador, criaremos um botão chamado aumentar. Para aumentar o contador, passamos o evento de clique e simplesmente passamos aqui, aumentamos a função de contador. Agora, como podemos obter o contador e aumentar a função do contador? Certo, usando adereços. Nós desestruturamos aqui, contrariamos e aumentamos a função de contador Salve as alterações e no componente a, antes que ele tenha duas tags, basta adicionar o componente contador. Agora temos que passar dois adereços contador para contador e aumentar o contador para aumentar o contador E, finalmente, temos que definir essa função de contador de aumento. Portanto, const increase counter é igual a set counter. Aqui obtemos o valor anterior, função de erro e simplesmente o anterior mais um. Salve as alterações e dê uma olhada. Veja, quando clicamos no botão Aumentar, contador está aumentando em um, e quando clicamos no tema Togal, o tema está mudando Perfeito. Agora, aqui está uma coisa. Neste componente do contador, suponha que estejamos executando alguma tarefa, que leva 500 milissegundos, o que é meio segundo Então, para demonstrar isso, adicionamos aqui primeiro o log de pontos do console, o componente contador e a renderização. E depois disso, deixe a hora de início ser igual ao ponto de desempenho agora Essa função de ponto de desempenho agora retornará o intervalo de tempo de alta resolução. Por enquanto, não se preocupe com isso. E eu simplesmente adiro o loop Y e atribuo a condição de que o ponto de desempenho agora menos a hora de início seja menor que 500 e, em seguida, executo esse loop Isso simplesmente adicionará um atraso de 500 milissegundos. Salve as alterações e dê uma olhada. Abra o console e atualize a página. Agora clique no botão Aumentar e veja aqui que recebemos mensagem de rerenderização do componente contador e também temos um segundo atraso no aumento do valor do contador, o que queremos Perfeito. Mas aqui está o único problema. Mesmo se clicarmos no tema do Toogle, ele também será renderizado como componente contador Após 500 milissegundos de atraso, nosso tema está mudando Mas mudar o tema não deve renderizar novamente o componente do contador porque eles são dois estados diferentes. Então, aqui, nosso componente de contador é renderizado novamente indesejadamente e, por causa disso, nosso aplicativo fica mais lento Você pode ver o problema de demonstrar com mais clareza aqui no componente do aplicativo que aderimos o nome da classe ao tema E na parte superior, importei o arquivo CSS do app dot. Salve isso e, no arquivo CSS de pontos do aplicativo, primeiro adiciono DU e, no colchete C, preenchendo até 20 Depois disso, adicionamos estilo para a classe escura. E dentro disso, adicionamos a cor de fundo dois tem 101010 e a cor dois tem FFE Salve as alterações e dê uma olhada. Clique no tema Gal. Veja, podemos ver claramente o atraso. Portanto, precisamos resolver esse problema de renderizações indesejadas, e isso podemos fazer com o Us callback 181. Como usar o gancho de retorno de chamada no React: Agora, deixe-me mostrar como podemos usar o Calbeck Hook para evitar renderizações indesejadas Então, como você deve saber, usar callback sempre retorna uma função Então, primeiro, precisamos identificar qual função está causando renderizações indesejadas Você consegue se identificar corretamente. É uma função de contador aumentada porque, quando clicamos em um tema ontogal, nosso componente de aplicativo é renderizado novamente e por causa desse aumento, a contraffunção é criada É por isso que nosso contador também é renderizado novamente. Mas o estado do nosso tema não está relacionado ao componente do contador, então por que precisamos renderizar o componente do contador. Em palavras simples, o componente do contador deve ser renderizado novamente somente quando alteramos o estado do contador. Deixe-me duplicar essa contra-função aumentada. Comente este. Você pode ver claramente as mudanças. Agora, usar a sintaxe do gancho de retorno de chamada é o mesmo que usar a sintaxe do memo. Podemos envolver essa função de seta com parênteses e adicionar aqui simplesmente usar o callback Hook Agora, no segundo parâmetro, precisamos passar a matriz de dependências Nessa matriz de dependência, qual variável adicionaremos , contaremos a variável São muito inteligentes, bons. Portanto, quando a variável do contador muda, somente então essa função de contador aumentada a recriará Veja as mudanças e dê uma olhada. Clique no tema Togal e ainda haverá atraso Então, para completar essa lógica, temos que fazer uma pequena coisa. Então, em qual componente queremos impedir a renderização indesejada, temos que envolver esse componente com a função mammo Então, aqui no topo, podemos importar mammo da biblioteca react E quando exportamos esse componente na parte inferior, simplesmente o envolvemos com a função mammo Veja as mudanças e dê uma olhada. Clique no tema Togal e veja se ele está funcionando perfeitamente sem recebamos uma mensagem de rerenderização Se mudarmos nosso contador, somente então nosso componente do contador será renderizado É assim que evitaremos renderizações indesejadas. Agora vamos recapitular o uso do Callback Hook. Use o gancho Callback para evitar renderizações indesejadas e nos ajudar a melhorar o desempenho do nosso aplicativo Você pode perguntar: devemos agrupar todas as funções em nosso aplicativo usando o gancho de retorno A resposta é não. Devemos agrupar apenas as funções que estão causando retenções e atrasos indesejados Existe algum truque de atalho para encontrar esse tipo de função A resposta é sim. Há um truque que eu uso quando comecei a aprender a usar o gancho de retorno Sempre que você passa uma função como adereços e há outro estado nesse componente, só então você precisa usar o callback Vamos verificar se esse truque funciona ou não para o componente do nosso aplicativo. Então, primeiro ponto, a função passa pelos adereços. Em nosso componente de aplicativo, estamos passando a função de contador de aumento como adereços para o componente de contador E segundo ponto, deve haver outro estado nesse componente. Então, aqui temos o estado do tema diferente do contra-estado. Então esse truque está funcionando. Espero que você entenda que usar callback hook use Mamo e use callback é usado para melhorar Quando seu aplicativo de reação começar a ficar mais lento, você pode dar uma olhada em seu código e ver se pode usar use memo e usar callback Não é obrigatório, mas você pode usá-los quando precisar 182. Exercício para uso Agulha de retorno: Agora é hora de praticar o uso do gancho Calbeck. Portanto, em nosso projeto Cows, você precisa descobrir se há algum componente no qual o retorno de chamada de uso seja Se você encontrar algum, precisará usar o gancho Calbeck nesse componente Portanto, dedique algum tempo este exercício e lembre-se desses dois pontos a serem identificados. A função passa pelas sondas para o componente filho e deve haver uma variável de estado Então experimente e, depois disso, veja a solução. Portanto, em nosso aplicativo Carwis, primeiro verificamos nosso componente raiz, que é o componente do aplicativo Então, aqui temos variáveis de estado, usuário e CAT e também estamos passando a função do componente pai para o componente filho. Então, podemos implementar aqui, usar o gancho de retorno de chamada. Aqui na função At to cart, simplesmente envolvemos essa função de retorno de chamada com parênteses e simplesmente adicionamos aqui, usamos callback e, para o segundo parâmetro, adicionamos a matriz de dependência e dentro dela o que adicionamos, certo, adicionamos o certo, Agora, para remover da função de cartão, envolvemos sua função de retorno de chamada com parênteses e também na parte superior, adicionamos use o gancho de retorno de chamada e, como segundo parâmetro, adicionamos a matriz de independência do estado do cartão mesmo que fazemos com essa função de cartão de atualização, envolva-a com parênteses e adicione aqui use callback e matriz de dependência Agora, para a função Get card, envolvemos sua função de retorno de chamada com parênteses e adicionamos use Agora, o que adicionamos nessa matriz de dependências, devemos adicionar o estado do cartão Não, não precisamos do estado do cartão aqui porque se adicionarmos a matriz de independência do estado do cartão, quando o estado do cartão mudar, somente então essa função Obter cartão será executada, e não queremos isso Queremos que, quando o estado do usuário seja alterado , recebamos os detalhes do cartão. Então, adicionamos aqui o estado do usuário, e é assim que você precisa pensar adicionar dependência. E é isso. Adicionamos o uso do gancho Callback em nosso componente de aplicativo. Salve este arquivo e teremos que agrupar todos os componentes que estão usando essa função pela função mammo Eu rapidamente embrulho esses componentes com a função mammo. Salve as alterações e dê uma olhada. Veja, funciona da mesma forma que antes. Usando use memo e use callback hook, podemos melhorar o desempenho do nosso aplicativo react Agora, você pode dizer que não vemos a melhoria no desempenho. Sim, atualmente você pode ver isso. Mas quando nosso aplicativo se torna grande, nesse momento, esses ganchos são realmente úteis para melhorar o desempenho É assim que você pode usar use memo e use callback hook. Agora, em nosso aplicativo, você encontra qualquer lugar onde pode adicionar use callback hook e, em seguida, precisa implementar use callback nesse Este é mais um pequeno exercício para você. Verifique os componentes do nosso aplicativo e, se você encontrar o local, poderá adicionar um comando na seção de perguntas e respostas Outros alunos também receberão esse componente para atualização. Su na próxima aula. 183. Gancho do useReducer: Agora, vamos ver outro gancho de reação, que é o gancho redutor de uso Portanto, o gancho redutor é usado para organizar o estado complexo e seu método Em palavras simples, o redutor de uso é usado para tornar nosso componente mais limpo Eu sei que isso é um pouco confuso, então deixe-me explicar isso usando um exemplo simples Então, imagine que temos um pequeno aplicativo no qual temos uma contagem e três botões, aumentar, diminuir e redefinir. Quando clicamos em aumentar, a contagem aumenta em um. Se clicarmos em diminuir, contagem diminuir em um e se clicarmos em Redefinir , nossa contagem será redefinida para o valor padrão, que é zero. Seu código é parecido com este. Na parte superior, temos o estado de contagem usando o gancho de estado dos EUA com valor padrão zero. Agora, para esse estado, existem três métodos, ou podemos dizer que existem três funções. Aumente a contagem, diminua a contagem e reinicie a contagem. Simples assim. Agora, esse código está um pouco desorganizado, então podemos organizá-lo usando o gancho redutor de uso Eu comento esse código e ligo aqui para usar o gancho redutor. Agora, esse gancho aceita dois argumentos. primeira é a função redutora, que é a função que decide quais métodos queremos chamar, como aumentar, diminuir ou redefinir O segundo argumento é o valor padrão do nosso estado, que é zero, certo? Agora, aqui, também podemos adicionar mais um argumento, que é usado para atrasar a inicialização do valor do estado Mas, geralmente, não o usamos. Então, por enquanto, não queremos isso. Agora, o mesmo que nosso gancho de estado de uso. Esse gancho redutor de uso também retorna uma matriz, que tem dois itens, estado atual e uma função pela qual podemos atualizar o estado Então, C primeiro obtemos nossa contagem de estados. Segundo, a função por estado do atualizador, e a chamamos de função de despacho Despachar significa enviar algo. É o nome mais comum de redutor por uso. Se você quiser usar outro nome, você também pode fazer isso. Depende totalmente de você. Agora, vamos definir nossa função redutora. Fora da nossa função de componente, definimos uma nova função chamada redutor, que é a parte mais importante do uso do gancho redutor Então, dentro dessa função, escreveremos toda a nossa lógica para nosso redutor de uso Sei que isso é um pouco confuso, mas depois de concluir esta lição, todas as suas dúvidas serão esclarecidas Portanto, essa função redutora de uso tem dois parâmetros. primeiro parâmetro é o estado, o que significa onde nosso aplicativo está atualmente. E o segundo parâmetro é ação, o que significa qual ação devemos realizar. Por exemplo, aumente a contagem, diminua a contagem, reinicie, etc Agora, essa função retornará o estado atualizado do nosso estado de contagem. Então, por enquanto, estou apenas retornando o estado, que é o valor da contagem atual mais um. Agora, para chamar essa função, usamos essa função de despacho Então, aqui, na função de aumento de contagem, eu apenas chamo a função de despacho e não passo nada dentro dela Além disso, preciso comentar essa linha de contagem definida. Agora vamos ver o que obtemos. Então, salve as alterações e dê uma olhada. Clique no botão de adição e veja que o contador está aumentando em um porque na função redutora, retornamos aqui o estado mais um Se mudarmos isso para estado menos um, isso diminuirá o valor da contagem Quando chamamos essa função de despacho, essa função de retorno de chamada será executada e qualquer valor que retornarmos dessa função, esse valor se tornará o valor do estado atual Simples assim. Agora você pode perguntar: como podemos realizar outras ações como aumentar ou diminuir, para diferentes funções? Para isso, podemos passar o objeto nessa função de despacho. Neste objeto, adicionamos uma propriedade chamada tipo e simplesmente passamos aqui tipo para aumentar todo o capital. Não é obrigatório todo o capital, mas é uma prática melhor destacar o tipo de ação Agora, usando esse tipo, nossa função redutora saberá qual tarefa queremos realizar Aqui, podemos colocar condições de acordo com esse tipo. Podemos usar I s ou também podemos usar o switch case. Eu gosto de usar switch case, switch, e aqui passamos nossa propriedade de tipo. Agora, a questão é: como podemos obter a propriedade de tipo? Obtemos a propriedade de tipo usando esse parâmetro de ação. Aqui, simplesmente escrevemos ação, que é esse tipo de objeto e ponto. Agora, dentro dos colchetes, adicionamos maiúsculas e minúsculas, aumento, dois pontos e aqui retornamos o estado Agora adicionamos outro caso, que é diminuição, cólon, e aqui o que retornamos? Wight. Retornamos o estado menos um Em seguida, adicionamos mais uma caixa que é redefinida. Colon e aqui retornamos zero. E por segurança, adicionamos aqui o caso padrão e simplesmente retornamos o estado aqui como está. Se, por engano, adicionarmos outro tipo de ação , isso não causará erro. Então, a função redutora está pronta. Agora só precisamos despachar um tipo diferente de ação. Copie essa função de despacho e simplesmente adicione-a na função de contagem decrescente e altere esse tipo para diminuir Em seguida, para redefinição, alteramos esse tipo para redefinição. Salve as alterações e dê uma olhada. Veja, nosso aplicativo funciona da mesma forma que antes. Você pode ver agora nosso código parece um pouco mais organizado. Usando o redutor de usuários, podemos organizar nosso código Vamos recapitular esse gancho redutor de uso. Use reducer aceita dois argumentos. Função redutora que simplesmente gerencia quais tipos de ações estamos realizando e o que ela faz E o segundo argumento é o valor padrão. Agora, assim como use state, use reducer também retorna uma matriz com dois itens, estado e função de despacho Esse estado é o valor do estado atual e, usando essa função de despacho, podemos especificar o tipo de ação Qualquer que seja o tipo que passarmos daqui, ele executará sua caixa em nossa caixa de switch, simples assim. Portanto, usar redutor não é nada. Basta tornar nosso código mais organizado. Se você estiver satisfeito com seu código atual, não aplique forçosamente redutor de uso para Depende totalmente de você. Não se confunda com isso. Agora você pode dizer que, ao usar essa função redutora, nosso código parece mais feio, e isso é verdade A solução é que podemos definir essa função redutora em outro arquivo e simplesmente importar essa função aqui em use reducer hook Em nossa pasta de origem, criamos uma nova pasta chamada reducers dentro dessa pasta, criamos um novo arquivo chamado count reducer dot js Agora, a partir de um componente, recortamos essa função redutora e a colamos no arquivo redutor de contagem Além disso, podemos renomear esse estado para contar. Acho que isso faz mais sentido e também altero o nome da função para redutor de contagem E então simplesmente exportamos o redutor de contagem padrão. Salve as alterações e, em nosso componente de aplicativo, no lugar desse redutor, adicionamos o redutor de contagem Salve as alterações e veja agora nosso código parece mais limpo. É assim que você pode tornar seu componente limpo. 184. Exercício para redutor: Agora é hora de fazer um pouco de exercício. Em nosso projeto Card wise, temos nosso componente de aplicativo no qual gerenciamos diferentes métodos para modificar o estado do cartão Portanto, você precisa implementar um redutor de uso para o estado do cartão. Além disso, a dica está na função redutora, precisamos aplicar apenas a lógica de atualização de estado, não chamar uma API Deve ser separado. Aqui está o caso do estado do cartão. Neste exemplo, você pode criar outros casos. Isso vai ser divertido, passe algum tempo com este exercício e depois veja a solução. 185. Ações complexas para o Redutor: Espero que você resolva este exercício, ou pelo menos tente resolvê-lo. Porque usar o gancho redutor em ações complexas, como adicionar carrinho, remover cartão ou atualizar cartão , é um pouco confuso Se você se confunde muito, então, na minha sugestão, não implemente o use reducer hook porque, no final das contas, ter que trabalhar em seu código e usar redutor é apenas para organizar Você pode deixar de usar o gancho redutor. Não é obrigatório, mas muitos estudantes querem aprender a usar o gancho redutor É por isso que eu adiciono esta lição. Agora vamos ver a solução para isso. Em nossa pasta de origem, criamos uma nova pasta chamada reducers e, dentro dessa pasta, criamos um novo arquivo chamado card reducer dot js Agora, dentro desse arquivo, criamos uma nova função, redutor de cartão, igual a aqui, obtemos dois parâmetros Você sabe o que eles escrevem? Primeiro, obtemos o estado, ou podemos chamar aqui de carrinho, e o segundo é ação, que é o objeto que passamos na função de despacho Agora, dentro dessa função, temos que escrever switch case. Então mude, e aqui adicionamos o tipo de ponto de ação, Cali Brackets Estojo para adicionar ao carrinho. Coluna, vamos até o componente do aplicativo e vamos simplesmente cortar essa lógica de mudança de estágio antes de chamarmos a API head to cart e colá-la na caixa de adicionar ao carrinho. Agora, para formatar esse código, deixe-me salvá-lo corretamente. Agora, aqui no final, precisamos simplesmente retornar o estado atualizado. Remova esta função de cartão definido e nós retornaremos este cartão atualizado Agora vamos exportar esse redutor daqui. Então, exporte o padrão, redutor de cartão. Diz as mudanças e, em nosso componente de aplicativo no local desse aro de data de uso, escrevemos redutor de uso e, antes de tudo, queremos aqui a função redutora Portanto, redutor de cartão, boa entrada automática, funciona. E no segundo parâmetro, tínhamos o valor padrão do nosso cartão, que é uma matriz vazia. Agora use o redutor de devoluções aos itens, que possamos desestruturar aqui o cartão e o cartão de despacho Agora, em nossa função de cabeça para cartão, chamamos a função de cartão de despacho e, dentro dela, passamos o objeto, e a primeira propriedade é o tipo, que é cabeça para cartão Certifique-se de escrever a mesma string que você usa no switch case. Agora, aqui em nosso estojo de troca, não temos esse produto e quantidade. Então, como podemos conseguir isso aqui? Certo. Da mesma forma que obtemos esse tipo. Então, em nossa função de despacho, passamos outra propriedade chamada payload Nessa carga, podemos enviar todos os dados externos que queremos enviar na função redutora. Esse é o nome, o tipo e a carga útil das propriedades comuns. Você pode alterá-lo se quiser, mas certifique-se de usar o nome dessa propriedade na função redutora Passamos aqui o objeto e queremos enviar o produto como produto e a quantidade como quantidade. Ou podemos até mesmo simplificá-lo assim. Salve este arquivo e, em nossa função de redução de carrinho, aqui temos os contras: colchetes Cli, produto, quantidade igual Salve as gangues e dê uma olhada. Oh, chegamos aqui a um erro. Deixe-me abrir o console. Veja, aqui temos a função definida do cartão não definida. Portanto, em nosso componente de aplicativo em nossa função Getcard, não podemos usar a função set card Portanto, precisamos de um estojo para a função Get card. Então, chamamos a função de cartão de despacho e passamos seu tipo para Obter cartão E na carga útil, o que queremos enviar para escrever? Queremos enviar objetos com produtos para responder dados de pontos. Salve esse arquivo e, em nossa função redutora, definimos outro caso, cartão cat, coluna e, dentro dele, simplesmente retornamos os produtos de pontos de carga útil de pontos de ação Salve as alterações e dê uma olhada. Novamente, recebemos aqui um erro. Acho que ainda existem funções de cartão SAT. Veja aqui que estamos passando função set card no contexto do cartão. Salve as alterações e dê uma olhada. Veja, aqui temos os detalhes do nosso cartão. Portanto, nosso redutor está funcionando bem. Agora, aqui precisamos de mais um caso porque se nossa API At to cart apresentar um erro , também teremos que definir nosso cartão para o estado anterior. Então, aqui chamamos função do cartão de despacho e passamos aqui o tipo para o cartão revertido. E na carga útil, passamos o objeto com a propriedade do cartão. Salve isso e, na função redutora na parte inferior, adicionamos outra caixa para reverter o carrinho e simplesmente retornamos aqui o cartão de pontos da carga útil da ação Salve isso e funcionará. Agora vamos usar o estojo para remover a função da placa frontal. Nesta função, cortamos essa lógica até definir a carta. E em nossa função redutora, adicionamos outra capa removida do cartão E aqui, simplesmente passamos o código. Agora, no lugar do cartão definido, podemos adicionar um novo cartão escrito, mas aqui está uma coisa. Precisamos aqui do ID do produto que os usuários desejam remover. Então, podemos adicionar aqui o ID do ponto de ação do ponto de carga útil. Isso. E em nosso componente de aplicativo, aqui chamamos a função dispatch card e passamos aqui objeto com tipo para remover do cartão e adicionar outra carga de propriedade ao objeto com a propriedade ID No método de cache, queremos reverter o estado da placa. Podemos simplesmente copiar essa função do cartão de despacho para reverter e colá-la dentro do método de cache Além disso, vamos substituir isso em todos os métodos de cache. Bom. Agora, aqui, não precisamos dessa variável de cartão antiga, então podemos removê-la. Agora vamos definir nosso último caso, que é para cartão de atualização. Aqui, podemos implementar duas soluções. Podemos criar caixas separadas ou aumentar a quantidade e diminuir a quantidade. Ou podemos simplesmente fazer isso em um único caso. Mas nesses dois casos, ficamos muito confusos. Ignore esses SA is, ou podemos simplesmente fazer isso No lugar dessa função de cartão definida, simplesmente copiamos essa função do cartão de despacho com um cartão do tipo cat, que substituirá o estado atual do cartão pelo cartão atualizado Aqui, colamos isso e substituímos os dados do ponto de resposta no cartão atualizado. Agora, duplique isso e também fazemos o mesmo para diminuir. Salve as alterações e dê uma olhada. Veja, adicionar, remover e atualizar todas as funcionalidades está funcionando bem. Agora, você precisa decidir se precisa usar o redutor ou não para organizar seu código Na minha humilde opinião, você pode usar o gancho redutor para ações um pouco menos complexas, mas para ações mais complexas, não sugiro usar o gancho redutor A escolha é sua. Se você estiver confuso, mesmo que seja de um a 2%, não use o gancho redutor para essa ação Está completamente bem. Esta é a seção atualizada do curso definitivo de reação e a próxima atualização está prestes a reagir à consulta. Fique atento a essas atualizações. Espero que você goste desse curso. Fique atento a essas atualizações. 186. Seção 17 React-Query mestre: Bem-vindo à 17ª seção do curso definitivo de Rac. Nesta seção, aprenderemos a melhor biblioteca para gerenciar e capturar os dados no aplicativo react, que é o reac Ao implementar a consulta de leitura em nosso projeto, o desempenho do nosso aplicativo aumentará muito. Quando decido criar esse curso de reação, para ser honesto, não conheço todos os recursos de consulta real. Quando peço aos alunos uma sugestão de tópico, maioria dos tópicos solicitados deve adicionar uma consulta real. Então eu tentei pesquisar sobre o Raquery e realmente me surpreendeu o quão útil essa biblioteca é Se você pensa o mesmo que eu , me avise na seção de perguntas e respostas Adoro ouvir sobre isso. Então, aqui está a comparação. Estou mostrando a vocês, sem o Raquery e com o reaquery, como nosso aplicativo melhora Então, como você pode ver, a implementação da solicitação é muito boa e melhor para nosso aplicativo Portanto, sem perder seu tempo preciso, vamos aprender a solicitação de uma forma muito simples e fácil 187. O que é React Query e por que precisamos dele: Agora, antes de começarmos a aprender uma consulta real, vamos primeiro entender o que é uma consulta real e, o mais importante, por que precisamos dela. Portanto, re query é uma biblioteca usada para gerenciar e armazenar em cache os dados de nossa solicitação de API. Ao usar a biblioteca Requeri, podemos facilmente buscar, atualizar e armazenar em cache nossos dados, que obtemos das Agora, aqui entendemos a busca e a atualização, mas você pode pensar: o que é cache Portanto, o cache é um armazenamento que pode armazenar os dados de busca na memória Ele age como um armazenamento temporário para nossos dados, que retornamos da solicitação da API. Deixe-me explicar com o exemplo. Então, em nosso projeto Card Wish, estamos buscando toda a lista de produtos aqui Agora, todos esses dados de produtos são armazenados no armazenamento temporário chamado de case. Agora, se formos para outra página, como a página do cartão, e, novamente, voltarmos à nossa página de produtos , obteremos esses dados imediatamente do caso. Portanto, se implementarmos o cache em nosso aplicativo , a experiência do usuário aumentará imensamente E isso não é suficiente. O outro recurso da consulta é que obtemos o recurso de cancelamento de solicitação na montagem do componente Além disso, recebemos várias tentativas, o que significa que, se nossa conexão de rede for interrompida ou, por algum motivo, nossa solicitação falhar, solicitação poderá ser repetida várias vezes Além disso, você pode desativar esse recurso se quiser. Depende totalmente de você. Em seguida, também obtemos atualização automática no intervalo de tempo Como se pudéssemos definir o cronômetro, por exemplo, 2 minutos para atualização automática cada 2 minutos, obtemos dados do servidor se o usuário ainda estiver na página. Obviamente, podemos implementar esses recursos escrevendo mais código, mas com a reconsulta, podemos implementar esses recursos em muito menos código Se você quiser melhorar a experiência do usuário em seu aplicativo , para gerenciar e armazenar dados da API, podemos usar a biblioteca de consultas Rea Estou seriamente apaixonado por essa biblioteca. Os desenvolvedores acham que o Raquery é complexo, mas confie em mim, não é É só uma questão de tempo e prática. Então, para simplificar o Raquery, eu divido a seção Raquery em Primeiro, aprenderemos todos os conceitos em outro projeto e, na próxima seção, faremos exercícios práticos implementando esses recursos em nosso projeto cartwish Então, vamos começar a aprender Raquery. 188. Configurando o React Query em nosso projeto: Agora, vamos configurar o Requeri em nosso projeto. Então, para aprender Raquery, não vamos estragar nosso projeto Catwish Em vez disso, aprenderemos todos os conceitos em nosso projeto de roteamento anterior e, depois de aprender todos os conceitos, atualizaremos nosso projeto Catwish como Aqui, usamos nosso antigo projeto de roteamento, no qual aprendemos a rotear e chamar a API nas Seções oito e nove Você não encontra seu projeto, então não se preocupe, vá até a pasta Recursos e obtenha este modelo de consulta, que é o mesmo projeto Então, vamos abrir esse projeto no código VS. Agradável. Primeiro, instalaremos todos os pacotes com a instalação do NPM Bom. Agora, vamos adicionar rapidamente uma consulta real ao nosso projeto. Então, aqui em nosso terminal, escrevemos NPM, I, na taxa, dez consultas SCR. E se quisermos instalar exatamente a mesma versão, escreva na taxa 0,12 0,2 e pressione Enter Bom. Agora minimize esse terminal e abra o arquivo dot jsx principal Aqui, temos que envolver nosso aplicativo com um componente de consulta real, mesmo que fizemos no Rag Router doom Então, aqui nós importamos. Primeiro, precisamos do cliente de consulta de dez Stack Raquery e, segundo, precisamos do provedor do cliente de consulta Agora, após nossas importações, criamos uma nova instância chamada cliente de consulta igual a novo cliente de consulta Agora, você consegue adivinhar com qual componente envolvemos nosso aplicativo com o provedor de cliente de consulta porque esse é o que resta? Você é inteligente. Agora, simplesmente adicionamos aqui o atributo client e, dentro disso, passamos nosso cliente de consulta instantânea, que acabamos de criar aqui, e pronto. Adicionamos com sucesso uma consulta real em nosso projeto. Você acha que precisa se lembrar desse processo, então não se preocupe. Você pode ver esse processo na documentação real da consulta. Agora, na próxima lição, vamos buscar dados usando o Raquery 189. Buscando dados de vendedores: Agora, vamos buscar dados usando uma consulta real. Então, em re query, temos o gancho de consulta us, que é usado para buscar e gerenciar os dados das APIs Então, aqui no componente do nosso vendedor, aqui chamamos U Query hook da biblioteca de consulta Stack rea Agora, neste gancho de consulta dos EUA, temos que passar um objeto de configuração com duas propriedades. O primeiro é para a chave de consulta, que é o identificador exclusivo da nossa consulta. Principalmente, ele é usado para armazenamento em cache. Portanto, sempre que recuperarmos dados do back-end, como informações do vendedor, esses dados foram armazenados no cache com essa chave e, no futuro, estarão acessíveis por meio dessa Temos que definir nossa chave como array, que pode ter um ou mais valores. Na maioria das vezes, o primeiro valor é uma string , usada para descrever o tipo de dados que estamos armazenando no cache. Nesse caso, queremos dados dos vendedores. Então, aqui podemos passar como outras strings para vendedores ou podemos até mesmo passar objetos como uma página para uma, etc. Por enquanto, não se preocupe com isso. Veremos isso em detalhes na aula de adivinhação. Por enquanto, vamos nos concentrar na busca de dados. Vamos remover esses outros valores. Agora, a segunda propriedade é a função de consulta, que é a função que usamos para buscar dados do back-end Observe que essa função deve sempre retornar uma promessa que pode retornar dados ou erros. Então, aqui passamos a função de erro e aqui, a partir desse efeito de uso, copiamos esse método dot Gad do cliente API, que é nossa variável Axios, e simplesmente colamos Agora, você pode perguntar: devemos sempre usar o Axios para a função de consulta E a resposta é não. Podemos usar a API Patch ou qualquer biblioteca para criar STTPRquest Raquery não se importa com a forma como estamos fazendo o STDPRquest. Ele só se preocupa em gerenciar e armazenar dados em cache, mas certifique-se de retornar dados ou erros, só que essa é a condição Agora, aqui, sabemos que esse método dot Get do cliente de API retornará o objeto de resposta, mas não queremos armazenar o objeto de resposta completo no cache. Queremos armazenar apenas os dados reais que obtemos do back-end. Então, adicionamos aqui o método e, nesse caso, obtemos a resposta e, em seguida, simplesmente retornamos os dados do ponto de resposta. E nesses dados, obtemos os detalhes de nossos vendedores de forma simples Agora, aqui, também podemos implementar essa lógica fora da consulta de uso. Então, no topo, definimos a função chamada vendedores de gordura, e aqui adicionamos nossa função de seta E a propriedade da função de consulta, nós apenas passamos a referência da função. Então, na consulta de leitura em tempo de execução, chamamos essa função. E quando essa promessa for resolvida, obtemos uma matriz de dados dos vendedores e, em seguida, essa matriz é armazenada no cache com essa chave Como podemos acessar os dados desse gancho de consulta de uso? Essa consulta de uso retornará objeto de algumas propriedades, como dados , erro, carregamento, status etc Então, aqui, podemos reestruturar esse objeto e obter aqui dados Com essa consulta de uso, agora não precisamos criar os erros do vendedor e as variáveis de estado de carregamento do ISS Obteremos todas as variáveis dessa consulta de uso. Assim, podemos remover as variáveis de estado. Além disso, não precisamos desse efeito de uso. E em nosso JSX, por enquanto, vamos comentar essa instrução de facilidade de carregamento e também a declaração de erro Agora, aqui no lugar desses vendedores, podemos escrever um mapa de pontos de dados ou até mesmo renomear nosso objeto de dados e dar a ele o nome de Eu acho que isso é mais preciso. Salve as alterações e vamos executar nosso aplicativo. Então, no terminal, NPM run DV abra este link. Agora, navegue até a página de administração e abra a página do vendedor. Aqui podemos ver que estamos recebendo um erro. Então, vamos abrir o Console e podemos ver que não é possível ler as propriedades de indefinido Então, por que isso acontece? Porque, embora não recebamos dados do back-end, por padrão, nossos dados são definidos como nulos Então, para resolver isso, aqui temos que adicionar um ponto de interrogação, que é um encadeamento opcional Salve as alterações e dê uma olhada. Veja, aqui temos os dados do nosso vendedor. Agora, atualize a página Veja, obtemos nossos dados quase imediatamente. Isso ocorre por causa do armazenamento em cache. Deixe-me mostrar isso claramente. Clique nesta página de vendas e, quando clicamos na página do vendedor, aqui podemos ver diretamente esses dados sem demora. Isso é armazenamento em cache Portanto, com a implementação da consulta, obtemos novas tentativas automáticas, o que significa que, se algo acontecer e nossas chamadas de API falharem , a consulta será repetida mais algumas Depois disso, obtemos a atualização automática, para que possamos definir a quantidade de tempo e, após esse tempo, nossa consulta é atualizada automaticamente O recurso mais importante é o armazenamento em cache, que significa que, na primeira vez que obtemos dados , eles são armazenados no cache e, se na próxima vez obtivermos os mesmos dados, se estiverem disponíveis no cache, não iremos para o servidor Em vez disso, nós o obtemos diretamente do cache e isso melhorará enormemente o desempenho do nosso aplicativo Agora, na próxima lição, trataremos erros e do carregamento em uma consulta real. 190. Tratamento e carregamento de erros: Agora, vamos ver o tratamento de erros com o Raquery. Então, como sabemos, nossa solicitação retorna um objeto. E nesse objeto, também obtemos a propriedade de erro. Então, temos aqui um erro. Agora, em nosso JSX, vamos remover o comentário dessa declaração de erro E no lugar dos erros, adicionamos erro e, dentro da nossa etiqueta de ênfase, imprimimos a mensagem de pontos de erro. Agora vamos cometer um erro de digitação em nosso EPI e apontar, salvar as alterações e dar uma olhada Atualize a página e, no console, podemos ver que o Raquery está tentando várias vezes buscar dados do back-end por causa de seu recurso de repetição buscar dados do back-end por causa de seu recurso de E depois de algum tempo, recebemos um erro. Agora vamos exibir o indicador de carregamento. Assim, à medida que obtemos a propriedade de erro, também obtemos a propriedade de carregamento fácil de nosso gancho de consulta de uso. E no JSX, só precisamos remover esse comentário e exibir nosso Salve as alterações e dê uma olhada. Aqui, também podemos ver nosso indicador de carregamento. Então é assim que lidamos com erros e carregamentos em uma consulta real. Agora, você se lembra que, em nosso projeto cartwish, criamos um tipo semelhante de gancho personalizado, que são dados usados Mas essa consulta de uso tem muito mais recursos do que nosso gancho de dados usado. Portanto, faremos o que for melhor para nossa aplicação. Não se envolva com seu próprio código. Como engenheiro de software profissional ou desenvolvedor web, seu objetivo mais importante é fazer com que seu aplicativo funcione melhor. E para isso, faremos o que for necessário. 191. Criando um gancho personalizado com o React Query: Agora, em nossa implementação atual, podemos separar nosso gancho de consulta us do nosso componente. Você pode usar essa abordagem ou continuar com a implementação atual. A escolha é sua. Depende totalmente de você. Então, em nossa pasta de origem, criamos uma nova pasta chamada hooks e, nessa pasta, criamos um novo arquivo chamado Uellers Agora, primeiro de tudo, aqui criamos uma função chamada função de erro dos vendedores dos EUA e, no final, exportamos a função padrão dos vendedores dos EUA Agora, do componente do nosso vendedor, primeiro cortamos nossa função de vendedor gordo e a colamos em nosso gancho personalizado. Agora, novamente, de volta ao componente do vendedor. A partir daqui, cortamos nossa consulta com esse objeto de configuração. E em nosso arquivo de vendedores dos EUA, simplesmente retornamos aqui use query Agora vamos importar o cliente da API, remover esse erro de digitação e também importar a consulta dos EUA da biblioteca TNSTekRQuery Salve as alterações. E no componente do vendedor, aqui nos chamamos apenas de vendedores Custom Hook Então, agora, em qualquer outro componente, se precisarmos buscar dados de vendedores, precisamos apenas chamar isso de use sellers Vamos remover todas essas importações indesejadas, salvar as alterações e dar uma olhada. Veja, agora nosso código parece um pouco mais limpo. 192. Adicionando ferramentas de desenvolvimento de consultas do React: Uma das maneiras mais fáceis de aprender como Raquery funciona é usando o Raquery Vamos adicionar as ferramentas Raquery Dev em nosso aplicativo. Então abra o terminal e escreva NPM, eu no direct ten Sag re aquari DevTools, att 5.13 Bom, minimize esse terminal e, em nosso arquivo GSX principal, na parte superior, importamos um componente chamado re querery Agora, temos que adicionar esse componente após nosso componente de aplicativo, o Raquery DevTools, e garantir que o adicionemos a esse componente Raquery DevTools, e garantir que provedor do cliente de consulta Caso contrário, não funcionará e pronto. Salve as alterações e dê uma olhada. Veja, no canto inferior direito, temos um lindo logotipo. Você recebe outro logotipo, então não se preocupe. Esta biblioteca muda o logotipo do botão várias vezes para se divertir. Basta clicar nele e obtemos a ferramenta React query Dav. Aqui, temos esse tipo de estrutura. Não se preocupe. É muito simples e útil. Aqui podemos ver que obtemos a lista de consultas, que é a API do nosso vendedor. Clique aqui. Agora, no lado direito, podemos ver aqui que obtemos nossa chave de consulta. Depois disso, obtemos observadores, que é o número de componentes que estão usando a consulta desse vendedor Atualmente, apenas um componente está usando essa consulta do vendedor. Suponha que essa mesma consulta que estamos usando em três componentes, então as contagens de observadores exibirão três Em seguida, temos a hora da última atualização, que é a última vez em que a consulta é buscada Agora, depois disso, temos algumas ações úteis, como refetch, invalidate, reset, remove trigger load trigger error Assim, podemos acionar o carregamento e ver. Aqui temos nosso indicador de carregamento. Agora vamos restaurar o carregamento e acionamos o erro. Veja, recebemos nosso erro de amostra. Agora, depois de nossas ações, temos o explorador de dados, que é o que a consulta retorna, e esses são os dados do nosso vendedor, e também podemos ver suas propriedades. Agora, finalmente, temos o explorador de consultas. Aqui podemos ver todas as propriedades e detalhes sobre nossa consulta. Geralmente, não estamos usando essa seção, mas algumas propriedades são úteis. Como aqui, podemos ver nosso horário de GC, o que significa tempo de coleta de lixo Ou podemos dizer que o tempo do caso está definido como 300 K, que é o valor de minissegundos, e é igual a Então, se nosso componente for removido da nossa tela, o que significa que temos zero observadores e quando a consulta tem zero observadores, após 5 minutos esses dados serão removidos do cache Sim, podemos alterar essas propriedades, e veremos isso na próxima lição. Além disso, uma pequena dica a partir daqui, podemos mudar o tema de nossas ferramentas de desenvolvimento. Eu gosto do tema escuro, então estou selecionando escuro. 193. Personalizar nossas propriedades de consulta do React: Atualmente, em consultas reais, temos poucas configurações padrão que funcionam bem na maioria das situações, mas também podemos personalizá-las para todas as consultas ou para uma consulta individual Por exemplo, podemos alterar nosso valor de tempo de GC. Então, deixe-me mostrar como podemos fazer isso. Então, em nosso arquivo dot jsx principal, aqui neste cliente de consulta, podemos passar o objeto de configuração Nesse objeto, temos uma propriedade chamada opções padrão, e também podemos definir como objeto, e nesse objeto, temos a propriedade queries, que também é objeto Agora, nesse objeto, podemos passar valores padrão para nossas propriedades de consulta. Então, aqui passamos pela tomografia computadorizada e podemos configurá-la para 10 minutos. Aqui, temos que passar o valor em milissegundos. Então, dez em 60 segundos em 100 milissegundos. Ou podemos passar diretamente 600 K ou podemos escrever aqui seis, zero duplo, sublinhado zero Em JavaScript, podemos adicionar sublinhado no lugar das vírgulas nos Salve as alterações e dê uma olhada. Em nossas ferramentas de desenvolvimento na parte inferior, podemos ver que o tempo C foi alterado para 600 mil milissegundos, o que equivale a 10 minutos. Agora também podemos alterar o número de vezes que nossa consulta é repetida. Portanto, se nossa conexão de usuário perdida ou tivermos um erro de digitação em nossa consulta, a consulta real tentará novamente algumas vezes Por padrão, a contagem de novas tentativas está definida como três, mas podemos mudar isso a partir daqui. Digamos que cinco. Salve esse arquivo e, em nosso guia de uso, cometemos erros de digitação em nosso endpoint, salvamos as alterações e damos uma olhada, abrimos o NetworkTab e Aqui, a primeira vez que nossa consulta é preenchida. Acho que tenho que mudar esse painel para escrever. Agora atualize a página e veja aqui que recebemos uma falha na solicitação Depois disso, levará algum tempo e tentará novamente mais cinco vezes. Portanto, um total de seis solicitações são enviadas para essa consulta. Agora, de volta ao código VS, e aqui removemos nosso erro de digitação Salve este arquivo e, no arquivo principal, aqui, também temos um tempo obsoleto que especifica por quanto tempo nossos dados são considerados novos Atualmente, nosso tempo de espera está definido como zero, o que significa que, no momento em que obtemos dados do back-end, eles são tratados como antigos Portanto, se da próxima vez precisarmos dos mesmos dados, reacquery buscará novos dados de atualização do Então, para demonstração, vamos configurá-lo para 6 segundos. Salve as alterações e aqui obtemos novos dados, que podemos ver pela cor verde. E depois de 6 segundos, ele ficará ainda significa velho. Agora, como eu disse, o reacquery automaticamente refunde nossos dados obsoletos Então, deixe-me dizer em quais situações ele será revertido. Então, primeiro de tudo, quando nossa conexão de usuário é reconectada, componente é montado e , último, quando a janela do aplicativo é refocada Então, deixe-me mostrar isso na prática. Então, aqui em nosso navegador, se você abrir uma nova guia e, novamente, voltar para a guia do aplicativo , nossos dados serão atualizados Então, abra uma nova guia e volte ao nosso aplicativo. Veja, aqui temos os dados de uma frase, e então ela fica quieta. Na maioria dos aplicativos, esse recurso de atualização automática é muito importante Mas, às vezes, se seu aplicativo não precisar desse recurso, você também poderá desativá-lo. Portanto, em nosso objeto de consulta, refrefg na propriedade reconnect Podemos fazer com que seja falso. Além disso, refetg na montagem e configuramos como false e refetg no foco da janela, também podemos torná-lo também podemos torná-lo Por padrão, esses três valores de propriedades são verdadeiros, mas, se necessário, podemos torná-los falsos. Agora, deixe-me explicar para você um cenário. Quando nossos dados ficarem parados, a requery tentará buscar novos dados do servidor Mas, ao mesmo tempo, ele retornará dados estáticos do cache para o nosso componente. Com essa implementação, podemos obter nossos dados imediatamente, mas também, ao mesmo tempo, estamos solicitando os dados mais recentes. Assim que tivermos os dados mais recentes, Raquery atualiza nosso cache e também atualiza os dados do nosso componente, o que é muito legal, certo? Então, aqui, podemos alterar as propriedades padrão de todas as consultas. Na maioria das vezes, não mudaremos isso porque essas propriedades já são boas. Mas, às vezes, em nosso aplicativo, precisamos alterar essas propriedades para apenas uma consulta. Então, como podemos fazer isso? Deixe-me te mostrar o gancho do vendedor aberto. E aqui, no gancho de consulta use, podemos passar as mesmas propriedades, como retrte, para cinco, e também podemos passar outras Então é assim que podemos alterar as propriedades padrão das consultas. 194. Exercício para buscar dados: Agora é hora de fazer um pouco de exercício. Então, em nossa página de vendas de administradores, quero que você busque dados sobre todos nossa API JCNPlaceholder com a ajuda do Portanto, nossa API deve ser GDPs, dois pontos, barra dupla jsnplaceholder.typicod.com slash Tu slash Tu Essa API retornará 200 dados falsos de todos. Portanto, crie um gancho personalizado para buscar tarefas. Precisamos exibir os títulos do sudo em um parágrafo simples e também exibir indicadores de erro e carregamento Eu sei que você pode fazer isso, e depois disso foi a solução. Então, aqui está uma solução desse exercício. Primeiro de tudo, em nossa pasta de ganchos, criamos um novo arquivo chamado ustdos Aqui, criamos uma nova função chamada função de erro ust Dos e, no final, vamos simplesmente exportar o padrão desses todos. Agora, antes dessa função, criamos uma nova função chamada fast Dos, função de erro. Aqui, retornamos diretamente o ponto cat e o endpoint do cliente API, que são slash todos Essa expressão retornará a promessa, então usamos o método, resposta e simplesmente retornamos os dados do ponto de resposta. Aqui, estamos retornando dados de pontos de resposta porque nossa API de espaço reservado JSON retorna todos na propriedade de dados Para sua API, você precisa verificar a resposta da API e garantir que você retorne esses dados. Agora, vamos chamar nosso gancho use Query da Biblioteca Raquery. Aqui passamos o objeto de configuração, e temos que passar aqui duas propriedades. Você pode me dizer o que eles estão certos? Chave de consulta e função de consulta. Então, consulte a matriz e passe aqui todos. Depois disso, consulte a função para passar todos, e simplesmente retornamos essa consulta de uso desse gancho. Mudanças de usuário e na página de vendas aqui em nosso componente, chamamos de STDs Hook, que acabamos de criar E, como sabemos, esse gancho escreveu um objeto com propriedades. Então, podemos reestruturá-lo aqui e obter dados, que podemos renomear para Tutu Além disso, obtemos erros e facilitamos o carregamento da propriedade. Você está percebendo como é simples chamar um PI? Eu realmente amo essa biblioteca de consultas de reação. O que você acha? Agora, em nosso JSX, aqui alteramos esse título para página do E para adicionar vários elementos, usamos fragmentos de reação Mova-os para o final , para formatar nosso código. E depois do nosso título, adicionamos calibracets, todos, interrogação e mapa de pontos Aqui temos um objeto único para fazer, que tem ID, título, preenchido e ID de usuário. Simplesmente escrevemos aqui tag de parágrafo e fornecemos a ela uma chave para o Tudot ID Dentro deste parágrafo, exibimos o título Todo. Além disso, vamos mostrar o erro e o indicador de carregamento. Antes dessa função de mapa, adicione colchetes de Cali. Se o carregamento for verdadeiro, retornamos o componente do carregador e, finalmente, a entrada automática funciona, adicionamos colchetes Cali Se o erro estiver disponível, retornaremos a tag de ênfase e exibiremos a mensagem de ponto de erro. As mudanças e dê uma olhada. Vá para a página de vendas e veja aqui nossas tarefas. Vamos verificar isso na consulta DevTools e ver aqui que obtemos zero por consulta do vendedor Esse zero é a contagem de observadores e, em nossa página, temos o componente zero, que está chamando a API de vendedores Atualmente em nosso aplicativo, nossa página tem um componente, que está chamando a consulta. Se passarmos para a página do vendedor, obteremos um observador para vendedor e zero observador para fazer o Squery Então é isso que os observadores querem dizer. Contagem dos componentes atualmente renderizados, que usa a consulta 195. Entendendo parâmetros de consulta no React Query: Nesta lição, veremos como podemos passar parâmetros em nosso gancho de consulta use. Vamos construir algo assim. Antes do nosso cabeçalho, temos uma lista suspensa, que tem cinco valores, como usuário um, dois, três, quatro e cinco. Quando selecionamos o usuário um, obtemos apenas as tarefas criadas pelo usuário um. Basicamente, vamos realizar a filtragem. Mas aqui estamos obtendo dados do back-end e passamos nossos detalhes de filtro nos parâmetros de consulta de nossa API de tarefas Vamos ver como podemos fazer. Então, antes do nosso indicador de carregamento, selecionamos e, dentro dele, tínhamos a opção seis vezes Agora, em nossa primeira opção, aqui não adicionamos nada no valor e aqui passamos select user. Agora, depois disso, passamos o valor para um, e aqui passamos para o usuário um. Da mesma forma, valor para dois e usuário dois, três, usuário três, quatro, usuário quatro e últimos cinco usuários cinco. Aqui, não precisamos desses atributos de nome e ID, então podemos removê-los. Salve as alterações e dê uma olhada. Veja, aqui temos nossa caixa suspensa. Agora, quando selecionamos aqui o usuário um, devemos receber apenas duas doses da postagem desse usuário. Temos que lidar com essa lista suspensa. Na parte superior, criamos uma nova variável de estado chamada ID do usuário, definimos a ID do usuário e, como valor padrão, definimos como null Em nossa tag de seleção, adicionamos o evento de alteração, e aqui obtemos a função de erro do objeto do evento e definimos o ID do usuário como valor do ponto de destino do evento. Além disso, aqui obtemos valor em string, então precisamos convertê-lo em número inteiro E como podemos fazer isso? Certo, envolvendo nosso valor em parse int, e aqui também passamos valor para nosso ID de usuário Bom. Agora, neste componente, estamos usando nosso gancho personalizado usado para fazer. Nesse gancho, podemos passar nossa variável de estado de ID de usuário como argumento. Salve esse arquivo e vamos ver o que temos que fazer em nosso gancho de tarefas usado. Primeiro, obtemos aqui o ID de usuário como parâmetro, e aqui em nossa solicitação de API, temos que passar esse ID de usuário com nossa solicitação GAT Aqui, temos que mover essa função em nossa função use todos. Assim, podemos acessar o ID do usuário em nossa função de estúdios de feiras. Agora, aqui, temos que passar algo como esse slash Studios e, no parâmetro de consulta, passamos o ID do usuário igual ao nosso ID Ou podemos passar o objeto no segundo argumento e addHeParams, que é E aqui, simplesmente passamos o ID do usuário para o ID do usuário, ou podemos removê-lo. última coisa a fazer é alterar nossa chave de consulta. Atualmente, estamos passando apenas uma única string em nossa chave de consulta, mas agora estamos lidando com vários dados em nossa consulta. Também precisamos adicionar isso em nossa chave de consulta. Então, aqui passamos nosso ID de usuário. Além disso, aqui, muitos desenvolvedores gostam de usar a estrutura hierárquica que representa a relação entre nosso objeto de dados Deixe-me mostrar o que quero dizer. Aqui, começamos com o objeto de nível superior, que são os usuários. Esse usuário tem ID, que é ID do usuário. E por esse ID de usuário, podemos buscar todos Essa é a mesma estrutura que os desenvolvedores do Bend usam para definir o URL da nossa API. Portanto, o URL da nossa API pode ser assim. Os usuários um, que é o ID do usuário, cortam todos. Acho que esse padrão é mais específico. Agora, aqui está uma coisa. Aqui estamos passando o ID do usuário nessa chave de consulta, que significa que sempre que o ID do usuário for alterado, a consulta real atualizará os dados da nossa API Se não adicionarmos a variável de ID de usuário aqui , nossa consulta será executada somente uma vez, mesmo se adicionarmos essa ID de usuário em nossos parâmetros Portanto, essa matriz de consulta é semelhante à nossa matriz de dependência em efeito de uso Salve as alterações e dê uma olhada. Deixe-me diminuir um pouco o zoom. Agora, veja que atualmente não temos nenhum usuário selecionado, então obtemos aqui usuários null todos e obtemos todos os todos Agora, se mudarmos o usuário para um , obteremos apenas os dados do nosso usuário um. Em nossas ferramentas de desenvolvimento, temos B todos os usuários. Da mesma forma, podemos selecionar outros usuários e, para cada usuário, reacquery, buscar novos dados Agora temos todos os dados em nosso cache. Se formos para os usuários anteriores, obteremos nossos dados imediatamente, sem nenhum carregamento. Essa é a beleza de uma consulta real. A única coisa que quero corrigir é que, para o valor nulo, alteraremos nossa chave de consulta De volta ao código do VS, e aqui passamos a condição se o ID do usuário estiver disponível, então retornamos esse array de chaves, caso contrário, retornamos o array com apenas uma string para fazer porque, para o usuário nulo, buscamos tudo o que fazer sem nenhum filtro Salve as alterações e dê uma olhada. Atualize a página e veja aqui que obtemos apenas dois dos e, se selecionarmos o usuário um, obteremos nossa chave de consulta com o ID de usuário e todos dos usuários Agora, aqui temos um pequeno problema. Então, se voltarmos novamente ao ID de usuário nulo , aqui não obteremos nossos dados Por quê? Vamos verificar isso no NetworkTab Reprima a página. Primeiro de tudo, aqui temos todas as tarefas. Em seguida, selecionamos o usuário um e aqui obtemos a solicitação de todos com o ID de usuário um. Agora vamos selecionar novamente, selecionar usuário e ver aqui obtemos ID do usuário em vez de um número. E esse é o problema. Portanto, para resolver esse problema, precisamos passar a condição para esse parâmetro de ID de usuário. Então, para simplificar isso, eu crio aqui uma nova variável chamada params, que passamos como objeto Params Agora, depois disso, adicionamos condição. Se o ID do usuário estiver disponível, definimos os parâmetros dot userId como nosso ID de usuário Se o ID do usuário for nulo ou indefinido, não adicionaremos o parâmetro do ID do usuário Podemos simplesmente passar aqui parâmetros para parâmetros, ou podemos remover esses Salve as alterações e dê uma olhada, reprima a página, selecione o usuário um, aqui obtemos os dados do usuário B, depois selecione o usuário e veja, aqui temos tudo o que fazer. É assim que passamos parâmetros de consulta em uma consulta real. 196. Paginação no React Query: Agora, em nossa lista de tarefas, estamos buscando 200 tarefas em uma única solicitação, mas isso aumentará a carga Anteriormente, em nosso aplicativo cartwig, tínhamos a mesma situação Você se lembra do que fizemos para reduzir essa carga? Certo, usamos paginação ou recurso de rolagem infinita. Primeiro, veremos a consulta de paginação nesta lição e, em seguida, também veremos como aplicar a consulta de rolagem infinita. Não se preocupe com isso. Em primeiro lugar, vamos remover essa filtragem porque não quero complicar isso Então, removemos essa variável de estado do ID do usuário daqui. Além disso, remova a tag de seleção com essas opções. Bom. Agora, para paginação, precisamos do estado da página, que podemos alterar ou manipular por meio de nossos botões de página Então, aqui criamos uma nova variável de estado chamada page set page e, como valor padrão, passamos aqui uma. Agora, vamos adicionar os botões anterior e seguinte para paginação, para Então, depois do nosso mapa Tudos, adicionamos o botão e passamos aqui anterior e outro botão ou o próximo Agora, para o botão anterior, podemos adicionar o atributo de desativação, que será desativado se a página for igual a um. À medida que passamos o evento de clique e dentro dele, seta funciona e definimos a página como página menos um Agora, para o próximo botão, passamos a desativação para aqui, passamos a página para o tamanho da página. tamanho da página é o número de dados que queremos exibir em uma única página. E sabemos que essa consulta tem 200 para fazer. Então, passamos aqui mais de 200. Agora você pode dizer, aqui sabemos que temos 200 para fazer. E se não soubermos o número total de produtos em nosso aplicativo? Portanto, nessa situação, você precisa dizer ao desenvolvedor de back-end que também envie um número total de produtos com seus dados de API Já vemos isso em nosso projeto cartwh, certo. Agora, aqui passamos o evento de clique e, dentro dele, definimos a página duas páginas mais uma. Bom. Agora, aqui, criamos uma variável simples chamada tamanho da página igual a, digamos, dez Agora, no que costumávamos fazer no local dessa ID de usuário, adicionamos página e tamanho da página. Agora imagine que, nesse recurso, também queremos adicionar filtro ou capturar por recursos. Então, temos que adicionar vários valores nessa função. Então, em vez disso, podemos passar todos os valores em um único objeto. Então, adicione o objeto e passe a página e o tamanho da página. Está bem? Neste arquivo, quando costumávamos fazer isso no local desse ID de usuário, obtemos nosso objeto de consulta. Vamos também remover esses parâmetros e, se houver condição, podemos passar os perams diretamente Agora, em nossos parâmetros de consulta, adicionamos objeto e, dentro disso, temos que passar duas propriedades, limite de sublinhado e início de sublinhado Esses parâmetros dependem da sua API. Então, aqui, para limitar, passamos nossa consulta dot pay size e, para começar, temos que passar o ponto de partida para nossos todos. Então, aqui passamos a página de pontos de consulta, menos um, multiplicada pelo tamanho da página de pontos de consulta Agora, se nossa página estiver definida como um, então um menos um, que é zero, e multiplique por dez, que também é Portanto, nosso ponto de partida é zero. Então, obtemos a postagem 1-10. Então, para a página dois, nosso ponto de partida será um em dez, que é dez. Então, obtemos o post 11-20 simples assim. Agora, vamos alterar nossa chave de consulta aqui. Não precisamos dessa condição. Passamos array com string para fazer e, depois disso, passamos diretamente aqui ou consultamos o objeto. Portanto, se algo mudar nesse objeto de consulta, reacquery buscará novos dados Salve as alterações e faça uma. Veja, aqui temos apenas dez dados, e nosso botão anterior está desativado. Agora, clique em Avançar e obteremos os próximos dez dados. Além disso, se voltarmos para a página anterior , obteremos dados sem carregar porque eles estão armazenados em cache. Agora, uma pequena atualização que queremos fazer é quando clicamos em Avançar, nosso botão anterior e próximo, mover para cima e depois para baixo. Então, para corrigir isso aqui na consulta de uso, adicione aqui uma propriedade chamada dados de espaço reservado aqui, temos que adicionar uma referência de função, que é manter os dados anteriores Certifique-se de que seja da biblioteca de consultas ten Stag react. Aqui, podemos ver que ele é importado da nossa biblioteca de consultas rea e pronto. Enquanto buscamos novos dados, ainda vemos os dados anteriores e, se obtivermos novos dados, depois disso, os dados anteriores desaparecerão As mudanças e dê uma olhada. Clique em Avançar e veja, enquanto nossos dados estão sendo corrigidos, nossas tarefas anteriores ainda estão aqui e, após concluir a solicitação, recebemos nossos novos dados Assim, você pode ver como é simples e fácil adicionar paginação usando o Rea 197. Rolagem infinita no React Query: Agora vamos ver como podemos buscar consulta infinita usando uma consulta real Então, vamos adicionar o botão carregar mais na parte inferior e, quando clicamos nele, obtemos nossos novos dados. Em aplicações do mundo real, carregaremos nossos dados quando chegarmos ao final da nossa página. Veremos isso em nossa parte de exercícios. Por enquanto, vamos implementar isso. Em primeiro lugar, para rolagem infinita, temos que substituir nosso gancho de consulta use pelo gancho de consulta infinita Guarde isso. Agora, aqui está uma coisa. Quando estamos usando o gancho de consulta use Infinite, não precisamos passar a página diretamente para o objeto Iquery Use a consulta infinita para fazer isso automaticamente. Aqui podemos remover isso e também remover esta página do objeto de consulta. Agora você pode pensar: como podemos contar nossos números de página? Não se preocupe É realmente muito simples. Então, para contar os números das páginas, temos uma função em nossa consulta use infinite chamada Get next page perm Aqui, temos que passar a função de retorno de chamada, e essa função tem dois parâmetros última página, que é a última matriz de nossas tarefas e o segundo parâmetro são todas as páginas, que é a matriz bidimensional, ou podemos dizer duas matrizes D. Algo parecido com isso. Temos uma matriz e dentro dessa matriz temos os dados de cada página em sequência. Não se preocupe com isso. Quando imprimirmos nossa matriz, você entenderá isso. Lembre-se de que todas essas páginas são a matriz de todas as tarefas. Agora, aqui nesta função, temos que retornar o número da próxima página. Como podemos encontrar isso? Como eu disse antes, todas as páginas têm todos os dados sobre nossas tarefas. Se carregarmos duas páginas , os dados de todas as páginas ficarão assim. Então, aqui podemos fazer algo assim. Retornamos todas as páginas com o tamanho do ponto N mais um, que é o número da próxima página. Agora, e se rolarmos até a página que não está disponível? Então, não precisamos passar o número da próxima página. Então, quando passamos o número da página, que não existe na API de espaço reservado JSON, ele retornará uma matriz vazia Então, passamos aqui a condição I da última página, que é o comprimento do ponto de dados da nossa última página maior que zero, se for verdade, retornamos a próxima página, contrário, retornamos nulo, simples assim Agora só precisamos passar o número da página em nossa função dos anterior. A consulta real passará o número da página nos parâmetros da função de consulta. Aqui, desestruturamos o objeto e obtemos aqui o parâmetro da página. E passe-o no local da página de pontos da consulta. Além disso, como valor padrão, passamos sua página por um para um. Em palavras simples, o que quer que retornemos da função permanente da próxima página, obteremos esse valor em nossa página por um Salve as alterações e, em nosso componente de vendas na parte inferior, podemos remover os dois botões e, aqui, adicionamos um novo botão para carregar mais Vamos adicionar um evento de clique para esse botão. E aqui, temos que passar a função next page, que obtemos de nossa consulta use infinite. E na parte inferior, em nosso evento on click, simplesmente adicionamos a função fetch next page Em nosso projeto Catwig, quando chegamos ao final da nossa página, podemos simplesmente chamar essa função fetch next Salve as alterações e faça um erro aqui, obtemos. Então, vamos inspecionar isso e, no console, aqui temos todos. O mapa de pontos não é uma função Vamos imprimir o que obtemos em nossos dados. Então, os dados do log de pontos do console e removemos essas tarefas da renomeação Salve as alterações e, em nosso console, role para cima. Estamos ficando indefinidos. Acho que temos que comentar o método do mapa. Salve as alterações e veja se obtemos os dados. Aqui, esses dados são objetos que têm duas propriedades, parâmetros de página e páginas Nessas páginas, obtemos uma matriz de nossas dez tarefas. Então, em nosso JSX, antes do nosso mapa de pontos de todos, tínhamos um ponto de interrogação de dados, pontos de páginas de pontos Aqui obtemos a função de seta de dados de cada página. E aqui, temos que retornar outro método de mapeamento porque cada página é uma matriz de tarefas. Então, aqui adicionamos fragmentos de reação e, dentro disso, podemos mover esse método de mapa E substitua essas tarefas pela nossa página. Diga as mudanças e dê uma olhada. Veja, aqui temos nossos dados. Agora clique no botão Carregar mais, e temos outra tarefa, então está funcionando. Mas em nosso console, recebemos aqui o erro, que é que a lista deve ter um suporte de chave exclusivo. Então, aqui em nosso fragmento de reação, temos que passar adereços de chave Então, para isso, essa sintaxe do fragmento de reação não funcionará. Temos que adicionar o fragmento de pontos de reação. E a chave aqui, obtemos o índice e o passamos aqui. Diga os motores e dê uma olhada. Veja, o erro desapareceu. Agora, quando estamos buscando dados, podemos desativar nosso botão Use Infinite query tem mais uma propriedade para isso, que é buscar a próxima página À medida que chegamos à próxima página na parte inferior, em nosso botão, adicionamos o atributo de desativação e passamos aqui, como corrigir a próxima página Além disso, podemos alterar o texto do botão para que possamos passar aqui a condição. Se a correção da próxima página for verdadeira, retornaremos o carregamento ponto, ponto, ponto, senão mostraremos carregar Além disso, envolvemos nosso botão com colchetes e adicionamos aqui I, pois a próxima página é verdadeira, só então exibimos esse botão para carregar mais Essa propriedade retorna, nossa consulta tem próxima página ou não. Diga os ângulos e dê uma olhada, atualize a página e clique em Carregar Veja, aqui temos nosso texto de carregamento, então está funcionando. 198. useGancho de mutação para mutação: Até agora, vimos como podemos buscar dados usando uma consulta real Agora vamos ver como podemos mudar, o que significa adicionar, atualizar ou excluir dados em nosso aplicativo usando o Raquery Antes de tudo, vamos fechar todos os arquivos e abrir o componente de vendedores E nesta lição, executaremos a funcionalidade de adicionar vendedor com uma consulta real. Para mutação, temos um gancho que é use mutation, mesmo que temos use query e dentro dessa função, passamos nosso objeto de configuração Em nosso gancho de consulta de uso, temos a função de consulta. Mas na mutação de uso, temos a função de mutação. E aqui, o que passaremos, certo, passaremos nossa função, que chamaremos de API e retornaremos dados. Então, passamos a função de seta e adicionamos ponto ponto do cliente API e 0,2 slash users dot, depois a resposta do método, e simplesmente retornamos os dados do ponto de resposta Atualmente, não estamos passando aqui o objeto do novo vendedor. Veremos isso em apenas um segundo. Agora você pode perguntar: como podemos chamar essa API, que acabamos de definir? Para isso, essa função de mutação de uso retorna um objeto, nós o armazenamos em uma variável chamada adicionar mutação do vendedor Esse objeto tem um método chamado mutate. Ao usar essa função de mutação, podemos chamar a API Onde queremos chamar essa API na função de vendedor de anúncios. Em primeiro lugar, aqui removemos esses vendedores de conjuntos e também removemos essa solicitação de API Não precisamos e aqui apenas adicionamos a função add seller mutation dot mutate. Isso chamará nossa função de mutação. Agora podemos passar o objeto do nosso novo vendedor, que criamos anteriormente. Veja aqui. E à medida que passamos o objeto na função silenciada, aqui, obtemos esse parâmetro em nossa função de mutação e o passamos após nosso ponto Salve as alterações e dê uma olhada. Acesse a página do vendedor e abra a guia Rede. Escreva para novo vendedor e clique em Adicionar vendedor. Veja, aqui temos o ID de solicitação do New Post com nosso nome. Agora, como fizemos anteriormente, podemos adicionar nossos novos vendedores nessa lista Portanto, há duas maneiras de atualizar nossa lista. Primeiro, podemos atualizar diretamente nosso cache. E segundo, podemos invalidar nosso cache antigo e, em seguida, podemos recuperar nossos dados do servidor Aqui nessa situação, não podemos usar essa segunda maneira porque JCNPlaceholder não adicionará nossos dados no É só para degustar, mas não se preocupe. Vou mostrar a vocês dois o caminho até aqui. Vamos primeiro ver essa segunda maneira e, depois disso, escreveremos nosso código para atualizar diretamente o cache. Então, aqui em nosso gancho de mutação de uso, temos outro método chamado de sucesso, que será executado se nossa solicitação de API for concluída com sucesso Além disso, temos uma propriedade de erro, que será executada se ocorrer algum erro nessa mutação. Aqui, podemos exibir a notificação de erros do Toast. Por enquanto, não queremos voltar ao sucesso e passamos a função Callback, e aqui temos dois parâmetros O primeiro parâmetro retornará objeto do nosso vendedor do back-end. Podemos chamá-lo vendedor salvo e também obtemos o novo objeto do vendedor, que acabamos de enviar com nossa API. E dentro dessa função, primeiro vemos como podemos invalidar a consulta anterior do nosso vendedor Para isso, na parte superior, nos chamamos de cliente de consulta da área Query. E armazene isso em uma variável chamada cliente de consulta. Esse cliente de consulta é igual ao nosso arquivo JSX de ponto principal, esse objeto cliente Agora, em nossa própria função de sucesso, adicionamos consultas query client dot Invalidate e, dentro disso, temos que passar a chave de consulta Object pass here para Qualquer consulta que tenha essa chave começa com os vendedores dizendo que todas as consultas estão definidas como inválidas, e é por isso que uma consulta real Salve as alterações e dê uma olhada, escreva o nome do nosso vendedor aqui e adicione o vendedor. Veja, nossa consulta com a chave do vendedor está piorando. Você pode ver isso pelo último valor atualizado. Veja, novamente, adicionar vendedor e aqui desta vez é atualizado. Aqui, não vemos nada mudar em nossa lista porque Jon substitui o espaço reservado, na verdade, não salvando nossos novos vendedores no servidor Se eles vão armazenar isso, então nós temos esse novo vendedor aqui. Agora, vamos ver outra maneira, que é atualizando diretamente o cache. Então, para isso, comentamos esse método e adicionamos comentários para o método dois. E aqui, consulte os dados de consulta do conjunto de pontos do cliente. No primeiro argumento, temos que passar a chave de consulta, que é vendedores E o segundo parâmetro é a função de dados. Então, temos aqui nossos vendedores, que é a matriz da lista de vendedores atuais, função de erro e a matriz de retornos Agora, primeiro, adicionamos nosso objeto de vendedor salvo e, depois disso, adicionamos vendedores do operador de spread, salvamos as alterações e damos uma olhada Insira o nome do vendedor e clique no anúncio. Veja, aqui temos nosso novo vendedor. É assim que transformamos nossos dados no react Query. Vamos recapitular rapidamente sobre a mutação. Como nos chamamos de gancho de consulta para mutação, chamamos use mutation hook e, dentro do objeto, passamos a função de mutação que funciona com a chamada da API Depois disso, temos a propriedade de sucesso que será executada após a conclusão bem-sucedida de nossa mutação. Aqui, atualizamos nossos dados de cache com esses dados de consulta de conjunto de pontos do cliente de consulta. E na parte inferior, para chamar essa mutação, adicionamos a função Ed seller mutation dot mutate Simples assim. Se você está um pouco confuso , não se preocupe com este exercício, você entenderá esse conceito. Então, aqui está um pequeno exercício para você. Como aplicar o método de mutação de uso para essa funcionalidade de exclusão do vendedor e atualização do vendedor resultado deve permanecer o mesmo quando estamos excluindo e atualizando a lista do vendedor Tente resolver isso. E se precisar, você pode assistir novamente a esta lição Nos vemos na próxima lição. 199. Excluir e atualizar vendedores: Espero que você tente resolver esse exercício. Agora vamos ver a solução bem rápido. Em primeiro lugar, vou mover este gancho TD de uso na parte superior. Bom. Agora, após nossa mutação de erro de anúncios, chamamos novamente use mutation e passamos sua função de mutação do objeto de configuração para a função de seta para a Agora, de baixo, pegamos esse cliente de API da função atrasada e o colamos aqui. Aqui, não precisamos desse método de esboço, então podemos removê-lo E aqui adicionamos os dados de método, resposta e resposta de retorno. Agora obtemos esse ID aqui a partir desse parâmetro. Em seguida, adicionamos o método de sucesso e passamos aqui a função de retorno de chamada, e aqui obtemos nossos dados de vendedor excluídos, função de seta e dados de consulta de conjunto de pontos do cliente de gravação dados de consulta de conjunto de pontos do cliente No primeiro argumento, passamos nossos principais vendedores, no segundo argumento, passamos nossa função de atualização. Então, aqui temos a função de seta do vendedor e retornamos aqui o filtro de pontos do vendedor Aqui temos um único vendedor, a função de seta, como ID, não igual à nossa ID de vendedor selecionada Então, aqui, excluí o ID do vendedor, mas aqui está um problema. O espaço reservado Sun não retorna nada quando excluímos o usuário Deixe-me te mostrar isso ao vivo. Então, para chamar essa API, vamos armazenar esse objeto de mutação em variável chamada delete seller mutation E em nossa função de exclusão de vendedor, vamos remover nosso código anterior. Aqui, chamamos isso função delete seller mutation dot muted. E dentro disso, passamos nosso ID, salvamos as alterações e damos uma olhada, abrimos a guia Rede e aqui excluímos o vendedor. Veja, recebemos aqui uma solicitação de exclusão, mas nossa lista não é atualizada porque, na resposta do servidor, não recebemos nada. Agora, como podemos resolver isso? É muito simples. Também podemos transmitir o método de sucesso em nossa função de mutação Então, após nosso primeiro argumento, passamos o objeto de configuração aqui e simplesmente cortamos nosso próprio método de sucesso do use mutation hook E cole nesse objeto. Agora, não precisamos aqui do parâmetro de vendedor excluído e, no lugar desse ID de ponto do deleteller, basta passar o ID basta passar Diga as mudanças e dê uma olhada. Clique em excluir e nosso vendedor será excluído daqui. Agora vamos ver como podemos atualizar o vendedor. Depois de nossa mutação Delete, chamamos novamente a mutação dos EUA Passe aqui o objeto de configuração, a função de mutação para aqui, obtemos o objeto vendedor atualizado, que passamos da nossa função de atualização de vendedores, função de erro Vamos pegar esse cliente EPA com o método patch. E cole aqui. Além disso, removemos esse método de esboço e o adicionamos porque essa API retornará nossos dados atualizados do vendedor Portanto, responda e retorne dados de pontos de resposta. Agora, no lugar desse ID de ponto de vendedor, adicionamos um ID de ponto de vendedor atualizado. Agora, aqui estamos obtendo dados do servidor, para que possamos passar aqui o método de sucesso. Aqui obtemos nosso objeto de vendedor atualizado, que obtemos do servidor, da função de seta e, dentro dessa função, adicionamos dados de consulta do conjunto de pontos do cliente de consulta. Primeiro, adicionamos a chave de consulta, que é definida para os vendedores e, depois disso, atualizamos a função, obtemos os dados dos vendedores, a função de seta Aqui, temos que retornar a matriz atualizada. Para isso, de baixo para baixo, podemos recortar o método de mapa de pontos do vendedor e simplesmente colá-lo aqui. E, em nossa condição, alteramos o ID do ponto do vendedor para o ID do ponto do vendedor atualizado. Agora, para chamar nossa mutação Update, armazenamos essa mutação de uso em uma variável chamada Atualizar mutação do vendedor E na parte inferior, podemos remover o conjunto de vendedores e simplesmente ligar aqui, Atualizar a mutação do vendedor, ponto mutate e passar aqui, Objeto do vendedor atualizado Diga as alterações e dê uma olhada, clique no botão Atualizar e veja se chegamos aqui ao vendedor atualizado. Agora você entende como podemos usar o gancho de mutação para alterar nossos dados É muito simples. Só precisamos praticar. 200. Tratamento de erros na mutação: Agora vamos ver como podemos lidar com erros na mutação. Em nosso objeto de adição de mutação, temos um método chamado erro Aqui, obtemos nosso objeto de erro, que obtemos da API e, dentro dessa função, também podemos escrever a lógica para mostrar notificações de torradas Por enquanto, vamos simplesmente consultar o registro deste objeto de erro. Agora vamos cometer aqui um erro de digitação em nosso endpoint. Use NGs e dê uma olhada. Abra o console, escreva aqui o nome do vendedor e edite. Veja, aqui temos o erro Axios. Esse erro tem muitas propriedades, como CF, mensagem, solicitação, etc Por enquanto, só precisamos dessa mensagem. Então, voltando ao código VS e aqui no local do log de pontos do console, podemos escrever a função Alert e simplesmente passar aqui a mensagem de ponto de erro. Pare e veja, aqui recebemos um alerta de erro. Linda. Agora, deixe-me mostrar como também podemos exibir erros em nossa página. É muito simples. Como sabemos, todos usam ganchos de mutação e retornam objetos com mutação e várias propriedades Dentro deles, também obtemos error, que é o mesmo objeto desse objeto de erro. A partir daqui, podemos comentar isso sobre o método de erro e, na parte inferior, duplicar essa condição e alterá-la para adicionar o erro de ponto de mutação do vendedor Só então imprima aqui, adicione a mensagem do ponto de erro do ponto de mutação do vendedor Salve as alterações e faça uma e veja aqui nosso erro. É assim que exibimos o erro de mutação. Agora vamos remover esse erro de digitação, testamos nosso aplicativo com sucesso Agora, na próxima lição, mostraremos nosso progresso durante as mutações. 201. Mostrando o progresso durante as mutações: Agora, muitas vezes nossa mutação está sendo executada em segundo plano e pode levar pouco tempo Então, nesse momento, podemos exibir algum tipo de carregador ou girador para indicar a mutação Então, para isso, use a mutação retorna uma propriedade chamada Es pendente. E usando essa propriedade, podemos exibir o carregador Esse E pendente funciona da mesma forma que nosso estado de carregamento Ese, que criamos em nosso gancho personalizado de dados de uso. Lembre-se de que, em nosso botão de vendedor de anúncios no local desse vendedor de anúncios, aprovamos a condição. Se a mutação do adseller estiver pendente for verdadeira, retornaremos a adição de vendedor, caso contrário, o vendedor de valor agregado padrão Assim, podemos desativar nosso botão Adicionar por atributo desativado e simplesmente passar aqui no ponto E de mutação do vendedor pendente Portanto, se for verdade, nosso botão será desativado, salvará as alterações e dará uma olhada. Escreva o nome do vendedor e adicione-o. Veja aqui que adicionamos um vendedor e nosso botão também é desativado. Você pode ver como o Raquery é simples e útil. Não consigo imaginar que não adicionaria Requeri neste curso Mas graças a Deus eu adiciono isso. Isso vai te ajudar muito. E também, muito obrigado por solicitar uma solicitação. Eu também aprendi muito com isso. 202. Atualização otimista no React Query: Agora, atualmente em nossa implementação, primeiro estamos fazendo uma solicitação de API e depois alterando os dados em nossa página, que é chamado de abordagem pessimista Mas também podemos aplicar aqui uma abordagem otimista, o que basicamente significa que primeiro alteramos nossos dados e, em seguida, chamaremos nossa API para essa mutação e, em seguida, chamaremos nossa API para essa Anteriormente, já vimos essa abordagem, certo? Então, vamos implementar essa abordagem em uma consulta real. Então, em nossa mutação do vendedor de anúncios, aqui em nosso aro de mutação de uso, temos mais um método chamado Aqui passamos a função de retorno de chamada. Essa função será executada antes que essa função de mutação seja executada, e é exatamente isso que queremos Vamos verificar isso. Então, aqui no primeiro parâmetro, obtemos nossos dados, que estamos enviando para o servidor, que é esse novo vendedor. E dentro dessa função, simplesmente consultamos o log de pontos para alterar o novo vendedor E depois disso, simplesmente acionamos o alerta com uma mensagem de mutação Salve as alterações e dê uma olhada. Abra a guia Rede, pressione a página, nomeamos aqui e clique em no vendedor. Veja, primeiro recebemos o Alerta e, se clicarmos em OK, recebemos a solicitação de postagem. Portanto, está claro que esse método silenciado será executado antes de nossa função de mutação. E também em nosso console, podemos ver aqui que obtemos nossos novos dados de vendedores. Portanto, nesta função, temos que adicionar nosso novo vendedor aos dados do nosso vendedor. Vamos remover esse código. E simplesmente atualize os dados de nossos clientes. Assim, podemos mover esses dados de consulta definidos em nosso método silenciado e transformar esse vendedor salvo novo vendedor, e pronto Salve as alterações e dê uma olhada aqui, nome e clique em adicionar vendedor. Veja, recebemos imediatamente nossos novos dados de vendedor e, em seguida, a API é chamada. Agora, temos que lidar apenas com o sucesso e com a função de erro. Em nossa própria função de sucesso, substituiremos nosso novo objeto vendedor, que acabamos de adicionar no método silenciado Nós o substituímos pelo objeto salvo do vendedor, que estamos recebendo do servidor. Então, escrevemos dados de consulta do conjunto de pontos do cliente, passamos sua chave para os vendedores e, para a função de atualização, obtemos aqui vendedores, função de seta Passamos pelo mapa de pontos do ponto de interrogação dos vendedores, função de seta do vendedor e aqui passamos pela condição simples Se o único vendedor for igual ao nosso novo vendedor, devolveremos o vendedor salvo, caso contrário, devolveremos o vendedor como está Agora, aqui, esse novo vendedor é esse novo objeto de vendedor, que passamos em nossa função de vendedor de anúncios. E terminamos aqui. Agora, vamos lidar com função de erro, porque se algo der errado , teremos que restaurar nossos dados ao estado anterior. Vimos isso em nossa seção de API de chamadas. Lembre-se, naquele momento, o que fizemos no método então, estamos fazendo o mesmo neste método de sucesso. E o que fizemos em nosso método de cache, estamos fazendo o mesmo neste método de erro. Nossa sintaxe mudou, mas nossa lógica é a mesma de antes E é por isso que primeiro eu explico a nova lógica e, em seguida, estamos implementando essa lógica usando a biblioteca de consultas react. Então, vamos lidar com o método de erro e passar aqui a função de retorno Nesse retorno de chamada, primeiro obtemos o objeto de erro, depois, no segundo parâmetro, obtemos um novo vendedor e, por fim, obtemos contextos Agora você pode pedir uma mensagem de texto. Então, neste contexto, obtemos o que retornamos disso na função silenciada Portanto, a lógica é que retornaremos lista de nossos vendedores anteriores a partir dessa função silenciada e, em seguida, poderemos obter essa lista em nosso contexto Basta ver isso e sua saída ficará limpa. Então, aqui, antes do nosso conjunto de dados de consulta, escrevemos query client dot Get query data. E dentro disso, passamos nossa chave, que são os vendedores. Agora, vamos armazenar esses dados em uma variável chamada vendedores anteriores E no final, devolveremos os vendedores anteriores no objeto Aqui, também podemos simplificar. E na parte inferior, em nossa própria função de erro, nesse contexto, obtemos esse objeto com a propriedade anterior do vendedor Então, primeiro, verificamos se o contexto é falso e, em seguida, retornamos dessa função. E se o contexto estiver disponível, podemos executar a consulta do cliente, conjunto de pontos, dados de consulta, passar aqui principais vendedores e simplesmente passar aqui os contextos dos vendedores anteriores Agora, vamos verificar se isso funciona ou não. Então, por erro, cometemos aqui um erro de digitação em nosso endpoint, S, as alterações e damos uma olhada Escreva o nome e clique em adicionar vendedor. Primeiro, o nome é adicionado, depois estamos recebendo um erro e nossa lista é definida para o estado anterior. Então, está funcionando muito bem. Agora vamos recapitular essa abordagem para que você possa entendê-la melhor Primeiro, adicionamos a função silenciada, que é executada antes da nossa função de mutação, e configuramos nossos novos dados diretamente em nossa Depois disso, temos que lidar com o sucesso e os métodos de erro. Se nossa chamada de API for encerrada com sucesso, substituiremos nosso novo objeto de dados pelos dados salvos que obtemos do servidor. E se recebermos um erro em nossa chamada de API , teremos que restaurar nossa lista para o estado anterior. Para obter a lista anterior, obtemos nossos dados anteriores nessa função silenciada antes da mutação e simplesmente os retornamos no objeto Também podemos retornar dados anteriores diretamente sem objeto e, em nosso próprio erro, temos que escrever contextos, que criará confusão Portanto, é melhor retornar o objeto de um silenciado e pronto Implementamos com sucesso uma abordagem otimista. 203. Gancho personalizado para a mutação de AddSellers: Agora, atualmente, em nossa implementação, armazenamos toda a nossa lógica de mutação nesse único componente, que pode ser difícil de manter no futuro Assim, podemos armazenar essa lógica em um gancho separado, mesma forma que criamos vendedores Se você concorda com essa implementação , não precisa fazer isso. Mas, na minha sugestão, é melhor escrever um código limpo. Em nossa pasta Hooks, primeiro, criamos uma nova pasta chamada vendedores e, dentro dela, adicionaremos todos os nossos ganchos relacionados aos Então, movemos esses vendedores de uso para dentro da pasta Vendedores. Bom. Agora, vamos criar um novo arquivo chamado user seller dot js. Primeiro, vamos criar uma nova função chamada use add seller error function. E na parte inferior, basta exportar o padrão, neste uso adicionar vendedor. Agora, de volta ao componente do nosso vendedor, copie esse cliente de consulta e também copie essa mutação de adicionar vendedor daqui e cole-a em nosso gancho de uso de adicionar vendedor E aqui, no local de armazenar essa mutação em variável, podemos simplesmente retorná-la daqui Agora vamos importar linha por linha alguns ganchos e métodos que precisamos neste código Então, primeiro, precisamos usar o cliente de consulta, então nós o importamos da consulta real. Além disso, precisamos desse gancho de mutação de uso. Depois disso, precisamos do cliente IEI, que é o nosso Axios e também esqueci de remover esse erro de digitação daqui E é isso. Nosso SedSellerHok Salve esse arquivo e, no componente do vendedor no local desse gancho de mutação use, podemos chamar use Ed seller Você pode ver agora que nosso código parece limpo. Mas temos essa mutação delete e update neste componente Também podemos separá-los, mas estou dando isso como um exercício. Faça ganchos separados para usar excluir vendedor e usar atualizar vendedor Não estou mostrando essa solução porque é muito fácil. Então é assim que nosso componente fica depois de separar a mutação do nosso Veja que parece mais limpo e fácil de manter. 204. Seção 18 Melhorando o desempenho do site com o React Query: Bem-vindo à 18ª seção do curso definitivo de reação. Agora, nesta seção, implementaremos o reac Query em nosso projeto final de cartucho Então, como eu disse anteriormente, primeiro, darei o exercício no início de cada aula, e você terá que resolver esse exercício com seus cem por cento. Você ficou preso em algum lugar ou completou o exercício, só então verá a solução. Mas primeiro, você precisa fazer o possível para resolvê-lo. Não se preocupe Eu não vou te dar algo novo. Você já aprendeu esses conceitos de consulta de reação na seção anterior. Também nesta seção, mostrarei como você pode adicionar uma consulta real em um projeto de reação existente sem grandes dificuldades. Atualizar o projeto é algo que você precisa fazer em sua carreira profissional ou freelancer. Então, você está animado para melhorar seu projeto? Vamos começar. 205. Você realmente precisa do React Query: Antes de começarmos a atualizar nosso projeto react, primeiro lugar, você precisa se perguntar: precisamos dessa reacquery Porque se seu aplicativo não tem muitos recursos de busca de dados da API , adicionar Requery é Isso só aumentará a carga em seu aplicativo. Um dos meus amigos tinha o Requery em um pequeno projeto, que tem apenas duas pequenas chamadas de API, como dados de cinco parágrafos Você pensa nele? Ele toma boas decisões? Obviamente que não, certo? Então, aqui estão nossos três projetos. Quais projetos você acha que não precisam dessa readquirição? Certo. Nosso primeiro projeto, TAs Track, não precisa dessa readquirição Agora, nosso segundo projeto, que é o filme Maniac, tem três chamadas de API Devemos adicionar uma solicitação nela? Sim, podemos adicionar requery neste projeto porque o foco principal deste site está nos dados da API Se os usuários não obtiverem os dados do filme rapidamente , eles fecharão o site imediatamente. E como nosso foco principal são os dados da API, precisamos de solicitações mesmo se tivermos três chamadas de API Assim, podemos adicionar requery em nosso projeto movie maniac. E eu não preciso te perguntar sobre o Projeto 3 porque ele também tem muitos recursos de busca Então é assim que você deve pensar sobre seu projeto de reação. Além disso, nesta seção, atualizaremos apenas nosso Projeto três, não o Projeto dois. Em primeiro lugar, em nosso projeto cartwich, substituímos toda a lógica de busca pela consulta de usuário e, em seguida, implementaremos também uma consulta real para mutação Agora, primeiro de tudo, tenho que esclarecer uma coisa: aplicar a biblioteca inteira em projeto existente é um pouco confuso porque primeiro precisamos , porque primeiro precisamos esclarecer nosso código anterior e depois adicionar uma nova biblioteca E é por isso que eu ensino biblioteca de consulta real primeiro com nosso projeto de roteamento simples Se você entendeu adequadamente a solicitação na seção anterior, agora está nesse nível para implementá-la em nosso projeto cartwis sem Não se preocupe. Vou tentar simplificar todos os processos , o que o ajudará muito. Então, vamos começar a implementar o Raquery em nosso projeto. 206. Configurando o React Query: Agora, antes de começarmos a usar o rea query, primeiro precisamos configurar o rea Query em nosso aplicativo de cartucho Você precisa abrir seu projeto de cartucho ou, se estragar seu código, obterá o mesmo código que o meu na pasta de recursos, E nessa Seção 16, pasta finalizada. Então você pode me acompanhar. Mas certifique-se de alterar a URL base do seu back-end no arquivo de configuração Agora, aqui nesta seção, no início de cada lição, apresentarei uma abordagem passo a passo para concluir todas as aulas como exercício. Então, etapa número um, instale o reaquery em nosso projeto, e passo número dois, adicione ferramentas Dao requary Você pode realizar todas essas etapas como tarefa de exercício. Então, vamos começar com a etapa número um, configurando uma nova consulta em nosso projeto Então abra o terminal e escreva NPM, I, addict, ten SAC, slash reac Query, adt 5.12 0.2, e também instalamos o query DevTools, então espaço, addit tenga query DevTools, addit na data 5.13 0.3. E aperte Enter. Bom. Agora, você se lembra em qual arquivo configuramos a consulta? Temos que adicionar Requeri em nosso arquivo JSX de pontos principal. Aqui no topo, importamos o cliente de consulta do Ten Stack rea Query e também precisamos do provedor do cliente de consulta Além disso, importamos o ReQuery DevTools do Red Query DevTools Agora, após nossas importações, criamos uma nova instância chamada cliente de consulta igual a novo cliente de consulta Agora, precisamos simplesmente agrupar nosso componente de aplicativo com o provedor do cliente de consulta. Adicione aqui o provedor do cliente de consulta e mova esse componente de fechamento após nosso componente de aplicativo, e simplesmente passamos aqui cliente para cliente de consulta. E para adicionar o DevTools aqui após o componente do aplicativo, simplesmente adicionamos o componente DevTools de consulta de reação Salva as alterações e deixe-me executar meu aplicativo usando o NPM run Dev Abra o link e veja. Aqui temos o DevTools de consulta. Aqui, configuramos com sucesso o Raquery em nosso projeto. 207. Buscando dados usando o useQuery: Agora, atualmente em nosso aplicativo, estamos buscando a maioria dos nossos dados usando use data custom hook Mas no uso do gancho de dados, estamos gerenciando manualmente os erros de dados e facilitando o carregamento da propriedade. E sabemos que, se usarmos use query, não precisaremos gerenciar essas propriedades. A etapa número um é que usaremos use o gancho de consulta em nosso gancho de dados de uso e a etapa número dois, atualizaremos todos os componentes nos quais usamos o gancho de dados. Primeiro, vamos atualizar nosso gancho de dados de uso. Primeiro, removeremos essas três variáveis de estado e removeremos esse gancho de efeito de uso e removeremos essa instrução de retorno. Vamos começar do zero. Como fizemos na seção anterior, aqui retornamos use query hook de nossa função. Agora, você se lembra do que adicionaremos dentro dessa consulta de uso? Certo, adicionamos um objeto com duas propriedades. primeira é a chave de consulta e como podemos obter essa chave de consulta a partir do parâmetro. Então, aqui, finalmente, podemos obter a chave de consulta. Agora, aqui, podemos passar essa chave de consulta ou removê-la. Mas para entender melhor, estou mantendo isso como está. Agora, adicionamos a função de consulta e aqui temos que criar uma nova função para chamar todas as APIs de patch Antes de nosso retorno, criamos uma nova função chamada função fetch, função seta e simplesmente retornamos aqui o método dot Get do cliente API Aqui, o que adicionaremos, certo, adicionar o endpoint, que obteremos de nossos componentes Agora, depois disso, se quisermos adicionar alguma configuração, também podemos adicionar nossa configuração personalizada aqui, da mesma forma que fizemos anteriormente, sabemos que isso retornará uma promessa, então adicionamos o método then, e aqui obtemos a resposta e simplesmente retornamos os dados do ponto de resposta Podemos simplesmente passar essa função, função de consulta. Certifique-se de não chamar essa função aqui, temos que passar a referência. Agora, para nossa consulta de busca, podemos definir o tempo 10 minutos para toda nossa consulta de busca, o que significa que, depois de obtermos nossos dados do back-end, permanecerão atualizados por 10 minutos, mas não podemos configurá-lo globalmente porque, em nosso aplicativo de comércio eletrônico, precisamos obter os detalhes do cartão O usuário pode se sentar por 10 minutos ou verificar seu cartão. Você entende a situação? Portanto, para cada consulta, podemos definir um tempo estático diferente usando o parâmetro. Então, aqui adicionamos tempo estático e, por padrão, passamos aqui 5 minutos, o que é 300 K. E no lugar de 600 K, adicionamos o parâmetro de tempo de aço E se não tivermos nenhuma configuração personalizada, essa configuração personalizada pode nos dar um erro Assim, podemos passar um objeto vazio como seu valor padrão. Além disso, vamos remover esse parâmetro de profundidade e, na parte superior, removemos essa primeira linha de entrada. Não precisamos disso, e é isso. Salve as alterações e aqui está concluída nossa primeira etapa. Agora, se verificarmos nosso aplicativo, ele travou porque, quando chamamos o gancho de dados usado em nossos componentes, não passamos a chave de consulta Não se preocupe, nós vamos resolver isso. Portanto, precisamos atualizar todos os nossos componentes que estão usando o gancho de dados usado. Agora você pode ter uma pergunta. Como podemos descobrir em quais componentes estamos usando dados usados? Isso levará muito tempo. Não se preocupe Eu tenho um equipamento. Aqui em nosso painel do explorer, temos esse ícone de pesquisa. E aqui, podemos pesquisar nossa função ou variável, que queremos encontrar em nosso projeto. Então, aqui escrevemos dados de uso, e ele mostrará todas as palavras de dados usadas. Mas aqui, você pode ver que está mostrando as linhas de entrada e também a linha de função. Então, para filtrar mais, podemos adicionar aqui um parêntese de abertura e ver nossa lista ser reduzida . Você gosta desse truque? Espero que você goste. Uso-o muito quando estou trabalhando em grandes projetos. Agora, primeiro, clicamos em nossa primeira linha, que está no arquivo do produto em destaque, e em C, ele abrirá esse arquivo com nossos dados de uso destacados. Então, aqui adicionamos null no segundo parâmetro porque não temos gunfig personalizado e, depois disso, passamos nossa chave de consulta, que passamos nossa chave de consulta, é a matriz de produtos e E ainda faltam 10 horas porque não precisamos de dados novos aqui todas as vezes. Ofereça atualizações de produtos após 24 horas e pronto. Agora, vamos verificar se isso está funcionando ou não. Diga as mudanças e dê uma olhada. Veja, aqui estamos recebendo nossos produtos em destaque. Portanto, nossos dados usados estão funcionando corretamente. Agora vamos atualizar nosso segundo componente da pesquisa, que é nossa página Meu pedido. O mesmo. Aqui, passamos null para chave de consulta de configuração personalizada para meus pedidos e ainda passamos para 1 minuto porque Então, um em 60 em 1.000, e pronto. Salve esse arquivo. Agora, a seguir, temos a lista de produtos, mas não a tocamos porque, para isso, temos que usar a consulta infinita. Vamos pular isso Depois disso, temos barra lateral de produtos e aqui adicionamos null para chave de consulta de configuração, duas categorias e ainda o tempo de 24 horas, 24 a 60 minutos, 60 segundos, 100 milissegundos Motivo pelo qual adicionamos ainda 24 horas, porque também é raro que aplicativo de comércio eletrônico atualize suas categorias de produtos Aqui você pode alterar o tempo parado conforme os requisitos de sua inscrição. Depende totalmente de você. Salve isso para a última página, que é uma única página de produto, adicione Gun fake personalizado a nulo, chave de consulta aos produtos, vírgula Aqui, adicionamos o ID do produto e ainda mantemos seu valor padrão. Salve as alterações e dê uma olhada. Veja que nosso aplicativo funciona e estou surpreso que também estejamos recebendo aqui dados de produtos, mas o recurso de consulta infinita não funcionará Então, vamos verificar nosso componente da lista de produtos. Ah, veja, aqui estamos passando uma matriz de dependência, e nosso gancho de dados de uso obtém essa chave Squery, e é por isso que está funcionando para dados anteriores Mas temos que atualizar aqui com o uso em consultas finitas. Não se preocupe Também é muito simples. 208. Implementando consulta infinita: Agora, vamos implementar o recurso Infinite Query nossa lista de produtos. Etapa número um, criaremos um novo gancho para usar a consulta infinita e, na etapa número dois, atualizaremos nosso componente de lista de produtos. Vamos começar com a etapa número um. Então, para isso, em nossa pasta Hooks, criamos um novo arquivo chamado us proroductlst Aqui, criamos uma função chamada use Lista de produtos com função de seta. E, no final, simplesmente exportamos o padrão, usamos a lista de produtos. Agora, você se lembra do que retornaremos da consulta infinita? Certo, voltamos aqui, usamos consulta infinita. Agora, dentro disso, adicionamos um objeto com algumas propriedades. Então, a primeira é a chave de consulta, que por enquanto é, vamos mantê-la como produtos. Agora, função de consulta. Aqui, temos que criar uma função para chamar a API. Portanto, const fresh products é igual à função de seta, e retornamos simplesmente pi client dot Get 0.2 E aqui, temos que passar o número da página e as categorias, que passamos do nosso componente de lista de produtos. Veja, esse objeto tem todos os parâmetros, então podemos adicioná-lo diretamente como configuração Em nossa função de uso da lista de produtos, obtemos esse objeto como, digamos, uma consulta e simplesmente o adicionamos após nosso endpoint Você se lembra que fizemos o mesmo em nossa lição anterior? Agora, vamos adicionar esse objeto de consulta em nossa chave de consulta também. Aqui, essa expressão retorna uma promessa. Então, adicionamos o método e simplesmente a função de seta de resposta, dados de pontos de resposta. Agora, vamos passar essa referência de função em nossa função de consulta. Após a função de consulta, adicionamos mais uma propriedade chamada Get next page param. Você pode me dizer por que precisamos dessa propriedade? Certo? Basicamente, essa função determina a contagem de páginas e os dados de fase de acordo Então, aqui, temos que passar a função, que tem dois parâmetros, última página, que são os dados da última página, e o segundo parâmetro é todas as páginas, que é a matriz de todas as nossas páginas. E aqui simplesmente retornamos a condição se o comprimento do ponto da última página for maior que zero, o que significa que nossa última página tem dados, e se for verdade, aumentamos a página, que é o comprimento do ponto de todas as páginas mais um, caso contrário, retornamos nulo Agora, como sabemos, o que quer que retornemos dessa função, obteremos esse objeto em nossa função de consulta. Então, aqui pegamos esse objeto e desestruturamos aqui e obtemos aqui o parâmetro da página, e como valor padrão, passamos aqui um Agora temos que adicionar essa página pum em nosso objeto de consulta, que passaremos do nosso componente Aqui, podemos ver que estamos passando a propriedade da página com nosso número de página. Então, temos que fazer o mesmo aqui. Primeiro de tudo, no local desse objeto de consulta, adicionamos objeto e, primeiro, desestruturamos nosso objeto de consulta e, no final, adicionamos página a essa página peram e pronto Salve as alterações e vamos chamar isso de gancho em nosso componente de lista de produtos. Então, aqui no local de uso dos dados, chamamos de lista de produtos de uso. Agora, aqui, não precisamos passar o endpoint. Somente nós aprovaremos nossos parâmetros. Então, eu estou cortando o objeto params e removendo todas as coisas dentro da nossa função e simplesmente colando aqui Agora, aqui, não precisamos desse parâmetro de página porque já tínhamos essa lógica nos parâmetros da próxima página do Gt e também removemos essa variável paseed da parte superior Vamos verificar se nosso componente está funcionando ou não. Você consegue adivinhar? Certo? Isso não vai funcionar. Salve os motores e dê uma olhada. Boa é uma página de produto e nosso aplicativo falha. Vamos abrir o Console e ver aqui o erro. A página definida não está definida. Então, na parte inferior, removemos essa função de página definida. E o que adicionaremos aqui para obter os dados da próxima página. Certo, precisamos buscar a próxima página, que obtemos de use infinite query E também removemos esse gancho de efeito de uso, que colocará nossa peça em uma. Agora, na parte inferior, em nosso efeito de uso, chamaremos essa função fetch next page As mudanças e dê uma olhada. Veja aqui que nosso erro desapareceu, mas ainda não recebemos nossos dados, então estamos progredindo Agora, aqui, estamos recebendo o mesmo erro que recebemos na seção anterior. Então, vamos simplesmente const dot log nossos dados. Veja as mudanças e dê uma olhada. Veja, aqui estamos obtendo dados em um objeto com duas propriedades, feixes de página, que é o indefinido Segundo, temos páginas que têm objeto e, dentro desse objeto, temos algumas propriedades, página atual, postagem por página, produtos etc Anteriormente, nas páginas, só chegávamos ao doce array. Lembre-se de que essas propriedades dependem inteiramente do back-end. Portanto, em nosso GSX, antes de nossos produtos de pontos de dados, adicionamos colchetes Ci e, aqui, no Data Dot Pages, Dot MAP Dentro delas, temos uma única página, que é nosso objeto. Então, aqui retornamos fragmentos de reação e, dentro deles, simplesmente movemos nosso método de mapeamento e, no lugar dos produtos de pontos de dados, adicionamos produtos de pontos de página Agora, como sabemos, temos que adicionar a propriedade key em nosso fragmento de reação Então, aderimos ao fragmento de pontos de reação. Feche também esse fragmento de ponto de reação e simplesmente cole a chave, que é o índice E nós o passamos na chave para indexar. Vamos ver se isso está funcionando ou não. Salve as alterações e dê uma olhada. Ainda assim, não estamos recebendo nossos dados. Aqui estamos recebendo páginas que não conseguem ler. Então, em nosso arquivo, temos que passar páginas de pontos de interrogação de dados. Salve isso e veja aqui que estamos recebendo página não está definida na linha 43. Então, vamos verificar isso. Veja, aqui temos a página. Então, vamos remover essa condição, salvar as alterações e dar uma olhada. Não recebemos nenhum erro e também não recebemos nenhum dado. Agora, acho que esse é o problema em nosso método. Acho que não estamos obtendo dados porque estamos exibindo aqui produtos encurtados, mas isso também é necessário para encurtar Talvez estejamos fazendo algo errado ao encurtar. Vamos verificar isso. Então, aqui em nosso efeito de uso, oh, aqui estamos verificando a condição errada. Assim, podemos remover essa condição de produtos com pontos de dados e adicionar aqui páginas de pontos de dados. E também, aqui queremos obter todos os produtos. Então, aqui estão nossos dados, que são a matriz de objetos. E nesse objeto, temos a propriedade de produtos, que tem uma matriz de dez produtos. Agora, a questão é como podemos obter todos os produtos simplesmente usando o método FlatMap Então, aqui, em data dot Pages, que é o método array dot flatMap E aqui temos cada página. E simplesmente retornamos aqui os produtos com pontos de página. Ao usar esse método flatMap, não obtemos uma matriz de matrizes Todos os nossos produtos serão adicionados em uma única matriz. Agora, como estamos exibindo produtos curtos diretamente, podemos mover isso para fora do nosso método de mapeamento, e nem precisamos desse loop de mapa de pontos de páginas de dados. Também vamos remover esse componente de paginação. Isso tornará nosso código um pouco confuso. Salve as alterações e dê uma olhada. Veja, agora aqui temos nossos dados. Vamos tentar mudar a classificação. Veja que também está funcionando. Agora vamos verificar o recurso de rolagem infinita e ele não está funcionando Então, acho que fizemos algo errado fundamentalmente porque nossa página não está mudando para duas, que significa que podemos cometer algum erro ao usar o gancho de consulta infinito Sim, cometemos um grande erro. Deixe-me explicar para você. Isso é muito interessante. Então, como sabemos, esta última página são os dados que obtemos por último do nosso back-end. Aqui, tratamos essa última página como uma matriz, mas, como sabemos, estamos recebendo objetos de nossa chamada de API. Deixe-me te mostrar. Então, aqui adicionamos o log de pontos do console, última página e adicionamos aqui a última página. As mudanças e dê uma olhada. Aqui, podemos ver que a última página não é uma matriz. É um objeto que estamos obtendo do back-end. Aqui obtemos a página atual e a página total é propriedade. Portanto, podemos simplesmente retornar aqui, condição como se o ponto da última página página atual fosse menor que o ponto da última página, o total de páginas. Se for verdade, aumentamos nossa contagem de páginas, que é a última página, ponto da página atual mais um, caso contrário, retornamos null As mudanças e dê uma olhada. Por que estou comprando aqui apenas oito produtos. Acho que nosso parâmetro não está passando corretamente. Deixe-me verificar. Aqui eu esqueci de adicionar a propriedade Perms. Nós envolvemos nosso objeto com colchetes e adicionamos aqui propriedade Perms e a passamos Salve os motores e dê uma olhada. Vamos fechar o console. Veja. Finalmente, obtemos nossa consulta infinita. Eu cometo esses erros intencionalmente para mostrar qual erro pode acontecer em seu projeto Assim, você pode aprender com esses erros ao implementar o uso de consulta infinita. Primeiro, você verifica a propriedade da última página e, em seguida, retorna o número da próxima página de acordo com isso. Agora podemos tornar isso ainda melhor exibindo esqueletos de cartões enquanto buscamos mais dados Portanto, em nosso gancho de lista de produtos de uso, não queremos que isso seja uma propriedade de carregamento. Simplesmente chegamos aqui na propriedade de patch, e também na próxima página Agora, aqui em nossa função de rolagem de alça no local de carregamento, adicionamos I fetching e também adicionamos e depois como próxima página Só então buscamos a próxima página. Também na matriz de dependências, nós a alteramos para sua busca e, na parte inferior, aqui alteramos seu carregamento para e fetching e, na parte inferior, aqui alteramos seu carregamento para e Use Gs e pegue a. Veja agora nosso recurso de rolagem infinita funcionando melhor Assim, você pode ver como implementamos a reconsulta para buscar dados infinitos em um projeto existente Acho que esse vídeo é um pouco longo, então você pode fazer uma pausa de cinco a 10 minutos, beber pouca água ou tocar música e continuar esta seção. Nos vemos na próxima aula. 209. Devemos adicionar cache nas Autosugestões: Agora, atualmente, se em nosso projeto, queremos saber qual API voltada ainda permanece, então o que faremos da maneira certa, pesquisaremos aqui. Então, pesquisamos o API client dot Get Method. Veja aqui que temos três arquivos. O primeiro são os dados usados, que atualizamos. Em seguida, temos os serviços de cartões, que veremos na próxima lição e, por fim, temos arquivo de serviços do produto no qual temos a API para sugestões. Agora, na minha humilde opinião, adicionar armazenamento em cache na consulta de pesquisa não é necessário porque muitas pessoas gostam de pesquisar os mesmos produtos repetidamente Outra coisa é que o motivo para adicionar cache em nosso aplicativo é que queremos enviar um pouco menos de solicitações ao servidor E se estivermos adicionando cache em nossa sugestão automática de pesquisa, não podemos atrasar essa solicitação de sugestão porque, se usarmos o Query para essa consulta, teremos que chamar o Squery em nosso componente Não podemos chamar isso de efeito de uso porque uma consulta real não nos permite fazer isso. Tenha a implementação do código se quiser nos adicionar a consulta neste componente, mas na minha opinião, isso aumentará a carga em nosso servidor. É por isso que decido não usar o Query para sugestões automáticas. 210. Atualizando a consulta do getCart: Agora vamos atualizar nossa última solicitação de busca, que é a solicitação Get card Para a API Gecard, usamos nosso gancho de dados usado. Em nosso componente de aplicativo, aqui chamamos use data e passamos endpoint como primeiro argumento, que é cartão nulo para objeto de configuração e, por fim, adicionamos a chave de consulta, que é card e pronto Podemos ver o quão útil é esse gancho de dados usado. Agora, como sabemos, isso retornará nossos dados. Então, nós desestruturamos aqui, pegamos nossos dados e os renomeamos como dados do cartão Agora, aqui, à medida que aplicamos o gancho redutor de uso, temos que fazer algo assim Chamamos aqui UIPechok e, a princípio, função de retorno de chamada, e a segunda é matriz de dependência, e adicionamos aqui os dados do cartão. Agora, dentro dessa função de retorno de chamada, adicionamos a condição se os dados do cartão não forem nulos, disponíveis Em seguida, definimos os dados em nossa variável CAT usando o método de despacho Então, de baixo para baixo, simplesmente cortamos esse método de despacho da função Get card e também removemos toda essa função Nós não precisamos disso. Agora, cole essa função de despacho em nosso UIfectHok e, no local dos dados do ponto de resposta, o que adicionaremos, adicionamos os dados o que adicionaremos, adicionamos Agora, na parte inferior, temos esse gancho de efeito de uso. Vamos movê-lo para o topo após nosso gancho de efeito de uso. Este gancho serve para recuperar os dados do cartão. Mas agora não temos a função Obter cartão. O que faremos é simples. Temos uma função na consulta dos EUA, que é re fetch e, no lugar do Gcard, chamamos isso de refetchFunction Salve as alterações e dê uma olhada. Aqui, precisamos fazer login com nossa conta para obter os dados do cartão. Veja aqui que obtemos os dados do nosso cartão. Agora, do nosso arquivo de serviços de cartão, removemos essa função Obter cartão. Nós não precisamos disso. E em nosso componente de aplicativo, também removeremos a entrada da API Get card. Caso contrário, isso nos dará um erro. Então, aqui terminamos todas as atualizações para buscar dados. 211. Mutação para adicionar ao carrinho: Agora, vamos começar a usar mutações para mutações. Então, em nosso componente de aplicativo, temos três mutações. O primeiro é ir para o carrinho. Em segundo lugar, removemos do carrinho e, por último, atualizamos o carrinho. Então, vamos começar com a primeira cabeça ao carrinho. Na seção anterior, criaremos um gancho separado para cada mutação. Em nossa pasta de ganchos, criamos uma nova pasta chamada CAT e dentro dessa pasta, criamos um novo arquivo chamado used to cart dot js Agora, vamos criar uma função chamada use ad to cart, função de seta e, depois disso, exportamos essa função padrão. Bom. Agora, a partir dessa função, retornamos use o gancho de mutação E dentro deles, temos que passar o objeto de configuração. Agora, a primeira propriedade é S V conhecer a função de mutação. E aqui, temos que simplesmente retornar nosso head to card API, que já temos no arquivo Card Services. Veja, aqui estamos retornando diretamente a promessa. Então, podemos adicionar aqui ponto e depois método e simplesmente adicionar dados de resposta e ponto de resposta. Ou podemos simplesmente cortar essa API daqui e também remover essa função. Agora, em nosso uso em to cut hook, simplesmente retornamos essa API. Mas aqui, temos que obter um parâmetro em nossa função de mutação para esse ID e quantidade Aqui, também, temos que agrupar nossos parâmetros em objeto. Vou explicar para você o porquê em apenas um segundo. Agora, após nossa função de mutação, o que adicionaremos, certo, adicionamos a propriedade de sucesso e passamos aqui a função de retorno de chamada Agora, como eu disse, aqui temos duas opções. Podemos invalidar os dados atuais do cartão ou atualizar os dados do cache Na seção anterior, atualizamos nossos dados do vendedor de capas porque nossos novos dados do vendedor não estão adicionando o back-end do espaço reservado Jasen Mas aqui, nossos dados de gato nos colocarão em nosso back-end. Então, em vez de atualizar os dados do caso, podemos simplesmente invalidar nossos dados atuais Aqui, ao invalidar os dados atuais do cartão, garantimos que nosso usuário obtenha os dados atualizados do cartão Então, aqui, temos que usar o cliente de consulta e como podemos fazer isso da maneira certa? Ao chamar, use o cliente de consulta na parte superior e simplesmente armazene-o em uma variável chamada cliente de consulta. Agora, em nosso próprio sucesso, adicionamos consultas inválidas ao ponto do cliente de consulta E dentro disso, temos que objetar qual propriedade da chave de consulta e qual chave queremos que invalide corretamente Invalidamos o carrinho, salvamos as alterações e voltamos ao nosso componente do aplicativo Agora, aqui no topo, após os dados de uso, chamamos nossa função use at to cart. E sabemos que isso retornará a variável de mutação. Então, armazenamos isso em uma variável chamada mutação de cabeça para carrinho Agora, na parte inferior, precisamos apenas chamar a função mutate usando a variável de mutação head to cart Agora vamos comentar esse código e simplesmente chamamos aqui a função head to cart mutation dot mutate. Agora, o que queremos passar no primeiro parâmetro. Podemos verificar isso aqui em nossa função de mutação. Veja, precisamos passar o objeto com ID e quantidade. Então, voltando ao nosso componente, aqui adicionamos objeto e ID ao ponto do produto, ID de sublinhado e quantidade à quantidade Agora você pode perguntar por que passamos aqui o objeto? Podemos passar separadamente o ID e a quantidade? Não, isso não funcionará porque como vimos na seção anterior na função silenciada, temos que passar todos os nossos parâmetros na primeira posição na segunda posição, podemos adicionar objetos de configuração sem sucesso e sem propriedades de erro Aqui, já adicionamos sucesso em nossa função de mutação de uso Não precisamos disso aqui. Aqui, precisamos apenas de uma função de seta de erro. O que faremos em caso de erro. Vamos reverter nosso cartão se algo der errado na API Head to Cart Veja, aqui já temos um método de despacho para reverter a matriz de cartões Então, simplesmente copiamos e colamos aqui, e pronto. Anteriormente, usávamos a variável de contexto porque retornávamos dados sobre a função de mutação Mas aqui não temos mutação, então podemos fazer isso diretamente Salve as alterações e pegue a engrenagem. Agora, na página de produtos, clicamos no botão Adicionar ao carrinho e nosso aplicativo travou Deixe-me ver no console. Veja, aqui não podemos usar a variável do produto antes da inicialização Aqui temos um erro em nosso arquivo redutor de cartão. Abra o arquivo redutor de cartão e, em nossa caixa direta para o carrinho, aqui estamos usando o produto para sublinhar o ID antes de inicializarmos Vamos mover isso antes desta linha, salvar as alterações e dar uma olhada. Aqui, recebemos outro erro API Head to Cart , que removemos. Também precisamos remover essa entrada do nosso componente do aplicativo. Salve isso e agora funcionará. Vamos clicar no botão “Vá até o carrinho”. Nada acontece. Deixe-me dar uma olhada nas ferramentas de desenvolvimento de consultas. Vamos às mutações e aqui podemos ver que temos um erro. Vamos verificar esse erro. Como sabemos nesta propriedade on error, aqui obtemos nosso erro e simplesmente o console dot registra esse erro. Salve isso e abra o Console. Clique no botão Carrinho e aqui obtemos nosso erro e vemos que está informando que o cliente da API não está definido. Ah, esquecemos de inserir o cliente da API em nosso arquivo de cabeçalho de uso, e é assim que resolvemos problemas Salve as alterações e dê uma olhada. Deixe-me fechar tudo isso e clicar no botão “Vá para o carrinho”. Veja aqui que está funcionando, mas está demorando para ser atualizado porque não aplicamos uma abordagem otimista Agora, se entendermos que a abordagem otimista é basicamente exibir as alterações em nosso site antes de chamar nosso EPI Se a solicitação da API for concluída com êxito, deixaremos nossos dados como estão ou os reconectaremos do servidor para confirmação E se a solicitação de API apresentar erro , reverteremos nossos dados Simples assim. Agora, aqui, só precisamos atualizar os dados do nosso cartão local antes de chamar a API. Podemos fazer isso usando dois métodos. Primeiro, temos que usar a função mutate, mas dentro dela, temos que escrever a mesma lógica que escrevemos em nossa cabeça no redutor de carrinho Então, em vez de usar mutate, podemos simplesmente enviar aqui ação com o tipo de ação de cabeça para o carrinho Veja aqui que já temos essa função de despacho, copie isso e cole antes de chamarmos a função mutate, simples assim Agora também podemos remover esse código de comentário, salvar as alterações e dar uma olhada. Veja, agora temos uma abordagem otimista. 212. Mutação para remover do carrinho: Agora, vamos adicionar uma mutação ao nosso recurso de remoção do cartão. Você também pode fazer isso como exercício e tentar implementar o recurso de remoção do cartão. E então qual é a solução? Então, aqui criamos um novo arquivo chamado use remove from cart dot js. Dentro disso, criamos uma função, usamos remover do carrinho igual à função de seta e, no final, exportamos o padrão, usamos, removemos do Agora, aqui retornamos a função de mutação de uso e, dentro dela, passamos o objeto de configuração E a primeira propriedade é a função de mutação. E aqui temos que adicionar a API de remoção do cartão. Então, vamos ao arquivo Card Services e podemos cortar essa API e também remover essa função. Guarde isso. E em nossa função de mutação, aqui, retornamos essa API e adicionamos dados de método, resposta e pontos de resposta, e garantimos a importação do cliente de API de nossos utilitários porque eu esqueci de importá-lo muitas vezes quando copio a API de Depois disso, adicionamos a propriedade de sucesso. Aqui, adicionamos a função de retorno de chamada e, dentro dela, temos que inválir nossa consulta de cartão Precisamos aqui do cliente de consulta e, para isso, precisamos do cliente de consulta. Na parte superior, chamamos use query client function e armazenamos em uma variável chamada query client. Agora vamos consultar o cliente dot Invalidar consultas. Dentro disso, adicionamos Objeto com chave de consulta ao carrinho. Salve esse arquivo e, em nosso componente de aplicativo, após nosso uso no TCAT Hook, chamamos use remove from card Hook e o armazenamos em uma variável chamada remove from card mutation Na parte inferior, em nossa função remover do carrinho, após essa função de despacho, adicionamos a função remover do carrinho de mutação de pontos E dentro disso primeiro, passaremos o objeto de parâmetro, que é nosso ID. Ei, adicionamos o parâmetro ID em nossa função de mutação? Deixe-me verificar isso. Veja, aqui eu esqueci de adicionar o objeto de desestruturação e obter o ID como parâmetro Salve isso e volte para nosso arquivo. Agora, depois do nosso objeto de parâmetro, adicionamos mais um objeto no qual podemos adicionar propriedades. Então, adicionamos erro e passamos a função de erro e, dentro dela, queremos simplesmente reverter o estado do nosso cartão Portanto, podemos copiar essa função de despacho daqui e também podemos copiar essa função de erro de ponto torrado Acho que isso vai ajudar. Então, nós os colocamos em nossa própria função de erro. Agora podemos remover essa chamada de API antiga. Nós não precisamos disso. Além disso, gosto de adicionar essa notificação de erro ts na API Head to Cart. Salve as alterações e dê uma olhada, reprima a página. Aqui temos um erro. Vamos consolar isso. Aqui estamos obtendo que nossos serviços de cartão não fornecem uma exportação chamada remove from card API. Ou esquecemos de remover a importação da nossa API de remoção do cartão. Remova isso. Salve esse arquivo e nosso recurso de remoção do cartão funcionará bem. Agora vamos passar para nossa última mutação, que é a carta de atualização 213. Mutação para aumento e diminuição: Agora vamos implementar nossa última mutação, que é para aumentar e diminuir Então, primeiro, criaremos ganchos separados para ambas as APIs e, em seguida, os chamaremos em nosso componente de aplicativo Então, em nossa pasta de ganchos de cartão, criamos um novo arquivo chamado use increased product dot JS e, como você sabe, primeiro criamos uma nova função chamada use increase product com a sintaxe da função de seta e, no final, simplesmente exportamos o padrão, essa função de uso aumentado do produto Agora, dentro dessa função, retornamos use mutation hook e adicionamos nosso objeto de configuração dentro dela Aqui, adicionamos a função de mutação à função de seta e precisamos aqui de uma API de produto aumentada Então, vamos ao arquivo de serviços do cartão, cortamos essa API de aumento e a colamos em nossa função de mutação Por fim, temos que adicionar o método dot VN e temos dados de pontos de resposta e retorno . Simples assim. Agora, aqui precisamos desse ID do produto. Então, aqui obteremos o objeto com parâmetro ID e garantiremos que passaremos em nossa função de mutação no componente do aplicativo Além disso, importamos aqui o cliente de API. Agora, vamos adicionar outra propriedade chamada em caso de sucesso e passamos a função de retorno de chamada aqui Dentro dessa função de retorno de chamada, precisamos do cliente de consulta Então, antes de nossa declaração escrita, adicionamos Cs query client igual a aqui que chamamos use query client function Você pode ver com que facilidade estamos fazendo mutações em nosso aplicativo Isso só o convencerá quando você o implementar pela primeira vez. Depois disso, você o adicionará facilmente. Eu sei que você já completou essa lógica de gancho enquanto eu falo. Então, deixe-me também completar esse código. Aqui, simplesmente adicionamos consultas inválidas do ponto do cliente de consulta e, dentro dela, passamos o objeto de configuração com chave de consulta de propriedade e passamos aqui o cartão, que é o dado que queremos Agora, aqui, noto uma coisa na diminuição da API do produto só precisamos alterar essa API e esse ponto que possamos criar uma API comum para aumentar e diminuir. Acho que será mais benéfico. Em primeiro lugar, mudaremos o nome do nosso arquivo para us updcard dot js Bom. Além disso, alteramos o nome da função, selecionamos isso e pressionamos F dois no teclado e, aqui mesmo, usamos o cartão de atualização. Agora, aqui em nosso parâmetro de função de mutação, após nosso ID do produto, adicionamos também o tipo de atualização E no local desse aumento, adicionamos CliBackets em dólares, digitamos, salvamos as alterações e, em nosso componente de aplicativo na parte superior, primeiro removemos essas duas APIs dos serviços de cartão, não queremos que agora em nosso componente, após nosso uso removido do cartão, chamamos nosso gancho use update card e o armazenamos em uma nova variável chamada Update card Agora role para baixo até a função do cartão de data. Aqui na condição I, temos que aumentar o produto. Então, aqui chamamos de update card mutation dot mutate. E no primeiro parâmetro, o que adicionaremos escreva, objeto com parâmetro. Você está indo muito bem. Então, aqui adicionamos um objeto com propriedades de ID e tipo. Lembre-se, aqui estamos usando objetos porque temos vários parâmetros para a função de mutação Agora, depois do nosso objeto de parâmetro, passamos outro objeto para uma propriedade de erro. E passamos aqui a função de retorno de chamada e, dentro, basta mover essas duas linhas Agora vamos remover essa chamada de API antiga. Além disso, aqui podemos ver que, para essas duas funções, essas duas declarações serão as mesmas. Só precisamos de condições para essa atualização de quantidade. Assim, podemos mover esse cartão de despacho e atualizar a linha de mutação do cartão após essas duas condições if e também remover o cartão de despacho e chamada de API da segunda Salve as alterações e também podemos remover o arquivo de serviços do cartão do nosso projeto. Não precisamos mais disso. Agora vamos verificar nossa implementação. Veja, nossa função de aumento e diminuição também está funcionando bem. É assim que implementamos mutação em nosso projeto de cartucho, e isso definitivamente melhorará o desempenho do Como mostro no início, aqui estão as comparações entre o antes e o depois. Podemos ver claramente que, após readquirição, o desempenho do nosso projeto é muito Então, muito obrigado por assistir a esta seção completa. 214. Seção 19 Implantação: Agora está na hora. Concluímos nosso grande projeto, que é o aplicativo de comércio eletrônico Card Wish Atualmente, nosso projeto está sendo executado no host local, então vamos implantá-lo na Internet. E depois disso, você pode compartilhar diretamente o link do site com seus amigos e adicioná-lo ao seu currículo ou portfólio. É muito simples. Então, vamos começar o processo de implantação. 215. Início da implementação: Agora vamos começar nosso processo de implantação de aplicativos. Então, aqui em nosso projeto, temos duas partes, backend e front-end Sem back-end, nosso aplicativo de front-end não é nada. Então, temos que implantar essas duas partes. Usaremos render para nosso back-end e, para front-end, usaremos o Netlify Esta é minha escolha pessoal para implantação. Se você vai trabalhar em alguma empresa, escolha do serviço é de seu gerente ou cliente, pois eles também precisam ver o orçamento e as instalações. Primeiro, faremos o upload do nosso código no Github e depois conectaremos nosso repositório Github aos Não se preocupe com isso. É muito simples. Explicaremos todas as etapas de forma simples e fácil. Se você quiser implantar o aplicativo react sem back-end , pode pular as próximas três lições e preparar diretamente o aplicativo react para Mas antes disso, você precisa fazer o upload do seu projeto no Github. Agora, o motivo pelo qual também implantamos o back-end neste projeto é que não precisamos iniciar nosso servidor local quando acessamos nosso aplicativo react Em nossos dois primeiros projetos, só podemos implantar nosso front-end porque, nesses projetos, não temos nenhum back-end ou banco de dados 216. Adicionando o MongoDB Cloud: Portanto, atualmente em nosso back-end, temos o banco de dados MongoDB local Agora, à medida que implantamos nosso aplicativo, tanto no front-end quanto no back-end, nosso aplicativo pode ser acessado por qualquer usuário, mas nem todos os usuários têm o Mongo Dibe E também, isso não é uma coisa boa. Os dados do nosso aplicativo devem permanecer sincronizados para todos os usuários. Portanto, temos que criar nosso banco de dados Mongo Db na nuvem. Com isso, todos os usuários usarão o mesmo banco de dados. Então acesse mongodb.com e simplesmente se inscreva com sua conta e simplesmente se inscreva com sua O registro levará apenas 1 minuto. Eu já me inscrevi, então recebo essa interface. Agora, a partir daqui, clique em Novo projeto e forneça o nome do seu projeto, que é CAT Wish, e clique em Avançar. Agora, a partir daqui, você pode adicionar membros da equipe ao seu projeto. Basta clicar em Criar projeto. Agora, clique em Criar banco de dados. Aqui, você pode ver como um plano. Simplesmente acessamos a versão gratuita e clicamos em Criar. Agora, aqui temos nosso nome de usuário e senha para nosso banco de dados. Então, primeiro de tudo, eu copio o nome do usuário e na nota paga, nós o colamos. Depois disso, copie também essa senha aleatória e cole-a também. Essa é a etapa mais importante. Agora clique em criar usuário. Em seguida, temos que dar acesso à Rede, que pode ler e gravar dados em nosso banco de dados. Então, selecionamos aqui, concedemos acesso à rede a todos. Não se preocupe com isso. Basta clicar em Concluir e fechar. Vá para o banco de dados. Agora só precisamos dar acesso à rede para todos. De qualquer lugar, o usuário pode acessar nosso banco de dados e obter produtos dele. No lado esquerdo, vá para o Acesso à Rede. Aqui temos nosso endereço atual. Clique em Editar e simplesmente clique em permitir acesso de qualquer lugar Isso definirá nosso endereço como 0000, que é acesso para todos, e clique em Confirmar Isso levará algum tempo e verá que está ativo. Bom. Portanto, nosso banco de dados está pronto. Agora só precisamos conectar esse banco de dados ao back-end do nosso nó. Então, volte para a guia do banco de dados e simplesmente faça o Cconnect. Agora, gostamos da opção de conexão do aplicativo. E aqui temos as etapas para conectar o aplicativo Node. se preocupe, basta copiar este link do banco de dados e, em nosso código Vs de back-end, abrir o arquivo dot NV e, no local dessa tinta local do Mongo Db, colamos nossa tinta Mongo Di B colamos nossa tinta Mongo Di Agora abra não emparelhado e copie nossa senha. Volte ao código Va, e temos que colar nossa senha no local dessa senha. Observe que aqui também temos que remover esses colchetes angulares Salve este arquivo e terminamos aqui. Vamos verificar se está conectado ou não. Em nosso terminal, interrompa este servidor em execução com Control plus C ou Command plus C e, novamente, escreva o ponto de índice do nó Js e pressione Enter. Isso levará algum tempo e veja aqui conectamos o banco de dados. Agora, novamente, pare esse script e execute node products dot js, porque atualmente não temos dados nesse novo banco de dados em nuvem e C recebemos uma mensagem de sucesso. Então, volte ao nosso site MonGov e clique em Procurar coleções E veja, aqui temos nosso banco de dados e coleções. Portanto, conectamos com sucesso banco de dados Mongo Debi Cloud ao nosso aplicativo de nós 217. Como fazer upload de projetos no github: Agora, vamos ver como podemos enviar nosso projeto para o Github. Se você não conhece o Github, em resumo, é um site que permite aos desenvolvedores armazenar, compartilhar e colaborar no código com Github permite que os desenvolvedores criem repositórios, ou podemos chamar repositórios onde eles podem armazenar seu código e acompanhar as alterações E essa é a melhor e mais fácil maneira de as equipes trabalharem juntas em um mesmo projeto sem sobrescrever o código umas das outras Portanto, há muitas maneiras de fazer upload de código no Github. Veremos a maneira mais fácil e simples, que é usando o aplicativo de desktop Github Então, passo número um, baixe o aplicativo de desktop Github. Então, acesse nosso navegador, pesquise aplicativo de desktop Github e abra este link do Github. Agora, clique no botão Download. Isso levará algum tempo. E depois de concluir isso, abra a configuração e nossa instalação será iniciada. Se você abri-lo pela primeira vez, precisará fazer login com sua conta do Github Então, para mostrar isso, eu removo minha conta do Github do aplicativo Github. Agora, etapa número dois, temos que fazer login com a conta do Github Então, para Login, acesse arquivos e abra Opções clique no botão de login no Github e continue com o Navegador Portanto, ele nos redirecionará para o site oficial do Github. Agora preencha seu nome de usuário e senha sua conta do Github e clique em entrar Agora clique na área de trabalho do Open Github e ela será redirecionada automaticamente para o nosso aplicativo Não se preocupe. Você só precisa configurar pela primeira vez. Agora vamos verificar se estamos logados ou não. Então, novamente, vá para os arquivos e abra as opções. E nas contas que podemos ver aqui, temos nossa conta no Github Agora vá para a opção Git e, a partir daqui, podemos definir nosso nome e e-mail para o nosso Github Então, quando colocarmos cool no Github, outros membros da equipe verão esse nome e e-mail Certifique-se de selecionar seu e-mail oficial aqui e clicar em Salvar. Agora, etapa número três, adição do repositório local. Então, para adicionar nosso código ao repositório, acesse o arquivo e selecione Adicionar repositório local E a partir daqui, selecione o caminho da nossa pasta de back-end. E selecione essa pasta. Agora aqui diz para criar um novo repositório, então clique nesse link e aqui temos que passar o nome do nosso repositório Não se preocupe com isso, basta clicar em Criar repositório e clicar em Criar repositório Agora, vamos verificar se tínhamos o caminho certo ou não. Círclkon mostrando Explorer e C, nossa pasta Ben está aberta Então feche-o e simplesmente clique neste repositório público. A partir daqui, podemos alterar nome e a descrição do nosso repositório, isso não é um back-end para o aplicativo de cartwage E também a partir daqui, podemos selecionar a privacidade do nosso código. Para nosso uso, por favor, não o torne privado. Desmarque essa caixa e clique em Publicar repositório. Isso levará algum tempo e pronto. Vamos ver isso no Github. Clique em Exibir no Github e veja aqui que podemos ver nosso código de back-end Baixo, você pode ver como é simples fazer upload de código no Github. Agora vamos também publicar nosso front-end. Então, de volta ao aplicativo Github, vá até o arquivo e clique em Repositório Local Selecione o caminho do nosso projeto de front-end. E clique em Criar repositório. Novamente, clique em Criar repositório e simplesmente clique em Repositório publicado Aqui, podemos mudar nosso apoame para CartwisFront end. Você pode escrever o que quiser. Depende totalmente de você. Na descrição que adicionamos, este é o aplicativo React para CartWishPject Vamos marcar essa caixa de seleção para tornar nosso repositório público. Podemos fazer isso no site do Github. Clique em publicar e pronto. Vamos abri-lo no Github e ver como o front-end também é publicado no Github 218. Implantando backend: Agora, vamos implantar nosso back-end primeiro. Então, acesse render.com e aqui podemos ver o processo de implantação instantânea Mas antes de tudo, registraremos nossa conta aqui. Podemos usar o Google ou o Github para registro, ou podemos simplesmente usar e-mail e senha Ele nos enviará um e-mail de ativação e, nesse e-mail, receberemos o link de ativação. Então, eu copio esse link daqui e colo em nossa URL. E obtemos essa placa de teste. Não se preocupe com isso. Basta clicar no botão Novo. E aqui selecionamos serviços da web. Agora precisamos conectar nossa conta do GitHub. Cl C Conecte o Gitub e faça login com sua conta do Gitub. Certifique-se de usar a mesma conta do Github na qual você publica seu código de back-end Agora vamos instalar o render em nossa conta do Github. Nessa página, podemos selecionar qual repositório queremos adicionar em nossa conta Render Você pode adicionar todo o repositório, mas, na minha sugestão, selecione somente selecionar uma opção de repositório Agora, a partir daqui, podemos selecionar o repositório. Então, selecionamos o backend do Cardwig e clicamos em Instalar. Agora, isso nos redirecionará para a página inicial do painel e clicaremos novamente em Novo e selecionaremos serviços da web Veja, agora chegamos aqui ao nosso repositório. Basta clicar em Conectar e obtemos aqui nosso formulário. Agora, primeiro de tudo, adicionamos aqui o nome do nosso aplicativo, que é backend Cartwig Em seguida, podemos selecionar região e a ramificação do nosso repositório Github Agora, para o diretório raiz, adicionamos ponto. Em seguida, temos o ambiente definido como node. Não mude isso. E para o comando build, escrevemos NPM install E para o comando start, simplesmente adicionamos node index dot js. Agora, na parte inferior, selecionamos nosso tipo de serviço , que definimos como gratuito. Agora clique neste menu suspenso Avançado e selecione Adicionar arquivo secreto e dê a ele um nome de ponto Agora, de volta ao nosso projeto Bend, e nele, temos o arquivo ENV no qual temos nossas variáveis secretas Basta copiar todo o código no site da Render, clicar no conteúdo e colar nosso código aqui. Agora, basta clicar em Criar pesquisas na web e ver como o processo de implantação é iniciado. Levará algum tempo para ser bem-sucedido, e agora está sendo implantado E vejo que o servidor está rodando nesta porta e recebo um erro na conexão Mongo Deb. Deixe-me verificar isso. Acho que cometi um erro ao adicionar um arquivo secreto. Então, aqui vamos para a guia Ambiente, e aqui, deixe-me verificar o conteúdo do arquivo. Isso é bom. Oh, aqui eu insiro o nome do arquivo errado. Temos que adicionar pontos ENV. Salve as alterações e volte para a guia Registros. Aqui, clique na Opção de implantação manual e selecione o comando Implantar mais recente. Ele implantará novamente nosso aplicativo. Aqui, a construção e a implantação são bem-sucedidas e, veja, aqui conectamos o banco de dados. Vamos verificar isso. Então, na parte superior, aqui obtemos nosso URL de back-end, copiamos isso e, na nova guia, paginamos essa barra de URL API slash Products e veja, aqui obtemos os dados de nossos produtos Por isso, implantamos nosso back-end com sucesso. Agora, preparamos nosso front-end para implantação. 219. Preparando nosso aplicativo React para implantação: Agora, vamos preparar nosso aplicativo react para implantação. Portanto, em nosso aplicativo atual, estamos chamando nossa API com SDTP local host 5.000, mas esse é o back-end local Precisamos chamar a API com o URL do nosso aplicativo implantado, que vemos em nossa última lição Então, em nosso aplicativo Carts React, abrimos nosso arquivo de cliente de API e aqui definimos nossa URL base para chamadas de API Além disso, precisamos atualizar nosso URL base para nossas imagens. Definiremos nosso URL base em um único local e, ao usá-lo, substituiremos nosso URL antigo em todos os lugares. Então, em nossa pasta de origem, criamos um novo arquivo chamado config dot JCN e aqui adicionamos colchetes Cul e adicionamos aqui a URL backend da propriedade E, em termos de valor, copiamos nossa URL de back-end e a colamos aqui Salve esse arquivo e agora substituiremos todos os URLs por ele. Então, primeiro de tudo, abra o arquivo dot Js do cliente api e, na parte superior, importamos o Config de Aqui vamos uma pasta até o ponto de configuração jCn. Agora vamos remover esse URL base, e aqui adicionamos marcações e adicionamos aqui colchetes de dólar Cal, configuração, URL BN e, depois disso, API Salve isso e abra o componente do cartão do produto na parte superior, onde importamos a configuração Aqui vamos para folders up, Config touch e file Agora, em nosso JSX, vamos substituir esse URL por colchetes Cul, URL configuração Salve esse arquivo e abra um único componente do produto. Aqui no topo, importamos novamente a configuração de Aqui vamos para folders up, config dot JS e file Agora ela gosta do URL de back-end e pressiona Control plus D ou Command plus D e o substitui por colchetes Cul e config Salve esse arquivo e abra a barra lateral do produto. Na parte superior, novamente, importamos Config de to folders up, config dot js e file Agora, vamos substituir esse URL dollar Culiackets config Salve este e último componente da página do cartão aberto e, na parte superior, importamos a configuração de duas pastas acima, configuração, toques Agora vamos substituir esse URL por dollar Coli Brackets, config dot Bn URL e salvar esse Agora, vamos enviar nosso código atualizado para o repositório Github. Então, um aplicativo de desktop Github e selecione nosso repositório de front-end como atual E aqui podemos ver todas as alterações que fazemos em nosso código. Aqui, envie uma mensagem, atualize o URL do Ben e clique em Commit to Maine e, em seguida, basta enviar origin, e pronto. 220. Implantando o aplicativo React: Agora vamos implantar nosso aplicativo react no Netlify. Então acesse tontlfy.com e clique em inscrever-se para se registrar. Aqui eu me registro com minha conta do Github e isso pedirá autenticação Então, clique em autorizar o Netlify e redirecionaremos para a página Aqui temos que responder a algumas perguntas comuns sobre o Netlify Aqui eu seleciono o trabalho. Depois disso, seleciono outra coisa e aqui inserimos o nome do nosso aplicativo, Cartwis Agora, responda rapidamente a essas perguntas. Isso não importa. Podemos mudar isso mais tarde. No final, clique em continuar para implantar. Agora, aqui vamos usar o Deploy com o Github, e isso solicitará novamente a autorização Permita, da mesma forma que autorizamos nosso Github a renderizar. E depois disso, simplesmente obtemos o processo de instalação do Netlifi Então, aqui selecionamos apenas o repositório selecionado e, na parte inferior, selecionamos nosso aplicativo final CartWGFront e Agora, a partir daqui, podemos ver que nosso repositório foi adicionado ao Netlifi, clique nele e ele simplesmente solicitará a implantação de nosso projeto Então clique nele e nosso código começa a ser inicializado. Você pode ver aqui o início da instalação de dependências. Isso levará pouco tempo e, depois disso, ele será construído e implantado e todo o processo estará concluído Aqui, recebemos a mensagem de sucesso do Deploy, e o nome do nosso aplicativo está definido como isso por enquanto. Não se preocupe com isso. Basta clicar em Começar. Aqui podemos ver que obtemos nosso site, e este é o link do nosso site. Clique nele e veja como obtemos nosso aplicativo de reação. Aqui, o URL do nosso aplicativo é um URL aleatório. Não podemos compartilhar esse link com nosso cliente, certo? Então, de volta ao nosso site Netlify, e aqui temos as configurações do site e também as configurações do domínio, então clique nas configurações do domínio e, a partir daqui, clique em Opções e edite o nome do site Agora, definimos o nome do nosso site para algo único, que ainda não é um rótulo Então, para você, você precisa adicionar um ou dois cartuchos ou outra coisa para torná-lo único Salve esse nome e agora o URL do nosso site foi alterado. Implantamos com sucesso nosso aplicativo no Netlify de forma totalmente gratuita Se você quiser remover este aplicativo netlify dot, precisará conectar seu próprio domínio a este site Se você vai usar esse aplicativo apenas para mostrar seu trabalho como desenvolvedor, esse nome está ok. Agora, deixe-me mostrar como você pode simplesmente atualizar seu projeto. Então, aqui em nosso site, queremos alterar esse site, título e ícone do Fab Então, voltando ao VSCode, e em nosso ponto de índice STMLFle no local deste título, adicionamos o aplicativo de comércio eletrônico moderno CatWish Agora, em nossa pasta SS, temos o arquivo Cartwishpvicon Então, basta movê-lo para uma pasta pública. E no lugar desse arquivo SVG, simplesmente adicionamos Cart Wig favicon dot SVG. Salve as alterações. E agora vamos implantar essas mudanças. Portanto, para atualizar o aplicativo implantado, basta enviar nosso código para o Github e o Netlify detectará automaticamente as alterações, e é por isso que estamos reagindo ao projeto Então, de volta ao aplicativo Github dextra. E aqui passamos nossa mensagem de confirmação, que é o título da atualização, ícone fabuloso, e a confirmação para a página principal E, no final, basta pressionar origin. Agora, em nosso site Netliive, vá para a seção de implantação, e aqui podemos ver que ela está sendo construída e, no final, o site é publicado Vamos abrir o site e ver nosso ícone ser atualizado. Então é assim que implantamos nossos aplicativos de reação. Você pode ver que o processo de implantação é muito simples e fácil. Você só precisa fazer o upload do seu código no repositório Github e, usando o Netlify, implantaremos nosso aplicativo rapidamente E para atualizar nosso aplicativo, basta enviar as alterações para o Github e, em dois a 3 minutos, nosso site será reconstruído de forma simples 221. Obrigada!: Tudo bem, esse é o fim desse curso. Foi uma boa, certo? Foi longo, mas você pode ver os projetos que você criou e também parabéns por chegar até o fim Sei pelas estatísticas que poucas pessoas chegam aqui, mas você conseguiu. Estamos aqui no final deste curso. Muito obrigado e sim, até mais. Tchau.