Reaja ganchos de forma mais fácil (com o React Router v6, Axios, validação de formulários e atalhos)

1. Apresentação: Bem-vindo à aula de ganchos do React. Nesta aula, você aprenderá todos os React Hooks em uma linguagem simples e fácil que qualquer pessoa pode entender. Então, primeiro de tudo, veremos o que são ganchos e por que precisamos deles. Depois disso, começaremos com o gancho mais útil, que é usado. E mais alguns ganchos, como efeito de uso, contextos de uso e assim por diante. Além disso, veremos a biblioteca de acesso para buscar dados da API, lidar com palmas, uma validação e muito mais. Depois de concluir esta aula, darei a você um projeto, que é o rastreador de preços de criptomoedas. Você receberá todas as instruções na seção do projeto. Estou muito animado com essa aula e espero que você também esteja. Então, vamos começar. 2. O que são ganchos?: Antes de mergulharmos no usted hook, vamos entender primeiro, o que são ganchos? Se você já sabe, você pode pular esta parte e pular diretamente no gancho usted. Então, o que são ganchos? Hooks são as funções para usar alguns pregadores de reação em componentes funcionais. Em outras palavras, podemos dizer que ganchos são funções que fazem com que componentes funcionais funcionem como componente de classe. Sei que parece complicado, mas não é. Vamos entender com uma história. Antes do react lançar ganchos. Há apenas uma maneira de usar métodos de estado e ciclo usando os componentes de classe. Agora, os desenvolvedores tiveram alguns problemas com componentes de vidro. Portanto, dedique algum tempo para desenvolver funções especiais que podemos usar em componentes funcionais e que funções especiais são chamadas de ganchos. Então eu acho que agora você entende o que é React Hooks, que são funções que fazem componentes funcionais funcionarem componentes de classe ao vivo. Vamos começar com nosso primeiro gancho, que é usado. 3. Gancho mais importante - useState: O que é usado? Ele usou o gancho é uma função para adicionar estado no componente funcional. Agora você pode perguntar o que é estado? Portanto, o estado nada mais é que apenas valores ou variáveis do seu componente. Em outras palavras, todas as variáveis em seu componente são chamadas como estado do componente. Sempre que você quiser criar uma variável, então você tem que usar o usted hook, simples assim. Vamos entender com o exemplo. Aqui, eu tenho um novo aplicativo React e excluí todos os arquivos desnecessários disso. Então, primeiro, deixe-me criar um componente funcional usando um FCE. Esta é a imagem para criar os componentes funcionais. Mas você precisa instalar essa extensão ESL e reagir primeiro. Adorei essa extensão. Isso aumenta minha produtividade no React. Agora, aqui vou criar um contador simples, exibe o valor do contador e um botão chamado na Grécia. Quando clicamos nesse botão, valor do contador aumentará em um. Agora, é aqui que eu quero exibir o valor do contador. Precisamos do estado. E é aqui que usamos, usamos ganchos. Para usar qualquer gancho. Primeiro, precisamos importar isso da biblioteca React, aqui mesmo, usted. Ok, aqui vamos chamá-lo de função de estado. E damos ao nosso contador valor inicial como 0. Agora, essa função retornará uma matriz. Então, vamos consolidar. Veja. Essa área tem dois elementos. O primeiro elemento é nosso valor original, que é 0, e o segundo elemento é uma função. Então, vamos fazer esse primeiro elemento na contra-variável e exibido aqui usando colchetes. Salve as alterações e dê uma olhada, nós pegamos nosso contador. Agora, o segundo elemento dessa matriz retorna uma função. Usando essa função, podemos atualizar nossos valores de estado. Então, vamos armazenar esse elemento em variável chamada contador de estado. Agora, qualquer valor que passarmos nessa função será o valor dessa variável de contador. Deixe-me mostrar isso. Aqui. Queremos aumentar o contador em um. Quando clicamos neste botão, Adicionar função no contador de aumento OnClick. Agora precisamos definir essa função. E dentro dessa função, escrevemos set counter. O que é valor conhecido, que é contador mais um. Salve e dê uma olhada. Veja, funciona. E quando atualizamos a página, ela começa novamente com 0, que passamos nessa função do seu estado. Agora, aqui nosso código parece um pouco feio. Por isso, sempre usamos o atalho para essas três linhas, que é chamado de Editar reestruturação. Então, aqui no local de LA, adicione colchetes. E dentro disso, à direita, o nome da variável post, que é contador, e então escreva o nome da função, que é o contador definido. Agora, não precisamos dessas duas linhas. Funciona da mesma forma que antes. E nosso código parece limpo. E você pode usar vários ganchos usted em um único componente. Agora, vamos ver como podemos usar o estado dos EUA para obter valor da entrada. Então, vamos criar uma entrada com um texto de texto. Aqui, precisamos lidar com o evento onchange. E passamos a exploração de uma função de seta. E usamos o valor do ponto alvo para atualizar a variável de estado. Então, o tipo usou aqui. E aqui, podemos dar o valor inicial da nossa variável, neste caso, string vazia. Agora, sempre que o valor desse campo de entrada muda, chamamos a função setName e o valor do ponto alvo bass e dot. Chamamos setName e passamos esse valor. Agora vamos mudar nosso rótulo para nome da variável, clicou. Contador de tempos variáveis, salve as alterações e dê uma olhada. Aqui, temos caixa de texto e quando escrevemos o nome gold, é imediatamente atualizado aqui e também contra atualizações onclick. Agora vamos ver como usar o usted hook quando temos object como uma variável de estado. Então, aqui criamos duas variáveis de estado que são contador e nome. Agora podemos fazer o mesmo com uma variável de estado, que é objeto. Portanto, crie um novo objeto usted e passe como contador de valor inicial para 0 e name2 string vazia. Agora defina seu nome usando editar detalhes de reestruturação e definir detalhes. Agora exclua essas duas linhas. Não precisamos deles. Em vez de escrever o nome, certo? Detalhes do nome do ponto e detalhes do contador de pontos. Aqui na função de aumento do contador, eu removo isso e adivinho o que devemos adicionar? Certo? Temos que adicionar a função set details para atualizar esse valor do contador. Então eu escrevo Detalhes do site. E lembre-se, seja qual for o valor que você passar dentro dessa função, ele será atualizado com o valor original. Então contador de objetos, Carlin detalha o contador de pontos mais um. Salve e dê uma olhada. Sim, funciona. Mas há um grande problema de não termos nosso elemento name dentro desse objeto. Deixe-me mostrar isso. Então, eu simplesmente escrevo aqui os detalhes do console.log e salvei. Agora atualize a página e veja como dois elementos no objeto. Agora, quando clico nesse botão aumentado, o elemento name é removido do nosso objeto. Então, por que isso acontece? Isso acontece porque passamos diretamente o objeto sem adicionar outros valores antigos. Portanto, a solução é, primeiro, adicionamos todos os outros valores desse nome de objeto aqui e apenas atualizamos esse elemento contador com um novo valor. Então, dentro da função de detalhes, podemos passar outra função e essa função pode retornar o valor anterior de nossas variáveis de estado. Não se confunda só de ver isso. Portanto, o anterior é o mesmo que essa variável de detalhes. Deixe-me mostrar que meu console é e adicionar algum texto aqui. Veja, obtemos todos os valores quando clicamos neste botão com erro porque não podemos escrever o console dentro da disfunção. Então, remova isso. E agora usamos o operador spread usando três pontos anteriores. Isso adicionará todos os valores anteriores da variável state. Agora substituímos o contador pelo valor antigo, que é o contador de pontos anterior mais um. Salve as alterações e dê uma olhada. Veja que funciona perfeitamente com o elemento name. Portanto, sempre que você trabalha com um objeto ou uma matriz, precisamos primeiro adicionar todos os valores anteriores usando esse método e, em seguida, atualizar o que quisermos atualizar. Vamos recapitular o que aprendemos. Portanto, usted é usado para criar variáveis de estado em componentes funcionais. Então, para usar o usted hook, precisamos primeiro importar isso e usá-lo dentro do componente funcional. Aqui, você pode passar qualquer tipo de dados como booleano, número, texto, objeto em qualquer coisa e, em seguida, armazená-lo usando a reestruturação addEdge. A primeira variável é seu valor atual. E a segunda é a função para a nossa criação desse valor. Simples assim. Algumas pessoas podem ficar um pouco confusas aqui. E também fiquei confuso quando soube quem foi pela primeira vez. Mas com a prática, aprendi esse conceito e o uso em meus projetos. 4. Lidar com várias entradas (atalho): Vamos ver como lidar com várias entradas que são únicas no manipulador no React, é muito útil quando você tem vários campos de entrada, como formulário de inscrição. No tutorial do USDA, vemos como lidar com um ou dois campos de formulário. Mas imagine se você tiver cinco a seis campos e criar uma variável de estado para cada entrada, o que torna nosso código confuso e difícil de gerenciar. Então, vamos ver como lidar com várias entradas usando uma única função onChange. Aqui temos o componente F da prensa. E neste componente, quero obter detalhes do usuário, como nome, e-mail, senha e endereço. Então, vamos criar um formulário. Sei que alguns desenvolvedores não usam essa tag de formulário e criam diretamente elementos de entrada, mas não é uma boa prática. Agora, dentro deste formulário, quero a tag S3 e o texto do tipo de entrada do nome da passagem. Agora eu duplico esse código mais três vezes usando a seta para baixo do C Plus Plus e mudo segundo comprimido como e-mail e digito para e-mail. Em seguida, para senha e digite senha. E o último é o endereço. E para isso precisamos da área de texto. Então eu removo essa tag de entrada e crio uma área de texto. E, no final, precisamos de um botão, digite enviar e nomeie-o como formulário de envio. Agora salve as alterações e dê uma olhada. Veja, recebemos nosso formulário com todos os comprimidos. Agora, na lição anterior, criamos entradas de variáveis de estado individuais. E então, no onchange, definimos esse valor para nossa variável de estado. Mas nesse método, criamos apenas uma variável de estado para todos os campos de entrada. Tão rápido, eu importo usted da biblioteca React. E em nosso componente funcional, usamos usted e o desestruturamos como detalhes e detalhes do conjunto. Agora eu quero passar um objeto e esse objeto, temos vários campos como nome e seu valor inicial como string vazia, E-mail, string vazia, senha, string vazia. E o último, endereço de string vazia. Agora vamos criar nossa função de mudança de alça. E chamaremos essa função em todos os eventos onchange de entradas. Então aqui eu escrevo sobre mudança e passo a função de mudança de alça. Agora copie isso e cole em todos os campos. Então, sempre que digitarmos qualquer um desses campos, somente essa função será executada. Agora, passo mais importante, e sem esse passo, Nosso, esse método não funcionará. Então, o passo é que temos que adicionar o nome de todas as pílulas como seu atributo de nome de entrada do nosso objeto de estado. Deixe-me mostrar isso. Portanto, para a entrada de nome, queremos armazenar seu valor de entrada nesta propriedade name. Então, adicionamos atributo name igual a name. Agora, para e-mail, queremos definir esse valor de e-mail nesta propriedade de e-mail. Adicionamos o atributo de nome de entrada de e-mail ao e-mail. Agora, para senha, seja passado nome igual a senha e endereço da porta. Passamos nome igual a endereço. Certifique-se de escrever o mesmo nome que você escreve nesse objeto. Agora, dentro dessa função de mudança de identificador, escrevemos nossa lógica principal. Então eu uso esse e como objeto de evento para todas essas pílulas. E vamos console dot target. Salve e dê uma olhada. Veja, quando digitamos nossa entrada de nome, obtemos essa entrada de nome. E quando digitamos outra entrada, obtemos essa entrada. Portanto, nossa lógica é quando digitamos o campo de entrada, obtemos esse nome de arquivo e valor de entrada. E com esse nome, que será o mesmo que nossas propriedades de objeto de detalhes, substituímos seu valor pelo valor atual. Sei que parece complicado, mas não é. Vamos ver isso. E depois disso, todas as dúvidas serão esclarecidas. Eu crio uma variável de nome para E dot target dot name e value variable para E dot target dot value. E vamos consolar as duas variáveis. C. Obtemos FullName e seu valor quando digitamos esses campos de entrada. Agora só precisamos definir esse valor dentro da nossa variável de estado. Deixe-o fazer seu nome. Então, detalhes do lado direito. E na função de retorno de chamada, passamos o parâmetro anterior, qual valor anterior? Então, primeiro de tudo, retornamos São todos os valores anteriores usando o operador spread. Agora temos que atualizar a propriedade com esse valor. Portanto, sabemos que podemos acessar a propriedade do objeto usando colchetes e passar essa variável de nome dentro dela e dois pontos em seu valor. Portanto, se escrevermos algo dentro da entrada de e-mail, primeiro isso retornará todas as propriedades anteriores. E então encontramos o e-mail da propriedade e substituímos seu valor pelo símbolo de valor do campo de e-mail como esse. Vamos desfazer o solo dessa variável de dados e ver se obtemos valores não. Então salve as alterações e dê uma olhada. Veja, quando atualizamos qualquer campo, obtemos seu valor em nosso objeto state. Agora podemos fazer com que esse código seja classificado usando a destruição de objetos. Então eu escrevo E dot target e usando a estruturação de dados do objeto, armazenamos nome e valor em uma variável. Então, essas duas linhas, iguais a esta linha. Então eu removo essas duas linhas. Agora, quero consultar esse objeto Detalhes quando clicamos no botão enviar. Então eu crio uma nova função chamada handle submit e arma todos esses detalhes objeto. Agora, no evento onsubmit tag do formulário, chamamos essa função. Agora salve as alterações e dê uma olhada. Deixe-me escrever todos os detalhes. E então eu clico no botão enviar. Veja, por apenas 1 segundo, está impresso. E então nossa forma é reprimida porque é o comportamento padrão da forma. Sempre que enviarmos o formulário, essa função será executada e, em seguida, reprimirá a página. Então temos que parar com isso. Usamos esse e como objeto de evento e escrevemos a função padrão de prevenção de ponto E. Isso evitará o comportamento padrão das palmas das mãos. Então salve as alterações e dê uma olhada. Veja, obtemos detalhes no console. Em seu projeto. Você pode chamar a API nessa função e enviar todos os detalhes para o servidor. Então, espero que você goste desse método. Se você tiver alguma confusão. Esse tutorial foi mais uma vez. E tente aplicar esse método em seu projeto para tirar suas dúvidas. 5. useEffect na profundidade: Use o pino é usado para realizar efeitos colaterais em nosso componente. Então, o que são efeitos colaterais? Efeitos colaterais, nossas ações que são realizadas com o mundo exterior. Executamos um efeito colateral quando precisamos alcançar fora dos componentes do React e fazer algo. Que exemplo, buscar dados da API, atualizar diretamente o DOM no qual usamos o objeto document ou window e funções de timer como setTimeout ou set interval. Esses são os efeitos colaterais mais comuns no React. Então, para realizar qualquer tipo de efeitos colaterais, precisamos usar, usar o efeito Hooke. Vamos ver um exemplo. Aqui. Eu criei uma variável de estado e seu valor aumentará em um. Quando clicamos nesse botão para usar qualquer gancho, precisamos primeiro importar dados da biblioteca React. Então eu escrevo aqui, uso efeito, e agora podemos usá-lo no componente funcional. Portanto, use um vetor , exceto dois argumentos. Retorno de chamada, que é uma função na qual escrevemos nossa lógica de efeito colateral. Essa função é executada sempre que algo neste componente. E segundo, dependências, que é uma área de variáveis e é um argumento opcional. Em termos simples, o primeiro argumento é o que executar e o segundo é quando executar. O efeito do usuário é executado em cada renderização, que significa que quando o que significa que quando a contagem muda ou quando isso acontece, podemos controlar isso por dependências. Se você estiver familiarizado com os componentes da classe, use effect é uma combinação de component did mount, component data update e component will mount. Vamos ver a variação dos ganchos de efeito de uso que são apenas três variações do vetor do usuário. Primeiro, use-o sem nenhuma dependência. Em segundo lugar, efeito de usuário com uma matriz vazia e terceiro usuário com variáveis. Vamos ver a primeira variação do gancho vetorial do usuário. Certo? Use-o e passe apenas a função de retorno de chamada. E nessa função, quero atualizar nosso título da web com esse mesmo método. Tão certo, o título do ponto do documento é igual a dois em acentos graves, novas mensagens da conta em dólar e salve-o. Atualize a página e veja sempre que esse componente renderizar, use if x r1 e nosso título for atualizado com nossa mensagem. Agora, quando algo muda esse componente significa que clicamos neste botão e ele é executado, use um livro vetorial intitulado alterar com contador. Então, quando usamos o usuário de volta para enganchar sem nenhuma dependência, o efeito de uso será executado em cada alteração nesse componente. Nesse caso, é um componente de aplicativo porque temos efeito de ideias no componente do aplicativo. Agora vamos ver o efeito de uso com uma matriz vazia. Então, neste mesmo exemplo, passamos um array vazio dependências de fato do usuário final. E vamos ver o que aconteceu. Então salve-o e dê uma olhada, atualize a página e veja se o Exelon quando o componente renderizar. Agora, quando clicamos nesse botão, o que significa que o contador vai mudar, mas o título não está operando nessa alteração. Quando passamos um vazio nas independências, o efeito de uso será executado apenas uma vez. Quando nosso componente é renderizado pela primeira vez. Depois disso, nunca fugiremos. É útil quando costumávamos buscar dados da API ou do servidor que buscavam dados quando o componente é renderizado pela primeira vez. A propósito de nós, o gancho está disponível na descrição. Agora vamos ver a última variação do efeito do usuário, que é quais variáveis. Então, para entender esse conceito, crio outro nome de variável de estado ou o botão Conta que aumentará o contrariado pelo Phi. Agora eu quero mudar o título quando mudamos apenas outro estado de contagem ou que precisamos passar outra variável de contagem nessa dependência LA. E eu mudo essa variável de contagem com outra conta. Salve as alterações e dê uma olhada, atualize a página e veja que ela funciona perfeitamente no Render. Agora, quando clico nessa outra variável de estado de contagem, título está sendo atualizado com esta fita. Mas quando clicamos nesse botão antigo, ele não funcionará porque passamos nossa nova matriz de independência de variável. Portanto, use-o apenas quando o valor dessas variáveis de estado for alterado e você puder passar mais variáveis usando vírgula. Agora, a parte final desse gancho de efeito de uso é a função de limpeza. E é um pouco confuso para iniciantes. Vamos entender com outro exemplo. Para que todos possam entender. Aqui eu usei função setInterval chamada timer de contagem regressiva. Esse intervalo não vai parar a menos que usemos a função clear interval. Se estivermos definindo o estado usando setInterval e esse efeito colateral não for limpo quando nossos componentes estão em montes, ou não estamos mais para usá-lo, o estado é destruído com o componente, mas a função de intervalo de negociação continuará em execução. E isso torna nossos aplicativos lentos e com baixo desempenho. Portanto, é importante limpar essas funções. Então, para usar a função de limpeza, precisamos executar a função escrita no efeito de uso. Deixe-me mostrar isso aqui. Neste uso, se eu tivesse escrito função de seta. E dentro desta função, iodeto clear interval e passa o nome da variável da função setInterval, que é timer. Agora a função de limpeza será chamada quando o componente for desmontado. É difícil ver neste exemplo, eu criei um contador e, em seguida, atualizei esse contador no ButtonClicked by one. Agora eu crio uma nova função de vetor de usuário que conta a dependência e escreve console.log em torno do efeito com a variável count. Então, quando a variável count mudar, o usuário executa e agora eu escrevo a função return. Dentro desta função, eu simplesmente consolo a limpeza do log de pontos. Também com variável count. Estamos apenas tendo a ideia quando a função de limpeza funcionará. Portanto, salve as alterações e dê uma olhada, atualize a página e ela está funcionando na renderização pós-renderização. Agora, sempre que eles usarem, se eu pudesse executar, novamente, toda a função de limpeza será executada em pausa e, em seguida, essa função de retorno de chamada será executada. Vamos ver esse slide. Aqui, é sobre renderização proposta. E quando clicamos nesse botão aumentado, o que significa que esse usuário será executado até que a limpeza com valor 0 seja executada. E então a função de retorno de chamada imprime para o valor um. Agora, novamente, clicamos neste botão onde função de limpeza anterior será executada e, em seguida, chamaremos o plano de fundo. Portanto, a função de limpeza não é necessária em todos os casos. Só é necessário em alguns casos, como quando você precisa parar um efeito colateral repetido quando seu componente é montado. Simples assim. Vamos recapitular. O que aprendemos. Eu uso o efeito é usado para realizar efeitos colaterais, como corrigir a manipulação de dados com documento e janela. Eventos de temporizador como setInterval e setTimeout. Use-o. Aceite dois argumentos. O custo é por função de retorno de chamada e o segundo é para dependências, que é opcional em termos simples, o que executar e quando executar. Existem três variações de uso se eu lidar sem dependências, o que significa que ele é executado com pós-renderização e também é executado em qualquer alteração nesse componente. Segundo, com uma matriz vazia, o que significa que ela é executada somente na pós-renderização e é útil para corrigir dados. Terceiro, state e props, o que significa que ele é executado na pós-renderização. E então, qualquer variável que passarmos por independências muda. Vai ser simples assim. Tempos limite, assinaturas, ouvinte de eventos e outros efeitos que não são mais necessários devem ser descartados com a ajuda da função de limpeza. 6. Como furar dados com o AXIOS: Neste tutorial, vamos aprender o que é ICOs, por que precisávamos como passar dados usando alguns erros para evitar. E meu truque favorito para usar axiomas no React, basicamente tutorial completo em z OS. Então, não vamos perder tempo e começar. Então, primeiro de tudo, o que são Axioms? Axiom é um pacote usado para fazer uma solicitação HTTP do navegador uma maneira fácil e melhor patch em JavaScript, podemos dizer axioms é a versão atualizada dele porque XES fornece melhores facilidades Solicitação HTTP, quase 70% dos usuários usam x igual para fazer solicitações HTTP para back-end, como o NodeJS. Aqui estão algumas vantagens de usar z OS no React. Se você usa o método Bayes, primeiro temos que passar os dados para formato JSON e depois podemos usá-los. Mas SEOs é, por padrão, usar o formato jason, o que significa que X anos converte automaticamente os dados para o formato JSON quando obtemos dados do servidor. E é por isso que precisamos usar apenas um método then. E isso torna nosso código limpo e fácil de entender. Seo's fornecem todos os tipos de métodos HTTP como GET, post, PUT, elite e muitos mais. Podemos fazer melhor no manuseio usando x anos. Então isso é muito para teorias. Agora, vamos ver como usar o XES no reagente. Então, aqui eu crio um novo aplicativo React e removo todos os arquivos desnecessários. Agora vá para danos e.com. Essa é uma das minhas APIs favoritas para testes. Aqui podemos ler sua documentação, se você quiser. Agora role para baixo até Recursos. E aqui você pode ver dados diferentes, como detalhes do produto , guardas, usuários, postagem, etc. Agora você pode não ver esses dados no formato JSON assim, porque estou usando esse formato ou extensão JSON. Essa é uma ferramenta muito útil para ver dados JSON no navegador. Você vai instalá-lo na Chrome Web Store. Aqui podemos obter os dados fictícios dos produtos dessa API. Usamos o XES para chamar a API e exibir esses dados usando o método map. Então, primeiro de tudo, abra os zeros de volta como no NPM, e veja que ele tem 2,4 milhões de downloads semanais, o que é insano. Então, vamos copiar esse comando npm e colá-lo no VS Code Terminal e pressionar Enter. Portanto, ele foi instalado com sucesso. Podemos verificá-lo pelo arquivo package.json C. Obtemos x anos de independência. Agora eu fecho este arquivo e no app.js, enquanto eu importo eixos vai do pacote x equals. Portanto, podemos usar zeros nesse componente. Aqui, eu quero passar dados sobre os componentes renderizados pela primeira vez contra os quais precisamos, certo? É efeito usado. Então eu escrevo efeito de uso. E o primeiro argumento é a função de retorno de chamada. E o segundo argumento é uma matriz de dependência. Então, eu só queria passar dados uma vez. Quando os componentes são renderizados, eu passo um array vazio sem nenhuma dependência. Agora, na função de retorno de chamada, buscamos dados da API. Suponha que certo, x ponto aqui nós digitamos método como GET, post, PUT, delete. Então eu escrevo isso. Agora, neste parêntese, passamos a API. Então eu copio essa API e cole-a aqui. Agora, o mesmo que o método fetch. Nós os usamos e usamos a função de seta e passamos a resposta como um parâmetro. E então consola essa variável de resposta para ver o que obtemos. Então salve as alterações e dê uma olhada. Então, obtemos um objeto com configuração, dados, código de status, etc. Então, no objeto de dados, obtemos os produtos. Portanto, temos que armazenar esse array na variável state. Então, de volta ao VS Code, e no topo, eu crio uma variável de estado chamada products e passo um array vazio como valor inicial e importo o gancho usted do React. Agora, nisso, usamos produtos secundários e passamos produtos de ponto response.data. Agora obtemos o valor desse produto na variável do produto. Na escrita, exibimos o nome do produto e seu preço. Então, entre colchetes, mapa de pontos de produtos. E dentro disso, passamos a função de retorno de chamada e passamos parâmetros como produto para um produto e índice individuais. Esqueça o valor do índice deste produto atual e retorne a tag h3. E por dentro passamos entre colchetes, título do ponto do produto e dólar, preço do produto. E passamos o índice como um valor-chave. Agora salve as alterações e dê uma olhada. Veja, obtemos nomes de produtos com o preço deles. Você pode adicionar seus estilos e torná-los mais legais. Por enquanto, estou bem com esses blocos porque estamos aprendendo axiomas. E esse é o nosso foco principal. Assim, você verá como é fácil e simples fazer uma solicitação HTTP. Agora, se você quiser fazer uma solicitação de postagem, você tem que simplesmente encadear esse método para postar e genes além de 0,48. E então, se quisermos enviar dados, você pode passar essa variável como o segundo parâmetro após a API, simples assim. Eu lhe darei todos os tipos de métodos, exemplos no meu XES Ultimate Guide. Você pode baixá-lo na caixa de descrição. Agora vamos ver como podemos realizar o tratamento de erros usando z OS. Então, após esses dez métodos, escrevemos o método do dinheiro. Esse método só será executado quando algo der errado. Neste método then, podemos dizer que, se ocorrer algum erro somente então, o método desses caras será executado. Então, passamos o erro como um parâmetro e consolamos essa variável de erro. Agora guarde e dê uma olhada. Portanto, não recebemos nada no console porque não há erro. Agora eu cometo um erro de digitação nesta ortografia da API. Agora salve as alterações e dê uma olhada. Veja, aqui obtemos objeto de erro com código de erro, mensagem de erro, etc Agora vamos exibir a mensagem de erro no navegador. Então, criamos outra variável de estado chamada error e passamos string vazia como valor padrão. Agora na gaiola, defina erro, mensagem de erro e imprima esse erro no navegador. Aqui, podemos definir condições como se um erro não for igual a uma string vazia, somente então e depois imprimir erro. Então salve as alterações e dê uma olhada. Veja, recebemos uma mensagem de erro. E se eu remover o erro de digitação, ele não mostrará uma mensagem de erro. Agora deixe-me mostrar meu truque para usar axiomas. Então, aqui você pode ver que temos que escrever o URL completo da nossa API quando a chamamos. No mundo real, você tem a mesma origem para todas as suas APIs em um projeto. Portanto, sou muito preguiçoso em escrever código duplicado. Não é uma boa prática. Então eu crio uma variável reutilizável e a uso no meu projeto. Então, vamos criar um novo arquivo chamado XES dot js. E nesse arquivo, eu insiro x anos. Agora crie uma nova variável chamada instance. Você pode chamá-lo do que quiser. Isso não importa. E exportar essa variável padrão. Aqui, eu escrevo X anos dot create. E nessa função create, podemos passar um objeto. E nesse objeto, adicionamos URL base. E em vírgula invertida, peguei esse URL base e colei aqui. Agora salve as alterações. E em nosso componente de aplicativo, eu removo esses SEOs e importo nossos novos axiomas do arquivo zeros dot js. Agora salve as alterações e dê uma olhada. Funciona da mesma forma que antes. Então, agora não precisamos escrever esse URL base de novo e de novo. Mas lembre-se de que você precisa importar X anos do nosso novo x igual a cinco. Se você foi importado do pacote axioms original, então você tem que escrever o endpoint com URL base. Portanto, se você receber um erro nesse método apenas de onde você importa X anos. Agora, última e última parte, XES com assíncrono aguarda, o que o torna super legal. Portanto, a espera assíncrona é a melhor maneira lidar com promessas em JavaScript. Deixe-me explicar que você insere em nosso componente de aplicativo, eu crio uma nova função para produtos de patch, função de dados obter produtos. E dentro dessa função, queremos usar await for response. Portanto, temos que adicionar a função assíncrona, e só então podemos usar await dentro dessa função. Então, certo, de oito zeros , obtenha produtos e armazene esse valor em uma variável chamada resposta e consola essa resposta. Então, basicamente, quando chamamos essa função mais essa API chamará e até obtermos dados, ela não será executada. Próxima linha. Agora eu comento esses axiomas da música e chamo nossa nova função dentro dele. Agora salve as alterações e dê uma olhada. Obtemos o mesmo objeto que obtemos no método. Então, vamos definir produtos, dados de pontos de resposta, produtos pontuais e obter dados impressos em nosso navegador. Agora, alguns de vocês podem perguntar como podemos lidar com o erro nesse assunto? Portanto, a solução é que temos que usar o método try and catch. Então eu escrevo seco e seleciono a segunda sugestão. E isso gerará, tentará capturar o clichê. Agora em seco, escrevemos toda a nossa lógica e nos envolvemos. Nós escrevemos código para tratamento de erros. Eu movo essas três linhas para dentro, tento bloquear e engatar. Eu disse somador e uso esta mensagem de erro. Então, se obtivermos somador neste bloco try somente então e então esse esboço será executado. Caso contrário, o JavaScript ignorará isso para. Agora, vamos fazer dipolo novamente. Salve as alterações. Dê uma olhada, veja, temos somador no topo e funciona bem. Então, de volta ao código VS. E veja que esse cartão postal parece um pouco confuso e nosso novo código parece bem limpo e fácil de entender. Então tente usar async await com x anos. Isso causará uma boa impressão em seu chefe e em seu cliente também. Se você quiser uma revisão rápida sobre SCOs, você fará o download do meu guia de axiomas definitivo na caixa de descrição. Nesse guia, escrevo todos os exemplos de diferentes métodos e casos de uso. E, como bônus, você sabe como usar o XES com o async await. 7. useContext: O que é usado contexto. Use contexts hook é usado para gerenciar dados globais no aplicativo React, como estado global, equipe, serviços, configurações de usuários, etc. Vamos entender por que precisamos usar o gancho de contextos. Então, aqui está uma situação. Imagine que você crie um aplicativo com esse tipo de estrutura de componente. Portanto, o componente principal é o aplicativo e, em seguida, tem para os componentes filhos. E os componentes j também têm algum componente genético. Então, é como uma hierarquia de componentes. Agora, imagine que temos detalhes do usuário, esse componente do aplicativo e precisamos dos detalhes do usuário nesta única postagem. Se você usar adereços para compartilhar esses detalhes, precisamos primeiro passar o componente principal, depois passar o feed e depois a postagem seguinte. E então obtemos os detalhes do usuário em um único componente de postagem. Portanto, é muito irritante e difícil de manter. Os contextos de uso nos ajudarão a criar dados globais para nosso aplicativo React. E não precisamos passar dados por todos esses componentes. Começamos a acessar esses dados em todos os componentes de que precisávamos. Agora vamos ver como criar contextos. Portanto, criar contextos no React requer três etapas simples. Primeiro, criando o contexto, segundo, fornecendo o contexto, e terceiro, consumindo o contexto. Então, vamos começar com a etapa número um, criando os contextos. Estamos criando o estado global para o registro do usuário em ambas as funções de criação de contextos da biblioteca React. Essa função é usada para criar contextos. Agora, logo antes do seu componente funcional, crie contexto e armazene isso em uma variável chamada contextos de login, você pode pegar o que quiser. Agora, para a etapa número dois, que está fornecendo o contexto. Então, depois de criar o contexto, precisamos definir em quais componentes queremos acessar esses contextos. Então, novamente, nessa hierarquia, se você quiser passar dados para um único componente post, só precisamos fornecer os dados para o componente principal e isso pode ser acessado em todos os seus componentes filhos. Então, em nosso exemplo, queremos acessar esses dados no componente principal. E tem componente filho, postagem única, contextos de login corretos, provedor de pontos, e adiciona componente de dívida entre esses contextos, provedor, qualquer componente que você passe entre esse provedor, ele e seu filho pode acessar o valor desses contextos. Agora podemos passar valor usando o atributo value. Então, certo, valor igual a entre colchetes, eu simplesmente passo por aqui. Agora vamos ver como acessar essa variável dentro do nosso componente de postagem única. Então, abra o componente no qual você deseja usar essa variável. Para usar a variável de contextos de login, precisamos usar, usar o gancho de contextos. Contextos de uso tão importantes da biblioteca React. E dentro desse componente funcional, certo, use contextos. E ele aceita um argumento, que é o contexto de login. Então, precisamos importar esses contextos de login do nosso componente de aplicativo. Então, vamos primeiro exportar isso do componente do aplicativo e, em seguida, importar os contextos de login do componente do aplicativo. Agora passe esses contextos de login dentro do gancho de contexto dos EUA. E armazenamos esse valor em uma variável chamada login. Então, vamos consolá-lo, salvar as alterações e dar uma olhada. Veja, nós passamos. Portanto, seja qual for o valor que você passar neste provedor de contexto, um excesso desse valor usando o gancho de contextos de uso. Se você entender essas três etapas, parabéns, você entende o gancho de contextos de uso. Vamos recapitular rapidamente o que aprendemos. contextos de uso são usados para gerenciar dados globais no React. Portanto, não precisamos passar esses dados por meio de props do primeiro componente pai para o último componente filho. Se quisermos passar dados apenas para o componente filho, você pode usar adereços. Não use contextos em todos os lugares. Basta usá-lo quando precisar. Agora, para usar contextos de uso, você precisa apenas seguir três etapas. Primeiro, crie o contexto, usando criar contexto e dê nome aos contextos como fizemos com os contextos de login. Agora, segunda unidade para decidir quais componentes podem acessar esses contextos com o uso de contextos dot, provider e passar outros componentes entre essa tag provider no atributo value, pass value dentro de suportes encaracolados. E último passo, você precisa importar esses contextos do seu arquivo e passar esse contexto dentro de você usar contextos, enganchar e armazená-lo em variável, simples assim. Agora você verá que nosso componente de aplicativo parece um pouco feio, mas é simples. Contextos. Imagine se tivermos contextos phi ou seis, então você simplesmente não gosta de codificar nesse projeto. E se você estiver trabalhando para uma empresa, eles também não gostam de código não organizado. Então, vamos criar uma estrutura organizada para criar contextos. Então, primeiro de tudo, eu crio uma nova pasta na pasta de origem chamada contextos. Criamos todos os contextos aqui nesta pasta. Agora crie um novo arquivo nessa pasta chamado contextos de login fornecidos ab.js. E neste arquivo, salvamos nossa antiga lógica de contextos de login. Então, primeiro, eu crio uma imagem usando um FCE. Agora eu apenas copio esses contextos de criação do componente do aplicativo e colei aqui. Agora, em troca, temos que definir o provedor. Portanto, adicione contextos de login, provedor de pontos e provedor de dívida interno. Temos que passar todas as crianças, direto em adereços crianças e passar as crianças dentro do provedor. Agora, forneça um atributo de valor no provedor. E eu quero passar o valor da data para esses contextos. Então eu crio detalhes do usuário e passo o valor padrão true. Você pode passar qualquer tipo de dado e passar essa variável de estado em valor. Agora, de volta ao nosso componente de aplicativo, É importante que o provedor de contextos de login e substitua o provedor pelo provedor de contextos de login. Porque passamos crianças para dentro do provedor de dívidas e removemos coisas desnecessárias desse componente. Agora, última e última etapa, os genes desses contextos passam do aplicativo para nossos contextos. É menos provedor de contextos de login. E é isso aí. Organizamos esse código feio em código organizado. 8. useRef: Então, o que é usuário? usuário F nos permite acessar elementos DOM e também criar variáveis mutáveis que não renderizarão novamente o componente. Esses são os dois casos de uso mais comuns do usuário if hook. Deixe-me mostrar como criar uma variável mutável. Então, neste exemplo, eu criei um campo de entrada e um evento onchange, atualizo esse estado de nome com o valor de entrada atual e exibo o nome aqui. Agora, imagine que queremos contar quantos fornecedores acontecem quando inserimos o nome. Quando ensino isso aos meus alunos, eles me perguntaram por que não podemos usar, usaram para isso. E eu acho que você pode ter a mesma pergunta. Então, vamos ver isso ao vivo. Por que não usamos usted hook what count renderiza. Então, primeiro, eu crio mais uma variável de estado e dado nome count e passo 0 como o valor padrão. Agora no efeito de uso, atualizarei a contagem em um para cada renderização. Iodeto disse Contagem anterior, função de seta, anterior mais um. E depois do nome, vou exibir a variável count. Agora salve-o. Dê uma olhada. Veja, count está constantemente atualizando porque quando esse componente é renderizado, ele atualizará a variável de desconto em um. E como essa variável de estado é atualizada, o componente é renderizado repetidamente. Então, estamos presos em um loop infinito porque usamos data de uso. Então, vamos resolver isso com um gancho de aplicativo do usuário. Então eu removo essa variável de estado e uso o efeito e importo o usuário f da biblioteca React. Agora certo, usuário f. E aqui podemos dar um valor padrão igual ao que você afirma. Agora, essa função retorna um objeto com uma propriedade atual. Então, vamos armazená-lo em uma contagem variável. E vamos consolar essa variável c, Obtemos objeto com uma propriedade atual. Podemos atualizar ou mostrar esse valor usando a propriedade count dot current aqui, right, count dark current e salvar as alterações. Agora vamos atualizar esse valor quando o componente renderizado, à direita, usar uma contagem de animais de estimação igual a contar o ponto atual mais um. Salve e dê uma olhada. Quando digitamos na caixa de entrada, contagem é atualizada em um. Portanto, o primeiro caso de uso do usuário F é criar uma variável mutável sem causar uma nova renderização. Agora, vamos ver o segundo caso de uso do aplicativo do usuário, que está acessando os elementos DOM. No React, podemos adicionar um atributo href ao elemento, acessá-lo diretamente. Vamos entender com o exemplo. Então, aqui temos uma caixa de entrada e um botão. Quando clicarmos nesse botão, essa função será executada. Agora, eu quero alterar a largura dessa entrada. Quando clicamos nesse botão. Podemos fazer isso no Vanilla JavaScript usando document.getElementById ou pelo nome da classe. Mas no React, não precisamos fazer isso. Nós usamos diretamente, usamos rep e obtemos esse elemento em variável. Deixe-me te mostrar isso. Até agora, o mais importante, use rep, hook and write user e armazene isso em variável. Agora dê a essa entrada uma propriedade que f é igual ao elemento de entrada, que é o nome da nossa variável ref. Agora vamos consultar o valor atual C. Obtemos esse preenchimento de entrada na propriedade atual. Agora vou alterar essa entrada com 2300 pixels. Então, como estamos fazendo JavaScript vanilla, certo? Corrente de ponto do elemento de entrada, estilo de ponto, largura do ponto igual a 300 pixels. Aqui, a corrente de ponto do elemento de entrada é nossa pílula de entrada. Então guarde e dê uma olhada. Veja, quando clicamos nesse botão, largura de entrada é aumentada para 300 pixels. Agora vamos nos concentrar nessa entrada quando clicamos nesse botão. Então, de volta ao código VS. E na mesma função, tenho que acrescentar, adivinha? Certo? Elemento de entrada ponto atual ponto pocus. Então salve as alterações e dê uma olhada. Quando clicamos nesse botão, largura da entrada aumenta e a entrada está em foco. É o mesmo que fazemos no Vanilla JavaScript, apenas para usar o elemento de entrada dot current. E depois disso, você pode acessar todos os métodos JavaScript para o elemento. Agora, alguns de vocês podem perguntar : como podemos saber quais métodos podemos usar com elementos e como podemos lembrá-los? Portanto, a resposta é você não precisa se lembrar de nenhum nome de método. Deixe-me mostrar meu truque para ver todos os métodos que podemos usar com elementos. Aqui. Basta remover essa propriedade atual e salvá-la. Agora no console, você pode ver esse objeto de elemento de entrada com a propriedade current. Agora clique nesta pequena seta e clique novamente nessa seta. Aqui você pode ver todos os métodos que podemos aplicar neste elemento. Que exemplo queremos aplicar estilo. Então, role para baixo até o final e clique neste ícone para ver mais propriedades. Aqui você pode ver a propriedade de estilo. Clique nele e você poderá ver todas as propriedades de estilos, simples assim. Então, vamos recapitular o que aprendemos. Usar rep nos permite criar variáveis mutáveis que não causam rerenderização. E é muito útil acessar elementos DOM sem escrever document.getElementById ou pelo nome da classe. Então, aqui está a sintaxe do gancho do aplicativo do usuário. Aqui podemos passar o valor padrão dessa variável e ela é opcional. Essa variável tem um objeto, e esse objeto contém apenas uma propriedade atual. Se quisermos acessar ou atualizar, temos que usar a corrente de ponto variável. Também podemos acessar elementos usando o atributo app deles. Lembre-se do meu truque, com a ajuda do console, podemos ver todos os métodos. 9. useReducer: Então, o que é útil? O redutor. O redutor é usado para gerenciar o estado em nosso aplicativo React. Em outras palavras, usar redutor funciona como uma declaração. Agora você pode perguntar, o que é gestão estadual? Portanto, o gerenciamento de estado é usado para gerenciar todos os estados de aplicação de uma maneira mais simples. Para escrever carvão simples e limpo para todos os estados e sempre usar o gancho redutor do usuário quando você tiver muitos estados e métodos para lidar. Então, vamos entender o uso do redutor com o exemplo. Aqui, eu criei um aplicativo de contador simples usando o gancho did dos EUA. Portanto, temos uma variável de contador e dois botões, aumentar e diminuir. Então, quando clicamos no botão aumentar, contagem aumentou em um. E se clicarmos em graus beta1, contagem diminuiu em um. Exemplo muito simples. Agora vamos aplicar o redutor de uso neste exemplo. Então, primeiro de tudo, deixe-me limpar essa variável de estado. Agora, é importante usar a biblioteca React de gancho redutor no componente funcional, certo? Use redutor. redutor aceita dois argumentos. A primeira é a função redutora, que gerenciará todos os estados. E o segundo é nosso estado padrão. Por enquanto, esqueça essa função redutora. Veremos isso depois da explicação. Agora, vamos primeiro definir nosso estado padrão. Então, vou criar um objeto no qual podemos definir todos os nossos estados. Portanto, escreva o estado inicial igual ao objeto. Não contaremos variáveis. Então conte dois pontos 0. Agora passe esse estado inicial aqui. Este redutor de usuário retorna um array igual ao que você fez hook, o que significa que o primeiro elemento retornará o estado atual, e o segundo elemento retornará uma função que nos ajudará a atualizar esse estado. Então, vamos usar a reestruturação aditiva. Armazenando essa variável, chamamos de elemento post como estado. E o segundo é o despacho. É o nome mais comum para redutor de uso. Se quisermos usar outro nome, você vai usar isso. Depende totalmente de você. Agora, vamos definir nossa função redutora, que é a parte mais importante de nós, reduzir nosso gancho. Então, dentro dessa função, escreveremos nossa própria lógica para esse redutor de usuário. A função redutora tem dois parâmetros. O primeiro parâmetro é state, o que significa onde nosso aplicativo está atualmente. E o segundo parâmetro é ação, o que significa qual ação temos que realizar. Exemplo, aumento, diminuição, etc. Eu sei que isso é um pouco confuso. Mas depois de concluir o exemplo de puxar, você o entenderá corretamente. Agora, essa função retornará o estado atualizado. Então, por enquanto, estou apenas retornando o objeto com contagem e contagem atual, que é esse estado contagem de pontos mais um. Agora, para chamar essa função, usaremos a função de despacho. Aqui. Na função de aumento de contagem. Eu só ligo para o despacho e não passo nada dentro dele. Agora estou excluindo essa contagem de conjuntos e aqui escrevo a contagem de pontos do estado. Agora salve as alterações e dê uma olhada. Veja, quando clicamos nesse botão de aumento, contagem é aumentada em um. Agora vamos ver como chamar ações diferentes, como aumentar e diminuir. Então, primeiro passamos o objeto na função de despacho com a propriedade de tipo dois pontos na Grécia. Agora temos que lidar com esse tipo nessa função redutora. Então, vamos bloquear esse parâmetro de ação para sabermos o que podemos salvar as alterações e dar uma olhada. Quando clicamos nesse botão aumentado, obtemos objeto com a propriedade. Então, o que quer que passemos nessa função de propagação, podemos acessá-la por esse parâmetro de ação. Então, vamos usar uma mudança de marchas para gerenciar ações diferentes e diferentes. Você pode usar if else, if. Mas eu gosto da caixa de troca, certo, doce. E passe aqui, tipo de ponto exon e dentro dele, certo? Primeiro caso, que é um aumento nestes. Eu escrevi isso. Agora, para o segundo caso, que é diminuído, reescreveu a mesma contagem, mas menos um. E, finalmente, passamos um caso padrão e retornamos o mesmo estado. Portanto, se passarmos qualquer outro tipo exceto aumentar e diminuir, esse valor padrão será executado na função de contagem diminuída. Nós escrevemos, adivinha, certo? Despache no tipo de objeto, diminua, salve as alterações e dê uma olhada. Veja, está funcionando bem. Então, vamos recapitular o que aprendemos. Use reducer é usado para gerenciar estados complexos no aplicativo React. Então aqui está a sintaxe do gancho redutor do usuário. São necessários dois argumentos. A primeira é a função redutora, na qual escrevemos nossa própria lógica. E o segundo argumento é o estado inicial, que é objeto de todas as variáveis. Agora, esse gancho retorna uma matriz com dois elementos. Por isso, usamos a estruturação adicional. primeiro elemento é para o estado atual excessivo, reduza nosso estado inicial. E o segundo elemento é despachado com a atualização direta, simples assim. Agora redefiniu a função redutora, que tem dois parâmetros. O primeiro é usado para acessar o estado atual e o segundo é uma ação reduzida para obter ações diferentes e diferentes. O que quer que passemos nessa função dispersa, podemos acessá-la na função redutora por esse parâmetro de ação. E então, com o uso da caixa de troca, podemos realizar tarefas diferentes. É isso aí. Agora, neste exemplo, eu cometi um pequeno erro ao usar type in string. Portanto, temos que cuidar de seus erros de ortografia em dois lugares diferentes. Então, em vez disso, podemos criar um objeto com ação de nome. E sempre usamos todas as letras maiúsculas para esse objeto de ação. Então, sempre que vemos isso, sabemos que é para redutor. Então, nesse objeto, primeiro, eu crio Aumentar, Aumentar e diminuir ou diminuir. Agora, nos displays, eu o substituo por ações que aumentam e diminuem na dispersão. Também reescreva o aumento da ação e os graus dos pontos de ação. Portanto, agora não há chances de erros de ortografia. E se quisermos mudar por nome, podemos atualizar diretamente neste objeto e em outros lugares, ele é atualizado automaticamente. Agora, eu quero cortar essas três variáveis e colá-las no final deste componente. Portanto, nosso código parece limpo e fácil de ler. 10. useLayoutEffect: Então, o que é usado? Efeito de layout? Eles usam o efeito de layout que funciona exatamente da mesma forma que o efeito Hughes, mas a diferença é quando ele é executado. Portanto, use o fato executado depois que a cúpula for impressa no navegador. Mas geralmente o efeito de saída é executado antes que a cúpula seja impressa no navegador. Assim, sempre que quisermos executar o código antes da cúpula ser impressa, como se quiséssemos medir a altura, a largura ou qualquer coisa relacionada ao layout de um elemento . Podemos usar o efeito de layout. E é executado de forma síncrona, que significa que executa a primeira linha e só se move para a segunda linha se a execução da primeira linha for concluída. O caso de uso mais comum do efeito de layout de uso é obter a dimensão do layout. E é por isso que seu nome é usado. Efeito de layout. Deixe-me mostrar quando for executado. Portanto, neste exemplo, há um botão de alternância que alterna este texto e um efeito de uso com alternância de dependência. Esse usuário será executado quando esse estado de alternância alterado e o efeito de uso de impressão no console. Primeiro, eu importo um enorme efeito de layout da biblioteca React, e agora eu duplico esse código e substituo o efeito de uso pelo efeito de layout de uso. Agora salve as alterações e dê uma olhada. Veja quando o componente é renderizado, ambos os ganchos serão executados. Agora, quando eu clicar neste botão de alternância, novamente, ambos os ganchos serão executados. Mas concentre-se aqui. Usar efeito de layout é sempre executado primeiro. Agora você acha que é porque nós escrevemos antes de você declarar. Então eu movo o efeito de layout de uso após o uso do gancho vetorial e dou uma olhada, veja, o efeito de layout de uso sempre será executado post. Portanto, o fluxo de trabalho é clostridia calcular todos esses componentes e, em seguida, usar efeito em camadas será executado, em seguida, reagir imprime todos os elementos na cúpula. E, finalmente, usar um vetor será executado. Mas esse processo é muito rápido. É por isso que podemos ver isso ao vivo. Noventa e nove por cento do tempo. Nós usamos, usamos efeito em nosso projeto. Se o projeto não estiver funcionando como queremos, só então tentamos usar o efeito de layout. Agora, vamos ver o caso de uso mais comum, obviamente sem efeito. No mesmo exemplo. Quero obter a dimensão desse texto e, em seguida, adicionamos o preenchimento superior tanto quanto sua altura. Então, para acessar elementos DOM, o que devemos usar? Certo? É usuário. Então eu crio um usuário, código F e VS, auto importante uso ref do React. E é por isso que eu amo esse ESL e a extensão. É uma ótima ferramenta de produtividade. Que desenvolvedores do React. Agora armazenamos esse usuário em constante chamada text wrap e passamos o atributo href para este texto. Agora, primeiro tentamos usar, usar o efeito e comentar esse efeito de layout de uso. Então, em efeito de uso, reescrever, imposto ref dot current, dot, get bounding client racked. Usando essa função, podemos obter todas as dimensões desse elemento. Deixe-me te mostrar bem rápido. Então, antes de tudo, armazene essa dimensão invariável. Agora vamos consolidar e dar uma olhada. E obtemos, porque temos que adicionar uma condição para verificar se essa quebra de texto não é nula. Só então temos que executar esse código. Então, certo, se x ref dot current não igual a null e mova esse código para dentro dele. Salve as alterações e dê uma olhada. Veja, obtemos o objeto de dimensão com todas as propriedades. Agora eu quero adicionar uma parte superior de preenchimento para este texto tanto quanto sua altura. Então escreva x ref dot estilo de ponto atual preenchimento de pontos superior igual à altura do ponto da dimensão invectiva do dólar. Conserte e salve-o. Veja, quando clicamos nesse botão de alternância, publique este texto aqui e depois ele se move para baixo. Veja em câmera lenta. Agora, esse é o problema com o efeito dos EUA. Vemos esse atrito na produção. Agora eu substituo o efeito u pelo efeito de layout de uso. Salve as alterações e dê uma olhada. Veja, não vimos esse atrito porque efeito de layout de uso é executado antes da impressão da cúpula. Então, vamos recapitular. Efeito de layout de uso. Usar efeito de layout é o mesmo que o gancho de efeito do usuário. Mas a única diferença é que quando eles executam o fluxo de trabalho é a posteridade. Eu calculo todas as mutações, então uso o efeito de layout será executado e, em seguida, adiciono novamente impressões de todos os elementos no DOM. E depois desse uso, o efeito será executado. E a segunda diferença é que o efeito de layout de uso é síncrono e o efeito de uso é assíncrono. Então, 99 por cento do tempo que usamos o efeito do usuário em nosso projeto. Mas se esse efeito de uso não funcionar corretamente, só então usamos o efeito de layout de uso. E eu mostro o efeito de layout de abuso de caso de uso mais comum . 11. useMemo: O que é usado memorando. Use memo hook é usado para aplicar memoização e reagir. O que é memorização? memorização é uma técnica para melhorar o desempenho do código. E é útil evitar cálculos caros em cada renderização quando o valor retornado não for alterado. Vamos entender qual é o exemplo. Então, neste exemplo, eu crio duas variáveis de estado, número, e esse número é para entrada. E passe esse número nessa função cara, que declarei após o componente. Basicamente, essa função retornará o mesmo número. Mas depois de executar esse loop indesejado, que eu criei apenas para explicação, no mundo real, pode ser qualquer cálculo longo ou qualquer coisa que leve mais tempo e, em seguida, armazenar seu valor de retorno no cálculo variável. Agora, esse estado escuro é para alternar o modo escuro e claro. E de acordo com essa variável escura, alteramos a cor de fundo e a cor do texto. Deixe-me mostrar a você. Portanto, sempre que aumentarmos o valor dessa entrada, essa função cara será executada e retornará um novo valor no cálculo e o imprimirá aqui. E quando eu clicar nesse botão de alternância, cor de fundo e a cor do texto mudarão. Agora concentre-se nesse cálculo. Sempre que alteramos esse número, estamos chamando essa função cara e console que esse loop foi iniciado, mas leva 0,5 ou 0,3 segundos de atraso para atualização. Isso é por causa da nossa função barata de loop indesejado. Mas quando clicamos nesse botão de alternância, também leva alguns segundos para atualizar o tema. E console UC. Novamente, o loop Prince começou e é por isso que colamos essa equipe de intervalo de atraso. Então, quando clicamos no botão de alternância, react está renderizando novamente o componente. Primeiro, essa linha será executada e chamará essa função cara. E isso exige trabalho extra. E não podemos alternar imediatamente a equipe. Portanto, a solução é só executaremos essa função quando esse número for alterado. Então, usamos o gancho de memorando de uso para isso. E a boa notícia é que a sintaxe de uso de memorandos é a mesma que o gancho de efeito Hughes. Tão rápido, importei o memorando de uso biblioteca React e o adicionei no componente funcional. Usar memorando terá dois argumentos. O primeiro é para a função de retorno de e o segundo é para dependências. Portanto, sempre que qualquer variável dessa dependência mudar, somente então essa função de retorno de chamada será executada. Então eu passo o número nesta dependência LA. E dentro dessa função de retorno de chamada, chamamos essa função cara e passamos o número como parâmetro. Agora você acha qual é a diferença entre o usuário e o memorando de uso? Usar efeito e usar memorando é o mesmo. Mas a diferença está no usuário, podemos retornar o valor e podemos armazená-lo em uma variável. Temos que criar mais uma variável de estado. E então, com a função de valor definido, podemos atualizar a dívida. Mas em use memo, podemos retornar o valor e podemos armazenar esse valor em uma variável. Então eu guardo esse valor no cálculo de mamíferos. Agora eu removo essa linha e, no local do cálculo, chamamos de cálculo de memorando. Agora salve as alterações e dê uma olhada. Quando mudamos o número, leva alguns segundos. E isso é óbvio porque adicionamos loop indesejado. Mas quando clicamos nesse botão de alternância, não leva segundos extras. E podemos alternar temas imediatamente. E essa técnica melhora o desempenho de nossa aplicação, o que é muito importante no mundo de hoje. Vamos recapitular o que aprendemos. Use memo é usado para melhorar o desempenho do nosso aplicativo React. Podemos parar de executar funções indesejadas na nova renderização. Então aqui está a sintaxe do gancho de memorando usado. São necessários dois argumentos. O primeiro é a função de retorno de chamada, que retornará o valor. E aqui vamos armazenar esse valor em variável. Agora, o segundo argumento é o array de dependências, no qual podemos adicionar variáveis quando essa variável mudar, só então e depois esse retorno de chamada será executado. Com essa variável. Imprimimos o valor de retorno. Realizamos todos os efeitos colaterais no efeito de uso Hooke e todas as funções caras, cálculo em uso gancho de memorando, simples assim. 12. useCallback: O que é usado callback. Usar retorno de chamada é usado para retornar a função memorando. E também é útil para evitar que funções sejam recriadas na renderização. Eu sei que isso parece um pouco confuso, mas não é. Vamos entender com o exemplo. Então, neste exemplo, eu crio duas variáveis de estado. primeiro é o número da entrada do número, e o segundo é para a equipe de alternância. E de acordo com isso, nossa cor de fundo e cor do texto mudarão. Agora temos uma função chamada tabela de cálculo, e ela retorna as primeiras cinco linhas desse número estável. No mundo real, pode ser qualquer coisa como chamar a API. Agora, criei aqui um componente simples chamado tabela de impressão para imprimir a tabela. E eu passo essa função como adereços. Então, neste componente, eu crio linhas de estado e no ícone do usuário resolvo essa linha e passo essa função de calcular tabela. Função Inserir linhas. Então, os valores de Eddie sentaram-se em linhas variáveis. E, em seguida, imprima a matriz dessa linha usando esse método de mapa, simples assim. Vamos ver esse slide. Aqui. Temos um número de entrada. E depois disso, imprimo esta tabela usando o componente bring table. E, finalmente, temos o botão de alternância para alternar a equipe. Então, quando clicamos no botão de alternância, o tema mudará. Quando mudamos o número, vemos a tabela abaixo. Agora, vou te mostrar o problema. Antes de tudo, deixe-me abrir o console e atualizar a página. Veja quando eu trago o componente duplo renderizará pela primeira vez que o console esta tabela de impressão for executada. Agora eu mudei o número e essa função de tabela de cálculo mudará. E seu componente de tabela de leitura e impressão terminou novamente console esta tabela de impressão é executada, o que está funcionando bem. Agora, quando eu alterno de equipe novamente, consulte essas execuções imprimíveis, o que significa que o componente imprimível é renderizado novamente. E se alternarmos a equipe, e esse é o problema de desempenho porque quando alteramos qualquer estado nesse componente, essa função será recalculada. E mesmo que nosso número seja o mesmo, ele retornará o mesmo valor com coisas soviéticas de nova instância, é um novo resultado. E então ele renderiza novamente o componente imprimível. Agora temos que parar essa recriação indesejada da função. E é por isso que usamos o gancho de retorno de chamada. E a boa notícia é que o retorno de chamada de uso é exatamente o mesmo que o gancho de memorando. Portanto, essa é uma pequena diferença no uso de retorno de chamada e no gancho de memorando. Portanto, use memory retorna o valor memorize e use callback retorna um livro de memórias é uma função simples assim. Então, primeiro de tudo, eu importei o uso chamado de volta do React e adiciono aqui, use callback. Agora ele aceita dois parâmetros, como use memo e use effect. O primeiro é a função de retorno de e o segundo é Dependências. Dependências, eu escrevo número. No retorno de chamada, eu simplesmente copio e colo essa declaração de retorno. Agora podemos armazenar essa função em variável chamada tabela de cálculo. E eu removo essas funções antigas. Então, aqui, se usarmos use memo, obtemos apenas esse valor nessa variável. Mas se usarmos use callback, obteremos essa função completa nessa variável. E se quisermos executar essa função, temos que escrever assim. Então, sempre que alteramos o número, só então essa função será executada. Agora salve as alterações e dê uma olhada. Quando aumentamos o número. Ele pode resolver essas execuções da tabela de impressão. E agora eu clico no botão de alternância. Ele não consolará as execuções desta tabela de impressão. Portanto, corrigimos esse problema com a ajuda do retorno de chamada de uso. Agora, podemos passar o valor como parâmetro nessa função. Por exemplo, eu passo para ouvir, eu armazeno isso na variável value e você pode usá-lo nesta função. Eu crio uma nova variável, nu number é igual a number plus value. E em vez desse número, passamos um novo número. Então, obtemos o dobro do número original mais dois. Depende de você como você pode usar esse parâmetro. Lembre-se, qualquer memorando de uso, você pode fazer isso. Agora, vamos recapitular o que aprendemos. Portanto, use callback é usado para retornar a função de memorização e melhorar o desempenho do nosso aplicativo React. Usar a sintaxe de retornos de chamada é o mesmo que o gancho de memorando usado, mas use memory retorna o valor memorize e use callback retorna alguma função MY is e, em seguida, use callback, podemos passar o valor como parâmetro, mas em use memo, podemos fazer isso simples assim. Espero que você entenda o uso de retorno de chamada, gancho e diferença entre usar retorno de chamada e uso de memorando. 13. Ganchos personalizados (useFetch): Então, o que é gancho personalizado? Ganchos personalizados são basicamente funções reutilizáveis em cidades simples. Ganchos personalizados em seus próprios ganchos que você cria para seu próprio uso. E você pode usá-los várias vezes em seu projeto. Por exemplo, você tem alguma lógica na qual você usa um ou vários React Hooks integrados. E você precisa usar essa lógica várias vezes em seu projeto. Então, em vez de escrever a mesma lógica longa em todos os lugares, você cria seu próprio gancho ou função, que é um gancho personalizado. E você o usa da mesma forma que usamos outras compilações do React em ganchos, simples assim. Vamos criar um dos ganchos personalizados mais úteis para buscar dados da API. Adoro esse costume porque o uso muito em meus projetos. Então, aqui eu crio um exemplo simples no qual chamamos API ou detalhes de usuários aleatórios e exibimos seus nomes com o ID. Então, primeiro de tudo, eu crio uma variável de estado chamada respostas e passo um array vazio como seu valor inicial. Depois disso, eu uso o gancho de efeito de uso com dependências MDMA. Portanto, ele é executado somente quando o componente é renderizado pela primeira vez. No efeito dos EUA, eu passo dados dessa API e os converto para o formato JSON e, em seguida, defino esses dados nas respostas. E depois de tudo isso, eu exibo esses dados usando o método map. Agora, imagine que você queira buscar dados da intenção da API para 12 componentes. Então você tem que escrever esse código em todos esses componentes, o que não é uma boa prática no React. Então, criaremos um gancho personalizado para buscar dados. Então, primeiro de tudo, eu crio uma pasta, ganchos personalizados. Armazenaremos todos os nossos ganchos personalizados nessa pasta para organizar nosso código, o que é uma boa prática para desenvolvedores. Nesta pasta, criamos um novo arquivo chamado use fetch NodeJS. Sempre inicie seu nome de gancho personalizado com uma palavra-chave use, que é uma convenção comum. Agora eu escrevo adicionar um FCE para clichê funcional usando esta extensão ESL e react. Então, primeiro de tudo, eu tenho essa data e usei um vetor deste componente e colei em use patch e importe dados de usuário e uso da biblioteca React. Agora aceitamos um parâmetro nessa função chamado URL. Usamos essa variável de URL no local da API. Então, sempre que usamos, usamos phage, só precisamos passar a API nessa função. Aqui, reescreveu essa variável de estado de respostas e salve-a. Agora, de volta ao nosso componente de aplicativo. E nós apenas tentamos usar phage e reagir dívida de importação automática de nossa pasta de ganchos personalizados. Então, neste usado para sua função, podemos passar qualquer API e podemos armazenar esse valor na variável de dados. E, finalmente, alcançar essas respostas com a variável de dados. Agora eu removo, uso e usei daqui. Não precisamos deles. Agora salve as alterações e dê uma olhada. Nós obtemos nossos dados. Criamos nossa postagem com sucesso e esperança personalizada mais útil que você possa ver é chamada de aparência limpa e limpa. Então, esse é apenas um exemplo. Agora, depende de você como usar sua lógica para diferentes casos de uso. Portanto, tente pensar e aplicar sua lógica e criar ganchos personalizados que o ajudarão em seus projetos futuros. Vamos recapitular o que aprendemos. Ganchos personalizados são sua lógica, que você criou como função reutilizável. E nisso, você pode usar vários ganchos e criar algo que o ajudará a pular tarefas repetidas em seu projeto. Além disso, você pode simplesmente usar esses ganchos personalizados em seus diferentes projetos. 14. Validação de formulários com o FORMIK e o YUP: No vídeo de hoje, vamos ver a validação do formulário, que é um tópico muito importante no React. Até agora. Manuseio de formulários, usamos fórmico e para validação de formulários, usamos a biblioteca Yup porque tornou a validação de formulários muito mais fácil. Estou muito animado com isso e espero que você também esteja. Então, vamos começar. Em primeiro lugar, veremos como lidar com nossa própria forma usando a pandemia. Primeiro, vamos instalar o terminal de abertura da biblioteca usando Control plus back take para Windows e Command Plus back tick para Mac e escrever npm instalado para mim. Ou, se você estiver usando Yan, escreva Yan, adicione fórmico e pressione Enter. Agora feche o terminal, não precisamos dele. E vamos criar o formulário básico primeiro. Então eu crio um formulário e dou a ele um formulário de inscrição com o nome da classe. Agora vamos adicionar rótulo ou nome e nome do caminho aqui. E um tipo de entrada, texto e nome é igual a nome. Agora eu duplico essas duas linhas mais três vezes. Então, segundo rótulo para o e-mail e também tipo de entrada para e-mail e nome para e-mail também. Em seguida, quero um rótulo para senha, tipo de entrada para passador e nome, também senha e último nível ou país e senha. Digite o tipo de senha e nome para ver a senha. E, finalmente, adicionamos o tipo de botão, enviamos, salvamos as alterações e damos uma olhada. Veja, temos esse poema limpo e alguns estilos básicos. Então, eu tenho Guam parece bom. Você também pode obter esse estilo palm apenas copiando e colando o código CSS em seu arquivo. Agora vamos lidar com esse formulário usando a biblioteca pattern make. Então, primeiro de tudo, eu importo usado para fazer a função de formar esses bombardeios de uso é basicamente um gancho personalizado. Gerenciando estados e lidando com eventos. Não se confunda. Basta ver isso uma vez e todas as dúvidas vão resolver. Então, em nosso componente foi derivado, use fórmico e passamos objeto. A primeira propriedade desse objeto são os valores iniciais do nosso poema. Então, aqui temos que passar quatro valores porque queremos lidar com essas entradas de poros. Então, criamos uma nova variável fora dessa função para nossos valores iniciais. E escrevemos objeto. Agora preste atenção aqui. Temos que usar exatamente esse mesmo nome ao passarmos nossos nomes de entrada. Então a primeira propriedade é name, porque aqui nós passamos name empty string. Em seguida, temos e-mail, string vazia, depois temos senha, string vazia. E o último. Adivinha de que jeito, certo? Certo. É a senha porque passamos última entrada chamada see password e também a string vazia. Agora, aqui passamos nossos valores iniciais. Portanto, no objeto JavaScript, se o nome da propriedade e o nome da variável de valor forem iguais, podemos remover essa variável de valor. Então eu removo isso e funciona da mesma forma. É por isso que eu crio uma variável com o mesmo nome. Agora, neste objeto, temos que passar mais uma propriedade, que é onsubmit. Aqui passamos a função de seta e podemos acessar os valores do nosso formulário e imprimir esses valores no console. Registre e pressione Tab. E obtemos o console.log. Esses são pequenos truques que ajudarão você a escrever código rapidamente. Então, passamos valores. Agora, vamos armazenar isso em uma variável chamada fórmica. E vamos consolar essa variável de formação e ver o que conseguimos salvar as alterações, e dar uma olhada, ver esta forma de variável, valores, erros e muitos outros métodos como manipulado, desfoque, manipular, alterar, handle, submit, etc. Vamos usar esses métodos. Vou estruturar esse objeto porque não quero escrever valores de pontos fórmicos e alterar o identificador de pontos fórmicos porque isso tornará nosso código confuso. Então, primeiro, queremos valores que armazenem todos os valores desse formulário. Em seguida, queremos lidar com o desfoque, lidar com a mudança e lidar com o envio. Todas essas são funções predefinidas. Portanto, não precisamos definir nenhum deles. E é por isso que o fórmico é tão popular para o manuseio de formulários. Você não precisa escrever todas essas funções. Agora, em nossa forma, eu passei valor para essa entrada de nome, que é o nome do ponto do valor. Em seguida, quero adicionar o evento onblur, que é executado quando vivemos a caixa de entrada. Aqui, simplesmente passamos o desfoque da alça. E por último eu adiciono onchange e passei handle change. Agora eu simplesmente copio esses três atributos e colei em todas as tags de entrada. Só temos que mudar esses valores. Então aqui eu escrevo e-mail. Próximo analisador e, por último, ver analisador. Agora, o último evento que é tratado de envio na tag do formulário, adicionamos um novo atributo no método submit e pass handle submit e removemos esta linha. Salve as alterações e dê uma olhada. Vamos preencher o formulário e clicar no botão Enviar. Veja, obtemos todos os valores da pílula. Portanto, nesta função onsubmit, podemos escrever nossa lógica de envio de formulário. Como o manuseio simples e fácil da forma se torna usando a conformação. E também nosso código parece muito limpo e fácil de entender. Agora, vamos ver como validar esse formulário usando o barramento da biblioteca. Vamos instalar o terminal aberto da biblioteca e escrever npm install yup e pressionar Enter. Portanto, a biblioteca yup nos ajudará a validar os valores de nossa pílula de entrada e erros de retorno. E então, com a ajuda do pobre eu, mostraremos o erro tão simples quanto esse. Então, vamos fechar este terminal. Agora vamos criar nossa postagem de esquema de validação usando o esquema JSON válido da biblioteca Yup é basicamente condições que verificamos realizar a validação. Para isso, crio uma nova pasta no SRC chamada esquemas. E nessa pasta, eu crio um novo arquivo chamado index.js. Explicarei mais tarde por que criei um arquivo com o nome index.js. Então, neste arquivo, primeiro, eu importo tudo como sim da sua biblioteca. Agora eu crio uma variável chamada esquema de inscrição. Você pode chamá-lo do que quiser ouvir. Usamos yup dot object e dentro dele, passamos nosso objeto de validação. Tão rápido que eu adiciono nome. Certifique-se de usar o mesmo nome que mencionamos em nossos valores iniciais. Então adicione name, Garland, yup, dot string, que verificaremos se nosso valor inserido é string ou não. Então ponto significa três, o que significa que são necessários no mínimo três caracteres. E o último ponto é necessário, o que garantirá que essa conta não seja esvaziada. Se quisermos saber de onde estou escrevendo esses métodos, você pode verificar a documentação no NPM. Agora, adicionamos nosso próximo campo chamado e-mail. E novamente foi rejeitar string. Em seguida, temos o método de e-mail para validar o endereço de e-mail. E o último é obrigatório. Agora, mais uma coisa aqui, em quase todas as funções, podemos passar nossa mensagem de erro personalizada, que queremos exibir em nosso formulário. Por exemplo, nesta função obrigatória, quero inserir seu nome. Agora. O mesmo nesta função de e-mail. Quero, por favor, insira o e-mail de validação. E então exigiu que eu escrevesse, por favor, digite seu e-mail. Agora, nossa próxima fatura é a senha. Primeiro, verifique novamente a string. Agora, aqui, você pode adicionar uma condição relacionada à sua escolha, mínimo seis, máximo 15. Mas eu sugiro que você use expressões regulares para validação. Você pode pesquisar no Google e na exploração ou senha do Google. E eu te dou esse link de expressão regular na caixa de descrição. Você pode copiar disso. Aqui temos expressão regular para senha. Então copie isso. E em nosso arquivo de esquema, eu crio uma nova variável chamada rejeição de senha e cole-a aqui. Agora, adicionamos mais um método chamado matches. E o primeiro argumento é que nossa senha é rejeitada. Em seguida, passamos nossa mensagem de erro. Insira uma senha válida. E por último, passamos a função necessária com mensagem. Por favor, insira sua senha. Agora, última propriedade, que é C password, dois-pontos, yup dot string. Agora temos que verificar essa senha C, igual a essa senha. Então, para isso, temos outro método chamado de expressão profunda é LA. E para obter esse valor de senha, escrevemos yep dot ref e, em seguida, passamos nosso nome de arquivo, que é senha. E o segundo argumento é a nossa mensagem de erro, que é senha, não corresponde. E por último, adicionamos a função necessária com a mensagem. Insira a senha de confirmação. Agora, exportamos esse esquema do nosso arquivo e o salvamos. Agora ou componente. Primeiro, importamos esse esquema de inscrição da pasta de esquema. E aqui não precisamos escrever esse arquivo de índice porque o React leva o arquivo index.js como arquivo padrão se escrevermos apenas o nome da pasta. E é por isso que nomeei esse arquivo como index.js. Agora, neste formulário de uso, temos uma propriedade para validar esse esquema, esquema de validação. E aqui passamos o esquema de inscrição. Agora obtemos todos os erros na variável adultos. Então, vamos adicionar isso aqui. E arma todos esses erros. Salve as alterações e dê uma olhada. Veja West, temos um objeto vazio. Agora clico no botão enviar e z, recebemos todos esses erros. Agora eu escrevo o nome e vejo que nosso erro de nome desapareceu. Agora vamos adicionar e-mail e senha. Uma letra maiúscula, uma letra minúscula , um número e um caractere especial c. Nosso erro de senha também desapareceu. Agora vamos adicionar uma senha diferente. Então, obtemos essa senha, não corresponda ao erro. E se escrevermos a mesma senha, todos os erros desaparecerão. Então, temos adicionadores no console. E agora temos que mostrar esses erros em nossa forma. Para erro de exibição, adiciono um DU e dou a ele um nome de classe em nosso contêiner. E nisso, mostraremos nosso erro. Agora eu simplesmente adiciono uma condição, que é se o nome do ponto de erros estiver disponível e, em seguida, exibir o erro. Eu uso o parágrafo com erro de formulário ClassName e, em seguida, imprimo erros nome do ponto, salve as alterações e dê uma olhada. Agora eu não escrevo nada e clico no botão Enviar. Veja, recebemos nosso erro de nome. Mas um pequeno bug aqui, que é quando nem tocamos entrada do nome e escrevemos outros campos, também recebemos o erro, o que não é bom. Vamos consertar isso, esse uso Wyoming tem mais uma propriedade chamada nós. Então, vamos consolar isso, salvar as alterações e dar uma olhada. Primeiro, obtemos o objeto vazio. Agora clico nesse campo de e-mail e nada acontece. Mas quando deixarmos esse campo de entrada, depois o e-mail, adicionaremos esse objeto. Agora estamos no campo da senha. E quando saímos dessa conta clicando em outra pílula ou pressionando Tab, obtemos a senha nesse objeto. Então, na palma da mão, adiciono outra condição, esse nome de ponto e n. Agora salve as alterações e dê uma olhada. Agora eu clico neste campo de e-mail e depois na entrada do Leptis, então não recebemos esse erro de nome. Se clicarmos no botão Enviar ou vivermos esse nome em branco, só então receberemos esse erro. Então, vamos copiar esse contêiner de erro e colá-lo depois de todos os comprimidos de entrada. Agora, para e-mail, mudamos de endereço, e-mail. Esse e-mail. E erros cerebrais pontuam o e-mail. Qual senha alteramos erros dot password, dot password e imprime erros dot password. E o último para confirmar a senha. Mudamos as épocas. Veja a senha, não vê senha e os erros de impressão ponto c senha. E eu removo esses consoles, salvo as alterações e dou uma olhada. Agora clique no botão enviar e obtemos todos os nomes de Aaron e z, obtemos um erro diferente. E eu escrevo três ou mais caracteres. Já se foi. Então eu sinto todos os comprimidos. Em seguida, clique no botão enviar e obteremos todos os valores no console. Agora podemos limpar todas as pílulas de entrada depois de enviarmos o formulário. Então, na propriedade onsubmit, temos o método actions. E depois do console, escrevemos excelência ponto reset, formulário. Salve e dê uma olhada. Sinto todos os detalhes. E quando clico no botão enviar, todos os campos de entrada ficam claros. Agora, podemos fazer essa solda a frio usando um componente de fabricação, que é o segundo método para lidar com a palma da mão usando quadrinhos. Eu importo para mim formulário e componente de construção. Agora eu apenas seleciono o formulário de puxar e pressionar Control mais Shift mais P no Windows e command plus plus P no Mac. E escreva, envolva enter e right. E aperte enter. Agora passamos valores iniciais iguais a dois valores iniciais. Bem, escute, esquema é igual ao esquema de inscrição. E para onsubmit, criamos uma nova função chamada onsubmit e copiamos esse código e colamos aqui. Então, passamos o envio igual a no Enviar. Agora, este bombardeio usa o método render props para renderizar o poema. Então escreva colchetes e temos prompts, função de seta, e movemos a palma da mão para dentro dela. Portanto, essas sondas têm todos os métodos que obtemos aqui. Então, vamos destruí-lo depois de todas as mudanças. Sei que parece complicado, mas não é. Depois de concluir este tutorial, você o entenderá corretamente. Agora, vamos substituir nossa tag de formulário. Qual componente do formulário? Certifique-se de atualizar a tag de fechamento também. Agora remova isso onsubmit. Não precisamos disso. Então, agora temos o componente com falha, que é a substituição de nossos campos de entrada. Então eu escrevo aqui, passaremos tipo igual a texto e nome igual a nome. E feche esse componente de campo. Certifique-se de escrever o mesmo nome que passamos nos valores iniciais. Esse componente de campo funciona da mesma forma que esse campo de entrada. Não precisamos passar esses três atributos. Forma que faz isso por si só. E esse é o poder da formação. Aqui, você pode passar quantos atributos quiser passar em um campo de entrada. Por exemplo, espaço reservado é igual a inserir seu nome, salvar as alterações e dar uma olhada. Veja, obtemos InputField, o mesmo que esse nome input. Então, vamos remover nossa pílula de entrada e também remover esse espaço reservado. Eu não quero isso. Agora eu copio esse componente de campo e substituo por todos os campos de entrada. Agora, para e-mail, passo o tipo para e-mail e nome. E-mail. Agora, para senha, tipo passa-alto para senha e nome, também senha e senha de confirmação. Eu passo o tipo para senha e nome, veja senha. Agora passo final, temos que desestruturar em Rs, entra na pílula a partir dessas instruções. Então eu escrevo teste de vírgula de objeto. Agora remova isso usado para fazer e também remova usado para ômega de importante. Salve as alterações e dê uma olhada. Funciona da mesma forma que antes. Você pode usar o método que quiser. É totalmente com você. Aqui. Você pode adicionar Jack box e outras entradas usando esta propriedade de campo. Se quisermos saber como fazer isso, você pode ler a documentação do formato. Aqui. Na seção de exemplo, você obterá os exemplos de todos os tipos de formulário. 15. BÔNUS : Reaja roteador v6: Neste tutorial, veremos o roteador React do zero. Então, não vamos perder tempo e começar. Aqui, eu crio esse novo aplicativo React usando o aplicativo NP x Create React e, em seguida, removo todos os arquivos desnecessários. Agora, primeiro instalamos a biblioteca do roteador React, abrimos o terminal pressionando Control plus bacteria e digitando npm install React router down. Se você estiver usando Yan, então digite Yan tinha React router dome e pressione Enter. Portanto, usamos o dom do roteador React ou criamos rotas diferentes em nosso aplicativo. Basicamente, estamos definindo em qual caminho, quais componentes devem ser exibidos. Por exemplo, estamos fazendo uma solicitação de www dot code plus u.com. Em seguida, queremos mostrar o componente doméstico. E se solicitarmos www dot code bless you.com, é menos sobre, então queremos exibir sobre o componente. Agora vamos ver a implementação. Então, primeiro de tudo, se você quiser usar o React router dom em seu projeto, como obter total obrigação com um componente. Então você sabe qual componente do aplicativo importamos alguns componentes do roteador React, dom, certo? Roteador de navegador como roteador e envolva nosso JSX com este componente de roteador. Lembre-se, sem esse roteador React não funcionará. Agora, para defini-lo, temos mais dois componentes. Rotas tão importantes, que é usado para definir em qual parte você deseja mostrar que são todos roteiros. Eu vou te explicar em um segundo. E outra rota, que é usada para definir nosso nome de roteamento real e detalhes do componente. Vamos adicionar nosso componente de rotas antes do roteador React versão seis, essas rotas são conhecidas como switch. Agora, dentro dela, adicionamos nossa rota. Agora temos que passar dois prompts aqui. O primeiro é ruim e, entre essas aspas duplas, escrevemos o nome do caminho. Então, para casa, adicionamos apenas menos para a frente. Sabemos disso quando escrevemos apenas google.com ou qualquer site e adicionamos calúnias. Italy dido entra na página inicial do site. É por isso que escrevemos apenas uma barra para frente aqui. E então temos elemento igual a dois entre colchetes. Nós adicionamos nossos componentes. Primeiro, vamos criar algumas páginas. Então eu crio uma nova pasta no SRC chamada pages. Nesta pasta, criamos um arquivo chamado home dot js e escrevemos RFC para boilerplate do React e adicionamos aqui a página inicial. Agora crie um novo arquivo chamado profiled ou JS, e use esse clichê e também substitua a página de perfil de texto. E criamos uma última página com o nome users.js. Adicione um clichê e substitua o texto da página do usuário. Agora, de volta ao nosso componente de aplicativo. E no elemento, eu adiciono nosso componente doméstico e fecho isso. Agora, duplique essa linha mais duas vezes. 19 é o caminho que é menos perfilado e passa nosso componente de perfil. E finalmente, mas cortar usuários e influenciar nosso componente de usuários. Salve as alterações e dê uma olhada. Veja, esta é a nossa página inicial. Agora em URL, passei menos perfil e obtemos página de perfil. Ou se passarmos menos usuários, obteremos a página de usuários. Agora vamos criar mais uma página chamada northbound dot js. E adicionamos clichê e escrevemos 404 página não encontrada. Resolveremos esta página quando alguém passar por outra coisa, mas que não definimos. Então, de volta ao componente do aplicativo e adicionamos outra rota e caminho para iniciar um componente elemento não encontrado. Então, basicamente significa que se passarmos por qualquer outro caminho que não seja desses caminhos, exibimos esse componente não encontrado. E certifique-se de sempre escrever essas rotas não encontradas no final de todas as rotas. Às vezes, bagunça com os outros. Se declararmos na parte superior, salve as alterações e dê uma olhada. Se passarmos por aqui outra coisa, então temos esta página para o norte. Agora vamos ver algumas propriedades mais úteis do React router dom. Vamos criar uma barra de navegação simples. Deixe-me fechar esses outros arquivos. Então eu crio uma nova pasta chamada componentes. Nesse sentido, crio um novo arquivo chamado ab.js próximo. Agora digite em AFC e pressione Enter. Agora eu os removo e não adiciono nenhuma tag com a classe próxima. E dentro dela, criamos uma tag, um aditivo para a página inicial, que é menos. E ônibus para casa aqui. Agora duplique essa linha mais duas vezes. E segundo, mas para traçar o perfil e andar de perfil aqui. Agora, o último caminho é para usuários e usuários certos. Agora guarde isso. E em nosso componente de aplicativo, adicionamos nosso componente Navbar no topo das rotas. Então, essa barra agora está fixada no topo. E abaixo disso, vemos todas as rotas. Portanto, não precisamos adicionar agora, mas em todos os componentes, salve as alterações e dê uma olhada. Veja, obtemos todos os links. Agora, quando clicamos em qualquer um desses links para esse caminho. Mas você pode ver que nosso aplicativo é reprimido? Não queríamos, certo? Então, para isso, temos um componente no React router dom, que está vinculado no componente Navbar. Importamos o link do roteador React, dom e removemos uma tag e um link correto para. Agora, aqui escrevemos o caminho que é inútil, o mesmo que com este perfil. E o mesmo acontece com esses usuários. Salve e dê uma olhada. Veja, agora quando clicamos neste link, nossa página não fica reprimida e o roteamento funciona sem problemas. Agora podemos tornar isso mais bom destacando a rota atual. Eu adiciono alguns estilos básicos ao nosso Nerva e efeito de foco em uma tag. Você pode copiar os estilos do meu repositório GitHub. Agora eu quero tornar o plano de fundo dos links da rota atual para preto e alterar a cor da fonte. Então, precisamos saber qual é o link ativo aqui. Para isso, temos um componente que agora é link. Este link é uma versão avançada deste componente de link. Importe isso. E agora eu seleciono um link e pressiono control mais D no Windows e Command mais d no Mac. Com isso, criamos vários cursores e substituímos esse link pelo link nav. Agora, essa mordidela nos dá a classe ativa adicionada em nossos links. Salve as alterações e dê uma olhada. Agora clique com o botão direito em qualquer um desses links e vá para Inspecionar. Veja agora o link na aula ativa para o link de nossos usuários. Se mudarmos para o perfil, ela será removida da classe ativa do link do usuário e depois adicionada à criação de perfil. Agora, de volta ao arquivo CSS da barra de unhas e adicione espaço na barra de navegação, um ponto ativo e, entre colchetes , adicione fundo, cor e cor a f, f, e, 400. Agendas. Dê uma olhada. Veja, obtemos esse bom link ativo. Agora temos alguns ganchos importantes que são muito úteis em nossa aplicação. O primeiro é usado para navegar. Na versão anterior do roteador React. Esse gancho é conhecido como história dos EUA. Então, neste componente de perfil, eu crio um botão chamado C, outros usuários. Então, quando alguém clica neste botão, ele deve ser redirecionado no espaço do usuário que usamos o gancho de navegação. Tão importante, use navigate from React, router, dom. E em nosso componente, primeiro escrevemos use navigate e armazenamos sua variável de valor chamada navigate. Agora eu crio uma nova função chamada redirecionar para usuários. E entre colchetes, escrevemos navigate. E passamos nosso caminho aqui, que são usuários de barra. E se você não escrever essas quatro palavras a menos do que redirecionar para o caminho aninhado pago, que serão usuários de barra de perfil. Se quisermos ler diretamente para outra página, adicione uma barra antes do caminho. Agora, no evento button onclick, passamos essa renderização para a função dos usuários, salvamos as alterações e damos uma olhada. Veja, funciona. Agora, por último, usamos params hook. Portanto, neste exemplo, temos a rota do nosso usuário na qual podemos exibir todos os detalhes ou perfis dos usuários. Então, se alguém clicar em um usuário específico, teremos que mostrar que os usuários são vendidos em outra página. Assim, uma rota se torna a última do usuário, que é o ID do usuário. Agora, passamos dados de usuários do back-end usando esse ID. Então, como podemos definir essa rota para criar uma nova rota? Mas dois usuários, é menos dois pontos de ID de usuário. E para o elemento, vamos criar uma nova página. Portanto, crie um novo arquivo em páginas chamadas detalhes do usuário. E escreva nosso AFC e salve-o. Agora, de volta ao componente do aplicativo. Aqui passamos o componente de detalhes do usuário. Portanto, se alguém redirecionar apenas para usuários, ele renderiza o componente desses usuários. E se alguém redirecionar para os usuários menos algo, então ele renderiza o componente de detalhes do usuário, simples assim. Agora vamos ver como passar esse ID de usuário nesse componente. Então vá para o componente de detalhes do usuário. E aqui eu encarno, uso parâmetros da cúpula do roteador React. Agora no componente, à direita, use params e armazene-o em uma variável chamada parameters. Esses parâmetros têm todos os valores de nossos parâmetros de rota. Vamos consolar esses participantes de vendas e dar uma olhada. Veja, quando redirecionamos para usuários menos um, obtemos UserID para um. Assim, podemos desestruturá-lo e escrever o ID do usuário. Lembre-se, essa é exatamente a mesma variável que passamos em nossa rota. E eu exibo aqui os detalhes do usuário do ID do usuário. David, e dê uma olhada. Veja, obtemos nosso ID. Agora podemos passar dados do seu back-end usando esse ID. Então eu espero que você entenda o React router dom. Se quisermos saber isso em profundidade, você verificará sua documentação. O link está abaixo na descrição. Se você tiver alguma dúvida, pode me perguntar e vejo você no próximo tutorial. Adeus.