Domínio de ganchos do React: criando aplicativos React modernos com projetos

1. Introdução ao curso: Bem-vindo ao curso sobre como dominar react Hooks e criar aplicativos web usando o modern Meu nome é Faisel e eu serei seu instrutor neste curso Eu serei seu guia em toda essa jornada abrangente pelo mundo dos react hooks Agora, como desenvolvedor, empreendedor e educador apaixonado , criei este curso para ajudá-lo a desvendar o verdadeiro potencial dos componentes funcionais do React com esse incrível conceito de ganchos de reação Agora, no mundo tecnológico acelerado de hoje, dominar os react hooks é um Eles permitem que você escreva um código mais limpo e eficiente enquanto resolve problemas complexos de forma simples. Se você está apenas começando com o react, se você é um tabloper de nível avançado ou se é alguém intermediário, este curso tem a oferecer algo para todos Agora, neste curso em particular, começamos falando sobre o que são os ganchos de reação, por que os ganchos são importantes e por que esse conceito de ganchos existe em Em seguida, falamos sobre ganchos como o State Hook e entendemos como fazer uso dele Falamos sobre ganchos como useFhok, use effect hook, abordamos use context hook Portanto, muitos ganchos são abordados neste curso específico e, no final, também aprendemos como você pode criar seus próprios ganchos personalizados Agora, durante essa jornada de aprendizado e compreensão, também construímos muitos projetos Ok, construímos alguns projetos que abrangem o uso desses ganchos Então, você basicamente não só aprende os conceitos, mas também implementa esses conceitos em projetos reais. E é isso que torna esse curso totalmente prático. Então, eu uso o mínimo de slides e basicamente me concentro em todas as explicações práticas. Então é aí que meu foco estará. Basicamente, fico com o IDE e me certifico explicar tudo com a ajuda de exemplos dentro do próprio ID. Ao final deste curso, posso garantir que você não apenas terá uma base sólida no mundo com o conceito de ganchos de reação, mas também terá confiança para criar aplicativos baseados em reações dinâmicas e escaláveis Este curso é perfeito para desenvolvedores que desejam se manter atualizados com as tendências atuais com práticas modernas de reação e criar alguns projetos práticos ao longo do caminho para aprofundar sua compreensão Estou muito animada em guiar você pela aula. Você está pronto para aprimorar suas habilidades de reação e mergulhar no mundo dos ganchos de reação Se você estiver, vamos embarcar nessa jornada, e eu verei todos vocês dentro do curso 2. Bem-vindo ao React Hooks: uma revolução funcional: Oi, aí. Agora é hora de começarmos a falar sobre ganchos de reação e entender o que eles são. Tudo bem? Agora, sempre que você estiver criando qualquer tipo de aplicativo web e se estiver criando qualquer tipo de funcionalidade, ok? Qualquer que seja a linguagem de programação que você esteja usando, qualquer estrutura que sempre haverá cenários em que você gostaria de adicionar algum comportamento dinâmico aos elementos da página da web, certo? Por exemplo, ao clicar em um botão aqui, por exemplo, talvez eu queira que determinada página ou parte da página seja atualizada apenas com o clique desse botão. O problema aqui é que apenas essa parte deve ser atualizada e não a página inteira. Mas o que acontece é que no desenvolvimento web tradicional, se você clicar no botão, a página inteira recarregada apenas para atualizar aquela parte específica Isso é desenvolvimento web tradicional. Mas você sabe que com o react, você tem uma maneira de adicionar comportamento dinâmico aos componentes Tornando-os interativos e responsivos sem precisar recarregar completamente a página Está bem? Então, isso é possível com a ajuda do conceito de ganchos Tudo bem? Agora, os ganchos nada mais são que recursos especiais que permitem adicionar um comportamento dinâmico ao componente E não se trata apenas de atualizar a página sem recarregar completamente, ok? Há muito mais coisas que podem ser possíveis com os ganchos de reação Portanto, atualizar a página sem recarregar completamente é apenas um exemplo que eu dei para ajudá-lo a entender Tudo bem? Por exemplo, eu tenho essa base de código aqui. Ok, isso é da caixa de areia de código. É uma base de código disponível publicamente desenvolvida por alguém. E aqui, eu vi esse código em que há um contador criado usando react Ok. Então, aqui, eu posso dizer incremento, você pode ver, e isso é decréscimo Agora, ao clicar nesses botões, ele está aumentando e diminuindo sem recarregar a página. E isso é possível com a ajuda de ganchos de reação. Está bem? Agora, essa é uma possibilidade. Há inúmeras possibilidades. Existem diferentes tipos de ganchos disponíveis no react que você pode aproveitar para criar e fazer diferentes tipos de coisas. E cada gancho que existe tem algum tipo de especialidade na qual você pode usá-lo em seu aplicativo. Tudo bem Então, o que são ganchos? Hooks, permite que você adicione alguns recursos interativos ao seu aplicativo de uma forma simples, e isso ajuda você a tornar seu aplicativo mais interativo, onde as coisas mudam conforme você interage mudam conforme você interage em vez de uma página da web estática, certo? Então, isso é muito útil, você sabe, esse tipo de funcionalidade, como esse tipo de recurso, é muito útil se você estiver criando uma espécie de formulário, digamos, e dependendo do que o usuário está digitando ou de qualquer tipo de tratamento que você queira fazer para a entrada do usuário, qualquer tipo de atualização de dados Por exemplo, o usuário digitou aqui e talvez você queira que algo seja atualizado em diferentes partes da página Todas essas atualizações podem ser conduzidas sem problemas, proporcionando aos usuários uma experiência melhor, certo? E isso torna seu aplicativo web muito envolvente e responsivo. Agora, aqui na documentação oficial dos react hooks, você verá que os hooks permitem que você use recursos de reação diferentes dos seus componentes, E, como eu disse, existem diferentes tipos de coisas que você pode fazer com os ganchos de reação, e isso é o que está sendo chamado recursos de reação aqui Está bem? Então, agora falando sobre ganchos, existem ganchos embutidos que o react fornece, e você também pode combiná-los para criar seus próprios Então você pode até mesmo criar seu próprio gancho personalizado, certo? E aqui no lado esquerdo, você verá a lista, ok? Então, use Action State, use callback, use Context São todos ganchos, certo? Existem muitos. Ok. Falaremos sobre os mais importantes. Por exemplo, alguns dos ganchos que são muito usados são o estado de uso Então, se você estiver trabalhando no react, verá que o estado está sendo muito usado. Use ref sendo muito usado. O efeito de uso também é um gancho que sempre é usado na base de código de reação. Então, falaremos sobre ganchos que são muito comuns E depois de obter alguns ganchos, será muito fácil criar seus próprios aplicativos de reação que usem ou aproveitem o recurso de reação diretamente dos componentes Tudo bem Então, isso é react hooks Há algumas que precisamos aprender e entender como podemos usá-las e por que elas existem, certo? Cada gancho de reação tem alguma habilidade que ele fornece. E, dependendo da sua necessidade, você decide qual gancho deseja conectar implementar em seu aplicativo. Tudo bem? Então, isso é sobre ganchos de reação. Espero que isso tenha lhe dado uma visão geral decente do que são ganchos e por que eles devem ser usados no react 3. Apresentando o React State: a base de aplicativos dinâmicos: Oi, aí. Então, agora é hora de começarmos a falar sobre estados no react, e é importante entendermos esse conceito para que possamos usar o use state hook in react, que é um dos ganchos mais usados nos aplicativos de reação, certo? Então, o que é um estado? Agora, um estado é qualquer tipo de informação que seu aplicativo web queira armazenar. Tudo bem. Agora, é claro, aqui você pode ver esse aplicativo. OK. E aqui no topo, você tem algumas configurações. Está bem? Agora, essa configuração me permitirá colocar um modo claro ou um modo escuro, para que eu possa ativar isso, ok. Também existe esse botão. Acho que está tudo bem. Então, isso é para traduções, eu acredito. Tudo bem. Mas isso também é uma configuração. Se eu quiser ver o site em algum outro idioma, posso escolher um idioma diferente daqui. Se eu não quiser o modo escuro, posso mudar o modo a partir daqui, certo? Então, o que está acontecendo aqui é este site, react dot EV está armazenando um tipo de configuração ou uma preferência para mim como usuário, certo? Então, eu sou um usuário. Estou interagindo com este site Estou configurando a preferência como modo escuro. Portanto, é mantendo essa preferência em mente que, ei, esse usuário deseja ver ou ler este site no modo escuro e, sempre que estou visitando, ele está me mostrando a preferência. Sempre que estou visitando, ele está me mostrando o site dessa maneira específica, certo? Portanto, esse é um tipo de informação que ele guarda sobre o usuário. Certo? Agora, pense nisso como um marcador que você usaria ao ler um livro Então imagine que você está lendo um romance e, à medida que avança nos capítulos, guarda um marcador para lembrar onde parou, certo Então, esse marcador, que muda à medida que você avança ou às vezes revisita o capítulo anterior, o marcador mudaria Portanto, representa sua posição atual no livro. É uma informação que você está tentando lembrar sobre sua jornada de leitura, certo? Então é uma informação, certo? Então, essas informações que estão sendo armazenadas por qualquer tipo de aplicativo da web no mundo do react são conhecidas como estado. OK. Então, o estado é como aquele marcador de que falamos ou até mesmo gosta dessa configuração porque está lembrando essas informações sobre o usuário, certo O marcador também é algo que o aplicativo lembraria sobre o usuário sobre onde o usuário chegou Qual é a jornada do usuário, certo? Então, simplificando, os estados são uma forma de reagir como os estados reagem. É uma forma de os componentes do React reterem algumas informações, que podem mudar com o passar do tempo e precisam ser lembradas. Tudo bem? Lembre-se dessa definição. Portanto, os estados no react são uma forma de o componente react reter algumas informações, que podem mudar ao longo de um período de tempo e precisam ser lembradas. Está bem? Agora, nessa definição específica, duas coisas são importantes. Então, eu mudaria para a definição aqui no bloco de notas, ok? E eu acredito que isso é bom porque você também pode ver a definição. Tudo bem. Então, há duas coisas que eu estava dizendo, o que é importante, ok? Há algumas coisas, eu diria, ok? Então, uma delas é que as informações podem mudar. Está bem? Isso é algo que você precisa ter em mente. As informações podem mudar. E essa informação está sendo mantida como um estado em reação, ok? E isso precisa ser lembrado. Tudo bem? aqui, o exemplo que eu dei, isso precisa ser lembrado, certo? Durante toda a minha jornada. Agora, se eu mudar para a guia Aprender, agora o que quero dizer aqui é que se eu mudar para a guia Ganhar, isso não muda para o modo branco. Ainda está no modo escuro, certo? Portanto, o aplicativo é lembrado de que esse usuário deseja ver o aplicativo inteiro no modo escuro, certo? O mesmo acontece com o marcador. Certo? O aplicativo lembraria que, ei, o usuário terminou de ler até esse momento. Então, ele se lembrará e continuará lembrando. Amanhã, se você abrir o aplicativo, o aplicativo de leitura ou o livro, não é como se o marcador tivesse mudado para a primeira página, certo? Portanto, ao criar aplicativos interativos para funcionários interativos, muitas vezes você se depara com uma situação em certas partes da interface devem mudar em resposta à interação do usuário. Por exemplo, um clique no botão, como eu disse, aqui, um clique no botão está mudando todo o site, certo? E haverá cenários em que você também pode querer alterar uma parte específica do site, ok? Como clicar em um botão, enviar um formulário ou simplesmente passar o mouse sobre um elemento, ok, passar o mouse sobre o elemento. Está bem? Então, tudo isso poderia ser gerenciado com a ajuda do estado, certo? Espero que isso esteja bem claro. Está bem? Então, se você se lembra dessa definição aqui, estado em reação é uma forma de um componente de reação. Guardar algumas informações que podem mudar com o tempo, elas também precisam ser lembradas. Está bem? Essa é uma definição muito boa e a mais simples que eu poderia ter para isso. Está bem? Agora, haverá algumas perguntas que você pode ter, ok? Você dirá: Ei, por que não usar variáveis, ok? Venha até aqui. Você disse que o estado no react é uma forma de componente de reação reter algumas informações que podem mudar com o passar do tempo. Você também pode fazer isso com variáveis, certo? Você pode armazenar algumas informações em variáveis, e essas informações também podem mudar, desde que não sejam declaradas como constantes, certo? Isso é possível com variáveis. Então, por que ter esse novo conceito de estado e introduzir complexidade desnecessária? O problema aqui é que os estados são diferentes dos das variáveis. Como? Vou te dar uma ideia, ok, mas você entenderá uma imagem completa somente quando a ver em ação Mas vou te dar uma ideia de como eles são diferentes. Portanto, o estado no react, a mágica do estado no react, é que sempre que ele muda, react sabe renderizar automaticamente o componente ou parte dele para refletir essas alterações na interface do usuário. Essa é a magia do estado. Está bem? Então, as atualizações, o reflexo das atualizações. Então, sempre que você clicar aqui, por exemplo, se eu clicar aqui, você pode ver toda a página da web ou essa página em particular sendo renderizada automaticamente Esse componente está sendo renderizado automaticamente com base nesse clique no botão Está bem? Amanhã, talvez eu tenha um botão que possa introduzir uma alteração em certas partes do aplicativo. Então, basta clicar nesse botão. O estado está mudando e, como o estado está mudando, parte do aplicativo que está vinculada a esse estado é renderizada novamente. Está bem? Não tenho certeza se você consegue entender isso, mas a mágica está na rerenderização, o que não é possível Está bem? Com variáveis, você precisa lidar com tudo no React manualmente. Mas com os estados, tudo está resolvido porque é um recurso que o react está fornecendo. E você verá isso em breve quando eu fizer uma demonstração disso, ok? Portanto, a mágica do estado no react é que, sempre que ele muda, react sabe renderizar automaticamente o componente para refletir as mudanças na interface do usuário. Está bem? Isso é importante. Agora, outra pergunta que alguns estudantes podem ter é essa. Ok, como isso é diferente dos adereços ou propriedades que passamos para o componente OK. Agora, eu gostaria de acrescentar aqui que os adereços, que também são conhecidos como propriedades, são como uma configuração ou atributo que você passa para o componente, ok? Eles são somente para leitura, em primeiro lugar, você também não pode alterar as propriedades, certo? E eles só passaram em uma direção, como do componente pai para o componente filho, certo? Então, os adereços são diferentes. O caso de uso é diferente. É como algumas informações, configurações ou atributos que você pode querer passar para um componente específico. Eles são diferentes dos estados, certo? Portanto, lembre-se disso, um estado no react é uma forma de um componente reter algumas informações, portanto, reter informações é uma parte importante dessa definição, e essas informações podem mudar com o passar do tempo e precisam ser lembradas. Isso é importante. Está bem? Como é diferente das variáveis se você for questionado em uma entrevista? Sim, é diferente porque react funciona com componentes do react. Os estados funcionam com componentes de reação. Eles estão vinculados aos componentes react e o react sabe como renderizar novamente o componente automaticamente se houver alguma alteração no estado. Está bem? Isso não é possível com variáveis, certo? E elas são diferentes das propriedades, ok, porque elas são somente para leitura. As propriedades são somente para leitura, quero dizer, certo? E os estados são diferentes. Então, espero que isso esteja bem claro. Espero ter conseguido explicar isso em termos muito simples para você, ok? Você ganhará muito mais clareza. Quando você começar a usar estados e ver seu primeiro programa usando estados de reação, você entenderá como isso é incrível, certo? Então, espero que isso tenha sido útil. 4. Dominando o estado em componentes funcionais com ganchos do React: Então agora é hora de entrarmos em contato com o U.S. State Hook aqui e reagirmos, certo? E, pelo mesmo motivo, criei esse projeto em particular. É um projeto muito simples. OK. Aqui você pode ver que este é o código que eu gerei usando wheat and react. E aqui, eu tenho esse componente de aplicativo. E esse componente do aplicativo está basicamente renderizando um título. Está bem? Está apenas imprimindo olá aqui. Está bem? E esse aplicativo está sendo renderizado aqui em pontos médios, ok? Muitos cães SX. Quero dizer, está bem? Então, não há literalmente nada no componente do aplicativo, e o que vamos fazer é aprender como você pode usar os estados no react com a ajuda de ganchos, e vamos fazer isso com ajuda da construção de um exemplo, na verdade, e o exemplo será um contra-exemplo famoso, sabe Então, basicamente, esse é um dos melhores exemplos que eu acho que devo aprender sobre estados porque você pode atualizar o valor do contador. Incremente o decréscimo e brinque com ele. Tudo bem? Sem falar na saída, essa é a saída que você está vendo desse aplicativo. Tudo bem. Então, o que eu faria é, em primeiro lugar, já que estamos querendo usar o use state hook, ok? Então, eu vou te dizer, em primeiro lugar, o que é estado de uso. Portanto, use state é um gancho que nos é fornecido pelo react, o que nos permite adicionar estados ao componente funcional. Então esse é um componente funcional, certo? Componente funcional, ou seja, componentes que são criados com a ajuda de funções, certo, no React. E se você quiser adicionar o estado aqui, queremos exibir um contador aqui, certo? Portanto, o contador é uma informação que queremos exibir. O contador, devemos ser capazes incrementar o contador e diminuir o contador Então, devemos ter dois botões ali, certo? Portanto, para acompanhar qual número do contador, para acompanhar qual é o número do contador, precisamos de um estado. E como adicionamos estado a um componente funcional? Fazemos uso do nosso estado, certo? Portanto, esse é um gancho que nos é fornecido pelo react e facilita nossa vida ao usar recursos como estado em componentes funcionais. Tudo bem. Agora, eu vou vir aqui. Como você faz uso disso? Está bem? Então eu vou dizer importar, e eu vou dizer aqui, use o estado, algo assim. Está bem? E você pode ver que ele preencheu automaticamente estado dos EUA a partir do react. Tudo bem. Então, o que isso está fazendo é importar use state Hook do módulo react Agora, o módulo react tem esse nome de exportação, que podemos importar, certo? E vamos fazer uso disso aqui. Está bem? Agora, aqui, dentro do aplicativo, o que vou fazer é definir um estado, que será chamado de contagem. Está bem? Então, vou dizer const e primeiro mostrarei a sintaxe e depois explicarei o que a sintaxe significa e o que está acontecendo nos bastidores . Tudo bem. Então eu vou dizer count, e eu vou definir a contagem aqui e vou fazer uso do estado de uso aqui. Algo parecido com isso. E eu vou passar uma discussão aqui, que é zero, e vou terminar com um ponto e vírgula Está bem? Então, adicionamos um estado ao nosso aplicativo. Esse estado é chamado de contagem, certo? E essa é uma função que nos ajuda a atualizar esse estado específico. Está bem? Então, agora estamos usando o estado de uso aqui para criar um estado. Agora, o que acontece é que sempre que você usa use state, essa é uma função embutida que retorna uma matriz com dois itens Está bem? Ele retorna uma matriz com dois itens. O primeiro item é o próprio estado do estado. E o segundo item é uma função para atualizar esse estado específico. Está bem? Então, ele retornou dois itens, e o que fizemos foi usar a desestruturação aqui, a desestruturação matrizes porque isso está retornando na forma de Então, usamos a desestruturação de matrizes e obtivemos o nome do estado, como o estado como contagem e a função como contagem de conjuntos, certo? Então é assim que o estado funciona, ok? Lembre-se de que ele está retornando o estado e uma função para atualizar esse estado específico. Tudo bem. Então, isso é algo que temos para contar. Você vai me perguntar, o que é esse zero aqui? Está bem? Portanto, zero nada mais é do que o valor atual ou o valor inicial com o qual você deseja que o estado seja inicializado Então, quando essa contagem for criada, seu valor inicial será zero. Está bem? Então, espero que esteja claro o que essa linha está fazendo. Ok, para simplificar, estamos criando um estado aqui, e sempre que criamos um estado no react, usamos um gancho de estado como este, em que você pode passar qualquer tipo de valor padrão ou inicial que você queira ter, ok? E use state retorna uma matriz, que consiste em duas coisas. Um é o estado em si e o outro é a função de atualizar esse estado. Está bem? Então, temos o estado e a função nessas duas coisas aqui usando o conceito de estruturação de RAD Tudo bem? Espero que esteja claro o que estamos fazendo. Agora, o que eu faria é aqui, em vez de dizer olá, eu diria contravalor, ok? Eu vou dizer contravalor. E agora esse estado é como uma variável JavaScript, certo? Assim, posso usar essa sintaxe e exibir a contagem aqui Agora, no momento em que eu salvar isso e se eu vier aqui, você verá que o valor do contador é zero. Está bem? Se você fizer cinco aqui. E se eu salvar isso, você verá que o valor do contador é cinco. Então, estamos vendo o valor inicial como zero e cinco. Então, vou ficar com zero. Se você quiser que o contador comece com cinco, você pode ter cinco como o valor inicial aqui. Tudo bem. Isso está feito. Agora, como atualizamos o estado? Portanto, você tem essa função de contagem definida que pode ser usada para atualizar o estado. Tudo bem. Então, o que eu faria é colocar um botão aqui. Obviamente, acionaríamos atualizações usando esse botão. OK. E vou chamar esse botão de incremento. E eu vou ter mais um botão aqui e vou chamar esse botão de decréscimo aqui, ok? Primeiro, trabalharemos no incremento e veremos como podemos incrementar o valor de um Está bem? Então, eu vou dizer que não, clique aqui. Isso está em um clique. E aqui, eu preciso acionar a contagem de conjuntos, certo? Portanto, set count aceitará um parâmetro, que é o valor atualizado da contagem. Então, o que eu faria é ter uma função de seta aqui, e eu diria definir contagem, algo assim, e eu diria o valor atual de contagem mais um. Está bem? É com isso que eu quero inicializá-lo, certo? E eu vou vir aqui. Você pode ver esses dois botões, incrementar, diminuir, você pode incrementar E você pode ver que acabamos de aumentar a contagem aqui, certo? Fizemos mais alguma coisa? Acabamos de incrementar a contagem e, apenas incrementando a contagem, o componente está sendo renderizado novamente e você está vendo o valor atualizado da contagem sendo OK. Vamos fazer o mesmo com o decréscimo também. Então, se você clicar em diminuir, nada acontecerá por enquanto. Mas o que você pode fazer é copiar isso aqui e fragmentar isso e, em vez de incrementar, direi menos um. E eu vou guardar isso. E se você vier aqui, agora você pode diminuí-lo assim, incrementá-lo assim, e você pode ver tem um ótimo contador em E veja a quantidade de código que você escreveu. Você mal escreveu poucas linhas de código, certo? Há uma linha, e essas são as duas linhas, como três linhas, basicamente, certo? Isso é o que você fez, certo? E o react está fazendo muita coisa internamente. Está bem? Então, deixe-me dizer, sempre que você estiver atualizando a contagem aqui, react está renderizando novamente o componente porque sabe que o valor desse estado mudou e esse estado está associado a esse componente específico O que ele está fazendo é acionar uma nova renderização e, com a ajuda da nova renderização, o componente está sendo renderizado novamente e você está vendo o valor atualizado Isso é muito mais eficiente do que renderizar a página inteira Está bem? É apenas atualizar certas partes do aplicativo do ponto de vista da eficiência Tudo bem. Então, isso é muito bom esse é um recurso muito bom do react use State Hook, Ok, que estamos usando ativamente agora. Está bem? Podemos até mesmo detalhar isso. Ok, então agora o que estamos fazendo é realmente ter a lógica aqui com a ajuda da função anônima. OK. O que você pode fazer é, apenas por uma questão de simplicidade, você pode ter uma contagem de incrementos constante aqui, ok, algo assim Então essa é uma função que estou criando. OK. E aqui, ok, desculpe. Então, o que você pode fazer aqui é incrementar Oops. Portanto, será uma função de seta, e o que você pode fazer é dizer que a contagem definida é igual a contar mais um. Está bem? E você pode definir contagem igual a contar mais um, terminar com ponto e vírgula e terminar bem, terminar isso também com ponto e vírgula, certo E eu vou ter isso aqui. Eu vou dizer contagem de incrementos. OK. Então é isso que estamos fazendo. Continuamos definindo funções separadas aqui. Eu posso dizer decréscimo, decréscimo, contagem aqui, e isso pode ser negativo Opa, negativo Está bem? E da mesma forma, isso será um decréscimo. Assim. Está bem? E você pode incrementar o valor, você pode diminuir o valor, ok E você pode incrementar ou diminuir da maneira que quiser, ok Então, isso é algo que é possível aqui. Está bem? Então, sim, espero que tenha ficado claro como você pode usar o use state hook para adicionar estados aos seus componentes de reação. OK. O que fizemos aqui para recapitular adicionar um estado de contagem para o qual usamos use state hook, e esse gancho use state retornou o estado, bem como a função para atualizar o estado E temos esses dois usando o conceito de estruturação de RAD, certo? Aqui, temos esse valor inicial definido como zero para o estado, ok? E temos dois botões. Usando o qual estamos modificando o valor do estado. E sempre que estamos modificando o valor do estado, o que está acontecendo, componente está sendo renderizado novamente e a contagem é atualizada automaticamente Está bem? Então, espero que isso esteja bem claro e espero que você tenha uma boa compreensão do que são os estados e como você pode usá-los no React. Está bem? Agora, uma coisa que eu gostaria de te dizer é essa coisa aqui, ok? Há essa pergunta que os alunos normalmente têm. Por que não usar variáveis em vez de estados? Está bem? Então, eu gostaria de mencionar que a mágica do estado no react é sempre que ele muda, ok? Então, imagine lidar com tudo isso usando variáveis. Imagine ter uma variável de contagem e não usar o gancho de estado aqui. Está bem? Você precisaria renderizar novamente ou atualizar o manual do componente. Ok, o que não é bom. Aqui, o react sabe automaticamente que você precisa renderizar novamente o componente para refletir as mudanças na interface. E isso é muito, muito benéfico e útil se seu aplicativo crescer, certo? Se seu aplicativo crescer, você estará usando várias variáveis de estado gerenciando muitas coisas. Nesse caso, isso se torna muito, muito útil. Está bem? E é diferente dos adereços porque você não pode modificar os adereços nos componentes secundários Eles são somente para leitura, e os estados são algo diferente que permite que você tenha um melhor controle e melhor gerenciamento em comparação com variáveis e adereços Tudo bem? Espero que tenha sido útil e espero que você tenha conseguido acompanhar. 5. Manipulando várias variáveis de estado: Então, agora temos esse aplicativo que tem dois botões, incremento e diminuição, e estamos usando o gancho use state para incrementar e diminuir e gerenciar um estado para Estamos fazendo uso do componente funcional aqui. Agora, o problema aqui é que temos apenas um estado. Agora, quando você está trabalhando com componentes funcionais do react, graças ao use state hook, você não está limitado a uma única variável de estado. Você pode declarar quantas variáveis de estado forem necessárias. Agora, quando os valores de estado não estiverem relacionados, haverá cenários em que você desejará acompanhar várias informações Por exemplo, aqui estamos acompanhando a contagem, ok? Agora, talvez você queira acompanhar mais um valor e, quando esses valores não estão relacionados, faz sentido mantê-los em variáveis de estado separadas E isso pode ajudar você a tornar seu código mais limpo agrupando dados relacionados e separando os dados não relacionados. Tudo bem? Agora, vamos ver como podemos adicionar mais um estado neste exemplo aqui. Então, aqui, estamos simplesmente incrementando a contagem em um e diminuindo também Agora, digamos que eu deseje personalizar meus usuários, na qual o usuário possa me dizer se eu quero aumentar a contagem em um ou em qualquer valor Está bem? Então, o que eu vou fazer é adicionar mais um estado aqui. Vou chamar esse estado de etapa. Ok. E essa etapa definirá o incremento e o decréscimo em quanto Está bem? Então, o que eu vou fazer é replicar essa sintaxe similar Está bem? Vamos dizer use state, ok, aqui, e Opa E aqui, chamarei isso de etapa, e chamarei isso de etapa definida, algo assim. Está bem? E o valor padrão que eu terei é um, ok? Porque o valor padrão de incremento e decréscimo que eu quero ter ou quero dar aos usuários é um Ok. Agora isso está feito. Agora estamos aqui. O que vou fazer é ter uma opinião aqui. Ok. Então, digamos aqui. Deixe-me voltar e eu vou dizer a opinião. Então, vou adicionar isso um pouco antes do incremento e diminuição aqui, logo após H Está bem? Então, vou dizer entrada aqui, algo assim. Ok. E como entrada, ok, terei a etiqueta de fechamento automático. Eu não preciso disso aqui. E aqui, eu posso dizer tipo. Tipo é o que é um tipo aqui. Então, estamos trabalhando com números. Então, eu vou dizer o número aqui. Ok. E eu também vou dizer valor. Agora, qual é o valor dessa entrada específica? Então, eu preciso vincular isso à variável de estado. Então, eu vou dizer, venha até aqui. Ok. Vou para a próxima linha e direi sobre mudanças. Então, basicamente, se o usuário alguma coisa nessa caixa de entrada específica , estou permitindo alterações, certo? Mudança, gostaria de atualizar o estado, certo? Isso é o que faremos. Então eu vou dizer sobre mudança, e aqui, eu vou ter uma função. Eu direi E, o use as funções de seta, e direi que defina a etapa aqui. Ok, vou passar o valor do ponto alvo do ponto E. Outra coisa aqui é que esse valor será passado como uma string, certo? Então, posso dizer, analise aqui e posso resumir isso inteiramente no par enviado Ok, então o que está acontecendo é que estamos dizendo o valor do ponto alvo líquido. Então, basicamente, esse é o elemento, e estamos dizendo que estamos obtendo o valor desse elemento e o estamos passando para set step. O que está definido aqui? Definir etapa é a função responsável por atualizar esse estado e está sendo chamada em caso de alteração. Portanto, quaisquer alterações nessa caixa de entrada serão refletidas no estado. Está bem? Está encadernado agora, certo? Agora, ao incrementar e diminuir, preciso usar a etapa Essa é uma mudança que eu preciso fazer. Ok. Agora vamos testar a aparência do nosso aplicativo. Você pode ver que o padrão é um, eu posso incrementar o decréscimo aqui. Se eu definir como padrão dez e começar a incrementar, você verá nove, 19, 29, 39, e eu também posso diminuir. Se eu disser cinco aqui, você pode ver aqui, está se atualizando adequadamente. Então, dependendo do valor que estou alterando aqui, ele está refletindo a mudança. Você pode ver. Então, aqui, neste exemplo, estamos fazendo uso de duas variáveis de estado, eu diria, uma é contagem, outra é passo passo pelo qual queremos incrementar a contagem Certo? Então, sim, ter várias variáveis de estado em um único componente de reação é absolutamente possível. Você pode usar vários estados para acompanhar informações não relacionadas que talvez você queira acompanhar em um componente específico Está bem? Você pode até embelezar isso se quiser Então, aqui, este aplicativo não parece muito bom. Não estamos impressionados, certo? Então, o que você pode fazer é aqui, você pode vir e eu vou adicionar um pouco de CSS aqui. Ok. Então, aqui, por exemplo, eu vou dizer que para a caixa de entrada, ok? Vou dizer a opinião aqui. Para entrada, direi largura de 50 pixels. Ok. E eu vou dizer emparelhamento de cinco pixels, ok? Algo assim, e eu vou dizer margem aqui, margem de dez pixels. Ok, garrafa. Vamos adicionar uma garrafa. Vou dizer um pixel sólido e vou adicionar o código de cores que tem C e raio. Ok, para um raio de quatro pixels, algo assim Vamos ver como fica nossa entrada. entrada parece decente. Você pode ver. Ok. E também podemos adicionar um pouco de CSS aos botões. Os botões que temos parecem bem crus, certo? Botões de correio bem arrojados. Então, podemos ter acolchoamento. Eu posso ver um preenchimento de cinco pixels aqui e dez pixels aqui, ok? E você pode ver uma margem de, desculpe, cinco pixels. Ok. Botel, não posso dizer nenhum. Tudo bem E eu posso dizer raio. Posso dizer que o raio de, digamos , quatro pixels provavelmente é semelhante ao da entrada E eu posso adicionar uma cor de fundo, cor fundo do hash 007b, FFI tem E, código de cores Você pode até adicionar um azul claro aqui, se desejar, para simplificar as coisas. Então eu vou dizer azul claro, ou apenas dizer azul aqui. Azul, certo? E você pode ver a cor como, é claro, branca. Então, isso é para texto. E então você pode fazer com que o Coso Cursor possa ser um ponteiro, ok? E então você pode ter um botão, efeito de foco de dois pontos. Ok. Então, qual é o efeito de foco para isso Como é que a atualização da cor de fundo será azul escuro. Ok. Então isso está feito e vamos ver se isso e ver como isso se parece. Ok, isso parece bastante decente, eu diria: Ok, melhor do que a versão anterior, você pode ver, é um CSS decente. Você pode adicionar muito mais aqui, ok, se quiser. Ok. Então, aqui no topo, eu tenho esse contêiner de aplicativos. Eu tenho margem. Você pode ter uma margem, digamos, de 20 pixels. Ok. Então eu adicionei uma margem de 20 pixels, e isso parece decente. Ok. Então, acho que o aplicativo está decente agora, certo? E você pode melhorar ainda mais o CSS, se desejar. Ok. Mas como estamos aprendendo, acho que está tudo bem. Conseguimos ver a funcionalidade funcionar e como os conceitos de reação estão ganhando vida. Tudo bem Então, espero que tenha sido útil e espero que você tenha se divertido. 6. A natureza assíncrona do React: o que você precisa saber: Então, agora é hora de falarmos sobre atualizações de estado. Agora temos esse aplicativo de contador em que podemos incrementar ou diminuir o contador com base nos cliques do botão . Tudo bem? Agora, sempre que estiver realizando atualizações de estado, você precisa se lembrar de algumas coisas. primeira coisa importante é que as atualizações de estado são de natureza assíncrona, o que significa que não estão E o que o react faz é agrupar várias atualizações de estado Está bem? Agora, sempre que você estiver fazendo várias atualizações de estado, você deve usar uma atualização ou função Agora você perguntará o que é uma função updata? Portanto, a função updata é uma função de seta ou uma função simples que é passada para passar ao atualizar o estado de uma variável específica ou de um componente específico no react Está bem? Agora, deixe-me dar um exemplo disso. Tudo bem? Agora, digamos que temos essa contagem de incrementos, ok, eu posso incrementá-la em um ou qualquer que seja o passo Está bem? Agora, o que eu faria é deixar eu adicionar mais um padrão aqui, ok? Então, vou adicionar mais um botão. Ok. E eu vou dizer incrementar ou deixe-me adicionar mais dois aqui. Coisa assim. Ok. Então, o que isso fará é incrementá-lo duas vezes, ok? E eu vou dizer incremente duas vezes aqui. Tudo bem Essa função não existe. Então, o que faremos é vir aqui para incrementar a contagem, e eu vou duplicar isso e dizer Duas vezes, algo assim. Está bem? Agora, o que eu quero fazer é incrementar isso duas vezes Então, eu incrementei isso uma vez, e vou incrementar isso duas vezes aqui Está bem? Se eu vier aqui, você verá esse botão. Agora, idealmente, ao clicar nesse botão, o valor do contador deve ser incrementado duas vezes. Então, a partir de cinco, se for cinco, deve se tornar sete. Se for zero, deve se tornar dois. Por quê? Porque estou atualizando o estado duas vezes, certo? Agora, deixe-me mostrar um exemplo ou deixe-me mostrar uma demonstração disso, ok? Eu salvei o arquivo e, se eu fizer mais dois, você verá que ele está aumentando em apenas um. Está bem? Deixe-me fazer uma atualização do zero, será um, dois, três e assim por diante Está bem? Não o está incrementando em dois E a razão para isso é as atualizações de estado são assíncronas Portanto, ele agrupa várias atualizações de estado. Agora o que está acontecendo está aqui, escrevendo esse conjunto de contagem ou contagem mais um. É equivalente a ter zero mais um aqui e zero mais um aqui. É equivalente a isso. Por que é equivalente a isso porque o valor inicial do estado é zero. Se o valor inicial for um, então é equivalente a escrever um mais um e um mais um. O valor anterior. Então, basicamente, você está atualizando a contagem aqui para dois, certo? Portanto, isso não está sendo levado em consideração ao executar essa segunda linha O estado inicial da contagem é levado em consideração. E a razão para isso é porque ele é assíncrono e as várias atualizações são Então, eu vou fazer o controle C. Ok. Então isso não vai funcionar, certo. Então, o que vou fazer é usar uma função updata. Está bem? Portanto, precisamos usar uma atualização ou função para várias atualizações de estado. Então, vou apenas comentar isso, mais ou menos. Ok. Vou colocar isso aqui. Agora, para usar a função updata, usaremos uma função de seta muito simples aqui que nos ajudará a realizar a atualização Está bem? Então, aqui, eu vou dizer contagem ou contagem anterior aqui como esta, algo assim. E eu vou ter isso aqui. Agora, contagem anterior aqui, essa variável em particular está tendo o valor do valor anterior da contagem. Está bem? Então eu vou pegar isso aqui e isso virá aqui, algo assim. Ok. E agora vamos ver a saída. Agora, se eu atualizar, se eu fizer mais dois mais dois mais dois, você pode ver que está aumentando Certo? Então, isso está funcionando bem. E a mudança que fizemos foi que agora estamos usando essa função de seta aqui, ok, que está apenas fazendo o trabalho de pegar o valor anterior da contagem e incrementá-lo Agora, esta é apenas uma convenção aqui onde eu usei essa variável chamada contagem de PIV Normalmente, é uma convenção. Normalmente, você veria que, se lesse o código on-line, veria qualquer que seja a variável de estado. A primeira letra é convertida em maiúscula, como C é maiúscula aqui, e PIV é adicionado abaixo ou antes do nome do estado aqui, o que indica que é um valor anterior Está bem? Você também pode usar C e C aqui, C e C. A saída não vai mudar. Está bem? Então isso é só uma convenção. Se eu fizer uma atualização e jogar novamente, você pode ver que está aumentando duas vezes aqui Portanto, sempre que você quiser fazer várias atualizações de estado juntas, tudo bem, é melhor usar esse tipo de sintaxe em que estamos usando uma atualização ou função Está bem? Aqui, o que está acontecendo é o valor anterior do estado é obtido em C e incrementado em um E então, para a próxima chamada, valor anterior, que é a atualização como aquela após a contagem atualizada a partir desse código específico aqui, que é passado para cá e, seguida, é incrementado em um Portanto, você não cometerá nenhum bug se estiver fazendo as coisas dessa maneira. Está bem? É um problema muito comum em que os desenvolvedores fazem as coisas dessa maneira e dizem: Ei, há alguma inconsistência no meu código e não estou vendo a saída desejada E a razão para isso é simples por causa da natureza assíncrona das atualizações Portanto, atualizar uma função é útil nesse caso específico. Aqui, nesse caso específico, se você estiver escrevendo código dessa forma, as atualizações serão enfileiradas Está bem? Então, esse primeiro é executado e, em seguida, o próximo é colocado na fila E então, quando o primeiro termina, esse é executado e, até lá, está na fila Está bem? Então, é assim que você pode agrupar ou fazer várias atualizações em conjunto. Lembre-se de que as atualizações de estado no react for components são de natureza assíncrona e você precisa usar as funções updata para várias atualizações de para Agora, o que o updata funciona, como eu disse, é uma simples função de seta que você está passando Para a função de atualização aqui. Então essa é a função que está sendo usada para atualizar o estado. Está bem? E você está passando a função de atualização aqui para atualizar o valor Tudo bem Então, espero que tenha sido útil e espero que você tenha conseguido acompanhar. 7. Navegando por matrizes e objetos no React State Management: Olá, aí. Então, neste vídeo, vamos criar um aplicativo que vai nos ajudar a gerenciar vários contadores, certo? Então, quando digo que está nos ajudando a gerenciar vários contadores, você pode adicionar contadores rapidamente na página Você pode até mesmo incrementar contadores separados individualmente, ok Então deixe-me te mostrar. Eu tenho esse balcão aqui, ok? E eu posso incrementar um, dois, três, quatro. Esse é o contador um. Ok, eu posso adicionar um contador do jeito que eu quiser. Eu adicionei cinco contadores aqui. Eu posso incrementar aquele dependendo da minha escolha. E você pode ver que cada contador tem sua própria contagem aqui, ok? Não se sobrepõe de forma alguma e tem seu próprio botão que está ouvindo o evento E sempre que você estiver clicando nesse botão específico, o estado correspondente a esse contador específico é incrementado, ou a contagem correspondente a esse contador específico é incrementada e não os outros Está bem? E você pode adicionar quantos contadores quiser, dependendo da sua necessidade, tudo bem, pelo tempo que quiser. Tudo bem Você pode até mesmo aprimorar esse aplicativo para adicionar um botão de diminuição para adicionar uma etapa aqui, ok? Então, com o passo a passo, você pode pegar um número, que decidirá se ele deve ser incrementado em um ou em qual número ele incrementará Pi. Está bem? Então você pode fazer isso e até mesmo adicionar um botão para excluir o contador. Então, se você quiser excluir um contador específico, você pode selecioná-lo e excluí-lo. Então, essas são as melhorias que podem ser feitas, ok. Mas agora, esse é o exemplo que vai ser. É uma lista de vários contadores reunidos. Com sua própria contagem que está sendo exibida e seu próprio padrão de incremento, que pode nos ajudar a incrementar a contagem do respectivo Tudo bem? Pronto? Então, vamos direto ao assunto. Então, aqui, estou no aplicativo e tenho esse aplicativo de arquivo dot JSX, em que tenho algumas importações na parte superior, e tenho essa função ou um componente funcional sendo criado com exportação, e ele está simplesmente exibindo olá agora, certo? E você pode ver hello como saída aqui. Está bem? Agora, o ponto que eu quero demonstrar aqui neste vídeo é que eu vou falar é que você pode armazenar matrizes, objetos e estruturas de dados ainda mais complexas em um estado Está bem? Portanto, o estado simplesmente não está limitado a uma variável normal. Não é como se você pudesse armazenar um único valor em um estado, mas você pode ter coisas complexas, como matrizes, objetos e muito mais Está bem? E é para isso que esse exemplo será direcionado, ok? Então, se você der uma olhada no aplicativo que vamos criar, ok, precisamos de uma lista de contadores, Então, com o aplicativo, o que vamos fazer é criar um estado aqui. Ok. Então eu vou dizer const. Ok. E em vez de contador, vou dizer contadores aqui, algo assim, e vou dizer definir contadores aqui Ok. E eu vou dizer que use o State aqui. Ok. E precisamos de um bloco de inicialização aqui, certo? Então, vou inicializar isso para o padrão e o padrão será isso aqui. Está bem? Então eu vou dizer ID, e ID será um, e eu vou dizer que valor e valor são zero. Está bem? Então, essa variável ou esse estado basicamente tem a lista de todos os contadores na forma de uma matriz, e cada contador aqui é um par de valores-chave Você pode ver que este é um contador, ok, que tem seu próprio ID e seu próprio valor. Está bem? Então esse é o contador um, e é um objeto para o contador um, e você tem uma matriz de contadores aqui Você pode dizer que isso contém uma matriz de contadores e um único contador nada mais é do que um objeto, que tem ID e valor como atributo Está bem? Então é assim que será mantido aqui. Vou levar isso para novas linhas para que fique visível em uma única tela aqui. Está bem? Então está claro, ok, por que estamos tendo esse tipo de coisa. Está bem? Agora, a próxima coisa que eu quero adicionar aqui é uma função, ok? Vou dizer const, adicione contadores aqui. Ok. E essa é uma função que nos ajudará a adicionar novos contadores à interface, certo? Então é uma função de seta, e aqui, vou adicionar um ponto e vírgula, e eu vou ter a lógica aqui Agora, para adicionar os contadores, o que precisamos fazer é, ok? Então, deixe-me pegar essa matriz. Então essa é a matriz. Ok. Deixe-me resumir isso em uma linha. Esse é o balcão, certo? Agora, para adicionar mais um contador, o que eu preciso fazer é pegar tudo isso. Está bem? Preciso dizer vírgula e preciso adicionar isso aqui com o ID também. Certo? É assim que vou adicionar mais um contador. Se eu precisar adicionar mais um, o que farei é dizer vírgula, adicionarei a mesma coisa e converterei isso em três, certo? Então é assim que estou adicionando contadores, certo? Agora, como posso implementar essa lógica aqui, certo? Então, o que eu preciso fazer é primeiro precisar da lista de todos os objetos atuais que existem, ok? E eu preciso acrescentar mais um objeto no final cujo ID é incrementado por. Eu repito. Então, a lógica aqui que eu preciso implementar é ter a lista de todos os objetos atuais que existem para o contador, na matriz, e depois adicionar mais um objeto no final cujo ID é incrementado em um Você pode ver, como faríamos isso? Então eu vou me livrar disso aqui. Ok, essa coisa. E o que eu preciso fazer é ligar para set counter primeiro porque precisamos atualizar isso aqui, certo? Então, eu vou dizer três pontos. Vou usar esse operador de propagação. Vou dizer contadores aqui. Está bem? Então, vou espalhar o valor existente dos contadores aqui Está bem? Desculpe, isso precisa estar em, é uma chamada de função, certo? Por aqui. Ok. Então, primeiro, distribuirei o valor existente dos contadores e, em seguida, direi ID, dois pontos, direi comprimento do ponto dos contadores mais um E eu vou dizer valor zero. Então, essa seria minha lógica basicamente adicionar novos contadores. Espero que isso esteja fazendo sentido aqui. Está bem? Então, o que estamos fazendo é criar uma nova função de seta chamada adicionar contadores, certo? E estamos chamando contadores definidos. Por que estamos chamando contadores de conjuntos? Porque é a função de atualização de estado para contadores, certo? Agora, como atualizamos o estado? Com que valor estamos atualizando isso? Então, seja o que for que exista, precisamos adicionar uma matriz. Está bem? Precisamos adicionar a atualização da matriz existente com uma nova matriz. Está bem? Precisamos atualizar a matriz existente que ela contém. Então essa é a matriz existente, certo, que está se mantendo. É ter um objeto. O que precisamos fazer é tornar o operador de spread e ter todos os contadores espalhados aqui Está bem? E então precisamos adicionar mais um no final. Precisamos dizer que ID é o comprimento do ponto do contador mais um e o valor é zero Ok. No momento em que fazemos isso, ele é adicionado à lista existente e agora os contadores terão dois contadores aqui, um com ID um e outro com ID E então, se você ligar para os balcões novamente, o que vai fazer é espalhar os dois aqui e adicionar o terceiro e assim por diante Está bem? Então, espero que essa lógica esteja bem clara. Estamos usando o operador de propagação aqui e estamos criando uma nova matriz que está se substituindo pela existente para contadores Arco? Então isso é feito no balcão. Agora, o que precisamos fazer é vir até aqui. E eu preciso adicionar um botão. Preciso atualizar o Y aqui. Eu vou dizer botão. Eu direi em um clique. O que devo chamar ao clicar? Vou chamar somar contagem aqui, e vou dizer que é plural, então vou dizer adicionar contagem aqui Ok, assim e eu vou dizer no balcão, algo assim. Ok. E eu vou fechar esse botão aqui. Ok. E também precisamos exibir o contador, certo? Como exibimos? Então, vamos exibi-la como uma lista não ordenada, uma simples lista não ordenada usando essas tags HTML Está bem? E eu vou dizer que o mapa de pontos dos contadores Então, estamos fazendo uso do mapa aqui. Ok. E aqui, eu preciso dizer contador. Ok, então para cada elemento nos contadores, eu estou dizendo contador, isso é que eu estou aceitando isso como um parâmetro e eu estou tendo isso basicamente, eu estou tendo essa função de seta aqui. Está bem? E o que eu faria aqui é criar uma lista aqui. Ok, algo assim. Então, Ali e eu vamos criar uma lista. Ok. Agora, o que essa lista vai ter, ela vai ter uma chave. Obviamente, precisamos adicionar uma chave para que a renderização seja otimizada Portanto, ele terá um ID exclusivo, que é o ID do contador de pontos. Ok. E aqui, eu preciso exibir o contador, e podemos exibir o ID do ponto do contador. Eu preciso ter uma interface de usuário, que diz: Ok, então a interface que eu preciso exibir é o contador um, dois pontos de valor, e então ela tem um botão aqui Ok. Em seguida, tem um botão. Opa. Então aqui, há um botão. Essa é a interface de usuário que eu quero ter, certo? Então eu tenho um contador, e um nada mais é do que o ID, o ID do contador. Vou adicionar dois pontos aqui. Está bem? Eu direi o valor do contra-ponto. Ok. Quero exibir o valor porque zero é o valor. E então eu preciso ter um botão. Está bem? Então, vou adicionar um botão. Vou levá-lo para a nova linha e vou dizer botão. Ok. E ao clicar, deve haver um evento ao clicar. Tudo bem. E com um clique. Ok, algo parecido. Preciso vinculá-lo a uma função. Está bem? Será uma função de contador de incrementos que ainda não existe. Ok, então eu vou ter uma coisa vazia aqui. Vou deixar isso vazio. Está bem? E aqui, eu vou dizer incremento incremental. É isso mesmo. Tudo bem E eu preciso me livrar desse texto aqui. Isso é apenas para fins de explicação. Vou salvar isso e nos deixar ver a interface do usuário. Somos capazes de ver isso? Sim. Conseguimos adicionar o contador? Vamos tentar. Você vai ver? Incrível, certo? O incremento não funcionará porque não criamos essa função Estamos apenas chamando uma coisa vazia por aqui, certo? Então, como isso está funcionando, como o contador de adição está funcionando. Primeiro, estamos mantendo o contador dessa forma. Está bem? Então, se isso não estiver claro, deixe-me explicar para você, de uma forma mais clara. Ok. Vou dar todos os passos até aqui para garantir que você entenda. Está bem? Então é quando a contagem de contadores é um, ok? Contador. A contagem é uma. OK. Quando a contagem de contadores é dois, tudo bem. Contra-dois. O que acontecerá é que quando você adiciona um contador, ele também é atualizado. Então, isso é atualizado para essa coisa. OK. É mais um. Esta é a identificação dois. Está bem? Quando o contador se torna três, há três contadores, ok? Ou 1 segundo. Deixe-me dizer quando um contador. OK. Vou copiar isso quando dois contarem e quando três contarem. Então, isso é dois contadores, e essa é a contagem de três. Está bem? Agora, quando há três contadores, o que você faz é adicionar o terceiro elemento aqui Este é o terceiro balcão aqui. É assim que os contadores estão sendo gerenciados. Está bem? Espero que isso esteja fazendo sentido. Então, isso é quando há apenas um contador. Ok, então o contador está representado. Portanto, o contador pode ser representado por duas coisas. Uma é a ID do contador e a outra é o valor. Está bem? Então, inicialmente, temos um contador com ID um e valor zero. Foi com isso que inicializamos, certo? E o que estamos fazendo é renderizá-lo, como estamos entrando nele Então, se você rolar até aqui, ok? Estamos dizendo que para cada contador, use o método map aqui porque estamos usando map aqui porque ele está sendo armazenado em uma matriz. É uma variedade de objetos, certo? Cada contador é representado dessa forma, certo? O contador é representado dessa forma. E para representar vários contadores, estamos criando uma matriz, certo? Isso é uma matriz. Você pode ver que os elementos estão sendo adicionados. Está bem? Quando três contadores são três contadores adicionados, você pode ver que três elementos estão lá, certo Então, estamos dizendo um mapa de pontos de contadores. Está bem? Para cada contador, precisamos exibir o ID do contador. Desculpe, não estamos exibindo a ID do contador, mas a estamos adicionando à chave e exibindo a ID do contador desta forma. Ok, estamos vendo o contador um e estamos exibindo o valor. E, ao clicar, precisamos realizar o incremento, que não estamos fazendo no momento Está bem? E quando dizemos adicionar, quando clicamos neste botão, adicione o contador aqui. O que está acontecendo é que essa função está sendo chamada. O que essa função está fazendo é adicionar um elemento nessa matriz. Você pode ver aqui que ele está adicionando esse elemento na matriz, mas está garantindo que o ID seja incrementado em um Está bem? Então, como é adicionar um elemento na matriz? Está espalhando os elementos existentes. É criar um novo elemento, nova matriz, espalhando o elemento existente e anexando um novo elemento no final Então, como é criar uma nova matriz? Ele está criando uma nova matriz aqui espalhando a matriz existente e anexando um novo elemento à matriz no final e garantindo que seu ID seja incrementado É assim que está fazendo. Está bem? Então, isso está feito. Não vou deletar isso Estou apenas fazendo isso na forma de comentários. Eu acho que isso é bom para entender o propósito. Se você ainda está confuso, então, olhando para isso, tudo deve ser esclarecido, certo? Porque é assim que o contador fica quando há três contadores sendo criados É assim que o estado seria. OK. Agora isso está feito. Agora, o que eu preciso fazer é ter um contador de incrementos. Tudo está pronto, certo? Contador de incrementos. Então, isso está funcionando bem se eu atualizar. Ele é inicializado primeiro em um e, se eu adicionar vários contadores, você pode ver que o ID também está sendo Está bem? Então eu vou vir aqui. O que eu faria é salvar aqui const. Está bem? Eu vou dizer incremento. Contador. Ok, contador de incrementos, algo assim aqui. OK. Vou ter uma identificação aqui sendo passada e uma função de seta. Opa, funções de seta, algo assim, terminando com ponto e vírgula Agora, como podemos incrementar o contador? Então, temos a identificação do balcão, certo? Como obtemos a identificação? Estamos trazendo isso para cá, e precisamos passar por aqui. Está bem? Como podemos passar por isso? Então, podemos dizer aqui. Esta é uma função de seta, então vou removê-la. Eu vou dizer contador de incrementos. E eu vou dizer Counter Dot ID, algo assim. Então, estamos passando a identificação do contador. Então, sabemos qual contador está sendo incrementado. Está bem? Agora, o que precisamos fazer é pesquisar essa matriz e obter o contador. Cujo botão de incremento é clicado ou cujo ID corresponde, e precisamos incrementar o valor e atualizar o valor para a coisa incrementada aqui Ok, então como fazemos isso? Então, o que precisamos fazer é Ala vir aqui. Primeiro, direi o mapa de pontos dos contadores. Está bem? E eu vou fazer uma busca aqui. Vou examinar toda a matriz aqui. Vou dizer como vou pesquisar, vou dizer que o ID do contador é igual ao ID. Está bem? E se for igual, o que fazemos? Nós incrementamos. Ok, eu preciso adicionar a lógica para incremento, caso contrário, você só tem o contador aqui Está bem? Você não faz nenhuma alteração. É assim que a lógica funcionaria. Está bem? Além disso, a saída disso deve ir para definir contadores porque precisamos atualizar o estado, certo? Então, vou adicionar tudo para definir contadores. Está bem? Agora, como a lógica funcionará aqui? Então, qual seria a lógica de incremento aqui? Eu diria que adicionaria um par de colchetes encaracolados. Está bem? Eu diria que espalhe o contador aqui e atualize seu valor aqui. Ok, vou dizer contravalor mais um. Está bem? Então, o que isso vai fazer é espalhar o contador atual junto com seu atributo, substituir o valor aqui e incrementar o valor Está bem? Primeiro, todos os atributos são deixados como estão. Então, primeiro, ele espalha o contador aqui e, em seguida, atualiza o atributo de valor do contador com o novo valor Está bem? E é isso que é devolvido. E se isso não for uma combinação, isso será executado somente quando for verdade. Se isso não corresponder, o que acontece é que o contador atual está sendo retornado. OK. Espero que isso esteja fazendo sentido. E então, se eu vier aqui, vamos testar isso. Se eu concordar, você pode ver, está funcionando bem, certo? Você pode ver que o aplicativo inteiro não foi recarregado mesmo depois de adicionarmos a função, ok? Mas somente as peças relevantes foram recarregadas porque os contadores ainda estão lá Toda a recarga, essa é toda a recarga do aplicativo aparência de toda a recarga do aplicativo. Tudo está reiniciado. Certo? Então, isso não foi feito mesmo quando adicionamos uma nova função, certo? Então essa é a beleza de reagir nos estados daqui. Então você pode ver que esse aplicativo está funcionando conforme o esperado, ok? E espero que isso esteja lhe dando uma boa ideia de como você pode ter estruturas de dados complexas, como matrizes, objetos e estruturas de dados ainda mais complexas no estado E aqui está como você pode usá-lo. Está bem? É um exemplo bastante decente ou um bom exemplo, eu diria que ajuda você a entender o poder dos estados e como você pode trabalhar com os estados para criar maravilhas, eu diria Tudo bem. Então, espero que você tenha conseguido acompanhar, e espero que saiba, então esse é um CSS básico que eu tenho. Está bem? Não é muito, ok? Mas coisas super básicas, como estilo de contêiner, estilo H one, estilo de entrada, estilo de borda, desculpe, estilo de botão e estilo Eu tenho um CSS tão simples, que já estava vinculado a esse arquivo específico. Está bem? Então, espero que tenha sido útil e espero que você tenha conseguido acompanhar. 8. Projeto em destaque: gerenciando entradas de formulários com o useState Hook do React: Oi, aí. Então, agora é hora de falarmos sobre como você pode criar um formulário usando o react e gerenciar todos os dados com a ajuda do estado e usar o State Hook nos componentes. Tudo bem? Então é isso que vamos construir. Na verdade, tenho o Temo aqui. E você pode ver que existem diferentes tipos de elementos de formulário diferentes tipos de elementos de formulário com os quais vamos brincar. Então, primeiro, você tem uma caixa de texto normal. Ok, e você tem uma caixa de seleção. Você tem botões de rádio, tem uma caixa de seleção e pode ver todos os dados do formulário sendo atualizados ao vivo aqui. Deixe-me fazer uma demonstração. Então, tudo o que eu inserir aqui ou o que eu selecionar será exibido aqui. Está bem? Então aqui, se eu disser , Ei, você pode ver esse texto aqui em cima. Ok, posso dizer que adoro o React, algo assim. E você pode ver qualquer tipo de atualização que eu faço, que também se reflete em tempo real. Eu posso selecionar os botões de rádio. Você pode ver a opção 1 sendo exibida aqui. Se eu mudar para a opção dois, você verá a opção dois aqui. O mesmo vale para a caixa de seleção. Eu posso ver marcado e desmarcado e também para selecionar Você pode ver a opção um, a opção dois. Tudo bem. Portanto, este é um formulário que está sendo totalmente gerenciado pelo react com a ajuda do U State Hook, e você pode ver como ele é capaz de atualizar uma parte do aplicativo sempre que houver uma alteração em outra parte sem atualizar a página Essa é a beleza de reagir, certo? Assim, você pode ver como está funcionando. Você pode, mesmo se atualizar alguma coisa a qualquer momento, ver a atualização sendo refletida sem que a página seja atualizada ou recarregada Tudo bem. Então, vamos construir isso na prática e analisaremos todas as etapas de como você pode construir isso. E esse conhecimento será muito útil se você estiver planejando usar o react para, você sabe, criar formulários, formulários dinâmicos com algumas validações robustas Então, aqui estamos no IDE, e esse é o código de inicialização que eu tenho aqui. É um componente chamado componente de aplicativo. Está bem? O nome é aplicativo em si. Residindo no arquivo app dot JSX, vinculado a um CSS chamado app dot CSS, o arquivo CSS literalmente Tudo bem. Então, precisamos trabalhar nisso. Ele está simplesmente exibindo um cabeçalho aqui ou, devo dizer, um título chamado olá na página da web, certo? Então, começaremos com esse aplicativo. Em primeiro lugar, o que vamos fazer é usar o estado de uso aqui, tudo bem Certifique-se de importar o estado de uso na parte superior, ok? Eu já tenho um importado. Então, vamos fazer uso do estado. Eu vou dizer constante. Vou criar um estado chamado dados do formulário e terei um conjunto de dados do formulário. Função aqui, e então eu vou usar nosso estado assim, sim, com o que isso vai ser inicializado Isso é interessante. Então, esse é um objeto, basicamente, que conterá todos os dados dos formulários. Então, temos uma mensagem aqui, certo? Temos uma caixa de seleção, e a inicialização da caixa de seleção é falsa Temos um rádio, que está sendo inicializado com algo vazio ou sem dados como tal Isso também está vazio. E então temos aqui, selecione algo assim. OK. Assim. Então essa é a inicialização inicial. É um objeto com esses atributos. Tudo bem. Agora, o que vou fazer é começar a construir no formulário aqui. Está bem? Então eu tenho esse H. Vou mudar isso, vou mudar o texto para formar um exemplo. OK. Vou ver se é isso. OK. Isso está feito. E aqui, então eu terei esse nome de classe como contêiner de formulário, algo assim, contêiner de formulário. Isso será útil para CSS mais tarde. Eu vou ter uma tag Fm, que é a tag HTML Fm. OK. E agora vou começar a trabalhar nos elementos um por um. Então, o primeiro elemento que vou ter é a entrada de texto, ok. E a próxima em que vou trabalhar é a caixa de seleção, algo assim Está bem? Então, primeiro abordaremos esses dois e depois passaremos para o próximo. Tudo bem? Então, sim, a caixa de texto O que precisamos fazer para a caixa de texto ou a entrada de texto? Um direito? Então, eu preciso ter o TIF primeiro Está bem? Vou chamar isso de TIF também. Opa Tudo bem, eu errei com minhas chaves aqui, mas esse seria o nome da classe, ok E vou chamar isso de campo de formulário aqui. OK. E isso passará para uma nova linha. E no campo do formulário, primeiro vou ter uma etiqueta. OK. Então, o rótulo é, o que é o rótulo, será texto. Precisamos inserir o texto. Você pode adicionar qualquer tipo de rótulo, como nome ou algo parecido, se desejar. OK. Campo de entrada, é um campo de entrada. Quais são todos os atributos que eu preciso definir para isso. Então, primeiro vou ver que isso é do tipo texto. OK. Então o nome é texto aqui. Está bem? O nome é texto. OK. 1 segundo, então vou pressionar tab para que fique recuado. OK. O nome é texto. Qual é o valor? Então eu preciso vinculá-lo ao valor, e o valor está aqui, dados do formulário, texto tot, algo assim, ok? E então eu preciso ter nenhum troco aqui. OK. Em caso de mudança, o que deveria acontecer? Devemos chamar uma função chamada handle change. OK. Embora essa função ainda não esteja definida, ok? Então, precisamos definir essa função também. Vou criar uma função vazia aqui para não cometermos nenhum erro. Então, vou dizer const, lide com a mudança aqui. OK. E eu vou fazer com que E seja preterido. OK. E eu vou deixá-lo vazio. OK. Não tem problema algum Opa. Portanto, é um erro de sintaxe Sim, parece bom. Tudo bem? É uma função de seta, certo? Então, eu só tenho essa mudança de alça, e aqui, se você vier, eu a estou vinculando à mudança de alça Tudo bem? Agora, o que quer que você esteja inicializando, ok? Já que você está vinculando essa caixa de texto ao estado aqui, seja o que for com que você inicialize o texto, se eu disser ABC e se eu salvar isso, você verá o ABC aqui em cima Porque essa é a inicialização, certo? Então, eu o mantive vazio por enquanto. Está bem? Mas esse é o DIV ou esse é o componente, ou devo dizer, essa é a interface do usuário para entrada de texto Tudo bem? Vamos passar para a próxima após a entrada de texto, temos a caixa de seleção Então, deixe-me copiar o texto, em primeiro lugar. Opa. Eu vou ter o disco rígido aqui. OK. Também é um campo de formulário. Tem etiqueta. Em vez da entrada, vou me livrar dessa entrada. Aqui, posso dizer, em vez de rotular aqui. Ok, então o rótulo mostrará como essa caixa de seleção funcionará aqui, eu terei uma entrada. OK. E aqui, eu vou dizer que o tipo é igual a Checkbox Algo assim, ok? Nome, vou dizer, caixa de seleção. Vou manter o nome e o mesmo tipo marcados. Está bem? Essa é uma propriedade verificada, que vou vinculá-la aos dados do formulário. Eu direi que a caixa de seleção do ponto de dados do formulário. Está bem? Isso está feito e, em caso de mudança, direi para lidar com a mudança. Então, há uma única função que temos agora, ok, para lidar com todas as mudanças, certo? E, sim, vou fechá-lo. É uma entrada de tag de fechamento automático ou você também pode fechá-la separadamente. Está bem? Então, isso é feito, rótulo, e aqui após a entrada, provavelmente você pode ter 1 segundo. Então você pode marcar uma caixa de seleção. Algo parecido com isso. E você pode ver a caixa de seleção aqui, certo? Então a caixa de seleção está pronta, ok? O formulário não está bonito. Não se preocupe com isso porque ainda não temos nenhum tipo de CSS, certo? Então, agora vou fazer um comentário. Eu vou dizer botões de rádio. Está bem? Como trabalhamos nos botões de rádio agora? Está bem? Então, teremos que criar um botão de rádio, certo? Então, vou colocar isso em pedaços. Está bem? Esta é a sua estrutura, e eu vou me livrar da entrada aqui. OK. Ou o que eu posso fazer é seguir essa entrada. Vamos mudar os tipos. Aqui está o rádio. Está bem? E digite aqui, pois rádio é rádio. Copie este rádio. Texto é rádio. Está bem? Formulário de dados ensinado por rádio, a opção quatro marcada. Então isso não estará lá. Isso será verificado aqui. Está bem? Digite o nome, e eu também preciso agregar valor aqui, ok valor. O valor é igual a, eu diria, opção um. Ok, algo assim. E eu posso dizer que o rádio é igual à opção um, ok? E na mudança, há uma mudança de alça. Está bem? E aqui, posso dizer depois da entrada após a etiqueta. OK. Então essa é a etiqueta do rótulo. OK. Ganhe, ok, isso está dentro da entrada. Então, se eu salvar isso, ok, estou vendo rádio aqui, mas preciso adicionar mais uma etiqueta, que está embrulhando isso, certo? Então eu vou dizer rótulo. E eu vou fechar isso, esse fechamento vai depois da entrada, e precisamos ter um rótulo dizendo opção um, algo assim. Está bem? Então você pode ver a opção um aqui. Está bem? Vou duplicar totalmente a mesma coisa. Na verdade. OK. E eu vou rolar para baixo até aqui. Então, após a etiqueta de fechamento da etiqueta, outra etiqueta é aberta, rádio, e esta é a opção dois, e a opção rádio aqui é duas para isso, e o texto é dois. OK. Então é isso. Está bem? Eu acho que isso está ficando bem aqui. Está bem? Não há CSS, então não se preocupe com isso. OK. Mas esses são nossos botões de rádio. Temos algumas opções. Está bem? Agora isso está feito. Temos TIF, ok? E agora o que precisamos fazer é 1 segundo. Aqui está o DIF para isso. Depois desse DIF, vou acrescentar. OK. O que precisamos adicionar no menu suspenso? OK. Agora, para o menu suspenso, preciso do TIF. Ok, então vou rolar para cima. Vou copiar essa dica de entrada de texto abaixo. OK. E aqui, eu vou colocar isso em pedaços. Está bem? Agora, no menu suspenso, o que precisamos fazer é ver aqui, selecionar. Isso é selecionar. E em vez de entrada. Portanto, não precisamos dizer informações aqui, teremos que selecionar aqui, certo? E um rótulo está lá, mas isso será selecionado. Então, posso dizer que não precisamos disso. Isso é muito específico para uma entrada, certo? Vou me livrar disso e diremos que selecione. Algo parecido com isso. OK. E para selecionar, teremos várias opções em Selecionar. Está bem? Então essa é a primeira opção. Mas, para selecionar, precisamos definir algumas propriedades. Então, eu vou dizer que o nome de select é igual a. Qual é o nome? É selecionado. OK. Qual é o valor aqui? Então, o valor vem dos dados ensinados, selecione, algo assim. O que está em mudança? Na mudança, é como lidar com a mudança, certo? Então, eu vou dizer que lide com a mudança aqui. OK. Agora, chegando às opções, temos opções aqui. valor da opção é igual a vazio. Sem opção. OK. E a primeira opção é escolher uma opção. OK. Então, mostraremos isso primeiro. Ok, escolha uma opção. Algo parecido com isso. Ok, então você pode ver, escolha uma opção, certo? Agora, eu preciso replicar isso, ok, do outro lado. Então, vou copiar isso e continuar no final. Você pode colar isso uma ou duas vezes. Tudo bem. Então isso está feito. OK. Agora, o valor para o próximo é a opção um. OK. E aqui você pode ter a opção um. E o valor para dois é a opção dois. E aqui. Opção dois. Opção dois. Tudo bem. Então isso está feito. Você tem a opção um e a opção dois chegando. Tudo bem, então isso está feito. Agora precisamos de uma caixa de seleção ou acredito que a caixa de seleção já tenha sido adicionada, uma caixa de seleção com botão de rádio Então isso está feito. Agora, o que precisamos fazer é exibir todos os dados também, certo? Então, aqui, depois do último ou antes do último se, devo dizer. Ok, aqui, vou adicionar uma TV. OK. Este é o DF e eu vou chamar isso. Vou adicionar um nome de classe aqui. Nome da classe como o dos dados do formulário. OK. E aqui, eu vou dizer H três. Opa, H três, deveria ser H três. Me desculpe Então esse é o H três aqui. OK. E eu vou dizer dados do formulário, algo assim. OK. Agora, exibiremos os dados do formulário um por um. Está bem? Então, como vamos exibir? Primeiro, teremos uma etiqueta P. Está bem? Dentro da tag P, teremos uma tag forte. Ok, forte. Em strong, diremos texto. Então, exibiremos tudo um por um. Então, vamos dizer texto. OK. E aqui fora, forte, eu diria que forma teta Eu vou ter esse script de Ja. Eu vou dizer de teta. Tita está aqui. Texto pontilhado. OK. E se isso não estiver lá, então eu vou dizer em A em A. Ok. OK. Então isso está feito. É assim que estamos exibindo assim como a tela funcionaria. Você pode ver. Ok, texto de ponto de dados Fm ou N. Então, se o texto de pontos de dados Fm não for nada, então NA está sendo exibido. E precisamos fazer isso para todos, então vamos vir aqui. Vamos replicar isso para rádio e veremos formdata dot Radio aqui Caso contrário, tudo ficará bem, então, para o rádio, isso não funcionará ou funcionará. Não funcionará com caixas de seleção. Está bem? Então, vou adicionar a caixa de seleção aqui. Está bem? Isso é para verificar. Caixa aqui. Portanto, para a caixa de seleção, precisamos ter um cuidado especial. Está bem? Porque se os dados do formulário ou a caixa de seleção forem verdadeiros, precisamos exibir marcados e desmarcados, Então, vou dizer ponto de interrogação, caso contrário, condições falsas. Estou usando toner para operar aqui. Eu direi verificado e não verificado. Algo parecido com isso. Tudo bem. O rádio está pronto. Nós selecionamos. Ok, então vou ver selecionar algo assim. E aqui, eu vou ver selecionar. OK. Isso está feito. OK. Estamos exibindo os dados, também temos a visão para exibir os dados. Tudo bem. Agora, o que precisamos fazer é implementar a função mais importante aqui, que é para lidar com a mudança. Então, vou rolar até aqui. Está bem? Estamos recebendo E aqui, que é o evento. Então, direi const e direi que o nome terá valor, temos o tipo e verificaremos aqui Ok, então é isso que estamos criando e vou dizer alvo de ponto E aqui. OK. Agora, aqui, o que precisamos fazer é depois de criar isso, precisamos definir o formulário. Está bem? Então, eu vou dizer definir dados do formulário. Então, essencialmente, o que eu fiz aqui foi na linha número um, eu desestruturei o alvo do ponto E aqui. Eu o desestruturei em elementos individuais e estou dizendo dados em forma de pontos definidos. OK. Vou criar esse novo objeto aqui, ok? E vou dizer três vezes os dados do formulário, então vou aproveitar o que estou fazendo a desestruturação aqui. OK. Hm data, vírgula e, para nome, o que eu faria é se o tipo de nome fosse igual à caixa de seleção, certo Então, precisamos ter o valor verificado, certo? Então, eu vou dizer valor de dois pontos verificado. Assim. Está bem? Isso está feito e, sim, isso também está feito. Se eu salvar isso, vamos ver qual é a saída. Assim, você pode ver que o item está sendo atualizado, caixa de seleção marcada e marcada Opção um, Opção dois, e você pode ver a opção um, Opção dois sendo refletida. Então está funcionando perfeitamente bem, certo? Podemos usar a alteração on handle para atualizar os dados do formulário. Está bem? Então, estamos reestruturando os dados do formulário aqui, sejam quais forem os dados do formulário, sejam quais forem os dados do formulário que existam aqui Está bem? E então o que estamos fazendo é atualizar os valores. Portanto, o aplicativo está funcionando bem. O que faríamos é simplesmente embelezá-lo um pouco. Tudo bem. Portanto, um pouco de embelezamento é importante Ok, para que pareça um pouco mais apresentável. Então, vou começar com pouco de CSS aqui para o contêiner do formulário, ok, terei uma largura máxima de 400 pixels aqui. OK. Eu tenho uma margem aqui, que vou definir para 50 pixels e automática. Vou passar essas duas coisas. OK. Vou ter um forro aqui. Preenchimento, vamos definir para 20 pixels. Está bem? Raio da borda. OK. O raio da borda, vou definir para oito pixels. Provavelmente. Vamos ver. OK. E eu vou ver a cor de fundo. OK. A cor de Macron pode ser , digamos, branca , algo assim Ok, claro. Abded tinha certeza. Tudo bem. Você pode escolher da maneira que quiser. OK. a sombra da caixa aqui em zero, zero, dez pixels Rch PA, e vou definir o valor aqui como zero, zero, ok, zero, zero Um. Então é para isso que estou configurando. Tudo bem. E sim, é isso. Acho que é um fim de semana em família, ok? Se você precisar de uma família de fontes, eu direi sensif aqui. Tudo bem. Este recipiente de formulário, com as etiquetas H dois e H três, terá uma linha têxtil no centro aqui e a cor cinza Ok, algo assim, provavelmente. Ok, ou cor escura. R. Dependendo da sua escolha, tudo bem, ou você pode simplesmente configurá-lo para preto aqui. OK. Isso também é bom. Ok, h2h3. Ok, agora isso está feito. Eu terei o campo do formulário. Então, todos os campos do formulário. OK. Como fazemos? Então, teremos uma margem inferior aqui. Vou definir a margem inferior para 20 pixels. Ok, guarde. E sim, é isso. Deixe-me voltar a isso, se necessário, mais tarde. Rótulo. Então, vou dizer que a tela da fechadura está aqui para etiquetas. Ok, você pode ver, mudança na interface do usuário. Eu vou dizer tamanho da fonte. O tamanho da fonte é de 14 pixels. OK. Eu vou ter peso aqui. O peso do pulso está aqui, ok? E então eu vou dizer, margem inferior. Margem inferior a cinco aqui. OK. E cor. Vamos manter a cor como hash três, três. OK. Sim, terminamos. Para o rótulo, vou dizer entrada e terei que digitar como texto aqui. OK. Portanto, o tipo é igual ao texto. Está bem? Algo parecido com isso. OK. Agora, para texto, o que vou fazer é dizer largura de 100%. Ok, é isso, primeira coisa. Agora eu vou ter um preenchimento aqui de dez pixels. OK. Também adicionarei select também ao CSS. Selecione. OK. E então eu vou dizer fronteira. Opa. Portanto, será uma borda de ponto e vírgula. Agora, para borda, vou dizer um pixel, sólido, hastac CCC. Está bem? É um tipo de código de cores branco ou cinza, ok e raio Quatro pixels aqui. OK. E tamanho da fonte de 16 pixels. Assim. Está bem? Isso parece bom. Tudo bem. Se você der uma olhada no aplicativo, está tudo bem. Nada mal. OK. Vamos trabalhar mais nisso. Então, eu tenho essa entrada, pois tenho o CSS para texto. Vamos adicionar um pouco de CSS para a caixa de seleção também. Então eu vou dizer caixa de seleção. OK. E eu vou dizer margem direita. OK. Margem direita. Vamos adicionar dez pixels. Vamos ver. OK. E para o rádio também, vou adicionar alguns para o rádio. Para rádio, vou apenas adicionar uma margem aqui de cinco pixels. Ok, um pouco de alinhamento aqui. OK. E agora vamos alinhar os dados do formulário, então eu vou dizer dados do formulário Os dados do formulário são da classe D para os dados que estão sendo exibidos na parte inferior. Ok, então eu vou dizer margem inferior. Margem superior, vou começar com 30 pixels. Temos algum espaço lá. Temos um pouco de espaço e acolchoamento. Opa, preenchimento de, digamos, dez pixels aqui. OK. Vou adicionar cor de fundo. Ok, a cor de fundo é que podemos manter a cor de fundo como algo. Na verdade, eu tenho um código de cores, ok? É E nine, f7f9, algo assim. É uma espécie de cor branca. Você pode ver isso e a cor externa não é boa nesse sentido. Então, o que vou fazer é pegar essa cor e provavelmente o CCC ou rolar para cima aqui Isso é uma praia. Isso não é bom. Então eu posso mudar isso para F nove de nove I nove. OK. Então, talvez esteja tudo bem, ok? Então isso é acinzentado e isso é OK. Então, sim, esse é o estilo que estou usando agora E cor de fundo, eu também tenho borda. Borda de um pixel, sólida. OK. E hash, eu tenho um código de cores A três, D dois, D seis Você pode usar o código de cores ou escolher algo parecido, dependendo da sua preferência É o tipo de esquema de cores azul que estou usando. Ok, SN blue. Vou adicionar um raio de borda de quatro pixels e dez. OK. Eu vou dizer dados do formulário, etiquetas P. OK. O que fazemos com o imposto P? Eu vou dizer que o tamanho da fonte é de 16 pixels. Está bem? Vamos ver a cor da cor, vou dizer hash 555 Isso está feito? OK. Forte. Então, quando você diz forte, ok, eu vou dizer cor de 333 OK. Eu acho que isso parece decente. Está bem? Vamos acrescentar algo, pois acho que isso está feito. Está bem? Nada mais é necessário. Acho que sim. Sim. Eu acho que isso parece decente. Está bem? Então, o aplicativo está funcionando bem, você pode ver. Tudo bem. E o CSS também parece decente. Se você quiser melhorar mais, improvisar mais, você pode absolutamente fazer isso OK. Mas sim, isso é muito apresentável E o que quer que você digite, você pode ver como está sendo atualizado. Está bem? Então, sim, é assim que podemos gerenciar os dados do formulário. Estamos fazendo uso de um estado aqui, ok, que é ter um objeto com todos os atributos. Agora você tem mais campos sendo adicionados a esse formulário, mais atributos sendo adicionados e você pode gerenciá-los da mesma forma. Tudo bem. Espero que tenha sido útil, esclarecedor e útil também Ah 9. PROJETO: crie um seletor de cores personalizado com o React: Olá, aí. Agora é hora de começarmos a criar um projeto, que é um aplicativo de coleta de cores usando react has Agora, isso nos ajudará a reforçar muitos conceitos de reação e nos ajudará a praticar muito, certo? Esse também pode ser um ótimo projeto de portfólio para mostrar em entrevistas e currículo, certo? Esse é o aplicativo. Aqui você pode ver alguns blocos de cores que você pode selecionar. E no momento em que você seleciona qualquer um dos ladrilhos de cores, você verá a mudança de cor dessa maneira, certo? Além disso, se você quiser adicionar qualquer outra cor, você pode selecionar aqui e, tipo, alterar a cor, certo? Então, isso é completamente dinâmico, você pode ver. Da maneira ou no momento em que eu estiver arrastando o controle deslizante, você verá tudo sendo alterado, Então, é muito dinâmico, ok. Dessa forma, você pode ver, é muito dinâmico, certo? Então esse é o seletor de cores que vamos usar, ok E isso vai nos ajudar a praticar muitos conceitos de reação, certo? Então, sem mais delongas, vamos direto para o editor e vamos começar. Tudo bem. Então, aqui estamos no editor de codificação, e aqui para começar, eu tenho uma configuração básica do React tap com app dot GSX retornando essa marcação aqui que você vê, e aqui você vê a saída, que é Portanto, não há literalmente nada no projeto no momento. É como retornar H uma tag que fornece a saída como cabeçalho do seletor de cores, certo? Agora precisamos começar a criar o aplicativo. Então, começaremos com esses estados. Tudo bem E no topo, eu já estou imputando o gancho de palco. Tudo bem Então, o que eu preciso fazer é criar um estado, e o que eu preciso acompanhar é, claro, você já deve ter adivinhado, é a cor de fundo, certo? Porque é com isso que estamos brincando, certo, neste aplicativo. Está bem? Então, cor de fundo aqui. E eu vou dizer defina a cor de fundo, ok? Então, cor de fundo, algo assim. Ok. E sim, isso está feito. E então eu preciso ter usado aqui. Então, direi use state e inicializarei uma cor padrão Então, a cor padrão pode ser branca, ok? E então eu posso economizar. Está bem? Então isso está feito. Temos o estado definido. Vou adicionar um ponto e vírgula no final. Ok. Agora, o que eu preciso fazer é adicionar uma interface aqui para mostrar os ladrilhos basicamente em cores, certo? E esses seriam basicamente os blocos nos quais o usuário pode clicar e alterar a cor de fundo , por exemplo, certo? Então, o que eu vou fazer é adicionar uma matriz aqui. Eu posso ver as cores aqui, e pode ser uma matriz vazia agora. Ok. Em breve adicionarei algumas cores aqui. Ok. Mas também precisamos renderizar a matriz, certo? Portanto, quaisquer que sejam as cores que estamos vendo, precisamos renderizá-las e temos uma matriz. Está bem? Então, o que eu vou fazer é adicionar etev aqui Vou adicionar o nome da classe a essa diferença para que eu possa adicionar CSS mais tarde, e vou chamar isso de paleta de cores, algo assim Ok. Agora, aqui, vou dizer cores no mapa Tat. Vou usar o mapa aqui, o método map, e vou dizer cor, ma index. Está bem? Essas duas coisas que vamos usar. Está bem? Use as funções de seta e aqui estamos. Ok. Então, dentro disso, tudo o que você adicionar seria implementado para cada elemento na matriz. Está bem? E o que queremos fazer com cada elemento na matriz, queremos exibi-lo, certo? Então, vou adicionar um TeV aqui. Opa. Então, vou adicionar um TeV mais ou menos assim E por que não se fechou sozinho? Ok. Então, vou fechá-lo manualmente. Tudo bem. Então aqui estamos, aqui temos TV, ok? E eu vou adicionar uma chave, algo assim. Ok. 1 segundo. Então eu vou dizer que a chave é igual a, e eu vou dizer índice. Ok. E o nome da turma. E eu vou dizer caixa. Vou apenas adicionar nosso CSS aqui. Desculpe, o nome da classe está aqui para que eu possa adicionar CSS mais tarde. Está bem? E posso dizer que não, clique aqui. Então, ao clicar eu preciso, é claro, então ao clicar, houve uma interação, não é? E eu preciso adicionar uma interação. A interação será que a cor do fundo deve mudar ao clicar, certo? E eu preciso de uma função para isso, que não temos agora, o que é absolutamente normal. Então, vou deixar isso vazio. Certo? Agora, isso está feito. Está bem? Temos esse dia. Temos isso aqui. Está bem? E o que eu preciso fazer é rolar até aqui. Podemos adicionar algumas cores aqui na matriz. Está bem? Agora, quais cores devemos adicionar? Ok, eu tenho alguns códigos de cores, então vou digitá-los manualmente. Está bem? Então eu posso dizer FF, zero, zero, zero, zero, ok? Deixe-me salvar isso, e não estamos vendo nenhuma mudança aqui. Ok. Ok, não estamos vendo nenhuma mudança porque , na verdade, estou apenas renderizando a torneira aqui, nome da cor chave, e estou apenas mostrando o clique aqui Então, eu não estou vendo nada porque, ok, não há nada no desenvolvedor, mas o que vou fazer aqui é o nome da classe para isso é caixa de cor aqui, vou apenas adicionar uma largura aqui de 50, digamos, ok? E vou adicionar uma altura aqui de 50 pixels. Vou guardar isso aqui. Ok. Portanto, ainda não estamos vendo o resultado. O que precisamos fazer é rolar até aqui e me deixar ver. Ok, então há um erro que eu cometi. Isso não deveria ser uma pasta encaracolada aqui. Está bem? Este deve ser o colchete redondo italiano Ok. E vou pegar esse suporte redondo e substituí-lo por esse paese encaracolado. Ok. Então, essa coisa toda, a coisa div deve estar entre colchetes redondos aqui E se eu salvar isso, não vou ver nada ainda, mas há uma div adicionada, ok? Precisamos apenas adicionar a cor de fundo a essa div. Então eu vou dizer estilo, ok. Então, estilo da cor de fundo. Aqui, algo assim, Colin Color. Ok. Assim. Agora você verá o DIF sendo mostrado aqui. Está bem? Então, o que está acontecendo é, eu vou te dizer, então essa é a cor. Esse é o código de cor do vermelho. Está bem? Se você pesquisar isso no Google, saberá qual é esse código de cores. E o que estou fazendo é pegar essa cor. Ou todos os elementos da matriz, estou iterando, ok, usando esse mapa de pontos colorido Está bem? E estou aceitando esses dois parâmetros nessa função de seta, cor e índice, certo? Agora, para cada elemento na matriz, estou obtendo a cor e o índice. Está bem? O que estou fazendo é renderizar um TiVo cuja chave é o índice. Estou fazendo isso para otimização, como um melhor propósito de renderização para o react Eu tenho um nome de classe e, usando esse nome de classe, estou definindo a largura e altura como 50 pixels para que fiquem visíveis porque não há literalmente nada no DIV e, em seguida, estou definindo o estilo aqui com o valor da cor que temos aqui Então é isso que será definido. E então eu tenho um ouvinte de eventos on click, que eu ainda não usei, ok Você pode dizer, eu não tenho uma função definida para isso, ok? Então eu fiz isso, ok, e é isso. O que precisamos fazer é pegar alguns códigos de cores que eu tenho e colá-los aqui. Então, vou colar aqui, e você pode ver que é uma matriz longa. Está bem? Você pode adicionar seus próprios códigos de cores ou pode se referir a este. Então, se você pesquisar aqui no Google, código de cores, e puder pesquisar por esse, verá que esse é o código de cores, ok? E você pode acessar este site como colorhx.com, e você pode obter qualquer tipo de código de cores que quiser Então, nomes de cores. Então aqui você pode ver o zero absoluto. Você tem a lista de todas as cores junto com seus códigos de cores. Assim, você pode escolher os que deseja exibir ou pode pegar os meus. Está bem? Isso é absolutamente bom. OK. Mas estou apenas mostrando como você pode obter seus próprios códigos de cores. Está bem? Então eu adicionei isso e vou salvar isso. Então, no momento em que eu o salvar, você verá como se todos os códigos de cores fossem exibidos. Então, a partir de agora, você está apenas vendo esses botões. Está bem? Não há estilo. Nada acontece se você clicar nisso, certo? Simplesmente está lá. OK. Agora, o que vou fazer é escrever uma função para lidar com o clique. Então eu vou dizer const, vou dizer lidar com a mudança de cor Agora estou chamando essa alça de mudança de cor por um motivo. Por quê? Porque ao clicar nesse DIV a cor deve mudar em toda a página, certo? Então é por isso que estou dizendo isso. Vou dizer cor aqui. OK. E aqui, o que eu vou fazer é, eu vou dizer definir a cor de fundo. Ok, e eu vou passar em cores, algo assim. OK. E eu vou emprestar isso. Ok. E agora o que eu vou fazer é descer até aqui. E o que precisamos fazer é aqui, em vez de ter uma seta vazia aqui, eu vou dizer lidar com a mudança de cor, e eu vou passar a cor. Está bem? Então, o que a função faz é realmente mudar a cor de fundo ou qualquer cor que você esteja passando aqui. Estou fazendo isso. Se eu selecionar azul agora. Ok, então não funciona. Deixe-me ver qual é o problema. Ok, ao clicar, estou dizendo tudo correto. Ok, aqui, lide com a mudança de cor. Também estou passando a cor. Ok, estou fechando a divisão. Ok, eu entendi o problema aqui. Aqui estamos apenas atualizando o estado, certo? Essa é a função que chamamos para atualizar o estado aqui. Então, a cor de fundo tem o valor atualizado da cor, certo? Agora, o que você precisa fazer é que ainda não esteja configurando no plano de fundo do TIF ou da página Então o que você precisa fazer aqui é que nós viremos até aqui, ok? Nome da classe DV, paleta de cores. Ok, não este, vamos adicioná-lo ao div principal aqui Está bem? Então, aqui, o que eu vou fazer é no DV raiz eu vou dizer estilo, ok? E qual é o estilo? O estilo é a cor do plano de fundo. OK. Então, aqui temos a cor de fundo. Vamos ver como isso funciona. Então você pode ver que a cor do fundo está mudando agora, certo? Você pode ver. Então, sim, isso é o que é. OK. A funcionalidade está funcionando bem. OK. E o que vou fazer aqui é adicionar um nome de classe também para que eu possa usá-lo mais tarde. Tudo bem. Eu vou dizer app. Usaremos essa classe em CSS. OK. Mas, por enquanto, espero que você tenha clareza de como a mudança de cor está funcionando. Está bem? Isso está feito. Agora, o que precisamos fazer a seguir? O que faremos a seguir? Em seguida também precisamos ter um seletor de cores personalizado Então, se um usuário quiser selecionar qualquer outra cor além das que estão disponíveis aqui, o que eu faria é adicionar um seletor de cores personalizado, então eu diria TiVo E aqui, vou dizer o nome da turma. Ok, você adicionará um nome de classe. O nome da classe pode ser um seletor de cores personalizado. Algo parecido com isso. Ok. Agora, aqui, você terá informações. Ok. Aceitaremos contribuições aqui. Então eu vou dizer tipo. Digite como cor. Tudo bem E então aqui, valor. Então, qual é o valor? O valor pode ser a cor de fundo. Está bem? Agora, a cor de fundo é um estado. Lembre-se de que mantemos o estado da cor de fundo e a atualizamos a partir dessas dicas também com um clique Está bem? Então, estamos atribuindo o valor que está na cor de fundo a esse seletor de cores Está bem? E o que precisamos fazer é mudar. Ok, precisamos fazer um evento. Se alguma coisa mudar aqui, estou aceitando E, o e direi lidar com a mudança de cor, e vou passar o valor do ponto alvo do ponto E. Algo parecido com isso. Ok. Isso está feito, eu vou salvar isso, e vamos ver uma escolha de cores aqui. Você pode ver que não tem um estilo bonito. Não se preocupe, mas você pode ver a dinamicidade aqui Isso é reagir, certo? Então, estamos usando o estado aqui, o conceito de estado para trazer uma sensação dinâmica ao nosso plano de fundo, ok? E você pode ver como isso está funcionando. Ok, não está bonito agora, eu vou te dizer. Então, se você for até aqui, este é um aplicativo de página inteira , não está bonito. Certo, não é bonito, claro, porque não há CSS, literalmente, certo? Então, precisamos adicionar CSS para embelezá-lo um pouco. Mas sim, espero que vocês tenham uma ideia do que está acontecendo. Tudo bem Agora, o que faremos é adicionar um pouco de CSS, ok? Então, vou começar no arquivo CSS. Apenas certifique-se de que o arquivo CSS esteja vinculado aqui e importado aqui. Importe o Dot Slash App Dot CSS. E certifique-se de ter esse arquivo na mesma pasta. Se não estiver na mesma pasta, certifique-se de ter o caminho certo. Está bem? Ele está na mesma pasta, então eu o chamo de aplicativo dot forward slash dot CSS Está bem? Agora, aqui, o que precisamos fazer é ver o aplicativo dot Okay. E eu vou dizer família de fontes. Assim. E eu vou dizer tudo isso uma vez. Está bem? E no final, havia um ponto e vírgula Eu posso dizer textine, certo? E eu vou dizer centro. Deixe-me ver se é isso. Está bem? Então, eu pude ver mudanças, algumas boas mudanças. Tudo bem. E agora eu posso ver o preenchimento. Está bem? Preenchimento, podemos adicionar 50 pixels Ou deixe-me manter o preenchimento de zero pixels de distância. Ok, vamos ver o que acontece. Eu direi uma altura mínima de 100. OK. E então eu vou dizer cor. Ok, então cor, vamos adicionar. Eu tenho um código de cores que tem F 0f0f0, algo assim. Parece que uma cor branca ou um texto claro para o modo escuro é o que você pode dizer. Tudo bem Então isso está feito. Manteremos o CSS do aplicativo dessa forma. Eu vou ter H um. Está bem? E eu vou dizer cor. OK. Então, cor, vou manter esta igual. OK. Isso parece legal. Acho que estamos todos bem. Está bem? Agora, vamos adicionar o CSS para a paleta de cores Eu vou dizer paleta de cores, algo assim. E aqui, eu vou dizer display flex. Vou adicionar uma tela de flex. Você pode ver como ficou horizontal. Está bem? No momento em que adicionamos essa propriedade. Eu direi que justifique o conteúdo para centralizar. Guarde isso. OK. E eu vou dizer uma lacuna de dez, dez pixels. Assim, cada elemento será espaçado a uma distância de dez pixels Eu não salvei essa alteração. Mas aqui, se você ver, não há espaçamento entre eles, certo? Está funcionando bem, mas não há espaçamento entre eles. Então, eu quero adicionar um pouco de espaço. Então eu adicionei essa lacuna de dez pixels. O arquivo ainda não foi salvo. No momento em que eu salvar, você verá como mudou, certo? E se você ver aqui, você pode ver dez pixels, certo? Isso está funcionando bem. OK. Então, aqui está uma lacuna de dez pixels, e agora eu vou dizer margem, margem do topo aqui. Diga zero pixel. Ok, dez pixels. Desculpe. Não é zero. Está tudo bem. Tudo bem E caixa de cores, temos 50 pixels, 50 pixels. Eu vou dizer ponteiro do cursor. Coso manterá dois ponteiros, e eu direi fronteira Ok, limite dois pixels, sólido, e eu direi hash FF OK. Então é isso e vamos ver se é isso. Ok. Então, temos uma garrafa e temos esse efeito flutuante, que parece decente, eu diria Tudo bem. Agora, também precisamos estilizar a entrada de cor pika Isso não parece muito bom, certo? Então eu vou dizer tot, e eu vou dizer Pica de cor personalizada. OK. Mais uma vez, essa é uma aula que temos? Deixe-me rolar para baixo. Ok, sim. Essa é uma aula que eu lembro. É um seletor de cores personalizado. E dentro disso temos informações, certo? Então, eu vou dizer um seletor de cores personalizado aqui. OK. E dentro disso, precisamos adicionar, digamos, margem. Então, no momento, literalmente não há margem entre esses botões e o seletor de cores Então, eu vou dizer, vamos adicionar uma margem de 20 pixels assim. Ok, há alguma lacuna agora. Agora, o que eu posso fazer é copiar isso. Aqui, adicionaremos o CSS para entrada também dentro disso. Está bem? Então, eu vou dizer para isso, livre-se disso. Não precisamos de margem superior, então vou dizer ponteiro do cursor. Ok, isso está feito. Eu vou dizer fronteira como nenhuma. OK. Não precisamos de nenhum tipo de garrafa, então você pode ver que isso parece legal. Preenchimento, não é muito legal, precisamos adicionar um pouco de preenchimento de dez pixels, ok E adicionaremos raio em pó raio. Vamos adicionar um raio de potência de cinco pixels. OK. E podemos adicionar cor aqui. Deixou. Está bem? Isso está feito. Acho que é isso, e precisamos adicionar o efeito de foco. Então, eu vou dizer seletor de cores personalizado, entrada, dois pontos. Está bem? Agora, qual é o foco, direi a cor de fundo de 55. Assim. Está bem? Até agora, tudo bem. OK. Agora, se você vier aqui, este é um aplicativo de página inteira, você verá como ele está exibindo a cor e aqui também, você pode mudar isso, certo? Agora, se por algum motivo, você não está gostando dessa mancha branca ao lado toda a div em que está renderizando essa Essa coisa toda está sendo renderizada na ala pico e há uma mancha branca Essa mancha branca, nós não adicionamos. O que você pode fazer é aqui, se quiser redefinir os estilos padrão, o que você pode fazer é adicionar uma estrela aqui. Você pode dizer margem, margem zero e eu direi preenchimento zero Ok, vamos salvar isso e ver. Ok, você pode ver que desapareceu, certo? Então, sim, isso está funcionando perfeitamente bem. Se quiser, você pode adicionar uma espécie de tampa aqui na parte superior do seletor de cores Então você pode vir para a base de código aqui e aqui, se você ver, temos esse aplicativo aqui, certo? Então, neste aplicativo, o que você pode fazer é dentro deste aplicativo, temos o seletor C. Então, aqui, se você vem com um aplicativo, você pode adicionar um preenchimento aqui de 40 pixels como este E se você salvar o arquivo, terá um preenchimento decente na parte superior e poderá brincar com isso Está bem? Então, isso parece decente e muito bom. Você pode brincar com o seletor de cores aqui desta forma. Ok, você pode ver como está mudando a cor, certo? Então, sim, isso é sobre o seletor de cores, e esse seletor de cores nos ajudou a reforçar o conceito de estados e como os estados podem desempenhar um papel vital nos E você pode ver como ele está mudando a cor de fundo, essencialmente. Está mudando a UY sem você nem mesmo atualizar a página Então isso é muito, muito bom, e essa é a razão pela qual eu amo o React. Tudo bem? Espero que você tenha conseguido acompanhar e espero que tenha sido útil. 10. Começando com o useEffect: Oi, aí. Então, agora é hora de começarmos a falar sobre o uso do gancho de efeito no react. Agora, o que é use effect hook? Está bem? Então, aqui, eu tenho um novo projeto de reação com algum código comentado, que vai nos ajudar a entender esse conceito, e então também faremos a prática para entender isso ainda melhor. Então, para simplificar, o uso de effect hook in react permite que você execute algum código automaticamente quando algo muda ou quando um componente é carregado. Está bem? Agora, quando digo cargas de componentes, significa que o componente renderizado pela primeira vez ou é montado, certo Portanto, pode haver vários tipos de coisas que você queira fazer ou executar ou talvez queira fazer algo quando algo muda no aplicativo ou quando um componente é carregado, ok? Então, é como configurar uma tarefa para acontecer após a atualização da tela ou quando um determinado tipo de dado estiver pronto, ok? Agora, se você pesquisar on-line sobre o efeito de uso, uma definição comum que você encontrará é usar o gancho de efeito no react, que permite que você realize efeitos colaterais em componentes funcionais. Está bem? Você verá esse termo efeitos colaterais. Agora, isso significa que ele é executado após a renderização do componente e pode ser usado para tarefas como buscar dados, atualizar o dome ou configurar qualquer tipo de assinatura Está bem? Agora, essas tarefas que são importantes, mas não estão diretamente relacionadas à renderização, ok? Eles são conhecidos como efeitos colaterais, ok? E também é disso que estou falando aqui. O uso do Effect Hook no react permite que você execute o código automaticamente quando algo muda ou quando um componente é carregado. Está bem? Agora, depois que o componente for carregado, talvez você queira buscar algum tipo de dado da API, certo? Ou talvez você queira buscar os dados da API quando algo muda no aplicativo, certo? Por exemplo, um estado é atualizado, certo? Portanto, talvez você queira buscar os novos dados do servidor. Então, nesse caso, você pode usar o gancho de efeito de uso. E essa busca de dados também é conhecida como efeito colateral, certo? Então, é basicamente uma tarefa que você precisa realizar depois da tarefa principal, certo? Então é isso que usa o gancho de efeito para simplificar. Ok. E aqui está uma sintaxe aqui. Está bem? Essa é a sintaxe, você pode ver Então eu tenho efeito de uso, ok? E dentro desses colchetes, ok? Então, 1 segundo. Vou cortar isso aqui. Estou usando o efeito de uso dessa maneira. Preciso importar isso na parte superior sempre que estiver usando, e se eu colar aqui, tenho essa função dentro. Então essa é uma função que você pode ver, a parte selecionada. E isso consiste basicamente no código que você deseja executar como efeito colateral, certo, ou na ação que você deseja realizar. Isso está sendo passado como a função de seta, Isso está sendo passado como como você pode ver aqui. Ok. Agora, esse código pode ser qualquer coisa como fazer uma chamada EPA, como eu disse, ou atualizar qualquer tipo de assinatura ou qualquer tipo de coisa que você queira fazer, certo? E aqui, você tem uma matriz para dependência. Está bem? Agora, o que isso significa é essa é a dependência, ok? Isso é basicamente o que está sendo vigiado, ok? E sempre que houver alguma alteração nessa dependência, esse código é executado É assim que funciona, certo? Então, aqui, se você ver a definição dizendo: Use effect hook in react permite você execute o código de soma automaticamente, que é esse código, é esse código que você mencionou aqui, certo? Então, esse é o código de soma, que permite que você execute automaticamente quando algo muda ou quando um componente é carregado. Está bem? Quando algo muda, então o que é isso aqui? Então, essa é a dependência da qual estamos falando. Está bem? Então, quando essa dependência muda, se você especificou uma dependência, é claro, isso é opcional Se você especificou uma dependência, esse código será executado sempre que houver alguma alteração na dependência E aqui você pode ver que essas são diferentes variações do gancho de efeito de uso nas quais ele pode ser usado. Esse é o primeiro. Ok. Agora, aqui, não há matriz de dependências Você pode ver que não há matriz de dependências. Se eu quiser especificar, posso especificar a matriz de dependências desta forma, mas não há nenhuma matriz de dependências aqui Portanto, sem a matriz de dependências ou sem especificar qualquer tipo de dependência, isso seria executado em Portanto, sempre que houver algum tipo de renderização, esse código que você especifica nessa função de seta será executado Ok. E essa é outra variação em que você tem uma matriz de dependências Está bem? Você pode especificar valores separados por vírgula aqui. Desculpe, este não é aquele com a matriz de dependências. Esse é aquele com a matriz de dependências vazia. Ok. Então eu tenho o terceiro com a dependência adicionada Ok. O que acontece se você tiver uma matriz de dependências vazia Portanto, ele é executado somente após a renderização inicial. Então, quando o componente é montado ou renderizado pela primeira vez, essa é a única vez em que isso Ok. E esta é uma terceira variação que temos aqui, na qual contamos Está bem? Agora, count é a dependência com base na qual esse código será executado Então, se houver algum tipo de atualização aqui na contagem, ok, isso seria executado, certo? Isso é o que significa, ok? E também roda na renderização inicial e, quando a contagem muda, é isso que significa. Está bem? Então, espero que isso esteja bem claro do ponto de vista da teoria, certo, para simplificar, use o efeito Hk Ok, esta é a definição mais simples que eu poderia ter usando effect hook and react, permite que você execute algum código automaticamente quando algo muda ou quando um componente é carregado. Tudo bem? Então, isso é usar o gancho de efeito para você. Agora, antes de usar o gancho de efeito, o que vou fazer aqui é rolar para baixo e, aqui, vamos dar um exemplo sem usar o gancho de efeito primeiro. Está bem? Então, aqui neste aplicativo em particular, eu só tenho esse cabeçalho normal que estou retornando e você pode ver essa saída na tela aqui, gancho de efeito, ok? O que vou fazer é criar uma contagem aqui, claro, vou usar gancho State Hook aqui. Está bem? E eu vou dizer contar aqui e vou dizer definir contagem, que é o mar, e vou dizer use o estado aqui e vou inicializá-lo em zero Está bem? Agora, o que vou fazer a seguir é ter uma contagem incremental, ok E aqui, eu vou dizer que isso é uma função de seta. Por aqui. Ok. E o que eu vou fazer é quando essa função for chamada, eu vou atualizar a contagem aqui, ok? Então eu vou dizer contar mais um, algo assim. Ok. Eu também vou atualizar o título, ok? Então, documente. O título é igual a, e eu terei os literais do modelo aqui. Eu vou dizer conte. Então, dentro dos backticks, eu tenho uma contagem, e vou dizer mais alto, e vou dizer contar mais um, Está bem? Ainda não estamos usando essa função. Está bem? Precisamos fazer uso disso. Então, aqui, eu vou entrar, e aqui, eu vou adicionar um botão. Está bem? Então, esse é um botão simples. Está bem? E o que ele faz é dizer incremento aqui. Ok. E aqui ao lado, basta clicar em algo assim, e eu direi contagem incremental. Vou guardar isso. Está bem? Então esse é um botão que eu tenho, ok, e você pode ver aqui. O título diz “What plus react”, certo? Então eu posso dizer incremento e está atualizando o título, certo? Você pode ver que a contagem está sendo atualizada, certo? No título, você pode ver. Certo. Portanto, este é um exemplo sem uso de gancho de efeito. E toda vez que o botão é clicado, a função de incremento atualiza diretamente o título do documento Isso funciona, mas não é ideal porque é difícil de gerenciar e manter, especialmente quando o aplicativo cresce. Isso é sem uso de gancho de efeito, certo? Agora podemos fazer a transição deste exemplo para usar o gancho de efeito e como faríamos isso? Então, o que eu faria é dizer: Oh, deixe-me ter isso aqui, ok? E eu vou rolar para cima, ok. E aqui, eu vou dizer efeito de uso. No momento em que eu digo use um efeito como esse, ok? E se eu pressionar Enter, vamos rolar para cima e ver se a entrada foi adicionada. Então, a entrada foi adicionada, você pode ver aqui na parte superior, junto com o estado de uso. E se você rolar para baixo, escolher o efeito, preciso usar a sintaxe T para poder até mesmo copiá-la Então, eu quero usar aquele com a dependência, certo? Então, vou levar esse aqui. Ok. E o que eu faria é aqui, eu posso ter o código, ou dentro disso. Então, o efeito colateral aqui é esse código, certo? Então, vou cortar isso e movê-lo para essa função específica aqui. Ok. Então eu tenho a contagem de incrementos separada, e este é um gancho de efeito de uso que é executado, ok? Opa. Então esse pop-up chega. Ok. Então esse gancho de efeito de uso é executado, ok? Quando a contagem for atualizada, qualquer alteração na contagem acionará a execução desse código, certo? E o que esse código está fazendo? Isso está atualizando o título do documento. Está bem? Qual é a tarefa principal? A tarefa principal era apenas atualizar a contagem com essa função. E depois de atualizar a contagem, temos um gancho de efeito de uso, que garante a execução de algum código adicional depois que as alterações forem feitas na contagem. Tudo bem Espero que isso esteja fazendo sentido. Então, vou guardar isso aqui e atualizar. Ok. Agora você pode ver aqui, você está vendo o Conde Colin um, certo? Ainda nem clicamos no botão. Está dizendo “Conde Colin um”. Tudo bem Já no exemplo anterior, então eu vou cortar isso, eu vou ou vou apenas copiar isso, ok? Vou apenas comentar isso e voltar ao exemplo anterior. Então, esse é o nosso exemplo anterior. No exemplo anterior, quando não pressionamos o botão, tínhamos Wt plus react, que é o título padrão aqui. Não estamos vendo contagem mais um aqui porque o título é definido, claro, quando o botão é clicado, certo? Então, quando eu clico no botão, ele é atualizado para contar um, contar dois e assim por diante, certo? Mas neste caso, por aqui, ok? Deixe-me apenas controlar. Então. Neste caso, aqui, ok? Então eu vou ter a contagem aqui, a contagem mais um. Ok. Então, neste caso aqui, eu vejo a contagem zero. Certo? Por que isso é zero? Por que estou vendo isso atualizado no título? Porque se você ver aqui, ele funcionará. Se você estiver usando dependências aqui, elas serão executadas na renderização inicial e quando a contagem mudar Portanto, ele já está sendo executado na renderização inicial. Mas esse não foi o caso. Então essa coisa quando isso estava na função e isso foi comentado, ou não existia. Naquela época, ele não estava sendo executado na renderização inicial. Você pode ver que ele não está sendo executado na renderização inicial. E sempre que você clicava, mostrava a atualização por aqui, certo? Então, sim, essa é a coisa aqui agora. Então isso explica que isso é executado na primeira aleatória, certo? Então, se eu salvar essa contagem de F em zero, e eu puder incrementar isso, tudo bem, quantas vezes eu quiser, e você verá a atualização do título acontecendo E isso está basicamente vinculado à contagem. Qualquer mudança na contagem acionará esse código aqui, ok? Esse código que eu escrevi. Ok. Esse código será acionado, certo? E, sim, tudo isso se deve à matriz de dependências. Portanto, a matriz de dependências garante que isso seja acionado apenas quando a contagem for atualizada e em qualquer outro momento. Tudo bem Então, espero que o use effect hook esteja bem claro para todos vocês sobre o que é e como funciona. Então, para simplificar, o Use effect hook and react permite que você execute o código automaticamente quando algo muda ou quando um componente é carregado, certo? É como configurar uma tarefa para acontecer após a atualização da tela ou quando um determinado tipo de dado estiver pronto, certo? Agora, o que isso significa é que quando determinado tipo de dados está pronto, você pode estar executando algum tipo de processamento, certo? E você pode estar atribuindo esses dados do processo a um estado. Você pode ter um gancho de efeito de uso vinculado a esse estado. E sempre que os dados estão prontos e são atribuídos a essa variável de estado, o efeito de uso é estrito, certo? Então é isso que significa quando você diz quando determinados dados estão prontos, certo? E aqui, você tem essas diferentes variações de efeito de uso, e essa é a sintaxe, a sintaxe principal. Tudo bem Espero que tenha sido útil e espero que você tenha conseguido acompanhar. 11. Desmistificando matrizes de dependência: controlando o comportamento do useEffect: Oi, aí. Bem-vindo. E vamos dar uma olhada na importância da matriz de dependências no gancho de efeito de uso, certo? Então, vamos dar uma olhada neste exemplo. Então, aqui neste exemplo, eu tenho um projeto reativo muito simples e, dentro do aplicativo JSX, tenho esse componente de aplicativo em que estou simplesmente retornando um dif com um cabeçalho e um clique no botão O que o clique do botão está fazendo é atualizar o estado. Obviamente, temos um estado chamado count aqui com a ajuda do use state, e estamos usando o use effect hook, em que, se houver alguma alteração na contagem, estamos atualizando o título do documento Tudo bem. Então é isso que o código é. É bem simples, e estou renderizando esse componente aqui no ponto principal GSX, como você pode Então, o que eu faria é passar para o app dot JSX, e nosso objetivo é entender a importância da matriz de dependências Então essa é a matriz de dependências que temos. Tudo bem? Agora, a primeira coisa, ok, o que eu faria é que essa matriz de dependências estivesse diretamente ligada à forma como o gancho de efeito de uso é executado ou quantas vezes ele é executado e quando é executado Então, para rastrear isso, o que vou fazer é dizer Console dot Log aqui, ok. E eu simplesmente terei uma mensagem aqui. Eu vou dizer efeito de uso. Acionado, algo assim. Tudo bem. E eu posso me livrar disso. Eu não quero atualizar o título. Está bem? Vou ficar com a fechadura do console aqui. Está bem? Vou guardar isso e podemos ver as fechaduras aqui em Inspect. Está bem? Então eu vou inspecionar, vou para o console e você verá que o U's Effect foi acionado Tudo bem? Atualização do NiFi, você verá, ok, está sendo acionado duas vezes aqui. Está bem? Ele deve ser acionado corretamente uma vez. OK. Agora vou te contar o que está acontecendo. Portanto, o gancho de efeito Jos com uma matriz de dependência é acionado uma vez quando o componente é montado e quando há alguma alteração na matriz de dependências Está bem? Então, agora ele está sendo acionado quando o componente é montado. Está bem? Não há alteração no valor da matriz de dependências aqui Então, não estamos atualizando a contagem de atualização, certo? Então, está sendo renderizado apenas uma vez, mas estamos vendo o log de pontos do console duas vezes aqui, ok? E isso é porque estamos no modo de desenvolvimento. E quando você está no modo de desenvolvimento aqui, na verdade estamos executando esse aplicativo react no modo estrito aqui, se você ver. Então, se você for para o ponto principal JSX no projeto, na verdade estou executando isso estritamente Ok Agora, se você não quiser ver isso duas vezes, ok, o que você pode fazer é simplesmente se livrar desse modo estrito aqui. entanto, o modo estrito é recomendado quando você está no modo de desenvolvimento, porque ele verifica possíveis problemas e qualquer tipo de prática de código insegura quando você está em desenvolvimento Está bem? Mas estávamos vendo a mensagem duas vezes porque a reação estava sendo executada no modo estrito. E quando eu me livrar disso, se eu salvar isso, você verá que eu vejo isso apenas uma vez. Está bem? Então você pode ver gancho de efeito de uso é acionado uma vez, certo? Agora, o que podemos fazer aqui é brincar com um animal de estimação com o efeito de uso. Tudo bem? Agora, se eu disser incremento, você verá que ele está sendo acionado toda vez que eu clico em incrementar. E por que isso está acontecendo? Está bem? Isso está acontecendo porque esse efeito está vinculado à contagem aqui. E sempre que houver algum tipo de mudança na contagem, seja incremento, diminuição, eu estou fazendo qualquer tipo de alteração na contagem, esse código será acionado, E é isso que estamos dizendo aqui. Tudo bem? Agora, o que podemos fazer é nos livrar disso. OK. Agora, o que vai acontecer? Está bem? Então, vou atualizar e limpar o console, ok? Então, eu vou fazer isso atualizar. É acionado pela primeira vez quando o componente é montado, é claro, certo? No incremento do clique com o botão direito, ele será acionado todas as vezes Está bem? Mas agora você verá que a saída é sm para ter uma matriz de dependências e sem uma dependência a. Então, qual é a diferença, ok A diferença aqui é que, sem uma matriz de dependência, ela será acionada em qualquer tipo de alteração ou qualquer tipo de renderização no componente, certo, ou em qualquer tipo de nova renderização no Mas com a matriz de dependências, ela será acionada somente quando a contagem for atualizada Tudo bem. Então, deixe-me mostrar isso para você. Está bem? E para demonstrar isso, o que vou fazer é introduzir mais uma variável de estado. Vou chamar isso de outro valor aqui, ok? E eu direi que defina outro valor como esse. OK. E eu vou dizer use state aqui, e isso pode ser, digamos, ou eu vou definir isso para dez, ok? Vamos ver o que acontece. Tudo bem. E aqui, eu vou descer. Vou duplicar esse botão aqui na parte inferior. Está bem? E o que vou fazer é chamar isso de outro valor. Algo parecido com isso. OK. Então, temos mais um botão. Mas em vez de atualizar a contagem, atualizarei outro valor aqui. Tudo bem. E eu vou dizer outro valor mais um, certo? Então isso está feito, tudo bem. Isso é algo que estamos fazendo. Tudo bem. Agora vamos ver a importância da matriz de dependências. Tudo bem? Eu salvei isso. OK. Deixe-me atualizar. Assim, você pode ver que o gancho Use effect é acionado, quando o componente renderizado pela primeira vez ou o componente é montado Agora, se eu disser incremento, ele será acionado toda vez que eu clicar no incremento Isso é claro, certo? Mas se eu clicar em outro valor, ele não será acionado. Por quê? Por quê? Então, a resposta para isso é porque está ligada à mudança de valor no estado da contagem, certo, e não em outro valor. E é por isso que não está sendo acionado. Está bem? Agora, se eu me livrar da contagem aqui, tudo bem. Agora, se eu atualizar, você verá que ele é acionado uma vez no carregamento do componente Se eu disser incremento, ele está sendo acionado. Se eu disser outro valor, ele está sendo acionado novamente. Está bem? Você pode ver. Portanto, ele está sendo renderizado para qualquer tipo de alteração no componente E isso ocorre porque não há matriz de dependências, certo? Não há matriz de dependências. Está bem? Agora, digamos que eu adicione uma matriz de dependências vazia Então, deixe-me adicionar uma matriz de dependências vazia. Então, o que aconteceria? Se eu atualizar, ela será acionada pela primeira vez aqui, você pode ver, agora, que qualquer tipo de alteração não será acionada porque matriz de dependência vazia garante que o componente seja renderizado ou que o efeito de uso seja renderizado ou que o efeito de uso Desculpe, o efeito de uso é acionado apenas pela primeira vez quando o componente é montado. Está bem? Então eu espero que você tenha alguma clareza decente, ok? E espero que você possa ver como essa matriz de dependências faz muita diferença, ok? Então, se você estiver realizando algum tipo de operação aqui, isso é um pouco pesado, ok? É um ponto e vírgula aqui. Acabei de adicionar isso. Portanto, se você estiver executando algum tipo de operação um pouco pesada e demorada aqui dentro desse gancho de efeito de uso, essa matriz de dependências poderá decidir o desempenho Está bem? Portanto, você precisa se certificar que esse gancho de efeito de uso seja executado somente no momento certo, quando você realmente precisou ser executado. OK. Se, por algum motivo, você tiver uma tarefa longa aqui, digamos, uma tarefa de alto processamento, e se você perder a matriz de dependências , isso lhe dará um desempenho muito ruim, ok? Mas digamos que se você tem uma variável, ok, e você quer monitorar as mudanças nessa variável, e se você quiser fazer essa ação específica somente quando houver a mudança nessa variável específica, nesse caso, você deve incluir ou vincular isso a essa variável específica, e você deve adicionar essa variável, variável de estado, o que quer que seja, aqui na matriz de dependências. E sempre que houver alguma alteração, o gancho de efeito de uso será acionado em apenas dez. Agora, haverá alguns cenários em que talvez você queira fazer algum tipo de manutenção quando o componente for carregado pela primeira vez, Portanto, você pode usar o gancho de efeito nesse caso com uma matriz de dependências vazia, porque você deseja fazer essa tarefa de limpeza apenas quando o componente é carregado e não depois disso Portanto, você pode ter uma área de dependência vazia para isso. Então, ele será renderizado como você viu. No momento, temos uma área de dependência vazia, então ela será renderizada ou executada apenas uma vez quando o componente for renderizado e não depois disso Então, espero que este exemplo forneça uma clareza decente de como o uso Effect Hook funciona e como essa matriz de dependências que existe é importante, certo? Então, espero que você tenha clareza de diferentes cenários de como isso é executado e gerenciado, certo? Então, se você tiver a matriz de dependência mencionada, como qualquer tipo de valor, essa função que você está especificando será executada somente quando houver alguma alteração ou atualização nesse valor específico, E, claro, ele também será executado na primeira renderização. Certo? Se você quiser que ele seja executado somente na primeira renderização, especifique uma matriz de dependências vazia Se você tem algo que deseja executar em qualquer tipo de alteração na interface do usuário ou em qualquer tipo de renderização que aconteça, tudo bem, basta pular a matriz de dependências OK. Mas lembre-se de que ele será acionado toda vez que houver uma nova renderização Tudo bem. Portanto, tenha em mente o desempenho. Tudo bem. Espero que tenha sido útil, ok. E sim, desativamos o modo estrito aqui. Você pode simplesmente manter ou manter o modo estrito. Porque o modo estrito é recomendado no modo de desenvolvimento. Então, eu apenas modifiquei isso porque não queria executar use gancho Effect duas vezes na renderização do componente pela primeira vez, certo? Então eu removi isso. Mas sim, é assim que as coisas funcionariam, e espero que isso esteja claro para todos vocês. 12. Projeto prático: crie um rastreador de mouse em tempo real com o useEffect: Bem-vindo a este vídeo em particular, onde criaremos nosso próprio rastreador de mouse e usaremos gancho de efeito de uso para o mesmo Está bem? Então, aqui na minha tela, você pode ver esse aplicativo onde ele me mostra a posição do mouse enquanto eu o movo. Está bem? Portanto, é totalmente em tempo real, e estamos usando o gancho de efeito de uso aqui para esse aplicativo específico. Tudo bem Então, isso nos ajudará a praticar alguns conceitos de reação e nos ajudará a ter um projeto em nosso portfólio. Tudo bem Portanto, é um projeto muito simples, certo? E vamos direto ao assunto. Então, aqui estou eu no VS code, Visual Studio code, e tenho meu navegador aberto lado a lado. Eu criei um projeto VA muito simples usando VT, e você pode ver que estou aqui no app dot GSX, que está sendo renderizado por meio de mean Tudo bem? Eu tenho um arquivo CSS dois. Aqui com CSS muito básico. É um CSS padrão que eu posso chamá-lo. Está bem? Você tem família telefônica, tem texto alinhado no centro, preenchimento e margem definidos como zero, certo Opa, e a parte superior acolchoada tem 40 pixels e uma altura mínima desta. Tudo bem Então, o que vamos fazer é construir nosso próprio mouse tracker Agora, a primeira coisa que precisamos é ter um estado aqui. Vou chamar esse estado de posição do mouse. Ok. E isso vai nos ajudar a rastrear a posição do mouse. Portanto, isso terá a posição mais recente do mouse e também precisará ser atualizado sempre que a posição do mouse mudar. E eu vou fazer uso do estado de uso aqui. No momento em que eu adicionar nosso estado, você verá essa entrada adicionada na parte superior, certo? E isso basicamente manterá a posição na forma de pares de valores-chave. Então eu vou ter X, dois pontos zero. Então essa é a posição de X, e essa é a posição Y. Então, sim. Isso está feito. Tudo bem Agora, o que precisamos fazer é ter uma, precisamos mudar a interface. Ok, precisamos ter um título, então vou dizer a posição do mouse. Ok, e vamos mostrar a posição do mouse aqui. Ok. Então eu vou dizer a tag P e vou dizer X, dois pontos e vou dizer o ponto X da posição do mouse aqui. Ok. E eu também tenho a posição Y. Está bem? Vou dizer Y e dois pontos e vou exibir a posição Y como ponto Y da posição do mouse, algo assim. Tudo bem Assim, você pode ver a posição do mouse sendo exibida. Atualmente é 00 porque é para isso que inicializamos. Tudo bem Agora, o que precisamos fazer aqui é usar o efeito de uso e, efeito de uso e por meio do efeito de uso aqui, temos o ouvinte e tudo gerenciado Está bem? Então aqui, use effect, ok e dentro de use effect, eu tenho essa função de seta aqui, algo assim, e eu tenho uma matriz de dependências Tudo bem? É assim que o gancho ficará, certo? Ao adicionar o efeito de uso, observe que essa entrada foi adicionada automaticamente na parte superior. Tudo bem? Agora, aqui, o que eu vou fazer é ter essa matriz de dependências vazia, o e dentro dela, vou adicionar a função Ok. Então eu vou dizer: manuseie, passe o mouse para cá. Está bem? E vai aceitar o evento, e aqui eu tenho uma função de seta criada. Está bem? Então é isso que eu estou criando e aqui, eu vou dizer definir a posição do mouse. Está bem? os assentos chamando isso, definindo a posição do mouse, e eu vou dizer X Clineventt client X. Então, isso é atualizar os assentos chamando isso, definindo a posição do mouse, e eu vou dizer X Clineventt client X. Ok. E eu vou dizer y, Colin, evento, ponto, cliente, Y, algo assim Está bem? Então, sim, isso é feito aqui. E então o que vou fazer é adicionar um ouvinte ao Windows Vou dizer Window dot, adicionar ouvinte de eventos, algo assim, e vou adicionar um ouvinte de movimento do mouse. Está bem? Então eu vou dizer que o mouse move, esse aqui. Eu quero que isso seja acionado em qualquer tipo de movimento do mouse, certo, para que eu possa rastreá-lo em tempo real, certo? E eu vou dizer: manipule o movimento do mouse. Ok. Espero que isso esteja fazendo sentido. O que estamos fazendo é simplesmente adicionar um ouvinte à janela Está bem? Isso é uma janela. Estamos adicionando um ouvinte ali, estamos vendo o mouse mover o ouvinte Portanto, ele rastreará cada movimento do mouse e, basicamente, fará com que esse movimento do mouse seja executado. Está bem? Então, vou guardar isso. E se você vier aqui, verá que está funcionando bem. Você pode ver a posição em tempo real, certo? Então, sim, este é o mouse tracker com a ajuda do gancho de efeito de uso E espero que você tenha uma boa clareza sobre como usar gancho de efeitos de uso para boas práticas. 13. Limpar como um profissional: dominando as funções de limpeza no useEffect: Então, agora é hora de falarmos um pouco mais sobre o aplicativo de rastreamento de mouse que lançamos. Então, aqui, estamos colocando um ouvinte do evento na janela, ok Agora, há um pequeno problema, ok? Não há nenhuma limpeza que estamos fazendo, certo? O ouvinte de eventos que estamos adicionando permanece ativo mesmo quando o componente é desmontado Ok, e isso pode levar a vazamentos de memória e sobrecarga de desempenho desnecessária à medida que o ouvinte continua funcionando Está bem? Então isso não é bom, e devemos lidar com isso com efeito de uso. Portanto, o efeito de uso pode nos permitir incluir uma função de limpeza para remover o ouvinte de eventos quando o componente é desmontado que garante que , o que garante que os recursos sejam liberados adequadamente e também evita possíveis vazamentos de memória. Está bem? Então, qual é a função de limpeza? função de limpeza é uma espécie de função que nos é fornecida com efeito de uso onde você pode fazer a limpeza, ok Assim, você pode realizar vários tipos de tarefas de limpeza, como remover ouvintes de eventos ou se tiver algum tipo de cronômetro em execução, e se o componente for desmontado, você pode cancelar esses cronômetros e todo esse tipo de E isso mantém seu aplicativo eficiente e livre de bugs. Tudo bem? Como adicionamos um ouvinte de eventos Então, aqui, o que eu vou fazer é depois que o ouvinte for adicionado aqui, eu vou dizer retornar, ok? E eu vou ter uma função de seta aqui. Coisa assim. Assim. Ok. E aqui, vou simplesmente dizer que vou ter o código para limpar dentro dessa função de limpeza Portanto, esta é uma função de limpeza aqui. Eu vou dizer window dot remove event listener. Você pode ver. Qual é o ouvinte do evento que adicionamos Então foi um movimento do mouse. Este era o ouvinte do evento, e eu também tenho o ouvinte Eu tenho a alça do mouse para se mover aqui. Está bem? Então eu removi isso, e aqui, você pode fazer um log do console se quiser, ok? Você pode fazer um log do console, se desejar. Mas, no momento, não veremos nenhum tipo de saída porque ela é acionada quando o componente é desmontado, certo? Então, o que faríamos é, em vez de adicionar um log do console aqui, primeiro acionaremos uma desmontagem manual, certo, adicionaremos um botão que nos permitirá montar e desmontar o componente para que possamos ver como esse ouvinte está funcionando Então, o que eu faria é mover todo esse código, na verdade, ok? Vou mover todo esse código, na verdade, para outro componente. E nesse componente do aplicativo, adicionarei um componente principal. Está bem? Portanto, teremos um componente principal que carregará esse rastreador de mouse e também terá um botão para descarregar. Está bem? Então, deixe-me mostrar do que estou falando. Então, aqui, vou criar um novo arquivo. Vou dizer mouse, tracker dot JSX, algo assim. Vou colar isso aqui. E em vez de exportar o aplicativo para cá, direi apenas mouse, rastreador Está bem? Isso é uma função. Esse é o nome de um componente, certo? Então, esse é o nome do componente agora. E aqui no app dot JSX, o que precisamos fazer é nos livrar Faremos algum tipo de limpeza e adicionaremos o componente principal aqui Ok. Então, vou me livrar de todo esse código aqui. Ok. E sim, isso permanece válido, e precisamos renderizar o componente pai aqui. Está bem? Vamos nos livrar disso. Tudo bem Aqui estamos recebendo um erro porque não há nada que estamos renderizando, mas vou manter a TV por enquanto para que não recebamos nenhum erro Vou apresentar mais um componente chamado componente pai. Ok. E vou manter os componentes principais separados. Eu vou dizer componente pai dot SX. Então, adicionamos dois componentes aqui. Tudo bem E o que eu faria é dizer função. Ok, função, componente pai, algo assim, e vou adicionar uma exportação aqui. Eu direi que export default, componente pai, como Ok. E aqui, vou adicionar um estado. Então, o que faremos é manter um estado quer você queira mostrar um componente ou não. Está bem? Então eu vou dizer show component, e eu vou dizer set show component. Algo assim, vou adicionar use state hook aqui. Ok. Agora, o estado de uso é verdadeiro. Então, por padrão, estamos mostrando que isso é booleano. Esse estado tem um valor booleano, e eu posso ter um componente de alternância constante, e vou ter uma função de seta aqui, E dentro disso, posso dizer set, show component. E aqui, vou dizer o valor anterior. Está bem? Então, basta inverter o valor anterior. Isso é o que estamos dizendo aqui. Ok. Então, sim, isso está feito. E o que eu preciso fazer agora é voltar para cá. Então, ele dirá return e eu adicionarei uma declaração de devolução. Ok, algo parecido com isso. Ganhe isso, eu vou ter um TF assim. Ok, e eu vou ter um botão. Ok. Agora, o que esse botão faz? Então, botão com clique. Ok. Ao clicar, ele alternará o componente Ls Ok. E aqui, eu posso usar o operador ternário. Então, se show component é verdadeiro, então o que fazemos? Temos esse valor de desmontar o rastreador, ok? Como se o texto fosse mostrado como rastreador de desmontagem. Está bem? Então eu vou dizer desmonte E Mount Tracker. E se o valor for força, então diremos mount tracker Então, esse texto também alterna, certo? Basicamente, é isso que significa. Está bem? Então, eu tenho esse botão pronto. Está bem? E agora o que eu posso fazer é colocar esse script de Ja aqui. Se for show component, ok, então o que precisamos fazer é renderizar o mouse tracker, algo assim. Gostar. Ok. Então, estamos renderizando condicionalmente o mouse tracker aqui Está bem? O que está acontecendo é que estamos dizendo show component. Eu mostro que o componente é verdadeiro, então estamos vendo o rastreador de mouse renderizado, certo? Então isso está feito, e aqui, precisamos, em vez de tf, adicionar o componente pai, assim Você pode ver que o aplicativo está aqui, certo? Então você pode ver que isso está chegando. Eu posso renderizar e não renderizar. Você pode ver. Ok, eu posso montar. E desmonte Portanto, o componente está sendo montado e desmontado. Está bem? Como isso funciona? Ok, acabamos de fazer um pouco de refatoração. Adicionamos um componente principal. Está bem? Primeiro, criamos dois arquivos. Um são dois arquivos, ou devo dizer, dois componentes em arquivos separados. Portanto, esse é o componente principal. Está bem? Temos um componente de rastreamento de mouse Portanto, o componente do mouse tracker é simples. Ok. Acabamos de ter esse mouse tracker com gancho de efeito de uso e ele está nos mostrando a posição do mouse, certo? E adicionamos uma função de limpeza aqui. Então temos um componente pai que tem esse estado do componente show, que é pólen e há um botão que alterna esse valor do componente, esse valor do componente show para verdadeiro ou falso E então estamos renderizando o componente show dessa forma. Está bem? Então, isso está resolvido. E então, no app dot JSX, estamos mostrando apenas o componente pai Porque dentro do componente pai, na verdade estamos renderizando o componente do mouse tracker, que é uma renderização condicional com a ajuda do operador . Tudo bem Então isso está feito, e agora o que podemos fazer é ver como essa função está funcionando, certo? Então, o que vou fazer é adicionar, eu diria, precisamos adicionar o log de pontos do console aqui. Está bem? E precisamos rastrear como o ouvinte está sendo adicionado e como está sendo removido Então, aqui, eu vou dizer Log, ok? E aqui, podemos dizer mouse, mover, ouvinte adicionado, algo assim Está bem? Vou remover isso. Ok. Vou copiar isso e aqui na instrução return, dentro da função return, vou ver o ouvinte de movimento do mouse removido Está bem? Algo parecido com isso. Agora vamos ver o console. Eu virei até aqui. Eu vou para o Console. Ok. Você pode ver. Ok, primeira coisa, vou fazer uma atualização aqui Ok, atualize e você pode ver o rastreador de movimento do mouse adicionar, o rastreador movimento do mouse, Eu estou movendo meu mouse aqui, e você tem o rastreador de movimento do mouse adicionado Desculpe, o ouvinte de movimento do mouse foi adicionado. E agora desmonte, ok, você verá que o ouvinte de movimento do mouse foi removido Está bem? Esse não será o caso se você não tiver essa função de limpeza Portanto, se você não tiver essa função de limpeza, o ouvinte nunca será removido. Está bem? Esse é o problema. Portanto, se você atualizar, poderá ver que o ouvinte foi adicionado. Você pode ver que o ouvinte de movimento do mouse foi adicionado, certo? Se eu desmontar o rastreador, desmontar o ouvinte, montar o componente, devo dizer que você pode ver que nenhum ouvinte está sendo removido, que nenhum ouvinte está sendo Então, o ouvinte ainda está lá, e isso pode causar efeitos colaterais ou qualquer tipo de parque Ok, porque você tem um ouvinte lá fora, certo? Isso não está sendo usado. Está bem? Então você pode ver e imaginar como isso está funcionando bem, ok? Então, montagem, montagem. Você pode ver que está sendo adicionado, certo? Então isso é o que é uma função de limpeza, ok? Espero que isso esteja lhe dando uma ideia de como isso é importante. O objetivo dessa função de limpeza é, obviamente, como o nome diz, ser usada para limpar, certo? Portanto, qualquer tipo de tarefa de limpeza que você queira fazer, você pode fazer dessa maneira Está bem? Essa é a sintaxe aqui. Ok. Dentro dessas chaves curvas, você pode realizar todos os tipos de tarefas de limpeza e ver como isso está sendo acionado na desmontagem do componente aqui. Certo? Então, espero que isso seja útil e espero que você tenha conseguido acompanhar, e espero que agora tenha uma boa ideia de como usar o gancho de efeito Huge 14. PROJETO: desafio criativo construindo um relógio digital funcional com React: Oi, aí. Então, neste vídeo em particular, vamos construir esse relógio digital que você está vendo na tela. Então é um relógio digital muito simples, ok? Vamos fazer isso para mostrar a hora aqui. E você pode ver como ele está atualizando a interface do usuário. Você pode ver que há segundos, minutos, horas e o tempo inteiro está sendo exibido, certo, basicamente. É isso que vamos construir e vamos usar os conceitos de reação e colocá-los em prática. Está bem? Portanto, este é um projeto prático que pode ajudá-lo a reforçar o aprendizado que você tem com o React até agora. Tudo bem? Então, sim, sem mais delongas, vamos direto para o código do Visual Studio. Tudo bem, então, para começar, eu tenho uma configuração de projeto React Chase muito simples aqui, ok? Estou usando T aqui, e este é um projeto de perseguição de reação que eu tenho. Eu tenho o aplicativo dot JSix que está sendo renderizado em mean dot JSX E dentro do app dot JSX, eu inseri que tenho essas duas entradas na parte superior Uma definição de componente muito básica, certo, e eu estou exportando esse componente, é claro E dentro do App dot CSS, eu tenho um estilo muito básico que você vê aqui, só que isso não é muito, ok, mas um estilo bem simples que eu tenho Então, vamos construir esse relógio digital do zero, tudo bem. Agora, em primeiro lugar, o que vou fazer é ter esse STIF correto e preciso atualizar a interface do usuário aqui, é claro Mas antes de atualizar a interface do usuário, precisamos ter tempo e armazenar o tempo na forma de estado, certo? Então eu vou dizer const, vou dizer tempo. Opa, eu perdi isso. Então eu vou dizer hora aqui e vou dizer hora definida. Agora, é claro, aqui, eu vou dizer use state, ok. E vou inicializar isso para uma nova data Está bem? Algo parecido com isso. OK. Portanto, qualquer nova data que retorne, é com ela que ela é inicializada. Tudo bem. Agora isso está feito. Está bem? Agora, aqui, vou fazer uso do efeito de uso aqui. Agora, dentro do uso do EfectHok, o que vamos fazer é atualizar dessa vez, dessa vez a cada segundo, E basicamente, isso é o que estaríamos fazendo porque isso precisa ter a hora atual, certo? E o tempo muda a cada segundo. Então, precisamos atualizar essa variável de rua a cada segundo. Está bem? Também faremos limpezas, então vamos fazer isso Então, vamos dizer efeito de uso aqui. OK. Vou ter uma função de seta. Ok, algo assim. OK. Esta é a função de seta, e aqui, eu terei uma matriz de dependências OK. Então, sim, isso está feito. E o que precisamos fazer é, aqui, adicionar um código. Então, aqui, eu vou dizer cons timer ID. OK. Então, estou recebendo um ID do cronômetro ou vamos adicioná-lo mais tarde. Está bem? Então, o que faremos primeiro é dizer definir intervalo. OK. Estou usando o intervalo definido aqui. OK. Agora, dentro do intervalo definido, eu vou ter então eu não quero essa função de seta, ok? Eu não quero essa função de seta. Eu vou dizer que defina o horário aqui. Ok, defina a hora. E então eu tenho a função de seta. Na verdade, eu disse que não quero a função de seta. Eu tenho a função de seta, mas eu apenas removo a brisa encaracolada, para que fique um pouco mais limpa Ok, eu posso ter o código escrito aqui também. Então, posso dizer que defina o horário aqui. Então, estou atualizando o estado usando o horário definido. Estou dizendo nova data, ok, algo assim, e eu posso realmente adicionar milhares aqui. Ok, então aqui, eu posso dizer mil, algo assim. OK. Opa, eu perdi um colchete redondo, eu acho, definir hora, hora definida, Nutt, algo assim Ok, ou 1 segundo. Ok, então isso não virá aqui. Esse é o intervalo. Está bem? Então esse é o intervalo. Eu virei até aqui. Tudo bem? Então isso está feito. OK. Então isso é o que é. Agora, deixe-me explicar o que acabei de dizer, ok, caso você esteja se perguntando o que aconteceu. Está bem? Então, aqui, eu usei a função de intervalo definido. Agora, o que é intervalo definido? Vou digitar o intervalo definido novamente. Definir intervalo é basicamente uma função JavaScript, ok? É uma função basicamente repetida que executará o bloco de código dentro dela repetidamente após um intervalo de tempo definido. Está bem? E qual é o intervalo que estamos estabelecendo? Então você pode definir qualquer tipo de intervalo aqui, que será em milissegundos. Então, se eu inserir 1.000 aqui, isso significa que 1 segundo. OK. Então, o que você está disposto a fazer? Qual é o objetivo aqui? Queremos atualizar o tempo a cada segundo, certo? Queremos atualizar o tempo a cada segundo, certo? O horário deve ser atualizado a cada segundo, porque o tempo muda a cada segundo, e eu estou construindo um relógio dinâmico, certo? Então, estou usando o intervalo definido aqui, a função de intervalo definido. Você pode ver se eu passar o mouse sobre isso, provavelmente estou recebendo a documentação Agenda a execução repetida do retorno de chamada a cada milissegundos de atraso Então esse é o retorno de chamada que temos. Eu posso simplificar isso em uma única linha. Eu posso me livrar das chaves onduladas porque há apenas uma linha de código Então, vou me livrar disso. Isso é bem simples. OK. Espero que esteja bem claro o que está acontecendo, defina o intervalo, tudo bem. Então, o que estamos fazendo é incitar um intervalo definido. Estamos atualizando o tempo definido aqui, e estamos fazendo isso a cada mil milissegundos. Então, o que precisamos fazer é obter o ID do cronômetro aqui, porque também adicionaremos uma função de limpeza Então eu vou dizer const timer, ID, algo assim OK. Então essa é a identificação do cronômetro que temos, ok? E então eu vou ter uma função de limpeza como essa. OK. Vou adicionar uma função de seta e vou dizer intervalo claro. Opa. Eu vou dizer um intervalo claro. Ok, e eu vou dizer hora ou identificação. Então, estou limpando o intervalo. Basicamente, isso é uma limpeza que estou fazendo. Tudo bem. Então esse é o código para atualizar a hora basicamente a cada segundo. Isso é o que escrevemos aqui. Está bem? Isso é o que ele faz. Agora, aqui, o que podemos fazer é aqui, se você vier aqui, podemos mostrar a hora. Vamos ver o que vemos como saída. Ok, a saída não será boa. Não será de uma forma amigável, mas eu ainda quero mostrar isso para você. Então, se eu salvar isso, opa. Portanto, literalmente não há saída aqui. Então não está exibindo nada porque estamos tentando exibir a data aqui e estamos recebendo um erro, ok? Então você precisa converter essa data em uma string. Então, eu vou dizer que temos uma função aqui para a string de hora local. OK. E eu posso salvar isso e você pode ver a hora sendo exibida aqui, certo? Então, isso é atualizado a cada segundo, certo? Agora, o que precisamos fazer é formatar isso, certo. Então, eu diria que está tudo bem, mas preciso ter um controle melhor sobre o tipo de formatação que desejo ter para meu aplicativo, certo? Então, o que eu vou fazer aqui é ter uma função. Eu vou dizer: formate, hora e aqui. Então isso é, na verdade, isso é fazer um trabalho. Está bem? Não é uma função, mas está fazendo um trabalho de formatar a hora no formato correto Está bem? Então, podemos fazer isso sem função. Então, vou dizer hora, ponto dois locais, duas sequências de horas locais aqui. OK. E podemos passar o local quanto o formato, ok? Então eu vou passar no local como EN US, ok? E aqui, vou especificar a formatação, certo. Então aqui eu posso dizer R, o Colon, vou dizer dois dígitos, algo assim. Podemos seguir esse formato. R, dois pontos para cavar aqui. Portanto, esse formato precisa ser usado em um par de colchetes, certo Então isso é algo que eu perdi aqui. Ok, R para dígito. Eu virei até aqui. Isso é minuto a dígito, algo assim, e isso levará segundos para descartar OK. Opa, algo assim No momento em que você salvá-lo, você não verá nenhuma alteração porque estamos exibindo a hora. Você precisa exibir a hora formatada. Então você precisa vir aqui e se livrar de tudo isso e pode exibir o formato de cada vez. Está bem? Opa. Portanto, o segundo não está sendo exibido porque provavelmente devemos adicionar uma vírgula aqui E deixe-me ver. Ok, então é segundo e não segundos. OK. Just S fez a diferença, certo? Você pode ver agora que está no formato. 08. Então, antes não era 08. Eram 8h80 21h06 então agora estou tendo um controle melhor sobre a Então, sim, é assim que o aplicativo está sendo executado, ok? E vou te dar uma ideia do que está acontecendo aqui, ok? Então, primeiro, como esse aplicativo está funcionando, temos um componente. No topo, estamos criando um estado que mantém o estado inicial da hora até a data e hora atuais, ok, usando essa nova data. Está bem? E temos esse estado de tempo e definimos a função de hora para atualizar o estado sempre que ele mudar. Temos um grande gancho de efeito aqui, ok. E dentro de use effect hook, então use effect hook essencialmente executa o código dentro dele depois que o componente é renderizado, ok? E nesse caso, ele é responsável por iniciar o cronômetro que atualiza o relógio a cada segundo, ok? Então, temos uma dependência vazia aqui, eu me lembro, e ela está sendo executada imediatamente após a renderização do componente , ok Agora, o que está acontecendo aqui é que estamos usando a função de intervalo definido. Agora, o que o intervalo definido faz? O intervalo definido é uma função que nos permite executar alguns códigos repetidamente após um intervalo de tempo definido. Está bem? E aqui, o intervalo de tempo definido é de 1.000 milissegundos, que é 1 segundo Está bem? E temos uma função de limpeza que limpa o intervalo usando o ID do cronômetro que temos e formatando temos e formatando Desculpe, estamos formatando a hora no formato desejado e estou exibindo a hora do formato Então, o que está acontecendo é que toda vez que o componente é renderizado novamente, ok? Então, toda vez que a função de hora definida é atualizada aqui. O estado é atualizado, o componente é renderizado novamente, ok. E toda vez que essa hora definida é chamada, hora é atualizada e, sempre que a hora é chamada, hora formatada é atualizada E sempre que a hora formatada é atualizada, você vê o valor atualizado aqui OK. Então é assim que tudo isso funciona. Sempre que o estado da hora muda, o componente é renderizado novamente e a hora recém-formatada é exibida Está bem? E essa coisa recorrente está sendo definida pela função de intervalo definido porque é isso que própria função atualiza o estado de tempo a cada segundo Está bem? E sempre que o estado da hora muda, o componente é renderizado novamente e a hora formatada é exibida, e o processo se repete, então a hora é atualizada constantemente em tempo Tudo bem. Então, espero que isso seja bom. E agora precisamos fazer um pouco de embelezamento, eu diria, aqui, certo? Então, o que podemos fazer é melhorar o CSS para que eu possa me livrar dessa boas-vindas no topo. OK. E eu posso adicionar um TIF. Vou chamá-lo de nome de classe e vou chamá-lo de container de relógio. Então isso é exclusivamente para estilizar aqui, ok? Você pode adicionar mais um tif aqui. Eu posso ver o TIF. OK. E eu posso mover isso, isso para dentro, para cá. Ok, algo assim. OK. E aqui dentro do contêiner do relógio, vou dizer o nome da classe como relógio, algo assim. OK. Agora, precisamos adicionar um pouco de CSS. Vou mudar para o app dot CSS. Eu tenho um pouco de CSS básico aqui. Ok, do qual eu vou me livrar. OK. Vou me livrar de. E eu vou dizer contêiner de relógio. Algo assim, e eu vou dizer que exibição de bandeiras aqui Ok, justifique o conteúdo como centro e alinhe os itens como Ok, eu posso definir a altura. OK. E teremos a cor de fundo. Ok, então cor de fundo, eu tenho um código de cores para isso. Ok, então eu vou dizer hash e 2a2c3, quatro. Está bem? Você pode escolher uma cor de sua escolha. OK. Agora, depois de atualizar a cor, o relógio está pouco visível. Está tudo bem. Tudo bem, vamos atualizar o relógio também. Vou dizer que o relógio está aqui. OK. Vou definir um tamanho de fonte aqui. OK. Tamanho da fonte de, uh, quatro ERM. Ok, e sim, o relógio está maior agora. Ok, família, família da fonte de Vou adicionar uma família aqui. Esse pode ser o único, e eu vou dizer cor. OK. Então, podemos ter uma cor. E para isso, eu tenho um código de cores. Então eu vou dizer 61, DAF P. Ok? Você pode adicionar a cor de sua escolha. Está tudo bem. E cor de fundo. Vou definir a cor de fundo para hash. Opa. três, 202, três, dois Então esse é o hash 202, três, 202, três, dois A. Ok. Assim. Então, você decide como deseja gerenciá-lo. Está bem? E vou colocar o acolchoamento aqui. Acolchoamento de 20 pixels e 40 pixels. OK. Algo parecido com isso. OK. Então, vou diminuir um pouco para que fique tudo bem. Estou muito ampliado. OK. Isso está parecendo legal. Existem bordas brancas, além que vou fazer é me livrar desses portais brancos, então vou ter uma estrela aqui, margem de uh oops Então, uma margem de zero pixels, menos, e você pode ver que os portais brancos sumiram Está bem? Então isso está feito. Preenchimento, eu posso adicionar um raio de borda, ok, raio de pó de, digamos, dez pixels, E, sim, é isso. Eu acredito que é isso, certo? Então este é o nosso relógio no modo de tela cheia, como você pode ver aqui, ok? E espero que tenham gostado desse tutorial, e espero que tenham aprendido muito, ok? Espero que tenha sido útil e até a próxima. 15. Mergulhando no usoRef: o guardião silencioso do estado: Oi, aí. Agora é hora de começarmos a falar sobre o uso ref hook. Agora, o gancho Uf também é fornecido pelo react para trabalhar com componente funcional e é diferente do gancho de estado de uso que temos O gancho Uf é usado para armazenar valores, mas é um pouco diferente de como o estado americano o gerencia O Uf permitirá que você mantenha os valores nas renderizações. Isso é diferente do estado americano, em que o estado, se você atualizar o valor, isso permitirá que você cause uma nova renderização, certo? Outra coisa sobre o useref é que ele não faz com que o componente seja renderizado Então, como acabei de dizer, o estado de uso acionaria a renderização novamente. Está bem? O Sref, por outro lado, não faz com que o componente seja renderizado novamente quando o valor muda Está bem? Então, para contextualizar ou simplesmente, usar ref hook in react é usado para persistir no valor em todas as renderizações sem fazer com que o componente renderizado novamente quando o valor muda Está bem? Então, novamente, ele é usado para persistir valores nas renderizações sem fazer com que o componente seja renderizado novamente quando o valor muda E uma das principais razões pelas quais o SRF está sendo usado ou onde o SRF está sendo usado é para armazenar a referência do Dom, ok Portanto, ele permite que você armazene diretamente a referência a um elemento Dom e interaja com ele. Por exemplo, você pode adicionar foco a esse campo de entrada em algum evento, ok? Você pode ter rolagem e assim por diante. Então, esse é um dos casos de uso uRF e esse é um dos principais casos de uso em que ele é comumente usado, ok? Ele pode ser usado para armazenar valores que não precisam ou não precisam ser renderizados novamente quando atualizados. Está bem? Isso é de acordo com a definição, conforme diz, OK? Por exemplo, talvez você queira armazenar um ID de cronômetro, um valor anterior ou qualquer outro valor que precise ser mantido nas renderizações, mas não acione a atualização da interface do Está bem? Então, esse é o gancho de referência dos EUA para você, e vamos experimentá-lo em ação ou ver como funciona. Então, o que eu vou fazer aqui é aqui, eu tenho um projeto de reação, ok? É um projeto criado usando trigo, e eu tenho um componente funcional aqui, app dot JSX, que está sendo renderizado aqui no ponto principal JSX No elemento raiz. Tudo bem. Então, vou usar isso para digitar algum código. Ele só tem um JSX simples que está retornando. No momento, ele tem um TIV com a tag H one. Aprenda a reagir como você está vendo no lado direito, certo? Então, o que eu faria aqui é usar o Rf aqui, ok? Então eu vou dizer const. Diga meu Rf aqui, e eu direi que use ref E você pode ver essa coisa sendo sugerida em vez do uso ref. No momento em que eu seleciono isso, você verá uma entrada sendo adicionada na parte superior. Está bem? Você pode ver que essa é a entrada. E isso está sendo importado como qualquer outro gancho de reação que você nos faça declarar, usar effact e tudo Está bem? Se você passar o mouse sobre isso, verá que use ref retorna um objeto ref múltiplo Cuja propriedade atual é inicializada com base no argumento anterior, que é o valor inicial, e o objeto de retorno persistirá por toda a vida útil do componente Foi sobre isso que falamos. Ainda não falamos sobre o objeto aqui, o objeto ref do qual ele está falando, ok? Está dizendo que tem uma propriedade atual. Vou mostrar isso para você em um momento. Está bem? Mas diz que o objeto retornado persistirá por toda a vida útil do componente e, como eu disse, ele persiste em todas as renderizações É mais útil do que o atributo f. É útil para manter qualquer valor mutável semelhante à forma como você gostaria de usar campos de instância nas classes. Tudo bem. Então, vamos dar uma olhada em como você pode usá-lo. Então eu tenho o uRF e vou passar um valor aqui. Ok, eu vou dizer olá. E eu vou dizer Wold aqui, algo assim, e vou adicionar um ponto e vírgula Tudo bem. Então isso está feito, sim, temos E ref criado. Está bem? Então, esse é o valor inicial que estou transmitindo, e é isso que o MyRF está mantendo agora Está bem? Agora, o que faremos é imprimir isso no console e ver o que esse MrF está segurando agora, ok? Então, vou imprimir minha referência. OK. E eu vou guardar isso. OK. E aqui, vou até o console. Ok, e eu vou assim. Tudo bem. Vamos ver o que tem. Então, tudo bem, está imprimindo duas vezes, e é só por causa do modo estrito em min dot Jx que nosso aplicativo está sendo renderizado duas vezes, Mas se você remover isso, tudo bem, você o verá sendo impresso uma vez. Está bem? Então, se você expandir esse objeto, verá que o objeto tem corrente aqui. OK. E você pode ver que tem corrente, e deixe-me ampliar um pouco para que possamos ver claramente. OK. Então, sim, você pode ver que tem corrente e qualquer que seja o valor que passamos, olá mundo, é isso que você está vendo aqui. Está bem? Então, o que ele tem agora é, deixe-me imprimir aqui, ok? Tem algo parecido com isso. É um objeto como esse, e tem a propriedade current nele, e o valor de current é hello world, algo assim. Então é isso que o MrF está segurando agora. Este é o objeto que ele está segurando agora, e é isso que está imprimindo aqui no console. Você pode ver que é um objeto de texto. Certo? E se você quiser brincar com o valor para usar ref, você precisa trabalhar com a propriedade atual, ok? Então, agora, a propriedade atual está contendo hello world Y porque eu a estou inicializando para hello world over here. OK. Portanto, sempre que você imprimir um objeto serf, você verá um objeto com uma única propriedade que é atual, e a propriedade atual armazena o valor de tudo o que você atribuiu, como um elemento dom ou um valor ou um valor inicial Está bem? Você pode acessar o valor armazenado na referência de uso usando a corrente aqui. Está bem? Então, sim, isso é sobre o uso ref. Então, o que eu faria é entrar em um lugar estranho. Isso é o que é. E eu vou te mostrar como você pode fazer uso disso no TSX Então, digamos que, se eu quiser imprimir hello world, para poder usar esses dois colchetes, posso dizer meu E como você acessaria o valor? Você vai dizer dot current? OK. Se você salvar isso, verá learn react, hello world, certo? Então, seja qual for o valor que você está passando aqui, ok, seja zero, um, hello world ou o que quer que seja, você pode se referir a ele usando current. Espero que isso esteja fazendo sentido. Agora, o que eu faria é me basear neste exemplo, o, e vou esclarecer isso aqui. OK. Deixe-me desenvolver esse exemplo. E agora eu tenho meu árbitro, ok. Então, vou renomear isso para contagem de referências, ok? Então isso é ref e aqui, em vez de usar ref e eu tenho uma string sendo passada, vou passar zero. OK. Vou me livrar disso aqui, do log de pontos do console e disso também. Está bem? Agora, o que vamos fazer aqui é ter uma contagem de árbitros, Rf aqui, ok? E vou adicionar um conjunto também. Ok, então eu vou dizer Const aqui, e eu vou ver a contagem de stet. OK. Então, eu tenho contagem de árbitros. Eu tenho a contagem de corcéis e coloquei a contagem de corcéis aqui. E eu vou dizer use state, e eu inicializarei esses dois também zero OK. Então isso também é feito. Está bem? Portanto, usamos ref e use State, que estão sendo inicializados com zero. Tudo bem. Agora, o que vou fazer é entrar na interface aqui. OK. Vou me livrar desse H, certo, e vou somar P aqui. OK. Vou ver o State Count aqui. OK. E eu vou dizer contagem estadual. Algo parecido com isso. OK. Você verá a contagem de estados aqui na interface à direita. E aqui, vou adicionar o botão E, algo assim. Assim. E para o botão, direi incremento, State Count. Assim. OK. Aqui está esse botão. OK. E o que eu faria é que, quando o usuário clicasse em incrementar a contagem de estados, eu aumentaria o valor do estado Tudo bem. Então, o que posso fazer é dizer const, terei uma função porque precisarei de uma função para lidar com esse estado de incremento, count Contagem de estados mais um aqui. OK. E eu vou guardar isso. Está bem? Então, estamos tendo uma contagem incremental de estados aqui e, ao clicar nisso, direi em clicar Vou adicionar Opa. Vou adicionar incremento na contagem de estados. Oh, então isso precisa ser adicionado. Está bem? Então, sim, vou incrementá-lo e você pode ver que a contagem de estados está sendo incrementada dessa forma. Tudo bem. Agora, o que vou fazer é adicionar também uma contagem aproximada, ou de forma semelhante, e vou apenas copiar isso. Vou colar aqui. OK. E o que eu faria é contar interestaduais, vou dizer que se eu contar aqui OK. E isso é importante. Como exibimos uma contagem de referências? Corrente de contagem de pontos R, certo? Porque a corrente é o que mantém o valor. A contagem de referências é ter um objeto com current como propriedade. Tudo bem. E eu vou dizer incrementar a contagem de referências. Essa função ainda não existe. Precisamos criar isso e eu vou salvar isso. Ok, então a saída sumiu porque essa função não existe, o que é absolutamente normal. Vou replicar isso aqui e aqui, em vez de incrementar o estado, contar, vou dizer incrementar a contagem de referências aqui OK. E sim, tudo está vindo em uma linha. OK. Portanto, posso mover isso para uma nova linha apenas adicionando PR. Vou me livrar disso aqui. Ou eu provavelmente posso, me desculpe, isso não é uma boa ideia. Em vez disso, vou me livrar do BR aqui. Eu vou falar sobre CSS aqui. Eu tenho display flex. Ok, esses são casos básicos que estou tendo. OK. Para DIV, tenho a exibição de flex e também definirei a direção, a direção flexível da Ok, e isso define tudo verticalmente. Acho que essa é a melhor solução aqui. Tudo bem. E sim, eu tenho contagem incremental aqui e contagem incremental de referências para contagem incremental de referências, preciso dizer aqui, f count, Toto, preciso esclarecer isso Então, f conta, Tt é a corrente e precisamos dizer mais igual a um. OK. Então, sim, essa é uma forma abreviada de fazer Tudo bem. E eu vou guardar isso. OK. E vamos ver como isso funciona. Então você pode ver o estado sendo aumentado, ok? Sendo o estado aumentado, a contagem aproximada está limitada a um aumento porque não está causando uma nova renderização Está bem? Mas se você disser log de pontos do console aqui, e se eu imprimir o valor aqui, se eu disser 1 segundo. Então, se eu disser contagem aproximada, certo. E eu vou dizer aqui. Ok, contagem de dólares no momento, algo assim e ponto e vírgula. Vou guardar isso. OK. E isso faz com que seja renderizado novamente, para que você possa ver como basicamente a contagem foi atualizada. Mas se você vier aqui para inspecionar, não, e se você abrir isso, vá para Oops Vá para o console, algo assim. Tudo bem. Estou vendo contagem de referências não está definida, tudo bem. Isso foi um erro no início. Não deveria vir agora, ok? Assim, você pode ver a contagem de estados sendo incrementada e a contagem de referências sendo impressa no console OK. Agora, se por algum motivo a renderização for causada, você pode ver a contagem de referências sendo atualizada aqui, certo? Caso contrário, ele continua incrementando e imprimindo no console Não está sendo refletido na interface porque não está sendo renderizado novamente, certo? No momento em que eu atualizo o estado aqui, renderização acontece para o componente e a contagem de referências é atualizada Espero que isso esteja fazendo sentido em relação à forma como isso está funcionando. E esse é um bom exemplo para nos ajudar a entender a diferença entre o estado de uso e o uso de Rf, ok? Então, você pode ver aqui, o uso persistente Rf é usado para persistir valores nas renderizações e não faz com que o componente seja renderizado novamente quando o E isso é o que estamos vendo claramente aqui, ok? E se você quiser testar ou se quiser ter algum tipo de código que seja executado na renderização novamente, o que você pode fazer é usar o efeito de uso para realmente ver se o componente está sendo renderizado novamente aqui Eu vou dizer que use o efeito aqui. OK. E sim, qual é a sintaxe do efeito de uso Portanto, temos uma função de seta como primeiro parâmetro. OK. E então eu tenho uma dependência como essa. Está bem? Então essa é a função. Agora, o que vou fazer é ver ou executar esse efeito em cada renderização. Então, vou me livrar da dependência e aqui na função, vou dizer bloquear aqui Oh, opa, então registre este. Vou entrar no console. O que estamos registrando no console? Vou apenas dizer que o componente é renderizado. Renderização de componentes, algo parecido com isso. Guarde isso. Você pode ver que ele está sendo renderizado duas vezes inicialmente. OK. Deixe-me atualizar. Ele está sendo renderizado duas vezes inicialmente por causa do modo estrito que temos no JSix principal, que é absolutamente normal Se você quiser, você pode se livrar do modo estrito, apenas para este exemplo. OK. Eu vou fazer isso. Se eu salvar isso, agora você pode ver que está sendo renderizado apenas uma vez, certo? Se você acessar o app.j6, tudo bem, ele está sendo Ainda vou fazer uma atualização. Você pode ver sendo renderizado uma vez. Agora, o que você pode fazer é aumentar a contagem de ruas. Você pode ver o componente ser renderizado novamente, renderizado No número de vezes que você clica, clica no incremento da contagem de ruas, você verá o componente sendo renderizado novamente, Se você disser incrementar a contagem de referências, verá a contagem de referências sendo atualizada, mas não está vendo o componente sendo renderizado novamente, certo E se você incrementar uma contagem de estados. Então, aqui, antes de incrementar a contagem de estados, basta dar uma olhada na contagem de referências na interface É zero, certo? Mas no console, a contagem de referências é 15, mas não está sendo refletida aqui na interface porque o componente ainda não foi renderizado novamente Portanto, se você disser incrementar a contagem de estados, o componente será renderizado novamente e a contagem de referências será atualizada novamente Então, deixe-me clicar aqui e você verá que a contagem de referências está atualizada. Certo? Então, sim, e você pode até ver o componente do log sendo impresso ser renderizado, certo? Portanto, use o componente effect hook logs rerenderizado toda vez que o componente for renderizado novamente, e isso nos ajuda a observar quando o componente é realmente renderizado novamente em qual renderizado novamente em Então, sim, para resumir, quando você clica no botão de contagem de estados de incremento, o componente é renderizado novamente e você vê o registro no console que ele Quando você clica no botão de incrementar contagem de referências, a contagem de referências é incrementada, mas o componente não é renderizado novamente, então você não verá o bloqueio do efeito de uso no console aqui ao clicar em console aqui ao Incrementar contagem de Rf Espero que essa demonstração seja realmente útil para entender a diferença entre use ref e use state. Isso é uma confusão entre estudantes. Isso cria muita confusão quanto a: Ok, então estou disposto a armazenar valor de uso, se eu usar use state ou usar Rf, ok Ambos têm seus próprios benefícios, e espero que a diferença esteja bem clara para todos vocês, certo? Então, espero que você tenha conseguido acompanhar e espero que tenha sido útil. 16. Dando vida ao useRef: gerenciando elementos HTML com facilidade: Então, agora é hora de dar uma olhada em como você pode usar o Rf com elementos HTML Então, neste vídeo em particular, o que vamos fazer é ter um exemplo em que usamos us ref para focar em um elemento de entrada ao clicar no botão. Tudo bem? Então, para começar, já que estamos usando o usef, o que vamos fazer? Vamos criar uma referência de entrada. Está bem? Então, vou dizer entrada constante Rf. Ok, vou usar ref para criar o gancho aqui e vou inicializá-lo para criar o gancho aqui como nulo por enquanto, E o que eu vou fazer aqui é aqui, eu vou ter um elemento de entrada. Ok, então eu vou ter uma opinião. Algo parecido com isso. E eu vou ter tipo, tipo de texto. OK. E eu vou ter um espaço reservado O espaço reservado é focar em mim. Ok, isso é um espaço reservado que eu estou usando. Ok, você pode ver esse espaço reservado. Ok, então o foco deve vir assim em um clique de botão. Então, precisamos do botão também. Ok, então vou adicionar um botão aqui. OK. Então eu vou dizer botão. OK. E ao clicar aqui, vou vincular isso a uma função, mas a função não existe, então estou deixando isso em branco por enquanto e direi foco. Opa, concentre-se, algo assim. OK. E sim, ao clicar nesse botão, o que precisamos fazer é chamar essa função de entrada de foco. Vamos chamar isso de entrada de foco. Eu virei aqui e definirei essa entrada de foco. Está bem? Então eu vou dizer const, entrada de foco. OK. E eu vou dizer que vou ter a função de seta aqui. E sim, essa função não faz nada. Mas clique aqui, o foco deve estar aqui. Tudo bem. Então, o que vamos fazer agora é dizer input ref input ref current dot focus. OK. Então, eu estou fazendo uso disso agora, ok? E o que é referência de entrada? referência de entrada agora está inicializada nula. É nulo agora Está bem? Então, como você aponta a referência de entrada para esse campo de entrada aqui? Está bem? Então, o que você faria aqui é dizer ref. Você usará a propriedade ref aqui e eu direi a referência de entrada. É isso mesmo. OK. Agora, no momento em que você fizer isso aqui, ok? A referência de entrada terá a referência a essa entrada específica aqui. Está bem? Você pode dar uma olhada nisso. Então, o que vou fazer é dizer Console dot log. Essa é a melhor maneira de ver o que um determinado elemento está contendo, certo? Eu vou dizer input ref. Estou imprimindo a referência de entrada. Está bem? Vamos comentar isso por um tempo, ok? E vamos até o Console. Vamos para o Console. Está bem? Então você está vendo, ok, 1 segundo. Então, essa é uma saída que estou vendo. OK. Então, no momento, não estou vendo nada no console. No momento em que eu disser foco, você verá que a corrente está tendo o elemento de entrada. Você pode ver que é o elemento de entrada. E se eu expandir o elemento de entrada, você pode ver que ele tem todas as propriedades ou atributos de entrada aqui. OK. Então esse é todo o elemento de entrada que você está vendo, certo? Então, sim, é com isso que vamos brincar, ok? Então, está se referindo a esse elemento de entrada, certo? Então, eu vou apenas comentar isso aqui. E, em vez disso, vou habilitar isso. Ok, vou guardar isso e deixar que façamos uma atualização aqui. Está bem? Se eu disser foco, você verá que o foco se volta para a caixa de texto ou para a caixa de entrada, devo dizer Está bem? Eu removo o foco. Se eu disser foco, você verá o foco sair por aqui. Agora você pode fazer muito mais, ok? Em vez de apenas se concentrar, você pode até mesmo atualizar a cor aqui. Então, eu posso adicionar aqui foco e destaque. Está bem? Tudo bem. E aqui, depois do foco, o que posso dizer é entrada ref, ponto, estilo de ponto atual, ponto, cor de fundo é igual a. Posso adicionar qualquer tipo de cor, cinza, da cor que você quiser E eu vou guardar isso. Agora, se eu disser foco e luz, você verá que muda para cinza Eu posso mantê-lo aqui. Parece que cinza está parecendo muito estranho. Tudo bem. Então, posso dizer foco e destaque, você pode ver que está funcionando bem, certo? E você também pode ter várias referências em um programa. Então, se você tiver várias caixas de entrada as quais deseja mover o foco, você pode ter vários f. Ok. Então, deixe-me mostrar um exemplo disso também. Está bem? Então, posso chamar isso de referência de entrada e posso ter aqui, referência de entrada ao lado aqui. OK. Então, vou ligar para isso a seguir. OK. E o que eu posso fazer é escolher duplicar isso aqui OK. Duplique isso e eu posso dizer a referência de entrada a seguir aqui OK. Concentre-se em mim, foque na altura e, em vez de focar na próxima entrada, algo assim Está bem? Então eu atualizei a referência e a função onclick. Tudo bem. E aqui precisamos ter essa função também. Então, vou apenas duplicar isso aqui. Ok, concentre a entrada em seguida, e eu vou me livrar desse comentário aqui. OK. E em vez de em vez da referência de entrada aqui, terei a referência de entrada em seguida, algo assim. Você pode ver o foco e isso, o foco e isso. Você pode ver que os dois estão funcionando da mesma maneira. Você pode ver, certo? Você pode até ter um botão para redefinir o foco, e ele redefinirá o foco e o estilo de cada um deles. Então, vou fazer isso e mostrar para você. Ok, então eu vou ter isso. Vou adicionar mais um botão. Eu vou dizer reiniciar. OK. É um botão de reset. OK. E vamos redefinir o foco. OK. Então, ao clicar, eu o estou vinculando a uma função de redefinição de foco Agora, o foco de reinicialização não existe, então vou apenas duplicar isso Ok, e vou chamar isso de reset de foco, algo assim aqui. OK. E então o que eu faria é dizer input ref current style dot Background. OK. Vou dizer Input ref, fundo do estilo atual, vou dizer branco aqui, e esse também será branco, o próximo, certo? OK. E sim, para que eu possa ver o foco nisso, foco nele. Deixe-me atualizar. Então foque a luz, foque nela, e então eu posso ver o reset. Você pode ver que, ao reiniciar, o foco desaparece, certo? Opa, é descanso. Então eu cometi um erro de digitação Está reiniciado, na verdade, ok. Tudo bem. Isso está parecendo legal. Concentre-se nele, concentre-se nele e, em seguida, ele é reiniciado. Você pode ver, certo? Portanto, esse é um dos casos de uso, e esse é um dos casos de uso comuns em que o serf hook está sendo usado Portanto, o gancho de servo é usado com frequência. Se você ler o código on-line, qualquer tipo de código de reação, verá que ele é usado principalmente com elementos HTML para obter mais controle sobre o modelo de objeto do documento Tudo bem? Como estamos fazendo aqui, estamos tendo um melhor controle sobre o que estamos fazendo com os elementos de entrada aqui, certo? Então, sim, isso é sobre a referência do usuário. Além disso, mais uma coisa, quando você atualiza o foco e tudo isso aqui, isso não está fazendo com que o componente seja renderizado. Ok, porque essa é uma das coisas sobre o uso de Rf. Certo? Então, sempre que você estiver fazendo isso, sempre que estiver alterando isso, você pode simplesmente ter um efeito de uso aqui, usar o gancho de efeito aqui. OK. E eu posso simplesmente ter uma função de seta aqui sem nenhuma matriz de dependência. Está bem? Posso simplesmente fazer o registro de pontos do console aqui e verei o locatário do componente Está bem? Só vou receber essa mensagem. Vou guardar isso. Se você for inspecionar, tudo bem. Você verá o componente renderizado. Claro, está chegando duas vezes, e a razão para isso é porque eu o tenho no modo estrito. OK. Se eu disser focus and allied, focus and allied reset, você verá que o componente renderizado não está sendo impresso, que significa que a renderização não está acontecendo E essa é uma das melhores coisas sobre o uso de Rf. Ele permite que você adicione dinamicidade à página da web ou ao seu componente sem causar novas renderizações Então, espero que isso tenha sido útil e espero que você tenha conseguido seguir este exemplo simples. 17. Desvendando a perfuração de propulsores: o bom, o ruim e o feio: Então, agora é hora de começarmos a falar sobre esse conceito de perfuração por hélice. Então eu tenho um projeto react, e aqui eu tenho esse arquivo chamado app dot CSX, junto com app dot CSS, ok? E eu tenho esse GSX básico que estou retornando junto com um CSS simples que eu já adicionei Agora, o que é perfuração por hélice? Portanto, a perfuração por hélice é uma situação no React em que você precisa passar dados do componente de nível superior, passando pelas várias camadas de componentes intermediários, até um componente secundário que realmente Está bem? Então você terá um cenário em que terá muitos componentes aninhados, ok Então você tem o componente um, ok? Opa. E então você tem o componente interno um, você tem C dois, ok? E então dentro de C dois, digamos que você tenha C três. Está bem? Essa é uma hierarquia que você está seguindo, ok? Pode haver mais na hierarquia, mas estou apenas dando um exemplo de três E digamos que C três precise acessar alguns dados. Está bem? Então C um passará esses dados para C dois e C dois passará esses dados para C três. Agora, se houver dez níveis como esse, ok, os dados devem ser passados por dez níveis. Isso é o que isso significa essencialmente. E isso é a perfuração de hélice, porque aqui você está passando os dados com a ajuda de adereços Então, voltando à definição novamente, a perfuração por hélice é uma situação em reação em que você precisa passar dados de um componente de nível superior, passando pelas várias camadas de componentes intermediários, até um componente secundário que realmente Está bem? Agora, C dois aqui, neste caso, é um componente intermediário Se houver mais dez componentes no meio, todos serão componentes intermediários Está bem? E essa coisa é conhecida como perfuração de hélice Está bem? Agora, isso geralmente acontece quando um componente que precisa dos dados está profundamente aninhado Então C três aqui está profundamente aninhado na árvore de componentes E os dados devem ser passados por cada camada de componente, mesmo que esses componentes intermediários precisem dos dados para seu próprio uso, certo? Portanto, C bidirecional pode não precisar dos dados. Mas como C três precisa dos dados e C um os passou para C dois, C dois também precisa passá-los para C três Está bem? Portanto, C dois também terá acesso aos dados. Mesmo que não precise disso. Está bem? Então, deixe-me experimentar isso ou vamos ver isso com a ajuda de um exemplo. Então, o que vamos fazer é criar esse tipo de hierarquia de componentes, ok Teremos alguns componentes, como os componentes A, B, e depois teremos um componente no final, que realmente precisará dos dados. Está bem? E enviaremos os dados do componente superior para o componente inferior, ok? Ou o profundamente aninhado. Tudo bem Então é isso que vamos fazer, ok? E para começar, o que vou fazer aqui é fazer aqui no aplicativo, ok, vou começar criando uma variável. OK. Então, eu vou dizer const aqui. Ok, então esses são os dados que precisamos passar. Vou dizer valor do tema, e vou dizer Tako, digamos que temos esses dados, alguns dados em alguma variável, e esse é o tema que queremos ter, ok. E precisamos passar esses dados para o último componente na hierarquia Tudo bem E aqui estamos devolvendo esse JSX, ok Mas o que faremos aqui é, digamos que eu tenha mais um componente, ok? Então, vamos criar alguns componentes, então vou me livrar disso aqui. OK. E eu vou reduzir o JSX Está bem? Digamos que eu tenha mais um componente, ok, eu tenho uma função. OK. E esse é o componente A aqui. Digamos que está bem? E aqui, estou fazendo uso da desestruturação e vou dizer o tema aqui OK. E eu vou voltar aqui. O que estou devolvendo? Estou devolvendo o componente B. Ok. O que é componente B? Precisamos definir isso. Está bem? E estou passando isso como um adereço, esse tema que recebi do componente superior Está bem? Isso é o que eu estou fazendo. OK. Agora eu tenho o componente B aqui na parte inferior, ok? Então eu vou dizer função. Ok, componente B, e eu vou ter uma desestruturação Eu vou dizer o tema aqui. OK. E aqui, eu vou dizer componente temático de retorno, ok? OK. Este é o nosso componente que realmente precisa dos dados, e eu os estou passando para o componente com a ajuda de adereços Ok, eu vou ter mais um último componente, que é um componente temático OK. Eu os aceitarei aqui. Ok, algo parecido com isso. E aqui, eu vou dizer volte, div, tudo bem? Eu direi que o tema atual é, ok, e o valor do tema, algo assim. Certo? Isso está feito. Ok, então o que estamos fazendo é ter componente dentro de componente dentro de componente, e aqui no topo, ok, eu preciso adicionar o componente A, certo? Então, aqui, o que eu vou fazer é dizer componente A. Ok, componente A, e eu vou passar o teta Eu vou dizer tema, tema aqui. OK. E eu vou dizer que o fechamento está aqui. Está bem? Então isso está feito, e você pode ver que o tema atual está escuro aqui. Agora, aqui, como isso é organizado é que temos o componente A, ok? Ou temos um aplicativo aqui no topo, certo? O aplicativo está aqui. OK. Então temos o componente A, então vou adicionar o componente A aqui, vamos entender a hierarquia, basicamente. Temos o componente B. Ok, esse é o componente B. Vou descer e adicionar um comentário. OK. E esse é o componente C. Então, existe o componente C de 1 segundo? Não. Então, em vez disso, temos um componente temático. Tudo bem. Em seguida, adicionamos C aqui. Ok, então é assim que a hierarquia se parece. Você tem o componente do aplicativo na parte superior, componente A, o componente B e o componente é um componente temático Agora, esse componente do tema precisa dos dados, ok? Precisa de um tema aqui. Então, ele precisa acessar o tema para qualquer tipo de processamento, ok? E os dados existem aqui, ok? Esses são os dados em que você tem os dados. App, certo? Então você pode ver o aplicativo aqui tem o valor do tema. Certo? E pode obtê-lo do usuário ou de qualquer outro lugar. OK. Mas, no momento, estamos apenas criando os dados por atribuição padrão usando uma variável OK. E precisamos que o componente precise acessar esses dados. Então, o que ele fará é passar esses dados pelas camadas ou pelos componentes com a ajuda de adereços aqui Então você pode ver, estou embrulhando. Estou tendo esse componente A aqui, e estou passando o tema para o componente A, depois para o componente B. componente A está aceitando e passando para o componente B. Então o componente B está aceitando e passando para C, e o componente C está passando ou desculpe, componente B está passando para eles, componente, não componente C, e o componente do tema é aceitando e exibindo isso. Está bem? Então, na verdade, está exibindo que pode fazer qualquer tipo de processamento que você precisar, ok? E você pode ver que os dados estão sendo transmitidos da maneira correta. Está bem? Eu posso até adicionar algum tipo de CSS, certo, para que você possa ver como essa camada é realmente feita aqui Está bem? Agora, aqui, vou adicionar TIF aqui OK. E eu vou embrulhar tudo isso dentro desse saco rígido, algo assim OK. E aqui, eu vou dizer estilo. OK. E podemos ter um estilo para borda. Então eu vou dizer borda, legal em dois pixels aqui. Ok, dois pixels, sólido e preto, algo assim. E eu vou ter um forro aqui. E o preenchimento é de 20 pixels. Hein. Algo assim, opa Portanto, há algum problema. Está bem? Então, eu adicionei estilos. Então, o problema está aqui. OK. Deixe-me ver qual é o problema. Ok, então diz que não há uma tag de fechamento para Dev. Então, é melhor adicionar uma tag de fechamento e salvá-la. Você pode ver que esse é o componente do qual estamos falando, certo? Então, se eu expandir isso um pouco, você pode ver que a equipe atual está escura aqui. OK. O que eu faria é na verdade, acrescentar mais uma coisa aqui. Está bem? Podemos adicionar h2h2 aqui Opa. Oh, vou adicionar um novo H dois, ok e algo assim. Está bem? Então, vou dizer aplicativo composto de aplicativo ou posso dizer pai aqui OK. Então, isso nos diz que esse é o pai. Está bem? Você pode ver como isso está sendo exibido. OK. Agora, o que podemos fazer aqui é copiar essas coisas aqui. OK. Vou adicioná-los por 1 segundo. Deixe-me copiar tudo isso, e isso será fácil. E vou adicionar tudo aqui ou deixar que eu receba a devolução também. OK. Então eu vou pegar essa coisa toda. OK. Então, estamos renderizando o componente B. Lembre-se disso. Aqui, vou mudar isso para o componente B. Ok. E isso não é um aplicativo agora, é o componente A. Ok, componente A, e eu vou me livrar disso. Ou você pode dizer criança aqui. Ok, você pode ver que um pai tem o componente A, que é o filho, certo? E eu posso realmente copiar isso aqui. Eu posso vir aqui para o componente temático e posso substituir toda a devolução aqui OK. E aqui, eu vou dizer componente temático, ou desculpe, componente para B. Ok, assim, e aqui eu posso ter um componente temático, algo assim. Vou guardar isso. Você pode ver o componente A do aplicativo, componente B, e então você tem o último componente, que na verdade está exibindo o tema aqui. OK. Então, para isso, o que eu faria é realmente retornar. Na verdade, adicionaria esse retorno aqui. Está bem? Isso é adicionado. E o que vou fazer é cortar essa divisão aqui OK. E não estamos adicionando nenhum tipo de componente aqui, então vou apenas adicionar esse o e vou me livrar desse retorno aqui. Está bem? E isso está feito. Acho que esse é um componente temático, certo? Então, vou adicionar isso aqui. OK. Então, isso é ótimo, vou dizer que é neto aqui, certo? E então aqui, este está em um segundo. Vou copiar esse neto. Isso é neto, ok? E isso é pai e filho. Você pode ver? OK. Então é assim que parece, certo, e melhor, deixe-me passar para uma visualização em tela cheia aqui. Ok, então você pode ver a exibição em tela cheia aqui. Tudo bem, você tem o componente aplicativo, então você tem o componente filho. Você tem o componente B e dentro do componente B, você tem o componente temático, que é o bisneto, certo E esse é o tema que está sendo exibido. Agora, essa coisa aqui é conhecida como perfuração de hélice, certo? O que estamos fazendo aqui é passar alguns dados de diferentes componentes, ok, para o componente filho aqui, o componente neto aqui, o componente neto aqui, que está profundamente aninhado na árvore de componentes, e os dados são passados por cada camada de componente Então, ele está sendo passado pelo componente A, componente B. Agora, o componente A e o componente B não precisam desses dados. Ok, ainda assim, eles precisam acessar esses dados e passá-los adiante porque, caso contrário, isso quebrará a cadeia, ok? Agora, essa coisa é conhecida como perfuração de suporte, e uma coisa sobre perfuração de suporte é, obviamente, que isso é factível, mas isso torna seu código mais difícil de gerenciar e manter, especialmente à medida que o aplicativo isso é factível, mas isso torna seu código mais difícil de gerenciar e manter, especialmente à medida que o Então, o aplicativo é simples agora, então pode parecer fácil. Mas quando o aplicativo cresce em complexidade, pode se tornar muito difícil, sim, não é recomendado. É recomendado até um certo nível, mas não além disso, certo? Então, sim, isso é sobre perfuração com hélice, e espero que você tenha uma boa clareza sobre o que é a perfuração com hélice. 18. Aproveitando o usoContexto: simplifique o compartilhamento de estados como um profissional: Tudo bem Então, aqui, o que estamos fazendo agora é que eu já configurei um aplicativo que tem vários componentes aninhados juntos, e temos esse valor ou alguns dados que estamos passando com a ajuda da perfuração de hélice Ok, então estamos passando para o componente A, ok? Esse é o componente dentro do aplicativo. E então esse componente o passa para a árvore e o componente, que é um componente temático, que está profundamente aninhado dentro da árvore, está exibindo o valor do tema aqui Está bem? Agora, está escuro aqui. Se eu mudar esse escuro para claro, algo assim, ele atualizará o valor para claro. Está bem? Então, isso é uma sondagem por aqui Agora, a sondagem como conceito se torna problemática quando você precisa passar dados por várias camadas de componentes E agora, o que está acontecendo aqui é que se eu rolar para cima, ok. Então aqui você pode ver que é assim que a hierarquia se parece, certo? componente temático precisa do tema aqui, e o componente do aplicativo tem os dados que esse componente do tema precisa Está bem? Então, vou adicioná-lo aqui. Eu vou dizer que tem tema. Está bem? Agora, o que está acontecendo aqui é componente A e o componente B estão apenas fazendo o trabalho de passar os dados, certo? Agora, há alguns problemas por aqui, ok? Uma é que você está passando os dados por camadas desnecessárias, ok? exemplo, você tem o componente A e o componente B que não precisam dos dados, mas estão apenas fazendo o trabalho de transmissão, certo? Carga de manutenção. Então, amanhã se sua hierarquia de componentes mudar, digamos que você insira um novo componente no meio ou remova um componente no meio, ok? Então, qualquer tipo de mudança, você precisa garantir que o novo componente também passe o processo para o componente da equipe, ok? Para que a hierarquia não se quebre e a passagem de dados não seja interrompida Caso contrário, o componente da equipe não conseguirá exibir os dados que está exibindo no momento e isso quebraria o aplicativo. Está bem? Então, se algum outro desenvolvedor estiver trabalhando e não souber que esses dados estão sendo passados, isso pode levar a erros, E há uma complexidade desnecessária no momento em que quanto mais camadas temos, mais confusa, devo dizer, a cadeia de suporte se torna, E isso torna um código mais difícil de entender e manter, certo? E é aí que o conceito de gancho de contexto de uso entra em cena. Está bem? Então, o que é use context hook? Isso é contexto de uso. Está bem? Então, basicamente, este é um gancho com o qual você pode configurar o contexto do tema e acessá-los diretamente do componente do tema sem precisar passar pelo componente A e pelo componente B. E isso simplifica o componente T, reduz a sobrecarga de manutenção, e Uh, a sobrecarga manutenção é reduzida porque os componentes intermediários que temos A eles não precisam passar ou conhecer esse adereço temático do qual não precisam, certo? No momento, eles estão sendo informados disso, ok, porque ele precisa ser passado para o componente do tema, por meio de perfuração de adereços. Está bem? Então é aqui que o contexto de uso entra em cena, ok? Agora, como funciona o uso do Context? Portanto, há algumas partes aqui. Ok. Primeiro, você cria um contexto. Está bem? Agora, o contexto cria essencialmente um objeto de contexto, e essa é uma sintaxe aqui Então, esse é o objeto de contexto que estamos criando, estamos dizendo const, meu contexto, ok? E estamos usando o contexto Create e estamos passando algum valor padrão aqui. Está bem? Agora, esse valor padrão é opcional aqui. Não é necessário, não é obrigatório. Mas se você quiser passar, se quiser ter um valor padrão, você pode passá-lo aqui. Depois que esse objeto é criado, o contexto criado é consumido, ok? Então, qualquer componente que deseje fazer uso desse contexto pode usá-lo em qualquer componente, ok E, basicamente, isso pode ser usado lá. Está bem? Agora, também existe um conceito de provedor, ok, em que você pode agrupar o componente que precisa acessar o valor do contexto, ok? E o componente dessa árvore, qualquer árvore de componentes, pode acessar o valor do contexto ali. Está bem? Mas o provedor é algo que estacionamos por enquanto. Vamos apenas entender como você pode criar o contexto e como você pode consumi-lo. Ok, vamos manter as coisas simples Ok. Então, o que faremos é copiar a sintaxe aqui. Está bem? Vou pegar a sintaxe aqui. E o que vou fazer é rolar para baixo até aqui. Uh, o que temos agora é que temos um tema, certo? O que vou fazer é me livrar desse tema e dizer meu contexto, ou posso dizer contexto do tema aqui. Está bem? Eu direi para criar contexto e não terei nenhum tipo de valor padrão aqui. Está bem? Então é isso que estou fazendo. Eu criei um contexto agora, ok? Agora, se eu rolar até aqui, vou me livrar deles aqui, o tema que estou passando. Está bem? Isso também não é necessário aqui, ok? Como não estamos passando o tema, isso também não é necessário. Então, na verdade, estou me livrando de todos os adereços que estou passando aqui e estou simplificando as coisas, certo passando aqui e estou simplificando as coisas, certo? Agora, isso está feito. Isso também foi removido e, sim, está feito. Tudo bem. Agora estamos exibindo o tema aqui. É claro que a equipe não funcionará porque a equipe não existe. Então, no momento em que eu salvo isso, não vejo nenhuma saída porque há um erro no console. Está bem? Isso é entendido. Agora, o problema é que precisamos mostrar o tema aqui. Está bem? Então, como exibimos? Precisamos consumir o contexto, certo? Portanto, precisamos consumir o contexto no componente. Está bem? Então, eu vou até aqui para o componente. Ok. E aqui em algum lugar, eu vou usá-los aqui. Eu direi que tema é igual a usar contexto, e o nome do contexto que temos é tema Ok, não é um componente da equipe, mas é o contexto deles aqui. Ok. E então eu vou guardar isso. Ok. E ainda não estou vendo a saída. Está bem? Então, ao verificar o erro, descobri que criar contexto não está definido, então há um problema com as entradas, ok? Então, se você rolar até aqui. Está bem? Literalmente, não há entrada para importar, criar contexto e usar contexto. Eu vou dizer Control and Shift Control e espaço aqui e você vai tirar isso da sugestão, ok? Então, vou selecionar isso e provavelmente será importado na parte superior. Se não for imputado, basta adicioná-lo se isso não acontecer automaticamente para você. Está bem? E eu vou rolar para baixo. O Contexto de Uso também deve ser importado, então vou dizer controle e espaço aqui no final do Contexto de uso, e vou selecionar isso. Se você rolar para cima, verá que use Context também está sendo adicionado. Eu guardo isso, ok? Qual é o erro que estamos recebendo agora? Está bem? Portanto, o erro não detectado no contexto de referência não está definido no componente do tema Ok, então está dizendo que não está definido porque está dentro desse aplicativo componente, certo? Então, precisamos levar isso para fora, certo? Então, o que vou fazer é vir aqui e criá-lo aqui. E você pode ver a saída agora, ok? Então, sim, isso deve funcionar bem agora. Tudo bem Então, o que estava acontecendo é que eu criei o contexto dentro do componente do aplicativo e estava tentando acessá-lo de outro componente. Então isso não funcionou, é claro. Ok. Então eu criei o contexto, certo? Ele foi criado, mas você pode ver não há valor aqui, então eu posso fornecer um valor padrão aqui. Eu posso dizer luz, por exemplo, eu posso salvar isso e você pode ver o tema atual é luz aqui. Tudo bem Então, isso é o contexto de uso. Basicamente, está mostrando o valor padrão que estamos tendo aqui. Está criando um contexto, e esse contexto está sendo consumido no componente temático Está bem? Então, é assim que você pode, em vez de usar o prop trolling, ok, usar o contexto aqui e usar os dados dos componentes Tudo bem Então, espero que isso esteja fazendo sentido e espero que você tenha conseguido acompanhar. 19. Criando e implementando um provedor de contexto React: Agora use Context tem esse conceito de provedores, ok, que é usado para fornecer um contexto A. Agora, aqui, você tem que usar Context, ok? Essa é a hierarquia com a qual trabalharemos, ok? Temos o componente A do aplicativo, componente B, e o componente está aninhado Este componente de equipe precisa de equipe e o aplicativo tem o tema. Tudo bem? Agora, aqui, precisamos usar o provedor, certo? Portanto, essa é uma sintaxe para fazer uso do provedor. Assim, você pode dizer meu contexto, que é o nome do contexto dot provider e passar o valor, e isso deve ser enrolado no componente, como você pode ver, onde você deseja fornecer o contexto. Está bem? Agora, por que você quer fornecer o contexto? Está bem? Então, aqui, criamos o contexto e estamos consumindo o contexto no componente do tema aqui. Está bem? É um componente diferente. Agora, o problema aqui é que, se esses componentes estiverem todos no mesmo arquivo, se esses componentes forem divididos em arquivos individuais, isso não funcionará, porque você terá que exportar o contexto do tema de um arquivo e inseri-lo no outro arquivo para que funcione, certo? Além disso, um problema aqui é que o contexto do tema agora tem um valor padrão que está sendo usado pelo componente do tema. Então, amanhã, se você quiser passar o mesmo contexto para algum outro componente com um valor diferente, não poderá fazer isso. E para isso, você precisa de um provedor, ok? Então, o que é provedor? provedor basicamente envolve o componente que precisa acessar o contexto ou valor, ok? E o valor que está sendo fornecido. Então, esse valor é o valor fornecido para o contexto aqui, ok? Portanto, esse contexto estará disponível com esse valor para esse componente. Isso está sendo empacotado e também todos os componentes aninhados que serão agrupados nesse componente específico Está bem? Então, deixe-me demonstrar isso para você. Tudo bem. Então, o que vamos fazer é agora fazer uso do fornecimento aqui. Então, vou copiar a sintaxe aqui. OK. E vamos aqui para o componente A aqui, e depois de H dois, ou digamos, no topo aqui, ok, antes do TIF eu vou adicionar isso, e o fechamento automático está sendo adicionado aqui Vou cortar isso, ok, e vou levar para cá. OK. Agora, isso está embrulhado e eu preciso adicionar o valor de algum valor aqui, ok? E o que eu vou fazer é dizer escuro aqui. Está bem? Então, digamos que eu esteja passando no mesmo contexto com o valor de dark. E se eu salvar isso, ok, recebo um erro. Deixe-me ver qual é o erro. Ok, o erro é óbvio. Meu contexto não está definido, ok? Então eu cometi um pequeno erro aqui. Estou fazendo uso do meu contexto. Deve ser o nome do contexto, que é o contexto do tema. Vou substituir isso aqui. Portanto, contexto do tema, provedor de pontos, o valor é igual a escuro. E se eu salvar isso, você verá que o tema atual está escuro aqui. Está bem? Então é assim que você pode usar provedores no código, ok, ou junto com o Context. Agora, isso é muito útil porque qualquer contexto que você esteja fornecendo aqui com a ajuda de provedores, ele está disponível em toda a árvore de componentes, ok. E, basicamente, você também pode acessá-lo a partir do componente aninhado, certo? Agora, a vantagem aqui é que, mesmo que o componente, no futuro, você separe o componente em arquivos individuais , o contexto estaria disponível para componente do tema porque eles estão sendo passados por meio de um provedor. OK. Se você não estiver usando o provedor, precisará exportar e importar o contexto. Não é bom, e você também tem o valor padrão e não o valor modificado. Está bem? Então, amanhã, se você quiser reutilizar o contexto para alguns outros componentes, você sabe, você pode modificar esse valor padrão e passá-lo da maneira que estamos fazendo aqui, ok? Então, aqui estamos apenas modificando o valor padrão. O valor padrão é claro, e estamos passando no escuro aqui porque queremos escurecer e estamos vendo a saída aqui. Está bem? Então, sim, espero que você esteja claro sobre o que são provedores e a importância do provedor e como você pode usá-lo. 20. Atualizando valores de contexto dinamicamente: Então, agora vamos falar sobre como você pode atualizar o valor do contexto, ok? E o que vamos fazer é aqui, temos esse contexto específico chamado contexto temático. Está bem? Está nos dando o valor do tema, seja claro ou escuro. E estamos passando no escuro por aqui pelo provedor do tema, ok? Provedor de contexto de tema, devo dizer, ok, ou provedor de contexto. E então estamos acessando esse contexto aqui no componente aninhado, ok? E estamos exibindo isso como escuro. Ok, você pode ver isso aqui. Tudo bem. Agora, o que eu faria é ter um padrão aqui, ok? Isso significaria alternar o tema e alternaria o tema em todo o aplicativo Tudo bem? É isso que vamos implementar. E fazendo isso, aprendemos como você pode atualizar o valor do contexto dinamicamente, em um evento Está bem? Então, a primeira coisa que vou fazer aqui é introduzir um estado dentro do componente. Está bem? Então, aqui, vou dizer const o, e vou chamar isso de tema aqui. Está bem? E eu direi que defina-os como Este é o estado de uso. Vamos fazer uso do use state hook aqui. Vou dizer use state e vou passar o valor padrão como light. OK. Agora, ao fornecer o valor ao contexto, o que vou fazer é me livrar disso e dizer o tema aqui. OK. Então, qualquer valor que essa equipe tenha está sendo passado para o provedor aqui ou para o provedor de contexto, ok? Ou no contexto, por meio do provedor, devo dizer. Tudo bem? Agora, o que eu preciso fazer é introduzir um botão. Então, ao clicar no botão, o que acontecerá é que uma função será acionada atualizar o valor deles para light. Então, se for claro, ele o converterá em escuro e, se estiver escuro, ele o transformará em claro, algo assim. Então, eu vou dizer const toggle theme. É assim que vou chamar essa função e vou usar as funções de seta em JavaScript aqui. E aqui, vou dizer que o tema definido está bem. Então, o tema definido é basicamente o conjunto de funções para esse estado, ok? Defina o tema, eu diria que a equipe anterior. OK. E vou dizer que a equipe anterior. Então, se a equipe anterior é igual à luz aqui. Se a equipe anterior é igual à luz, estou usando o operador ternário aqui Eu direi que a equipe anterior é clara, então atribua a ela a escuridão, caso contrário, atribua luz. Então, se não for leve, ele o manterá aceso, ok? Algo parecido com isso. Está bem? Então Ti é esse é o código inteiro aqui. OK. Então, eu vou mudar. Vou pegar essas duas linhas anteriores. E eu vou guardar isso. Está bem? Agora, isso está feito. OK. Vou alinhar isso com um ponto e vírgula aqui. Estou apenas usando um operador ternário para alternar o tema aqui, com base na Está bem? E vou usar esse tema de alternância, e o que vou fazer é aqui, neste componente específico, adicionar um clique no botão Está bem? Então, pouco antes de o componente ser adicionado, vou dizer botão aqui, algo assim, e vou dizer alternar tema aqui. OK. E eu vou dizer com um clique. Opa, não em Pode jogar ao clicar aqui, vou dizer Alternar tema e vou salvar isso Então você pode ver, eu tenho esse botão de alternância aqui, ok? O tema atual é claro aqui. Está bem? Eu posso alternar isso para falar e acender. Você pode ver. Portanto, o contexto, o valor dentro do contexto, está sendo atualizado. Como está sendo atualizado? Ele está sendo atualizado com a ajuda da variável de estado aqui. Então, vinculamos essa variável de estado ao valor no contexto. Então, qualquer que seja a variável de estado, ok? Isso é o que será exibido e repassado aos componentes. Agora, mais uma coisa que eu gostaria de mencionar se você estiver usando esse contexto em vários componentes. Então, aqui, estou passando isso para essa árvore de componentes, quero dizer, estou passando esse contexto específico para essa árvore de componentes. Por meio desse provedor de equipe ou do provedor de contexto, certo? Agora, se eu tiver mais um componente três, estou passando no mesmo contexto também estou passando no mesmo contexto para essa árvore de componentes. Está bem? Então, se você estiver alterando o valor aqui, quaisquer mudanças que você esteja fazendo aqui com a ajuda deste botão. Portanto, essa árvore de componentes não será afetada porque está completamente separada E mesmo que você esteja passando no mesmo contexto, ok? Mas você está usando provedores, aqui mesmo. Então, essas duas árvores estão separadas. Então essa árvore está separada. E se você criar mais uma árvore passando no mesmo contexto por lá, ok? As mudanças aqui nesse contexto específico não afetarão o de lá porque você está transmitindo os valores por meio de um provedor. Está bem? Espero que isso esteja fazendo sentido aqui. Ok, então a reutilização pode ser feita ou o contexto pode ser reutilizável E você precisa usar o provedor para embrulhar a árvore dentro de um provedor. Está bem? Então, sim, espero que isso faça sentido na forma como isso funciona. Tudo bem, vou mostrar isso para você em tela cheia também aqui. Ok, então você pode ver o tema do Togo, Light tak. Você pode adicionar algum tipo de margem ou preenchimento ao botão aqui Então, no app dot CSS, posso dizer botão aqui. Botão, e eu vou dizer preenchimento ou eu vou dizer margem, e eu vou dizer cinco pixels Ok, algo assim. Vamos ver o que isso acontece. OK. Há alguma lacuna agora, e isso está funcionando muito bem. Ok, você pode ver, certo? Então é isso. É assim que você pode usar estados com contexto e obter o valor atualizado em um contexto com base no valor na mudança de estado. Está bem? Espero que você tenha conseguido acompanhar e espero que isso seja útil. 21. O escopo é importante: explorando o comportamento do contexto dentro e fora dos provedores: Agora, deixe-me dizer uma coisa importante sobre os provedores de contexto, certo? Então, um provedor de contexto é usado para fornecer um valor modificado para o componente em sua árvore, ok? Agora, o que ele está modificando é modificar o valor de contexto padrão Então aqui temos luz, por exemplo, estamos criando o contexto com o valor padrão de luz, mas ao passá-lo para o provedor, podemos modificar o valor para escuro e passá-lo, ok? Portanto, o provedor de contexto é usado para fornecer o valor modificado aos componentes em sua árvore. Tudo bem? Agora, esse valor só pode ser acessado pelos componentes agrupados pelo provedor e não fora dele. Está bem? Portanto, se você modificar um valor usando um provedor e passá-lo para a árvore de componentes como estamos fazendo aqui no nosso caso, esse valor modificado não estará automaticamente disponível globalmente ou fora da árvore em que o provedor é usado. Os componentes fora da árvore usarão o valor de contexto adiado ou o valor diferente do provedor se agrupados por outro Está bem? Deixe-me mostrar isso para você. Tudo bem. Então, o que vou fazer aqui é demonstrar que esse provedor de contexto é usado para passar o valor dentro dessa árvore de componentes e não fora dela. O que vamos fazer é ter mais um componente, ok? E eu vou criar um componente, que será chamado de componente global. Então, eu vou chegar aqui embaixo. Deixe-me duplicar essa coisa aqui. E na parte inferior, vou adicionar mais um componente. Vou chamar isso de componente global. Algo parecido com isso. Componente global, ok. O resto é o mesmo, ok? É apenas um componente diferente, componente global, e estou chamando isso de componente global. E aqui, vou dizer fornecedor externo. OK. Side, forneça, algo assim. Está bem? Então é isso que estou fazendo. Não sou, vou colocar outra água aqui, roxa, por exemplo, e vou ver isso. Está bem? Portanto, esse é um componente global que foi criado. Agora vou rolar até aqui. Está bem? E o que vou fazer é adicionar essa renderização global de componentes aqui, ao renderizar o GSX Está bem? Então, o que eu faria é aqui, pouco antes do provedor de contexto do tema. Primeiro, primeiro terei que me certificar de agrupar tudo isso em um div, porque a raiz tem que estar lá, tem que haver uma raiz, certo? Vou embrulhar tudo isso nessa div. Está bem? Agora, dentro dessa div, o que vou fazer é ter um componente global, algo assim Componente global, terei uma etiqueta de fechamento automático. Vou ver se é isso. OK. Você pode ver esse componente global aqui, aqui. Está bem? Agora, se você ver se eu alterno o tema, você pode ver que o tema atual no componente global é leve OK. E dentro do aplicativo aqui ou dentro da hierarquia de aplicativos hierarquia de componentes de aplicativos), também há luz, o Mas o componente global está fora da hierarquia também há luz, o Mas o componente global está fora da Você pode ver que está fora do provedor aqui. Está bem? Portanto, não é afetado pelo provedor Agora, se eu mudar, se eu alternar o tema, vamos ver, você pode ver que o valor do tema atual está sendo atualizado apenas dentro do componente do tema ou dentro desta árvore é o que eu deveria dizer, ok essa árvore que temos, mas não Mesmo usando o mesmo contexto, o valor não está sendo atualizado. Esse é o ponto que eu quero enfatizar. Está bem? Agora, amanhã, posso reutilizar esse componente, componente global, e fora desse provedor, no final, posso passá-lo novamente e, desta vez, posso agrupá-lo em um fornecimento separado aqui O que vou fazer é fazer um pouco de empacotamento aqui e cortar esse componente global Vou mover isso para dentro de uma fonte diferente aqui. Agora é um fornecedor diferente, apresentador. OK. Agora é um provedor diferente e, por aqui, o valor que estou fornecendo é sombrio. Digamos, por exemplo. OK. Vou dizer Dak aqui. Vou guardar isso. Você pode ver que esse provedor é diferente. Está tendo algum outro valor. Está bem? Então, eu queria modificar o valor padrão. Então, o que eu fiz foi adicionar provide aqui e modificar o valor padrão para DAC Está bem? Este está usando o valor padrão. Está bem? Essa na parte superior está usando o valor padrão. Não há nenhum provedor incluído, e este está ligado a uma rua. Então essa coisa aqui está ligada a uma rua. OK. Então, há três usos do contexto, como você pode ver, ok? Agora, se você alternar o tema aqui, verá que ele está sendo alternado apenas na hierarquia e não fora da hierarquia Está bem? Esse é o ponto que eu quero destacar aqui. Está bem? E isso é muito, muito importante se você quiser usar os provedores e entender como os provedores funcionam ou qual é a importância de ter um provedor, ok? Portanto, dentro do provedor, o valor do contexto é controlado e pode ser modificado. Está bem? Então, aqui, você pode ver que essa coisa é ter um provedor. É controlado, certo, e pode ser modificado, certo? O valor do contexto pode ser modificado. E fora do provedor, fora desse provedor aqui, por exemplo, este, ok, o contexto volta ao valor padrão ou ao valor de outro provedor, encapsulando-o na árvore de componentes Está bem? Portanto, o padrão é fora deste provedor, padrão será o valor padrão aqui, como você pode ver, o atual deles é leve e o valor padrão é luz aqui, certo? Então, valor padrão ou se você não quiser usar o valor padrão, você cria outro provedor e passa o valor que quiser ter. Certo? Então é assim que funciona. E a alternância dentro desse provedor não é afetada porque o componente global aqui não faz parte desse componente e nem está incluído nesse provedor. Está bem? Espero poder fazer uma observação aqui e espero que você esteja claro sobre o que está acontecendo. Está bem? Então, se você estiver modificando um valor usando o provedor e passando-o para o componente, esse valor modificado não estará automaticamente disponível globalmente ou fora da árvore que o provedor é usado, ok Os componentes fora da árvore usarão o valor de contexto padrão, como estamos usando aqui, o componente global, ou usarão um valor de provedor diferente se agrupados em pi sob o provedor, como estamos fazendo aqui. Está bem? Mas o valor dentro dessa árvore não está disponível do lado de fora, certo? Espero que isso esteja claro e espero que você seja capaz de entender esse ponto. 22. Ganchos personalizados 101: criando lógica reutilizável no React: Oi, aí. Então, agora é hora de começarmos a falar sobre ganchos personalizados no react Agora, o que é um gancho personalizado? Portanto, hook in react personalizados são funções que permitem reutilizar a lógica em vários componentes. Tudo bem Agora, quando você está criando aplicativos com o react, existem componentes, certo? Então aqui temos um componente, ok? Portanto, é um componente muito simples que retorna ganchos personalizados no cabeçalho ou usa a tag H one, certo? Agora, esse é um componente, mas na aplicação real, você pode ter vários componentes e pode estar usando muita lógica em diferentes componentes. Agora, se existe algum tipo de lógica comum em seu componente, o que você pode fazer é converter ou encapsular essa lógica em um gancho personalizado e reutilizar esse gancho nos componentes em seu Está bem? Agora, você também tem ganchos embutidos E aqui eu tenho algumas declarações de entrada na parte superior, uso contexto, estado de uso, efeito de uso, ok? Esses são todos os ganchos embutidos que você tem, ok? E eles são projetados para fornecer componentes funcionais. Então, componentes funcionais são os componentes que estamos definindo usando funções, ok? Então, eles são definidos para dar aos componentes funcionais, o acesso a recursos como eventos do ciclo de vida estadual em contexto, certo E eles são padronizados, definidos pelo react e otimizados para um conjunto comum de tarefas, certo? Então, eles estão embutidos que você está importando e reutilizando em seus componentes, ok Mas amanhã, se você quiser reutilizar algum tipo de lógica, você pode até mesmo criar seu próprio gancho personalizado, que significa que é um gancho definido pelo usuário, ok? E sempre que você estiver definindo, a sintaxe basicamente é que ela deve começar com esse uso aqui Ok, deve começar com o uso. Portanto, ele pode ser usado como componente ou EPI ou algo parecido, como você quiser chamá-lo Ok, use o contador Ok, então ele deve começar A convenção normal é basicamente começar com o uso. Está bem? Então, o que são ganchos personalizados Essas são funções que você mesmo cria para reutilizar a lógica entre os componentes, ok? E isso é o que é. Você pode pensar nisso como uma receita, ok, que nada mais é do que um conjunto de tarefas comuns ou um conjunto específico de operações que você deseja realizar. E você não quer repetir o código em vários componentes, então basta defini-lo uma vez e reutilizá-lo em todos os lugares Está bem? Por que eles são necessários? Então, é claro, um dos principais motivos que você pode obter da definição é a reutilização Está bem? Portanto, isso permite que você reutilize muita lógica Ele permite que você remova muitas repetições e ajuda a organizar seu código de uma maneira melhor Está bem? Também existem muitos ganchos embutidos que já conhecemos Você deve estar ciente se estiver construindo com o react. Então, esses são todos os ganchos embutidos. Por exemplo, alguns dos ganchos que adicionei na parte superior criam contextos, usam contexto, usam estado Está bem? Então, esses são ganchos embutidos, e ganchos personalizados são os ganchos definidos pelo usuário Está bem? Agora, uma pergunta que você pode pensar agora, não é? Então, analisando essa definição, veja como elas são diferentes das funções normais do Ja Script? As funções também são blocos que você pode definir uma vez e reutilizar em seu aplicativo Por que não criar funções em vez de ganchos? Por que esse conceito de ganchos existe em primeiro lugar? Os ganchos são diferentes quando você os compara com as funções aqui Agora, como eles são diferentes? Agora, ganchos personalizados podem usar os recursos de reação Agora, quando digo recursos de reação significa ganchos personalizados podem usar gerenciamento de estado, como usar gancho de estado para gerenciar o estado do componente, que as funções JS normais não podem Está bem? Os ganchos personalizados também têm controle de ciclo de vida, portanto, eles podem usar o gancho de efeito para lidar com os efeitos colaterais, como a busca de dados, e as funções normais do JS não Está bem? Também há muita reutilização envolvida lá. Sim, ganchos personalizados basicamente seguem as regras de reação para ganchos e garantem um comportamento consistente Então essa é a razão pela qual esse conceito de ganchos é diferente Como esse conceito de ganchos personalizados, é essencialmente diferente das funções normais do Jascript As funções do Ja Script são limitadas, ok? Mas quando você deseja ter um conjunto específico de reutilização do React , você usa ganchos personalizados Tudo bem Então, espero que isso esteja fazendo sentido. Agora, o que eu faria é me livrar dessas entradas na parte superior. Está bem? Eles não são realmente necessários neste momento. Agora, o que faremos é a mão na massa e criar nossos próprios ganchos personalizados Está bem? Então, o que faremos é primeiro criar um componente de contador. Esse é um componente que nos ajudará a exibir no contador normal com dois botões de incremento e diminuição, e você pode diminuir o valor do contador e incrementá-lo Está bem? Então, esse é o componente que vamos criar um componente muito simples e, em seguida, extrair a lógica do contador em um gancho personalizado, que nos permitirá reutilizar o contador em vários componentes em vários lugares Então, isso é algo que vamos explorar. Então, vamos começar com isso. Está aqui o que eu tenho é um projeto simples de reação, projeto de reação de trigo, eu diria. Eu tenho main.j6, como você pode ver, que está renderizando E aqui, se você vier, este é o app dot JSX Ok. Agora, o que vou fazer aqui é começar com o contador, vou ter um estado aqui. Então, primeiro, diga vou fazer uma contagem aqui, definir a contagem, algo assim, e eu direi para usar State Okay. E vou adicionar zero aqui. Ok. Então esse é o nosso estado aqui. Vou adicionar duas funções. Eu vou dizer incremento. Essa é uma função. É uma função de seta que estou criando aqui. E, na verdade, não preciso adicionar chaves curvas porque há apenas uma linha de contagem de conjuntos de códigos. Está bem? E eu vou dizer conte mais um. Ok, conte mais um, algo assim. Ok. E eu também terei uma função de decréscimo, função de decréscimo. Então isso é incremento, diminuição. Ok. E em vez de incrementar aqui, vou apenas diminuir esse menos um Opa, não gosto, é negativo. Tudo bem Então, isso está feito. E agora, aqui, estou no cabeçalho. Aqui, vou apenas dizer contagem e vou mostrar a contagem de algo assim. Ok. E mais ou menos H um, vou manter isso como H dois. E eu vou ver se isso você pode ver a contagem de zero, e aqui, eu vou ter alguns botões. Ok. Então, a etiqueta do botão, eu preciso adicionar o botão. Eu vou dizer que este é o botão de incremento. Ok, e ao clicar, direi incrementar aqui, assim Ok, isso é um botão. Vou adicionar mais um botão aqui. Então é isso, e eu vou dizer decréscimo. Ok. Decréscimo, algo assim Então, sim, este é o contador que temos agora. Se você aumentar o contador, verá que ele aumenta e também pode diminuí-lo. Também será negativo. Está bem? Um contador muito simples é o que criamos. Está bem? Agora, o que faremos é extrair uma contra-lógica em um gancho personalizado e usar o gancho personalizado em nosso aplicativo. Está bem? Então, vamos fazer isso. Então, primeiro, vou extraí-lo em um arquivo separado. Ok. Então, eu vou ter um arquivo aqui em SRC Vou chamar esse arquivo como podemos chamá-lo use counter dot JSX, algo assim Ok. E aqui, vou apenas replicar muitos códigos que já temos Então, vou copiar toda essa função aqui. Ok. Isso e eu vou colar aqui. Ok. Agora vamos reduzi-lo. Ok, preciso adicionar uma importação, que é o estado de uso na parte superior. Ok, o estado de uso foi importado. E aqui, em vez de função, isso é contador de uso, e eu preciso exportar contador de uso, então vou dizer exportar, padrão, contador de uso. Isso está feito. Ok. E o que precisamos fazer é usar o Estado aqui. Estamos fazendo uso do incremento e, ao retornar, não precisamos retornar o JSX, esse JSX Isso não é algo que retornaremos, mas o que retornaremos é que retornaremos a contagem. Ok, então retornaremos a contagem. Retornaremos incremento e retornaremos decréscimo, algo assim E isso não será um colchete redondo. Isso será igualmente um colchete. Então, sim, isso está feito. Ok, então acho que estamos todos prontos. Ok, estamos criando um estado. Estamos criando incrementos, decréscimos, contando e exportando contadores Então, este é um gancho personalizado que criamos onde, na verdade, temos alguma lógica e estamos fazendo uso de recursos relacionados ao react, você pode ver. Estamos fazendo uso de estados e tudo mais, certo? E isso é algo que também estamos devolvendo. Agora, aqui, se você vier ao app dot Jx, o que precisamos fazer é usar o gancho que criamos Está bem? Porque use o contador, se você der uma olhada, é nosso gancho personalizado que lida com a lógica da contagem. Ele está gerenciando o estado e retornando a contagem atual junto com as funções de incremento e decréscimo aqui Está bem? Portanto, precisamos atualizar o componente do contador aqui que estamos tendo no aplicativo. O nome do componente é app. E está representando um contador. Portanto, precisamos atualizar isso para usar o gancho personalizado. Então, o que faremos é me livrar de tudo isso. Nós não precisamos disso. Isso é passar para o gancho personalizado e, em vez disso, direi const, direi count Eu vou dizer incremento, vou dizer decréscimo, algo assim Vou dizer igual a, vou dizer usar contador. Assim. Ok. E sim, é isso. Estamos usando um contra-gancho. Não preciso usar o State agora em meu aplicativo. Então você pode ver o momento em que eu disse usar o contador aqui, ok, a instrução de entrada foi adicionada na parte superior aqui. Você pode ver essa declaração de entrada. Ok. Então você pode ver como agora esse código se tornou muito mais fácil de gerenciar. Está bem? Eu posso salvar esse arquivo. Eu posso atualizar isso e você não pode ver nada mudar na saída Funciona perfeitamente bem. Está bem? Então, o que fizemos foi substituir o gerenciamento interno do contador de componentes pelo nosso contra-gancho usado E isso torna nosso contra-componente mais limpo. E reutilizável para qualquer tipo de lógica relacionada à contagem. Está bem? Amanhã, digamos que se você quiser usar esse componente em vários ou amanhã se quiser usar essa funcionalidade de contador em vários componentes. O que você pode fazer é criar um contador como esse contador de uso. Ok, há um gancho, que é fazer o gerenciamento da contagem de coisas, certo? E você pode importar isso em vários lugares e usá-lo em diferentes componentes. Amanhã, se você tiver que atualizar essa lógica de contagem, você não precisa descobrir, oh, quais componentes estão usando isso, deixe-me verificar. Basta atualizá-lo de uma vez neste arquivo específico. No momento em que você o atualiza em um arquivo, as alterações são refletidas em todos os lugares. Então, essa é a mágica da reutilização, como você pode imaginar. Está bem? Então, o que são ganchos personalizados Ganchos personalizados no react são funções que permitem usar a lógica em vários componentes e começam com o uso aqui Isso é uma convenção. Tudo bem? Espero que tenha sido útil e espero que você tenha conseguido acompanhar. 23. Aprimorando a funcionalidade: atualizando e refatorando ganchos personalizados: Oi, aí. Então, agora o que vamos fazer é ter esse gancho personalizado que estamos usando aqui e que criamos. É um gancho de balcão de uso, que está nos ajudando a gerenciar a contagem e a funcionalidade do contador. E estamos fazendo uso disso para exibir aqui, certo? E você pode reutilizá-lo em quantos componentes quiser, usando um contra-gancho O que vou mostrar é como você pode atualizar seu gancho personalizado para adicionar mais recursos e como ele se reflete por toda parte. Tudo bem Então, aqui neste contador, o que vamos fazer é adicionar mais um botão, que será o botão de reset que redefinirá a contagem para um valor inicial. Tudo bem Então, aqui, o que vou fazer é que teremos o valor inicial. Então, aqui neste gancho em particular, aceitarei o valor inicial. Está bem? Então, vou dizer valor inicial e, opa, valor inicial, e ele terá esse zero como valor padrão aqui, e aqui, eu terei redefinido Está bem? Então eu vou dizer const, vou dizer reset, ok. E eu vou ter uma função de seta. Ok, não precisamos de colchetes, então vou dizer que defina a contagem aqui e vou redefinir isso para o valor inicial, ok, seja o que for Ok. E em vez de inicializar o estado aqui como zero, vou inicializá-lo com o valor inicial porque agora estamos obtendo o valor inicial como parâmetro. Está bem? E, ok, eu posso ficar igual aqui. Tudo bem Isso é redefinido, e o que também faríamos é retornar esse reset aqui. Então, vou apenas dizer reset aqui, algo assim. Ok. Isso está feito. Agora, a função Reset foi adicionada aqui no retorno, e o que você pode fazer aqui é adicionar um botão. Ok, então vou adicionar o botão. E esse botão será o botão de reset, e eu terei a função de reset. Mas o problema é que a função de reset não está sendo declarada aqui, então eu vou dizer reset, algo assim. Está bem? Então, sim, é isso. Estamos prontos e também passaremos um valor inicial, pois agora ele aceita o valor inicial. Portanto, o valor inicial será zero agora. Vou salvar isso, e você pode ver que o botão de reset foi adicionado, ok? Agora eu posso incrementar, posso diminuir e posso ver Está bem? Assim, você pode ver como a funcionalidade está funcionando bem. Está bem? Agora, seja qual for o valor inicial que você definir, o contador começará a partir desse valor inicial. Então, se eu definir o valor inicial para dados de dez, o contador começará a partir de dez. Você pode ver que a contagem é dez. Ok. E você pode incrementar, diminuir e ele será redefinido para o valor inicial com o qual você passou Certo. Então, é assim que você pode atualizar o gancho basicamente para adicionar mais recursos, e todas as atualizações que você fizer são refletidas onde quer que esse gancho específico esteja sendo usado. Está bem? Então essa é a beleza de usar ganchos personalizados Espero que isso esteja claro e espero que você tenha conseguido acompanhar. 24. Conclusão do curso: E isso nos leva ao fim dessa empolgante jornada no mundo dos react hooks Exploramos como os hooks revolucionaram o desenvolvimento de reações, permitindo que escrevêssemos um código muito mais limpo e funcional Então, desde dominar os conceitos básicos do estado de uso e efeito de uso até mergulhar nos tópicos avançados, como usar contexto, usar ref e ganchos personalizados, construímos uma base sólida para o desenvolvimento moderno Ao longo do caminho, também criamos projetos do mundo real, como seletor de cores, rastreador de mouse e relógio digital E esses projetos nos ajudaram a mostrar como esses conceitos ganham vida em aplicações práticas Mas lembre-se, isso é só o começo. O poder dos ganchos de reação está em sua versatilidade e Eu o encorajo a continuar explorando mais, experimentando e construindo novos projetos com o conhecimento que você adquiriu nesta aula Portanto, isso ajudará você a explorar a maneira inovadora usar os ganchos de reação em seus projetos e aplicativos futuros Estou muito empolgada em ver como você aplicará essas habilidades para criar aplicativos dinâmicos e responsivos Lembre-se de que o aprendizado é um processo contínuo e o React oferece oportunidades infinitas de crescimento e criatividade. Não se esqueça de concluir os projetos do curso que você obtém com essa turma específica e compartilhá-los com toda a turma na seção de projetos. Seus projetos não apenas solidificarão seu aprendizado e compreensão, mas também inspirarão outras pessoas em nossa comunidade de aprendizagem a fazerem Obrigado por ser um grupo de alunos tão engajado e entusiasmado Espero que este curso não tenha apenas aprimorado seu conhecimento, mas também tenha inspirado você a ultrapassar os limites do que você pode alcançar junto com o React. Boa programação, e eu gostaria de desejar a você tudo de bom em sua jornada de desenvolvimento do React