Guia completo para consulta RTK com o React JS

1. Introdução: Olá e bem-vindo a este curso, guia completo para consulta RTK com React js, pequenos danos, alguma iteração. E serei seu instrutor neste curso. E neste curso, vamos aprender ferramenta muito poderosa para busca e armazenamento em cache de dados chamada consulta articulada. Se você for um desenvolvedor do React, talvez esteja usando o roteador como um gerenciamento de estado para que seu aplicativo React mantenha o aplicativo. E você também pode estar usando o middleware Redux tongue ou redox logger para lidar com o efeito desejado em seu aplicativo React. Então, definitivamente, a equipe de redact surgiu com a nova abordagem para escrever lógica. Portanto, a idade da consulta do artigo introduzida pelo mesmo redutivo para tornar o ajuste de dados e o armazenamento em cache com o redact o mais fácil possível. E ele é construído sobre o kit de ferramentas redact. Isso significa que você não precisa instalar pacote adicional para trabalhar com o Arctic jQuery, basta adicionar o pacote Toolkit em seu aplicativo React. Com a ajuda da consulta de artigos, nossa lógica Rudolf será mais relacionável e concisa. Agora, deixe-me dar-lhe a breve visão geral de Rudolf para aqueles de vocês que não sabem o que é. Portanto, a falha de redact é biblioteca de gerenciamento de estado que usamos em nosso aplicativo React, assim como você usará em seu aplicativo. Não apenas com o React, mas é muito popular com a biblioteca React. Então essa é a visão geral do reduto. Então, vamos entender o que vamos aprender neste curso. Primeiro, começaremos com alguns conceitos teóricos. Como tentaremos entender o problema central do React e por que usamos Redux com o React. Então, vamos entender como o que é um kit de ferramentas e qual APA em colado dentro da consulta de artigo. Todos esses conceitos vamos entender com a ajuda da puberdade. E depois disso, construiremos nosso aplicativo React de crédito com a ajuda da consulta RTK e do JSON corrigido. Com a ajuda deste aplicativo, você vai entender como escrever uma série de endpoint com a ajuda da API de consulta RTK, você aprenderá a fazer solicitações de API que recebam, colocam, postam e excluir. Isso atingiu o aplicativo geral que vamos criar neste curso com a ajuda do jQuery difícil. Agora, vamos falar sobre o requisito básico antes de se inscrever na discórdia. Este curso é projetado de tal forma que qualquer pessoa pode participar deste curso que esteja interessado em aprender o conceito Redux moderno, você só precisa ter uma compreensão básica de HTML, CSS, JavaScript, bem como Reaja o conhecimento básico. E no final deste curso, você terá compreensão completa do conceito de consulta RTK e também poderá implementar consulta articulada em qualquer projeto React viciante. Você também poderá substituir se a lógica de redação antiga presente em seu projeto React com esta consulta de artigo, o que você está esperando para participar deste curso para aprender todo esse conceito moderno? E se você tiver alguma consulta ou sugestão, então você sempre pode entrar em contato comigo. Vou tentar o meu nível melhor para resolver toda a sua consulta. Então é isso. Do meu lado, verei você na seção do curso. 2. O que é Redux e por que usamos o de volta?: Neste vídeo primeiro, entenderemos o problema central da gestão imobiliária React js. Temos nosso principal componente de aplicativo. Então, obtivemos nosso subcomponente. Se quisermos alterar um texto , não podemos fazer diretamente. Em vez disso, tenho que informar um pai e alterar o texto lá. E se eu tiver um componente adicional , ele ficará ainda mais complexo. Portanto, temos uma leitura sobre a qual tem uma abordagem diferente. Então, aqui temos nossa visão, nossa aplicação e, neste aplicativo, em qualquer componente, será despachado e agirá. Em seguida, faça a marca através do redutor. Reducer trabalho ou tarefa bastante simples. Isso tomará uma ação, então levará todos os manipulados e dará um novo estado. Essa manipulação acontecerá, asse no imutável. Isso significa que não mudará o vetor antigo. Ele tomará todo o circuito como base e, em seguida, criará uma nova cópia de todos os retratados com as mudanças na ploidy permaneceram intocadas. Acabamos de criar um novo levantado e devolver esse novo estado. Isso imutável oferece um estado exclusivo em seu aplicativo. Agora estamos recebendo um novo estado pode ser reduzido , então ele será armazenado em uma loja. E teremos apenas uma loja em nosso aplicativo. Este vetor tem uma tarefa simples, empurre em direção ao nosso estado. É por isso que se chama Restore. Você pode ter um redutor múltiplo, mas teremos apenas um armazenado em nosso aplicativo. Em seguida, nosso aplicativo assina esta loja. Sempre que estiver datado, seja atualizado. Novo parque estadual para a loja. A loja enviará automaticamente para todo o componente e direcionado e o aplicativo será atualizado. Agora, voltemos ao exemplo anterior em que tínhamos nosso componente de aplicativo com outros componentes. E agora também temos uma loja. Agora, se quisermos mudar algo, o componente do usuário do MainComponent, então vamos despachar e agir. Em seguida, o estado o introduz. E então o caminho é caro para todos os componentes nesses dados, tudo sobre o que é reduzido e por que usamos Redux no React js. 3. O que é Redux-Toolkit ?: Então, agora vamos entender qual é o leitor total bom para liquidar também usa para gerenciar aplicativos if declarar um aplicativo React de forma eficiente. Ele forneceu algumas baterias incluídas conjunto de ferramentas para um desenvolvimento eficiente. Essas baterias incluíram o termo do conjunto de ferramentas, parecem um pouco chiques aqui, mas você entenderá esse termo mais tarde. Os roteadores já eram uma opção popular para gerenciamento de estados em nosso aplicativo React. Então, por que o kit de ferramentas redact é necessário? Com o kit de ferramentas redact, havia muito código necessário para configurá-lo, para otimizar esse nível básico. E, assim, muito código boilerplate, o que torna nosso código, vamos limpá-lo eficiente. Além disso, muitos pacotes precisam ser instalados para criar um aplicativo escalável. Com o redox tradicional, costumávamos escrever ação e redutor em arquivo separado. E isso se torna mais complexo quando nosso aplicativo e faz com que você resolva esse desafio, redação surgiu com um kit de ferramentas do leitor. kit de ferramentas Redact é uma abordagem melhor para escrever livrar-se da lógica. No geral, o leitor deve analisar seu período de redução e desenvolvimento, incluindo o leitor Corbett redigir bons parágrafos que eles acham que estão preenchidos para criar um aplicativo nativo. Portanto, o kit de ferramentas redact permite que os desenvolvedores escrevam código Redux simples e limpo. Portanto, isso é tudo sobre o kit de ferramentas redact e por que usamos com o React. Então, espero que você entenda esse termo extravagante agora que é um conjunto de ferramentas incluído na bateria. Então, isso é tudo sobre kit de ferramentas. Agora vamos entender esse leitor para ficar bem com um cenário básico. Suponha que tenhamos que criar um aplicativo de contador. Temos que gerenciá-lo ainda são cinco. Vou mostrar a vocês a abordagem tradicional com o redutor tradicional. Então, geralmente lemos redutor e acidente em um arquivo separado. Como você pode ver que aqui temos x e dot js em que temos dois x dez para incrementar o valor do contador ou diminuir o valor do contador e introduzir um arquivo dot js, temos uma lógica para incrementar um valor do contador ou diminua o valor do contador do Theta. Redact tradicional. Suponha que agora vamos ver como abordamos com o leitor para ficar bem. Na ferramenta redact, poderíamos reescrever nosso redutor e ação no mesmo arquivo. Você pode ver que escrevemos nossa ação no redutor sob a abordagem Criar fatia através da abordagem do kit de ferramentas. E você pode tornar o código muito mais conceito usando create. Tanto o redutor quanto eu podemos, podem ser escritos assim sob o live vendo esse código, definindo uma grade com ele e a ação se torna mais limpa. Os dados são procurados. Não há mais necessidade de usar a instrução switch para gerenciar a ação com seu produtor correspondente. E outra coisa que você pode ter, observe aqui, agora mudamos diretamente o valor na função redutora em vez de retornar um novo valor para atualizar. Isso realmente aconteceu porque a ferramenta de redação poderia usar a biblioteca que permite escrever a mutação logicamente, reduzindo. Isso é tudo sobre o kit de ferramentas do leitor com o cenário básico. 4. Entenda a consulta RTK: Agora vamos entender o que é consulta RTK. Rtk consulta uma poderosa ferramenta de rastreamento de busca de dados n. Ele é usado principalmente para buscar o servidor com de dados e seu cache, os dados para uso futuro. E aqui também é mencionado que ele foi projetado para simplificar casos comuns carregamento de dados em aplicativos da Web, eliminando o nicho de busca de dados e cache de lógica por conta própria. Aqui, não precisamos escrever lógica manualmente, carregando, lançando nossa parte de erro sempre que tivermos que fazer uma solicitação de API. Então, geralmente, o que aconteceu? consulta articulada cuidará de toda essa tarefa por trás da cena. consulta geral de artigos forneceu um conjunto de ferramentas poderoso para definir a camada de interface da API para nosso aplicativo. E você não precisa instalar um pacote adicional para trabalhar com a consulta de artigo porque a consulta do artigo é criada na parte superior da outra API no pacote do kit de ferramentas do leitor. Portanto, você não precisa instalar a consulta de artigo adicionalmente em seu aplicativo. Agora vamos ver qual APA, incluindo o arquivo de consulta RTK de cientistas para criar API. Portanto, o PI criativo é o núcleo da funcionalidade de consulta de artigo que permite definir um conjunto de endpoints. Descreva como recuperar os dados de uma série de endpoint, incluindo a configuração de como pescar transformar esses dados. E na maioria dos casos, devemos usar isso uma vez por. No geral, no VA criativo, definimos um endpoint diferente e diferente, você pode chamar série de endpoint. Isso é tudo sobre o criativo aqui. Agora vamos falar sobre a consulta base. Consulta baseada na fé. É um invólucro pequeno ao redor do ajuste. Para simplificar a solicitação. Dentro é preenchido com consulta, definirá o URL base para nossa API. Agora vamos falar sobre o provedor de API do provedor de API pode ser usado como provedor se você não tiver um reduto armazenado. Se não o tivermos armazenado em seu aplicativo. Assim, você pode usar esse provedor de API. Neste curso, não vamos seguir essa abordagem. Seguiremos a abordagem tradicional. Então, basicamente, trazemos o provedor da biblioteca React redact e envolvemos nosso componente de aplicativo com o provedor e passamos nosso restaurado para o componente do aplicativo. Esta APA forneceu uma abordagem que não vamos usar neste curso. Agora, vamos falar sobre o último que é o utilitário de ouvinte de configuração usado para habilitar a pesquisa sobre eles e refletir sobre o reconectado que temos aqui. Isso é tudo sobre a consulta do artigo. 5. Configuração do projeto: Pessoal, agora vamos configurar nosso projeto React. Vou usar o modelo TypeScript. Então, vamos copiar esse comando aqui. E agora vou para o meu diretório. Aqui. Vou abrir um prompt de comando e vamos colar esse comando. E vou alterar o nome do aplicativo. Então eu tenho corrente de hífen RTK. Vamos apertar Enter. Levará cerca de dois a três minutos para instalar toda a dependência necessária. Estarei de volta 12 toda a dependência que foi dito sobreviver. Nosso projeto agora está criado. E eu já abri esse projeto no Visual Studio Code. Vamos primeiro entrar no código VS e vamos abrir o arquivo package.json. Vamos ver o que temos em nosso arquivo package.json. Então você pode ver que já nos livramos um kit de ferramentas e um pacote dxdt Redux porque usamos esse comando para criar nosso projeto React. Se você estiver usando esse comando, não precisará instalar manualmente o kit de ferramentas do leitor e reagiu o ydx. É por isso que usei esse comando para criar nosso projeto React. Temos nosso kit de ferramentas redutoras e pacote de índice cardíaco. Agora, o que temos que fazer? Até agora? Vou fazer uma limpeza aqui um pouco. Portanto, não precisamos de pasta de recursos para este projeto. Vamos remover este. Todos nós, também não precisamos desta pasta do aplicativo. Digamos que remova este também. Um arquivo TSX de ponto de aplicativo. O que temos que fazer uma briga, vou remover todo esse conteúdo indesejado que não é necessário para o nosso projeto. Vamos remover este. Vamos manter esse título. Como se eu não gostasse da consulta RTK. Digamos que mova tudo isso. Vamos remover o arquivo de teste também. E um arquivo detalhado ou TSX. Blush para comentar aqui esta linha de código. E também deixei comentar este. Vamos descomentar isso mais tarde depois de configurarmos nossa ferramenta de redação, a grade nesta obrigação, e também comentar essa linha de importação e essa linha importante porque mais tarde vai exigir antes de fazermos o npm, instale alguns pacotes, vou para o diretório e vou instalar o pacote como React, roteador para baixo. E vou chamar de reativo também, porque vamos usar a notificação de torque neste projeto também. Então, qualquer método de erro, nossa mensagem de sucesso, vamos instalar esses dois pacotes primeiro. Enquanto isso, vou criar o arquivo db.json porque vamos usar o servidor JSON neste projeto. Vamos criar o arquivo db.json no diretório raiz. Aqui vou pagar alguns dados. Então acabei de pintar alguns dados iniciais que podemos começar nosso trabalho. E você também pode criar os dados da urina. Você precisa injetar nome add, você entrará em contato com um ID. Para executar este servidor JSON, temos que escrever um script em nosso arquivo package.json. Vou escolher um roteiro aqui. Você vê o script necessário para executar nosso servidor JSON. Jason cerebral vai ligar 5 mil portos. Vamos ver se nosso instalador de pacotes não. Então nosso pacote ficou alto. Agora, vamos fazer aqui e também vou cortar anúncios do servidor JSON. Bem, este é o nosso diretório do projeto e vou acrescentar mais um prompt de comando aqui. E eu vou fazer aqui e o servidor. Podemos acessar esse recurso neste URL. Então, vamos copiar esse URL. Por engano. Scott cancelar. Vamos iniciar este servidor Jetsons novamente. Podemos acessar esse recurso neste URL. Então, vamos copiar este. Vamos para o navegador. Você pode ver que podemos exibir todos os dados que temos em nosso arquivo db.json. Então, esses são nossos dados iniciais que coloquei no meu arquivo db.json. Estes são nossos dados iniciais que estão sendo exibidos em nosso navegador neste URL. 6. Estrutura: Então, agora vou colecionar sessão ou projetar. Vou criar algumas pastas aqui. Pasta Vou ter páginas. A próxima pasta que vamos ter generalizada. Próxima pasta, teremos o modelo porque estamos usando aqui TypeScript. Portanto, temos que criar um modelo para esses dados de contato. Agora, vamos fazer um tour sob a fonte. Então, vamos criar aqui se dor dot DS, não JS, porque estamos usando TypeScript, então pode ser TSX. Aqui, você receberá um erro. Até agora. Agora, o que podemos fazer aqui, exportar, const store. Podemos dar ao seu console o log de pontos a barra de erros. Agora, removeremos isso mais tarde. Agora, o que vou fazer, vou rejeitar essa nossa rota. Então, vou criar alguns arquivos aqui. Adicionado, vou criar o THF obtido editado. Aqui vamos usar o mesmo arquivo para adicionar o novo conteúdo ou atualizar o contato que sai. Para isso, adicionou-o. Também teremos um arquivo CSS para este caso, então eu adicionei o ponto CHS. Na próxima página, teremos a casa, na qual vamos exibir todo o contato em um componente de tabela. Para isso também, vamos usar o arquivo CSS. Então, home dot CSS. A última página que teremos em página inteira na qual vamos exibir um único detalhe de contato. Para isso também, vamos usar informações de arquivo CSS dot css. E por enquanto, vou gerar um trecho reativo aqui. E eu só vou dar o cabeçalho porque vou rejeitá-lo essa rota em nosso arquivo app.js. Vamos gerar esse trecho aqui também. Vai estar em casa. E vamos gerar um trecho em nosso arquivo txt de ponto de entrada também. Ele estará na íntegra. Vamos primeiro para o nosso arquivo app.js, que vou registrar toda essa rota do roteador React para baixo. Precisamos trazer o componente superior esquerdo. Precisamos aqui de rotas, rotas, navegador, roteador e vamos remover este. E aqui vou usar o roteador do navegador. Rotas em que vou rejeitar toda a rota da seca será a rota de casa. Estamos usando a seca do ano, embora não precisemos fornecer a palavra-chave exata. Então, aqui estamos usando a versão atualizada do roteador react para baixo. Você pode ver que em nosso pacote ou arquivo JSON reage com o Dr. Dom ficou amargo à vergência. Você verá que também não estamos usando o switch aqui. Estamos usando rotas e aqui não será componente, será o elemento. Podemos trazer nosso código VS do componente doméstico importar automaticamente esse componente para mim. Vamos copiar isso algumas vezes. Este será o contexto adicionar, adicionar. Vamos trazer o componente adicionado. Agora, este será o Editar contato. Vamos ler o contexto e, com base no ID, usaremos o mesmo componente, mas atualizando o contato de ejeção. A vida útil, teremos uma página de entrada na qual podemos ver os detalhes de contato único. Ele estará envolvido. E nós seremos o único contato. Ele será baseado no ID. Aqui. Vamos trazer o componente info. Vamos verificar no navegador se todos eles foram roteados, rejeitados ou não. Vamos para o navegador. Você pode ver essa rota doméstica chamada detector. Muito ruim em contato. Eles disseram que todo surjetivo, vamos verificar editar contato. No caso de entrarmos em contato, temos enfrentado por sua identidade. Portanto, ele renderizará a mesma página porque estamos usando a mesma página antes de adicionar o novo conteúdo ou atualizar o conteúdo existente. Agora vamos verificar as informações também em caso de falsa. Então, vamos fornecer o ID. Também foi rejeitado. Rejeitamos com sucesso nossa antiga rota neste aplicativo. 7. Configuração de consulta RTK: Agora vamos começar a trabalhar em nossa consulta RTK. Então, como você pode ver que em nosso arquivo db.json, já temos alguns dados iniciais. Vou escrever uma consulta para enfrentar todos os dados que temos em nosso arquivo db.json. Vou criar um arquivo aqui e colher a pasta. O nome do arquivo será como contextos, APA dot TSX. Neste arquivo, vamos criar uma série de endpoint com a ajuda de criar API a partir do kit de ferramentas. E temos que ir para Query e depois reagir. E temos que criar API e álbum muito baseado na fé, no qual forneceremos nossa URL base. E também temos que criar um modelo aqui. Então, será como modelo de ponto de contato, ponto ts. Nisso, vou criar uma interface para o nosso contato. Você pode ver que nosso conteúdo terá ID, nome, e-mail e contato. Vamos para este arquivo txt de ponto da API de contexto. Aqui. Vamos trazer essa interface da nossa pasta modelo. Contato. Agora, aqui vamos criar nossa série de endpoint com a API de criação de álbum , exportação, API de contatos. Vamos usar sua API. Aqui. Vou reduzir o caminho dela. Isso é necessário porque precisamos conectar esse serviço ao nosso código. Podemos fornecer apenas uma API de contexto de parte redutora. Aqui vamos ter nosso emparelhamento base no qual vamos especificar nosso URL base. E a consulta baseada na fé Thaddeus. Nosso URL base, http localhost. 5 mil. Depois disso, vamos criar um ódio ao endpoint. Vamos usar seu padrão. Depois disso. Vamos criar nossa consulta aqui. Consulta de ponto de contextos. Aqui. Vamos recuperar nossa consulta toda na forma de área de objeto. Temos que fornecer este modelo. E temos que especificar essa área porque nosso, nosso contato se tour em uma matriz de objetos em nosso arquivo JSON de ponto de banco de dados. Você pode ver isso aqui. É por isso que eu o tenho dividido. O segundo argumento será o fio porque não estamos passando nada no argumento. Ele será conectado. Dentro disso, vamos escrever uma consulta. E aqui estamos nós. Por favor, especifique nosso endpoint. Será contato. Essa consulta basicamente expõe um joelho. Espero que possamos pegar esse gancho de joelho assim. Da nossa API de contatos. O gancho do joelho será como uma consulta de contextos enormes. Seja qual for o nome que você vai te dar, vai expor um novo gancho assim. Vamos ver se você está dando aqui sobre os dados. Agora, nosso novo gancho se tornará EUA. Use consulta de dados, ok? Cabe a você qualquer que seja o nome que você vai dar. Portanto, a consulta será alterada. Agora será usar consulta de contextos. Espero que você esteja recebendo meu ponto aqui. Agora terminamos nossa primeira consulta, que é responsável por buscar os dados que temos em nosso servidor JSON. Temos que configurar nossa loja. Então, vamos remover esse pedaço de código e vamos trazê-lo configurado para o nosso kit de ferramentas. Armazenamento configurado. Também temos que trazer essa API de contexto, pasta de serviço, API de contatos. Aqui vamos configurar. Nossa exportação é armazenada, é igual ao armazenamento de configuração. Aqui vou usá-lo. É o caminho do redutor de pontos api contextos. Tenho que especificar o caminho do redutor em nossos contextos api dot txt file para que ele possa ser conectado com nosso redutor de pontos api de contextos históricos. E aqui eu também vou usar middleware, middleware. E vou usar middleware padrão. Então, bom padrão, médio ware. Bom middleware padrão. Conquistado. E vamos converter nossa API de contato. Com Middleware. Terminamos a configuração da loja. Agora vamos para o arquivo txt de ponto de índice. E podemos simplesmente descomentar todo o tratamento importante e este também, o provedor. Estamos lançando o caminho de if torr. Agora ele está na pasta de origem, para que possamos especificar o espaço por esse caminho. Agora podemos verificar este se estamos configurados com sucesso nosso kit de ferramentas redutor ou não. Vamos nos voltar para o navegador. Vamos para a página inicial. Vamos abrir nossa ferramenta de profundidade de redução. Vamos ver se o estado. Agora você pode ver que temos essa consulta é uma mutação fornecida e se inscreve. E isso quando configuramos com êxito nosso kit de ferramentas de redução neste aplicativo React. 8. Obtenha dados usando a consulta RTK: Agora vamos exibir todos os contextos que temos em nosso arquivo db.json em um componente de tabela. Então, vamos para o VS Code. Então você pode ver que eu já tenho alguns dados em nosso arquivo db.json. Então, primeiro, vou exibir os dados nesse componente de tabela no arquivo home.html. Vamos fazer isso do React 5k. Vamos trazer efeito dos EUA. Também precisamos trazer o modo de link, o roteador React dom. Depois disso, também vamos precisar de torradas também. Reator de demonstração. Vamos trazer este também. Também vamos trazer esse arquivo CSS também. Então importe para casa, não CSS. Vou pagar o código CSS para este arquivo. Não se preocupe com todo esse código CSS porque eu já tenho neste arquivo CSS para esta palestra. Você pode encontrar esse arquivo CSS nesta palestra em si. Vamos para este arquivo home.html. Agora, o que temos que fazer, vamos usar que você entraria em contato com a consulta para buscar os dados que temos em nosso arquivo db.json. Use consulta de contato. Você pode ver que somos chamados importar automaticamente esse. Agora, o que temos que fazer assim que ele for faseado o servidor de banco de dados, então basicamente nosso auditor apresentará nos dados. Você pode ver que nesses dados teremos todos os dados que temos em nosso arquivo db.json. Agora você também pode atrair mais alguma propriedade. Você também pode trazer como carregar. Carregando, você também pode usar aqui cada comutação. Você pode ver que essa consulta é fornecida em propriedades diferentes e diferentes, como mais fácil o sucesso de cada pitching. Você pode usar este. E vamos usar apenas dados que está carregando n parte de erro também. acordo com sua conveniência, você também pode usar outra propriedade também se quiser, mas vou usar apenas a propriedade três dessa consulta de contextos enormes. Agora temos todos os dados. Agora, temos que exibir dados em um componente de tabela. Vamos remover este. Vou dar algum ano de azulejos Atlantis. Vamos dar aqui a margem superior de 100 pixels. Depois disso, vou ter um link. Basicamente, ele nunca chegará à página de contato principal. Contato. Em seguida, teremos um botão com o nome da classe. Adicione o valor de qual envelope com o contato adicionar. Agora, depois desse link, vamos ter um par de pausa. Em seguida, teremos uma tabela com a tabela de estilo de nome da classe. Agora, esta tabela está falhando de tabela está incorreta, então será uma tabela assim. Agora, dentro disso, vamos ter a cabeça da mesa primeiro, terceira tabela, vamos ter linha de tabela. Então vamos ter cabeça de mesa. A primeira coluna será o ID. Podemos dar-lhe uma telha como um centro de comprimento, linha, centro. E vou fazer algumas cópias desta linha de código. Isso se tornará nome, e-mail, contato com a ação em que podemos executar uma operação de exclusão, consulta RTK. Agora, depois dessa cabeça T, vamos formatar este. Então, depois desta camada, teremos nosso corpo T. No corpo, vamos exibir nossos dados que temos em nosso arquivo db.json. Então mapa de pontos de dados, mapa de pontos de dados. Podemos ter item. Poderia ser qualquer sentido. Estamos usando aqui TypeScript, então temos que fornecer este. Caso contrário, você receberá um erro. O índice também será o inimigo. Agora, depois disso, vamos ser complicados. Retorna a linha da tabela. Temos que definir a chave aqui. ID do ponto do item. Dentro da linha da tabela. Vamos ter o primeiro cabeçote da tabela de edição de fotos apenas. Podemos lhe dar uma linha de escopo. Aqui vamos usar o índice mais um porque em uma área em profundidade eles começaram a partir de 0. Então, vamos aumentar eticamente o índice mais um. Portanto, isso não será ID, você pode dar o número aqui. Não deve ser IID. E depois disso, o que temos que fazer? Agora? Vamos ter nossos dados de tabela dentro disso e podemos exibir o nome do nosso item. Vou copiar algumas vezes. Esse tipo de quadro, isso enviará contato por e-mail na última coluna, que, na qual temos uma ação. Nesta ação, teremos três botões para executar a operação, excluir a operação e os dados do intervalo de operação V. Vamos ter o link aqui. E você tem que fornecer dois aqui. Queríamos navegar em direção à página de edição. Vamos seguir a rota primeiro. Adicionamos contato, Editar contato, Contato, depois dólar, ID do ponto do item. Agora, depois disso, vamos para o habitat. Então vamos manter o nome da classe aqui, beleza e beleza e editar. Agora, após esse botão, teremos mais um botão para executar a operação de exclusão. Então botão com o nome da classe, btn, btn hífen Lily. botão Avaliar será a exclusão. Em breve, definiremos o método onClick aqui também. Vamos primeiro definir o botão. Agora vamos ter um botão de visualização que navegará em direção a uma única página de contato. Ele também terá um botão com o nome da classe, btn, btn hyphen view. O valor de um botão será a exibição. Vamos navegar em direção à página de informações. Informações. Podemos especificar aqui dólar. Aqui temos que especificar o ID. Vamos verificar a única página de contato também. Com as informações Somente. Vamos para o arquivo home.html. E podemos verificar cinco, onde nossos dados estão sendo exibidos ou não no componente de tabela. Agora você pode ver que podemos classificar os dados em um componente de tabela. Temos um nome, e-mail, contato e ação. Agora, também vamos usar isso está carregando também. Assim, podemos usar aqui a luz está carregando é verdade. Que vamos mostrar alguns métodos, como carregar. Ok, vamos para o navegador e também podemos verificar este. Então, vamos recarregar esse aplicativo. Agora você pode ver que ela um breve momento, estamos recebendo esse carregamento. Certo. 9. Manipulação de erros: Vamos também usar este erro também. Até agora erro, vou usar o efeito dos EUA aqui. Vamos usar um efeito enorme. Aqui. Vou traçar o teatro independente neste enorme efeito só executado se tivermos algum tipo de erro. Podemos lhe dar métodos como torradas, como algo. Também podemos pegar este, esteja funcionando ou não. Então, o que vou fazer agora, vamos para o arquivo CSS de ponto da API de conteúdo. E aqui podemos modificar este. Então, vamos modificar este. Vamos pegar este. Vamos para o navegador. Atualize este. Não estamos recebendo nada. Deixe o console registrar este. Na verdade, estamos recebendo erro de log do console. Se estamos cortando alguma coisa ou não. Vamos para o navegador, atualize este. Assim, você pode ver que temos objeto e temos o status sempre que não estamos recebendo a notificação porque não configuramos nosso reator ativo alto no arquivo txt ponto do aplicativo. Então, temos que configurar esse reator. Então só podemos ver a notificação. Então, vamos fazer isso 1 primeiro, vou escolher as duas linhas de declaração de importação relacionadas ao reator. E podemos usar o contêiner. Vamos para o navegador. Agora você pode ver que temos esse método como se algo desse errado. Nós também provamos este. Agora, digamos que reverta nossas mudanças aqui. Serão contextos. Vamos para o navegador. Agora tudo parece bom. A próxima coisa que vamos trabalhar em adicionar o contato, clique em Adicionar conteúdo. Então, seremos um componente mortal da fazenda solar aqui, no qual qualquer um pode fornecer o contato, nome, e-mail e contato. Então, vamos fazer isso no próximo vídeo. 10. Como escrever uma consulta de POST RTK: Então, para adicionar novos contextos de tempo, vou escrever uma consulta aqui. Então, vou escrever uma consulta como no contato. E aqui vamos escrever nosso padrão de construtor, mutação de pontos de construtor, já que estamos adicionando novos dados. Então aqui temos que escrever uma mutação. Aqui o que podemos fazer aqui, o primeiro argumento será o objeto, porque vamos enviar um detalhe de contato em um formulário de objeto. E, em seguida, nosso contato. Depois disso, o que temos que fazer consulta aqui. Em seguida, contate. Vamos receber um contato do nosso componente. Em seguida, temos que especificar o URL. O URL é um pouco de método apenas de contexto que temos com o PHP. Até agora, adicionar um novo método de contato colocará os dois. Então corpo, corpo, vamos enviar o contexto que estamos recebendo sai componente. Nós pagamos por qualquer contato. Aqui. Agora, vamos expor um novo gancho aqui. Vamos escrever um novo gancho como o uso na mutação de contato. Terminamos a parte da consulta relacionada à adição de um novo contato em nosso arquivo JSON. 11. Componente de formulário: Agora temos que criar um componente de formulário neste arquivo txt de ponto ID adicionado. Então, vamos fazer isso do React, vou trazer um enorme efeito de uso do estado. Do React, roteador dom. Precisamos trazer US para e usar o browser. Nós parênteses exigiremos mais tarde assim que executarmos a operação de atualização. Agora também precisamos que os jovens naveguem para navegar em direção à casa depois de adicionar um novo contato. Também é necessário. Vamos trazer os dedos dos pés também. Vamos imprimir o brinde. Vamos trazer esse arquivo DHS também para esta página. Então eu adicionei CSS de ponto. Vou escolher o código CSS aqui e esse arquivo CSS. E não se preocupe pessoal, eu já anexei o arquivo CSS a esta palestra para que você possa obtê-lo a partir daí. Agora, vamos trabalhar primeiro em nosso componente de formulário. Então, vou definir algum estado inicial ou componente de status. Inicialmente. Nome, e-mail e contato. Vamos dar seu nome. Deve estar em e-mail de massa com empatia. Contato, que será o impétigo. Agora aqui vou definir um estado, valor de custo. Conjunto. Valor. Geralmente estado. Vou passar esse estado inicial aqui. Agora posso tirar todo esse valor do nosso valor do formulário. Podemos fazer táxons como nome, e-mail e contato. E também temos que, em direção aos esforços de nós navegar para uma variável de navegação, seleção para essa também. Coisa básica que fizemos aqui. Agora, o que temos que fazer primeiro? Vou primeiro trabalhar em nosso Componente de formulário. Vamos remover este, decidir marcar. Vou fornecer algum estilo em linha. Ou seja, margem, top 100 pixels. Vou ter aqui. Aqui eu vou chamar alguém linha está contando. vez, há uma linha fina é reveladora. Eu me oponho na foto aqui. Desta forma ou componente de formulário estará no meio. Agora, depois disso, teremos um rótulo que será como o nome. Pois será o nome. Vamos ter o InputField. Nisso, teremos um ID de tipo. Nome. O nome será somente nome. O espaço reservado será como o nome. Então podemos dar o seu nome. E vamos ter em mudança. Depende disso também. A mudança de entrada do identificador. Vamos definir este. Lidar com troca de entrada retorno de pessoas de fora. Vamos também definir o identificador enviar, realizar o envio, lidar com o envio. Podemos usar o handle Summit aqui. No envio. Enviar. Ambas as funções receberão um evento. Vamos trabalhar mais tarde nesta função. Agora, vou copiar essa entrada por algumas vezes em nosso e-mail e contato. Isso agora se tornará e-mail. Este será o e-mail. O ID do e-mail será enviado por e-mail, nome será o e-mail. Pode dar a você como e-mail avaliado com o e-mail e a entrada de luz para o contato disponível. Contato. Isso se tornará contato. Este será o único número. Vamos dar-lhe um número de tipo. Se tornará contato, o nome se tornará contato. Aqui ele estará em contato. Número. O valor se tornará contato. Temos dois avisos aqui. Então, já que estamos usando TypeScript, então aqui você pode dar qualquer, ok. Então, vamos ao navegador e verificar se nosso componente farm está sendo exibido ou não. Portanto, nosso componente de formulário está sendo exibido aqui. Agora estamos encontrando um botão aqui. Então, vamos adicionar esse botão também. De crédito InputField, vamos adicionar esse botão. tipo de entrada será o cume. E nós vamos dar-lhe um valor leve. Valioso, valioso seja como. Vamos para o navegador. Agora você pode ver que temos nosso botão também. Então nossa fórmula está pronta agora. 12. Use o POST Query para adicionar dados: Agora, a próxima coisa vamos adicionar nosso novo contato e esse arquivo db.json. Então, vamos usar a consulta. Primeiro. Vamos trabalhar nessa função primeiro. Lidar com a mudança de entrada, desanexá-la de um destino, nome e valor de ponto . Em seguida, no valor. Podemos espalhar o valor da bomba. Então podemos fazer como nome, valor da coluna. Então, manipule a entrada feita. Agora, vamos trabalhar no handle submit. Nós vamos fazer é evitar o padrão. Para evitar o comportamento padrão de um navegador. Depois disso, vamos verificar se o usuário não forneceu nome ou e-mail nosso contato com eles. Eu não quero isso para alguém em formato PDF. Então, nesse caso, eu queria editar um método nele na forma de ambas as notificações. Assim, podemos dar-lhe um erro de ponto da tocha. Podemos dar um método como Por favor, forneça valor para cada entrada. Vamos salvar este. E na parte else, seremos eticamente, você usa essa consulta que criamos em nosso arquivo txt dot api de contato. Então aqui temos que fazer alguma coisa. No topo. Temos que trazer essa consulta. Use mutação de contato. Temos trazendo aqui. Agora, precisamos adicionar contato. Contato. E esse contato que vamos usar aqui em nossa cúpula de alça. O manejador de envio será uma coisa. Vamos ver enormes ouvir qualquer coisa. Depois disso. Podemos fazer como um estranho em contato. Aqui. Podemos fornecer nosso valor de formulário, todo o valor do formulário. Depois disso, podemos navegar até a página inicial e podemos fornecer uma mensagem de sucesso como o contato adicionado com sucesso. Contato adicionado com sucesso. Agora, podemos verificar este se ele está funcionando ou não. Então, vamos para o navegador. Vamos recarregar o aplicativo. Vamos lutar variar de acordo com a validação do campo de entrada de empatia. Então, vamos clicar em Adicionar. Agora você pode ver que recebemos nossa notificação de torque. Agora vamos adicionar um contato aqui. Então, vamos dar-lhe um nome de lactase por enquanto. E, em seguida, no gmail.com, vamos manter algum contato. E vamos clicar na mão. Agora você pode ver que podemos adicionar com sucesso o conteúdo em nosso componente de tabela. Então pessoal, realizamos a operação de adição com a ajuda da consulta RTK. 13. Como escrever consulta DELETE: Agora vamos executar a operação de exclusão. Então, para diluir um contato, primeiro, vamos escrever uma consulta no arquivo txt de ponto da API de contexto. Vamos escrever cinco consultas para excluí-lo contato. Depois disso, teremos mais uma consulta, como excluir contato. Exclua contato. Vamos construir um padrão aqui. Isso também será mutação. Vamos passar o primeiro argumento bem aqui. Ele será conectado. Trem. Por que estamos passando uma string, porque vamos passar o ID. Você pode excluir o conteúdo com base na ID. É por isso que será a corda aqui. Porque vamos passar o ID do nosso componente. Vamos escrever sua consulta. Vamos ter ID. Aqui. Vamos especificar o URL. E o URL será como contexto. Temos que especificar o ID aqui. E o método. Vou dar a você diluir porque estamos executando a operação de exclusão. Agora, esse conteúdo exclui novamente, exponha o gancho do joelho. Deixe o detrator que sabia quem usa a mutação de contextos de exclusão. Agora vamos usar este em nosso arquivo txt ponto inicial. Porque no arquivo home.html temos nosso botão Excluir. Vamos ter nosso método onclick, que vamos definir um método, light, delete, ok? Podemos passar o ID do ponto do item. Agora temos que definir essa função fora, retornar a essa. Excluir. E também será uma coisa. E aqui ele receberá um ID. Não poderia ser nenhum. Depois disso. Primeiro, eu queria que a janela pop-up confirme a mensagem para você lá. Você está arrependido, você queria excluir essa mensagem. Algum tipo de métodos que eu queria exibir para o usuário antes de excluir a mensagem. Será como uma proporção que você queria excluir esse contato. Se você clicar em Ok, e então ele basicamente virá em condições de estado estacionário. Aqui podemos usar essa consulta de mutação. Portanto, temos que usar a mutação de contato de exclusão. Podemos usar este para excluir nosso contato. Isso será um contato de exclusão leve. Podemos usar aqui excluir contato e podemos passar o ID. Aqui. Podemos manter essa facilidade tanto em direção ao sucesso. Contato, excluído com sucesso. Agora vamos para o projeto. Se somos capazes de diluir o contato ou não. Vamos encaminhar este aplicativo. Vamos excluir o quarto. Agora vamos clicar em OK. Agora você pode ver que chamamos o método de contato visual excluído que diz valentão. Mas do nosso componente de tabela, ele não está sendo excluído. Se você tem medo deste aplicativo. Você verá lá o quarto gravado, mas excluído agora do nosso componente de tabela. Por que isso está acontecendo? Porque temos que adicionar mais alguma propriedade em nosso arquivo txt de ponto de API de contexto. Portanto, temos que fornecer tipos de tags. Podemos lhe dar tipos de ataque. Aqui ele será contato porque o nome do modal é contato sempre que qualquer alteração ocorrer em todo o nosso contexto, então ele será atualizado. Podemos usar esse tipo de tag assim. Em cada consulta. No GitHub Query, usaremos as tags fornecidas. Aqui. Podemos passar novamente este contato. Em caso de mutação, teremos tags invalidadas. Aqui. Temos que usar impostos invalidados. Será contato. Aqui também. Temos que usar invalidar. Se alguma alteração aconteceu em nossos dados, nossa interface do usuário será rerenderizada com os dados atualizados. Vamos tentar novamente. Vamos recarregar esse aplicativo novamente. E vamos tentar excluir novamente uma palavra, gravar. Exclua este e clique em. Certo. Agora você pode ver que desta vez ele foi excluído sem recarregar este aplicativo. Você precisa fornecer essas tags para ver os dados atualizados na interface do usuário. Realizamos a operação de exclusão neste aplicativo com a ajuda de nossa consulta de decaimento. 14. Visualizar a página: Agora vamos ver o registro único com base no ID nesta página de informações. Vamos fazer isso. Então, cinco, vamos escrever uma consulta para isso. Vamos para o arquivo txt ponto da Content API. Aqui vamos escrever uma consulta. Contato. Mais uma vez, vamos escrever um padrão de construtor aqui. Consulta de pontos. O argumento de fato será o contexto porque vamos ter um único contato no objeto. E o segundo argumento será a string, porque vamos passar o ID do nosso componente para obter o único contato do nosso arquivo db.json. Aqui nós direcionamos a consulta. Vamos especificar o ID. Ajuste outro endpoint aqui. Será o ID. E também temos que especificar a tag do provedor aqui. Então, vamos copiar este e vamos colá-lo aqui. Vamos te dar uma vírgula. Agora, esse contato exportará o novo gancho. Podemos definir esse novo gancho aqui. Use consulta de contato. Certo. Agora vamos para o arquivo txt info dot onde vamos dividir um único detalhe de contato. Agora aqui o que temos que fazer de reagir por Tenet para trazer efeito nos EUA. Também vamos precisar aqui, ele usou porque precisamos de IID do nosso URL, do Roteador React dom. Precisamos usar paralelo , bem como um link. Porque estamos, porque também teremos um botão Voltar. Para navegar em direção à página inicial. Vamos trazer para reagir. Agora, vamos trazer o arquivo CSS. Este arquivo Info.plist também. CSS de ponto de informação. Vou colar o código CSS aqui, ou este arquivo CSS de ponto de informação. E um arquivo CSS já está anexado a esta palestra. Assim, você pode descobrir facilmente esse arquivo CSS e esta palestra que já está anexada. Aqui, o que temos que fazer primeiro, vamos pegar o ID. Se eu voltar ao nosso aplicativo. Se você clicar em Exibir, você pode ver que temos o que este id2. Se você precisar pegar esse ID com a ajuda do pará dos EUA. Vamos usar melhor o uso. E precisamos da Heidi. Certo? Agora, depois disso, vamos usar esse uso de consulta de contato. Esta consulta de contato para jovens. Vamos passar um documento de identificação. Aqui. Temos que fornecer ponto de exclamação. Aqui. Vamos desanexar os dados. Portanto, ele conterá um único objeto no qual teremos nossos detalhes de contato, nome, e-mail e contato. Também vamos usar o erro II aqui. Também vamos usar o erro. Então, vamos trazer esse também. Parte árida que vamos usar aqui em vez de nosso efeito juvenil. Esse enorme efeito só virou. Se você tiver algum tipo de erro. Podemos lhe dar um erro. Estamos verificando. Se tivermos um erro, então erro. E podemos dar algo metilato, algo deu errado. Agora, temos nossos detalhes de contato único aqui dentro desses dados. Aqui o que podemos fazer é estilo. Posso dar alguma margem, dica superior Excel. Vou usar classe, classe de cartão. Vou usar mais uma classe, o cabeçalho do cartão. Dentro disso. Vou ter Beta, algum cabeçalho. Você tem os detalhes de contato. Depois desta tag p. O que vamos ter. Mais uma vez, vou ter mais uma aula com o contêiner. E lá dentro, vamos usar uma tag forte. Vamos usar seu ID. Em seguida, teremos uma tag de span, que vou exibir o ID. Nós pegamos o id com a Delta, usamos o padrão. Agora vou ter um par de pausa aqui. E vou copiar isso algumas vezes porque também vamos exibir o nome, e-mail e contato. Isso se tornará nome. Isso se tornará como o nome do ponto dados porque esses dados conterão um único objeto no qual eles terão todos os detalhes de contato, como nome, contextos MLN. Então, isso se tornará um dado masculino. Mais tarde, ponto mal. O último se tornará contato. Contato. Neste travesseiro, teremos o botão Voltar, botão Voltar. Vou usar o nome da classe tn, tn nele. Vamos manter o valor do botão. Volte. Vamos usar o link aéreo. Vamos cortar esse botão e colá-lo aqui. Vamos navegar em direção à página inicial. Então, se você clicar no botão Copiar aqui, estamos particularmente navegando em direção à página inicial. Vamos ver se está funcionando ou não. Então, vamos para o navegador. Então, vamos ver esse detalhe de conteúdo. Agora você pode ver que podemos ver os detalhes de contato do usuário único em nossas informações. E se você clicar em voltar para que nunca chegue à página inicial ocidental. Agora, terminamos com o detalhe de contato do usuário único base na ideia com a ajuda de nossa consulta de decaimento. 15. Preenche dados de formulário: Agora vamos executar a operação de atualização. Então, se você clicar no botão Editar, aqui, navegaremos até a página Editar contato. Vamos preencher o valor existente em oito, independentemente do campo de entrada para nome, e-mail e contato. E o botão Avaliar também será alterado de tinha para atualizar. Até agora, vamos fazer tudo isso. Em seguida, vamos executar a operação de atualização no arquivo txt ponto ID adicionado. O que temos que fazer aqui, vou usar param com a ajuda de u é paralelo. Vamos obter nossas ideias do nosso URL. Agora, depois disso, o que temos que fazer primeiro, nosso trabalho é preencher os dados em cada campo de entrada respectivo. Vou ter um estado aqui chamado Modo de edição. Modo. Ele será inicialmente falso. Agora, vamos ter um efeito enorme aqui. Efeito de uso. Use o efeito só é executado quando tivermos o ID e depois que você tiver os dados. Aqui, vamos usar essa consulta para obter o peso detalhado do contato do dedo no ID para preencher o respectivo campo de entrada. Aqui em editado obteve o arquivo THE. O que temos que fazer. Então, vamos usar essa consulta também. Use consulta de contato. E vamos obter dados. Vamos também trazer o erro também. Esse efeito enorme só é executado quando tivermos dados. Aqui, vamos verificar se temos o ID. Isso significa que os usuários atualizam os detalhes de contato existentes. Nesse caso, eu queria fazer o modo paisagem como verdadeiro. Aqui vamos verificar se temos o valor do formulário do conjunto de dados. Vou apenas espalhar os dados porque esses dados terão um único objeto que manterá o valor como nome, e-mail e contato. Então, ele está imprimindo esse valor para preencher o valor hesitante em seu respectivo e portfólio. Agora, nessa condição, o que vamos fazer o modo de edição de estatísticas para o valor falso para o nosso estado inicial. Vamos também usar uma palavra, efeito juvenil. Este enorme efeito com a Itália será executado se você tiver algum erro. Aqui. Podemos verificar se você tem um erro. Além disso, vamos fornecer um ID. Podemos dar aqui metilato, ponto incendiado. Algo deu errado. Em caso de atualização, estamos apenas tomando essa parte de erro. Podemos dar como se algo desse errado porque, no caso de adicionar os novos contextos, você não obterá ID. Vamos primeiro verificar se conseguimos preencher o valor existente. E aqui temos algum erro. Aqui com a Itália, temos que fornecer o ID. É por isso que estamos recebendo esse erro. Podemos usar este depois desta linha. Certo? Primeiro, vamos entrar no projeto e ver se somos capazes de preencher o valor de saída nele independentemente e colocar preenchido ou não. Então, agora você pode ver que somos capazes de público o valor de saída em cada campo de entrada respectivo. Vamos voltar. Vamos clicar neste registro de 1 segundo. Está funcionando. 16. Atualização com a consulta RTK: Agora, para atualizar os detalhes de contato existentes. Então, temos que escrever uma consulta aqui em nosso contexto, arquivo txt ponto mais pesado. Aqui. O que temos que fazer aqui, vou cobrir este. Vamos ficar aqui. Isso será como o método de contato de atualização será a saída. E aqui vamos receber um contato. E o segundo será a string porque vamos atualizar o conteúdo com base no ID. Aqui. O que posso fazer precisa ID e podemos passar a taxa dos aditivos de conteúdo, como nome, e-mail e contato. Então, podemos apenas dar-lhe um corpo. Podemos injetar. O caminho é vermelho porque o objeto de thread conterá nossos detalhes de contato atualizados, como nome, e-mail, contato. Aqui temos algum erro. Aqui. Estamos recebendo um erro porque ele será conectado. Será conteúdo porque estamos recebendo esse objeto de contexto de nosso componente. Estamos recebendo esse conteúdo de nosso componente, que contém ID, nome, e-mail e contato. É por isso que detectar apenas o ID. E estou apenas passando a taxa dos detalhes, como e-mail, nome e contato no corpo. Temos que fazer esse pequeno ajuste aqui. Essa consulta expõe novamente uma Nova Esperança. Deixe dv estruturar essa nova esperança aqui, a mutação de contato de atualização dos EUA. Agora vamos para o arquivo txt de ponto adequado e ele lida com o cume. Temos dois particularmente atualizar a lógica existente no handle submit com a Itália, temos que atualizar nossa lógica de adjetivo. Então, aqui colocamos determinar se estamos no modo imediato ou não. Então, se você não for mais, isso significa que o usuário está adicionando um novo contexto. Podemos cortar este pedaço de código e podemos pagar para separar. Temos que fazer isso primeiro, temos que trazer esse uso mutação de contato de atualização. Vamos apenas copiar este. E será usado atualização sobre mutação tecnológica. E isso será atualizado contato. Agora, lida com envio. Podemos simplesmente copiar este. Aqui. Isso atualizará o contato. Também queríamos salvar o modo de edição em false. Depois de atualizar o conteúdo, queríamos nunca chegar à página inicial. Também especificamos e navegamos aqui. E vamos atualizar o método também. Será operado por contato com sucesso. Agora aqui também temos que alterar o valor do botão com base no modo de edição. Se você estiver no modo de edição. Mas qualquer pessoa com a atualização e em caso de adição, será o anúncio. Vamos para o navegador. Atualize essa obrigação. Agora, vamos clicar em editar. Agora vamos atualizar esse nome. E isso se tornará como James Gunn. E vamos clicar em Atualizar. Agora você pode ver que podemos atualizar com sucesso os detalhes de contato existentes. Realizamos a operação de atualização com a consulta Hair pop RTK e este aplicativo React. Agora é hora de realizar todas as operações uma a uma para que não quebremos nada. Vamos adicionar um novo contato novamente. E desta vez vou dar-lhe a taxa gmail.com. Clique em Adicionar, novo contato adicionado com sucesso em nosso componente de tabela. Vamos rever este. Portanto, também podemos visualizar o conteúdo. Agora, vamos editar os detalhes de contato existentes. Então, vamos clicar nele, ele. Agora a hora em que vou te dar um repórter. Vamos também atualizar o e-mail também. Relatado. Vamos clicar em atualizar. Também podemos executar a operação de atualização. Agora vamos executar a operação de exclusão. Então, vou excluir o segundo registro. Vamos clicar em Excluir. Vamos clicar em OK. Também podemos excluir a tabela de saída do registro em comparação com a consulta articulada acima. 17. Demo do projeto 2: Nesta seção, vamos criar um aplicativo de receita de alimentos com a ajuda da consulta RTK no React. E usaremos o modelo TypeScript nesta seção para criar este aplicativo de receita de comida. Com a ajuda deste aplicativo, você entenderá como trabalhar com APIs de terceiros. Na preocupação do artigo, usaremos API de terceiros da Edmund para destacar a receita diferente e diferente em nossa GUI. Portanto, neste aplicativo, você pode pesquisar receitas diferentes e diferentes. Então, vamos tentar pesquisar o TP com pão. Então, vamos clicar em Pesquisar. Então você pode ver que estamos recebendo a receita relacionada ao pão. E se você está um pouco preocupado com a saúde, pode selecionar aqui os pontos mais baixos. Novamente. Ele filtrará nosso resultado com base nessa categoria de saúde. E se você clicar em qualquer cartão de receita , aparecerá um modal no qual incluí mais detalhes sobre essa receita em particular. Portanto, esse é o aplicativo geral que vamos criar nesta seção com a ajuda da consulta Arctic. Em React. No próximo vídeo, vamos configurar a API de terceiros do oedema. E depois disso, começaremos a configurar projetos. Então, eu vou te ver no próximo vídeo. 18. Projeto 2 Configurar a API de receita da edamam: Vamos configurar nossa API de receitas de comida no site do administrador. Portanto, certifique-se de criar uma conta. E depois de criar uma conta, você acessará esta página. E neste caso, usaremos 31. Com três, poderemos fazer apenas dez solicitações por minuto, o suficiente para criar esse aplicativo de receitas de alimentos. Portanto, no documento, obteremos nossa API de pesquisa de receitas. Então, aqui estamos usando a versão mais antiga. Então, vamos rolar para baixo e precisamos dessa APA. Então, vamos copiar o TPA e salvá-lo em algum lugar no Bloco de Notas. Agora precisamos do ID do aplicativo e da chave do aplicativo. Então, precisamos clicar em Obter chave de API. Depois disso, você precisa clicar nesta visualização na API de pesquisa de receitas. Portanto, este é o nosso ID do aplicativo e o aplicativo k. Então, vamos armazenar essas informações também em um par. 19. Projeto 2 configurado: Agora vamos começar a trabalhar na configuração do nosso projeto. Então, para trabalhar em nossa receita de localização, vamos usar um modelo de script do tipo redox. Então, vamos copiar esse comando. E eu vou colar no meu terminal. E eu vou mudar o nome do meu aplicativo aqui. Vai ser receita RTK, ok? E vamos apertar Enter. Levará cerca de dois a 3 minutos para configurar nosso projeto React com um modelo de script do tipo redox. Então, vamos aguardar a configuração dos projetos. A configuração do nosso projeto foi concluída ao longo do ano. Então, primeiro, vamos entrar nesse diretório. Essa é a nossa receita de decaimento. Antes de criarmos uma tag de imagem, precisamos instalar um pacote para nosso projeto. Então, neste projeto, vamos usar o material design booster five. Então, vamos copiar este. E vamos abrir esse terminal. Eu vou pintá-lo aqui. E vamos apertar Enter. Ele instalará o pacote. Então nosso pacote ganhou uma estrela. Vamos fazer e me pagar para começar. E eu já abri esse projeto no meu código do Visual Studio. Então, vamos ao VS Code. Então, como você pode ver, o projeto está aberto no meu VS Code. E ainda temos alguns códigos padronizados porque criamos este projeto usando um modelo de script do tipo redox. Então, vamos para esse arquivo package.json. Como você pode ver, ao criar um projeto com o modelo TypeScript redigido, não precisamos ler o pacote do Toolkit assim como também não precisamos instalar o React redux. Portanto, não precisamos instalar esses dois pacotes usando o TypeScript. Então pessoal, agora vamos ao navegador porque nosso servidor de desenvolvimento está rodando, então não temos nenhum problema. Então, vamos ver no navegador. Então, compramos esse conteúdo e esse conteúdo com a Itália. Ele está sendo exibido a partir do nosso arquivo de texto ab.js. Portanto, temos esse conteúdo que está sendo exibido em nosso navegador. E vamos explorar essas duas pastas também. Então, compramos o recurso e eu tenho uma pasta dentro dela , nós restauramos. Portanto, temos algumas configurações básicas sobre se temos ganchos aqui. E temos uma pasta de recursos na qual temos uma pasta de conteúdo. Essa pasta de conteúdo não é necessária. Então, vamos remover essa pasta inteira, falsificada. A pasta de conteúdo não era necessária. Então, agora vamos para o navegador. Então, agora nosso aplicativo e temos uma pausa aqui. Então, ainda precisamos fazer uma limpeza. Então, vamos até o arquivo CSS de pontos da loja. Não precisamos desse. Vamos remover esse. Vamos remover esse. E vamos salvar esse arquivo primeiro. Vamos para o arquivo app.js. E vou remover todo o nosso conteúdo. Podemos te dar uma receita parecida. Por enquanto. Digamos que remova esse porque excluímos a pasta inteira. Localmente também não é necessário. Também podemos remover essa declaração importante do React. Vamos salvar esse arquivo. E vamos até o navegador. Agora, não temos nenhum problema em nosso aplicativo, pois estamos usando o Bootstrap de design de material neste projeto. Portanto, precisamos trazer o arquivo CSS para o design do material Bootstrap. Então, o que podemos fazer para isso. Então, podemos copiar essa declaração importante e colá-la aqui. Ok? Assim, podemos ver as mudanças em nosso navegador. Então, vamos ao navegador. Agora você pode ver que temos um título diferente. Então, quando tivermos configurado com sucesso um Clube do Livro de Design de Material neste projeto. 20. Estrutura de pastas do projeto 2: Então, a próxima coisa que faremos é para estruturar. Então, vamos ter algumas pastas e arquivos neste aplicativo. Teremos componentes de uma pasta nos quais teremos alguns arquivos, como model, não TFX, spinner dot t. E teremos um componente de placa. Então, vou apenas gerar um trecho em cada componente. Por outro lado, receberemos algum erro no navegador porque estamos usando o TypeScript neste projeto. Então, vamos enviar um trecho para esse componente também. Depois disso, vamos excluir esta pasta de recursos. Em vez disso, teremos serviços para isso. Porque vamos criar um endpoint. E dentro disso, vamos ter esse STP, APA dot ts. 21. Projeto 2 Configurar a consulta da loja e do RTK: Então, vamos configurar primeiro uma consulta para o Arctic neste projeto. Então, aqui precisamos trazer um pouco de APA do nosso kit de ferramentas. Então, do redator ao líquido, precisamos ir até a consulta. Reaja, ok? E temos que criar uma consulta de bits da APA e da Fitch. Agora vou pegar minha chave de API e ID do aplicativo que recebemos de Adam. Portanto, essa é a chave da API e ID do aplicativo que geramos em nosso elemento. Agora, temos que criar um endpoint aqui. Então exporte esse NCP, APA. Crie APA. peça redutora predefinida porque precisamos conectar esta receita APA à nossa restauração. Então, temos que definir a parte redutora aqui. Depois disso, predefinimos a consulta base da nossa API de administração. Portanto, queremos usar sua consulta baseada na fé e fornecer o URL base. Portanto, o URL será como HTTPS, apa.admin.com. Depois disso, teremos um endpoint. E vamos escrever um padrão de construção. Aqui. Teremos que obter receitas. Mutação do lote Builder. Se você está um pouco ciente da consulta RTK, essa mutação de pontos do construtor normalmente usamos para fazer pesquisas ou solicitações de exclusão. Mas, como estamos aqui, precisamos obter a receita com base em nossa consulta de pesquisa e saúde. Portanto, precisamos de uma variedade ou mutação porque precisamos receber pesquisa, consulta e integridade de nosso componente. Então, aqui temos que escrever mutação. Então, dentro disso, vamos ter uma consulta e vamos receber uma consulta, que é uma consulta de pesquisa. E então podemos voltar. Então, aqui temos que especificar o URL. Então, eu vou copiar este. Portanto, esse é o nosso URL base, que já especificamos na consulta de base de fago. Ok, vamos colar aqui. E vamos receber esse componente de consulta do Tamar. Então, podemos usar a consulta aqui, ok? E saúde. Também receberemos apenas do nosso componente. Então, vamos substituir esse. Então, vamos formatar esse. E essa receita vai expor a Nova Esperança. Então, o que podemos fazer de novo, exportar, chamar a receita de APA. Esta receita vai expor seu novo gancho para que possamos experimentá-lo aqui. Então, vamos salvar esse arquivo. E temos que trabalhar em nosso arquivo CSS de pontos de loja. Então, aqui, vamos remover este. Não precisamos importar um ouvinte melhor do nosso kit de ferramentas. Portanto, a partir do kit de ferramentas de redação, precisamos acessar dist, folder e query. E temos que trazer um ouvinte de configuração. E agora vamos trazer nossa receita APA, do nosso serviço de chumbo. Vamos ao site da série. E temos que trazer uma nova receita VA. Agora temos que conectar nosso redutor com esta receita APA. Então, eles veem a parte do redutor de PABA no STP, redutor de pontos APA. Depois disso, também precisamos usar o middleware aqui. Então, vamos usar o middleware padrão. Então, um bom middleware padrão. Esse middleware padrão. E temos que cortar esse STP APA em nosso middleware. Vamos formatar isso 15. E aqui podemos remover este. Ok? E podemos configurar o ouvinte, o armazenamento, não o despacho. Ok. Vamos salvar esse arquivo. Então, configuramos se você está neste projeto. Então, vamos abrir o terminal, quer tenhamos algum problema ou não. Portanto, não temos nenhum problema no momento. Então, vamos ao navegador. Então, aqui também não temos nenhum problema. Vamos verificar se nossa consulta de decaimento foi configurada com êxito ou não. Então, vou abrir a ferramenta de leitura de uma ferramenta de desenvolvimento. E você pode ver que estamos obtendo algo em nossa ferramenta redutora. Isso vence. Configuramos com sucesso nossa consulta de decaimento neste aplicativo React. Então, agora podemos começar a trabalhar em nossa comida. Esse aplicativo SAP. 22. Projeto 2 Navbar e campo de entrada de pesquisa: Primeiro, vou exibir a receita em um componente de cartão. Então, vou começar a trabalhar neste arquivo txt do app dot. Então, aqui precisamos trazer alguns ganchos do nosso React. De reagir. Vamos usar isso. E geralmente estadual. E também precisamos colocar a consulta que escrevemos na pasta Serviços. Então, precisamos ir a esses serviços. E precisamos fazer essa pergunta. Use a mutação get recipe. Depois disso, precisamos trazer algum componente do nosso bootstrap de design de material. Do MDB, reaja UHC. Precisamos de MDB, entrada MDB, MDB, NAB, mas eu sou a marca Davy container, MDB, navbar. Ok. Depois disso, vamos definir algum pedaço de estado. Ok? Então, vamos ter um valor de barra de estado. Então, basicamente, estamos definindo um estado, nossa terceira onda de entrada aqui. E depois disso, temos que colocar esse valor em um ditado diferente, ou seja, uma consulta. Você acabou de fazer isso. E isso será inserido. Também teremos empatia. Agora temos que definir a saúde. Portanto, é basicamente uma categoria mantida. Será definido como saúde. E, por padrão, vamos basicamente exibir um vegano, ok? E também teremos cada estado para nosso modelo. Vamos definir. E também teremos que exibir uma única receita em um modelo. Então, vamos usar o objeto. Então, basicamente, estamos dispostos a agir para transformar essa receita única em objeto. Então, vamos definir aqui no objeto da Parte D. Agora, vamos remover esse. Agora não precisamos. E aqui vou dar um pouco de estilo embutido. E vamos dar sua margem automática. Vamos dar um preenchimento de dez pixels. Vou te dar uma largura máxima, mil pixels e alinhar o conteúdo. Será centralizado. Agora, dentro desta div, teremos a barra de navegação MDB. E essa será uma cor de fundo clara. Nós também podemos iluminar. Em seguida, teremos um contêiner MDB e ele será carregado. Então vamos ter meu DVD, a marca Navbar. Podemos dar a ela um nome de classe, centro de texto. Então, este é um nome de classe Bootstrap que eu já estou dando. Depois disso, podemos ter a tag h5 com o nome da classe f, w. Eu gastei o hífen dois em negrito e vazio. E eu vou usar aqui emoji. Então eu vou usar seu hambúrguer, hambúrguer depois dessa receita. Este é o nosso título para este aplicativo. Vamos salvar esse e ver no navegador como fica. Então, agora já terminamos nossa bela barra de navegação. Vamos continuar trabalhando em outra parte. Então, depois dessa barra de navegação, teremos o div, o nome da classe, rho, d hífen um, itens de alinhamento, centro e hífen md também. E dentro dessa div, eu vou ter um campo de entrada. Ok? E aqui, vamos dar uma classe alta que será nível automático. Vamos dar uma receita. Vamos manter o texto digitado. Depois disso, teremos um valor que já definimos. Então, vamos usar um método de estanho. Então, vamos definir esse também. Portanto, isso receberá o valor alvo do ponto do evento. Depois desse campo de entrada, teremos mais um dia. O nome da classe Ball auto. E vamos ter um botão. Então, MDB, beleza e pesquisa. Ok? Definiremos o método onclick posteriormente. 23. Projeto 2 Lista de receitas no cartão: Então, agora temos que basicamente colocar uma receita diferente e diferente em um componente do cartão. Então, vamos usar essa consulta para obter toda a receita. Então, vamos usar essa consulta. Portanto, os contras usam obter receita, mutação. E temos que passar por essa consulta e saúde. Então, temos que trazer essa receita também. Então aqui, primeiro, vamos trazer isso, pegar as receitas. Depois disso, vamos explorar uma textura, uma parte diferente diferente do estado que é gerada por nossa consulta de artigo. Você pode ver que temos uma luz diferente. Ou está carregando, é que todos esses estados diferentes e diferentes o gerarão por nossa consulta de decaimento. Então, essa é a razão pela qual é chamada de poderosa ferramenta de ajuste de dados. Portanto, precisamos apenas de cada carregamento e dados. Dentro desses dados, ele conterá nossa receita completa. Depois disso, o que temos que fazer. Portanto, predefinimos quando você deserta. E esse enorme efeito. Ele será executado sempre que formos receitas ou mudarmos a categoria de saúde. Portanto, em ambos os casos, precisamos executar essa consulta. Ok? Então, eu vou definir um método ainda. Então pegue uma receita de comida. Então, vamos definir esse método abaixo desse enorme efeito. Então, custe e obtenha a receita. E isso acontecerá porque vamos realizar uma operação assíncrona. Então você pode ver que em get recipe, estamos fazendo a solicitação da API. E aqui também temos que definir mais uma coisa, que é o método. Então aqui está o caso, se eu ficar bem. Então, vamos especificar o método também. Depois disso. Podemos simplesmente fazer como um peso, pegar as receitas. E temos que passar a consulta e a saúde na forma de objeto porque estamos recebendo aqui apenas na forma de objeto. Então você tem que passar por esse caminho. Depois disso. O que temos que fazer. Assim, podemos verificar isso, se está funcionando ou não. Então, vamos entrar no navegador e abrir a taxa de mortalidade. Você pode ver que nossa promessa, Deus, cumpra aqui. E aqui temos uma receita. Então você pode ver que os dados internos que temos são todos o ATP. Dados internos. Você tem que ir às notas e aos sucessos internos. Você terá uma receita diferente e diferente. Portanto, temos que mirar dessa forma. Então, vamos ao código VS. Então, aqui você pode ver que já temos dados de estrutura profunda. Temos que focar dessa forma: acertos de dados e acertos internos. Temos nossa receita diferente e diferente. Agora, para exibir a receita, precisamos trabalhar em nosso componente de cartão. Então, vamos começar a trabalhar nesse componente da placa. Então, sempre exibiremos nossa receita ainda reativada do MDB. Precisamos trazer algum componente do design de materiais. Precisamos trazer meu dv, coluna, grupo MDB, não beleza e grupo. Grupo de cartões Mdb. Mdb, imagem do cartão MDB e corpo do cartão IMDB. Ok? Depois disso, precisamos fazer alguns ajustes nesse componente funcional porque estamos usando o TypeScript. Portanto, temos que escrever dessa forma, componente funcional de pontos do React. E aqui temos placas que pagam para jogar a função de Rob. Vamos definir isso fora desse componente. E vai receber uma receita de adereço. Portanto, sempre que passamos uma sonda para um componente funcional em um TypeScript, temos que escrever nosso componente funcional dessa maneira. E fora desse componente funcional, temos que definir nossa interface. Caso contrário, receberemos um vermelho. Vamos definir essa função de prompt. E vamos receber uma receita. Então, pode ser qualquer coisa, ok, depois disso, o que temos que fazer. Então, podemos remover esse. E aqui será a cor MDB, o corpo do cartão MDB. Então eu vou usar o carro MDB. E aqui vou usar o nome da classe Bootstrap. Será hífen de borda, hífen md para d hífen, fluxo SM. Então, teremos a imagem do cartão MDB. Fonte interna. Eu vou ser especificado na imagem STP. Então, receita, imagem de pontos. Em alternativa, podemos esperar níveis salariais. Portanto, a receita não está rotulada. A petição será a melhor. Estilistas. Me dê uma indicação de personagem. Ok? Vamos ter o método onClick. Então, definiremos isso mais tarde. Então, por enquanto, vamos remover este. E depois disso, teremos o corpo do cartão MDB. E aqui vou usar a tag h5 com o nome da classe, w e negrito. Aqui. Vamos ter o nível da receita. Ok? Então, vamos formatar esse. E aqui estarão grupos de cartões MDB, corpo do cartão. Então, vamos usar aqui o grupo de cartões MDB. Vamos salvar esse arquivo. você possa ver essa ferramenta aprofundada, temos uma imagem nivelada. Então, estamos usando essa propriedade dentro do nosso componente de cartão. Então, vamos minimizar isso. E vou usar esse componente de cartão dentro do nosso arquivo txt do aplicativo dot. Então, depois dessa div, teremos a linha MDB. Ok? E eu vou usar aqui o nome da classe. Linha chama vida, e uma linha chama hífen, md, hífen três, G, hífen quatro. E nós atingimos o alvo. Como você pode ver, em uma ferramenta mais profunda dentro de nossas cabeças, temos nossa receita diferente e diferente. Temos que atingir, como esta palavra, dados, pontos atingidos. E eu estou usando aqui a expressão ternária. Então, por que estou usando este? Porque se você não usar isso, então você tem que escrever dessa forma, pontos de dados atingem, então você poderá usar dados de acertos de pontos, mapa de pontos. Ok? Então, cidadão deles, estou usando essa expressão ternária. Então, o ponto de dados atinge, o ponto, o mapeia e o item qualquer um. Como estamos usando aqui o TypeScript, temos que especificar este. E vamos usar o componente do seu cartão que criamos. O código soviético importa automaticamente o componente do cartão para mim. E aqui temos que especificar os adereços da receita. Então, receita do item dot. Temos que dar desse jeito. Vamos salvar esse arquivo. E vamos verificar se está funcionando ou não. Então, vamos entrar no navegador. Agora você pode ver que somos capazes de renderizar receitas diferentes e diferentes em nosso componente de cartão. Ok. 24. Projeto 2 Pesquisar receita e rotador: Agora, depois disso, o que temos que fazer implementar a funcionalidade de pesquisa. Então, criamos o botão, botão Pesquisar, mas não tentamos nenhuma lógica para executar a funcionalidade de pesquisa. Então, aqui vamos ter um método onclick. E então vamos definir isso fora do identificador da cláusula de retorno. Ok? Então, aqui podemos fazer uma consulta de conjunto e você pode passar o valor. E depois de clicar no botão de pesquisa, queremos que ele limpe o campo de entrada de pesquisa. Podemos fazer o mesmo valor de ajuste para inserir t. Agora, podemos executar funcionalidade de pesquisa em nosso aplicativo. Então, vamos entrar no navegador. E eu vou prepará-lo SAP com o pão. Então, vamos digitar aqui o pão. Vamos clicar em Pesquisar. Agora você pode ver que podemos pescar uma receita com base no pão. Ok, então a funcionalidade de status também está implementada neste aplicativo. Agora vamos voltar ao código VS. E eu vou usar, isso é carregamento também em teta. Então, vou trabalhar em nosso componente giratório. Então, aqui está o que temos que fazer. Então, aqui temos que trazer um componente do nosso Bootstrap de design de material, que é impressora, seja, o MDB é amendoim. E por dentro, teremos um div com o texto do nome da classe, md hífen cinco. E vamos usar aqui o MDB spinner. E aqui teremos uma tag span com o nome da classe oculto visualmente. Ok? E aqui vou dar carregamento com três portas. E no MDB spinner, temos que passar por uma sonda que é o nome da classe grow. Vamos dar aqui um hífen vazio dois. Vamos manter um pouco de estilo embutido. Eu vou dar aqui três deles. Eu vou dar essa para eles. E podemos remover esse. Nós não precisamos. Vamos usar esse componente dentro do nosso arquivo txt do app dot. E aqui estamos trazendo isso está carregando. Então, o que podemos fazer é verificar se o carregamento é verdadeiro. Então, nesse caso, eu queria pintar, ok, então o código VS importa automaticamente esse componente giratório para mim. Agora, vamos para o navegador. Vamos ilustrar esse. Agora você pode ver que compramos um spinner por nossa obrigação. Agora, a próxima coisa. 25. Projeto 2 recebe receitas na categoria saúde: Vamos implementá-lo aqui embaixo. Então, teremos um menu suspenso e um menu suspenso, que conterá algumas opções para filtrar com base em categorias de saúde diferentes e diferentes. Então, vamos trabalhar nisso. Então, vamos ter essa categoria de saúde em nosso menu suspenso. Então, vamos criar um menu suspenso aqui. Então, aqui vamos ter menu suspenso e não vamos usar um componente suspenso, matéria-prima além do Bootstrap, vamos usar HTML normal e cada bloco com CSS. Ok? Então, aqui vamos ter um div com o nome da classe chamado auto. Será automático. E dentro disso, vou usar o Select. E teremos um nome de classe, categoria e lista suspensa. E vamos ter um sobre o método Jane. É tratado bem. E podemos transmitir seu valor. Dentro disso. Teremos opções. Então, vamos mapear essa opção que definimos, nossas estratégias, que definimos externamente , têm função. Então, vamos usar a adoção e o índice. Então, vamos usar sua tag de opção. Então, aqui eu vou usar não estão nivelados. E vamos usar aqui o valor. Portanto, os valores das opções são será entregue por dia. Vamos te dar uma chave. E vamos salvar esse. E vamos definir e clicar duas vezes. Fora desse retorno, pode lidar com cliques. E isso receberá um evento. E podemos ajustar o valor alvo do ponto E. Depois disso, vamos indexar o arquivo CSS de pontos. Portanto, precisamos espaçar pelo estilo dessa lista suspensa de categorias. Então, vou colar o estilo do nome da classe. Então, isso significa que vou me inscrever em nosso menu suspenso. Então, vamos salvar esse. E vamos entrar no navegador. Agora, esse. Agora você pode ver que nosso estilo foi aplicado no menu suspenso. Selecione novamente a receita de pão aqui. Agora estamos pesquisando com a SAP relacionadas ao pão. E aqui, vamos selecionar a categoria de saúde. Então, vou selecionar aqui um servidor baixo. Então, agora, desta vez, obteremos uma receita de resultado diferente relacionada ao pão. Então você pode ver que agora temos resultados diferentes com base em nossa categoria de saúde. Portanto, isso também é implementado neste aplicativo React. 26. Projeto 2 mostra detalhes de receita no modal: Então, por último, temos que trabalhar em nosso componente modal. Então, sempre que você clicar em qualquer cartão competente. Então, vamos exibir algumas informações adicionais sobre essa receita específica. Então, vamos trabalhar nesse componente do modelo. Portanto, precisamos voltar ao VS Code. E nós já criamos um modelo competente aqui. Você pode ver isso. Portanto, neste componente de modelo, precisamos trazer algum componente do material Bootstrap. Portanto, componente Vineet como MDB, diálogo modal MDB, conteúdo do modelo MDB, cabeçalho modal MDB. Então também precisamos de butano MDB. Modelo Imdb turvo e modelo MDB. Ok, vamos formatar este. Depois disso, precisamos definir a interface para as instruções de que receberemos uma dica do nosso componente de aplicativo. Então, vamos definir esse também. Então, temos sido bons se você quiser , então vamos receber a densidade. Então, esta é uma função que eu escrevi assim onde este é um objeto. Você pode dar qualquer um, se quiser. Então, qualquer um, então será booleano. Ok? Depois disso, temos que modificar esse componente funcional porque estamos trabalhando com os grupos de tarefas. Então, será o React dot FC. E aqui temos que passar essa função prox. Isso solicita a função e ela alternará receita , exibição e configuração. Então, agora dentro do termo, teremos um fragmento. E aqui vamos ter o modelo IMDB. Aqui vamos ser judeus. Então, uma vez que esse modelo verdadeiro seja aberto, ok? E também temos que definir ontem. Então, então diálogo modal do MDB. Então, teremos conteúdo modal MDB. Então, teremos o cabeçalho modal MDB. Então temos a tag h5 com o nome da classe f, w, hífen em negrito. Então, esse será o nível, o nível da receita. Depois disso. Depois dessa tag de estilo, teremos MDB, BTN. Ok? Então, aqui eu vou dar className btn, hyphen close, Taylor, none. Ao clicar. Nós vamos dar ainda. Então, depois desse cabeçalho, teremos o corpo do modelo MDB. No entanto, vou usar a tag de imagem. Ok? Então, acho que, dentro da fonte, teremos a receita do labirinto de Doherty. Alternativo interno. Vamos ter desaparecido do nível do Departamento de Defesa. Em seguida, teremos o div com o nome da classe e o iPhone. Então teremos a tag h5 com o nome da classe, texto, início, hífen F, W, negrito, texto, hífen silenciado. E vamos dar um estilo embutido. Isso é flutuar. Esquerda. O interior é cinco vezes. Vamos ter um nível semelhante ao de calorias. Ok? Depois disso, teremos novamente a tag h5 com o nome da classe, que eu terminei de iniciar. E aqui vamos resolver a contagem de calorias. Então, receita, não galerias. E também podemos dar a unidade. Aqui. Até agora, caloria, será o caso. T a L. Depois dessa etiqueta h5, teremos o ingrediente. Eu só vou copiar este. Eu vou colar isso aqui. E vamos remover esse estilo. Não precisamos desse estilo. Ingrediente da barra. Ingredientes. Ingredientes basicamente contidos na matriz. Então, vamos usar o mapa aqui. Então, se você olhar para isso, então esse é o nosso campo, ok? Então, aqui dentro da mutação, temos que ir até isso. Vamos ao Data Flow para começar. Você encontrará ingredientes para uma linha específica de ingredientes da Insight. Ok, então aqui temos a linha de ingredientes, que é matriz. É por isso que vou usar o mapa aqui para exibir o ingrediente dessa receita específica. Portanto, temos que direcionar desta forma, a receita: ponto, ingrediente, linha, mapa de pontos, item. Pode ser qualquer um. Em seguida, vamos usar o elevador ainda com o nome da classe, texto que forneci para iniciar. E aqui vamos ter nosso item. Então, depois do corpo, vamos ter um. Então, modelo IMDB. Então, para isso, teremos um botão de fechar. Então MDB, beleza e proximidade. E aqui, a cor, eu vou dar ao país. E o OnClick. Vamos usar botões. Portanto, temos que definir essa função em nosso componente pai, que é o arquivo de texto ab.js. Então, agora vamos trabalhar no resto da peça em nosso arquivo app.js. Então, aqui está o que temos que fazer. Então, sempre que você clicar no cartão, um modal aparecerá. Fora do retorno, temos que definir uma função. E dentro disso, vou passar no STP. Ok? Portanto, podemos simplesmente nos opor, seja qual for o valor do estado de. Assim, podemos definir aqui na SAP tudo o que estamos recebendo. Então, basicamente, estamos armazenando objetos no objeto. Portanto, esse objeto de receita contém detalhes diferentes e diferentes sobre uma receita específica, como ingredientes em nível de imagem. Ok, então estamos armazenando objetos até três que definimos essa receita definida como um objeto vazio. Estamos explorando tudo em um objeto. Então, esse botão, para que possamos usar aqui. Então, no cartão, temos que passar esse botão. Então, tudo bem, agora vamos para esse componente. E aqui também temos que definir isso. Ok, então vou copiar este porque será o mesmo. E aqui temos que passar o botão. Então, aqui no Click, o que podemos fazer. Então, no onclick, podemos usar esse botão para que possamos passar essa receita. Ok, vamos salvar esse arquivo e vamos para o arquivo de texto ab.js. Agora, uma vez que essa prata que eu parecia se tornou verdadeira, então temos que abrir o modelo. Então, depois dessa linha MDB, temos que basicamente fazer esse componente modal. Então, se for verdade, então temos Bu, componente do modelo de exibição. Então, vamos trazer esse modelo competente que criamos. Então, retiramos automaticamente esse componente importante para mim. E aqui temos que passar adereços como um show set. Então, como isso solicita e já definimos em nosso componente de modelo, aqui será o NCP. E aqui também temos dois caminhos. Agora vamos salvar esse e verificar em nosso navegador se está funcionando ou não. Então, vamos atualizar este. Vamos clicar em qualquer componente do cartão. Agora você pode ver que podemos exibir mais algumas informações sobre essa receita específica, como calorias e ingredientes. Então, isso também é feito. Então, tudo está funcionando. Você pode ver lá. Então, criamos este aplicativo de receitas de comida com a ajuda da consulta de artigos no React. Então, vou abrir um console, independentemente de termos algum problema ou não neste aplicativo atual. Então você pode ver que temos algum tipo de aviso. O aviso por enquanto podemos ignorar. E vamos corrigir esse segundo aviso. Vou entrar no meu VS Code. E aqui podemos usar a chave. Então t é igual ao índice. Vamos salvar esse arquivo. Vamos para o navegador. Atualize este. Agora, não estamos vendo esse aviso relacionado ao componente do nosso cartão. E você vai ignorar esse aviso por enquanto. Então, vamos fechar esse. 27. Tipos de fixação do projeto 2: Vamos trabalhar no tipo que realmente não trabalhamos até agora neste aplicativo. Então, vamos voltar ao VS Code. E se eu dissesse Amy, ok, então você pode ver que em todos esses arquivos diferentes e diferentes, temos que usar o tipo como qualquer outro. Portanto, nem parece que estamos trabalhando com o TypeScript. Então você pode ver que usamos qualquer um aqui. Nós usamos algum aqui. Vamos trabalhar nesse tipo. Ok? Então, o que eu vou fazer em tempo parcial criar uma pasta aqui que seja comum. E eu vou criar um tipo de arquivo. Ok? Agora, se você observar o componente no modelo, ponto TSX. Então, aqui temos uma receita. A receita deveria ser um objeto correto, que continha dados de imagem do ingrediente. Ok, então vamos definir o tipo para isso. Então, vamos exportar o tipo. E isso deve ser o tipo de destinatário e o conteúdo da receita, a propriedade como rótulo. Então, será uma imagem treinada. Também será uma primavera. Depois, temos as calorias, que serão uma linha de ingredientes. Linha de ingredientes para ingredientes. Isso será adicionado e ele tomará uma bebida. Ok. Agora vamos salvar esse arquivo. Vamos usar este modelo dot css. E aqui podemos trazer este. Portanto, isso estará no código do tipo STP. Importe automaticamente esse tipo para mim. Então, eu trouxe esse tipo de receita desta parte. E aqui também temos uma digitação ampla de qualquer outro tipo. Então, aqui x seria do tipo LTP. E então, o que podemos fazer para isso, porque ele vem do nosso arquivo txt do aplicativo dot. Ok? Então, aqui está o que temos que fazer, então React dot dispatch. E aqui será o axial do react.net e o booleano de falha. Temos que atribuir booleanos. Ok? Agora, depois disso, o que temos que fazer. Então, aqui você pode ver que recebemos um aviso. Vamos para esse arquivo app.js. Aqui. Você pode ver que recebemos um aviso aqui. Então, por que estamos recebendo esse aviso? Porque se você voltar para esse arquivo de texto ab.js , onde ele é novo, então aceitando uma receita como argumento. Ok, então o que podemos fazer é fornecer a receita. E a partir daqui também temos que fornecer a receita mesmo se você estiver fechando o modelo. Porque agora estamos trabalhando com esse grupo, então temos que fornecer a receita. Depois disso. Vamos para esse arquivo de texto ab.js. E aqui, o que temos que fazer? Portanto, não podemos escrever como nenhum aqui novamente, porque você está trabalhando com o TypeScript. Então, o que podemos fazer aqui é que será apenas do tipo LTP. Portanto, temos que trazer novamente o tipo tippy desse caminho, o código VS importa automaticamente esse para mim. Aqui. Vai ser uma grande, ok? E aqui temos que simplesmente não devolver nada. Portanto, essa é a menor, pequena correção que estou fazendo neste aplicativo relacionada ao tipo. Agora, também precisamos trabalhar no clique da alça. Não clique em nada , mas é um menu suspenso. Então, aqui será o evento de mudança de pontos do React. E será elemento HTML, elemento de seleção de HTML. Como você pode ver que eles foram tratados posteriormente, usamos apenas em um menu suspenso. Ok, então é por isso que é um elemento de seleção de HTML. Agora recebemos um aviso. Ok, então vamos para o navegador. Agora você pode ver que está dizendo como a reunião de objetivos, seguindo a propriedade do tipo receita, tipo de artefato, esse problema. O que ainda podemos fazer de novo. Portanto, agora não deve ser um objeto vazio. Ok? Ah, sim. Temos que trazer esse tipo de receita. O tipo tippy já foi importado. Agora, dentro disso, temos que definir o valor inicial. nível será a string inserida somente porque tudo será a entrada D inicialmente. E a imagem também deve estar nas taxas de colocação que temos, então será zero. E temos as linhas de ingredientes. Então não deveria ser, deveria estar em uma era bonita. Agora esse aviso desapareceu. E vamos trabalhar nessa parte também, que definimos estados diferentes e diferentes. Portanto, também temos que mencionar o tipo aqui. Então, aqui será uma corda. Ok? Isso também é uma árvore. Isso também é uma string. E este é um booleano. Vamos salvar esse. E é aí que usamos qualquer outro momento neste arquivo. Então, usamos qualquer um aqui também. Para isso, o que podemos fazer indexando, podemos dar aqui o número. E aqui. Podemos usar essa função. Em arquivo modelado ou TFX. Nós definimos essa função. Então, podemos trazer essa interface desse arquivo e podemos usá-la aqui. Função de adereços. Então eu acho que temos que exportar, exportar, exportar nossa interface. Vamos ver, use-o aqui. Função. Nós adicionamos um código que importamos automaticamente este para mim. Então, agora não temos nenhum outro tempo neste arquivo até agora. Vamos voltar ao arquivo modelado ou TSX novamente. Então, aqui também, compramos qualquer um. Então este é o JSX, ok, então deve ser uma estranha fonte epitelial. Ok. E vamos usar sua profundidade também. Não deve ser um número e deixar você usar sua chave. Caso contrário, você receberá um aviso. Como se cada criança devesse ser única. Então, vamos usar seu índice. E acho que também no componente do cartão, estamos usando qualquer outro tipo. Então, aqui podemos trazer esse tipo de receita, tipo de receita para esse caminho. E para isso também, deveria ser uma receita. Ok? Aqui já estamos passando a receita. Em qualquer lugar que tenhamos deixado, substituímos ME pelo tipo adequado em nosso arquivo antigo, onde usamos qualquer outro tipo. Agora, vamos voltar ao navegador e verificar se ele está funcionando ou não. O fato é que eu definitivamente acho que estamos trabalhando nessa obrigação. Ok, vamos atualizar esse aplicativo. Vamos selecionar qualquer coisa. Ok? Isso também está funcionando. O aplicativo está funcionando normalmente depois de definir o tipo adequado em nosso código. Então é isso desse vídeo. 28. Projeto 2 Wrap-up: Portanto, conseguimos criar com sucesso este aplicativo de receitas de alimentos com a ajuda da consulta RTK. Nesta seção, espero que agora você tenha aprendido a usar a API de terceiros com a consulta de artigos. Portanto, espero que você tenha aprendido alguns conceitos importantes relacionados à consulta art k nesta seção. Então, muito obrigado, pessoal, por assistirem a esta seção. Continuarei adicionando mais projetos relacionados ao kit de ferramentas de redação, um artigo, uma consulta. Neste curso. 29. Finalização: Se você estiver assistindo a este vídeo, isso significa que você concluiu este curso. Agora, estou totalmente confiante de que você tem pouca compreensão do conceito de arte jQuery com o React. Espero que você tenha gostado deste curso com algum novo quantitativo redact e ainda tenha alguma dúvida de nossa consulta relacionada a este curso, então você sempre pode portfólio valioso pensamento na seção de comentários, Vou tentar o meu nível melhor para resolver sua consulta. É isso. Do meu lado, te verei no próximo curso.