Curso Para Iniciantes Reagir Js Para Avançar (Aprender Fazendo

1. Tudo sobre o curso no Js no React: Dê uma olhada neste lindo site. Tudo é codificado manualmente com React js usando uma estrutura CSS chamada tailwind. Ele foi projetado com cuidado e profissionalismo para funcionar em todos os dispositivos. E esse lindo clone da Netflix? Não faça como este incrível aplicativo de painel de controle de reações. Dê uma olhada neste site de portfólio profissional atualizado do React js. E aí, seria incrível se você soubesse exatamente como criar e codificar qualquer site do zero. É exatamente aqui que eu entro. Olá, bem-vindo e muito obrigado pelo seu interesse no meu novo React js. Porque para iniciantes, meu nome é, aqui está x e eu vou ser seu instrutor neste curso. Neste curso, começaremos do zero para aprender e entender os conceitos básicos. Reaja. No final, você estará bem equipado para criar aplicativos web complexos usando o React j. Vamos começar instalando as ferramentas necessárias para trabalhar com o React years. E depois disso, criaremos nosso primeiro aplicativo React. Portanto, você não precisa se preocupar , simplesmente porque eu vou segurar sua mão e orientá-lo os fundamentos que são os pontos mais delicados da reunião do React js. E, assim como nosso conjunto de instâncias de bits, se você não consegue explicá-lo de forma simples, você não o entende bem o suficiente. Meu objetivo neste curso é explicar, reagir de forma simples para que todos entendam bem o suficiente. Portanto, vamos tratar de todos os conceitos básicos do React, incluindo tópicos avançados, como quem olha. Na verdade, será uma série completa. E ao final deste curso, você estará bem equipado para criar aplicativos web complexos, como o clone do Netflix, o aplicativo React the Dashboard, aplicativo de receitas de alimentos e site profissional de portfólio React js de alto nível, que você pode usar para mostrar seus trabalhos para seus clientes ou empregadores, incluindo suas famílias e amigos. Sem mais delongas, junte-se a mim e vamos começar. 2. 2 O que exatamente é React js?: O que exatamente é o react e por que o usaríamos? React JS é uma biblioteca JavaScript declarativa, eficiente e flexível para criar interfaces de usuário rápidas e interativas. Eu quero que você sublinhe esses pontos-chave. Interfaces de usuário declarativas da biblioteca JavaScript. Antes de prosseguirmos, quero corrigir uma impressão. O React js não é uma estrutura. É uma biblioteca. E o propósito para o qual essa biblioteca foi criada é criar interfaces de usuário interativas, que simplesmente implica renderizar a visualização e garantir que a visualização esteja sincronizada com o estado. Essa é a única coisa que ele porta. E funciona perfeitamente bem. Portanto, o react não tem uma solução embutida para lidar com chamadas HTTP, roteamento e outras funcionalidades. No entanto, podemos lidar com todas essas funcionalidades instalando bibliotecas externas. Por exemplo, se você implementar um botão clique para redirecioná-lo do Componente a para o Componente B. Você precisa instalar uma biblioteca externa chamada React Router Dome. Outro ponto importante é que o React js é declarativo. E esse paradigma simplesmente implica você reaja o que quiser escrevendo código. E com a ajuda da biblioteca Reactome, react atualizará e renderizará com eficiência apenas o componente real quando seu estado mudar. Tudo bem, então o React terá uma forma abstrata. Elas são senhoras? E facilitar a criação de uma interface de usuário interativa e complexa? E agora a pergunta é: por que aprenderíamos a reagir? E qual é exatamente a vantagem no setor de tecnologia? O ponto número um é a demanda do mercado. Ao conferir a tendência do Google, você perceberá que o React js está dominando o setor de tecnologia em termos de biblioteca ou estrutura para a construção de interfaces de usuário. Se você quiser expandir sua oportunidade como desenvolvedor de front-end, React js é uma das melhores ferramentas que você pode adicionar à sua caixa de ferramentas. O ponto número dois é o alto desempenho. React usa apenas algumas técnicas inteligentes para minimizar o número de operações dispendiosas de cúpula necessárias para atualizar a interface do usuário. que, por sua vez, permite que os desenvolvedores criem um aplicativo web que pode alterar os dados ao longo tempo sem precisar recarregar a página. E, por favor, tome nota disso. Tudo bem, então ele permite que os desenvolvedores criem um aplicativo web que pode alterar os dados ao longo do tempo sem precisar recarregar a página. Deixe-me rapidamente te dar uma metáfora. Por exemplo, um de seus amigos postou a foto dele no Facebook. Então você abre a foto e, em seguida, dá uma curtida imediatamente. Você dá a imagem da mesma forma. O LikeCount será incrementado mesmo sem precisar recarregar a página. E essa é uma grande vantagem das cadeiras OU portões React. Então, meio que reage às mudanças. Mas, embora não seja totalmente reativo em termos de comunicação com o banco de dados, mas com a ajuda do redox e de outras ferramentas de gerenciamento de estado, você pode fazer com que o aplicativo inicialize com o react para ser completamente reativo. O ponto número três é uma forte equipe de engenharia. O React é criado e mantido pela Mehta. Portanto, quando uma empresa como a Metta usa reacts para criar e gerenciar seu próprio produto, você pode ter certeza de que o React js não morrerá tão cedo. No entanto, alguns dos maiores aplicativos do mundo foram construídos com o React. Aplicativos como Netflix, PayPal, Facebook, Instagram, Dropbox e muito mais. Portanto, neste curso, Netflix é um dos aplicativos que vamos criar do zero até o estágio final de implantação. E, claro, Lenin, como construir esse projeto será uma grande vantagem para você. Parece bom, certo? Linda. Outra vantagem é sua grande comunidade e popularidade. O React js tem uma comunidade muito grande. Então, sempre que você tiver problemas, você tem milhares de artigos e bibliotecas na Internet que o ajudarão. Assim, você pode configurá-lo no Stack Overflow, na escola W3 e muito mais. Tecnicamente, as inicializações de aplicativos com o React seguem a abordagem de arquitetura baseada em componentes, que simplesmente implica reclamações, são um dos componentes básicos do aplicativo React. E agora a pergunta é: o que é um componente? A preocupação? Na próxima palestra, discutiremos isso em detalhes. Isso é tudo por enquanto. Nos vemos na próxima palestra. Mantenha o foco e sempre tome cuidado. 3. 3 componentes: Componentes. O componente é uma parte isolada da interface de composta para criar interfaces de usuário complexas. Em outras palavras, ele representa uma parte da interface do usuário. site tradicional pode ser dividido no componente de cabeçalho, mas em uma navegação lateral do contêiner e nos componentes do rodapé. Certo? Então, deixe-me torná-lo mais limpo. Dê uma olhada neste site de portfólio. E com certeza, esse é outro grande projeto que vamos construir neste curso. Agora, vamos entender a estrutura e como ela foi vista. Este site de portfólio é dividido em um segmento isolado menor chamado componentes, que inclui o componente doméstico. E, novamente, o componente doméstico é dividido em partes menores, que incluem o componente do cabeçalho, os componentes do perfil e, por último, a alimentação do perfil. Portanto, temos o restante dos componentes, como os componentes Sobre mim, currículo, depoimento e o componente entre em contato comigo. Então, todos esses componentes aninhados estão agrupados em uma empresa raiz, nós tecnológicos. O componente root é o componente padrão de cada aplicativo React. Portanto, a responsabilidade dos componentes raiz é servir como um contêiner para todos os outros componentes que serão criados ao criar o aplicativo React. Na verdade, chamo esse componente de mãe de todas as empresas. E, a propósito, essa é minha opinião pessoal. Então, ao examiná-lo de perto, você perceberá que cada um desses componentes define apenas uma seção da interface do usuário. E toda essa seção é então reunida para formar todo o aplicativo. Tecnicamente, se quisermos representar esse aplicativo em uma árvore de componentes, teremos no topo, o componente do aplicativo, que são as empresas raiz, certo? Então, abaixo, teremos os componentes domésticos. E dentro dos componentes domésticos estão o perfil do cabeçalho, o pé do perfil, nossa empresa. E então temos o componente pilar, currículo, depoimento e componentes de contato comigo. Então, em resumo, o componente nos permite dividir nosso aplicativo em segmentos menores encapsulados, que podem então ser compostos para tornar a interface de usuário mais complexa. Técnicas mais simples. No momento da gravação, aplicativos como o Facebook tinham mais de 30.000 empresas. Portanto, o tamanho do aplicativo determina o número de componentes a serem usados. Uma coisa boa sobre o componente é que os componentes são reutilizáveis. Portanto, no React js, um componente reutilizável é uma parte da interface do usuário que pode ser usada em várias partes do aplicativo para criar mais de uma instância de UI. Então, em um termo simples, isso significa que um componente pode ser usado com propriedades diferentes para exibir informações diferentes. Certo? Então, isso é tudo por enquanto. Na próxima palestra, prosseguiremos com a configuração e instalação. Mantenha o foco e sempre tome cuidado. 4. Instalação de 4 ferramentas (Node js, vs código, google chrome): Nesta palestra, instalaremos as ferramentas necessárias para trabalhar com o React js, como o Node.js. O Visual Studio Code não é como o Node.js nenhum navegador de sua escolha, mas preferencialmente o Google Chrome. Então, vá rapidamente para o Node js.org. Aqui está o endereço. Então, aqui, vamos baixar e instalar a versão estável mais recente. Eu já o tenho na minha máquina. Mas para ensinar pimentas, preciso baixá-lo e instalá-lo junto com você para maior clareza. Então, ao observar a tela, você verá duas versões diferentes. Então, por favor, não baixe esta versão. Você sabe por quê? É simplesmente porque ele vem com complexidades extras que você talvez não consiga descobrir. Então, vamos fazer o download do LTS. Aqui, foi retirado da tela? Vou apenas clicar para fazer o download. O motivo pelo qual estamos instalando o Node.js é para usar o pacote MPM para instalar bibliotecas de terceiros. Download realizado com sucesso. Aberto. Vamos continuar. Você pode decidir ler o contrato de licença do software. Mas para mim, vou continuar nosso acordo. Vamos continuar. E por último, temos que clicar no botão Instalar. Aqui, não é? Claro, se sua caneca, isso definitivamente apareceria. Então você só precisa digitar sua senha. E se você estiver no Windows, será uma instalação simples. Portanto, o software de instalação oculto, não a instalação do GS, está em andamento. E isso definitivamente levaria algum tempo. Então, eu só tenho que acelerar a palestra. Node.js instalado. Bem sucedido. Vamos fechá-lo. Certo, então você pode decidir mantê-lo ou movê-lo para a viga. Mas para mim, vou ficar com ele. Agora vamos abrir o terminal. Pressione e segure a tecla de comando no Mac e toque na tecla de espaço. Então, vamos procurar um terminal. E aqui está. aqui, temos que verificar a versão do node que acabamos de instalar. Node dash V, pressione a tecla Enter no seu teclado. E essa é a versão de um cabelo. Feche a terminologia. A melhor solução é instalar o editor de código. E o editor de código que vou usar neste curso é o VS Code. Sinta-se à vontade para usar qualquer editor de código de sua escolha. Mas para mim, o VS Code é meu favorito. E eu sugiro fortemente que você use o código VS para não poder me acompanhar no futuro. Role para baixo e vamos fazer o download. Foi retirado da tela. Temos para Windows e, na borda direita da tela, temos para Mark. Então, eu só preciso fazer o download para Mac. E se você estiver no Windows, também precisará fazer o download para Windows. O download definitivamente demoraria um pouco. Então, eu só tenho que acelerar a palestra. Baixar. Bem sucedido. Aberto. Aqui está. Você só precisa lançá-lo. E é isso. O VS Code é aberto. Então, do meu lado, você vai ver o projeto recente. Não se preocupe, isso pode parecer que não acabou simplesmente porque você não abriu nenhum projeto com o VS Code. Portanto, certifique-se de baixar o Google Chrome. E é claro que você já deveria tê-lo. Isso é tudo por enquanto. E na próxima palestra, continuaremos criando nosso primeiro aplicativo React. Nos vemos na próxima palestra. Mantenha o foco e sempre tome cuidado. 5. 5 Reaja a instalação: Nesta palestra, vamos criar nosso primeiro aplicativo React. Então, vá rapidamente para o React js.org. Aqui está o endereço. Clique em cachorros. Aqui está. Tudo bem, então, à direita da tela, você verá a guia. Então, logo na parte superior, você precisa clicar em Criar um novo aplicativo React. Aqui está. Então, a primeira coisa que vamos fazer é basicamente gerar um padrão de um aplicativo React, que compreende as bibliotecas, os arquivos e pastas iniciais para executar um aplicativo padrão simples do React. Role para baixo, deixe-me te mostrar. Para criar um novo aplicativo React. Temos que seguir essas instruções. O comando NP X seria usado para criar um novo aplicativo React sem precisar instalá-lo em nosso sistema. Não entendi tudo isso. Vamos continuar criando um novo aplicativo React. Vá para a área de trabalho. E aqui, vamos criar um diretório raiz. Causa da reação. Clique com o botão direito aqui em Nova pasta. Reaja, traça, cause, pressione a tecla Enter. Técnicas. Ao nomear seu projeto, sempre use um nome descritivo que indique o propósito do projeto. Então, você quer ser capaz de reconhecê-lo no futuro. Parece bom, lindo. Então, abra rapidamente o VS Code. Vamos fechar esta página de amostra. Agora, o próximo na fila é arrastar e soltar a pasta no VS Code. Novamente, feche a página de amostra e maximize o VS Code. Vamos abrir o terminal integrado do VS Code. E eu vou fazer Control Back Tick. Você pode ver que o Ártico também está localizado no canto superior esquerdo do teclado, logo abaixo da tecla de escape. Se o atalho não funcionar para você, tudo o que você precisa fazer é ir até o topo e depois dominar o novo terminal. Você clica nele, ele se abre para você. Direto no terminal. Temos que criar um novo aplicativo React. E p x Create React app. O aplicativo React será instalado em um diretório chamado Klein's. E você também pode decidir mudar o nome desse diretório. Mas eu recomendo fortemente que você use o cliente de convenção simplesmente porque o React js tem a ver com o front-end, que implica a parte de interface do usuário do aplicativo. Você também pode limitar o front-end desta forma. Então, isso também é convencional. Tudo bem? Mas, para mim, vou usar o aquecimento convencional na tecla Enter para continuar. A instalação do React está em andamento. E isso definitivamente levaria algum tempo. Então, eu só tenho que acelerar a palestra. O React foi instalado com sucesso. Para continuar, precisamos entrar no diretório do cliente onde instalamos o React js. Então, vou fazer C, D, tecla de impacto de Klein para continuar. O próximo passo é iniciar o servidor de desenvolvimento front-end. E eu vou fazer npm, começa a apertar a tecla Enter para que ela seja acionada. E, a propósito, MPM significa simplesmente Node Package Manager. Na tela está a página do React London. E, por padrão, ele está sendo executado na porta 3.000 do localhost. Então, agora terminamos a instalação. Na próxima palestra, começaremos a revelar o padrão do React. Isso é tudo por enquanto e até a próxima palestra. Mantenha o foco e sempre tome cuidado. 6. 6 placa de cozimento: Nesta palestra, vamos revelar o Comando B padronizado do React para abrir o Explorer também, precisamos fechar o terminal. Então você precisa clicar no ícone aqui no lado direito da tela. Mas para mim, vou retomar o controle. Abra o diretório do cliente. Aqui está? Vamos continuar com o arquivo package.json. Aqui está? O arquivo package.json é onde todas as dependências ficarão todas as dependências relacionadas ao front-end. Por aqui. Temos recursos visuais reagidos e 0.2 instalados. Logo abaixo. Temos a cúpula do reator. A cúpula de reagentes é usada para trabalhar com o módulo de objeto do documento no navegador. Aqui temos os scripts do React sobre os sinais vitais da web. E aqui embaixo temos os roteiros. E na palestra anterior, fizemos com que o MPM começasse a inicializar o servidor de desenvolvimento front-end. Logo abaixo, temos a visualização. Quando fazemos o npm run build, ele superará os ativos estáticos das implantações. Então, quando quisermos implantar um aplicativo no servidor, definitivamente usaríamos o visualizador. Aqui. Nós temos o teste. Sob ejeção. Ejetar é necessário quando você deseja ejetar do Create, React, app e personalizar seu web park. E aqui temos a configuração das faixas ES, que ajuda a destacar alguns possíveis erros em seu código. Por fim, temos o navegador compatível menos usa o arquivo package.json. Vamos continuar com o registro do pacote. Aberto. Os hubs de registro de pacotes para instalação estável de sua porta de dependências. Não temos nenhum negócio aqui, mas também temos que falar sobre isso. Aqui temos o arquivo Redmi dot md, que ajuda na documentação. Por exemplo, você terminou de criar seu aplicativo. Assim, você pode acessar o ponto Redmi vazio encontrado para documentar os processos envolvidos. Então, vamos revelar rapidamente as pastas. Abra o público, certo. No diretório público, temos o arquivo index.html, o logotipo e o arquivo JSON do ponto de manifesto. O arquivo JSON de ponto manifesto é usado para Progressive Web App que, por enquanto, não é relevante para o propósito deste curso. Então, como iniciantes, temos que nos concentrar no HTML do ponto de índice. E aqui está. Isso é tudo por enquanto e até a próxima palestra. Mantenha o foco no cuidado holístico. 7. 7 Como reagir funciona sob o capô: Nesta palestra, entenderemos o fluxo do react como um aplicativo de página única, que implica como o React JS funciona nos bastidores. Abra rapidamente o comando B do index.html para abrir o explorador. Clientes públicos e nebulosos no índice HTML. Vamos abrir o index.js e o aplicativo. Prossiga para a fonte, qual é o índice SRC dot js aqui, está? Por fim, precisamos abrir o comando B do app js para fechar o Explorer. Vamos começar com o index.html. Role para baixo. Eu quero que você anote esse div com o id de root. É extremamente importante. Na verdade, esse div com o id da rota serve como um contêiner para o aplicativo empire. Vamos para o index.js. O index.js é o ponto de entrada de cada aplicativo React. Para obter a melhor explicação. Antes de prosseguirmos, vamos fazer downgrade do aplicativo para o react 17. E então eu termino com a explicação. Vamos fazer com que ele reaja, comendo diretamente nas linhas para destacar que o cliente o apagou. Por aqui. Destaques, limpe-os. Além disso, temos que destacar novamente o Comando X para colocar uma vírgula aqui e colar. Então, temos que tirar o ponto e vírgula, os colchetes desse outro colchete aqui. Então, temos que remover a raiz. Vamos usar a cúpula do reator para copiar e colar aqui, ninho. Só precisamos marcar o modo estrito. Linda. Agora, conseguimos fazer o downgrade do aplicativo para o react 17. Tudo o que eu quero que você faça nesta palestra é ficar quieto e prestar a máxima atenção à minha explicação. Vamos continuar entendendo como o React JS funciona nos bastidores. Na parte superior, temos o React importado do módulo React. Abaixo. Temos o React DOM do react ao módulo. O React DOM ajuda a unir a cúpula de baixo nível do HTML com a cúpula de alto nível do React. E também a cúpula do React tem um método chamado render. E o método aleatório usa dois parâmetros. O primeiro parâmetro são os elementos, que neste caso são um elemento de reação a ser renderizado. O segundo parâmetro é um JavaScript básico, que é document.getElementById. E diz: Ei, vou vincular com o elemento DOM no HTML. Precisamente. Um elemento DOM repentino com o id de raízes. E esse elemento DOM com o id das raízes é encontrado diretamente no arquivo HTML. Então, o que reage às portas é injetar o primeiro parâmetro no elemento DOM com o id das raízes. Simplificando, tudo o que você tiver aqui como primeiro parâmetro será passado para o nó raiz do DOM. Ele vai ficar bem dentro desta div. E o mais importante, o index.html é a única página salva no navegador para exibir o que você passa como primeiro parâmetro no nó raiz do DOM. Tudo bem, então essa abordagem de renderizar componentes em uma única página e alterar a cúpula exabyta o comportamento de uma única página. Portanto, podemos dizer que o React js é usado para criar um aplicativo de página única. Deixe-me dividi-lo de volta ao índice j. Então, aqui, vou retirar o componente do aplicativo como primeiro parâmetro e apagá-lo. Então eu vou ter uma etiqueta na cabeça, certo? Estamos na etiqueta principal. Eu vou fazer. Agora, vamos salvar o aplicativo para ver o que acontece. Seguro. Boom. Você pode ver a cabeça, uma tag é exibida no navegador. Então, quando inspecionamos o elemento. Clique com botão direito em Inspecionar Aqui, você verá o arquivo index.html, que é a única página salva no navegador. Então, vamos tentar abrir o corpo. Ao abrir o corpo, você verá a div com o id da raiz. Então, vamos abrir rapidamente esse D. Você pode ver a cabeça de uma tag sendo injetada diretamente nesta div com o id da raiz. É tão simples quanto isso. Entendido, lindo. Vamos fazer isso mais uma vez. Ela, certo? Então, tudo o que você tiver aqui como primeiro parâmetro será injetado corretamente, entre o div com o id das raízes e o diff com a ideia de raízes está localizado aqui no index.html. Portanto, o index.html é a única página salva no navegador para exibir o que você injetou entre o dv. E é por isso que, ao inspecionar o console, você verá a cabeça de uma tag entre a div com o id de uma raiz. Melhor explicação: ficar bom. Linda. Então, novamente, volte para o índice de código VS dot js. Então, vamos limpá-lo e trazer de volta o componente do aplicativo. E, a propósito, o componente do aplicativo é importado na parte superior. E quando você salva no navegador, boom. E você vai ver a página de Londres. Vamos revelar o aplicativo de volta ao VS code up dot js. E aqui nos objetos temos um div com o nome da classe do nosso aplicativo. E temos um pastor aqui. Temos a tag IMG que descreve esse logotipo aqui que está girando continuamente na tela. Temos a tag p. Aqui, não é? Por fim, temos a tag a. É isso mesmo aqui. Então, aqui temos o corpo, e aqui está o div com o id da raiz. Vamos abri-lo. Você pode ver que ao abrir o div com o id de root, você verá outro div com o nome da classe up. Aqui está? Vamos abrir a div. Vamos ver o cabeçalho com o nome da classe do cabeçalho do nosso aplicativo. E aqui está. Vamos abrir o cabeçalho. Portanto, temos o restante do conteúdo, como a tag IMG, que descreve o logotipo. Temos a tag p. Você pode ver? E por último, temos que a tag a é tão simples quanto isso. Vamos rapidamente trazer o aplicativo de volta para react 18 index.js. E então só temos que desfazer. Agora, atualizamos o aplicativo novamente para reagir. 18 é exatamente a mesma dor. O componente do aplicativo está aqui como o primeiro parâmetro e passará por essa linha de código para o div com o id da raiz do cabelo. E você deve sempre lembrar que o div com o id de root é divertido aqui no index.html. E o index.html é a única página que é salva no navegador para exibir qualquer conteúdo que você injetar entre essa div e pronto. Isso é tudo por enquanto. Nos vemos na próxima palestra. Mantenha o foco em sempre cuidar. 8. 8 jsx: Nesta palestra, vamos entender os GSAs. Então, vá rapidamente para o comando P do aplicativo Js para abrir esta pequena caixa de pesquisa na parte superior e, em seguida, definir para AARP dot j está aqui, não é? Se o atalho não funcionar para você, tudo o que você precisa fazer é navegar até o Explorer e abrir o mix para abrir o SRC do cliente. E então aqui está. Fechou o explorador. Linda. Então, na tela, temos uma função que retorna uma parte da interface do usuário. Então, tudo o que você vê aqui se chama DSS. Dss significa simplesmente JavaScript XML. É uma extensão de sintaxe do JavaScript usada para definir o significado e a estrutura do seu conteúdo da web. Portanto, eles podem parecer familiares com HTML, mas não é HTML. O que você vê na tela é chamado de GSAs. Uma das diferenças entre HTML e Jesus é o atributo do nome da classe. Em HTML, é uma classe. E aqui no Jess's, é um nome de classe simplesmente porque class é uma palavra-chave reservada em JavaScript. Então, toda essa maquete aqui define a página de Londres, que compreende o logotipo, a tag p e a tag a. Deixe-me te mostrar rapidamente. Voltar ao código VS. Aqui está a tag IMG que descreve o logotipo. Estou aqui, está logo abaixo? Temos a tag p. É isso mesmo aqui. E por último, temos a tag a aqui. Está de volta ao código VS? Então, quando eu tentar excluir tudo, diretamente nesta div, vamos experimentar um novo comportamento. Vou destacar desde a tag de cabeçalho de abertura até a tag de fechamento. Limpe-o. Seguro. Esse é o novo comportamento. A tela está em branco simplesmente porque excluímos as expressões GSS que definem a página de Londres. Voltar ao VS Code. E também temos que excluir o div com o nome da classe do nosso aplicativo. Queremos fazer tudo do zero. Então, aqui vamos ter uma etiqueta principal e depois uma palavra de olá, salve no navegador. Ei, não é? Quão lindo é isso? Então, a tag principal aqui descreve o HelloWorld que você vê aqui no navegador. É tão simples quanto isso. Volte ao código VS e vamos continuar. Agora, deixe-me dar uma olhada na França aqui em alguns pontos-chave que você deve ter em mente ao usar GSAs. Todos esses pontos-chave que quero compartilhar com você são extremamente importantes. Ponto. O número um é que você só pode ter um elemento de invólucro principal em Jesus. Então, quando você faz algo assim, por exemplo, vamos ter uma hashtag e eu vou fazer. Meu nome é Barbara. Portanto, isso definitivamente geraria um erro. Ao salvar e conferir o navegador, você verá a reclamação. Diz que acabei de enviar Jesus. Os elementos devem estar embrulhados em uma etiqueta anexa, o que implica que você não pode ter Jess fora de outros GSAs. Então, a única maneira de fazer isso é embrulhar todo o Jesus em um elemento pai. Então, vamos ter um DV aqui. Então. Vamos destacar, mantenha pressionada a tecla Alt no teclado, toque na tecla de seta para cima para movê-la para dentro. E, como você pode observar, o erro desapareceu. Vamos manter o código limpo. Linda. Finalize a compra, o navegador, tudo está funcionando conforme o esperado. Eu adoro isso. Volte aqui. Então, esse dv aqui serve como elemento pai. Portanto, você não pode ter elementos de gestos fora dos elementos JSX principais. Então, quando eu faço algo assim, por exemplo, quando eu tenho um div aqui, ele gera um erro. Acabei de enviar Jesus. O elemento deve estar embrulhado em uma etiqueta anexa. Portanto, isso simplesmente implica que todas as expressões de gestos devem ser agrupadas em um elemento pai. Então, por enquanto, esse div é usado como elemento pai. Só temos que movê-lo como se isso fosse tão simples quanto isso. Ponto número dois. atributo de classe em HTML é substituído pelo nome da classe em GSAs, simplesmente porque class é uma palavra-chave reservada em JavaScript. Então, vamos tentar dar a esse div um nome de classe. O nome da classe é container. Salvar. No navegador. Tudo está funcionando perfeitamente bem. Então, vamos inspecionar rapidamente o console. Comando I para abrir o console. Você pode ver que está tudo bem? Voltar ao código VS. Então, vamos tentar substituir o nome da classe classe save no navegador. Aqui está o aviso em uma classe de propriedade DOM válida. E fez uma pergunta. Você quis dizer o nome da classe? Sim. Queremos dizer o nome de uma classe. Então eu tenho que voltar e depois salvar. Confira. Vamos atualizar o console. Tudo está funcionando perfeitamente bem. Ponto número três. Até agora, seu Gmail foi substituído por HTML4 em Jesus. E também for é uma palavra-chave reservada em JavaScript. Então, quando tentamos implementar algo assim, aqui, teremos um rótulo. E vamos especificar o atributo for, equa, nome de usuário. Então, isso funciona para HTML. E quando você o experimentar no GSAs definitivamente receberá algum aviso no console. Inválido, não propriedade quatro. Venha aqui. Temos que mudar isso para dois, HTML4. Então, isso resolverá o problema. Seguro no navegador. Atualize o console. Está tudo bem. Ponto número três, em Jess, o botão ao clicar na parte superior, os atributos do índice serão escritos em teclas de vírgula, que simplesmente implica que você coloca em maiúscula a primeira letra de cada palavra , exceto a primeira palavra. Então, vamos supor que queremos implementar um botão aqui. Em seguida, temos que especificar sua própria camarilha. Se você notar, perceberá que o onclick também está escrito em caixa de carma. Nós o colocamos entre colchetes de um colega. Então, é assim que se implementa o OnClick nos GSAs. Para recapitular, a classe em HTML é substituída pelo nome da classe em GSAs. Pois o HTML é substituído pela história e, portanto, no jazz, o manipulador de eventos onclick no Jessie's é escrito em teclas de vírgula e também é dito para um colchete de colega. Então, aqui você pode chamar qualquer uma das funções que você definiu no aplicativo. Vou acabar com isso por enquanto porque no futuro vamos tratar o manipulador de eventos em De Dios, limpá-lo. E, por último, você não pode ter aspirações de GSS fora dos elementos principais. Portanto, todos os gestos expressões que você terá ao criar sua interface de usuário serão agrupados em um único elemento principal. Então, temos que movê-lo para dentro. É isso. Isso é tudo por enquanto e até a próxima palestra. Mantenha o foco e sempre tome cuidado. 9. 10 tipos de componentes: Agora terminamos com o JSX. Mas é extremamente importante, você sabe, esses, se eu quiser fazer um comentário sobre os gestos, expressões, como faço isso? Tecnologia, por exemplo, quero fazer um comentário sobre a história. Como posso conseguir isso em GSAs? Portanto, os atalhos para fazer isso são selecionar com precisão os elementos do GSS sobre os quais você deseja colocar um comentário. E nesse caso, vou colocar um comentário na tag H2. Então você só precisa selecionar. Deixe-me te mostrar novamente. Selecione e, em seguida, pressione a tecla de comando no teclado e, em seguida, toque na barra. E isso colocará exatamente um comentário na expressão de Jess que você selecionou. Se você notar, perceberá que tudo está embrulhado em colchetes de Ecoli aqui, ok? E bem , entre colchetes, você poderá usar os comentários de várias linhas. Portanto, este é o comentário inicial de várias linhas. Aqui está o comentário final de várias linhas. Então, em termos simples, para usar comentários em Jess, você precisa colocá-los em um colchete. Então, quando estiver dentro de um colchete, React js o tratará como expressões de JavaScript. Agora você pode usar os comentários de várias linhas nele. Portanto, o mesmo se aplica se você quiser remover o comentário, destaques. Mantenha pressionada a tecla de comando toque na barra. É tão simples quanto isso. Mesmo que você queira fazer um comentário sobre todo o Jesse, é exatamente o mesmo processo. Vamos supor que eu queira fazer um comentário sobre tudo, não seria o elemento pai. Então, eu só tenho que destacar assim, mantenha pressionada a tecla de comando na parte superior. A barra frontal é tão simples quanto isso. Além disso, se você quiser remover os comentários, destaque, mantenha pressionada a tecla de comando pressione a barra. Então, é exatamente assim que os comentários circulam nos GSAs. Vejo que você gostou dessa palestra. Mantenha o foco no cuidado holístico. 10. 9 Comentário em Jsx: Anteriormente, falamos sobre competência e garantimos que os componentes são reutilizáveis e também podem ser aninhados dentro de outro componente. E agora a questão é: como a competência se traduz em código em nosso aplicativo? A maneira mais simples de definir um componente é escrever uma função JavaScript simples. No React G, temos dois tipos de reclamações. Empresas de componentes funcionais e de classe. Componentes funcionais ou função JavaScript. Mas aceite as sondas como argumento e, em seguida, retorne um GSAs válido, cujo sentido eletrônico é a maquete que descreve a interface do usuário. Simplificando, a sintaxe ficará assim. Essa função é um componente funcional de reação válido simplesmente porque aceita um único argumento de objeto de sonda com dados e retorna elementos React. Então, se quisermos fazer a mesma coisa usando o componente de classe, a sintaxe ficará assim. Do ponto de vista do React. Os dois componentes acima são equivalentes, mas somente esse componente de classe geralmente é irregular. Classes Es6 que mancham uma classe competente da biblioteca React. E deve ter um método aleatório que retorne o de Jess, que por sua vez descreve a interface do usuário. No entanto, neste curso, continuaremos com a empresa funcional simplesmente porque é extremamente fácil raciocinar sobre ela. E também o componente de classe está gradualmente desaparecendo. A maioria das empresas agora está reescrevendo o aplicativo com um componente funcional. Então, definitivamente precisamos seguir as tendências. Usando o componente funcional. Não precisamos nos preocupar estado porque, com a ajuda de ganchos, não poderemos usar o estado e outros futuros do React sem escrever uma classe. E os ganchos foram introduzidos em 2018. Técnica de conferência React. Ao nomear seus componentes, sempre use a convenção anterior de condimentos, que implica que você coloca em maiúscula a primeira letra de cada palavra. Então, por exemplo, os componentes domésticos serão escritos assim. Quando você o chama assim, React js, vamos tratá-lo como um parque de cúpula. Linda. Mas a questão é que um código de componente geralmente é escrito em um arquivo JavaScript com uma extensão dot js ou extensão dot CSS. Mas neste curso, continuaremos com a extensão dot js, por exemplo , os componentes domésticos serão escritos assim. Componentes domésticos dot. Tudo bem, então isso é tudo por enquanto. E na próxima palestra, continuaremos criando nossos primeiros componentes funcionais de reação. Nos vemos na próxima palestra. 11. 11 Como criar nosso primeiro componente funcional: Vamos continuar criando um componente funcional. Para continuar, precisamos criar o diretório de componentes. Abra o cliente. Dentro do SRC. Temos que clicar com o botão direito do mouse e depois em nova pasta. E eu vou chamá-lo de componentes. Observe que eu usei uma palavra plural aqui. É simplesmente porque teremos muitos componentes, certo, dentro do diretório desse componente. Portanto, deve ser uma boa prática nomeá-la com pleura road pizza na tecla Enter. Em seguida, estamos no diretório de componentes. Vamos criar o arquivo de componentes. Clique com o botão direito nos componentes aqui em Novo arquivo. O componente de demonstração mostra a frase de j. Quero que você tome nota do que é convencionalmente usado na nomeação desse componente. É chamada de convenção de nomenclatura Pascal. Isso implica que você coloca em maiúscula a primeira letra de cada palavra. E também quero que você tome nota da tensão. Aqui está o ponto g é pressionado na tecla Enter e menos prossiga com o Comando B para fechar o Explorer. Então, aqui, vamos criar o componente funcional do zero. Então, primeiro, temos que importar o React do módulo React. Por enquanto, isso é opcional. Tudo bem, então, em termos de código, os componentes são simplesmente funções JavaScript. E o nome desse componente é componente de demonstração. componente funcional retorna a marcação JSX, que descreve a interface do usuário. Vamos ter um div, certo? Dentro da div, teremos uma etiqueta principal e eu vou dar um olá muito. Assim, é o mais simples. Agora, conseguimos criar nosso componente funcional. O próximo passo é exibi-lo no navegador. Ter esse componente exibido na web. A primeira coisa que faremos é exportar o componente. Então, aqui eu vou fazer a função padrão de exportação, componente de demonstração. Portanto, eu não exportei a função. Precisamos renderizar o componente de demonstração diretamente no aplicativo. G é o Comando P para abrir a caixa de pesquisa na parte superior. E vamos procurar por um. Aqui, não é? Então, aqui vamos dar dois passos. O primeiro passo é importar o componente de demonstração. Então, aqui, temos que importar componentes de demonstração de aspas simples abertas e fechadas, ou você também pode usar aspas duplas. Então, aqui temos que direcionar o diretório em que o componente de demonstração está localizado. Então, para isso, vou fazer componentes de barra de pontos . O componente de demonstração de barra é tão simples quanto isso. Não fiz isso. Temos que renderizar esse componente diretamente na declaração de retorno. Então, o que vou fazer agora é destacar das linhas nove a 13 e apagá-las. Portanto, temos que renderizar o componente de demonstração diretamente entre esse div com o nome da classe do contêiner e, em seguida, fechá-lo. Se não tivermos filhos entre a etiqueta, será muito bom usar a etiqueta de fechamento automático. Então, vou destacar a etiqueta de fechamento, limpá-la diretamente entre colchetes. Vou apenas especificar a barra para frente. Isso é chamado de tag de fechamento automático. Seguro. No navegador. Boom, tudo está funcionando conforme o esperado. E aqui você vê a palavra olá. Olá de novo. Agora, criamos com sucesso os componentes funcionais e os exibimos na web. Parabéns. Isso é tudo por enquanto e até a próxima palestra. Mantenha o foco no cuidado holístico. 12. 12 tipos de exportação: Ax6 fornece duas maneiras diferentes exportar módulos de um arquivo, que incluem a exportação padrão e a exportação nomeada. Ao observar a tela, você perceberá que exportamos esse componente como uma exportação padrão. Tudo bem, então a exportação padrão nos permite exportar um módulo e especificar qualquer nome para esse módulo sempre que você quiser importá-lo. Portanto, como exportamos o componente de demonstração como exportação padrão aqui, poderemos nomeá-lo com qualquer coisa. Tudo bem, então vamos pegar, por exemplo eu vou limpar isso e depois vou fazer componentes de grade. E aqui também temos que fazer o mesmo. Temos que renderizar grades, componentes, caixas. Tudo está funcionando conforme o esperado. Portanto, isso só pode funcionar quando você usa a exportação padrão. Outro ponto importante que você deve ter em mente é que há apenas uma única exportação padrão por módulo. Então, aqui, certo, neste componente, não poderemos mais ter uma exportação padrão. Você só pode ter uma exportação padrão em um módulo. Parece bom, Beautiful. Agora, a próxima fila é a exportação nomeada. A exportação nomeada é útil para exportar vários valores. E durante a importação, você poderá usar exatamente o mesmo nome para se referir ao valor correspondente. Deixe-me te mostrar rapidamente. Então, aqui, se quisermos usar a exportação nomeada, tudo o que precisamos fazer é destacar o padrão aqui e depois apagá-lo. Isso foi transformado em exportação nomeada. Então, quando você salva no navegador, aqui está a reclamação. Está tentando dizer que o componente da grade não existe. Volte para o VS Code, vá para o aplicativo js. E então temos que usar exatamente o mesmo nome do módulo. E aqui, o nome do módulo é componente de demonstração, direto para o aplicativo. Portanto, para trabalhar com a exportação nomeada, precisamos colocar exatamente o mesmo nome entre colchetes. Aqui mesmo. Vamos ter um colchete encaracolado. Então eu vou limpar isso. Certo? Dentro dos colchetes universitários, precisamos importar com precisão o módulo pelo nome, e o nome é componente de demonstração. Feito isso, também precisamos importar o componente x hat aqui, destacá-lo, apagá-lo e, em seguida, farei o componente de demonstração. Confira no navegador. Tudo está funcionando conforme o esperado. Eu adoro isso. Tudo bem, então, para recapitular, ao usar a exportação padrão, você não conseguiria especificar nenhum nome para comer quando quisesse importá-lo. E você só pode ter um módulo de par de exportação padrão. Em comparação com as exportações nomeadas, onde podemos exportar vários valores de um módulo. Durante a importação, você poderá usar exatamente o mesmo nome para se referir ao valor correspondente. Isso geralmente ocorre em uma palestra síncrona. Mantenha o foco no cuidado holístico. 13. 13 adereços: Viemos agora para falar sobre talvez sem mencionar os componentes. No início das palestras anteriores, aprendemos que esse componente permite que você divida as interfaces do usuário em segmentos independentes e reutilizáveis. Então, agora, eu quero que você pense em cada segmento de forma isolada. A questão é: se os componentes estão separados uns dos outros, como passamos as informações do Componente a para o Componente B? Aqui, como aquele Lee, é onde entram as sondas. Então, o que exatamente é talvez, talvez signifique propriedades. É um objeto que armazena o valor de um atributo de ataque. E talvez também permita que você passe dados de um componente para outro. Precisamente de um componente principal para um componente secundário. Anote esses pontos-chave. adereços são imutáveis, o que simplesmente implica que seu valor não pode ser alterado. Não entendi tudo isso. Vá para o VS Code, que é menos prático, pois é mais rápido. Vamos nos livrar rapidamente da etiqueta principal. Prossegue para o componente do aplicativo. Por aqui. Só preciso mudar o nome da classe para app simplesmente porque quero usar o arquivo CSS padrão. Outro ponto importante que quero que você observe é que as solicitações podem ser passadas para um VGS competente são nossos atributos. Por exemplo, queremos passar dados do componente App para o componente de demonstração. Então, para fazer isso, primeiro, temos que especificar os atributos. Então, vamos supor que queremos passar uma sonda de nome. Então, aqui o atributo será nomeado, atribua um valor a ele. Margarida. Então esse é o atributo. Aqui está o valor em. Tudo isso junto é chamado de sondas. Então, tendo feito isso, conseguimos passar sondas para o componente de demonstração. Mas quando você verifica o navegador, nada acontece. Portanto, você não consegue ver nada no navegador. Você sabe por quê? É simplesmente porque também precisamos receber as sondas, certo? Na empresa de demonstração, voltar ao componente de demonstração do código VS para receber as sondas é muito simples. Tudo o que precisamos fazer é usar uma sonda como argumento, certo, dentro da função. Então, eu vou fazer sondas. Você pode decidir mudar o nome das sondas para outra coisa. Mas eu sugiro fortemente que você use as sondas de conversão porque essa é a convenção amplamente usada entre os desenvolvedores. Então, tendo feito isso, conseguimos receber as sondas aqui mesmo no componente de demonstração. Deixa eu te mostrar. Portanto, esses adereços aqui serão armazenados dentro do objeto props. Deixe-me provar isso para você. Venha aqui. Então. Vamos usar adereços de registro do console. Então, queremos ver o valor que está armazenado dentro desse objeto props. Vá até o navegador. Vamos inspecionar rapidamente o console. Comando Alt I para abrir o console. Ao inspecionar o console, você verá um objeto. Então, vamos abrir rapidamente o objeto. Aqui mesmo. Temos no nome do objeto e do atributo com o valor Daisy. Então, tecnicamente, recebemos as sondas no componente de demonstração. O nest e ln são acessar o valor dos adereços e exibi-lo no navegador. Portanto, se quisermos acessar o valor das sondas, basta direcionar os atributos e, em seguida, o valor será exibido diretamente no código VS. E vamos fazer isso rapidamente. Então, aqui, vou especificar uma tag Hadrian porque quero fazer isso diretamente na tag h1 do cabeçalho. Então, normalmente, vou fazer adereços nome do ponto no navegador. Você verá sondas com esse nome simplesmente porque foram tratadas como testes. Então, para que isso funcione, aqui, temos que pegar os colchetes e, em seguida, realçar o comando X para recortar e colar aqui. Portanto, quando você o coloca em um colchete, o analisador JSON poderá reconhecê-lo como expressões de JavaScript, em vez de uma amostra segura no navegador. Aqui temos Daisy. Tudo bem, então vamos adicionar rapidamente o código VS e adicionar mais atributos ao componente do aplicativo Component Tree. E aqui temos os adereços como nome. Agora vamos ter outras sondas. Como país, atribua a ele o valor Brasil, seguro. No navegador. Você definitivamente verá que eles veem na tela. Mas ao inspecionar o console, você verá o nome Daisy e o país, o Brasil. Então, vamos exibi-lo rapidamente no navegador. Voltar ao componente de demonstração do código VS. E então aqui eu vou fazer props dot country, seguro no navegador. E chegamos aqui, Brasil. Tudo bem, então vamos torná-los mais significativos. Venha aqui, diretamente na tag h1 do cabeçalho. Eu vou fazer. Sou adereços do nome das sondas, daquele país. Seguro no navegador. Eu sou Daisy do Brasil. Que lindos esses. Tudo bem, então vamos continuar. De volta aqui. Agora, passamos com sucesso as sondas de um componente principal para os componentes secundários. Então, para recapitular, ao lidar com sondas, três etapas estão envolvidas. O primeiro passo é enviar as sondas. É verdade Jess tem atributos para o componente filho. E o segundo passo é receber as sondas, tudo bem, usando o parâmetro de uma formulação. E depois disso, temos que exibir no navegador de forma tão simples quanto isso. Ok, agora eu quero que você lembre que os componentes são reutilizáveis. Vá rapidamente até os objetos e deixe-me ensinar como reutilizar esse componente. Reutilize esse componente que vou destacar e duplique-o quantas vezes quiser no navegador. Agora reutilizamos esses componentes, mas sondas. Essa é uma das belezas do React que faz minha cabeça girar. Portanto, outro ponto importante é que o componente reutilizável pode ser reutilizado com propriedades diferentes para exibir informações diferentes, mantidas no código VS, e vamos fazer isso rapidamente. Código Vs. Aqui. Esse atributo também é chamado de propriedade. Quero alterar o valor do atributo. Aqui vou fazer meu objetivo, e meu objetivo é dos EUA. Altere o atributo aqui. Sahel. Sahel é da Índia. E por último, vamos ter uma barra dupla para mim. E eles têm. Baba é do Reino Unido. No navegador. Consegue ver isso? Aqui temos DC do Brasil, Michael da USC, Sahel da Índia. E por último, é uma barra de ferramentas do Reino Unido. Isso exemplifica como o componente reutilizável funciona com sondas. Isso é tudo por enquanto. Nos vemos na próxima palestra. Mantenha o foco no cuidado holístico. 14. 14 Props.children.: Adereços dot jhu drain. Ao olhar de perto, você observará que estamos usando etiqueta de fechamento automático para todos esses componentes. Por quê? É simplesmente porque os componentes não têm filhos. No React, G é um componente com filhos, é sempre identificado por uma tag de abertura e uma tag de fechamento. E as crianças devem ser colocadas entre as etiquetas anexas. Então, digamos que queremos adicionar algumas informações sobre esse cara, incluindo sua foto de perfil. Tudo bem, então o que vou fazer primeiro é limpar a etiqueta de fechamento automático e depois fechá-la com a etiqueta de fechamento real. E aqui está. Portanto, essa é a tag de fechamento usada quando o componente tem filhos. E neste caso, aqui, teremos uma tag p. E certo, dentro dessa tag p, eu vou fazer aqui, nós vamos ter outra tag P. E eu vou fazer por último, vamos ter uma foto de perfil. Para trabalhar com imagens. Primeiro, precisamos importar essa imagem. Portanto, há várias maneiras de fazer isso. Vou fazer o Comando B para abrir o Explorer diretamente no SRC. Vamos criar uma nova pasta. E essas serão imagens capturadas. Então, nessa pasta de imagens, vamos importar a foto do perfil. Então, o que vou fazer agora é maximizar o VS Code. E aqui na minha área de trabalho você verá o diretório de materiais básicos. Clique para abrir. E, a propósito, esse diretório está logo ali na descrição. E aqui está a foto do perfil. Então, vou arrastá-lo direto para o diretório de imagens. Você pode ver que aqui está a foto do perfil. Maximize o comando B do VS Code para fechar o Explorer e , em seguida, também fechar a foto do perfil. Então, logo no topo, temos que importar picos de perfil de. Portanto, temos que direcionar o SRC, diretamente dentro do SRC, temos o diretório de imagens. Dentro das imagens, precisamos direcionar com precisão a foto do perfil. Fotos do perfil, ponto PNG. Acho que isso está correto, certo? Então, vamos verificar isso rapidamente. Comando B. Aqui temos o perfil pigs dot PNG. É extremamente correto. Então, role para baixo e aqui teremos uma tag IMG como RC igual a essa entrada aqui. Então, temos que chamar isso de Import Copy, venha aqui, cole, feche a tag IMG. Ao salvar e finalizar a compra no navegador, você verá as crianças investigarem o porquê. É simplesmente porque também precisamos recuperar rapidamente a heroína das sondas infantis para o componente de demonstração do VS Code. Então, aqui, vamos recuperar as sondas infantis. Então, vamos fazer isso diretamente na tag H2, abrir e fechar o colchete. Então, para recuperar as sondas infantis, tudo o que vamos fazer são adereços, pontos e crianças no navegador. Aqui estão as crianças. Isso é extremamente incrível. Para recapitular. Abra o aplicativo js e, em seguida, tudo o que você tem aqui entre a tag de abertura e fechamento é chamado de sondas infantis. E para recuperar as sondas infantis, tudo o que você precisa fazer é sondar, dots children é tão simples quanto isso. Volte para os componentes do aplicativo. E agora a questão é: que tipo de conteúdo é permitido para sondas, crianças de pontos, o conteúdo passa para um componente, avisos verdadeiros de que as crianças podem incluir o seguinte número booleano nulo indefinido, string, elementos do React, incluindo um RA. Isso é tudo por enquanto. Nos vemos na próxima palestra. Mantenha o foco e sempre tome cuidado. 15. 15 adereços de imutabilidade: Outro ponto importante que devemos observar é que as sondas são imutáveis. E isso simplesmente implica o valor de uma sonda não pode ser alterado. Deixe-me provar isso rapidamente. Abra o componente de demonstração. E aqui vamos tentar reatribuir outro valor ao atributo name. Então eu vou fazer aqui. Props, nome do ponto, equa, Angela no navegador, o aplicativo quebra. Vamos inspecionar rapidamente. O console. Não é possível atribuir somente para leitura o nome da propriedade. Portanto, as sondas são somente para leitura, o que simplesmente implica que o valor de uma sonda enviada de um componente pai não pode ser alterado no componente secundário. E é por isso que quando tentamos reatribuir outro valor ao atributo name, o aplicativo Briggs. Isso é tudo por enquanto. Nos vemos na próxima palestra. 16. 15 suportes de destruição: destruidor de prompts nesta doutrina foi introduzido no EXE, pois é um futuro de JavaScript que permite extrair vários dados de uma matriz ou objeto e, em seguida, atribuí-los às suas próprias variáveis. Uma das vantagens da estruturação é que ela melhora a legibilidade do código. Portanto, no componente funcional, há duas maneiras de desestruturar as sondas, mas vamos escolher a melhor opção, que é desestruturar as sondas dentro do perímetro de uma função. Vamos tentar. Certo? Estamos no parâmetro dessa função, temos que apagá-la. E então tecnicamente entre colchetes. Então, vamos voltar ao aplicativo. Aqui temos o nome do atributo e o país do atributo, certo? Então, voltando, temos que direcionar com precisão esse nome de atributo: país mais calmo, vírgula. As crianças não realizaram essa estruturação. Temos que acessar todos os atributos diretamente. Não precisamos mais das sondas. Então, vou destacar todas as ocorrências de props dot. Em seguida, mantenha pressionada a tecla de comando toque na letra D no teclado. D para cachorro, assim, e depois limpe-o. Pressione a tecla Escape para desativar a edição multicultural. Vamos dar uma olhada no navegador. Você pode ver que tudo está funcionando conforme o esperado? Eu adoro isso. Então, para recapitular, se você quiser desestruturar sondas, isso deve ser feito diretamente dentro do parâmetro de uma função. E para fazer isso, primeiro, você precisa usar um colchete encaracolado. E, à direita, dentro do colchete, você pode então direcionar com precisão o nome do atributo. Então, o que você deve saber é isso. Então, aqui, se você cometer um erro, por exemplo, vamos fazer algo desagradável aqui. Vamos chamar o país desse jeito. Quando você fizer isso, vamos salvar no navegador. Você vai obter um resultado estranho. Olha, o nome é exibido na tela, mas os países desapareceram. Portanto, ao executar essa estrutura em, é necessário direcionar com precisão o nome do atributo. Então, eu só vou desfazer, salvar Bone. Tudo está funcionando conforme o esperado. Eu adoro isso. Isso é tudo por enquanto. Nos vemos na próxima palestra. 17. 16 Função como adereços: No início da palestra anterior, aprendemos como passar adereços de um componente pai para um componente secundário. Agora, a questão é: é possível passar adereços de componentes secundários para um componente principal? E a resposta é não. Você não pode passar sondas diretamente do componente filho para um componente principal. No entanto, você pode passar uma referência a uma função como sondas para o componente secundário. Alguns listrados, certo? Vamos analisá-lo rapidamente para que você possa entendê-lo bem o suficiente. Abra o Explorer. Certo? Estamos nos componentes. Vamos criar um novo componente. O ponto g dos pais está novamente dentro do componente. Também precisamos criar outro componente, child dot js. Lindo, feche o Explorer. Então, eu também tenho que encerrar a demonstração e o aplicativo zomba. Assim como o componente pai, eu vou usar os atalhos RFC para gerar o componente funcional React js. Novamente, se o atalho não estiver funcionando do seu lado, é porque você não instalou o trecho. Para instalar o trecho, vá até as extensões. Clique para abrir. Então, aqui, vamos definir o ESM. Barra de reação, barra redox GraphQL, traço de reação, trechos nativos. Estou aqui. É um clique para abrir? E, do meu lado, eu já o tenho instalado. E é por isso que você vê aqui a votação desinstalada. Então, no final, basta clicar no botão Instalar e depois instalá-lo. Feche-o e também feche as extensões. Agora, o atalho funcionará para você. Muito bem, vamos continuar. Então, dentro do div, teremos uma tag de sucesso aqui. Vou fazer isso como componente principal. Vamos até a criança. G está aqui, não é? Temos que gerar o componente funcional React js, RFC e osso. Linda. Feito isso, vamos definir uma função diretamente nos componentes principais e , em seguida, passar essa função como sondas para o componente filho, componente pai. E vamos fazer isso aqui. Certo? Então, eu vou fazer a função greet parent. Então, certo, dentro dessa função, teremos um diálogo. Aqui mesmo. Queremos dar as boas-vindas aos pais. Portanto, o ninho e a linha são passar essa função como sondas para o componente secundário. Deixe-me te mostrar rapidamente. Portanto, na parte superior, temos que importar componentes secundários com barra de pontos. Então, vamos renderizar rapidamente os componentes secundários. A criança se aproxima com a etiqueta de fechamento automático. Linda. Não fiz isso. Agora podemos passar a função como sondas para o componente secundário. Para fazer isso, precisamos especificar o atributo e atribuir um valor a ele. Mas desta vez o valor será essa função, destaque e depois Copie, venha aqui, cole. Então, esses são os atributos e aqui está o valor. E tudo isso é chamado de sondas. Entendido, lindo. Então, quando você faz isso, conseguimos passar essa função como sondas para o componente secundário. Feito isso, precisamos renderizar o componente principal diretamente no comando P do aplicativo para abrir a caixa de seleção na parte superior. Então eu vou procurar por aqui, não é? Então, só precisamos fazer um comentário sobre todos os destaques desses fogões. Mantenha pressionada a tecla de comando, aperte a barra. Portanto, na parte superior, temos que importar componentes principais do componente de barra de pontos pai. Logo abaixo. Temos que aproximar os pais com a etiqueta de fechamento automático. Salve, volte para os componentes principais. Então, agora conseguimos passar adereços para os componentes secundários. A linha Western é recebê-lo diretamente no componente infantil. Criança. E para fazer isso, basta usar adereços para ele como argumento. E então, quando você consola, registra sondas no navegador ou no Comando I para abrir o console. E também temos que abrir o objeto de adereços. E aqui está a grade de atributos com os pais da grade de funções à medida que seu valor volta. Portanto, o objetivo desta aula é chamar a função que definimos no componente pai aqui de No componente filho. Então, ao clicar em abortar no componente secundário, queremos poder chamar essa função, voltar para entrar em contato. Vamos colocar um botão aqui. E aqui mesmo. Temos que especificar o onclick. Ao clicar do barco. Queremos poder chamar a grade de função de pai. E, claro, você sabe que a grade de funções principal já está armazenada no objeto props. Então agora eu vou fazer adereços, pontos, grades. Então, quando você faz isso, seguro no navegador, este é o componente principal. Aqui estão os componentes infantis. Então, ao clicar nesse botão, queremos invocar a função que foi definida no clique do componente pai. Consegue ver isso? Trabalhar com os pais? Para recapitular, definimos a função aqui nos componentes principais. E depois disso, passamos a função como sondas para os componentes secundários. Então, sempre que fizermos adereços de uma grade de pontos, ela recuperará o valor que é passado para os atributos, que, neste caso, a grade de função é a matriz dos pais. E, finalmente, acionamos a parte inferior especificando o onclick. Ao clicar neste botão. Esta função aqui será ativada. Então, qual é exatamente a vantagem de fazer isso? Tudo bem, então a vantagem de fazer isso é que isso ajuda a melhorar o desempenho. Portanto, ao criar um aplicativo de recompensa, é provável que você se depare com uma situação em que queira usar uma função em diferentes componentes. Tudo bem, então deixe-me te mostrar rapidamente. Abra o Explorer e , em seguida, os direitos dentro do componente. Clique com o botão direito em novo arquivo. E eu vou chamar esses usuários de dot js. Feche o explorador, gere o componente funcional React js. Certo? Dentro desse componente, também queremos fazer uso dessa mesma função. Ok? Então, o que vou fazer agora é primeiro importar os componentes do usuário do usuário com barra de pontos. Temos que renderizá-lo aqui. Aproxime-se com a etiqueta de fechamento automático. Vou especificar as grades de atributos e, em seguida, atribuir a elas um valor, que neste caso é a grade de funções principal para reutilizar como componente. Então temos que receber as sondas. Então, agora, eu só tenho que voltar para a criança e copiar essa parte inferior. Estou aqui. Colar. Vamos dar uma olhada no navegador. Aqui está a navegação do componente infantil e aqui está a navegação do componente do usuário. Então, quando clicamos no botão e no componente do usuário, você pode ver que estamos chamando a mesma função que está definida no componente pai. Além disso, quando clicamos no componente do gráfico, ele funciona exatamente da mesma forma. Portanto, se você estiver criando um aplicativo e quiser usar a mesma função em componentes diferentes. A melhor opção é passar essa função como sondas para o componente que precisa de sementes. É tão simples quanto isso. Vamos voltar para a criança. Outro ponto importante que eu quero que você observe é como passar parâmetro ao chamar uma função definida no componente pai do componente secundário. Então, isso é extremamente importante. Na verdade, aparece principalmente como uma pergunta de entrevista. Então, agora vamos prestar atenção em como fazer isso. Portanto, a maneira mais simples de passar o parâmetro do componente filho para o componente pai é implementando a sintaxe da função de seta. Vamos fazer com que uma função de seta venha aqui. Especifique assim. Então, com isso, poderemos passar qualquer número de parâmetro para a função greet. Deixe-me te mostrar rapidamente. Então, aqui, não seria uma disfunção. Vamos pegar uma corda aqui. Eu vou fazer Eu sou criança. Queremos passá-los como parâmetro para a função principal da grade. Aqui. Temos que incorporá-lo corretamente, dentro da função parental decretada. Então aqui eu vou fazer uma criança. Agora vamos usar a interpolação de strings. Mude para embarcar tick, tock, tick. Vamos usar colchetes. Então, vou fazer uma criança aqui. Vou apenas fazer um comentário sobre eles. Então, depois de fazer isso, vamos conferir o resultado no navegador. Clique no botão. Você vai ver, bem-vindo pai, eu sou criança. E quero que você se lembre de que isso foi passado como parâmetro do componente filho para a função pai da grade. E a função pai da grade é definida nos componentes principais. Então, é exatamente assim que se passa o parâmetro ao chamar uma função definida nos componentes principais do componente secundário. E, por favor, eu quero que você tome nota disso porque aparece principalmente como uma pergunta de entrevista. Isso é tudo por enquanto. Vejo que você gostou dessa palestra. Mantenha o foco e sempre tome cuidado. 18. 17 Estado de reagir (useState): Nesta palestra, vamos entender como o estado funciona no React js. Tudo bem, então vamos supor que você esteja criando um aplicativo e queira manter os dados de um componente que mudam com o tempo. Por exemplo, ao clicar em um botão, você deseja alterar o título do seu aplicativo para outra coisa. Sim, então isso será feito com os ganchos da dívida dos EUA. Menos prático quanto rápido, crie rapidamente um novo componente chamado title Component Command B. Clique com o botão direito do mouse no diretório de componentes aqui em Novo arquivo. O tipo Componentes da ferramenta dot g é gerado. O componente funcional. Aqui está, uma empresa começou depois disso, abriu o aplicativo js e depois vamos executar esse componente aqui. Primeiro, precisamos importá-lo, importar os componentes do título do componente de título da barra do componente. Também temos que fazer um comentário sobre eles. Venha aqui e, em seguida, use o título competente, aproxime-se da tag de fechamento automático vá para o componente do título. Portanto, o objetivo desta palestra é mudar o título do nosso aplicativo quando o botão é clicado. Portanto, para manter dados de competência que mudam com o tempo, temos que fazer uso do Estado dos EUA que olha. Então, logo no topo, só precisamos importá-lo. Pressione uma vírgula aqui, abra e feche os colchetes. E eu vou usar tâmaras. O use that hook é uma função especial que usa o estado inicial como argumento e depois retorna uma matriz de duas entradas. É uma função, então temos que invocá-la. Eu vou fazer assim. E o estado inicial será uma string vazia. Também mencionamos que usamos esse gancho que retorna uma matriz de duas entradas. Então, aqui, vamos colocar const, a vírgula do título, pressionada, atribuí-la assim. Portanto, essa variável aqui é usada para manter o estado inicial. E então esse cara aqui é uma função de configuração usada para atualizar o estado inicial. E nesse caso, teremos o estado inicial React JS. Porque para iniciantes ainda não fiz isso. Vamos exibir o estado inicial, à direita, dentro da tag H1. Acerte um. Vamos ter um colchete e depois só precisamos exibir o estado inicial, que é o título. Cole aqui, Salve. Portanto, essa variável aqui manterá o estado inicial quando você salvar e conferir o navegador. Vamos lá. Você vê isso? Linda? Portanto, a intenção desta palestra é mudar o título desse aplicativo ao clicar em um botão. Aqui, vamos especificar um barco. Aqui. Vou mudar o título. Linda. Aqui está. Então, agora, quando você clica no botão, nada acontece. Vamos implementar rapidamente o onclick. Ao clicar, é igual. Vamos usar uma função de seta aqui. E então temos que invocar a ferramenta de tipo de conjuntos de funções de configuração, que é esse cara aqui. E escreva disposto a definir nossa função, vamos passar para o novo estado. Então, aqui vou fazer, vamos salvar e conferir no navegador. Vamos experimentá-lo clicando no botão Alterar título de barco. Você pode ver que, ao clicar no barco, o título mudou? Vamos recarregar. Você pode ver as chamadas do React js para iniciantes. E quando eu clico na parte inferior, vemos as melhores chamadas do React Hooks. Isso é realmente lindo. E, na verdade, isso é apenas um vislumbre dos ganchos dos EUA Não se preocupe. No futuro? Vamos discutir os ganchos em detalhes. Então, para recapitular, sempre que você quiser lidar com dados que mudam com o tempo, você definitivamente precisa usar os ganchos do Git. O use that hook é uma função que assume o estado inicial como argumento e depois retorna uma matriz de duas entradas. Então, certo, dentro dessa matriz, a primeira variável aqui é usada para armazenar o estado inicial. E então o segundo elemento nessa matriz é uma função de configuração usada para atualizar o estado inicial. Então, quando o botão for clicado, essa função será invocada. E então teremos um novo estado usado para atualizar o estado inicial. Isso é tudo por enquanto. Nos vemos na próxima palestra. 19. 18 Tratamento de eventos: Ao trabalhar em projetos de recompensa, definitivamente o aplicativo terá interações com o usuário. Então, quando o usuário interage com o aplicativo, os eventos são acionados. Por exemplo, clique com o mouse, passe o mouse, pressione a tecla e muito mais. Portanto, lidar com eventos com elementos React é muito semelhante a lidar com eventos com seus elementos HTML DOM. Mas a diferença é que os eventos do React são nomeados usando o caso do karma. Então, por exemplo vamos ter onclick é o de on-click. Além disso, os manipuladores de eventos de reação são escritos dentro dos colchetes. Tudo bem, vamos praticamente abrir rapidamente os direitos de explorador no diretório de competências. Vamos criar um novo componente. E eles serão chamados de manipulador de eventos de clique dot g is RFC para gerar o componente funcional. Aqui, vamos definir uma função. Função. Clique em manipulador. Certo? Dentro da função, vamos consolar o registro Euclid, a ação dos direitos de voto dentro da div. Vamos votar a ação, certo. Portanto, a intenção aqui é ensinar como o evento onclick funciona. Então, diretamente na navegação, vamos especificar o onclick e, em seguida, configurá-lo para equilibrá-lo ao clicar neste botão. Queremos acionar essa função. Então, aqui eu vou apenas fazer o manipulador de cliques. Feito isso, precisamos renderizar esse componente diretamente no aplicativo. Zombarias. Destaques, coloque um comentário sobre eles. Em seguida, teremos o manipulador de eventos de clique mais próximo da tag de fechamento automático. Salve no resultado do navegador e em I para abrir o console. E agora, quando clicamos nesse botão, a mensagem é registrada no console. Vamos tentar. Você pode ver que clicou no botão de ação? Quando você clica novamente, a mensagem é registrada duas vezes. Então, VAP é que Lee sabe como lidar com eventos nos anos do React. Tudo bem, então volte ao código e vamos destacar o erro comum de começarmos a falar sobre o tratamento de eventos. Então, às vezes, você pode gostar de fazer algo assim. Pegando os parênteses. Então, quando você inclui os parênteses, isso se torna uma chamada de função. Vamos ver o comportamento quando você inclui os parênteses. Primeiro, eu tenho que recarregar. Você pode ver que ao observar o console, você perceberá que a mensagem está registrada no console. Portanto, você não precisa clicar no botão para que essa mensagem seja registrada. Você pode ver que, mesmo se você clicar no botão, nada acontece. Por quê? Quando você especifica os parênteses, isso se torna uma chamada de função. Então, quando você salvar o aplicativo e voltar para o console, a função será invocada imediatamente. Atingir. Ok, e agora vamos tentar tirar os parênteses com segurança no navegador. Agora temos que atualizar. Você pode ver que nada está registrado no console. E agora você precisa clicar no botão Ação para registrar a mensagem no console. Ponto a ser observado ao lidar com eventos. Você não precisa especificar os parênteses. Quando você faz isso, ele se torna um manipulador de eventos chamado e não uma chamada de função. Tudo bem, então é só uma função. Vamos limpá-lo. Salve no navegador. Tudo está funcionando conforme o esperado. Para recapitular. O manipulador de eventos no React js é escrito em chaves de karma, o que implica que você coloca em maiúscula a primeira letra de cada palavra , exceto a primeira palavra. Depois disso, você deve configurá-lo para um colchete encaracolado. E bem, dentro dos colchetes, você só precisa passar para dentro. A função é tão simples quanto isso. 20. 19 Rendimentos condicionais: Ao criar um aplicativo do mundo real, você definitivamente se encontrará em uma situação em que precisará renderizar o de Jess com base na condição de configuração. Portanto, temos quatro abordagens diferentes para resolver esse problema. Inclua as declarações if else, a variável do elemento, operador condicional do curtume e os segredos curtos ou o burrito. Mas nesta palestra, vamos usar a abordagem mais confiável e amplamente usada, que inclui curtume, operador condicional e segredo curto ou burrito. O que é prático é que ele abre rapidamente o Explorer, certo? Dentro do componente. Vamos criar um novo componente chamado login do usuário dot js. Gere o componente funcional. Então, dentro da div, teremos um parque de sucesso. E eu vou ser bem-vindo ao projeto de classe. E também teremos outra tag H2. E assim será, você não poderá acessar este projeto. Então, a ideia é a seguinte: se a condição for verdadeira, vamos exibir a cobertura com uma etiqueta e outra. Se a condição for falsa, exibiremos a tag H2. Vamos executar rapidamente esse componente do aplicativo, os destaques do GAS e fazer um comentário sobre ele. Faça asneira. Aqui mesmo. Vamos importar o login do usuário do login do usuário com barra de componentes. Aqui mesmo. Só temos que correr para cá. Aproxime-se com a etiqueta de fechamento automático e volte para cá. Vamos declarar rapidamente uma variável aqui. Então eu vou fazer o login e definir como verdadeiro. Então, vamos prosseguir com a implementação. Então, primeiro, temos que embrulhar isso em um colchete encaracolado Comando X para cortar, abrir os colchetes, vir aqui e colar. Então, agora que vou fazer isso, está logado. É verdade. Vamos exibir a tag H1 e outra. Vamos exibir a tag H2 no navegador. Bem-vindo ao projeto de ED Baba. Então, se mudarmos isso para falso, seguro, dê uma olhada. Você não pode acessar este projeto. Portanto, tudo está funcionando perfeitamente, conforme o esperado. Tudo bem? Portanto, isso é usado para indicar quando a condição é verdadeira. E isso é usado para indicar quando a condição é falsa. Deixe-me ampliar um pouco. Você pode ver que isso é usado para indicar quando a condição é verdadeira. Isso é usado para indicar quando a condição é falsa é tão simples quanto isso. Então, a próxima linha é a abordagem secreta. Portanto, a abordagem shot Secret é usada quando você deseja renderizar algo ou nada. Menos prático, é rápido? Então, primeiro, temos que fazer um comentário sobre esse destaque. Mantenha pressionada a tecla de comando, tab a barra para frente para usar a abordagem secreta de tiro. Então, vamos supor que você queira exibir olá, estou logado quando a condição é verdadeira. E se a condição for falsa, não queremos exibir um etano. Ok? Então, vou colocar os colchetes encaracolados. Então, o que eu vou fazer é logar e por cento, hum, por cento, então vamos ter uma etiqueta na cabeça. E dentro dessa tag, eu vou fazer olá. Estou logado no navegador. Nada acontece. Por quê? É simplesmente porque a condição é falsa. Então, quando você o altera para verdadeiro, seguro no navegador, olá, estou logado. Portanto, a abordagem shot Secret é usada para renderizá-la ou algo ou nada. Então, deixe-me explicar rapidamente como isso funciona. Portanto, a abordagem Shot Secret avaliará primeiro o lado esquerdo para verificar se a condição é verdadeira. E com base no verdadeiro C, o lado direito será avaliado. Então, se estiver logado for falso, o lado direito, nunca seremos avaliados. Reaja, ignorará o lado direito. Simplesmente porque não queremos que nada seja exibido na tela se a condição for falsa. Portanto, não haveria necessidade de avaliar o lado direito. 21. Método de mapa (atribuição de lista): Quando você está construindo um aplicativo React, um dos problemas que você sempre terá que resolver é como exibir uma lista de itens na tela. Por exemplo, você pode ser solicitado a exibir a lista de produtos que os funcionários nos usam, e assim por diante. O React G é a melhor maneira de exibir uma lista de itens na tela usando o método map. O método map permite que você itere sobre uma matriz e modifique seu elemento usando uma função de retorno de chamada. A função de retorno de chamada será então executada em cada elemento da íris. Técnicas. O mapa não é o futuro do React. Em vez disso, é uma função JavaScript padrão que pode ser chamada em qualquer matriz. Vamos ser práticos: é rápido para que todos entendam bem o suficiente? Vá em frente e crie um novo componente. Certo, dentro do diretório do componente. Clique em Novo arquivo. Isso será chamado de funcionário, pelo menos Delta G é genérico, o componente funcional. Vamos fechar o Explorer. Então, aqui, queremos criar uma variedade de funcionários. Os funcionários igualam, abrem e fecham colchetes. E dentro da matriz, vamos ter a vírgula Daisy, vamos ter a vírgula Mike, Joe. E por último, teremos a Angela. Observe que eu usei uma palavra plural aqui. Na verdade, é uma boa prática sempre usar uma palavra plural ao nomear sua matriz. Simplesmente porque uma matriz é uma coleção de elementos com um tipo de dados semelhante. Então, aqui temos vários elementos dentro da matriz. Vamos continuar. Agora, o grande desafio aqui é exibir a lista de funcionários no navegador. Então, normalmente, também podemos fazer isso usando o índice da matriz. Então, certo, dentro dessa div, teremos uma tag H2. Então, diretamente na tag H2, vamos especificar colchetes e, em seguida, escrever dentro desses colchetes, não precisávamos acessar os elementos na matriz. E, claro, para acessar o primeiro elemento na matriz, temos que usar o índice de matriz zero. Então, agora eu vou colocar os colchetes zero para os funcionários. Então, isso vai recuperar o primeiro elemento dessa matriz, realçá-lo , duplicá-lo três vezes. Então, para acessar os segundos elementos, temos que usar a ferramenta de indexação um. E por último, para o índice do quarto elemento três Command P. Vamos para o aplicativo Js. E aqui temos que renderizar as licenças do funcionário. Primeiro, temos que importar a lista de funcionários da barra de componentes de licença de funcionários. E abaixo, só precisamos renderizar um componente aqui e fechá-lo com a tag de fechamento suave. E no navegador aqui. Agora temos a lista de funcionários exibida no navegador. Tudo bem, então essa abordagem pode parecer simples e funcionar bem, sim, mas tem uma grande desvantagem. Deixe-me mostrar rapidamente o código VS e, no mínimo, ao observar a tela, você perceberá que ela envolve repetição de código. Então, vamos imaginar que temos milhares de funcionários, certo, dentro dessa coleção. Então, isso significa que temos que fazer isso milhares de vezes. Teremos algo assim ao atingir o índice certo milhares de vezes. Isso fará com que nosso código seja extremamente barulhento e que seja muito bom. Portanto, seguindo as melhores práticas, precisamos usar o método map para realizar uma titulação na matriz. Tudo bem, então vamos desfazer rapidamente. Linda. Agora só precisamos limpar a etiqueta H2. Vamos começar do zero. O método map é um código JavaScript que precisa ser avaliado, certo? Então, temos que embrulhá-lo em um colchete encaracolado. Em seguida, a linha Nestor deve chamar o método de mapa na matriz. Normalmente, a sintaxe é array dot. Mapa. Então, essas são exatamente as mesmas tags, mas neste caso, o nome da área aqui é funcionários. Então, vou apenas fazer o mapa de pontos dos funcionários. O método map usa uma função como argumento e, nesse caso, uma função de seta. E também a função de seta aceita um argumento que vou chamar de funcionário. Esse funcionário aqui representa cada elemento na matriz. Novamente, você pode decidir mudar o nome desse argumento, mas eu sugiro fortemente que você use um nome descritivo que seja relevante para a matriz sobre a qual você está iterando. É tão simples quanto isso. Tudo bem, então, dentro do corpo funcional, é onde a transformação ocorreria. Então, para cada funcionário, vamos devolver uma cobertura para marcar com o funcionário como uma devolução HTML interna, teremos uma tag H2. E certo, dentro da tag H2, vamos retornar o funcionário como um HTML interno, que é esse argumento aqui que representa cada elemento na matriz, é tão simples quanto isso. Salve no navegador. Aqui, o lindo, esse problema que acabamos de resolver é bem simples. Vamos escolher um cenário mais complexo. Voltar ao código VS. Em uma organização de recompensas. Os detalhes dos funcionários incluirão o nome do funcionário, ID, número de telefone e assim por diante. Tudo bem, então vamos criar rapidamente o objetivo de um funcionário de incluir todos esses detalhes corretamente, entre colchetes. Vou apenas limpar os elementos apertar a tecla Enter assim. Vamos ter um objeto diretamente dentro da matriz. Então, dentro desse objeto, teremos as propriedades e seu valor. E, nesse caso, os detalhes dos funcionários. Vamos separar o nome por uma vírgula. Vamos ter o sexo masculino separado por uma vírgula. Vamos ter um país, Reino Unido. E por último, vamos ter idade. Assim, você pode optar por ter quantos detalhes quiser. Mas para mim, vou parar aqui do lado de fora do objeto. Vamos separá-lo com a vírgula. Agora, vamos destacar e duplicar quantas vezes você quiser. Mas não se esqueça de alterar os detalhes, que são os valores. Então, aqui, eu vou mudá-los. Veja hoje, desculpe. Isso vai ser feminino. Aqui. Vamos fazer 19. Então você só precisa alterar os detalhes para terminar. E eu terminei com o meu. Você consegue ver a beleza? Portanto, essa abordagem não funcionará mais para esse objeto simplesmente porque não estamos mais lidando com cadeias de caracteres. Então, aqui, vou limpar a tag H2 e depois abrir e fechar parênteses, certo? Parênteses. Vamos ter uma tag H2 e escrever uma tag H2. Temos que exibir o funcionário como um HTML interno. E nesse caso, o funcionário aqui representa cada objeto na lista. E para acessar as propriedades, temos que usar o operador ponto. E aqui eu vou fazer o nome do ponto do funcionário. Então, quando direcionamos a propriedade, o valor será recuperado de forma tão simples quanto isso destaca, duplique-o quatro vezes. E temos algum erro aqui. Diz gestos, expressões devem ter um elemento pai. Venha aqui. Vamos ter uma div principal. Então, dentro desta div destaques e, em seguida, mova o código para dentro. Aqui, teremos funcionários, sexo, funcionários desse país. E por último, empregado na idade. Seguro no navegador. Você pode ver que tudo é exibido no navegador funcionando perfeitamente, conforme o esperado. Agora temos a lista de funcionários na tela, mas há outra abordagem para fazer isso em apenas uma linha. E isso é com o uso da interpolação de strings, que são objetos literais , diretamente do código VS. E vamos fazer isso rapidamente. Vamos nos livrar de tudo aqui. Limpe-o agora para que tenhamos que limpar um pouco o código. Perfeito. Então, aqui vamos ter outra tag H2, H2. Vamos usar um aparelho ortodôntico, certo? Dentro dos colchetes encaracolados. Vamos fazer uso da interpolação de strings. Para fazer isso. Nós apenas temos que especificar o chá da casca. E o batik está localizado no canto superior esquerdo do teclado, logo abaixo da tecla Escape. Aqui eu vou fazer o nome. Vamos colocar um sinal de $1, abrir e fechar colchetes. E eu vou fazer o nome do ponto do funcionário. Venha aqui. E aqui vamos ter agenda, pontos de funcionários, gênero. Vamos ter um país, um país para o funcionário. E por último, vamos fazer com que cada funcionária envelheça, salve-a. Tudo bem, então vamos formatar rapidamente esse código com mais bonito. Formate documentos com mais bonito. Acho que o código está bonito agora. Então você pode dar uma olhada. Veja, deixe-me diminuir um pouco o zoom. E aqui está. Dê uma olhada. Consegue enxergar direito? Vamos tirá-lo no navegador. Você pode ver que tudo está funcionando perfeitamente, conforme o esperado? Adoro isso. Tudo bem, então depois do mapeamento, outra coisa que a maioria dos desenvolvedores faz é desestruturar o código. Deixe-me te ensinar rapidamente como fazer isso. Então destrua o código. Vamos vir aqui e então poderemos ter uma função JavaScript normal ou até mesmo um componente. Então, agora eu vou fazer const, abrir e fechar colchetes. Queremos estruturar o nome, a vírgula, o sexo, carma, o país e a idade e, em seguida, atribuí-los ao funcionário real. O mais simples é que, tendo feito isso, não precisamos mais usar o operador ponto para acessar as propriedades. Agora, poderemos acessá-lo diretamente. Venha aqui, selecione o ponto do funcionário e, em seguida, pressione a tecla de comando no teclado. Toque na letra D para selecionar todas as ocorrências do cão dos funcionários. É tão simples quanto isso. Em seguida, limpe-o. Salve, pressione a tecla Escape para desativar a edição multicultural. E no navegador. Eles têm esses lindos. Agora, o código parece mais conciso e mais legível. Eu adoro isso assim. Certo? Portanto, seguir as melhores práticas para a linha de aninhamento é refatorar o código. Ao refatorar o código, quero dizer simplesmente que devemos melhorar a estrutura do nosso código para melhorar a legibilidade e a facilidade de manutenção. Então, a maneira de fazer isso é separar a lógica do componente de apresentação. Vamos fazer isso rapidamente. Portanto, não queremos que toda a lógica seja escrita aqui. Portanto, temos que esconder a lógica em componentes separados. Abra o Explorer diretamente, dentro do diretório competente, crie um novo arquivo e ele será capturado. O ponto j do funcionário é genérico. Os componentes funcionais. Volte rapidamente para o lugar M, pelo menos. Então temos que destacar a partir das linhas 3032, linhas 38, comando X para cortar. Volte para o funcionário, selecione de menos quatro a seis, limpe-o e, em seguida, Command V para colar. Então, feito isso, temos que mapear esse componente, que é a empresa do funcionário, e voltar a empregar uma lista errada. Então, logo no topo, temos que importar funcionário de funcionário com barra de pontos. Logo abaixo. Temos que renderizá-lo aqui. Mais perto estavam as etiquetas de fechamento automático. Portanto, o próximo na fila é passar os DTs como sondas. Então, certo, não seria o funcionário Vamos ter um nome igual. Nome do ponto do funcionário. Vamos ter gênero, gênero de ponto de funcionário. E temos um país igual, funcionários não um país. E por último, temos h igual a um funcionário, ponto h. Certo? Então, só precisamos formatar o código. Linda. Conseguimos passar todos esses detalhes como sondas para o componente de funcionários. Portanto, o próximo na fila é receber as sondas tão rapidamente e ir até o funcionário. Primeiro, temos que recebê-lo passando sondas como parâmetro, diretamente, dentro da função. E depois disso, temos que atribuí-lo às sondas. Seguro. Tire-o no navegador. Certo? Temos uma tela em branco. Ok, volte ao código VS. Tudo parece bem por aqui. Vamos verificar o menor dano causado pelo funcionário, certo? Então, temos que marcar o colchete encaracolado, limpá-lo, vir aqui, limpá-lo e também tirar o ponto e vírgula. Salve no navegador. Eles são, esses. Tudo parece estar funcionando perfeitamente bem. Mas quando inspecionarmos o console, dê uma olhada. Vamos ver esse erro irritante aqui que diz que criança em uma lista deve ter um adereço de chave exclusivo. Vamos fazer isso na próxima palestra. Até lá. 22. 22 suportes chave exclusivos (mapeamento): Tudo bem, então quando você abrir o console, você verá esse erro irritante aqui. E diz que cada criança em uma lista deve ter um adereço único. Para resolver esse problema, basta voltar ao código e especificar a chave. Então, rapidamente, heroína para o código VS. A chave deve ser algo único. No mínimo, vamos procurar uma propriedade que possa ser usada para identificar de forma exclusiva cada funcionário. Então, ao observar a lista, você perceberá que o nome é único. Os funcionários, dentro dessa lista, têm nomes diferentes. Podemos então usar o nome como uma sonda de chave exclusiva. Venha aqui. Eu vou fazer uma chave igual, nome de ponto do funcionário. Ao salvar e conferir o navegador, você vê que o erro desapareceu? Linda. Tudo parece estar funcionando perfeitamente bem, mas não é aconselhável usar o nome como um suporte de chave exclusivo. Por quê? É simplesmente porque, em uma organização de recompensas, provável que você tenha dois funcionários diferentes. Esse B tem o mesmo nome. Portanto, não é apropriado usar o nome como uma sonda de chave exclusiva. Deixe-me te mostrar rapidamente. Aqui temos dois compassos. Então, vamos mudar esse cara para fazer baba, porque em uma organização de recompensas, é provável que dois funcionários tenham o mesmo nome. Então, quando você tiver algo assim, haverá um conflito. Então, usar o nome como sonda chave não vai mais funcionar. Você pode ver que diz e contar até crianças com a mesma chave. É Ababa. As chaves devem ser exclusivas para que o componente mantenha sua identidade entre D. Portanto, a melhor maneira de resolver esse problema é especificar um ID de funcionário simplesmente porque, em uma organização do mundo real, os funcionários devem ter um ID exclusivo. Portanto, cada funcionário tem um documento de identidade diferente. E essa é a melhor maneira de especificar as principais sondas. Venha aqui. Direto na lista. Só precisamos especificar o ID, torná-lo um, destacar, copiar, vir aqui, colar o Mickey para torná-lo três. E por último, faça isso para. Portanto, se você tiver mais funcionários na lista, também poderá especificar seus IDs para corresponder ao número de funcionários. E aqui, vamos alterá-lo para ID no navegador. Vamos atualizar rapidamente o console. Você pode ver que tudo está funcionando perfeitamente, conforme o esperado? Outro ponto importante que quero que você observe é que, ao especificar as sondas-chave exclusivas, isso deve ser feito no nível superior. Volte ao código VS e deixe-me mostrar rapidamente. Se eu deva encerrar tudo na div principal. Destaques. Mantenha pressionada a tecla Alt no teclado, toque na tecla de seta para cima para movê-la para dentro. E então, quando salvamos e voltamos ao navegador, a chave não funcionará mais. Seu carregamento deve, pelo menos, ter um suporte de chave exclusivo. É simplesmente porque as principais sondas devem ser feitas no nível superior. Então, vou apenas destacar e depois cortar. Venha aqui diretamente na div. Cole isso. Tudo bem, só precisamos formatar rapidamente o código. Linda no navegador. Vamos atualizar o console. Você pode ver que tudo está funcionando perfeitamente bem. Isso é tudo por enquanto. Vejo que você gostou dessa palestra. Mantenha o foco. Irrealista. 23. 23 css regular: Nesta palestra, aprenderemos como estilizar componentes do React. Existem várias opções para estilizar o componente React. E essas opções incluem folhas de estilo CSS regulares, CSS embutido, módulo CSS, CSS no componente inicial do GIS e muito mais. Nesta palestra, vamos ficar com os três primeiros, nossa abordagem. E agora começaremos com a folha de estilo CSS normal. Então, rapidamente, dentro do diretório de competências, vamos criar um novo componente. Folhas de estilo irregulares. Dot G é que eu sempre me certifico de usar um nome descritivo em limar meus fogões, para que seja muito fácil para mim me referir a eles no futuro. Feche o Explorer e gere rapidamente os componentes funcionais. Então, certo, dentro da div, teremos uma etiqueta principal e vamos atingir uma tag. Vou aprender como estilizar o componente React. Tudo bem, então vamos estilizar rapidamente a etiqueta principal. Abra o Explorer e crie rapidamente um arquivo CSS diretamente no diretório do componente. Esse arquivo CSS seria capturado. Meus estilos pontilham CSS. Então, depois de criar o arquivo CSS, precisamos estilizar a tag Hadrian. Venha aqui. Primeiro. Para fazer isso. Temos que especificar o nome da classe. Vou chamá-lo de primário. Vá para o arquivo CSS. Aqui, precisamos estilizar o primário, que é o nome do cluster que será usado para referenciar a tag H1. Então, à direita, entre chaves, especifique regularmente o tamanho da fonte. Vamos fazer com que seja 50 pixels, a cor. Vamos torná-lo azul. E por último, só precisamos especificar a família da fonte. E eu vou aumentar a moeda, certo? Portanto, o próximo passo é vincular o arquivo CSS à empresa. E venha aqui logo no topo. Vamos importar a barra de pontos, meus estilos dot css, a mais simples que abre o componente do aplicativo. Portanto, temos que fazer um comentário sobre eles. Rapidamente. Vamos importar. Vamos importar rapidamente folhas de estilo regulares da folha de estilo normal com barra de componentes. Aqui mesmo. Só precisamos aproximar as folhas de estilo regulares com a tag de fechamento automático. Salve no navegador, aqui está, você pode ver isso? Linda? Tudo bem, então outra coisa que você também pode fazer é aplicar condicionalmente uma classe com base em sondas ou estados da empresa. Deixe-me te mostrar rapidamente. Então, aqui, teremos um adereço primário igual. Vamos definir isso como verdadeiro. Feito isso, precisamos receber as sondas diretamente no componente normal da folha de estilo. E fazemos isso tomando sondas como direitos de parâmetro dentro da deformação. Agora, o que eu vou fazer é isso. Vamos ter uma variável chamada className. Então, se props dot primary for igual a true, definiremos o nome da classe como primária e erros. Vamos definir o nome da classe secundário, o ponto mais simples. Então, basicamente, o resultado da operação no lado direito será armazenado nessa variável. E agora essa variável será usada como nome da classe. Virá aqui. Destaca, limpe, abra e feche os colchetes. E então temos que passar o nome da classe, que é esse cara aqui. Então, se props dot primary for igual a true, teremos o nome da classe como primário e, em seguida, estilizaremos o primário. contrário, se for falso, faremos com que o nome da classe seja secundário. Então, tudo isso será armazenado em uma variável constante chamada nome da classe. E então nós o passamos dinamicamente para cá. Então, isso aqui vai ser o primário quando a condição for verdadeira. E será secundário quando a condição for falsa. Volte para o arquivo CSS. Temos que estilizar o secundário. Vou copiar tudo daqui, daqui embaixo. Só precisamos mudar a cor para. Tomate. Aqui. Vamos eliminar a família de fontes. Seguro no navegador e no osso. Você pode ver que a condição é verdadeira? Portanto, vamos estilizar o feixe primário. Então, quando você voltar aqui e alterar a condição para forçar a segurança no navegador, teremos algo assim. Você pode ver o quão flexível ele pode ser? Linda? Portanto, isso é extremamente útil quando você deseja definir um estilo competente com base nas condições. Tudo bem, então o próximo é o CSS embutido. Mantenha o código VS. Vamos criar rapidamente um novo componente chamado inline dot js. Vamos gerar o componente funcional. Para obter os estilos embutidos, basta criar um objeto e aplicá-lo ao atributo de estilo. Deixe-me te mostrar rapidamente. Como sempre, vamos ter uma etiqueta de fone de ouvido. Certo? Estamos na tag principal, eu vou fazer, certo, então, usando o CSS embutido, temos que aplicar o atributo style. Então, aqui eu vou fazer o style equa. Vamos supor o rumo. Ok, então agora temos que criar um objeto esse título e implementar essa cidade interior. Venha aqui. Vou fazer const heading equa, defini-lo como objeto vazio, certo? Dentro desse objeto, temos que implementar esse tamanho de fonte tau. Então, isso é na forma de um par de valores-chave, certo? Então eu vou fazer 100 pixels, mais calmo. Karla, músculo vai fazer tomate. Linda. Então, quero que você observe que o tamanho da fonte está nas teclas de vírgula. Então é assim que os estilos embutidos funcionam GS. Portanto, não precisávamos importar a linha da barra embutida competente. Vamos colocar um comentário sobre o CSS normal. E então temos que aproximar a linha com uma tag de fechamento automático. Salve no navegador. E boom, certo, algo está errado em algum lugar. Este tau não é aplicado na cabeça uma etiqueta. Tudo bem, vamos dar uma olhada na linha n. Opa, há um erro tipográfico aqui. Então, só temos que fazer a correção necessária excluindo o t. Então, isso deveria ser Estilo. Economize e cresça. Tudo está funcionando perfeitamente, conforme o esperado. Uma coisa que quero discutir com você é que, se você quiser estilizar outra, clique em uma tag, algo assim. Vamos criar um problema para marcar desta vez. Vou dar a ele um atributo de estilo. Agora temos que criar outro objeto para a tag H2. Então, aqui vamos fazer uma constante. Vamos chamá-lo de cabeça para dentro. Vamos ter o tamanho da fonte de 50 pixels. Vamos torná-lo azul. Feito isso, temos que aplicar esse tau referenciando-o aqui. Cole, salve no navegador e no osso. Você pode ver? Portanto, ao usar o estilo embutido, você precisa criar um objeto diferente para os atributos que deseja estilizar. Isso é tudo por enquanto. E na próxima palestra, discutiremos o módulo CSS. Nos vemos na próxima palestra. 24. Módulos de 24 Css: Módulos CSS, nossos arquivos CSS nos quais nossos nomes e animações de classe têm escopo local por padrão, o que simplesmente implica que eles não podem ser usados fora de seu domínio. E isso é muito útil para evitar conflitos no CSS. Então, para explicar isso bem o suficiente, temos que usar as folhas de estilo CSS regulares e compará-las com o módulo CSS. Então, abra rapidamente o Explorer e, logo no SRC, temos que criar a folha de estilo CSS regular estilos dot css. E também logo no SRC, agora temos que criar o módulo CSS. E vou chamá-lo de ponto de estilo de meu aplicativo, retirado do módulo de convenção dot CSS. Isso é pelo menos como nomear seu módulo CSS. Então, vamos voltar para a folha de estilo normal, certo? Nas folhas de estilo regulares, teremos uma classe de erro. E vou estilizá-lo especificando a cor a ser vermelha. Simples e curto. Direitos dentro do módulo CSS, teremos uma aula de sucesso. E, claro, a cor vai ser verde. É tão simples quanto isso. Vamos acessar o aplicativo. Zombarias. Os direitos estavam no app.js. Temos que importar a folha de estilo CSS normal, estilos de aplicativos dot css. A linha ocidental é importar o módulo CSS, e a entrada é bastante exclusiva. Então, temos que especificar um nome. Nesse caso, vou chamá-lo de torres de módulos. Portanto, temos que importá-lo da barra de pontos do meu aplicativo, módulo de pontos, ponto CSS. Então, isso é exatamente como importar o módulo CSS. Vamos usar os arquivos CSS. Então, primeiro, vamos fazer um comentário sobre os componentes embutidos. Então, logo abaixo, teremos uma tag H2 cujo nome de classe é error. Então esse nome de classe aqui é esse cara aqui, certo? E então eu vou cometer um erro. Quando você salva no navegador. Você vai ter um erro aqui. Então, vamos implementá-los rapidamente para o módulo CSS. Eu vou ter um aqui para marcar. Teremos o sucesso e, em seguida, especificaremos o nome da classe. Então, o nome da classe será modulus towels socks x. Então, esse estilo de módulo aqui é o nome que usamos para referenciar o estilo CSS do módulo. Então, agora vamos dizer que o módulo tau pontilha a própria classe de sucesso que foi definida. Por aqui. É tão simples quanto isso. Vamos salvar rapidamente e ver qual código você pode ver? Linda. E agora é exatamente aqui que a diversão começa. Volte para o VS squared. Deixe-me mostrar que você acessa o app.js e depois vamos descomentar se o G embutido é seguro no navegador. Esses são os estilos que vêm dos J's embutidos. Sim. Agora deixe-me te mostrar uma coisa. Essa tag h2 é para as folhas de estilo CSS regulares. Então, se eu copiar isso e colar aqui, diretamente na linha, podemos fazer assim. E aqui eu vou setar a partir da linha para que possamos diferenciá-la. Você também consegue ver o erro na linha? Temos o erro do componente do aplicativo. Eu quero que você preste atenção aqui. Volte para o arquivo app.js. E então, quando eu copio o módulo CSS e colo diretamente no CSS embutido, assim. Quando você salva no navegador, encontraremos um erro. E diz que a toalha dos módulos não está definida. É exatamente disso que estamos falando. Módulos CSS, nossos arquivos CSS, cujos clusters, nomes e animações têm escopo local por padrão. Portanto, quando você tem um módulo CSS definido aqui, não pode usá-lo em um componente diferente porque ele tem escopo local. Entendido, lindo. Então, quando o retiramos de forma insegura, você pode ver que tudo está funcionando perfeitamente bem? E a vantagem do módulo CSS é que ele permite o escopo do CSS criando automaticamente um nome de classe exclusivo do formato. Em segundo lugar, os módulos CSS permitem que você use o mesmo nome de classe CSS em um arquivo diferente sem ter que se preocupar com conflitos de nomes. O que exatamente é um grande futuro? Isso é tudo por enquanto e espero que você entenda o que são os módulos CSS. Cuide-se. 25. 25 Entrada de formulário (componente controlado): Nesta palestra, discutiremos como trabalhar com formulários no React JS. Aprenderemos como capturar dados do elemento do formulário e , em seguida, disponibilizar os dados de captura para envio. Em HTML normal. Formulário, todos os elementos são todos responsáveis por lidar com a entrada do usuário e atualizar os valores, respectivamente. Retratado aqui, queremos reagir a uma ferramenta manual e controlar o elemento do formulário. Portanto, esses elementos de formulário cujo valor é controlado e 100 pelo React são chamados de componentes interpretados. Vamos prosseguir rapidamente criando um novo componente no diretório competente. Vamos criar um componente a partir do impute dot js. Gere o componente funcional. Então, eu só vou limpar isso. Vamos ter uma empresa dentro do formulário. Vamos ter um div, certo? Estamos na definição, vamos ter um rótulo. Então aqui eu vou fazer o nome. E aqui vou testar o tipo de entrada mais próximo com a tag de fechamento automático. Então, normalmente, isso é apenas uma imputa básica de HTML. Mas no React, temos que converter essa entrada em imputos controlados. Então, para fazer isso, temos que seguir três etapas. primeiro passo é importar o gancho usado e declarar a variável de estado que controlará os períodos de formação. Então, vamos importar rapidamente o gancho dos EUA. E aqui temos que declarar as variáveis de estado a serem usadas. E nesse caso, teremos custos, certo? Estamos na matriz, teremos a vírgula de nome, a função de configuração que será usada para atualizar o nome. Portanto, o estado inicial será uma string vazia. Oi, tudo bem, então, depois de fazer isso, vamos exibir o valor dinamicamente. Aqui. Eu vou valorizar. Opa, dê uma olhada. Isso deveria ser um nome. E aqui vamos fazer o nome. Vamos abrir a mistura de componentes do aplicativo para colocar um comentário sobre todas essas coisas aqui. No topo. Temos que importar dos imputos, dos componentes, barra de imputa. Logo abaixo. Temos que fazer isso, se formarmos colegas com segurança no navegador e boom, aumentá-lo um pouco assim. Bom. Então, esse é o navegador que temos. Mas, por enquanto, quando você digita no campo de texto, nada acontece. Por quê? É simplesmente porque precisamos especificar o onchange para atualizar o valor quando o estado muda diretamente no código VS. Ao mudar um núcleo. Vamos assumir uma função restrita aqui. Temos que chamar a função setName para atualizar o estado inicial. Portanto, o onchange dará acesso aos eventos e, com a ajuda do objeto de evento, vamos pegar o novo valor que o usuário digitaria. Para obter o novo valor, faremos eventos, pontos, alvos, valor em pontos, que é o valor atual que você está digitando nos detalhes visualizados. Esse valor aqui atualizará o estágio inicial. Seguro, e vamos tentar. Difícil agora, meu mouse está no campo de entrada, e eu vou fazer isso Ababa. Tudo está funcionando perfeitamente, conforme o esperado. Então, para entender como o onchange funciona, precisamos registrar o nome no console. Então, aqui, vou fazer o nome console.log seguro no navegador. Então, vamos inspecionar rapidamente o console. Agora mesmo. Não temos nenhuma dor, certo, no campo de entrada. Além disso, o console está vazio. Portanto, presume-se que temos uma string vazia. Então, quando eu digito algo assim, você pode ver que agora temos E no console e temos E aqui, diretamente no campo de entrada. Você pode ver exatamente assim que o evento onchange é acionado para chamar a função de configuração para atualizar o estágio inicial. Portanto, essa é a função de configuração que será usada para atualizar o estado inicial. E com a ajuda desses eventos, poderemos pegar o que o usuário está digitando no campo de entrada e usá-lo para atualizar o estado inicial. O mais simples é que eu falo demais. Então, vamos continuar. Vamos declarar rapidamente mais variáveis de estado, destaques e duplicá-las duas vezes. Vamos alterá-los para o endereço. Temos que definir o endereço. E isso vai ser distorcido. Diz q. O estado inicial desse campo terá o React js assim, ok, porque queremos torná-lo mais parecido com uma caixa de seleção. Então venha aqui. Destaques dos comprimentos 102 linhas 18. Duplique-o duas vezes. Tudo bem, então, para isso, vamos mudar isso para endereço. O valor será endereço, que é o estado inicial. Então, temos que ligar para o endereço. Venha aqui. Então, aqui, as coisas vão mudar. Gostei das linhas 29 a 35. Agora vamos ter um nível diferente de direitos dentro da gravadora. Eu vou fazer escala. Teremos uma seleção. Direitos dentro do seletor. Teremos as opções, especifique o valor. Reaja. Então, aqui eu vou fazer o React. Destaques do Js, duplique três vezes. Aqui eu vou ter Angola. Então, aqui vamos ter visto anos assim, certo? Por fim, também precisamos especificar o onclick. Então, à direita, selecione e especifique o valor. O valor será escalado, que é o estado inicial. Então, o onchange será igual a, vamos usar uma função anônima aqui, que dará acesso ao evento. Em seguida, chamaremos a função sets Q para atualizar o estado inicial. E então vamos direcionar e pegar os novos imputados. Alvo do ponto E, valor do ponto. Simples assim. Quando você salva no navegador, vamos ver se a opção de seleção está funcionando. Você consegue ver a beleza? Tudo está funcionando perfeitamente bem. Eu adoro esses. Tudo bem, então, por último, temos que especificar o botão para enviar a empresa. Certo? Onde fazemos isso agora? Ok, vamos ter outro div aqui. Logo nesta div, teremos um tipo de botão de aparafusamento que será enviar , valor. Enviar. Aqui, vamos fazer uma bomba segura. Tudo está funcionando bem. Certo? Finalmente, temos que definir uma função para a navegação. Vamos subir rapidamente. E então, como tentamos aqui, const, handle submete um coro. Aqui vamos levar um evento para nossa função. Portanto, para evitar a atualização automática da página, precisamos chamar a opção de previnas como padrão. Então, eu vou fazer EV para evitar a inadimplência. E, finalmente, quando o botão é clicado, queremos que o valor no campo de entrada apareça na caixa de diálogo de alerta. Então, aqui vamos fazer uso da interpolação de strings. Primeiro, temos o nome, temos o endereço e, por último, temos a habilidade. Certo? Então, agora temos que invocar essa função corretamente, dentro da empresa. Para fazer isso. Primeiro, precisamos especificar o onsubmit. E então eu vou lidar, submeter. Os dados mais simples. Quando você salva no navegador. Vamos dar uma olhada. Ok, eu reajo. Então, vamos clicar no botão enviar. Dê uma olhada. Você pode ver que a entrada aparece aqui na caixa de diálogo de alerta? Então, para recapitular, ao criar um formulário no React JS, você precisa converter o formulário em componentes controlados. E para fazer isso, primeiro, você precisa importar o gancho Did dos EUA e, em seguida, declarar as variáveis de estado necessárias a serem usadas. Depois disso, você precisa especificar a entrada e, em seguida, tomar o estado inicial como valor. Então, tendo feito isso, temos que especificar o onchange mais alto, certo? Então, vamos formatar o código. Linda. Você pode ver que isso é pelo menos como trabalhar com formulários em anos de React. Isso é tudo por enquanto. Nos vemos na próxima palestra. Mantenha o foco no cuidado holístico. 26. 26 Reaja o fragmento: Nesta palestra, vamos discutir fragmentos. Um padrão comum no React é um componente retorne vários elementos. Portanto, fragmentos nos permitem agrupar uma lista de elementos infantis sem adicionar um nó extra à cúpula. Vamos entender isso bem o suficiente com um exemplo. Então, rapidamente dentro do diretório do componente, vamos criar um novo pacote chamado Fragments demo, frog demo. E logo na demonstração do sapo, criaremos um novo componente chamado fragmento de demonstração. Clique com o botão direito em Novo arquivo. Fragmentos de demonstração estão nos pontilhando. Gere o componente funcional. Pressione a tecla Escape para desativar a edição multicultural. Então, aqui, eu vou limpar isso. Vamos substituir o div por uma tag Hadrian. Agora, vou destacar o comando D do div para selecionar várias vezes o div e apagá-lo. E agora vamos pressionar a tecla Escape novamente para desativar a edição de Monte Carlo. Aqui mesmo. Vamos ter um exemplo de fragmentos. Tudo bem, então deixe-me te mostrar uma coisa. Aqui. Vamos ter uma etiqueta na cabeça novamente, batimentos cardíacos. Vamos fazer isso dessa maneira. Você pode ver que, se observar a tela, perceberá que o aplicativo está reclamando. E quando você passa o mouse sobre ele, ele diz gestos, as expressões devem ter um elemento pai. Portanto, a demanda do aplicativo, devemos agrupar a expressão GSS em um elemento pai. Tão rápido, vamos fazer isso aqui, div. Vamos dar a esse div um nome de classe de container. Destaques. Pressione a tecla Alt e toque na tecla de seta para cima para movê-la para dentro. Linda. Salve, vamos renderizar rapidamente um componente no aplicativo. G é rolar até o topo. E aqui, vamos importá-los ou fragmentos dos fragmentos de demonstração do componente slash frog demo slash. Logo abaixo. Faça um comentário sobre isso. Vamos renderizá-los como fragmentos. Aproxime-se com a etiqueta de fechamento suave. Certifique-se de salvar o aplicativo. E no navegador. Boom, você pode ver que tudo está funcionando perfeitamente bem, conforme o esperado. Mas quando você inspeciona os elementos, clique com o botão direito do mouse em Inspecionar. Deixa eu te mostrar uma coisa. Abra o corpo e os direitos. Dentro do corpo, você verá uma div com o id das rotas abertas Logo dentro dessa div, você verá outra div com o nome da classe do nosso aplicativo. Vamos abrir. E também dentro desse div, você verá outro div com o nome da classe container. Olha, temos muitos nodos parentais aqui, e isso pode diminuir o desempenho do nosso aplicativo. Tudo bem, então quando você abrir o div aqui com o nome da classe do contêiner, você verá a tag H2. Mas o problema é esse div com o nome da classe do contêiner é necessário para encerrar os gestos e expressões. Tudo bem, então ele serve como o nó principal. Ou seja, Jess tem elementos. Mas o problema aqui é que temos muitos elementos parentais aqui. E isso pode diminuir o desempenho do nosso aplicativo. O que vamos fazer agora é remover esse div. Portanto, a única maneira de fazer isso é com o uso de React Fragments. Heroína para VS Code. Abra o fragmento de demonstração. Então, temos que limpar o diferencial. Você pode ver que o aplicativo está reclamando? Agora, o que vou fazer é substituir o div pontos, fragmentos e destaques do React. Pressione a tecla Alt em seu teclado. Toque na tecla de seta para cima para movê-la para dentro. E não se esqueça, temos que formatar o código. Linda. Então, vamos inspecionar o elemento. Você pode ver aqui, você verá um div com o nome da classe do app. Anteriormente. Dentro desse div, você tem outro div com o nome da classe container, que é salvo como um nó extra. Mas agora não temos amostra aqui. Portanto, os nós extras que foram adicionados sumiram. Essa é exatamente a beleza do React Fragments. Ok, então isso ajuda a remover nós extras e melhorar o desempenho do seu aplicativo. Então, vamos dar outro exemplo rapidamente. Abra o Explorer. Certo, o sapo não faria uma demonstração? Vamos criar um componente chamado minha tabela dot js, genérico, os componentes funcionais. Então, vamos substituir o div por uma tabela. Certo? Estamos na mesa, teremos o corpo da mesa, bem dentro. Vamos ter a linha da mesa. Então, dentro da linha da tabela, teremos os dois pontos da tabela. Mas, nesse caso, a coluna será mantida em um componente separado. Rapidamente, vamos criar o novo arquivo de demonstração do componente de coluna Racket construct, meu ponto de coluna js RFC para gerar o componente funcional, feche o Explorer. Então, à direita nesta div, teremos os dados da tabela. E aqui eu vou ter destaques de habilidades, duplicá-los. Então, aqui eu vou ter o React js. Então, vá para o componente do aplicativo. Temos que renderizar minha mesa. Primeiro, basta fazer um comentário sobre isso. Estragar tudo. Vamos importar minha tabela de uma demonstração competente do slash frack slash my table. Na parte inferior. Temos que renderizar minha tabela G mais próxima com essas tags de fechamento automático. Salvar. Feito isso, temos que renderizar os componentes da coluna corretamente, dentro do zero, que é a linha da tabela. Então, primeiro, temos que importar minha coluna da minha coluna. Obviamente, está no mesmo diretório. Então, aqui temos que tornar meu cólon seguro. O navegador e o osso. Aqui está lindo? Novamente, vamos inspecionar rapidamente os elementos. Abra o corpo. O div com a ajuda de raízes. Temos outro div com o nome da classe AB. E então temos a mesa, o corpo da mesa, o papel da mesa. E agora temos um nó extra que é adicionado à árvore, que é essa div aqui, aberta. E certo, dentro dessa div, temos os dados da tabela. Então, ao inspecionar o console, você verá uma flecha irritante ali. Você pode ver que diz Validate DOM nesting TDI não pode aparecer como filho de um Div. Deixe-me te mostrar em uma coluna. Você vê esse cara aqui. Ele não pode aparecer como filho de um div. Portanto, a única maneira de resolver esse problema é substituir o div por um fragmento. Agora, vamos vir aqui, comandar D para selecionar todas as ocorrências de DV, apagá-las e eu vou fazer fragmentos de pontos de reação. Seguro. No navegador. Temos que atualizar o console. Par. Olha, o erro desapareceu. Isso não é lindo? Alto? Adoro isso. Tudo bem, deixe-me levá-lo aos elementos. Venha aqui. Agora, quando você inspeciona os elementos, o nó extra que foi adicionado à árvore DOM desaparece. Então, aqui temos o teorema do corpo T e o TD. Você pode ver que esse é exatamente o ponto que você deve observar ao trabalhar com uma tabela. Portanto, o TDI não pode aparecer em um div. Em vez disso, temos que colocar os elementos td em um React Fragments. O mais simples feito. Há uma sintaxe mais curta que você pode usar para declarar fragmentos. E a sintaxe é assim. Você só precisa selecionar o Comando D do fragmento de pontos do React para selecionar todas as ocorrências e apagá-las. Portanto, a tag vazia que você vê aqui é outra forma de escrever React Fragments. Quando você salva no navegador, o resultado parece exatamente o mesmo. Portanto, os pontos-chave que eu quero que você observe é que, ao usar a tag vazia como um React Fragments, você não pode passar os principais atributos para comer. Os principais atributos só podem ser passados com fragmentos de pontos do React. Deixe-me te mostrar rapidamente. Você pode ver que o atributo chave é o único atributo que pode ser passado para um fragmento de pontos do React. Então, quando você faz algo assim, usando a tag vazia como fragmento, isso não vai funcionar para você. Portanto, os pontos principais a serem observados são que chave é o único atributo que pode ser passado para um fragmento. E, no futuro, eles podem adicionar algum suporte para a adição de atributos. Por enquanto, a chave é o único atributo que pode ser passado para o ponto número dois do fragmento de reação. Fragmentos declarados com sintaxe explícita de fragmentos de pontos do React são o único tipo de fragmento que pode assumir os principais atributos. Então, isso é tudo por enquanto. Nos vemos na próxima palestra. Mantenha o foco em sempre cuidar. 27. Introdução aos hooks: O que exatamente são ganchos e por que é importante aprendê-los? Tudo bem, então o que realmente precisou de ganchos? Antes de prosseguirmos? Quero ter certeza de que você já conhece os conceitos básicos do React js. E você está familiarizado com tópicos como componente funcional, solicitações, estados, mapas, controle, imputação e assim por diante. No entanto, se você é um novato, eu sugiro que você faça minhas chamadas individuais do React js para iniciantes, a fim de se equipar com os conceitos básicos do React e depois voltar aos ganchos e continuar com os nossos. E agora vamos começar. O que exatamente está enganado no React G é que os ganchos são uma edição próxima do sistema React 0.8, o que nos permite fazer uso de recursos de estado e ciclo de vida sem escrever uma classe. Tudo bem, então isso implica que seremos capazes de nos conectar ao estado React, fazer uso de todos os futuros do estado em componentes funcionais. Na verdade, usando o React Hooks, você pode obter exatamente os mesmos resultados que obteve usando o método do ciclo de vida. E você pode fazer isso com um código menor. Nódulos tecnológicos. O React Hooks funciona somente com componentes funcionais. Agora a pergunta é: o que precisou de ganchos? E por que é importante saber quem é o ponto número um? Anteriormente, quando o reacts foi criado. Para trabalhar com classes, você precisa entender claramente essa palavra-chave em JavaScript. E se você estiver familiarizado com o script java, você saberá que eles em JavaScript não funcionam exatamente como em outras linguagens. No entanto, quando se trata de React Hooks, você não precisa se preocupar com esses Key Rod. Por quê? É simplesmente porque queremos continuar a usá-lo. Parece bom. Linda. Ponto número dois. Você sempre terá que vincular o evento ao componente da classe. Mas com a introdução de ganchos no componente funcional, não há mais vinculação de métodos. E isso é, claro, um grande alívio. Ponto. Número três. As aulas misturam recarga a quente, muito pouco confiável. Simplesmente porque eles não se minimizam muito bem. Tudo bem, então as aulas misturam recarga quente, muito instável. O ponto número quatro, ganchos, possibilita criar lógica estável entre componentes sem alterar sua hierarquia de componentes. Anote esses pontos-chave. Você não pode usar ganchos dentro de um componente de classe. Os ganchos funcionam apenas em componentes funcionais. Tudo bem, então os ganchos só podem ser usados em empresas funcionais e são ineficazes dentro do componente de classe. Número dois, os ganchos não contêm nenhuma alteração significativa e são liberados, são compatíveis com versões anteriores. Em resumo, ganchos ou funções especiais que nos permitem conectar-se aos estados do React e aos futuros do ciclo de vida a partir de componentes funcionais, por exemplo, eles usam esse gancho como um gancho que permite adicionar dois componentes funcionais do estado de reação. Hooks permite que você se conecte futuros do React sem escrever uma aula. Com o uso de ganchos. Você não precisa mais se preocupar com essas palavras-chave. E, finalmente, nos permite reutilizar a lógica de estado. Agora, limpamos o conhecimento do que é o React Hooks. Vamos analisar isso de forma prática na próxima palestra. Isso é tudo por enquanto. Faça bem em se inscrever. E nos vemos na próxima palestra. Ainda focado em sempre cuidar. 28. 27 useState de estado: Vamos prosseguir com os ganchos usados usando-os praticamente. Crie rapidamente um novo aplicativo React e dê a ele um nome descritivo. Por exemplo, você pode decidir chamá-la de prática de basquete. Do meu lado. Eu já o criei. Então, vamos continuar com o VS Code. Abra os clientes do Explorer. Certo? Estamos no SRC. Vamos criar o diretório de componentes. Certo? Dentro do componente, vamos criar um novo arquivo chamado counter dot js. Gere os componentes funcionais. Perfeito. Tudo bem, então vamos falar sobre o uso dos ganchos. Eles usam que o gancho é uma função especial que assume o estado inicial como argumento e, em seguida, retorna uma matriz de duas entradas. O primeiro elemento na matriz é usado para armazenar o estado inicial. O segundo elemento na matriz é uma função de configuração que aceita os argumentos usados para atualizar o estado inicial. Vamos implementá-lo rapidamente para ter um conhecimento claro do que estou falando. Para prosseguir. Primeiro, temos que importar os usted que vêm aqui mais uma vírgula aqui, abrir e fechar o colchete. E eu vou fazer ustedes assim. Como eles podem usar esse gancho é uma função especial, certo? Então, temos que invocá-lo assim. Essa função assume o estado inicial como argumento. E neste exemplo, o estado inicial será zero, o que retornará uma matriz de duas entradas, const array. Então, vamos ter cones, coma, setCount, atribua assim. Essa sintaxe aqui é chamada de estruturação RE. É o futuro do ES6 aqui. O primeiro elemento nessa matriz é uma variável usada para armazenar o estado inicial. Portanto, o segundo elemento é uma função de configuração que aceita um argumento usado para atualizar o estado inicial forma tão simples quanto essas técnicas. O estado inicial pode ser um número, booleano, uma string ou uma matriz. Ok, então todos eles podem entrar aqui dentro desse parâmetro. Vamos exibir rapidamente a contagem no navegador. Então, certo, estamos no GSAs. Vamos usar nosso pacote de hedge one para exibir os colchetes de abertura e fechamento da conta. E então vamos fazer referência ao estado inicial, que é a contagem válida. Esse cara. A mistura mais simples de salvar pontos para executar seu aplicativo no terminal. Portanto, antes de prosseguirmos para o navegador, precisamos renderizar esse componente no aplicativo. G está aqui. Temos que selecionar a tag do cabeçalho de abertura, a tag do cabeçalho de fechamento. Bem no topo. Vamos importar cones de cones de barras de componentes de barra de pontos. Então, vamos administrar a conta aqui. Mais uma vez, o mais simples é garantir que a obrigação seja cumprida com segurança. No navegador. E osso. Você pode ver aqui o estado inicial da aplicação do contador. Vamos torná-lo mais bonito agora. Vou fazer aqui, é perfeito? Portanto, a intenção desta palestra é mudar o estado inicial do nosso aplicativo de conteúdo quando o botão é clicado. Então, para isso, temos que especificar uma votação, certo? Quais são os passeios de barco? Vamos especificar o botão onclick, onclick desse botão. Vamos invocar essa função de configuração. Então, aqui eu vou fazer a contagem de conjuntos. E então a função de configuração aceitaria um argumento que será usado para atualizar o estado inicial. E neste caso, o argumento será a cláusula de estados iniciais, o novo valor desse t. Deixe-me arrastar isso para baixo. Frequência cardíaca, e isso é uma chamada de função. Temos que convertê-lo em uma função de seta. Exatamente assim. Salve no navegador e no osso. Vamos experimentá-lo clicando no botão Alterar barco. Consegue ver isso? Perfeito. Essa é Lee, é a intenção. Para recapitular. Se você quiser fazer uso desses dados, o React G é o primeiro, você precisa importar o uso que quem se importa espera. E depois disso, você tem que invocar o gancho dos EUA e depois passar no estado inicial como argumento. Então, tendo feito isso, você deve atribuí-lo a uma matriz de duas entradas. E estamos nessa matriz, temos os primeiros elementos como uma variável usada para armazenar o estado inicial. E o segundo elemento é uma função de configuração que aceita um argumento usado para atualizar os estados iniciais. E neste caso, o argumento aqui são os estados iniciais mais um. Tudo bem, então, pela primeira vez, os componentes são renderizados. Em vez disso, a variável é criada e inicializada como zero. Agora, quando você clica no botão, o segundo método será invocado, que aumentará a contagem atual em um. Portanto, invocar o método setColor fará com que os componentes sejam renderizados novamente. E depois disso, as contagens conterão o valor atual que será exibido no navegador. Então, é tão simples quanto isso. Há duas regras de impotência a serem consideradas ao usar o React Hooks. Regra número um ganchos só podem ser capturados no nível superior. Portanto, não chame ganchos dentro de uma condição de loop ou funções aninhadas. Regra número dois, os ganchos só podem ser chamados dentro da função React. Isso é tudo por enquanto e até a próxima palestra. Mantenha o foco no cuidado holístico. 29. 28 estado de atualização com base no valor de estado de vigência: Nesta palestra, aprenderemos como definir o estado com base no valor do estado anterior. Além disso, discutiremos a diferença entre esse exemplo e o exemplo anterior que fizemos. Então, aqui nesta palestra, vamos demonstrar como incrementar, diminuir e até mesmo resetar o contador. Então, vamos fazer isso rapidamente. O diretório de componentes não seria? Vamos criar um novo componente chamado contador para gerar os componentes funcionais. Então, vamos importar rapidamente o uso desse gancho. É uma função. Temos que invocá-lo e, em seguida, tomar o estado inicial como argumento. E nesse caso, o estado inicial será zero, como de costume. E isso retorna uma matriz de duas entradas, certo? Então, eu vou fazer uma matriz aqui. Teremos que contar. Em seguida, temos a função de configuração para atualizar os estados iniciais de atribuição da placa. Isso simplificou nosso direito. Então, tendo feito isso, vamos passar rapidamente para o GSS. Vamos usar a tag Hadrian para exibir a corrente. Feito isso, temos que implementar o conselho Haynes. Primeiro, vamos ter aqui incrementos como duplicação três vezes. Aqui vamos ter um decréscimo. E aqui vamos fazer redefinições. Exatamente assim. Eu especifico o onclick. Executou uma função de seta. Vamos invocar as contagens definidas e, em seguida, passar a contagem inicial mais o novo valor. A mesma coisa aqui. Então, eu vou copiar, comparar, colar. Então, a diferença é que isso vai ser uma produção. Para o reset. Temos que declarar uma contagem inicial variável, constante . Igual à Zara. clicar neste barco, queremos redefinir as contratações do balcão. Então, eu vou fazer algo assim agora. Vamos resumir isso em um div. Mova-o o mais rápido possível para formatar o código. Perfeito, veja, sempre que eu formatar o código, você obterá um recuo adequado. Aqui, vamos especificar o OnClick. Portanto, temos que definir os valores para a corrente inicial. Ok, então, depois de fazer isso, abra o aplicativo. E aqui temos que importar a tatuagem de contador de barras competente para renderizá-la aqui. Desde a obrigação. Vamos pressionar os comentários sobre a corrente, que é o exemplo anterior. Confira no navegador. Você pode ver? Então, vamos tentar clicando na equipe de perfuração incremental. Que lindo. Ok. Diminuições, incrementos, incrementos, decréscimos, reinicializamos. Tudo está funcionando perfeitamente, conforme o esperado. Portanto, a intenção desta palestra é atualizar o estado com base no valor do estado anterior. Então, volte para a câmera dois. Vamos demonstrar esse exemplo com a equipe de perfuração incremental. E depois disso, você pode implementá-lo com o resto do botão. Ao clicar neste botão, chamaremos uma função de incrementos. E essa função seria definida na parte superior. Vamos ter incrementos constantes, defina-os para nossa função. Então, aqui, vamos definir contagem para contar mais um. Salve no navegador. E tudo ainda funciona perfeitamente como esperado, certo? Então, vamos direto ao problema agora. Vamos supor que, dentro dessa função, queremos incrementar a contagem em dois. Portanto, é mais fácil fazer algo assim. Só temos que duplicá-los e depois fazer com que seja assim. Ao salvar no navegador, atualize, clique no embarque incremental. Você pode ver que tudo está aumentando em um. Mas olha, esperávamos que esse aplicativo fosse incrementado em dois. Mas agora no navegador, nós o temos incrementado em um. Parece que não está funcionando bem. Portanto, essa é uma das desvantagens ao usar CMS mais um nos anos do React. Então, deixe-me explicar isso bem o suficiente. Ao analisar isso de perto, você perceberá que estamos atualizando o mesmo estado várias vezes. Como resultado, o react agregará todos esses dados em um único lote e os executará uma vez. Então, mesmo que façamos isso 1 milhão de vezes, deixe-me mostrar assim. Salvar. Eles também serão incrementados em um. Portanto, o React agregará todos esses dados em um único lote e os mais agudos. Portanto, você pode não ver os efeitos do que fez aqui porque isso deveria até ser incrementado pelo MSE 123456. Então, isso deveria ser incrementado em seis, mas olha, são incrementos em um. Portanto, essa é a desvantagem de usar count plus one e react. E agora a questão é: por que reagem se o estado encarna? Não se preocupe Eu lhe darei a resposta para esta pergunta no final desta palestra. Então, vamos resolver esse problema rapidamente. Para resolver esse problema, precisamos passar uma função anônima que tenha acesso ao valor do estado anterior. E agora a sintaxe terá uma aparência diferente. Defina contagens. Então, certo, estamos nessa função, vamos fazer contagens anteriores, configurá-la como nossa função, então teremos aqui contagens anteriores mais um, ok, destaques. Duplique-o. Então, ao fazer isso e acessar o navegador, recarregue, atinge o incremento comprado e vê que ele é incrementado em dois. É tão simples quanto isso. Você vê isso? Agora o aplicativo está funcionando conforme o esperado? Confie em mim, está realmente funcionando conforme o esperado. Aqui, passamos uma função que tem acesso ao valor do estado anterior e a incrementamos em um. Portanto, também podemos incrementar em cinco. Deixe-me mostrar a você duplicata, duplicata, duplicada, segura. No navegador. Temos que recarregar incrementos em cinco. É tão simples quanto isso. Então, por exemplo, você deseja incrementar todos esses topos em dez. Então você vai ter uma repetição de código como esta. Eu não gosto disso. Então, vamos fazer algumas causas de desidratação aqui. Agora vou fazer por let i igual a zero. Eu é menor que dois e depois eu mais, mais assim. Então, aqui vamos ter a função set. Então, imediatamente, teremos acesso ao valor do estado anterior. Em seguida, o valor do estado anterior mais um. Salve no navegador, atualize-o nos incrementos. Você pode ver que é incrementado em dois. Quando você vem aqui, você faz cinco. Salve no navegador, atualize. É incrementado em cinco. Então, isso nos leva de volta à pergunta: por que o estado de atualização de reação incorpora? Deixe-me lhe dar uma resposta. A razão pela qual o react dos emblemas do estádio é simplesmente porque no React js, sempre que o estado é atualizado, o componente será renderizado novamente. Vamos imaginar que temos isso atualizado milhares de vezes. Significa simplesmente que nosso componente será renderizado novamente milhares de vezes. E é isso que afeta o desempenho do aplicativo. Reaja, dê uma olhada e decidi atualizar acabou de ficar em lotes. Então, ele vai agregar todas essas ocorrências e executá-las. Ok, então eu entendo que esta palestra é bem complicada, mas eu sugiro que você reproduza o vídeo repetidamente para guardar sua memória. Isso é tudo por enquanto. Nos vemos na próxima palestra. Mantenha o foco no cuidado holístico. 30. 29 Objeto como variável de estado: Nesta palestra, vamos entender como objeto trabalha com a dívida dos EUA quem trabalha duro, certo? Então, vamos começar. Estamos no diretório de componentes. Vamos criar um novo contador. E eu vou chamá-lo de contador de três pontos g é genérico, o componente funcional. Feche o Explorer. Tão rápido. Vamos importar o uso que conecta conforme declarado as variáveis de estado necessárias a serem usadas. Então, aqui teremos Const Mary usando essa matriz. Vamos ter um conjunto de funcionários em coma, funcionários iguais, certo? Neste exemplo, o estágio inicial será um objeto, certo, para votar nesses objetos. Vamos ter uma coluna de nome, defina-a como uma vírgula vazia. Vamos ter uma coluna de país, defina-a também como uma string vazia. Tudo bem, então o estado inicial aqui é bem diferente das palestras anteriores. Portanto, lidar com o objeto e usar esse gancho envolverá uma nova abordagem. É bem simples, então eu não quero te assustar aqui. Vamos limpar isso. Então, dentro do div, teremos uma tag de entrada e o tipo equa testa o valor. Temos que exibir o valor dinamicamente, nome do ponto do funcionário. Essa imputa será usada para o nome inalterado se o usuário começar a digitar no campo de entrada. Aqui, teremos acesso aos eventos, definiremos nossa função e, em seguida, invocaremos o método set employee. Obviamente, você já deve saber que isso aceitará um argumento que será usado para atualizar o estado inicial. É tão simples quanto isso. Então, quais são os parênteses vamos pegar em um objeto, e vou nomear esse ponto E como alvos, valor do ponto. Linda. Vamos fechar a tag de entrada. Ok, vamos formatar o código. Melhor. Destaques da linha 72, linhas 11. Duplique-o. Então, aqui vai ser o país dos funcionários. Portanto, o próximo item da fila é exibir o nome do local e o país no navegador. E nós vamos ter um div, diretamente dentro do div, vamos ter uma tag p e escrever a tag p. Eu vou fazer. Meu nome é funcionário, nome do ponto, destaques e duplicata serão funcionários. Mas país. Então, aqui vou fazer, sou do país dos funcionários. Portanto, qualquer país que você estiver digitando no campo de entrada aparecerá aqui. Tudo bem, tão seguro. Abra o aplicativo. Sim, temos que renderizá-lo aqui. E eu vou fazer, em parte, comparar três dos componentes, barra vírgula três e também um comentário no Canvas. Então, temos que renderizar a contagem de três pontos que G está mais próxima com a tag de fechamento automático. Salve no navegador. Boom, perfeito. Então, vamos digitar algo no nome. Então, o nome é uma barra dupla. Tudo está funcionando para o nome. Então, quando começarmos a digitar no campo país, perceberemos que, se adicionarmos comportamento, o país será você. Ok? Você pode ver que, ao digitá-lo no campo de entrada, o nome aqui desapareceria. E quando você começar a digitá-lo no Nim FUD, o país aqui vai desaparecer. Então, o que é de perto. Agora você também vê que, quando você começa a digitar no campo de entrada do país, o nome será apagado. Tudo bem, então deixe-me trazê-lo rapidamente para suas anuidades. Ok, vamos fazer isso aqui. Vamos fazer outro div, certo? E nesse div, vamos ter uma tag p, certo? Estamos na etiqueta p. Eu vou fazer JSON dot stringify. Em seguida, temos que referenciar o funcionário com segurança no navegador e no osso. Você pode ver agora que temos o nome e temos o país. Então, quando digitarmos no campo de entrada do nome, ele aparecerá aqui entre a string. E quando entrarmos no país, ele também aparecerá aqui entre essa sequência. Confira. Então, o nome será uma barra dupla. Quando eu digito no campo do país, você vê que o nome desaparece e o país permanece? Portanto, isso acontece simplesmente porque eles usam esse gancho para não gerenciar e atualizar automaticamente o objeto, ao contrário do método set state encontrado no componente da classe. Portanto, a solução para esse problema é usar o operador de propagação para gerenciar e atualizar manualmente o objeto. Deixe-me mostrar rapidamente que é extremamente simples. Então, aqui, temos que espalhar o funcionário assim. Ok? Aqui também, temos que espalhar o funcionário. Portanto, isso ajudará a gerenciar e atualizar manualmente os objetos. O mais simples que quando você economiza. Tudo bem, vamos tentar. Baba. Baba aparece aqui. O país, Reino Unido. O Reino Unido aparece aqui. Tudo está funcionando perfeitamente como espectador. Portanto, para concluir, sempre que você estiver lidando com objetos como uma variável de estado, você precisa usar o operador de propagação para gerenciar e atualizar manualmente o objeto. Isso é tudo por enquanto. Nos vemos na próxima palestra. Mantenha o foco no cuidado holístico. 31. 30 Dispor como variável de estado: Nesta palestra, aprenderemos como usar matriz como variável de estado. Então, diretamente, dentro do diretório do componente, crie rapidamente um novo arquivo chamado hooks. Eles RE clicam com o botão direito do mouse em novos ganchos de ventilador, essa matriz dot g é RFC para gerar o componente funcional. Feche o Explorer. Vamos declarar rapidamente uma variável de estado a ser usada. Mas antes de prosseguirmos, primeiro, temos que importar o gancho usado no nível superior mais uma vírgula aqui. Abra e feche chaves onduladas, ustedes. Agora vamos declarar os itens da variável de estado. Temos que definir itens. E o estado inicial será uma matriz vazia. Ok? Portanto, a intenção desta palestra é adicionar itens a essa matriz. Ok? Portanto, os itens que vamos adicionar a essa matriz virão da entrada visualizada. Portanto, temos que declarar as variáveis de estado para o campo de entrada. Então, vamos imaginar que queremos adicionar os nomes dos funcionários a essa matriz. E eu vou fazer aqui. coma do funcionário iguala o funcionário, seu estado, e o estado inicial será uma sequência vazia. Então, onde quer que tenhamos aqui, será adicionado a esta área. E a questão é: como podemos fazer isso? Não se preocupe, vou te mostrar em um GC. Vamos passar rapidamente para a interface do usuário. Destacar. Esses, limpe-os. Agora vamos ter uma tag H2. E eu vou adicionar funcionário. Logo abaixo. Teremos uma entrada mais próxima da etiqueta de fechamento automático. E então o tipo será o valor do teste. Vamos pegar esse cara aqui, que é essa variável que vai manter o estado inicial. Copie e cole rapidamente aqui. Então, quando o usuário começa a digitá-los no campo de entrada, temos que pegar os valores que ele está digitando. Então, para isso, temos que especificar o onchange. Aqui mesmo. Vamos usar a função de erro. Então, certo, dentro da função de erro, temos que invocar a função de configuração de funcionários definidos. Então, tendo feito isso, a função deles aqui nos dará acesso aos eventos. E com a ajuda desse evento, poderemos segmentar e capturar o valor que o usuário está digitando. Ponto do evento, alvo, valor dos pontos. O mais simples disso. Portanto, a intenção é adicionar itens a essa matriz na camarilha náutica. Então, vamos especificar rapidamente a votação. Direitos de voto usando este barco que vou fazer em itens dentro do barco. Temos que especificar sua própria CLI. Então, ao clicar nesse botão, vamos invocar a função adicionar itens. Vamos definir rapidamente essa função. Chegue ao topo. Portanto, teremos uma adição constante de itens. Defina isso como nossa função. Então, certo, dentro dessa função, vamos invocar essa função de configuração dos itens de um headset. Vamos passar rapidamente os conjuntos de valores para a matriz de itens. E na palestra anterior, aprendemos que a função de configuração não tem a capacidade de corresponder a uma atualização. Ou, no caso da matriz, podemos dizer que a função de configuração não pode acrescentar o item ao final do contrato. Portanto, precisamos lidar com isso manualmente com a ajuda do operador de propagação. Deixe-me te mostrar rapidamente. Tudo bem, então, para definir o item, vamos ter uma matriz e depois distribuir a matriz de itens. Então, por fim, vamos empurrar um novo objeto. Tão simples quanto isso, certo? Estamos nesse novo objeto. Temos que especificar os itens de identificação, pontos e terrenos, porque queremos um ID que seja usado para identificar de forma exclusiva os itens que serão adicionados à matriz. Nome do funcionário. Então, aqui, dentro desse objeto, você pode adicionar quantos dados quiser. Então, por exemplo, se eu quiser adicionar o endereço dos funcionários, basta duplicar a variável de estado e especificar as variáveis e a função setter. Então venha aqui mais calmo. Você pode adicioná-lo abaixo. É mais simples que, depois de fazer isso, vamos mapear rapidamente esses itens. Vamos fazer isso logo abaixo da parte inferior. Eu quero usar a tag UL. Certo? Dentro da etiqueta UL, teremos os colchetes e, em seguida, os itens e o mapa de pontos. O método do mapa. Vamos usar uma função de seta e depois abrir e fechar parênteses. Certo? A função de erro não funcionaria. Vamos passar um parâmetro. Esse parâmetro representa cada item na lista. Então, aqui temos que exibi-lo na tela. E eu vou fazer, vou usar a etiqueta LI. Vamos especificar que a chave seja o ID do ponto do item. E logo, dentro do HTML interno teremos pontos do item, nome, que é esse nome aqui, o ID e o nome. Vamos executar esse componente corretamente, dentro do aplicativo Js. Temos que importar ganchos dessa matriz a partir dos ganchos de barra de componentes. RA, fez um comentário sobre eles? Venha aqui. Render, enganchou, Ira, seguro no navegador. E boom, Beautiful. Vamos dar uma olhada. Aqui. Eu vou digitar. Um bar, tem o primeiro funcionário e eu clico no quadro para ser adicionado. Vamos ter o microfone C boom. Ok, então vamos ter esse nome aqui. Isso é caro ao meu coração, certo? Tudo está funcionando perfeitamente, conforme o esperado. Ensinando bem, Beautiful. Volte ao código VS e deixe-me explicar o que acontece nos bastidores. Então, algo está acontecendo aqui e eu tenho que explicar isso de forma simples para que todos entendam bem o suficiente. Vamos passar para a função. Antes de prosseguirmos, vamos formatar rapidamente o código. Perfeito. Parece limpo e eu adoro isso. Ok, então quando a função Adicionar item é chamada, essa função de configuração é ativada. Então, fazemos uma cópia de todos os itens na matriz usando o operador spread para a lista de itens copiados. Em seguida, acrescentamos um novo objeto. E, ao fazer isso, não estamos sobrescrevendo a matriz original. Na verdade, isso o anexará ao final do contrato. Então, em resumo, ao trabalhar com matriz como uma variável de estado, primeiro, você precisa fazer uma cópia dos itens usando o operador spread. Feito isso, você precisa acrescentar um novo item e passá-lo como argumento para nossa função. Isso é tudo por enquanto. Nos vemos na próxima palestra. Curso cuidadoso e atendimento holístico. 32. 31 Organizar o código: Bem-vindos de volta a todos. Então, nesta palestra, vamos organizar a estrutura de pastas. Abra o Explorer, diretamente no diretório da empresa. Vamos dar uma olhada, criar um novo diretório chamado usted practice. Então, agora vamos copiar todos os arquivos relacionados ao uso que se conecta aos EUA. Praticou comida. Mantenha pressionada a tecla de comando no teclado. Toque para selecionar os arquivos relacionados. Arraste e solte nos EUA. Praticou. Clique em Mover. Perfeito. Portanto, agora temos o diretório e os direitos competentes dentro do diretório do componente. Temos a prática americana, que contém todos os arquivos relacionados ao uso de ganchos do Git. Porque vamos praticar muitos ganchos neste curso. Então, é bom. Organizamos nossa estrutura de pastas. Agora, o problema aqui é que faltarão as entradas. Feche o Explorer. E então vamos ver o que acontece. Direitos na terminologia. Você pode ver que estamos tendo problemas com as entradas. Você pode ver como está certo? Vamos resolver isso rapidamente. Volte para o componente do aplicativo, porque aqui é onde temos quase todas as importações. Então, vamos tirar rapidamente todas essas coisas e depois vamos fazer isso do zero. Como esses. Import Counter from dot slash components slash slash usava seu contador de barras prático. Você pode fazer o resto no final. Não entendo, certo. Então, quando você dá uma olhada no navegador , tudo está funcionando perfeitamente, conforme o esperado. Então, na próxima palestra, começaremos a praticar o uso desses ganchos. Isso geralmente é nosso e nos vemos na próxima palestra. 33. 32 useEffect de introdução: O efeito US é um gancho para encapsular código que tem a ver com efeitos colaterais. E é uma combinação de componente montado, componente e atualização. O componente será montado. componentes anteriormente funcionais não têm acesso ao ciclo de vida do componente. Mas com o esforço dos EUA, você pode explorar os futuros do ciclo. Portanto, podemos dizer que o Use effort hooks permite que você realize efeitos colaterais em seus componentes. Alguns exemplos de efeitos colaterais incluem a busca de dados e a atualização direta da cúpula. Cronômetros. Simplificando, eles usam sintaxe de efeitos que terá a seguinte aparência. Se você quiser fazer uso do efeito dos EUA. Primeiro, você precisa importá-lo na parte superior. Eles usam o efeito como uma função, portanto, temos que invocá-lo. É aqui que Lee é onde a diversão começa. Tudo bem, agora, eu quero que você cruze suas mãos e preste atenção à minha explicação. E, por favor, não se junte a mim na digitação de código. Portanto, o efeito dos EUA é uma função escrita. E aqui invocamos a função. A função usa dois parâmetros. O primeiro parâmetro é uma função que executada após cada renderização. Tudo bem, o que simplesmente implica toda vez que o componente for renderizado, a função será chamada. Portanto, o primeiro parâmetro do efeito US é uma função que é chamada após cada renderização. Esse cara aqui. Ok, deixe-me montar isso para que você possa entender a essência. Esse é o primeiro parâmetro do efeito US, que é uma função que é executada após cada renderização. E o segundo parâmetro é uma matriz vazia, que é amplamente chamada de matriz de dependência. Então, para isso, basta colocar uma vírgula aqui e depois pegar uma matriz vazia. Portanto, esse é o primeiro parâmetro dos efeitos dos EUA. E então esse é o segundo parâmetro dos efeitos dos EUA. Esse cara aqui fica empolgado depois de cada renderização. Então isso é chamado de efeito. Essa função aqui nos EUA, gancho de efeito, é chamada de efeito quando uma matriz de dependência vazia é passada como o segundo argumento para reutilizar o gancho de efeito, significa simplesmente que eles usam efeitos serão executados apenas na primeira renderização. Portanto, sempre que o componente for renderizado novamente, o efeito não será executado. Isso é exatamente o uso da dependência vazia RA. Outro ponto importante é que você também pode condicionar os efeitos usando as sondas ou o valor do estado. E você faz isso passando, certo? Estamos nessa matriz. Na próxima palestra. Quando começarmos as implementações, você definitivamente entenderá isso bem o suficiente. Tudo bem, então isso é apenas um vislumbre do que eles usam. O efeito é. Outro ponto importante que quero que você observe é que o efeito US é definido dentro do componente. E, ao fazer isso, poderemos obter acesso ao estado e sondas sem precisar escrever códigos adicionais. Então, vamos formatar rapidamente esse código e fazer com que ele tenha uma aparência melhor. Perfeito. Então, para recapitular, antes de usar esses efeitos, primeiro, você precisa importá-los no nível superior. O efeito dos EUA é uma função aqui. Então, temos que invocá-lo aqui. E feito isso, o efeito dos EUA aceita dois parâmetros. O primeiro parâmetro é uma função de erro, que neste caso é o efeito. E o segundo parâmetro é uma matriz vazia. Não entendi tudo isso. Provavelmente podemos dizer que o segundo argumento ajuda a produzir efeitos condicionais. Vamos praticamente na próxima palestra? Até lá. 34. 33 Componente fez montar e atualizar: Neste exemplo, vamos criar um aplicativo muito simples que atualiza o título do documento quando o botão é clicado. Então, vamos imitar o componente que foi montado e o componente foi atualizado rapidamente dentro do diretório do componente. Vamos criar um novo pacote chamado user effect practice. Comando B. Para abrir o explorador, clique com o botão direito do mouse no componente, nova pasta. Certo? Estamos na prática de efeitos dos EUA. Vamos criar um novo componente chamado exemplo de efeito: um ponto g é gerar o componente funcional. Então, vamos esquecer os efeitos colaterais por enquanto e vamos criar um contra-aplicativo simples. Importa rapidamente o uso desse gancho. Vamos declarar a variável de estado necessária a ser usada. O estado inicial será um número e, nesse caso, será zero, certo? Dentro do corpo. Temos que mostrar a contagem. E então vamos dar uma volta de barco e clicar neste botão. Vamos atualizar o estado inicial. Então, eu vou apenas clicar. E aqui temos que especificar isso ao clicar. Ao clicar, chamaremos a função setCount. E bem, dentro do parâmetro, vamos considerar o estado inicial mais as novas atualizações. Salve, abra os componentes do aplicativo e menos chove por aqui. Então, vamos importar o exemplo de efeito um da barra do componente usada se, na prática, o exemplo 1 do efeito de barra. Aqui mesmo. Vamos fazer um comentário sobre isso. Vamos renderizar o exemplo de efeito um. Safe on the browser e bone estão certos. Tudo está funcionando perfeitamente bem. Você pode ver? Ok, deixe-me fazer algo lindo. Vamos personalizar esse aplicativo. Então, eu só preciso remover o clique diretamente no HTML interno. E vou indicar com o sinal de mais, salve no navegador e pronto, fique mais bonita assim. Eu adoro isso. Vamos aumentar a bilirrubina. Isso se chama, a intenção desta palestra é atualizar o título do documento quando o botão é clicado. Vamos fazer isso implementando os efeitos de uso. Para implementar o efeito dos EUA. Primeiro, precisamos importá-lo. Eles usam o efeito também como uma função. Então, temos que invocá-lo. Venha aqui, e eu vou usar efeitos. O uso de ganchos AT aceita uma função como argumento que é executada após a renderização do componente. E isso vai ser uma função de erro. Então, a função que é passada como argumento, certo? Nos EUA, se a função de gancho é chamada de efeito, ok? Portanto, nos referimos a essa função como efeito. Então, certo, com os efeitos, vamos atualizar o título do documento. Título do ponto do documento igual. Vamos indicar o que diabos valeu e eu vou fazer. Você clicou em contar vezes. Então, estamos simplesmente passando a contagem aqui. Ok? Quando você salva e volta ao navegador, à direita, vamos clicar no botão de adição. Você vê que, ao observar com atenção, perceberá que o título está atualizado. Quando eu clico, você pode ver, agora diz que você clicou duas vezes. Espero que você possa ver isso. Tudo bem, então, inicialmente o título do documento é lido zero vezes. Então, quando clicamos no botão, isso fará com que os componentes sejam renderizados novamente. E depois que o componente for renderizado, o uso desse gancho será chamado. Clique em Você pode ver e agora clicamos em você uma vez. Clique novamente, você clicou duas vezes. E sem mais nem menos. Então, sempre que eu clico na placa em, o estado é atualizado e o componente é renderizado novamente. Quando o componente for renderizado novamente, isso fará com que o gancho de efeito US seja acionado e , em seguida, o título do documento mudará para o valor de contagem atualizado. Portanto, isso simplesmente implica que o efeito americano Hooke é chamado após a renderização do componente. Agora podemos ver que o comportamento desse aplicativo é exatamente o esperado. Deixe-me explicar para você o que acontece sob o capô. Para causar efeitos colaterais em componentes funcionais. Primeiro, temos que importar o efeito dos EUA. Quem? O efeito dos EUA, que é uma função, temos que invocá-lo. Então, depois disso, vamos passar uma função como argumento, certo? Dentro da função US IF. Então, dentro do efeito, definimos o título do documento usando a API do navegador de títulos do documento. Então, tudo o que você tem aqui dentro dessa função anônima vai esfriar depois que o componente for renderizado. Portanto, quando as renderizações do React estiverem acompanhadas, ele se lembrará dos efeitos que usamos. Em seguida, execute nossos efeitos depois de atualizar a cúpula. Isso acontece para cada renderização, incluindo a primeira. Anote esses pontos-chave. Ponto número um, os efeitos dos EUA são executados após cada renderização. Ponto. Número dois, o efeito de uso é definido dentro dos componentes. E, ao fazer isso, teremos acesso a esses dados e sondas sem precisar escrever nenhum código extra. E foi por isso que conseguimos acessar o título do documento. Para recapitular, sempre que quiser usar o efeito US, você deve importá-lo do módulo React após as entradas. Você precisa chamá-lo de direitos dentro do componente desta forma. Então, dentro da função, vamos usar uma função de seta como argumento. Então, certo, quando a função de erro é onde a transformação ocorre, após a renderização do componente, essa função seria capturada. Isso é tudo por enquanto. Nos vemos na próxima palestra. 35. 34 Efeito de execução condicional: Neste exemplo, aprenderemos como executar efeitos condicionalmente. Na palestra anterior, aprendemos que o efeito 2k é chamado após cada renderização. E, na maioria dos casos, chamar os efeitos após cada renderização pode criar problemas de desempenho. Portanto, precisamos de uma maneira executar condicionalmente efeitos em componentes funcionais. Vamos praticá-lo rapidamente para entendê-lo bem o suficiente. Crie rapidamente um novo arquivo chamado exemplo de efeitos para, diretamente na prática de efeitos dos EUA, teremos o exemplo de efeito dois. Pontos, zombarias geram o componente funcional, fecham o explorador ou o lindo m phi. Então, como sempre, temos que importar os ustedes e eles usam o efeito porque as mulheres são imagens dos exemplos de Buda. Então, o que vamos fazer é copiar tudo do exemplo de efeito aqui embaixo. Um exemplo de efeito destaca a cópia. Venha aqui. Só precisamos colar. E depois disso, vamos alterar os componentes para efetivar o segundo exemplo. Então, aqui embaixo, só temos que aplicar o Exemplo dois. Seguro. Abra também o componente do aplicativo. Temos que renderizar o exemplo do efeito para o exemplo do efeito de importação, dois pontos g estão aqui, coloque um comentário sobre isso. E então vamos renderizar um exemplo de efeito para salvar. Vamos voltar ao exemplo dois. Então, aqui, vamos ao log do console. O efeito de uso é chamado de Salvar o aplicativo e finalizar a compra no navegador. Clique no botão. Tudo está funcionando conforme o esperado. Quando inspecionarmos o console, você verá o resultado esperado. O efeito de uso é chamado. Agora eu quero te mostrar uma coisa. Vamos implementar rapidamente o campo de entrada. O uso é importado na parte superior. A variável de estado está aqui. Agora temos que criar a variável de estado para o campo de entrada. Vamos supor um nome, setName. Você afirma. E o estado inicial será uma string vazia. Pode ser uma aspa dupla ou uma citação simples. Desses dois irão embora. Tudo bem, vamos implementar rapidamente o campo de entrada. Vamos fazer isso logo abaixo da parte inferior. Feche com a etiqueta de fechamento automático. Aqui, eu vou digitar, testar o valor. Vai ser um nome. Portanto, inalterado, o que significa quando o usuário começa a digitar no campo de entrada chamado função de erro, que então dá acesso aos eventos. Ok, vamos chamar a função de nome do conjunto. Portanto, com direitos dentro do parâmetro da função setName, usaremos os eventos para capturar o que o usuário está digitando no campo de entrada. Pontos E, valor do ponto alvo. Acho que agora você já deve entender o evento onchange bem o suficiente. Feito isso, vá até o navegador, a menos que verifique o comportamento, precisamos atualizar o console. Agora, quando eu começar a digitar no campo de entrada, vamos experimentar um comportamento estranho. Então eu faço isso no bar. Você pode ver que, ao digitar no campo de entrada, o efeito US é chamado. Consegue ver isso? Agora, detectamos o efeito dos EUA sete vezes. Mas olha, nossa intenção é chamar os efeitos somente quando o botão é clicado. Então, quando você também clica no botão, o efeito do usuário também é chamado. E quando você digita algo no campo de entrada, eles usam o efeito também é chamado. Portanto, essa chamada é realmente irrelevante e definitivamente diminuirá o desempenho do aplicativo. Não é o ideal. A solução para esse problema é invocar condicionalmente o efeito US somente quando o valor da contagem for atualizado. Porque nossa intenção aqui é atualizar o título do documento quando o botão é clicado dessa forma, está vendo? Portanto, queremos que os efeitos sejam ativados somente quando o botão for clicado. Mas nesse caso, se você digitar algo no campo de entrada, eles usam o efeito chamado de fazer algo assim. Você pode ver que todas essas coisas são realmente irrelevantes? Vamos consertar isso rapidamente. Aprendemos na aula anterior que o uso da função vetorial aceita dois parâmetros. Felizmente, o primeiro é o efeito em si, e o segundo é a matriz de dependências aqui. Para acabar com esse problema, temos que especificar a vírgula do segundo parâmetro aqui e, em seguida, vamos pegar uma matriz vazia. Portanto, esse aplicativo depende das contagens para ser atualizado. Quando as contagens forem atualizadas, queremos que o documento vinculado também seja atualizado. Portanto, podemos dizer que o aplicativo depende da variável de contagem. Portanto, temos que levar a conta. Isso significa que o efeito será ativado quando a contagem for atualizada. Portanto, isso é pelo menos como executar condicionalmente um efeito. Quando você salva e volta para o navegador. Precisamos atualizar o navegador e também atualizar o console. Agora, quando você pressiona o botão de adição, o efeito é chamado e o título do documento é exibido em detalhes. De novo. Mostra os mesmos resultados. Quando começamos a digitar no campo de entrada. Você pode ver que não sentimos mais que adicionamos comportamento. Então, agora nosso efeito é chamado quando a corrente é atualizada. Você pode ver? Então, vamos tentar novamente, atualizar. Quando eu o digito no campo do imperador, nada acontece. O efeito não é chamado simplesmente porque queremos que os efeitos sejam chamados quando a contagem for atualizada. Então, quando eu clico no botão de adição, isso fará com que os componentes sejam renderizados novamente. E depois que o componente for renderizado, o efeito será detectado. Você consegue ver um console tecnocrático? Tudo está funcionando perfeitamente, conforme o esperado. Portanto, agora o efeito obtém código somente quando a contagem da variável de estado é atualizada. Isso é tudo por enquanto. Na próxima palestra, aprenderemos sobre a função de limpeza de efeitos dos EUA. Nos vemos na próxima palestra. Mantenha o foco no cuidado holístico. 36. Função de limpeza de 35 efeito: Nesta palestra, vamos fortalecer nosso conhecimento sobre ganchos de efeitos de notícias. Precisamente. Vamos discutir a função de limpeza do efeito dos EUA. Então, o que exatamente é a função de limpeza de efeitos? A função de limpeza é um gancho de efeito induzido de função que nos permite organizar o código antes que nosso componente seja montado. No entanto, o efeito US 2k é construído de forma que possamos retornar uma função diretamente dentro dele. E essa função de retorno está exatamente onde os arpões de limpeza. A função de limpeza evita vazamentos de memória e remove alguns comportamentos desnecessários e indesejados. Técnicas. Você não pode atualizar o estado dentro da função de retorno. Então, neste exemplo, vamos criar um aplicativo simples que bloqueará a posição do mouse no console, começando pelas coordenadas x e y. Então, certo, vamos usar uma prática eficaz. Vamos criar rapidamente um novo componente chamado efeitos. Exemplo três. Gere o componente funcional. Vamos importar rapidamente o efeito use that hook e they use. Efeitos mais calmos. O mais simples disso. Então, para as coordenadas x e y, vamos declarar a variável de estado necessária a ser usada, certo, dentro do componente. Vamos ter um conjunto constante x vírgula x igual. Usar isso no estado inicial será um número. Nesse caso, zero destaques e duplicatas. É por isso que temos que definir y da forma mais simples que vamos definir a função para registrar a constante de posição do mouse. Pegando eventos, defina-os como nossa função e vamos para o log do console. Este é um evento de mouse. Aqui mesmo. Temos que chamar a função de configuração para o x e escrever usando a função, vamos obter a coordenada x e o cliente de pontos X destaques e duplicar. Então, aqui vamos obter y. Então temos que chamar a função de configuração para y ou beautiful. Vamos chamar rapidamente o efeito de uso. Fora dessa função, que está dentro do componente, vamos invocar o efeito US. E o efeito é uma função que usa dois parâmetros. O primeiro parâmetro é uma função de seta. E o segundo parâmetro será a matriz de dependências. Mas, por enquanto, vamos continuar assim. Então, certo, quando a função anônima que vamos registrar no console, o efeito de uso é chamado. E aqui queremos adicionar o ouvinte do evento. Pontos na janela, adicione o ouvinte de eventos. Então, vamos colocá-lo em movimento com o mouse. Quando você move o mouse no navegador, queremos escolher as coordenadas x e y. Mova o mouse Kolyma. Em seguida, vamos invocar a posição do mouse de registro. Estou aqui. É o mais simples que estava no corpo? Vamos mostrar a posição. Vamos ter uma tag p coordenada x e y. Segura. Temos que renderizá-lo no aplicativo js. Venha aqui. Temos que importar o exemplo três do efeito de barra do componente. Exemplo de três destaques. Faça um comentário sobre eles. Feche com a etiqueta de fechamento automático. Salvar. Vamos conferir o resultado no navegador. E eu vou abrir o console. Tudo bem, então quando você move o mouse, você pode ver, agora você pode ver a posição do mouse na tela. Mas uma coisa que não gostamos é que cada vez que movemos o mouse, o efeito é chamado. O efeito é chamado toda vez que o componente é renderizado novamente. Tudo bem, agora temos que condicionar o efeito passando o segundo argumento, que neste caso será uma matriz vazia. Então, quando especificamos a matriz vazia, estamos praticamente dizendo ao React que esse efeito não depende de nenhuma sonda ou permaneceu. Portanto, não há razão para chamar esse efeito sobre consequências de uma nova renderização, o que simplesmente implica que ele será detectado apenas pela primeira vez após a renderização do componente. Vamos passar a matriz vazia como o segundo parâmetro. Estragar tudo. E aqui temos que separá-lo com uma vírgula e depois pegar uma matriz vazia salvar no navegador. Vamos recarregar. Você pode ver que o efeito é chamado depois que o componente é renderizado por um tempo falso. Agora, quando eu movo meu mouse, o efeito não vai mais esfriar. Veja, agora temos apenas a maioria das coordenadas registradas no console. Mas quando eu removo a matriz de dependências, cada vez que você move o mouse , os componentes são renderizados novamente. E então isso fará com que esse cara aqui se incendeie. Agora C, dê uma olhada. Você pode ver quando eu movo o mouse, o componente é renderizado novamente e o efeito que é acionado. E, claro, não queremos que os efeitos sejam acionados toda vez que movemos o mouse. Portanto, temos que especificar a matriz vazia desta forma. Quando você especifica a matriz vazia, isso fará com que os efeitos sejam acionados após a renderização dos componentes por um tempo falso. Portanto, se a consequência for renderizada novamente, o efeito não vai mais esfriar. Então, se há alguns meses seus efeitos forem detectados, apenas alguns. Você precisa especificar a dependência vazia RA e visitar. Linda. Isso geralmente está em n, Salve na próxima aula. 37. 36 Componente desmontará: Bem-vindos de volta a todos. Na palestra anterior, aprendemos como imitar componentes montados com efeito americano. Então, nesta palestra, aprenderemos como usar componentes entre as funcionalidades que estão disponíveis usando o efeito. Basicamente, o que faremos nesta palestra é criar componentes de contêiner para o exemplo de massa logarítmica que implementamos na aula anterior. Certo? Dentro do contêiner, vamos adicionar o botão que será usado para alternar a exibição dos componentes. Então, crie rapidamente um novo arquivo chamado contêiner da mãe. Então, certo, dentro da prática de efeitos, criar um novo arquivo chamado mouse container dot g é genérico, o componente funcional. Vamos importar rapidamente o que os EUA fizeram quem. Além disso, temos que importar o efeito Exemplo três. Portanto, o próximo passo é declarar a variável de estado necessária para a exibição. Então, aqui vou invocar o gancho dos EUA. Então, vamos fazer com que a tela chegue aqui. Isso tem que estar em chaves de vírgula e o estado inicial será verdadeiro. Feito isso, certo, estamos no GSAs e não teremos nenhum botão para alternar a variável de exibição entre verdadeira ou falsa. Alterne a exibição. Especifique o OnClick. Então, vamos invocar a função de configuração para uma exibição definida. Agora vamos ter aqui muitas telas altas, certo? Então, quando esse botão for clicado, vamos mudar de verdadeiro para falso, ok? Cada vez que o botão é clicado e se a variável de exibição for verdadeira, queremos renderizar o exemplo de efeito em três componentes. Vamos fazer isso rapidamente aqui. Então, se display for verdadeiro e n, renderizaremos o exemplo três do Efeito mais próximo com a tag de fechamento suave. Portanto, o estado inicial da exibição é definido como verdadeiro. E por esse motivo, os três componentes do exemplo de efeito serão renderizados na tela. E quando esse botão é clicado, a tela é definida como falsa. O exemplo do efeito três componentes serão montados da cúpula é tão simples quanto isso. Vamos executar isso rapidamente. Um contêiner de mouse nos destaques do aplicativo. Faça um comentário sobre eles. Venha aqui. Então, vamos importar a maioria dos contêineres do componente Slash Slash Mars, use o contêiner Practice Slash Mars. E é claro que temos que correr até aqui. Salvar. Vamos dar uma olhada no navegador. Tudo está funcionando perfeitamente como espectador. Tudo bem, vamos inspecionar o console. Agora, quando eu movo o mouse, as coordenadas x e y são atualizadas e a declaração está sendo impressa no console. E agora, quando eu clico na tela seletora, esse componente será montado a partir da cúpula. Vamos tentar. Consegue ver isso? Linda? Agora, o problema aqui é esse. Se eu tentar mover o mouse, a declaração também será impressa no console. Dê uma olhada. Veja, eu quero que você observe esse cara aqui. Cada vez que eu movo o mouse, as declarações serão impressas no console. Mas veja, montamos os componentes, embora o componente tenha sido removido, o ouvinte de eventos que pertence ao componente ainda está ouvindo e executando. Você pode ver quando eu movo o mouse , você vê isso? O problema é que, sempre que você estiver montando seu componente, sempre cancele todas as assinaturas, os ouvintes e a solicitação de busca que você fez. Simplesmente porque não queremos expor nosso aplicativo a vazamentos de memória. O que precisamos fazer para resolver esse problema é limpar a função. Ao limpar a função, vamos imitar a quantidade n do componente. Fazemos isso retornando uma função, certo? Estamos no primeiro parâmetro dos efeitos dos EUA. Vamos fazer isso rapidamente. Então abra o efeito Exemplo três. Deixe-me te mostrar, certo. Dentro dessa função, retornaremos outra função chamada função de limpeza. E eu vou remover pontos da janela. O ouvinte do evento deve se mover para uma posição mais calma do mouse. Tão simples quanto isso. Agora vamos dar uma olhada no console para realmente indicar que limpamos nossa função. O componente Console.log é montado e o código é limpo e seguro. Vamos tirá-lo no navegador. Vamos recarregar, certo, vamos mover o mouse. Você pode ver que estamos obtendo as coordenadas x e y da posição do mouse. E temos o estadista sendo impresso no console. Agora, quando eu clico na tela de alternância, o exemplo de efeitos de três componentes estará montado. Dê uma olhada. Vamos mover o mouse para verificar se está tudo bem. Você pode ver que ele não está mais ouvindo o evento. Agora, no console, o componente está montado. O código está limpo. Minuto técnico desses pontos-chave. Sempre que quiser montar seu componente, sempre cancele todas as assinaturas, os ouvintes e a solicitação de busca que você fez. Isso é tudo por enquanto. Nos vemos na próxima palestra. Curso mais rígido, animalesco aqui. 38. 37 Aperte várias postagens: Com o sólido conhecimento adquirido nas palestras anteriores. Nesta palestra, aprenderemos como buscar dados de uma API. Então, para implementar esse exemplo, vamos usar a API de espaço reservado JSON. O placeholder JSON é uma API REST on-line gratuita que você pode usar sempre que precisar de dados falsos. E é usado principalmente para ensinar prosa em pares. Então, vá rapidamente para Jason placeholder.code.com. Role para baixo até as rotas. Aqui. Temos um endpoint diferente. Mas nesta palestra, vamos abordar os vários terminais de postagem. Clique para abrir. Consegue ver isso? Então, aqui temos os dados no formato JSON, que é simplesmente uma matriz de objetos com propriedades diferentes em termos de par de valores-chave. Então, usando o gancho de efeitos, queremos buscar esses dados e exibi-los na tela com a ajuda de uma biblioteca externa chamada ox use. Você também pode usar a API Fetch. Mas nesta palestra, vamos nos concentrar em como usar atos. Use rapidamente, vá para o VS Code. Certo, então aqui é exatamente onde o formulário começa. Certo? Estamos no diretório de componentes. Vamos criar um novo pacote chamado busca de dados. Com os direitos contidos nos dados do envelhecimento, vamos criar um novo componente chamado fetch. Várias postagens geram o componente funcional. Vamos declarar rapidamente uma variável de estado a ser usada. Mas antes de prosseguirmos, primeiro, temos que importar os EUA no nível superior. Aqui mesmo. Vamos declarar uma variável de estado para a postagem. Vou fazer postagens constantes, coma, postes fixos. E o estado inicial será uma matriz vazia. Ao observar a estruturação da RAD, você perceberá que o elemento é nomeado com pleura preocupada, sabe por quê? É simplesmente porque estamos buscando vários dados. Então, quando você está escrevendo código como um profissional, você sempre terá que se concentrar nas convenções de nomenclatura. Estão certos. Eu falei demais. Vamos continuar. Ok, então o próximo na fila é chamar o efeito de arco. E antes de prosseguirmos, também precisamos importar o efeito dos EUA. No nível superior. Aqui. Vamos chamar a função de uso do efeito. E a função de efeito assume uma função de seta à medida que cai no parâmetro. Então, certo, dentro dessa função de erro é onde vamos fazer o teste getter. Mas antes de prosseguirmos, também precisamos instalar uma biblioteca externa chamada axial. Rápido até o terminal. Precisamos interromper o servidor Control C em execução no momento para parar e garantir que você esteja no diretório do cliente. E então eu vou fazer a instalação do gerenciador de pacotes node. A instalação está em andamento. Feito, o Access foi instalado, bem-sucedido. E na parte superior, também precisamos importar axiomas do módulo de acesso. O mais simples, nesse sentido, dentro da função de efeito, temos que fazer uma solicitação get para o URL. E eu vou fazer axiomas dot get. E depois volte para o navegador. Temos que copiar o URL. E quando acessarmos esse URL, toda essa postagem será recuperada. Parece bom. Linda. Vamos fazer isso rapidamente. Copie e cole aqui mesmo. Os mais simples que não tiverem feito isso, a solicitação get retornará uma promessa. Portanto, temos que registrar a resposta. Aqui. Eu vou fazer o Dot. Então. Aqui vamos responder. Logo abaixo, vamos registrar os entrevistados no console. Se houver algum erro, precisamos detectá-lo e registrá-lo no console também. Os pontos pegam. Para detectar o erro e registrá-lo no console, erro. Então, estamos apenas cortando o ar aqui. Então, seja qual for a seta, vamos ao registro do console. O erro é o mais simples que está certo. Feito isso, o próximo passo é atualizar o estado inicial com a nova Costa. Então, para isso, temos chamar a função de configuração aqui. Defina postagens para dados de pontos de resposta. Caras legais. Quando você fizer isso, tudo aparecerá conforme o esperado. Vamos renderizá-lo rapidamente na tela. Venha aqui. Vou usar os direitos de tag da UL dentro dos colchetes de abertura e fechamento da UL para inserir expressões em JavaScript. E eu vou postar um mapa de pontos. Deixe-me mostrar este post aqui. Esse cara, queremos mapear tudo o que temos aqui e como ele é exibido na tela. E você sabe que o método de mapeamento assume outra função. E essa função recebe um parâmetro. Esse parâmetro aqui representa, no mínimo, cada postagem. Aqui vamos ter a etiqueta LI. Então, certo, dentro do HTML interno, podemos fazer o título do ponto da postagem. Deixe-me te mostrar rapidamente. Você pode ver que temos o título aqui, o ID do corpo e o ID do usuário. Então, no meu caso, eu só quero recuperar o título. Você pode decidir recuperar o corpo e o resto deles. Agora também temos que especificar a chave, chave igual ao ID dos pontos, que é esse ID aqui. Que lindo. Vamos importar, buscar várias postagens a partir da busca de dados de barra de componentes, lodo , buscar várias postagens. E feche isso rapidamente. Pegue várias postagens, salve vá até o terminal. Temos que iniciar o servidor. E eles são tão lindos. Agora, conseguimos recuperar todas essas postagens aqui, que é justamente a ferramenta PIE. Se você quiser recuperar o corpo, é extremamente simples. Venha aqui e então você só precisa postar pontos de forma segura no navegador. Você pode ver agora que recuperamos o título e o corpo. Então você pode fazer isso no final, mas eu quero manter as coisas simples aqui. Salve no navegador. Tudo está funcionando perfeitamente, conforme o esperado. Mas ao observar o console, você verá a repetição contínua de dados devido ao envelhecimento. Você pode ver? Mas queremos que os dados sejam obtidos somente no componente montado. Para isso, precisamos voltar ao código e especificar a matriz de dependências. Certo, dentro da função de efeito. Aqui mesmo. Deixe-me mostrar que esta é a função de efeito. Portanto, o segundo parâmetro será uma matriz vazia. Quando você salva e volta para o navegador. Vamos recarregar. Você vê agora que o console está extremamente limpo e tudo está funcionando perfeitamente, conforme o esperado. Isso é tudo por enquanto. Nos vemos na próxima palestra. Mantenha o cuidado focado e holístico. 39. 38 Botão de id: Nesta palestra, aprenderemos como acionar o efeito na camarilha eleitoral. Portanto, a intenção desta palestra é fazer a solicitação GET dentro do manipulador de cliques. Para continuar, precisamos de uma variável de estado cujo valor só mudará em um grupo de barcos. E por enquanto, o único valor que muda neste aplicativo é esse id. Então, deixe-me mostrar rapidamente como sendo o pilar de Zuma. Então, quando eu faço um, você pode ver? Então é disso que estou falando agora. Queremos fazer isso na camarilha eleitoral. Portanto, não queremos implementá-lo dessa forma. Volte rapidamente para o código VS e vamos continuar. Para implementar essa funcionalidade. Vamos declarar rapidamente uma nova variável de estado cujo valor mudará quando o botão for clicado. Aqui mesmo. Eu vou fazer exatamente assim. Em seguida, chamarei esse botão, clique em ID. Claro, isso será alterado assim, simples assim. Então, vamos deixar o estado inicial assim. Então, vamos implementar rapidamente a navegação. Tudo bem, então antes de prosseguirmos, temos que formatar o código para que pareça limpo, um pouco bonito. Agora vamos ter o botão aqui. Ao clicar neste botão. Queremos invocar uma função e o nome da função é tratado. Clique no botão, digite, navegue e, em seguida, o valor será id e rats. Mas no teste interno eu vou fazer um post gordo. Tudo bem, estamos prontos para ir. Só falta uma coisa, agora. Por isso, queremos definir o botão ID do clique para o novo ID no campo de entrada. E como fazemos isso? Temos que fazer isso, certo? Dentro dessa função. Aqui, a banheira, teremos uma função constante de cem cliques, defina-a para nossa função. E então temos que chamar a função de configuração para clicar no botão de configuração. E agora estamos atualizando-o com o ID atual que o usuário digitará, no campo de entrada como este. É tão simples quanto isso. Então, com isso, estamos configurando o botão ID, o ID que será capturado do campo de entrada. Portanto, a próxima fila é permitir que o efeito dependa do ID do botão inferior do ID e não da alteração irregular. Deixe-me te mostrar rapidamente. Você pode ver anteriormente que nosso efeito depende desse ID que será capturado no campo de entrada. Mas agora queremos configurá-lo na parte inferior, clique no ID, que é esse cara aqui. Aqui. Temos que alterá-lo para ID de clique no botão. O ID que capturamos do campo de entrada está sendo armazenado dentro desse cara aqui. Vamos dar uma olhada no navegador. Salve no navegador como um. Você não busca. Linda. Vamos fazer dois. Aqui na busca. Frase perfeita. Tudo está funcionando perfeitamente, conforme o esperado. Isso é tudo por enquanto. Nos vemos na próxima palestra. Ainda focado no cuidado holístico. 40. Introdução à API de contexto: Bem-vindos de volta a todos. Agora vamos discutir um livro muito interessante e poderoso chamado contexto dos EUA. Mas antes de prosseguirmos, é bom. Entendemos o que é a API do concurso e como ela funciona. Então, depois disso, exploraremos os ganchos de contexto dos EUA que facilitam as coisas. Então, o que é uma API de concurso? Vamos considerar rapidamente um aplicativo React que tenha vários componentes. Agora, no topo está o componente do aplicativo, que é claro os componentes raiz de cada aplicativo React aninhados nos componentes do aplicativo são vários outros independentes, um componente isolado em diferentes níveis de árvore. E temos os componentes a, b e c no primeiro nível. Componente. X está aninhado no componente B. Componente por que está aninhado na competência? E o componente z está aninhado no componente y. E agora o desafio que temos aqui é exibir o preço total de um item nos componentes a, x e z. E o preço do item será mantido como uma propriedade no componente do aplicativo. Portanto, para poder exibir o preço e os componentes aninhados, precisamos passar o prêmio para eles como sondas. Tudo bem, então, para que o componente a receba esse preço, temos que repassá-lo diretamente como adereços. E isso é bem simples e direto. Para que o componente X receba esse preço, temos que passá-lo pelo componente intermediário B até a empresa e os ovos. Para que o componente z receba o concurso de preço, temos que passá-lo pela competência intermediária e por Y. Tudo bem? Então, ao observar cuidadosamente a árvore de componentes, você perceberá que os componentes b, c e y não precisam das sondas. Mas ainda precisamos passar as sondas pelo componente para chegar ao componente necessário onde os dados serão consumidos. Portanto, nesse cenário, os componentes B, C e Y são chamados de transportadores de sondas que não fazem uso dos prompts, mas precisam transportar as sondas até os componentes necessários. Portanto, o processo de passagem de adereços pelo componente aninhado é chamado de perfuração de sondas. Então, agora, eu quero que você feche os olhos e imagine que temos mais de 25 componentes aninhados aqui. Isso significa que, com todo esse componente intermediário, teremos que encaminhar as sondas para o componente em questão. E, claro, vamos bagunçar nosso código. E isso se torna um problema para certos tipos de solicitações exigidas por muitos componentes em nosso aplicativo. Como as preferências de idioma. A autenticação usa o tema UI. Ok, então, seria bom se pudéssemos enviar dados diretamente para o componente necessário questão, sem precisar sondar perfurar os componentes aninhados. Ok, então aqui é onde estão as colunas da API do concurso. concurso fornece uma maneira de passar dados pela árvore de componentes sem precisar perfurar manualmente ao longo do semestre. Empresas. Em outras palavras, o concurso react nos permite compartilhar dados em nosso componente com mais facilidade. Isso ajuda a evitar sondas, perfurações. Sim, então isso é tudo por enquanto. Nesta palestra, veremos como a API de contexto era usada antes da introdução de quem cuida dela. Temos muitas mentiras práticas, o gancho de contexto dos EUA para ver a flexibilidade que isso traz para a mesa. Tudo bem, então vamos praticamente usá-lo na próxima palestra. Te vejo então. 41. 39 Implementar o contexto: Nesta palestra, teremos uma compreensão prática do contexto, da API e de como ela funciona. Então, vamos implementar um concurso de preços que permitirá que componentes em três níveis diferentes leiam uma sonda que é passada no nível superior. Certo, neste exemplo, vamos usar o componente z para exibir o preço dos itens sem precisar investigar, detalhar a competência intermediária e por quê. E, a propósito, criei um aplicativo React chamado concursos práticos. Então, pause rapidamente a palestra no final e gere um novo aplicativo React. Tudo bem, depois de fazer isso, vamos criar rapidamente o diretório de componentes. Certo, dentro do SRC. Clique com o botão direito em novos componentes de alimentos. E o diretório de componentes. Vamos criar o componente de competência y e z z z dot js. Por fim, teremos o competente y dot j é lindo. Então eu só tenho que levar o z para o STM aqui, comando V para fechar o Explorer. E então vamos gerar os componentes funcionais, certo? Estamos nas flores. E agora vamos nos concentrar na borda direita da árvore. Ok? Então, ao observar a borda direita da árvore, você perceberá que o componente z está aninhado no componente y. componente y está aninhado na competência. E, por fim, a competência está inserida exatamente no componente do aplicativo. Então, vamos seguir rapidamente esse padrão e transformá-lo em código. Então, seguindo o padrão da árvore, o componente z está aninhado em y. Então, aqui está o porquê competente? Vamos importar o componente z, o componente z. E depois vamos renderizá-lo aqui. Componente por que está aninhado no componente C? Volte para a competência, importa o componente y. Então, aqui temos que renderizar o componente y. Por fim, a competência é então renderizada no componente do aplicativo. Vá para o componente App. Importe competência da competência competente de corte e cabelos ruivos. Temos que tornar a competência tão simples quanto isso. Certo? Então é aqui que Lee é onde a diversão começa. Para implementar concursos. Temos que seguir quatro etapas. O primeiro passo é criar o concurso usando metil decretado logo na parte superior. E, por favor, não faça isso aqui. Não faça isso dentro do componente. Tem que ser aqui fora. Linda. E agora vamos criar um concurso de preços. Custo. Concursos de preços, iguale, reaja, pontilhe, crie um concurso. Feito isso, a segunda etapa é pegar o concurso criado e agrupar o provedor de conteúdo em torno de sua árvore de componentes. Então, aqui eu só tenho que destacar esse cara por enquanto e depois parar com isso. E aqui, vamos fazer um concurso de preços para fornecedores de pontos. Perfeito. E então temos que colar o componente intermediário. É tão simples quanto isso. Certo? Vamos passar para a etapa três. Agora, vamos colocar o valor necessário em seu provedor usando o valor prop. O que eu vou fazer aqui é pegar adereços para ele, que é igual ao valor. Agora, temos que especificar um prêmio, e eu vou fazer $200. E, por fim, a quarta etapa é consumir o valor de qualquer componente usando o consumidor do concurso. Portanto, antes de prosseguirmos, precisamos exportar o contexto. Venha aqui. Vamos fazer esse cara aqui. Poderemos importá-lo em um módulo diferente. E agora o desafio aqui é consumir esse valor no componente z sem precisar sondar, detalhar competência e y. Vamos fazer isso rapidamente. Venha para a empresa e z. No topo, vamos importar o concurso de preços do componente do aplicativo. Limpe isso rapidamente. Então, aqui vamos ter um concurso de preços para consumidores. E teremos um preço. Então, aqui, vamos retornar um div, certo? Dentro da definição. Temos que mostrar o preço com segurança. Certifique-se de executar seu aplicativo e, em seguida, finalize a compra no navegador. Aqui está. Consegue ver isso? Linda? Deixe-me ampliar um pouco mais, certo? Então, agora conseguimos consumir o preço que é mantido no componente do aplicativo, certo? No componente z, mesmo sem precisar perfurar os componentes intermediários, amigos. A competição é realmente poderosa e baixa. Ok, então o próximo passo é abordar outro contexto, porque em seu aplicativo, provável que você tenha vários valores a serem consumidos em um componente diferente. Então, vamos ver como implementar vários conteúdos. Vá para o componente do aplicativo. Suponhamos também que queremos exibir o nome do item. Ok, então primeiro exibimos o preço do item e agora temos que exibir o nome do item. Então, vamos criar rapidamente um novo concurso. Exporte const, e eu vou chamá-lo de concursos de itens, equa, React dot, criar conteúdo, fazer com que eles exportem e editem. Poderemos usá-lo em arquivos diferentes. Tão rápido. Aqui, ele será aninhado no provedor de pontos do concurso de itens. Olá, deixe a tag de fechamento comandar X para recortá-la e depois colá-la aqui. Vamos formatar rapidamente o código para ter um recuo adequado. Linda. Você pode formatar o código com mais bonito. Claro, você já deve saber como fazer isso. Tudo bem, então, depois de fazer isso, temos que fornecer um valor ao concurso. O concurso de itens terá um valor agregado , vamos supor que a Samsung. Feito isso, temos que consumir esse concurso realizado pela empresa em z. Então, aqui, também temos que importar o concurso de itens. Feito isso, venha aqui, destaca o Command X to cut. E então vamos devolver conteúdo do item ao consumidor, abrir e fechar os colchetes. Então, vamos ter a função aqui. Certo? Dentro dessa função, retornaremos o comando div V para colar o div. E aqui também temos que exibir o item. Então, basta fazer um item como este. Então, vamos torná-lo mais legível. Aqui eu vou fazer concursos de imprensa, e aqui vou fazer um concurso de itens. Tudo bem, então vamos formatar rapidamente o código com mais bonito. Perfeito, economize. Vamos tirá-lo no navegador. Você pode ver que o concurso de preços é de $200. O item é Samsung Friends. Isso é extremamente incrível e eu adoro isso. Então, agora podemos obter o valor de vários concursos. Mas uma coisa que quero dizer é que essa abordagem é bastante volumosa. Então, para reduzir a complexidade ganchos de contexto da Revlon Mickey dos EUA. E então você verá como podemos consumir vários concursos em apenas algumas linhas de código. Isso é tudo por enquanto. Na próxima palestra, vamos praticar o concurso de uso. Quem te verá na próxima palestra? Mantenha o foco no cuidado holístico. 42. 40 useContext para contexto múltiplo: Na palestra anterior, aprendemos como consumir vários concursos com o padrão de adereços de renderização. E nesta palestra, vamos consumir o mesmo concurso múltiplo usando o concurso de uso, que parece menos prático? É rápido? Tudo bem, então não há necessidade de criar um novo componente. Então, vamos usar o componente y para consumir o valor do concurso, certo, nesta palestra. Componente y, uma coisa que você deve ter em mente é que as etapas para implementar concurso permanecem exatamente as mesmas. A única coisa que mudará é o padrão de consumo. Portanto, usar contextos é muito fácil de consumir o valor do conteúdo com algumas linhas de código. Para prosseguir com o gancho de contexto dos EUA. Primeiro, temos que importá-lo em um local, uma vírgula aqui, e depois usar concurso. O próximo passo é importar o concurso necessário para ser usado. Concurso de preços de importação do nosso componente de aplicativo. E então também temos que importar o concurso de itens. Ambos vêm do componente do aplicativo. Feito isso, a próxima linha é invocar o gancho do concurso dos EUA. Tudo bem, então o contexto dos EUA é uma função. Então, temos que invocá-lo, certo? Na função de contexto dos EUA, vamos passar o preço e o concurso de itens como parâmetro. Então, usamos o concurso e depois vamos passar no concurso de preços, destaques, duplicatas. E aqui vamos passar no concurso de itens. O contexto dos EUA retornará o valor do concurso. Então, vamos atribuí-lo a uma variável constante. Ei, eu vou fazer, vou chamar de preço variável. E aqui vamos chamar o item variável. Exatamente assim. É tão simples quanto isso. Vamos limpar isso. E por último, temos que consumir o conteúdo e os amigos. Dê uma olhada. É extremamente fácil consumir o concurso. Só precisamos referenciar essas variáveis. Deixe-me te mostrar rapidamente. Aqui. Vou fazer o preço e vou fazer aqui o item, economize no navegador. E eles são esses. Consegue ver isso? Linda? Não podemos consumir vários concursos em apenas uma linha. Isso é fantástico e eu adoro para ser honesto com você, a introdução de quem pode reagir, facilitar as coisas. Muitos comparam a implementação anterior. Você definitivamente apreciará a introdução de ganchos no React. E agora a questão é: quando devemos usar o concurso React? O concurso React é ótimo quando você está passando dados que podem ser usados em diferentes componentes do seu aplicativo. E esses tipos de dados incluem dados da equipe, como humor escuro ou claro. Use nossos dados, que são o usuário atualmente autenticado. E, por último, dados específicos de localização, como usamos nosso idioma, estão localizados em. Outra pergunta que vem à mente é qual é exatamente o problema que reage, contesta, resolve? Concurso React. Ajude-nos a evitar o problema da perfuração de adereços. Isso acabou agora e até a próxima palestra. Steph, analista de custos, cuide-se. 43. 41 ganchos de redutor: Na palestra anterior, tivemos uma introdução detalhada sobre o uso de ganchos redutores. Então, nesta palestra, vamos prosseguir com o exemplo prático. Vamos demonstrar esse exemplo implementando um aplicativo de contador simples. Portanto, não poderíamos incrementar o valor do contador, diminuir e até mesmo redefinir o valor do contador para zero. Embora o aplicativo possa parecer simples. Mas, novamente, é Exiba o padrão que você verá em sua codificação diária. Rapidamente dentro do diretório do componente. Vamos criar um novo pacote chamado use reduce our practice. Dentro desse bolso. Vamos criar um novo componente chamado meu contador. Gere o componente funcional diretamente nos GSAs. Vá em frente e crie três proteínas diferentes. Diretamente dentro da div. Vamos ter um parafuso nos incrementos. E eu vou duplicá-lo duas vezes. Isso vai ser um decréscimo e isso vai ser uma votação zerada. Portanto, a linha ocidental é criar o contador que será exibido nos GSAs. Então, para isso, precisamos usar sulcos ou ganchos. Para implementar o uso, use sulcos ou ganchos. Primeiro, precisamos importá-lo em um nível superior. Então, aqui eu vou usar o redutor. Não fiz isso. Assim como outros ganchos que estudamos na palestra anterior. O usuário, que é nosso gancho, também é uma função. Temos que invocá-lo. Então, os direitos dentro do componente, vamos invocar o uso como nosso gancho. Vamos ressurgir rapidamente as mesmas tags. Anteriormente, aprendemos que o U.S. Ridges or Hook aceita dois argumentos. O primeiro argumento é um método redutor e o segundo argumento é o estado inicial. Então, certo, dentro do parâmetro, teremos a vírgula do método redutor e, em seguida, o estado inicial. Feito isso, o próximo passo é declarar o estado inicial e definir a função redutora. Então, saia do componente. Bem no topo. Teremos um estado inicial constante igual a zero. Vamos definir rapidamente a função redutora. Redutor de custos, defina-o para nossa função. Portanto, a função redutora aceita dois parâmetros. primeiro é o estado atual e o segundo parâmetro é a ação. Então, vamos fazer com que o estado atual acalme a ação. E assim eles reduzem nossa função também retorna um valor, que é o novo estado. Aqui para ensinar trabalhos. Eu vou voltar. Novo estado como esse. Não se preocupe Vamos ver como isso vai acontecer no futuro. Para que a transição ocorra, precisamos acionar o segundo parâmetro na função redutora, que é a ação. Portanto, você pode pensar na ação como uma instrução dada à função redutora. E com base na especificação da ação, o redutor realizará a transição de estados necessária. Então, neste exemplo, teremos três ações diferentes. O incremento, o decréscimo e a ação de reinicialização. Então, vamos limpar isso rapidamente. No caso do Reducer, a prática comum de implementar código com base em sua ação é usar o case switch. Então, aqui vamos fazer o switch. A expressão switch será uma ação de acordo com os requisitos de nosso aplicativo. O real aqui será incremento, decréscimo n, a ação de reinicialização. Então, aqui vamos ter o primeiro caso como coluna de incremento. E vamos retornar o estado atual mais um, o ponto mais simples. E aqui eu só tenho que duplicá-los, duplicados duas vezes. E aqui vamos ter o decréscimo. O novo estágio vai subtrair um do estado inicial. Aqui teremos a roseta de casos, que consiste em redefinir o estado para o valor zero. E esse é o estado inicial. Então, isso retornará ao estado inicial. E por último, temos que especificar o caso padrão. Neste caso, vamos devolver o estado em si. É tão simples quanto isso. Agora, o próximo na fila é despachar a ação. Da mesma forma que nos EUA, os ganchos usam para reduzir nossos retornos, um par de valores que podemos obter usando a estrutura e a sintaxe 3D. Aqui eu vou fazer const diretamente. E aqui vamos ter o método de despacho. Em seguida, atribua-o assim. O redutor de uso retorna o estado atual, que neste caso chamamos de contagem, junto com o método de despacho. E o método de despacho é usado para executar um código correspondente a uma ação específica. Então, a contagem aqui é uma variável usada para armazenar o estado inicial tão rapidamente, certo? Dentro dos GSAs, usaremos a tag head one para exibir a contagem. Agora vamos fazer com que ele tenha vencido, agora mesmo. Temos que exibir a contagem, que é esse cara aqui que é usado para manter o estado inicial e também o estado que será atualizado. Isso é usado apenas para manter o estado, ok? E esse cara aqui está acostumado a enviar o código com base em sua ação. Você vai ver isso em um tema G. Então, certo, dentro da questão da bola, temos que especificar sua própria camarilha. Dentro do OnClick. Vamos usar uma função de erro que será usada para invocar o método de despacho. E o método de despacho será usado para executar um código com base em sua ação. Temos incrementos de ação. É tão simples quanto isso. Então, agora eu vou copiá-los. Sidway. Eu o copiei diretamente dos colchetes de abertura para o botão ao clicar em Copiar. Venha aqui e cole. Então, só precisamos alterá-los para decréscimos porque queremos despachar a ação de decremento. Então venha aqui assim e cole também. Nesse caso, queremos enviar a ação de redefinição. Quando enviarmos a ação de incremento, ela adicionará um ao valor atual inicial. Quando despachamos a ação de decréscimo, ela subtrairá um do valor inicial da lata. E por último, quando enviarmos a ação de redefinição, ela redefinirá a contagem para zero, que é o estado inicial. Vamos renderizá-lo rapidamente no componente do aplicativo. Chegue ao topo e depois temos que importar, eu posso diferenciar um dos componentes usando barras, reduzir nossa prática, cortar meu contador um. Eu vou rolar para baixo. Só temos que randomizar o contador um. Feche com a etiqueta de fechamento automático. Salve e certifique-se de executar o aplicativo no terminal. Deixa eu te mostrar. Você pode ver que meu aplicativo está sendo executado no navegador. A ideia é: você pode ver isso? Vamos tentar clicando no quadro Haines, eu clico no incremento, Botkin. Isso incrementa. Aquele em que eu clico diminui, ele diminui para zero. E mais uma vez, eu toco no incremento, no incremento, no incremento. E então deixe-me tentar reinicializar desta vez. Linda. Tudo está funcionando perfeitamente, conforme o esperado. Então, para recapitular, volte ao código VS e deixe-me mostrar rapidamente como usar o redutor dos EUA. Primeiro, você precisa importá-lo na parte superior. E então o redutor é uma função. Portanto, você também precisa invocá-lo. Essa função usa dois parâmetros. primeiro é o método redutor e o segundo é o estado inicial. Além disso, o uso de sulcos ou ganchos retorna uma matriz de dois valores, que neste caso o estado inicial e um método de despacho. O método dispatch é usado para despachar a ação e a variável count aqui é usada para armazenar o valor dessa tabela. Então, quando você vai para o topo, onde temos a função redutora, esse cara aqui, que é o primeiro parâmetro nos EUA, cumes ou gancho aqui, a função redutora recebe dois parâmetros. Primeiro é o estado e depois a ação. Portanto, no caso de um redutor, a convenção para implementar código com base em sua ação é usar as teclas doces. E é por isso que temos a suíte do nosso cabelo. E aqui mesmo no switch, implementamos as ações. Ok, então temos incrementos. Isso retornará um novo estado que adicionará um ao estado inicial. E, claro, você deve saber que o estado inicial também é o segundo parâmetro. Direitos. Você não usaria reduzir nossa função? Aqui, está. Ok, então, quando a ação for incrementada, ela adicionará um ao estado inicial. E quando a ação diminui, também estamos subtraindo um do estado inicial. E então, quando a ação for redefinida, redefina o valor para zero. E aqui temos o estado padrão do aplicativo. Escreve, não seria o de Jesse? Implementamos um onclick para chamar o método de despacho. Então, certo, dentro do método de despacho, especificamos a ação. Isso geralmente acontece agora e, na próxima palestra, daremos um exemplo mais complexo. Nos vemos na próxima palestra. Mantenha o foco na holística. 44. 42 useReducer de estado e ação: O segundo exemplo do redutor de uso será examinado nesta palestra. E nesta palestra, empregaremos o objeto de estado e os objetos de ação, em vez do estado e da ação simples que implementamos na aula anterior. Então, rapidamente, não usamos reduzir nossa prática, criamos um novo componente chamado meu contador para abrir rapidamente meu contêiner um, aqui está ele destaca, copie todo o código contido na minha câmera dois e cole. Vamos fazer rapidamente as correções necessárias. Aqui. Só precisamos mudar meu conteúdo, quero entrar em contato com quando você salvar lindo. O próximo passo é transformar a variável de estado atual em um objeto. Role até o topo. Então, o que eu vou fazer agora é limpar isso. Agora temos que configurá-lo como um objeto, certo? Dentro do objeto. Vou fazer Cantor. Defina-o como zero, assim como esses direitos estavam na interface do usuário. Agora vamos fazer aqui contar pontos, contador a. As contagens representam os objetos não testados. O próximo passo é converter nossa ação simples de string em um objeto. E aqui está. Dentro do método de despacho, vou apenas destacar e depois cortar a string. Agora, temos que convertê-lo em um objeto. Dentro desse objeto, vamos usar uma propriedade chamada tipo de tipo e o tipo de ação é incrementos. Então, aqui também temos que transformá-lo em um objeto, destacar e cortar a string, transformá-la em um objeto e, pegando o tipo, o tipo de ação é decréscimo. A mesma coisa aqui. O mais simples disso. E com isso, enviaremos uma ação com base no tipo de ação. Então, à direita, dentro da função redutora, vá até o topo. A expressão do switch será action dot py. Portanto, para a ação de incremento e diminuição, retornaremos o novo objeto de estado, destaques e o apagaremos. Vamos especificar um objeto. Quando o objeto que vamos fazer, contrarie o ar, então os pontos contrariam um positivo. Isso é mais simples, a mesma coisa aqui. Especifique se o objeto contém um ponto de contato de estado menos um. Eu espaço isso um pouco. O estado e a ação do componente agora são transformados em um objeto. E é isso. Rendered está complementando o aplicativo Js. E vamos ver o que temos no navegador. As importações do componente Slash Use reduzem nossa prática de cortar mitocôndrias para, vamos destacar isso e fazer um comentário sobre isso. Então vamos renderizar meu contador para isso. G está mais próximo da etiqueta de fechamento automático. Salve o aplicativo e verifique se ele está sendo executado diretamente no terminal. E o navegador. Vamos tirá-lo. O incremento do decréscimo reiniciado como fizemos novamente, incrementando, diminuindo e recebendo. Tudo está funcionando perfeitamente, conforme o esperado. Linda. Agora, a questão é: por que preferiria essa abordagem em comparação com a abordagem anterior? Tudo bem, então vamos demonstrar um exemplo que dará uma resposta válida para essa pergunta. Então, com isso, você entenderá bem o suficiente. Então, vamos supor que queremos enviar diferentes valores e resorts. Digamos que temos dois corpos extras para incrementar e diminuir a contagem em cinco. Isso seria possível e muito fácil se a ação fosse um objeto. E ao verificar o objeto de ação, você perceberá que ele tem apenas uma propriedade, que é o tipo de ação. Então, vamos adicionar outra propriedade ao objeto de ação. E essa propriedade seria chamada de valor, que representará o número que será usado para incrementar ou diminuir o valor da contagem. Então, para relatar coisas que criamos anteriormente, vamos adicionar uma propriedade extra para comer, vir aqui, vírgula e depois valorizar. Temos que configurá-lo como um simplesmente porque queremos que esse botão incremente o valor do estado inicial uma vírgula aqui. Na propriedade value e defina-a como um. Então, isso diminuirá o estado inicial em um. E agora, neste exemplo, queremos extrapolar o que será usado para incrementar e diminuir o valor da contagem em cinco. A fórmula de cópia é 25, 26. Duplique-o. E aqui eu vou fazer o incremento cinco. Aqui eu vou fazer o incremento cinco, certo? Então, aqui eu vou fazer cinco, o valor cinco. Feito isso, também precisamos voltar à função redutora. E então não precisamos codificá-lo dessa forma. O que vou fazer agora é mais o valor em pontos do leilão. E esse valor é, isso. Aqui vai estar o valor em pontos do leilão. Então esse valor representa cada um desses caras aqui, todo esse cara aqui. Vamos evitar rapidamente a obrigação de conferir os resultados no navegador. Vamos tentar. Ao bater no tabuleiro, significa incrementar um belo decréscimo em um incremento perfeito de cinco. Você pode ver esse decréscimo em cinco? Tudo está funcionando perfeitamente, conforme o esperado. Vou apertar o botão de reset. Dê uma olhada. Linda. Portanto, ao usar a ação como um objeto, podemos usar vários dados na função redutora. Portanto, essa é uma das respostas para a pergunta que levantamos anteriormente nesta palestra. Agora, vamos demonstrar o segundo exemplo para dar uma resposta mais válida à questão levantada anteriormente. E neste exemplo, vamos nos concentrar no palco como um objeto. Então, vamos supor que você queira implementar vários contadores. A melhor maneira de fazer isso é quando o estado for um objeto, vá até o topo. Então, vamos ter um novo contra-ataque agora. E isso será chamado de contador B. Vou configurá-lo para 15. Para atualizar o valor do contador B. Precisamos criar mais dois casos de troca. Venha aqui mesmo. O que vou fazer agora, porque criamos anteriormente, vou destacar as linhas 11 a 13 duplicadas. Observe-me enquanto eu vou selecionar o contador a. E então temos que destacar todas as ocorrências do contato a dentro da ação que o duplicará. Leve sua causa ou para a borda direita e depois limpe-a aqui. Eu vou fazer um contra-ataque tão simples quanto isso. E agora temos duas propriedades diferentes como objetos divididos. Para obter os resultados esperados, precisamos igualar a propriedade do estado. Deixe-me mostrar como fazer isso. Ponto, pontos, estados, pressione uma vírgula. Eu só vou copiar e colar assim , assim. Por fim, temos que implementar a navegação para enviar a ação com um clique. Quando eu rolar para baixo, vou copiar o incremento cinco. Venha aqui. Vamos criar um div aninhado dentro desse div. E então eu vou chamar esses incrementos de contato de Highlight, Copy, venha aqui e cole. Portanto, este será o contador de decréscimos B. Temos que exibir o contador be. Aqui. Vou usar a tag H2 para exibir a contagem de pontos B em B. Então, o que vou fazer agora é especificar que isso é a. Este é o contador B. E você salva no navegador. Linda. Portanto, o estado inicial de a é zero. Deixe-me mostrar a você como está escrevendo este objeto de data. Aqui está? Para kappa B é 15. Então, quando clicamos nesse botão, devemos ser capazes de gerenciar os estados do conselho. Então essa é a beleza de usar os Estados como um objeto. Agora vamos tentar. Você consegue ver que está funcionando perfeitamente bem, conforme o esperado? Eu apertei o reset e vamos tentar para COUNTA be. O contador B não está funcionando. Você sabe por quê? Deixe-me te mostrar rapidamente. Venha aqui. Logo no contador b, estamos enviando a ação de incremento. E essa ação serve para o contador a. contador B funcione, você precisa especificar a ação para o contador B e , em seguida, despachar essa opção. Deixe-me te mostrar aqui. Isso é para o contador a e isso é o contador a. Agora vou fazer o incremento B. Vou fazer o decréscimo B. Quando chegarmos aqui, desfaça o incremento, diminua B, salve e confira no navegador. Recarregar. Vamos fazer o teste e contra-aérea. Você consegue ver as redefinições? Experimente no balcão B. Pode olhar. Tudo está funcionando perfeitamente, conforme o esperado. Tudo bem, então, em resumo, ao usar a ação como um objeto, você pode passar dados adicionais para a função redutora. E ao usar o estado como um objeto, podemos manter e acompanhar várias variáveis de estado. E neste caso, aqui estão as variáveis de estado a e B. E podemos fazer isso simplesmente porque o estado é um objeto, que é esse cara que você vê aqui. Deixe-me te mostrar rapidamente. Eu só tenho que parar com isso. E então aqui está o objeto. Simplesmente porque o estado é um objeto, somos capazes de manter esses caras aqui. Isso é tudo por enquanto. Nos vemos na próxima palestra. 45. 43 Redutor de uso múltiplo: No exemplo anterior, conseguimos acompanhar dois contextos diferentes usando o estado como um objeto. E para atualizar o conteúdo, precisamos criar malas adicionais no método redutor. Mas se tivermos que chegar até nós com a mesma transição de estado, há uma abordagem mais simples para fazer isso. Então, crie rapidamente um novo componente chamado minha conta ou três. Certo? Vamos usar a prática de redutores. Abra meu braço de controle. Vamos destacar e copiar todo o código e depois colá-lo aqui. Só precisamos mudar o nome da empresa para meu contato três, salvar, abrir o componente do aplicativo e renderizá-lo. Destaque isso, coloque um comentário sobre isso. E depois chegue ao topo. Temos que importar meu contato três do uso da barra de componentes, reduzir a prática de cortar minha conta ou três. Vamos renderizá-lo aqui. Seguro. No navegador. Boom, o aplicativo está bom. Agora temos uma aplicação simples de contador. De frente para o contra-3. Portanto, o próximo passo é adicionar outro contato de estado com exatamente a mesma transação, que é incrementar, diminuir nossa funcionalidade de redefinição. Se for esse o caso, o que vamos fazer é criar um redutor de uso adicional. Então, aqui vamos ter uma constante. Vou ligar para esse cara, chega a vírgula. Vou ligar para esse cara que foi enviado para. Em seguida, invocamos o redutor de uso. E com certeza eles usam reduzir nossos textos no método redutor como primeiro argumento e depois o estado inicial como segundo argumento. Então, diretamente na div, temos que despachar esse cara. Então, vamos fazer isso rapidamente. Destaques das linhas 23 a 26. Copiar. Venha aqui. Vamos criar outro div e depois colá-lo dentro desse div. Então, isso vai ser enviado desse jeito, desse jeito. E aqui temos dois registros que mostram qual é esse cara aqui que está acostumado a controlar o estado. Ok, vamos torná-lo um pouco legível. Eu vou fazer exatamente assim. Quando você salva e acessa o navegador. Você pode ver que temos o primeiro contato e depois o segundo contador. Vamos tentar. Incrementar, diminuir, redefinir, incrementar, diminuir a roseta. Você pode ver que tudo está funcionando perfeitamente, conforme o esperado. Tudo bem, então, ao trabalhar com variáveis de estado diferentes que tenham exatamente a mesma transação de pontos, eu sugiro que você use a abordagem de redução múltipla. E isso ajudará a evitar a complexidade de gerenciar o estado se ele for um objeto. E também para evitar que dupliquemos o código na função redutora. Eu entendo que essa palestra é bem complicada, mas eu sugiro que você reproduza o vídeo repetidamente para guardar sua memória. Isso é tudo por enquanto. E na próxima palestra, aprenderemos como gerenciar o estado global. Se você usar o espremedor e usar o concurso. Vejo sua palestra internista. Mantenha o foco e tome cuidado. 46. 44 useState e useReducer: No nível do componente, especificamente, você viu um exemplo de gerenciamento estadual local com redutor de uso. No entanto, pode chegar um momento em que você queira comunicar o estado entre os componentes. Então, consequentemente, você pode querer operar com o cenário global. E agora a questão é: como abordamos isso? Ao combinar o redutor de uso e os concursos de uso, você não conseguirá gerenciar o estado global. Então, nesta palestra, aprenderemos como usar, usar concursos e usar o redutor para gerenciar e distribuir o cenário global. Essa será uma combinação muito boa. Estão certos. Agora, vamos considerar uma aplicação de contador simples com seis componentes diferentes, empresa, ABC e XYZ. Portanto, o estado do contador será mantido no aplicativo Js. E a tarefa aqui é compartilhar o estado do contador entre os componentes x e z. E também vamos compartilhar o método, atualizar o estado, mergulhar na árvore de componentes sem precisar sondar, detalhar os componentes intermediários. E a solução para esse problema é usar a API do concurso. Então, como estamos trabalhando com ganchos, vamos usar o gancho de concurso para fornecer a necessidade do valor necessário para gerenciar o contraste nos componentes a, x e z. Vamos começar. Aqui mesmo. Eu limpei o componente do aplicativo. É bem simples e acredito que você pode fazer isso do seu lado. Então você só precisa limpar todos os componentes que importamos e depois excluir todas as renderizações. Vou explicar esse exemplo de uma forma que você o entenda bem o suficiente. Agora, vamos começar. Dentro do diretório do componente. Vamos criar um novo pacote chamado use concursos com redutor. Certo? Neste pacote, criaremos os componentes a , x e z. Gere rapidamente o componente funcional em outros arquivos. Não fiz isso. O próximo passo é criar um contador simples no componente do aplicativo, no componente aplicativo e no peso. Já fizemos isso antes. Então, tudo o que vamos fazer é copiá-lo do meu balcão. Um de G é um. Então, vou copiar da faixa 52, cisteína, voltar para o componente do aplicativo e depois para o território do pestis. Então, vamos importar rapidamente que eles usam redutor no nível superior. Então, temos que colocar uma vírgula aqui. Use o redutor. Então, dentro do componente do aplicativo, que é esse cara aqui, vamos invocar o método use reduce. E, claro, isso inclui dois parâmetros. Um é o método redutor e o segundo parâmetro é o estágio inicial. E tudo isso retornará uma matriz de duas entradas. Eu vou fazer const. O primeiro elemento será a conta, que armazenará o valor de todo o estado. E o melhor elemento dentro dessa matriz será o método de despacho. Temos que atribuí-lo assim. O mais simples é que isso seja usado para manter todo o estado, que é armazenar o valor de todo o estado. Em seguida, eles serão usados para despachar a ação Bhanwari. Quando prosseguimos com a implementação. Você definitivamente vai entender isso bem o suficiente. Vamos exibir rapidamente o valor do estado, certo, para inserir os GSAs. E, claro, vamos renderizar os componentes a, x e z. Vá para o topo. Temos que importar o componente a do concurso de uso de barra competente com a barra redutora competente a. Em seguida, vamos importar o componente x, o componente z. Vamos analisá-lo aqui. Então, a intenção aqui é enviar uma ação, certo, dentro desses componentes. Então, queremos gerenciar esses dados aqui, certo? N-componentes a, x e z. Essa é exatamente a intenção. Isso aqui é chamado de estados globais. E queremos gerenciar os períodos de entardecer nos componentes aninhados. Ensinar bem, é lindo. Se tivermos que enviar a ação dentro desses componentes, teremos que fazer uso do concurso para fornecer o valor da contagem e o método de envio a serem consumidos nesses componentes. Então, vamos criar rapidamente o concurso usando a API do concurso crítico. Bem no topo. Vamos ter const, can't contest, equa, React dot, criar concursos. Então, depois de criar o concurso, também precisamos exportá-lo. Feito isso, temos que fornecer um valor a esse concurso e, em seguida, encapsular o componente anterior no provedor do concurso e especificar os atributos de valor, que são o valor atual e o método de envio. Deixe-me te mostrar rapidamente. Então, aqui, vamos encerrar todo o aplicativo com o concurso que criamos. E é o fornecedor de contadores de pontos porque temos que fornecer o valor, um destaque e depois recortar, vir aqui, colar. E agora temos que fornecer o valor, valor igual. Temos que pegar um objeto. Então, vamos fazer com que os estados de contagem estejam em coma e a contagem de despacho será despacho. Feito isso, ao verificar o navegador, você verá esse erro. O estado inicial não está definido. Volte e teremos que definir o estado inicial à direita, no topo. Os estados iniciais são iguais a zero. Então, quando você faz isso e dá uma olhada no navegador, você pode ver que os cones iniciais zero e esse é o valor dos estados. Então temos a, x e z competentes. Então, o próximo na fila é consumir o estado e o método de despacho. Então, para isso, vamos usar o concurso que voltou ao código VS. Vamos adicionar rapidamente à empresa em um g aqui no topo. Também temos que importar o concurso de uso. Precisamos importar o contexto que criamos no componente do aplicativo. Importar. O nome do concurso é contagem de concursos da AP. Tudo bem, então é hora de consumir o concurso. Então, certo, dentro do componente, vamos invocar o contexto dos EUA. Vamos considerar o concurso como parâmetro. Em seguida, temos que atribuí-lo a uma variável. Const pode competir assim. Feito isso, poderemos acessar o método de envio mantido no meu contador 1, copiar o botão e depois colá-lo no componente a. Ok, vamos copiar tudo daqui, incluindo a tag principal e depois ir para a empresa a. E aqui só precisamos colá-lo entre a tag div. Exatamente assim. Vamos formatar rapidamente para ter um recuo adequado. Bom. Então, agora a contagem vai ser vamos tirar a etiqueta principal por enquanto. Não precisamos disso. Então, aqui não teremos mais um despacho como esse. Então, vamos fazer o despacho do Concurso Count Dot com. Deixe-me mostrar para você no aplicativo Js. Estamos trazendo esse cara aqui para enviar cada uma dessas ações. O mais simples disso. Então, volte ao componente a. Temos que fazer isso durante todo o envio. Então, vou selecionar todas as ocorrências de despacho e apagá-las. Apesar do concurso aqui, sete finalizações de compra no navegador. Você pode ver que o estado inicial é zero e depois o incremento, o decréscimo é reiniciado. Tudo está funcionando perfeitamente bem. Então, só precisamos gerenciar exatamente o mesmo estado no resto dos componentes. Essa é pelo menos a intenção da palestra. Estou aqui. Vou destacar tudo aqui na cópia do componente A, segurar o componente X, realçar e depois limpar e colar. Agora temos que mudar as ocorrências do Componente a para o Componente x. Salvar. Confira. Linda. Não é totalmente bom. Novamente, para os destaques do componente z, limpe-o, cole, altere-o para o componente z. Então, vamos dar uma olhada para ver se conseguimos gerenciar esse estado aqui, certo? Quando as empresas a, X e Z se separam do navegador. Tudo bem, então vamos fazer com que o nome do componente seja descritivo. Venha até a empresa e z e cole aqui, desculpe, competente x. E por último, empresa em z, segura e no osso do navegador. Então, vamos dar uma olhada. Se conseguirmos controlar o estado global a partir do componente a, vamos clicar na votação incremental no componente. Você pode ver que tudo está irregular, definitivamente bem, conforme o esperado. Quando você diminui. Linda. E então, quando você o recebe, boom. Vamos testá-lo em incrementos, decréscimos e recebimentos do componente x. Componente um incremento, um decréscimo, amigos. Isso é extremamente incrível. Portanto, agora podemos gerenciar e controlar os direitos dos estados globais com os componentes n a, X e Z. E isso é possível com o concurso de uso redutor de uso e as visitas. Isso é tudo por enquanto. Nos vemos na próxima palestra. Mantenha o foco no cuidado holístico. 47. 45 useState: Você disse que os navios usam redutor para mostrar a comparação entre os EUA e o redutor dos EUA. Vamos exemplificar isso buscando dados de um endpoint de API. Então, neste exemplo, veremos como buscar dados usando o gancho de efeito com a ajuda dos EUA, que se conecta para manter o status da transação ou transformação. E na próxima palestra, veremos como obter os mesmos dados com o efeito Hooke dos EUA usando o redutor de uso para manter a transação estadual. E ao fazer isso, você poderá comparar a dívida dos EUA. E eles usam o redutor para aprender quando e como usá-los. Nós não acessamos o diretório de componentes. Vamos criar rapidamente um novo pacote chamado ustedes e usar o redutor. Certo? Então, estamos neste pacote, vamos criar um novo componente chamado phage de dados de uso. Gere os componentes funcionais. O que faremos nesta palestra é fazer uma chamada de API para ajustar os dados assim que o componente for montado. E enquanto os dados forem obtidos, exibiremos o indicador de carregamento. Portanto, quando os dados forem obtidos com sucesso, ocultaremos o indicador de carregamento e exibiremos os dados. Por fim, cancelaremos o indicador de carregamento e mostraremos a mensagem de erro se surgir um problema ao carregar os dados. Vamos definir rapidamente as variáveis de estado e os métodos setter. E antes de prosseguirmos com os pais, você precisa importar os estados da UE do React. Portanto, temos que declarar as variáveis de estado necessárias a serem usadas. E aqui teremos o carregamento, conjuntos mais calmos, está carregando. O estado padrão será definido como verdadeiro. Então, quando fizermos uma chamada de API, você verá a barra de carregamento diretamente no navegador. E aqui, teremos o erro. E então vamos colocar a seta aqui. Isso deve ser uma chave de vírgula e o estado inicial aqui será uma string vazia. Por fim, publicaremos a postagem, que deve ser sua alma e suas teclas de vírgula. E o estado inicial será um objeto. Portanto, isso será usado para manter o estado inicial dos dados. E eles serão usados para atualizar o estado inicial dos dados. Em outras palavras, quando buscarmos os dados, eles serão usados para atualizar o estado inicial da postagem. Quando os dados estiverem sendo processados nos bastidores, exibiremos o indicador de carregamento é necessário quando algo der errado. E, por fim, isso será usado para armazenar e atualizar o estado dos novos dados. Isso seria justo. O próximo passo é criar a coluna aplicada e atualizar. A necessidade permanece. Para fazer a chamada de API. Definitivamente, temos que invocar o efeito dos EUA. Primeiro, temos que importá-lo no canto superior direito aqui. Temos que invocar os efeitos. E o efeito assume dois parâmetros. primeira é a função, que neste caso é uma função de seta. E a segunda é uma matriz de dependências, e vou deixá-la como uma área de densidade vazia. Feito isso, o próximo na fila é fazer uma solicitação get. E para fazer isso, primeiro, temos que instalar o Acts Use. E, claro, instalamos axiomas no início da palestra anterior. Mas se você não o tiver instalado, basta acessar o terminal e depois o Controle C para interromper o servidor em execução no momento. E então vamos usar atos de instalação do gerenciador de pacotes node. Eu já o tenho instalado. Portanto, não há necessidade de fazer isso pela segunda vez. Mas se você não o tiver em sua máquina, basta pressionar a tecla Enter para instalá-lo. Deixe-me limpá-lo, vá até o topo e depois não instalei os RTOs, temos que importá-los no eixo de entrada superior a partir dos axiomas. A função dentro do gancho de efeito dos EUA é chamada. Os efeitos. Aqui, pelo menos, tivemos um efeito colateral. Então, direitos dentro do efeito, vamos fazer uma solicitação de obtenção. E então vamos fazer axiomas. A filha simplifica que usaremos o endpoint de espaço reservado JSON. Então, vá rapidamente até o espaço reservado de Jason e copie o URL de uma postagem. E queremos direcionar a rota que retornará uma postagem específica. Eu só vou copiar. Venha aqui, certo? Estamos na corda. Eu só vou pagar. Sempre que fazemos uma solicitação GET, ela sempre retorna uma promessa. Portanto, teremos um Dan Blow Dot. Então, quando a solicitação for bem-sucedida, teremos que fazer a transição de alguns estados. Teremos aqui uma resposta. Quando a solicitação for bem-sucedida, precisamos definir o carregamento como falso. E também precisamos atualizar o estado inicial com os novos dados que enfrentamos. Então, vou definir os dados dos pontos de resposta das postagens. E por último, temos que definir a seta uma string vazia simplesmente porque o Fetch foi bem-sucedido. Erro de configuração. Uma transmissão vazia. Isso acontece quando o Fetch é bem-sucedido, mas nem sempre você terá uma viagem tranquila. Sim, então às vezes você pode ter algum problema. A busca de dados não será bem-sucedida. Então, se algo der errado, temos que pegar a flecha manuseá-la no blog de cartas. Vamos especificar rapidamente o bloco de captura, certo? Depois desse cara, que é a toca, da promessa de que ela retornará, vamos ficar com o sofá. E o que eu vou pegar, nós vamos pegar qualquer flecha existente que for encontrada. Também temos que colocar sua carga em vigor. Temos que definir post como um objeto vazio, que é o estado inicial do colocado. Ok, deixe-me te mostrar o topo. E aqui está, certo? Perfeito. Então temos que definir o erro. Então, algo assim. Então, vamos fazer algo errado. Tendo feito isso nos efeitos. O próximo passo é exibir os dados nos GSAs. Se o componente for Busey carregando os dados, exibiremos o indicador de carregamento. Agora também, quando os dados são obtidos com sucesso, temos que exibir os dados diretamente dentro colchete do cólon, porque aqui temos que usar a expressão JavaScript da insulina. Eu vou fazer se o carregamento for igual a verdadeiro. Tudo bem, então, se o aplicativo estiver carregando, diremos que os dados estão carregando outra vez. Se os dados forem buscados, precisamos obter o título do ponto da postagem. Vamos conferir a postagem. Podemos obter o título ou o corpo. Vamos pegar o corpo do correio. E também queremos exibir o erro na tela. Então, se houver um erro, temos que exibir o erro, que pode ser gravado aqui. E se não houver erro, precisamos configurá-lo para saber quando você salva a mistura de aplicativos para renderizá-la no componente do aplicativo. Venha aqui. E fizemos tudo isso na palestra anterior. Então, eu apenas coloco o comentário sobre eles. Importe, use-o, fago de dados da barra de componentes, use-o e use-o e use-o como redutor, use a era digital. Eu falei demais. Estão certos, então vamos renderizá-los corretamente, dentro do componente do aplicativo. Você declara o efeito deles. Também precisamos executar o aplicativo aqui. E eu vou fazer npm start width para isso. Mostra o indicador de carregamento. E quando o processo foi bem-sucedido, ele garantiu os dados. Portanto, ao recarregar o aplicativo, você definitivamente verá o indicador de carregamento. Você pode ver, embora apareça em um piscar de olhos? Mas se sua internet estiver muito lenta, você a verá em alguns segundos. Dê uma olhada. Você pode ver que tudo está funcionando perfeitamente, conforme o esperado. Então, deixe-me mostrar uma coisa, porque também queremos ter certeza de que o indicador de seta também está funcionando perfeitamente bem. Então, volte para o VS Code. E aqui, vou apenas alterar o URL. Esse URL está incorreto. Portanto, o erro será exibido na tela. Quando você salva no navegador. Recarregar. Opa, algo deu errado. O objetivo deste exemplo é verificar as etapas da transação ao usar o estado dos EUA como uma variável de estado para buscar dados. Vamos ver como fica quando implementamos esse mesmo exemplo com o uso Reducer who? Isso é tudo por enquanto, na próxima palestra, veremos como implementar esse exemplo com o redutor de uso. Nos vemos na próxima palestra. 48. 46 useReducer DataFetch: Na palestra anterior, vimos como buscar dados com o efeito Hooke usando o use that hook para gerenciar a transação imobiliária. Então, neste exemplo, veremos como buscar dados com o efeito americano Hooke implementando o gancho redutor de uso para manter e gerenciar essa transação de TID. Dentro deste pacote, vamos criar um novo componente chamado user user data phage. Gere o componente funcional. Vamos importar rapidamente o redutor de uso e o efeito dos EUA. Então, no nível superior, use redutor, coma. Use o efeito também. Temos que importar nossos CEOs a partir de axiomas. Vamos declarar o estado inicial como propriedade de um único objeto. Deixe-me mostrar como fazer isso rapidamente. Consiste no estado inicial, defina-o como um objeto vazio. E bem, dentro do objeto, vamos agrupar todo o estado que teremos no aplicativo, diretamente dentro. Vamos fazer o carregamento, configurá-lo como verdadeiro, assim como fizemos na aula anterior. O erro o definiu como uma string vazia e a postagem como um objeto vazio. Então, essas são as transições que precisamos neste aplicativo. E com isso, conseguimos agrupar todo o estado dentro de um objeto. E vasto, extremamente legal. Vamos definir rapidamente a função redutora. Então, tendo feito isso, venha aqui, temos que invocar que eles usam redutor. Então, dispostos a usar o redutor, vamos considerar o redutor e o estado inicial como parâmetro. Então, esse é o estado inicial que temos no topo aqui. Para o redutor, também temos que definir o redutor. Vou fazer const, reduzir um núcleo, configurá-lo para uma função de seta. E a redução que usa dois parâmetros. O primeiro são os Estados e depois a segunda é a ação. Agora temos uma transição em dois estágios a ser implementada. primeira é quando a solicitação é bem-sucedida e a segunda é quando a solicitação falha. Deixe-me te mostrar rapidamente. Volte para o estado estacionário do fago nos EUA. Esta será a primeira transição de estados, e esta é a segunda transição de estado. Vamos ver como implementá-los rapidamente. Então, certo, dentro da função redutora, vamos ter um interruptor. E a expressão do switch será do tipo ponto de ação. Então, o primeiro caso será data fetch socks x. Data underscore fetch underscore socks x. Então, se tudo estiver bem, agora vamos voltar a carregar, assim como fizemos na aula anterior. A postagem. Vamos ter a vírgula action dot payload. E então o erro também será uma string vazia. O segundo caso é quando os campos de solicitação. Então, aqui teremos os dados do caso sublinhado, busca e erro de sublinhado. Quando ocorrer um erro, retornaremos aqui algo assim. Certo? No retorno, vamos definir o carregamento para forçar a postagem a ser definida como um objeto vazio e, em seguida, o erro é que algo deu errado. E, claro, temos que especificar o caso padrão, que retornará o estado. Vamos formatar rapidamente o código para obter uma indentação adequada. Ainda não fiz isso, venha aqui. Portanto, para usar o gancho do redutor, ele retorna um par de valores, que é o estado atual e o método de despacho const state comma dispatch , e então o atribui assim. E agora vamos fazer a chamada de API. E, claro, isso deve ser feito dentro do efeito que permite invocar rapidamente o efeito dos EUA. Só precisamos copiar a palestra anterior de frente para usar dados, busca de dados. Então eu vou copiar das linhas 92, linhas 21. Copiar. Venha aqui, certo? Estamos na função. Temos que pagar. Vamos fazer as mudanças necessárias. Portanto, só precisamos substituir as ocorrências usadas diretamente no bloco prometido. Vamos destacar as faixas 35 a 37. Limpe-o. Então, agora, quando o engordado é bem-sucedido, temos que despachar a ação. Despacho. Certo? Estamos no método de envio. Vamos pegar um objeto. E então temos que especificar o tipo de ação e o tipo de ação a ser enviada quando a busca for bem-sucedida são os dados sobre o fago Dusko nas meias Vasco x. Deixe-me mostrar na parte superior. Aqui estão os destaques e depois Copiar. Venha aqui, cole. Estamos na corda. Quando enviamos os tóxicos para a busca de dados, precisamos especificar a carga útil. E a carga útil serão dados de pontos de resposta. Deixe-me explicar para você o que é uma carga útil em um GeV. A carga útil são os dados que seu redutor usará para atualizar o estado. Então, vamos pegar novos dados. E então isso será usado para atualizar o estado inicial. E, claro, o estado inicial é apenas um objeto vazio. Então, diretamente no bloco de captura, temos que enviar a ação da flecha. Despacho, certo? Método disposto a enviar. Temos que especificar o tipo da ação. O tipo dessa ação será busca de sublinhado de dados, erro de sublinhado. Venha aqui e cole. É tão simples quanto isso. Portanto, não precisamos especificar a carga aqui simplesmente porque já especificamos a mensagem de erro. E aqui está a mensagem de erro. Vamos exibir rapidamente os dados no navegador. Só precisamos copiar os antagonistas dos exemplos anteriores. Um anexo indica que todos os nomes das variáveis simplesmente porque eles fazem parte do objeto de estado, certo, certo, dentro do fago de dados dos EUA, só precisamos copiar o corpo assim. Destaque e copie. Venha aqui. Cole assim. Vamos formatar rapidamente para obter uma indentação adequada. Perfeito. O que vou fazer agora é acrescentar estados a todas as variáveis. O ponto de estado está carregando. E aqui vamos fazer o DOT estadual. Publique esse corpo. Renderize isso rapidamente no componente do aplicativo, e vamos ver o que temos no navegador é reduzir nossa busca de dados a partir de uma barra competente todos esses níveis de diretório que você precisa segmentar. E venha aqui, por favor, comente sobre esses enormes fagos de dados redutores. Salve e vá para o navegador. Vamos ver o resultado esperado. Opa, algo deu errado ou certo, pessoal. Você pode se lembrar de que, na palestra anterior, alteramos o URL. Então, temos que voltar para Jason. Segure para copiar o URL apropriado. E aqui está. Copie, venha aqui e cole. E acho que também é bom fazer a correção aqui. Tudo bem, para que você não tenha problemas no futuro quando quiser referenciar meu código. Ok, por aqui, economize e vamos ver o resort acelerado. Eles são tão lindos. Tudo está funcionando perfeitamente, conforme o esperado. Agora, a diferença entre esse exemplo e o que fizemos na aula anterior é que conseguimos agrupar o estado relativo. Deixa eu te mostrar aqui em cima, assim. Além disso, as transações em etapas também são agrupadas. Agora, o argumento é esse. Se eles usarem o redutor e deduzirem que os Hooke são usados para gestão estadual. Quando será preferível usar o usuário-usuário novamente? Os EUA se conectaram tão rapidamente. Vamos discutir isso na próxima palestra. Isso é tudo por enquanto. Nos vemos na próxima palestra. Mantenha o foco no cuidado holístico. 49. 47 useCallback de Callback: Nesta palestra, estudaremos outro gancho de impotência, que é o retorno de chamada dos EUA. No entanto, é muito importante entender a otimização do desempenho antes prosseguirmos com os retornos de chamada de uso. E, portanto, isso está claro para você. Agora podemos discutir o que é um retorno de chamada de uso, por que e quando você deve usá-lo. E aqui, eu já criei uma contra-obrigação simples. Tão rápido, deixe-me explicar isso. Vamos falar sobre os componentes do aplicativo. E aqui nós renderizamos um componente chamado componente principal. E aqui está, certo, querendo o componente principal, temos dois componentes diferentes, que são reutilizados com propriedades diferentes para mostrar informações diferentes. E o primeiro é o componente Counter. Esse componente contador aqui é responsável por exibir o número atual de professores. O componente do botão é responsável por incrementar o professor. E aqui reutilizaremos o componente Counter para mostrar o número de alunos. E também reutilizamos componente do botão para incrementar os alunos. E toda essa função aqui é definida na parte superior. Aqui temos os incrementos, a função de bate-papo, os incrementos dos alunos e, em seguida, temos as variáveis de estado necessárias na parte superior. Certo, estamos nessa função. Estamos incrementando, ensine-nos em cinco. Aqui estamos incrementando os alunos em dez. Tudo bem, então tudo isso acontecerá quando o botão for clicado. Então, volte aqui. Ao observar esse componente, você perceberá que estamos passando no teste como sondas e também no estado atual do professor. E no componente inferior, pegamos o clique da alça como sondas e, em seguida, passamos a função de teste t de incrementos conforme seu valor. Essa função é definida na parte superior. Claro que eu já te mostrei. E a mesma coisa aqui. Pegamos a contagem de intestinos como adereços e depois passamos o valor dos estudantes atuais, certo? Não seria esse botão, passamos o clique da alça como sondas e estamos absorvendo os incrementos que os alunos, conforme seu valor, que é o valor dos prompts, acessamos rapidamente o componente do botão. Então, logo na parte inferior, os componentes seriam alça desestruturada, camarilha e filhos. Aqui implementamos um botão ao clicar neste botão. Estamos recebendo essas instruções, que são a alça de clique em que ela tem o valor do professor incremental na função de aluno de incrementos. E aqui nós os estamos passando para crianças como um HTML interno. Então, isso vai mostrar o teste entre o Bolton. Deixe-me mostrar rapidamente o componente principal. Então, o HTML interno aqui, esse cara incrementa os alunos e incrementa o professor. Eles serão exibidos por causa dos adereços das crianças. Claro, você já deve saber disso. Rapidamente, vamos passar para o componente Counter. direitos dentro do componente Counter destruiriam seu teste e sua contagem. E aqui estamos fazendo testes e contando a contagem, que mostra o valor atual dos professores e dos alunos. Para finalizar, criamos um novo diretório chamado use callback practice. Aqui está. Então, nesse diretório, criamos todos esses componentes e, em seguida, renderizamos o componente principal no aplicativo Js. E, com certeza, o componente do botão e o componente de contagem estão aninhados no componente do domínio. E no topo, nós os importamos, é tão simples quanto isso. Não entendi o aplicativo. Vamos prosseguir rapidamente com os negócios do dia. Feche isso. Portanto, o objetivo deste exemplo é focar na otimização do desempenho e medir o desempenho. Temos uma declaração de registro aqui. Deixa eu te mostrar. Você pode ver que isso ajudará a mostrar o componente que está sendo renderizado. E aqui também, temos algumas declarações de log. Então, direitos dentro do terminal. Temos que executar o aplicativo. Perfeito. Isso é exatamente o que estamos esperando. Então, quando eu clico em incrementos, cada um que nos ensina será incrementado em cinco. Você vê? E quando eu clico em incrementos , estudantes e estudantes serão incrementados ao tirar. Tudo parece estar funcionando perfeitamente bem. Vamos dar uma olhada rápida no console e ver quais arpões estão mais altos, certo? Então, para obter estatísticas, só precisamos limpar o console novamente para que ele pareça limpo. Agora, vou clicar no incremento de t vezes a votação. Quando eu clico nos professores de incremento, você verá a renderização dos professores, mas em incrementos os detalhes estão aqui. Você verá renderizações de estudantes e renderização de barcos incrementa estudantes. Quando eu clico nos incrementos de estudantes, você verá uma senhora mesma declaração de registro renderizando professores, incremento de votos, professores renderizando estudantes, renderizando incrementos de alunos. Então, infelizmente, é aqui que está o problema. Porque se clicarmos nos professores incrementados, não há necessidade de renderizar novamente o componente de incrementos do aluno. Mas, nesse caso, quando incrementamos os professores, os componentes dos alunos serão renderizados novamente. Além disso, quando incrementamos os alunos, os componentes do professor serão renderizados novamente. E isso causará alguns problemas de desempenho em seu aplicativo. Então, imagine que temos mais de 100 componentes aqui. E ao atualizar um único componente, o restante do componente da década de 1990 será renderizado novamente. Amigos. Isso não será nada bom porque você começará a ter algum problema de desempenho. Portanto, para otimizar o desempenho, precisamos renderizar com precisão apenas o componente que precisa ser renderizado novamente quando ele declara ou solicita alterações. E isso será feito com o React dot memo. React dot memo é uma ferramenta fantástica para memorizar componentes funcionais. E quando aplicado corretamente, evita que um componente funcional não seja renderizado novamente se o estado dos prompts não foi alterado. Parece bom. Belo poder, certo? Portanto, você pode pensar memorização como uma forma de valor fundamental, que ela não precise ser recalculada quando o estado ou as sondas não mudarem. Então, vamos otimizar rapidamente esse aplicativo com o React dot mammal VS Code. E rapidamente vamos para o componente principal. Tudo bem, então, para otimizar o aplicativo, o que vamos fazer é muito simples. Então, o que vou fazer agora é destacar os padrões de exportação desse cara e depois chamá-lo. Venha aqui, cole, e então vamos fazer React Dot Mammal. E agora temos que passar. O componente é tão simples quanto isso. Então, o que vou fazer agora é destacar e copiar. Vamos para o componente de votação. Venha aqui, cole. Temos que mudar o componente para o componente votação. Por aqui. Vamos remover os padrões de exportação. Faça o mesmo no componente Counter. Remova os padrões de exportação, venha aqui e cole. Então, aqui temos que passar o componente de preocupação, que é o contra-componente. É tão simples quanto isso. Salve e vamos dar uma olhada no navegador. Atualizar. Na primeira renderização, você verá todos os componentes aqui mesmo no console. renderização nos ensina a comprar aleatoriamente em incrementos, professores, renderizar estudantes e, em seguida renderizar incrementos de votação no aluno. Vamos limpar o console. Agora, vamos tentar clicando no professor de incremento. Você pode ver? Agora temos professores de renderização, professores incrementais comprados aleatoriamente e, em seguida, renderização de incrementos de votos de estudantes. Por enquanto, podemos otimizar um pouco o aplicativo. Porque aqui ainda temos a renderização, mas em incrementos o aluno diretamente no console, o que não é muito bom. Então, quando atingimos incrementos, aluno, você verá incrementos aleatórios trazidos, professores renderizando alunos e, em seguida, incrementos aleatórios de internação para estudantes. Portanto, a intenção desta palestra é evitar renderizações desnecessárias. Porque quando você clica na votação do aluno, o componente relacionado ao professor também não deve ser renderizado novamente. Quando você clica nos professores, o componente relacionado aos alunos não deve ser renderizado novamente. E agora isso representará outro desafio, porque não estamos mudando o estado do componente estudantil. Mas aqui está sendo renderizado novamente. Deixe-me te mostrar rapidamente novamente. E eu clico em recursos incrementais. Você vê que a renderização do voto incrementa os estudantes. Não estamos mudando o estado do componente estudantil, então não queremos que ele seja renderizado novamente. Mas aqui no console, você pode ver que a votação do componente estudantil está sendo renderizada novamente. Ao limpar o console e fazer o mesmo para incrementar o aluno, você verá o componente relacionado ao professor, que é o componente de botão do professor. Também está sendo renderizado novamente. Portanto, isso é chamado de renderizações desnecessárias. Deixe-me explicar rapidamente o que acontece sob o capô. Vá para o componente principal. Então, aqui temos o componente Counter e ele aceita professores como sondas. O componente do botão aceita os incrementos do professor, pois ele sonda o valor, que é a função definida na parte superior. Aqui está? Então, isso significa simplesmente que, quando o estado do professor for atualizado, o componente Contador do professor e o componente de botão do professor serão renderizados novamente. Mas o problema agora é que até mesmo a votação dos estudantes está sendo renderizada novamente. Embora o componente de contato de um aluno não seja renderizado novamente. Isso ocorre simplesmente porque quando uma nova chamada incrementa cada função nossa, uma nova função de aluno de incrementos é criada toda vez que o componente pai é renderizado novamente. E, com certeza, ao trabalhar com função, devemos considerar uma igualdade de referência. Portanto, mesmo que essas duas funções se comportem exatamente da mesma forma, isso não significa que elas sejam iguais uma à outra. Portanto, a função antes da nova renderização é diferente da função após a nova renderização. Então, simplesmente porque passamos a fortuna como adereços, React, dot memo perceberá rapidamente que as sondas mudaram e, portanto, não conseguirão evitar a nova renderização. Alguns listrados, certo? Deixe-me detalhá-lo. Quando você incrementa professores em novos incrementos, função do aluno será criada, que fará com que os incrementos da votação do aluno sejam renderizados novamente. E quando você incrementa os alunos em novos incrementos, cada uma de nossas funções será criada, que também fará a função de incremento do professor seja renderizada novamente. E agora a questão é: como informamos, reagimos para não criar novos incrementos nessa função quando atualizamos Os professores estão certos. Então aqui é que Lee é onde você ganha dinheiro. Então, qual é o uso de ganchos de retorno de chamada? Eles usam callback e retorna a versão MMOs da função de retorno de chamada que só tinge se uma das dependências foi alterada. Então, na simplicidade, eles usam o callback hook que é usado quando você tem um competente no qual uma criança está renderizando repetidamente sem a necessidade dela. Tudo bem, então, para implementar o retorno de chamada de uso, várias condições devem ser satisfeitas. A condicional é que devemos ter uma função de retorno de chamada. A segunda condição é que devemos otimizar os componentes do gráfico com o React dot memo. Deixa eu te mostrar. Aqui. Otimizamos o componente infantil e aqui também otimizamos o componente infantil. A terceira condição é que devemos verificar a igualdade de referência. Para a igualdade de referência, temos que verificar se as funções são iguais. Portanto, se a condição acima for satisfeita, podemos então otimizar ainda mais nosso aplicativo com o gancho de retorno de chamada dos EUA. Certo? Portanto, para implementar o gancho de retorno de chamada de uso, várias etapas estão envolvidas. Não se preocupe, as etapas são realmente muito simples. Role até o topo. Primeiro, temos que importar o uso Kohlberg. E depois disso, a etapa número dois é invocar o uso Kohlberg. E eles usam callback como uma função que recebe uma função de retorno de chamada como seu primeiro argumento. Então, o que eu vou fazer agora é copiar essa função, assim, realçar a cor. Venha aqui e cole. E depois disso, temos que atribuí-lo a uma variável como essa. Certo? Linda. Portanto, o segundo argumento do retorno de chamada dos EUA é uma artéria de dependência. Então, o que vou fazer agora é especificar a vírgula e depois pegar a área de dependência. E esse retorno de chamada aqui depende da variável do professor para ser acionado. Venha aqui, destaque e copie, cole diretamente na dependência. Essa função será acionada somente quando o estado dos professores mudar for tão simples quanto isso. Então, vamos replicar a mesma coisa para o aluno. Use o callback. Aceite uma função de retorno de chamada como seu primeiro argumento. Copie isso. Destaque e cubra, venha aqui, cole. Então, aqui, temos que atribuí-lo a uma variável como essa. O segundo argumento é uma matriz de dependências. Isso aumentará quando o estado do aluno mudar. Portanto, só precisamos especificar os alunos como sua matriz de dependências. Então, isso significa simplesmente que depende do estado do aluno para se empolgar. Se os alunos não mudassem, a função não seria detectada. É tão simples quanto isso. Então, temos que atribuí-lo assim. Feito isso, vamos dar uma olhada rapidamente no navegador. Atualizar. Bonitos para a época da força de trabalho quando o aplicativo é carregado, todos os componentes serão renderizados. Vamos atualizar rapidamente o console. Com tantos cliques nos professores de incrementos no console, você perceberá que somente o componente relacionado ao teste t é o que está sendo renderizado novamente. Ok? Portanto, você não receberá renderizações desnecessárias mais renderizações desnecessárias, como o componente Students. Além disso, quando você incrementa os alunos, vamos limpar o console e depois incrementar até o fim. Você perceberá que somente o componente posterior do aluno é o que está sendo renderizado novamente na tela. E a prova está no console. Então, com isso, podemos dizer que o aplicativo está totalmente otimizado. Você pode ver que não temos mais algumas renderizações inúteis. Isso é extremamente incrível e eu adoro isso. Amigos. Isso é tudo por enquanto. Nos vemos na próxima palestra. Mantenha o foco e sempre tome cuidado. 50. 48 useMemo de memorando: Na palestra anterior, discutimos o uso do gancho de retorno de chamada, que se concentra na otimização do desempenho. Então, nesta palestra, discutiremos o uso de ganchos de memorando, que também se concentram na otimização de desempenho. O gancho de memorando de uso do React retorna um valor úmido. E eu quero que você pense na memorização como valores cagianos para que ela não precise ser recalculada. Técnicas, eles usam o mama hook, só funciona quando uma de suas dependências é de ações. E isso melhora o desempenho. Então, para entender que a altura funciona, vamos exemplificar isso. Vamos criar rapidamente um novo pacote chamado use memo practice, certo? Estamos na nova pasta de componentes. Disposto a usar mais minha prática. Vamos criar uma nova empresa no meu memorando, counter dot js. Gere rapidamente o componente funcional. E então vamos declarar as variáveis de estado necessárias e definir nossa função para ser usada. E com certeza você precisa importar o estado dos EUA. O que eu só tenho que fazer aqui é usar as teclas de vírgula, que é a função de configuração. O que eu só tenho que fazer aqui é usar as teclas de vírgula, que é a função de configuração. E o estado inicial será. Zero. Destaques, duplique-os. E então eu vou destacar a letra grande, um Comando D para selecionar as ocorrências, apagá-las, alterá-las para que sejam. Portanto, temos as variáveis de estado do contador a e do país B. O mais simples disso. E aqui vamos definir uma função para incrementar a um e depois também incrementar o contador b em dois. Constante. Incremente a. Igual, defina-o para nossa função. E então eu vou colocar o contador a entre colchetes. Vamos receber as novas atualizações, entre em contato com um acompanhante. É tão simples quanto isso destaca, replique-o. Basta selecionar as ocorrências delas, alterá-las para serem. E aqui, só temos que fazer COUNTA ser mais um. Portanto, queremos exemplificar o memorando de uso com um aplicativo simples de contador. Vamos rapidamente renderizar algo na tela. Aqui vamos ter uma tag p. Dentro da tag p, eu vou fazer um e is, é claro que você já deve saber disso. Aqui, queremos implementar um botão para incrementar o contador. Ao clicar nesta votação. Vamos chamar a função de incremento de dívida mais simples. Então, o que vou fazer agora, teremos outro div. Destaca esse cara das linhas 18 a 19, mova-o para essa nova div que criamos. Então, deixe-me formatar rapidamente o código. Perfeito. Então, vou destacar as linhas 15 a 18 duplicatas. Aqui. Vamos fazer b. B e b. E B , Meu Deus, eu deveria ter selecionado as ocorrências e fazer isso uma vez. Ao salvar o aplicativo, vá até os objetos e vamos renderizá-lo. Este lugar é muito bagunçado, mas temos que administrá-lo assim. Importa minha contagem crescente de memorandos de seus destaques originais, resumidos e reduzidos. Faça um comentário sobre isso. Confira no navegador. Linda. Tudo está funcionando perfeitamente bem. Então, vamos experimentá-lo. Um bom, seja bom, tudo funcionando perfeitamente bem. Então, aqui é exatamente onde a diversão começa. Agora, vamos melhorar o aplicativo. Então, digamos que queremos exibir mesmo quando o número é par ou ímpar, quando o número é ímpar. Vamos melhorá-lo rapidamente. Venha aqui. Vamos ter outra função, constante, número par. Defina-o para nossa função. Esse cara vai pegar seus resultados. E aqui eu vou fazer um resultado igual a um módulo dois igual a zero. Assim, é o mais simples. Então temos que devolver qualquer que seja o resultado. Perfeito. Feito isso, vamos exibir rapidamente na interface do usuário. Diretamente na etiqueta p do contador. Temos que colocar alguma condição aqui. Portanto, a é qualquer que seja o valor do estado e, em seguida, se é par ou ímpar. Portanto, temos que especificar se o número é par ou ímpar. E, hum, eu vou fazer isso aqui. Primeiro, temos que chamar a função. Mesmo. Depois disso, temos que fazer um cheque. Se o número for par, então vamos dizer, par. Agora. Vamos dizer estranho. Mais simples que salvar o aplicativo e conferi-lo no navegador. Recarregar. Ok, então vamos incrementar a. Você pode dizer que diz que o contador é um e que é estranho. Incrementa novamente, diz que a é dois, n é par, sem mais nem menos, certo? Mais uma coisa que queremos fazer e que é extremamente importante é tentar induzir a lentidão, a função invernal. Então, vamos supor que queremos que essa função seja executada em alguns segundos. Tudo bem, então queremos um pouco de atraso na oclusão. Então, para isso, temos induzir alguma lentidão na função. Vamos fazer isso rapidamente. Vá para o código VS. Aqui mesmo. Eu vou fazer let i igual a zero. Então, embora eu seja menor que, teremos 09 vezes mais exato, então teremos que incrementar I em um. Feito isso, induzimos lentidão nessa função. Então, isso diminuirá o cálculo em silicones. Vá até o navegador. Vamos recarregar. Agora, quando clico em Entrar em contato com o ar, você pode ver que leva alguns segundos para que a seja incrementado. Tente novamente. Você vê aqui que Lee é onde está o problema. Então, a lentidão foi induzida no campus a. Mas agora, quando clico no contador b, você vê que ainda experimentamos a mesma lentidão. Deixe-me tentar novamente. Você vê que leva alguns segundos para que o contador seja calculado e tenha os resultados exibidos na tela. Mas olha, não é isso que queremos aqui. Tudo o que queremos é induzir lentidão no contato a e não no nascimento. Portanto, não queremos que isso afete o contador b. Então, o que acontece aqui é que sempre que o estado for atualizado, o componente será renderizado novamente. E quando o componente é renderizado, o número par da função é invocado pela segunda vez. E com certeza a função é muito lenta e , portanto, retardará todo o processo e a atualização da interface. Não queremos que isso aconteça com o aplicativo. Portanto, a solução para esse problema é evitar que valores desnecessários sejam recalculados. E neste caso, vamos informar, reagir para não realizar esse cálculo quando estamos alterando o valor do contador, de forma mais simples, que não há necessidade de calcular e mostrar qual é um número ímpar ou mesmo ao lidar com o país B. Porque é exatamente isso que o aplicativo parece estar fazendo agora. Volte. Quando você clica em Contato. O cálculo leva alguns segundos, sem saber se o número é par ou ímpar. contato B não está interessado em ver se o número é par ou ímpar. Mesmo assim, quando você incrementa o contador B, leva alguns segundos para ser calculado. Simplesmente porque essa lentidão que induzimos esse cara aqui está afetando esse cara. Portanto, temos que evitar cálculos desnecessários. E para evitar esse cálculo desnecessário, temos que fazer uso do mamífero americano. Volte ao código VS para implementar o use memo hook. Primeiro. Ele também deve ser importado, assim como todos os outros ganchos. O mamãe hook usado é uma função que devemos invocar. Então venha aqui. Eu vou usar o memorando. O memorando entrará em vigor. O valor da função de retorno precisa ser chamado como seu primeiro argumento. Nesse caso, a função para calcular o número é par ou ímpar. Então, aqui eu vou copiar daqui assim, destaques, recortes, vir aqui e colar como primeiro argumento de uso do memorando. O segundo argumento é uma vírgula de matriz de dependência tomada em uma matriz vazia. Para que essa função seja ativada, ela tem que depender de a. E eu vou fazer o contra-a. assim. Depois disso, destaca esse cara, corta. Venha aqui, atribua-o assim. Feito isso, o número maligno não é mais uma chamada de função porque agora armazena um valor. Então, volte para a interface do usuário ou remova os parênteses. Temos que remover esse cara. Salve o aplicativo, os anticódons, o navegador e recarregue. Certo? Vamos tentar clicando no incremento a. Consegue ver? Demora alguns segundos para que a seja incrementado. Dê uma olhada. Então, vamos experimentar com B. Você vê o contador B ser incrementado sem perder tempo? Agora, a lentidão que induzimos no contador a está funcionando perfeitamente bem apenas no contato a. E, desta vez, não afeta o contador, simplesmente porque implementamos o uso do gancho de memorando para otimizar o aplicativo. E neste caso, estamos tendo a lentidão sendo induzida no contador apropriado. Portanto, sempre que um contato for alterado, o React recalculará o valor e desconsiderará o valor da carta, que simplesmente implica que não usará mais o valor do cartão. Portanto, como o valor nunca mudou para o contador a, não há necessidade de recalcular o valor ímpar ou par e, em seguida react usará o valor da o react usará o valor da renderização anterior, não será afetado por esse clônus que induzimos. E agora a questão é: qual é a diferença entre o retorno de chamada de uso e o uso de mamíferos? retorno de chamada de uso é usado para capturar uma função, enquanto o memorando de uso é usado para cortar o resultado de uma função invocada. simples quanto isso. Ou você pode dizer que o retorno de chamada dos EUA é usado para capturar uma função de retorno de chamada. Isso é tudo por enquanto e até a próxima palestra. 51. 49 useRef ganchos: Nesta palestra, vamos estudar o uso do ref hook. O gancho usual é usado para acessar um elemento DOM diretamente dentro do componente funcional. E também pode ser usado para armazenar um valor mutável que não causa uma nova renderização quando é atualizado. Além disso, usar o roughough hook permite que você mantenha o valor entre as renderizações. Vamos seguir em frente para exemplificar. A intenção deste exemplo é focar o direito causal no campo de entrada quando a página é carregada. Por exemplo, você está criando um formulário de registro. Queremos focar o cursor diretamente no primeiro campo de entrada quando a página for carregada. Crie rapidamente um novo pacote chamado user of practice. E espero que tenham gostado da forma como estou organizando as palestras. Dentro do usuário da prática, vamos criar um novo componente chamado impute de custo total. Os direitos estavam na interface do usuário. Vamos criar uma rixa olímpica. O tipo Equal Test. Feche com a etiqueta de fechamento automático. Renderize rapidamente esse componente no aplicativo. Js importa o foco imputado a esse cara. E aqui temos que focar em períodos. Vamos ver o que acontece no navegador. Aqui está o campo de entrada. Deixe-me ampliar um pouco. Perfeito. Voltar ao VS Code. Focus impute a empresa. A próxima linha é implementar a funcionalidade de montagem em componentes. Primeiro, temos que importar o efeito dos EUA. Vamos invocá-lo rapidamente aqui. Ele usa uma função de seta como seu primeiro argumento. Além disso, ele assume uma dependência RA. Mas, nesse caso, vamos deixá-lo vazio porque queremos que o efeito seja ativado. Portanto, não há necessidade de especificar uma variável de dependência. Ok, então vamos continuar com a grande rave. Mas, acima de tudo, temos que importar a referência de uso como faculdade aqui. Não se preocupe, você definitivamente entenderá que a essência segue adiante. E, claro, queremos que isso aconteça agora. Agora vamos atribuí-lo a uma variável chamada de penetrativa. Não criei o href. O ninho e a linha são fazer uso dele. E então temos que fazer com que tudo isso caiba perfeitamente na tag de entrada, onde podemos usá-la para especificar os atributos href. Temos que chamar a variável em Petrov. O mais simples é que, finalmente, temos que invocar a função de foco no elemento de entrada, certo? Em efeito de desuso, aqui mesmo. Vamos invocar a função de foco. E eu vou fazer em Peter F dot current gods para carros. Exatamente assim. Com isso, React está definindo a propriedade atual Raph para o nó DOM correspondente. Vamos ver o que acontece em um navegador. Você pode ver quando o componente é montado O mouse se concentrará na entrada visualizada. Essa implementação é muito útil quando você está criando um formulário de registro. E você quer que o primeiro campo de entrada no formulário de registro se concentre no momento em que a página for carregada. Você pode ver isso claramente. Use o curso corretamente, dentro do campo de entrada. Mas quando retirarmos o href, vamos fazer um comentário sobre isso. Você pode ver que nada foi encontrado no campo de entrada. Portanto, o campo de entrada não tem quatro núcleos. Mas quando você implementa a referência na recarga do navegador, você pode ver que o campo de entrada está focado? Então, é exatamente isso que o usuário pode ajudar você a alcançar. 52. 50 useRef ganchos temporizador: Para explicar melhor, usuário do hook, vamos configurar rapidamente um exemplo de aplicativo de cronômetro. Então, certo, quando você usa a prática de arbitragem? Vamos criar rapidamente um novo componente chamado timer. Clique com o botão direito em novo arquivo. Ponto do temporizador. Gere o componente funcional. A intenção desta palestra é implementar um cronômetro de intervalo que leva cada segundo para exibir o valor no navegador. Para fazer isso, primeiro, temos que declarar a variável para manter o valor do intervalo. Então, no topo das causas até agora, você deve saber como fazer isso. E aqui vamos declarar uma variável de estado. E vamos chamá-lo de cronômetro. Então, só temos que transformar isso em uma caixa de vírgula aqui. E o estado inicial estará lá. Vamos exibir rapidamente o valor do cronômetro, diretamente nos GSAs. Vou usar a tag H2. Então, aqui eu vou fazer o cronômetro, que é o novo valor do cronômetro seguro. Vamos renderizá-lo rapidamente no componente do aplicativo. E aqui temos que importar o cronômetro dos componentes cortar o cronômetro de barra dos usuários logo abaixo. Vamos renderizá-lo aqui. Ao salvar o aplicativo, finalizar a compra no navegador, você vê que o cronômetro é o estado inicial ou o valor inicial do cronômetro. Volte ao código VS e vamos implementar rapidamente o cronômetro. Para configurar o cronômetro, precisamos implementá-lo diretamente no efeito WHO. Então, no topo, temos que importar o efeito Hooke. Venha aqui. O gancho é uma função e então temos que invocar. Essa função usa uma função de erro como primeiro parâmetro e, também, o segundo parâmetro é uma matriz de dependências. E nesse caso, teremos uma matriz de dependências vazia. Então, na verdade, é onde a transformação ocorre. Vamos ter um intervalo constante, um intervalo definido igual. E, novamente, temos que assumir uma função de erro. Então, dentro dessa função, temos que atualizar o cronômetro. Fazemos isso chamando a função de configuração de um cronômetro, dentro do cronômetro normal, usado no cronômetro anterior. E o Timer Plus anterior, o mais simples. E queremos que eles sejam exibidos no navegador a cada segundo. Então, aqui, vamos colocar uma vírgula aqui e depois induzi-la aqui. Feito isso, precisamos implementar uma função de retorno para limpar o intervalo. Retornar. Aqui eu vou fazer o intervalo de Claire. Temos que passar em Java. Quando você salva e verifica o navegador. Você pode ver? O maior desafio que temos nesta palestra é desligar o cronômetro quando o botão é clicado. Então, vamos implementar rapidamente uma navegação para realizar essa funcionalidade. Temos que especificar o onclick. Ao clicar neste botão. Queremos desligar o cronômetro. Tudo bem, vamos fazer isso e ver no que acontece. Vamos chamar o TVA limpo e depois passar o intervalo. Aqui. Dentro do teste interno, vou fazer o cronômetro de cliques. Quando você salva e verifica o navegador. Veja, diz que o intervalo não está definido. Você sabe, por quê? Volte ao código VS e deixe-me mostrar a você. É simplesmente porque o intervalo variável tem um escopo local apenas no sentido da OMS. Então, quando você faz isso, o intervalo só pode ser limpo, certo? Qual é o efeito de quem? Queremos limpar o intervalo quando o botão é clicado. E imediatamente implementamos o botão. Olha o que acontece. Diz que o intervalo variável do qual passamos aqui não está definido. Mas olha, nós o definimos aqui na linha sete. Então, isso significa simplesmente que esse intervalo só pode ser visto diretamente dentro do gancho de efeito. Para resolver esse problema, precisamos facilitar o uso do href, cuja técnica geralmente tem, também pode ser usada para armazenar um valor mutável que não causa uma nova renderização quando atualizado. Novamente, o usuário f é uma função, então temos que invocá-la normalmente. Mas primeiro, ele precisa ser importado em um clube. Aqui no topo, vamos invocar o usuário F. Agora vamos fazer const, ref em Dava, atribuí-lo assim. Portanto, o próximo item da fila é substituir todas as ocorrências do intervalo pela corrente do ponto de referência. Venha aqui, temos que apagar essa variável. Então eu vou fazer pontos de intervalo. Dados atuais e mais simples. Lembre-se de que temos que substituir todas as ocorrências do intervalo. E aqui temos um aqui que é passado para o método do intervalo de argila. Substitua-o assim. Aqui temos outro. Quando você salva o aplicativo, vamos retirar o navegador. Vamos tentar clicando em declarar tempo limite, votando. Dê uma olhada. Agora, conseguimos limpar o cronômetro. Quando clicarmos neste tabuleiro, o intervalo será apagado e o cronômetro será interrompido. Portanto, esse é outro problema que o usuário resolve. 53. 51 construindo o site de comer de yum (reage a instalação): Nesta palestra, vamos começar a construir o site. E, como sempre, vamos começar do zero instalando um novo aplicativo React no desktop. Vamos criar rapidamente uma nova pasta chamada Yom eats. O ninho e a linha são arrastar e soltar a pasta no VS Code. Então, abra rapidamente o código VS. Vá em frente e arraste a pasta para o VS Code. Vamos maximizar. Então eu vou sair da página de amostra. Abra o terminal integrado do VS Code. E eu vou fazer chá Control and Bark. Ou você pode encontrá-lo no canto superior direito, que é o terminal e depois o novo terminal. Então, vamos usar o comando MUX para criar um novo aplicativo React sem precisar instalá-lo em nosso sistema MP x dash React app. E então queremos instalá-lo em um diretório chamado Klein's. Pressione a tecla Enter para disparar. Ah, a instalação do React js está em andamento. E enquanto a instalação estiver em andamento, quero apresentar a você uma estrutura de utilitários CSS. Essa estrutura é Tailwind. A estrutura Tailwind facilita muito o estilo de seu aplicativo. Em seguida, você pode clicar em Começar para ver como instalar um tailwind inicializado. Aqui está o conselho para fazer isso instalado, você vai fazer npm install dash d, tailwind CSAs. E então, se você quiser inicializar, você vai fazer NP x tailwind CSS. Precisa. Por enquanto, vamos pular o CSS Tailwind. Estou focado na instalação do React. O React foi instalado com sucesso. Portanto, o próximo na fila é iniciar o servidor de desenvolvimento front-end. Vá até o terminal. Primeiro, temos que ver as reivindicações D. Então eu vou fazer npm starts. E aqui está a página de amostra do React. Tudo bem, agora terminamos de instalar o React js. Na próxima palestra, vamos limpar o padrão excluindo arquivos desnecessários que não são necessários nessa causa. E depois disso, criaremos o componente com base no aplicativo que será visualizado. Nos vemos na próxima palestra. 54. 52 Limpe a placa de cozimento: Tudo bem, vamos limpar as placas da caldeira. Portanto, significa simplesmente que queremos excluir arquivos desnecessários que não precisamos para criar o aplicativo. Então, abra rapidamente o SRC do cliente. Aqui. Não precisamos da configuração test.js. Então, vou pressionar a tecla de comando no meu teclado e, em seguida, pressionar o mouse para selecionar, mantendo pressionada a tecla de comando, queremos selecionar várias vezes o resto dos arquivos desnecessários. Então, vou selecionar o relatório, os vetos da web, logotipo do ponto SVG, o ponto de teste ascendente js e, por último, os pontos CSAs. Clique com o botão direito Vamos movê-lo para o lixo rapidamente. E quando isso acontecer, você verá esse erro irritante aqui, certo? Dentro dos grupos de terminais. Selecionamos o aplicativo CSS, mas parece que algo deu errado. Então, eu tenho que excluí-lo novamente porque não é necessário. Sim, o aplicativo dot css desapareceu. E, por favor, não exclua o aplicativo Js. Tudo bem, então o resto desses arquivos aqui são extremamente importantes na construção de nosso aplicativo. Então, abram o aplicativo, judeus. E aqui está reclamando que o logotipo DOT SVG não foi encontrado. Estragar tudo. Aqui está o logotipo dot SVG e, em seguida, aqui está o aplicativo dot css. E, claro, acabamos de excluí-lo. Então, o que vou fazer agora é destacar 1-2 e depois apagá-lo. Role para baixo. Ok, eu acho que está tudo bem por enquanto. A próxima linha do termo é destacar da tag de abertura até a tag de fechamento, porque não precisamos de nenhum desses itens aqui, limpe-o. Comando S para salvar uma parede indeterminada. Diz que o relatório dos sinais vitais também está faltando. E aqui é onde você pode encontrá-lo. O ponto de índice é. Aqui. Primeiro, temos que excluir as entradas nas linhas cinco. Feito isso, foi chamado para cá. Também precisamos excluí-lo. Agora acho que agora nosso aplicativo seria bom. Confira rapidamente o navegador e vamos ver o resultado final. Agora temos uma tela em branco, então esse é exatamente o final esperado. Na próxima palestra, criaremos nossos componentes com base na observação do projeto Yom. Te vejo então. 55. 53 Criar componentes: Antes de prosseguirmos com a criação dos componentes, é extremamente importante observar o site para entender como ele foi visualizado. Vamos crescer rapidamente. Dê uma olhada. Esse design é fantástico, acreditou em mim. Tudo bem, então vamos começar. Agora, ao observar a tela, você perceberá que temos o componente de navegação, banheira aqui, que inclui o Young, seu logotipo aqui, o lote de entrega gratuita. E no centro temos a caixa de pesquisa. No lado direito da tela. Nós também temos as cartas, sim, eu aqui, temos o ícone para alternar a navegação. Quando você clica em. Consegue ver isso? Linda? E também temos o ícone x para dar pistas. Logo abaixo dos principais componentes de navegação, você verá a empresa heroica, onde temos o lindo slide aqui. Você pode ver? E logo abaixo do componente herói, temos os componentes de entrega rápida. Abaixo, também temos os principais componentes de pico. Com este lindo controle deslizante para mostrar, você vai adorar. E abaixo temos o componente do moinho. E aqui está o componente de categorias de tendências. E aqui temos os componentes do boletim informativo. Logo abaixo está o componente alimentar. E agora conseguimos dividir o aplicativo em um segmento menor encapsulado chamado componentes. Então, vamos ao VS Code, criar esses componentes. Vamos arrastar isso para baixo por um momento. Quando o SRC, assim, cria uma nova pasta chamada componentes. Então, dentro desse diretório, vamos criar as flores e forçar, temos o componente Top Nav. Eu vou fazer top nav dot g is. E até o topo. Agora temos o componente herói, ou também podemos chamá-lo de componente do item futuro. Acho que isso soa melhor. Então, eu vou fazer Poucas crianças, zombarias. E depois disso, temos a entrega rápida. Temos o componente de escolhas principais, o componente de refeição, refeição ab.js, categorias de tendências, e eu vou chamá-lo de categorias dot js. Temos o componente de boletim informativo. Por fim, os componentes dos alimentos. Então, esta lista mostra como criar um aplicativo como um profissional. Ao observar o aplicativo, a primeira coisa que você fará é dividir o site em segmentos menores encapsulados chamados componentes. E, claro, agora você já deve saber que esse componente é o componente básico de cada aplicativo React. Então, tendo criado todos os componentes, na próxima palestra, iremos instalar o PTI wind. 56. 54 Instalação de barriga: Vamos prosseguir com a instalação e configuração do Tailwind. Clique no botão Começar. Aqui está o conselho. Então, primeiro vamos fazer npm install dash d, tailwind CSAs. Então, vou clicar aqui para copiar. Volte para o VS Code Terminal e verifique se você está no diretório do cliente. Cole aqui, e isso será usado para inicializar o vento de cauda. Deixa eu te mostrar aqui, não é? Então, quando você clica nesse ícone Copiar, copiaremos a cabine do comando. Então, cetone rapidamente a tecla Enter para instalá-la em fogo ou vento de cauda, subtrai a forma. Vamos dar uma olhada. Por aqui. Vou apertar os componentes. Vamos abrir o arquivo package.json. E quando você rola para baixo, aqui está o Tailwind. Perfeito. Então, aqui você verá o arquivo de configuração do Tailwind dot. Volte para o conselho do ninho para copiá-los aqui e colá-los na matriz de conteúdo. Então, o que eu vou fazer agora é voltar para a área de trabalho aberta. E aqui você encontrará os materiais ou os materiais alimentares. Abra o código **** power. Agora vou copiar esse módulo aqui. Então, vou destacar minha parábola e depois substituí-la. Salvar. Então, a próxima linha é seguir esse conselho aqui, destacar e depois copiar. Ou você pode clicar neste ícone aqui para copiar. Volte, abra o ponto índice dos destaques do CSAs, limpe-o e cole-o aqui. Então, tendo feito isso, conseguimos configurar o Tailwind. Agora eu quero criar um CSS básico para a navegação, ok, então ele será mais parecido com o CSS global para que todas as proteínas na revogação sigam o mesmo padrão. E a maneira como fazemos isso é adicionar base de camada. Então, vamos ter aqui na parte inferior, à direita, estamos na parte inferior. Vou me inscrever. Então, vamos aplicar o estilo storyboard up. Comprei um bloco com traço arredondado x L. Então, na verdade, estamos apenas aplicando o raio da borda ao barco. Ok, então isso vai fazer com que nossas proteínas tenham um pouco de curvas. E agora queremos aplicar um preenchimento a partir do eixo x. Então eu vou fazer p x. Isso realmente implica o preenchimento da esquerda para a direita, ok? Então, qual é o eixo x? E eu vou fazer isso em cinco pixels. Portanto, o PY representa o preenchimento na parte superior e inferior. Então, na parte superior e inferior, teremos um com preenchimento. Então, isso realmente criará espaço na parte superior da parte inferior e na parte inferior. Simples assim. E, claro, se você está se perguntando por que estou tendo todos esses detalhes aqui, é simplesmente porque instalei uma extensão muito inteligente chamada tailwind IntelliSense. Então, deixe-me mostrar como fazer isso agora. Abra a extensão e, em seguida, vamos configurar nosso IntelliSense eólico aqui. É do meu lado? Eu já o tenho instalado. Então, o que você vai fazer do seu lado é apertar o botão de instalação. Ali mesmo. Você verá instalar em vez de desinstalar. Clique no botão de instalação no final para instalar essa poderosa extensão. Na verdade, é tão poderoso quanto a tensão e com certeza será útil. Ok, feche-o. E agora, quando eu passar o mouse sobre a classe, agora , assim, você verá o equivalente em CSS. Então, basicamente, o que fizemos aqui foi aplicar o raio da borda para ser 0,75 rem. E aqui o padrão restante é 1,25 rem. O padrão certo é 1,25 rem. Quando você passa o mouse sobre eles, novamente, a parte superior do padrão é 0,25 rem e a parte inferior do preenchimento é 0,25 rem. Então, isso é simplesmente porque eu instalei uma extensão muito poderosa chamada tailwind IntelliSense. Então, isso realmente lhe dará o equivalente em CSS do Tailwind. E isso ocorre quando você passa o mouse sobre as classes de utilitários. Por exemplo, eu. mouse sobre esta classe aqui. Você pode ver que o que simplesmente fizemos aqui foi implementar a cor da borda e, neste caso, é preto. Isso está desligado agora. E na próxima palestra, começaremos a trabalhar no aluno do Top Nav. 57. 55 Componente de TopNav: Nesta palestra, prosseguiremos com o componente Top Nav. E é aqui que a diversão começa. Então, está certo ao pedir o pacote de componentes. Vamos abrir o canto superior esquerdo do Tata J's. Por enquanto. Vamos derrubar o terminal e depois Comando B para fechar o Explorer. Nosso AFC para gerar o React js são componentes funcionais. Perfeito. Vamos renderizar rapidamente esse componente diretamente no comando P do app jeers para abrir esta pequena caixa de pesquisa na parte superior. E eu vou configurar que G esteja aberto. Então, dentro do div com o nome da classe AB, vamos renderizar a parte superior agora, fechá-la com a tag de fechamento automático e a carga técnica. A parte superior agora é importada automaticamente em uma banheira. Então, se você está se perguntando como fazer isso, ok, vamos começar do zero, limpe-o. E eu vou fazer o Top Nav partir dos componentes da barra de pontos slash top nav. É tão simples quanto isso. Vamos voltar ao componente Top Nav. Tudo bem, então vamos dar a esse div um nome de classe. Em seguida, vamos especificar a largura máxima. Vamos fazer uma margem de 15, 20 da esquerda e da direita. Vamos fazer com que seja automático. E vamos fazer com que ele exiba, flexione, justifique o conteúdo, o espaço entre eles. E então vamos alinhar os itens para centralizar o preenchimento. Vamos fazer com que seja o mais simples, certo. Eu sei que alguém está curioso sobre todos esses termos porque alguns de vocês, isso parecerá meio-dia, mas incautos. Depois da minha incrível explicação, você definitivamente a entenderia bem o suficiente. Então, o que está acontecendo aqui é que recebemos essa div, uma largura máxima de 15, 20. E faça anotações, é assim que se especifica um valor personalizado. Então, eu posso limpar isso assim, e então você pode especificar o valor real da classe. Mas se você quiser especificar um valor personalizado, você abrirá o bloco assim e depois fará 15, 20. Então, quando eu passar o mouse sobre a classe agora, ela mostrará o equivalente real do CSS que está funcionando nos bastidores. Deixe-me mostrar, espero que na largura máxima, então aqui temos a largura máxima de 15, 20. Quando eu passo o mouse sobre o MX auto. Você pode ver aqui que temos a margem esquerda para ser automática e a margem direita para ser automática. Portanto, o MX simplesmente implica margem no eixo x, que é uma atriz diz margem da esquerda para a direita. E aqui temos o display flex. E eu sei que você não vai se perguntar se não mencionamos a tela aqui. Mas quando você passa o mouse sobre o fluxo da classe, você verá a tela flexível. E aqui justifique o espaço de conteúdo entre. Deixa eu te mostrar. Você pode ver que justifique o espaço de conteúdo entre e alinhe os itens ao centro e o preenchimento é uma rédea. Com a simplicidade dessa explicação, sei que você a entenderá melhor o suficiente agora. Então, vamos começar. O nervo superior é dividido em três lugares. Temos o lado esquerdo, o centro e o lado direito. Então, o lado esquerdo, deixe-me mostrar rapidamente. Aqui. No lado esquerdo, temos o hambúrguer, o jovem, seu logotipo e a entrega gratuita. E no centro temos a caixa de pesquisa. No canto superior direito, temos as cartas. Então, vamos trabalhar no lado esquerdo. Vamos ter um div aqui com o nome da classe e escrever usando o nome da classe, vamos ter uma tela flexível, alinhar itens, centralizar. Rapazes. Algo que eu realmente quero chamar sua atenção é que o vento de cauda misturou Eileen, muito fácil. Honestamente falando, ao final deste curso, você sempre desejará usar o Tailwind, acredite em mim. Agora vamos ter outro div com o nome da classe de ponteiro de conhecimento causal. Então, nesse div, vamos renderizar o ícone. E então, para isso, temos que instalar o ícone do React. E agora eu vou fazer. O Npm instala os ícones do React Dash. Exatamente assim. Cetona, a tecla Enter. Tudo bem, então os ícones do React instalados, subtraem, caem. Quero dizer, claro que você abre o arquivo package.json e aqui está. Feche isso. Então , dentro desta div, vamos renderizar um ícone chamado menu delineado. Mas antes de fazer isso, primeiro precisamos importá-lo dos ícones do React. Então, eu vou fazer importações. Eu delineei o menu na barra de ícones do React. Temos dois sufixos com IA. Porque aqui nós o prefixamos com IA e também temos que revesti-lo aqui com um corante. Portanto, todos os ícones relacionados à IA serão importados aqui. Legal. Então, acho que devemos fazer isso agora para que não tenhamos que perder tempo fazendo isso no futuro. Aqui eu vou fazer. Eu delineei pistas de contorno mais calmas. O ícone de fechamento do menu. Deixe-me te mostrar rapidamente esse cara aqui. Então esse é o cara que acabamos de importar, que é o menu offline de IA. E esse é o esboço, esse cara, eu sei que você entende todas essas abas. E por último, tag de campo. Então, todos esses topos são prefixados com AI. E é por isso que o revelamos com um belo. Agora vamos ver o menu que eu descrevi. Vamos dar um tamanho. Eu digo 25. Seguro. A partir daqui, faremos o npm starts para iniciar o projeto e garantir que você renderize esse componente diretamente no aplicativo. Opa, desculpe pessoal, há um erro no comando. Então eu acho que isso vai funcionar desta vez. No canto superior esquerdo da tela, você verá o menu de tópicos. E esse ícone aqui será usado para alternar o desenho lateral. Logo após a divisão de encerramento. Vamos ter uma etiqueta principal e eu vou chamar esses direitos de que estamos no Hipódromo. Vamos receber um spam. Spam. Eu vou comer. Então, vamos dar a ele um estilo className, test, dash para o Excel. Então, estamos basicamente especificando o estilo do formulário. E quando você passa o mouse sobre a classe, ela mostra o equivalente em CSS que está sendo executado nos bastidores. E, por favor, ao aplicar estilos com o Tailwind, você não precisa sair da cotação. Então, tudo o que você vai fazer estará dentro dos códigos. Parece bom, certo? Linda. Em um dispositivo menor como m, queremos que o teste apareça como Excel. Então, basicamente, estamos implementando o ponto de interrupção aqui. Então, em uma tela maior, o teste aparecerá para o Excel, tão simples quanto isso. Então, aqui, o espaçamento à esquerda e à direita serão dois. Então, quando você economizar, volte para o Brasil. Deixa eu te mostrar. Agora. Quando eu aperto, você vê que o teste fica menor. Então, quando você aumenta em um determinado ponto, esse teste se torna cada vez maior. Então, isso vai ser grande, médio e esse é um dispositivo menor. Observe novamente mais uma vez. Então, em um dispositivo menor, o teste é assim. No tamanho médio, o tamanho da fonte vai aumentar. Você pode ver que em um dispositivo maior, ele vai aumentar. De novo. Dê uma olhada. Gente do lucro. Então, eu acho que o tailwind é extremamente incrível e, na verdade , facilita o trabalho. Bom. Então, logo após o fechamento da etiqueta principal, teremos um div. Vamos dar a ele um nome de classe. E, certo, dentro da classe, vamos estilizá-la chamando as classes utilitárias em tailwind. Agora é pelo menos assim que o Tailwind funciona. Então, aqui vamos aquecê-lo em um dispositivo menor. Ok, então, em uma tela grande, tela normal flexiona, alinhe os itens ao centro. A cor de fundo será cinza. Então, vamos especificar um número para que ele seja realmente adicionado. Devo ver a espessura da cor ou algo parecido? Então, queremos que seja arredondado. Corra que vai ficar cheia. Então, o acolchoamento será um. Os testes. Vamos fazer com que seja de 14 pixels. E, por favor, aqui também temos que adicionar pixels como este. Ei, passe o mouse sobre ele e confira. Agora temos a largura máxima de 15, 20 pixels, feche o diferencial. Então, agora, deixe-me explicar o que está acontecendo. Então, aqui vamos ter uma etiqueta P, e eu vou fazer três. Outra tag P aqui, duplicada. E vamos ter uma entrega assim. Então, em um dispositivo menor, não queremos ver que esse cara está bem, mas em uma tela maior, queremos vê-los aqui em cima. Ok, deixe-me mostrar rapidamente quando você salva no navegador. Aqui está? Então, quando eu encolho a tela, vamos ver, você pode ver que em um dispositivo menor, ela desaparece. Mas quando você aumenta em uma tela maior, devemos ser capazes de ver que eles estavam realmente fazendo com que tudo parecesse responsivo. E, claro, eu agradeceria profundamente se você também pudesse avaliar e revisar essas ligações. Compartilhe esse custo para seus amigos porque será útil. Então, vamos dialisar a tag p gratuitamente, vou fazer className. A cor de fundo é G traço, laranja, traço 700 porque, mulheres, a espessura da cor laranja é realmente muito boa. A cor do teste será branca. Testa o traço branco. O plano de fundo vai ser arredondado, tolo. O preenchimento está à prova. Queríamos embarcar. E se preocupe, vou explicar todas essas coisas em um GPA. E aqui, novamente, vamos dar a ela um nome de classe. O estofamento será feito para esse teste, será curvado. Salvar. E vamos ver o que temos no navegador. Dê uma olhada. Consegue ver isso? Agora temos o logotipo e a entrega gratuita em perfeitas condições. Eu amei esses. Agora deixe-me explicar o que acontece sob o capô. Aqui temos um className e, em um dispositivo menor, vamos esconder todas essas tags p. Mas em uma tela maior, queremos que ela exiba itens de alinhamento flexível no centro. O plano de fundo dos formulários será ótimo. Portanto, o pé arredondado fará com que o fogão seja uma espécie de secular. Deixa eu te mostrar essas coisas aqui. E quando você passa o mouse sobre ele, o raio da borda é de 999 pixels, o que na verdade pode ser de 100 por cento. E o preenchimento é 0,2. O teste Rem é que 14 pixels estão corretos. Agora terminamos com o lado esquerdo. Vamos continuar com a barra de pesquisa no centro. Logo após a divisão de encerramento. Vamos ter outro div com o nome da classe. Vamos dar a ele uma cor de fundo de cinza tracejado 200. Então, isso realmente indicaria o valor do cinza, ok, quão acinzentado ele parecerá. Coisas assim. Comida arredondada. Então, agora você deve entender todas essas coisas. Exiba itens flexíveis, alinhe, centralize e padronize a partir do eixo x, o que implica esquerda e direita. Vamos fazer com que sejam dois. E depois a largura, teremos nossa própria largura personalizada. Então, sempre que você faz algo assim, significa que você deseja implementar seu próprio tipo de coisa personalizada, por exemplo, o preenchimento esquerdo e direito, posso decidir fazer assim de uma forma personalizada que eu possa fazer para ter fotos. Quando você passa o mouse sobre ele assim, você vê, mas à esquerda. Então, se os pixels forem preenchidos corretamente para ter pixels , eu decido não fazer isso. Vou mantê-lo assim. Então, sempre que quiser ter seu próprio estilo personalizado, você pode usar o colchete. Agora, o preenchimento esquerdo é um botão de 0,5 rem, o direito é 0,5 rem. Portanto, a largura é de 200 pixels. Em um dispositivo menor, a largura será de 100 pixels. Em um dispositivo grande, a largura será de 500 pixels. Opa, dê uma olhada. Bom. Vamos fechar a div. Aqui mesmo. Vamos usar o esboço, lembre-se de que o importamos de Riade. Ícones. Basta destacar e copiar. E aqui vou renderizá-la mais perto da etiqueta de fechamento automático, dando a ela um tamanho de 25. Salve, confira o navegador. Agora, você pode ver, deixe-me te mostrar. Aqui, não é? Mas o problema agora é que ele foi alinhado ao canto superior direito da tela. Então, encontraremos uma maneira de alinhá-lo ao centro. Novamente, diretamente dentro da div. Teremos uma tag de entrada com o nome da classe e, em seguida, a cor de fundo será. Transparente, traço P T2. Claro que você sabe o que é. A largura vai ser uma bobagem. Na verdade, isso especificará 100 por cento da largura. Vamos tirá-lo. Dê uma olhada. Você pode ver que, ao passar o mouse sobre a classe, você verá o CSS real que está sendo executado nos bastidores. E diz que a largura é 100%. E, por favor, se toda essa barra não está funcionando para você, é simplesmente porque você não instalou o Tailwind IntelliSense. Portanto, certifique-se de ir até as extensões. Em seguida, instale o Tailwind Intelligence. Tem isso. Tudo bem, tudo bem. E, a propósito, eu te ensinei como fazer isso na palestra anterior. Vamos continuar. Então, o esboço do foco, deixe-me mostrar algo antes de fazermos isso. Salvar. Ok, vamos fechá-lo assim no navegador. Aqui está? Você pode ver que quando eu coloco meu mouse diretamente dentro da tag de entrada, você verá esse contorno. Então, isso é o que não queremos. Quando eu clico para sair, você vê que ele sumiu. E então, quando eu clicar, você verá o esboço. Vamos tirá-lo rapidamente. Então, eu vou fazer um esboço de foco. Isso vai ser conhecido. Salve Jakarta, o navegador. Quando você clica nele, você vê que ele sumiu. Perfeito. Ok, acho que devemos fechá-lo com a etiqueta de fechamento automático. Isso faz com que o código pareça um pouco mais limpo. E, ei, vamos fazer com que o tipo de entrada seja um espaço reservado para teste rápido. Essas refeições, quando você salva no navegador, você pode ver as refeições definidas? E esse é o ícone que alugamos por lá, que é o ícone de pesquisa de esboços. Temos que implementar os cortes. Então, logo após o encerramento, vamos passear de barco. Dê o nome do cluster a ser estilizado G dash, orange, dash 700. Então, isso realmente ajudará para os ricos, para os quais a cor parecerá mais espessa ou algo parecido. O teste será branco. Queremos que ele fique escondido diretamente, em um dispositivo menor e depois em um dispositivo médio, como o iPad. Ok? Vamos alinhar os itens ao centro. O acolchoamento superior e inferior. Também. Arredondado. Vamos fazer com que o pé passe direto para dentro do corpo. E eu vou fazer cartões quando você salvar e conferir o navegador. E agora conseguimos empurrar a caixa de pesquisa um pouco para o centro. E então o corte está sendo alinhado ao canto superior direito da tela. O ninho e o limão servem para adicionar o ícone de corte diretamente no corpo. Como fazemos isso agora? Ok, eu vou fazer aqui, vamos usar o combustível do cartão de combustível. Vá para o topo. Também temos que inserir esse campo de entrada, campo de corte. E, por favor, não me pergunte de onde vêm todos esses nomes. Então, vamos importá-lo dos ícones do traço do React. Em seguida, vamos revesti-lo com BAs. Então, vamos importar rapidamente todos os ícones que estão sob BAs. E acho que é mais um. Ei, eu vou fazer besteira. Tão simples quanto isso. Certo? Estamos no fundo. Vamos renderizar combustível BS, cortar o combustível mais de perto com a etiqueta de fechamento automático. E então vamos especificar o tamanho. Exatamente assim. Salve no navegador. Neles, você pode ver que tudo aparece conforme o esperado. Então, deixe-me te mostrar. Agora, quando minimizo a tela, deixe-me pressioná-la para aquecer um ponto de interrupção específico. Veja, você pode ver em um dispositivo menor, não queremos que ele apareça. Agora, o gato parece bom. Na verdade, estamos atingindo nossos alvos, e tudo bem. Portanto, a próxima linha do termo é implementar o sorteio lateral. Então, quando eu clico nesse botão, o desenho deslizará para fora. E quando eu clico no ícone, eles desenham também. Vamos fechar. Vamos fazer isso na próxima palestra. 58. 56 Nav lateral: Então, a intenção aqui é clicar no menu do hambúrguer para abrir a navegação lateral. Mas agora, quando você clica nele, nada acontece. Você pode ver mais alto, certo? Então, vamos adicionar rapidamente o código do VS para implementar essa funcionalidade. Para prosseguir, primeiro, temos que declarar a variável de estado necessária a ser usada. Então, vou fazer um lado consistente o suficiente, mais calmo agora, adquirir o estado dos EUA. E isso vai ser uma operação booleana. Portanto, o estado inicial será falso. Bom, depois de fazer isso, vamos implementar rapidamente esse ícone aqui. Então, onde a temos? Aqui está, que é o menu delineado da IA. E então vamos implementá-lo neste div wrapper div para o menu de esboço. Vamos especificar onclick. Ao clicar neste ícone. Queremos abrir o lado agora, ok, então basicamente o que ele faz é mudar o estado de falso para verdadeiro ou falso para verdadeiro e falso para verdadeiro. Deixe-me te mostrar rapidamente. Agora, vamos invocar a função de configuração para atualizar o estado inicial. E será configurado como navegação lateral. Não vou citar o suficiente. Ok, então clique no ícone aqui. Ele mudará o estado inicial para forçar quando você clicar nele novamente, mudará para “ ininterrupto”. Deixe-me mostrar o que quero dizer com esse lado do console.log. Agora, quando você diz ventrículo no navegador , certifique-se de que o aplicativo já esteja em execução. Aqui mesmo. Opa, diz que o lado agora não está definido. É aqui que está o problema. Há um erro tipográfico aqui. Isso deveria ser constante, e eu sei que alguns de vocês podem detectar esse erro rapidamente, corrigi-lo ao salvá-lo no navegador ou no Comando I para abrir o console. Agora, quando eu clico no menu, ele vai mudar o estado inicial, o verdadeiro. Agora, o estado inicial se torna verdadeiro quando eu clico no menu novamente, isso mudará a força. Então, basicamente, estamos mudando de falso para verdadeiro ou falso para verdadeiro. Bom. Vamos continuar. Ok, então o melhor e o melhor é criar uma sobreposição de plano de fundo, porque queremos que tudo apareça de forma profissional. Então, logo depois que ele comprou, teremos outro div className. Então vou dar uma cor de fundo preta e depois dividir o preto por 60 e me preocupar, você definitivamente verá o resultado. A posição será fixa, a largura, vamos fazer com que seja 100%, que está cheia. A tela principal. O índice z porque queremos que ele apareça na parte superior. Ok, ele será salvo como uma sobreposição. Portanto, temos que especificar o índice Z. A caneta de cima é zero e da esquerda é a seta. Feche o DV ao salvar o navegador. Agora, aqui está o resultado. Não se preocupe, nós vamos controlá-lo. Portanto, a forma como controlaremos isso é colocando uma condição. Então, quando o suficiente for verdade, queremos mostrar a sobreposição. Agora. Não queremos mostrar nada, o que simplesmente implica que, quando clicamos no menu de hambúrguer dessa forma, queremos mostrar a sobreposição. Então, quando o menu de hambúrguer for clicado, mostraremos o excesso de outra coisa. Não vamos exibi-lo. Deixe-me te mostrar rapidamente. Agora, escreva JavaScript. Em Jesus, temos que abrir o colchete encaracolado. Então eu vou fazer se a coragem repentina for verdadeira. Queremos mostrar neste DVD aqui, quais são os destaques da sobreposição. Corte-o e abra os parênteses porque estamos esperando um layout de interface de usuário, colado e outro como este. Não vamos mostrar nada. Salve e vamos ver se está funcionando. Recarregar. Você pode ver? Então, quando eu clico, parece exatamente como colocar uma condição na preocupação excessiva de que tudo esteja prestes a tomar forma em relação ao topo agora. Tudo bem, então a próxima fila é criar a própria navegação lateral. Então, aqui, teremos um div com o nome da classe e uma escrita em que o nome do cluster terá que estilizá-lo. Então, aqui, a receita pairava sobre a posição fixa de cima, zero, da esquerda, zero. A largura será, vamos especificar uma largura personalizada, 300 pixels. Ecrã. Então, clicar na tela significa simplesmente que a altura é 100. Poucas alturas. Dê uma olhada. Bg vai ser branco, que é o fundo. O índice z é dez. Então, queremos que ele se anime para dentro e também para fora. Então, para isso, especifique a duração. E vamos fazer com que seja 300. Podemos chegar a 200 quando você salva no navegador. Aqui está. Você pode ver que já está tomando forma, mas agora parece que está fixado na tela. Não é móvel. Você vê? Ok, vamos seguir em frente. Deixe-me te mostrar. Então, hum, vamos fazer algo muito bom. Vamos condicionar o sorteio lateral. Então, aqui, vamos ter um colchete de abertura e fechamento. Então, se a navegação lateral for verdadeira, queremos mostrar esse bloco aqui, destacá-lo e recortá-lo. Venha aqui. Ok? Se a navegação lateral for verdadeira, queremos mostrar esse tau. Ok? Também destaque e copie, mas agora vamos mudar o estilo. Rosa. Vamos fazer assim. Formato, o código. Bom. Agora, deixe-me explicar cuidadosamente o que acontece aqui. Então, se a navegação lateral for verdadeira, deixe-me mostrar o estado inicial aqui. Se for verdade, queremos que apareça a partir dos zero pixels à esquerda. E então vamos especificar a largura de 300 pixels. Caso contrário, se for falso, queremos que vá em uma direção negativa. Deixe-me te mostrar. Então, aqui vamos especificar o traço esquerdo. Teremos um valor personalizado. E eu vou fazer com que seja 100 por cento, vou deslocar a barra lateral em uma direção negativa em direção ao eixo x, escondendo-a da tela. Seguro no navegador. Ok, deixe-me ver uma coisa aqui. Ok, vamos mudar isso para verdadeiro. Nada acontece. Tudo está correto aqui. Certo pessoal, vamos mudar os 200, que é a duração. Vamos mudar para 300. Ok, pessoal, isso vai funcionar. Quando você o altera para falso. Salvar. Você pode ver que ele desaparece? Quando você muda para verdadeiro? Parece. Você pode ver da esquerda quando o estado inicial da navegação lateral estiver definido como verdadeiro, a gaveta de navegação aparecerá da esquerda com zero pixels e, em seguida, a largura será de 200 pixels. Mas se o estado inicial do lado agora for definido como falso, da esquerda, ele vai ser menos 100%. Ok? E, assim, escondendo esse lado, desenhe o mais simples. Então, agora vamos começar a implementar os ícones do menu, certo, usando a lateral agora. Então, vamos fazer isso na próxima palestra. 59. 57: Bem-vindos de volta a todos. Então, nesta palestra, vamos implementar os menus diretamente no sorteio. Ok, então a primeira coisa vamos fazer é implementar um ícone que será usado para fechar o desenho lateral. Vamos fazer isso rapidamente. Então, certo, estamos no DV. Deixa eu te mostrar isso, o DV aqui, assim, aqui dentro. Vamos renderizar o ícone de fechamento do contorno. Deixe-me ver. Aqui está. Nós o importamos na palestra anterior. Copiar. Desça. Vamos virar o diodo aqui. Aproxime-se com a etiqueta de fechamento automático. O tamanho, claro, será 25. Salve no navegador. Aqui está? Mas não o queremos no canto superior esquerdo. Portanto, as mulheres precisam estar alinhadas no canto superior direito aqui, bem dentro da gaveta de navegação. Por enquanto, não acho que o estilo seria algo difícil, então vamos torná-lo clicável. Por enquanto. Aqui, vou especificar o ícone onclick onclick. Também queremos mudar o estado inicial de falso para verdadeiro, assim como fizemos na aula anterior. Aqui, deixe-me mostrar exatamente o que fizemos aqui. Então, acho que só preciso copiar o onclick assim. Cole aqui. Vamos formatar o código. Linda. Salve no navegador. Clique em Você pode ver e, em seguida, clique aqui para abrir. Esses dois se fecham. Tudo bem, então vamos estilizar rapidamente o ícone de fechamento e alinhá-lo corretamente. Vamos fazer com que ele se posicione como absoluto. Deixa eu te mostrar. Você vê. Bom. Então, da direita, vamos fazer quatro. Do topo. Vamos fazer quatro. E então o custo será um indicador. Salvar. E agora aqui está. Fechar, abrir, fechar, abrir. E agora espero que você entenda bem como alcançamos esses resultados. Se você não entender pela primeira vez, aconselho que você leia as palestras novamente para ter uma ideia clara do que estamos falando. Vamos ver as notícias responsivas para dispositivos móveis. Você verá no iPhone. Vamos usar isso no iPhone 12. Dê uma olhada. Tudo legal. Então, vamos implementar os menus aqui, e isso é extremamente fácil. É tão simples quanto o ABC. Então, depois do ícone, teremos aqui, uma cobertura para marcar. O preenchimento serve para ler a tag H2. Vamos fazer isso exatamente como fizemos na palestra anterior. E então vamos ter um intervalo. Um espaço. Eu vou comer. Vamos dialisar o intervalo. Laranja 700. E aqui está. Uma coisa que eu adoro fazer é a fonte. Você pode ver agora que a etiqueta de extensão fica extremamente curvada. Tudo bem. Então, logo após a tag H2, teremos uma protuberância diretamente dentro da navegação. Teremos uma lista não ordenada, UL. Vamos dar um estilo a isso. Vamos fazer com que ele exiba flex e a coluna de direção flexível. O preenchimento é para o teste. Cinza 900. Legal. Não seria a UL, nós vamos ter as etiquetas LI, que é o mínimo. Então, aqui, dê a ela um nome de classe, estilize-a dentro da classe, importando realmente as classes utilitárias que estão presentes ali mesmo e o Tailwind. E eu sou uma das turmas do test dash Excel, PUI, que é a parte superior e inferior. E então teremos uma tela flexível. Então, tão simples quanto isso. Então, dentro da tag LI, vamos renderizar o BS Pearson, que é esse ícone aqui. O tamanho 25, dê um nome de classe para estilizá-lo. Então, a margem, certo? Quem, apenas MR., existirá para o qual o sentido de uma atriz será uma RAM. Deixe-me mostrar como gerar uma RAM. E depois o teste. Brancos. A cor de fundo é preta. Arredondado, idiota. Na verdade, isso ajudará a reduzir e salvar a fronteira . E vamos ver. Bom. Consegue ver isso? Agora temos esse cara aqui e o que você deve fazer são minhas contas. Então, diretamente na tag LI, quando você salva, ela aparece assim. Incrível. Tudo está funcionando conforme o esperado. Você vê mais alto, certo? Então, o que vou fazer agora é destacar a tag LI desta forma. E depois duplique quatro vezes, 1234. Ou você pode copiar e colar quatro vezes. Então, o que devemos fazer agora é mudar os ícones e o rótulo é bem simples para fazer isso. Aqui mesmo. Este ícone será CB truck return. E, claro, devemos importá-los do ícone de Riade. Acho que devemos fazer isso do jeito que fizemos antes. Vamos importar todos os ícones necessários para que não precisemos voltar aqui para fazer isso de novo. Aqui. Vamos importar, vamos importar FA, amigos do usuário, FE, Google Wallet. Você pode decidir usar um ícone diferente. Só sua escolha. Ok. Acho que temos que duplicar isso porque não preciso mais digitar do zero. Então pessoal, percebam que prefixamos todos os ícones aqui com FE. Então, vamos fixar sua largura. A mesma coisa aqui. Nós o prefixamos com TB, então temos que corrigi-lo com TB. Essa é a única maneira de funcionar. Então me perguntou como funciona porque eu não sei. Então aqui vamos importar ajuda vazia, mais calma. Md, febre esboçada, certo? Opa, o esboço deve estar aqui, letra maiúscula 0. Vá até o fogão e verifique se toda a entrada está correta. Ok. Agora vamos começar a usá-lo. Aqui temos o retorno do caminhão TB. E isso vai ser uma entrega. Muitos economizam e finalizam a compra. O sorteio lateral. Você pode ver aqui que temos entrega. E quando você aumentar o zoom, você vai ver as bolas aqui. Tudo bem, então temos que mudar. O resto desse cara é que o nist é um favorito vazio e delineado. Aqui. F8, Google Wallets. Opa, isso deveria ser uma carteira. Então, por fim, vamos ter ajuda. Você pode adicionar mais ícones e mais coisas que quiser. Ok, eu não acho que estamos usando a etiqueta de campo de IA, limpe-a. As perguntas frequentes, nossos amigos, não fizemos uso delas. Limpe-o. Você pode decidir usá-lo se quiser. Opa. O favorito do contorno vazio não foi encontrado nas diagonais de Riade. Eu era meu favorito. Esse cara aqui. Opa, pessoal, temos dois sufixos com MD. Eu disse que isso não funcionaria se você também não o revelar. Se você não prefixar. Não sei por que eles construíram coisas assim. Então, altos. Certo, pessoal. Ok. Tudo bem. Ok. Desculpe. Acho que isso vai funcionar dessa vez. Sim, isso vai andar. Favoritos está trazendo problemas. Eu não sei por quê. De qualquer forma, tailwind é meu favorito. Agora, tudo é qual jogo? E está funcionando perfeitamente, conforme o esperado. Tudo parece bom. Você vê que um dispositivo móvel aparece bem. Da minha parte. Dê uma olhada. Isso é clássico. Isso é clássico. Tudo bem pessoal, terminamos com a parte superior agora. Portanto, o próximo termo é implementar o futuro terceiro componente. Vamos fazer isso na próxima palestra. Te vejo então. 60. Toque final de SiseNav: Tudo bem, então antes de prosseguirmos com o componente futuro, precisamos fazer as correções necessárias. Ao abrir o navegador, você perceberá que, por padrão, o desenho lateral é aberto. Você pode ver? Então, quando o usuário visita seu site, é exatamente assim que ele será adicionado aqui. E isso não é nada bom. Agora você pode ver que, quando eu clico aqui, ele fecha. Você pode ver, por padrão , que ela aparece assim. Você sabe por quê? É simplesmente porque definimos o estado inicial como verdadeiro. Volte para o código VS, diretamente nas linhas 14, onde temos os estados. Vamos defini-lo como falso. Portanto, o estado inicial é falso. Ao voltar ao navegador, você pode ver como ele aparece conforme o esperado e, em seguida, o usuário precisa clicar no ícone do hambúrguer para abrir a gaveta de navegação. Uma coisa que eu também adoraria fazer é implementar os direitos ao clicar não seria exagerado. Então, quando eu clico na sobreposição, eu deveria ser capaz de fechar a gaveta de navegação. Deixe-me te mostrar uma cópia. E aqui está a sobreposição. O que vou fazer agora. Vamos ver se isso vai funcionar. Algo parecido com isso. Seguro. Aqui. Quando você clica no hambúrguer, ele se abre na lateral. Desenhe. Quando você clica na sobreposição, a gaveta de navegação do site fecha. Tudo bem, então não dependemos mais apenas do ícone de fechar. Você também pode clicar no ícone de adição. Você está clicando na sobreposição. Linda. A próxima correção será o logotipo aqui. Então, queremos que o Aedes apareça corporalmente. Então, o que vou fazer agora, rolar até o topo, é dar o nome da aula de espanhol e, em seguida, o painel da fonte. E isso fará com que pareça mais seguro corporalmente no navegador. Você pode ver o quão lindo é isso? Dê uma olhada. Incrível. Eu adoro isso. 61. 59 Componente em destaque: Bem-vindos de volta a todos. Nesta palestra, prosseguiremos com o componente futuro. Vá até o VS Code, abra o Explorer e, em seguida, escreva em que pacote de componentes você verá o futuro. Jazz. Clique para abrir um FCE para gerar os componentes funcionais da seta do React. Vamos renderizar rapidamente esse componente, certo? Estamos no aplicativo Js. E, por favor, certifique-se de importá-lo na parte superior. Agora, a primeira coisa que vamos fazer é declarar uma matriz de objetos. E logo, dentro do objeto, teremos a URL das imagens que queremos deslizar. Aqui. Vou fazer controles deslizantes constantes, equa, configurá-los como uma matriz vazia e, diretamente dentro da matriz, teremos o objeto. Então não se preocupe, eu já tenho o objeto preparado. O que vamos fazer é copiar e colar. É tão simples quanto isso. Então, volte para os materiais alimentares. Poderia ajudá-la e depois copiar os objetos do herói. Venha aqui, destaque novamente das linhas cinco a sete. Limpe-o, pois copiamos os objetos prontos. Então, só precisamos colar. Ok, então, todas essas imagens, eu as implantei no Cloudinary. Ok, eu tenho uma conta Cloudinary onde posso fazer upload de imagens. Bom. Feito isso, o próximo passo é declarar a variável de estado necessária a ser usada. Então, no topo, queremos fazer uso do gancho americano. Então, logo abaixo da matriz, vamos gerar trechos de ganchos feitos nos EUA como este. Então, aqui teremos conjuntos de índices atuais. Deixe que essas duas capitais vejam. O estado inicial será zero. Tudo bem? Vamos implementar a interface do usuário. Destaca o futuro. Limpe-o. Vamos dar a ela um nome de classe e escrevê-la na classe, temos que usar as classes utilitárias para estilizar o div. Dê a ele uma largura máxima de 15.20 pixels e a altura de 500 pixels. A largura. Vamos fazer isso por quatro anos. Estofamento superior e inferior. Será para a esquerda e para a direita, quatro. E vamos fazer com que ele posicione os direitos relativos dentro da div. Vamos ter outro div, dar a ele um nome de classe e, em seguida, especificaremos que a largura novamente será a largura total. Então, eu só tenho que copiar daqui. A altura é a altura total. Isso fará com que a altura seja 100% e a largura 100%. Você já deveria saber disso. Gerencie dívidas para se destacar, BAG. A duração é 500. A posição do plano de fundo é central. O tamanho do fundo é cava. Portanto, isso terá que redimensionar as imagens para caber no contêiner. Então essa será a duração da transição, tão simples quanto isso. Então, deixe-me te mostrar rapidamente. Agora. Eu posso escolher aplicar estilos a ele. Imagem de fundo. Agora temos que usar os controles deslizantes de URL literais do modelo dentro da matriz. URL do ponto de índice atual. Então, vamos ver o que acontece no navegador. O navegador. Você pode ver agora que esta é a primeira imagem. Então, deixe-me explicar o que acontece sob o capô. Aqui, temos uma série de objetos. Para acessar o elemento em uma matriz, precisamos usar o índice da matriz. Então, aqui dizemos que o estado inicial do índice é zero, o que significa que ele retornará essa imagem aqui. Então, quando você dá uma olhada no navegador, está aqui? Essa é a primeira imagem correta, dentro da matriz. Então, quando eu indexo um, ele recuperará a segunda imagem na matriz. Você pode ver o índice dois que recuperará os elementos de texto ou a imagem na matriz. Perfeito. Certo? Agora, exibimos nossas imagens com sucesso, mas agora elas não estão deslizando, mas se preocupe, faríamos isso em um GeV. Portanto, antes de prosseguirmos com os slides, também precisamos implementar as setas para a esquerda e para a direita. Vamos rolar rapidamente até o topo, onde importaremos os ícones dos ícones reacts, BS como diferentes compactos. Esquerda. Nest é o direito de combate da Chevron da cerveja. Então, só precisamos destacá-los e copiá-los aqui. E então vamos mudar isso para escrever. Simples assim. Role para baixo. Logo após esse div. Vamos ter outro div. Certo? Dentro do div, vamos renderizar com vários compostos restantes. Vamos aplicar estilo para comer a posição absoluta. Então, isso realmente colocará o ícone em cima da imagem. O topo é 50 por cento. Então, vamos ter uma tradução negativa x aqui. Em seguida, traduza y. Vamos especificar um valor personalizado. 50%, certo, são cinco. Testes para o Excel. Então isso indica que o tamanho da fonte n, a altura da linha, arredondada, está cheia. Estofamento. No fundo haverá um traço laranja 700. O teste é branco. Vamos definir o cursor como um ponteiro. simples quanto isso. Salve no navegador. Aqui está, esse cara aqui deveria vir para a esquerda. Vamos ver o que está errado. O topo é de 50 por cento. Traduza x menos zero, traduza Y. Isso vai ser -50 por cento. Aqui. Isso deve começar da esquerda e o modo da direita. Acho que isso resolverá o problema. Dê uma olhada. Você pode ver? Perfeito. Então, o próximo na fila é duplicar esse ícone aqui e alinhá-lo para derivar ao quadrado. É fácil fazer isso. A partir das linhas 2042, linhas 26, destaque e duplique. Então, aqui, vamos mudar isso para escrever de forma segura. Agora, você vê? Bom. Então, vamos mudar o ícone para indicar o lado direito. Aqui vão haver vários compactos. Bom. Tudo bem, então pessoal, tudo está tomando forma e não se esqueçam de revisar, enriquecer esse curso é extremamente importante porque eu tenho que saber exatamente o que vocês estão sentindo por lá. Ensinar bem. Linda. Ok? Então, basicamente, o que eu quero fazer agora é esconder as flechas. E então queremos que o erro fique visível quando passamos o mouse sobre o controle deslizante. Para isso, eu vou fazer algo assim. Aqui. Vamos agrupar a div principal assim. Então venha aqui e eu vou fazer aquecimento. Então isso vai esconder a flecha à esquerda. Agora queremos que a seta esquerda apareça em Hoover. O que eu vou fazer é agrupar, Hoover, ter um bloco de exibição regular. Salvar. Você pode ver que quando eu passo o mouse sobre ele, ele aparece. Agora, dê uma olhada. Você pode ver, vamos aplicá-lo rapidamente na seta direita. Só tenho que copiar tudo daqui. Em seguida, cole. Salve no navegador. Você vê que quando eu passo o mouse sobre ele, ele mostra as setas para a esquerda e para a direita, para a direita. Agora, quando você clica nas setas, nada acontece. Então, vamos definir rapidamente a função para implementar a seta. Role até o topo. Desculpe, vamos fazer com que o estado inicial seja zero para que apareça bem. Então, aqui vamos definir uma função para lidar com o clique da seta. Const. controle deslizante anterior, um núcleo, configure-o para nossa função. E aqui teremos uma variável chamada primeiro slide. Defina-o para que o índice atual seja igual a zero. Outro. E isso será chamado de novo índice. Igual é o primeiro slide. Então, se o primeiro slide for verdadeiro, vamos fazer controles deslizantes. Ponto deslizante, comprimento do ponto menos um, setas. O índice atual será menos um. Portanto, o próximo na fila é atualizar o estado. Então, vamos definir o índice atual para o novo índice, tão simples quanto implementar os direitos de clique nos compactos da Chevron à esquerda, que é a seta à esquerda. E clique em. Temos que chamar a função de controle deslizante anterior. Quando você salva, finalize a compra no navegador. Vamos tentar clicando no controle deslizante esquerdo. Gente, vocês conseguem ver? Funciona muito bem. Agora, conseguimos criar nosso próprio controle deslizante do zero. Que lindo nos dias de hoje. Certo? Então, agora vamos implementá-lo para a seta direita. Vamos ter outra função, controle deslizante de ninho constante, configurando-a para nossa função. E então teremos uma variável chamada índice atual do primeiro slide. Vamos fazer controles deslizantes com o comprimento dos pontos. Ok? Então, na verdade, acessamos todo o slide com nossos direitos dentro da matriz para obter o valor total do controle deslizante. Ou seja, esse é o comprimento do ponto deslizante. E então aqui vamos fazer menos um. Novo índice. Igual é o último slide. Então, se o último slide for verdadeiro, vamos defini-lo como zero agora. Então, vamos configurá-lo para o índice atual mais um, simples assim. Agora temos que atualizar o estado inicial fazendo conjuntos do índice atual para o novo índice. E, na verdade, aqui. Antes de prosseguirmos, isso no Atrazine deve ser o último slide. Então, aqui, clique, temos que chamar essa função. Cole aqui. Salve no navegador. Vamos dar uma olhada. Você pode ver que tudo está funcionando perfeitamente bem? Dê uma olhada. Mais uma coisa. Venha aqui. Novamente. Na verdade, serão para as balas logo abaixo dos controles deslizantes. Vai ter uma constante. Mova para o slide igual, índice do slide. Vamos definir o índice atual para o índice do slide do parâmetro. Caras legais. Então vá até o topo e vamos importar. Um ícone. Esse ícone será salvo como um marcador logo abaixo do controle deslizante. Ao clicar nos marcadores, você poderá mover os controles deslizantes. Não se preocupe, você definitivamente entenderá quando terminarmos a implementação. Nosso combustível de x pontos, como esses dos ícones do React. Logo após esse div. Vamos ter outro div. Estilize-o de forma ondulada. Vamos ter uma tela flexível de cima para baixo. Vamos usá-lo para justificar a parte do centro de conteúdo na parte superior e inferior. Nós vamos ter que fazer isso. Então, o que vamos fazer é mapear os slides. Ok? Então eu vou fazer sliders, dots. Mapa. O mapa é um método, certo? E certo. Dentro desse método, vamos pegar itens do controle deslizante de parâmetros, que esse cara aqui representa cada elemento, certo, dentro dessa matriz. E neste caso, o URL da imagem, mais calmo, ligeiramente indexado. Vamos renderizar a interface do usuário. Um div com o nome da classe será para x L. Cos é um ponteiro. Feche isso. Certo? Quando o div, vamos renderizar o RX pontilhado visualizado. Feche isso. Então, deixe-me te mostrar rapidamente. Diz, Eric, que dotar combustível não era divertido. Você sabe por quê? É simplesmente porque, novamente, esquecemos de prefixá-lo com RAX. Rapazes. É assim que eu reajo. Os ícones funcionam. Salvar. Você consegue ver esses ícones? Mas agora, quando você clica nele, nada acontece. Vamos implementar rapidamente a própria camarilha. Primeiro. Vamos lhe dar uma chave. Porque o aplicativo reclamará se você não especificar a chave. Deixe-me te mostrar. Você pode ver que diz que uma em cada criança em uma lista deve ter um adereço único. Eu sei que você sabe que isso é apenas um lembrete. Vou fazer com que c0 seja igual a um pequeno índice. Esse cara aqui, certo? Salve novamente no navegador. Confira o console. Vamos atualizar. Agora. O erro desapareceu. Linda. Ok, vamos implementar o onclick. clicar, chamaremos a função de mover para o próximo slide. Então, vamos torná-lo legível. Vá para o próximo slide. Copiar. Venha aqui. Cole isso. Ok, tudo bem. Então, vamos pegar o parâmetro. Um pequeno índice é tão simples quanto isso. Quando você salva no navegador, eu clico em. Você pode ver que isso é extremamente fantástico, amigos. Tudo bem, então isso é tudo por enquanto para o controle deslizante. E na próxima palestra, prosseguiremos com os componentes do aplicativo de entrega. Nos vemos na próxima palestra. Mantenha o foco no cuidado holístico. 62. 60 componente de entrega rápida: Tudo bem, bem-vindos de volta a todos. Portanto, nesta palestra, prosseguiremos com o componente do aplicativo de entrega rápida. Heron ao VS Code. Feche isso, abra o ponto de entrega js, feche o explorador ou um FCE para gerar o componente funcional de seta de reação. Vamos executar rapidamente o Died dentro do componente do aplicativo. E, por favor, certifique-se de importá-lo na parte superior. Então, vamos especificar a largura como foo, o que a tornará com 100 por cento. O fundo é branco. O acolchoamento superior, o acolchoamento e a parte inferior são 16 e, em seguida, o acolchoamento esquerdo e direito é para sempre. Então, agora isso servirá como div principal. Aqui vamos ter uma etiqueta histórica. Vamos estilizá-lo rapidamente. O teste é laranja, traço laranja 500. Vamos torná-lo ousado. Fonte, painel de instrumentos. Um teste é para se destacar e , em seguida, os testes alinham o centro. Agora, vou fazer entregas rápidas e seguras no navegador. Aqui, não é? Agora, logo após a tag do histórico de fechamento, teremos um div. Vamos estilizar rapidamente o diferencial. A largura será de 15, 20 pixels. A margem esquerda e a margem direita serão automáticas. Vamos ter uma grade de exibição. Então, em um dispositivo médio, queremos que a grade exiba dois pontos. Portanto, as colunas do modelo de grade devem fechar a div. Agora vamos ter uma imagem, IMG. Vamos dar a ela um nome de classe e depois estilizar a imagem. A largura é de 550 pixels. Será um valor constante. Agora você sabe o que é isso? Topo da montanha e margem inferior. Para SRC. Vamos voltar ao que poderia ajudá-la a copiar o URL. E aqui está. Destaque e copie. Venha aqui, cole. Em seguida, feche-o com a etiqueta de fechamento automático. Vamos economizar. Veja o que temos no navegador. Você pode ver que aparece aqui. Esses são bons. Então, logo após a tag IMG, teremos outra div. Vamos dar um estilo a isso. Vamos ter uma tela, flexão, direção flexível, coluna, conteúdo justificado, centro. Certo? Usando esse div, teremos uma etiqueta p. Vamos rapidamente dar um estilo a ele. Novamente, esse será um estilo personalizado. Esses são a, D, F. Agora, os telefones serão ousados. Novamente, aqui vamos ter uma etiqueta principal e eu vou fazer Vamos dar uma olhada. Ok, parece que está tudo bem. Também temos que estilizá-lo, certo? Em um dispositivo médio. O teste fará com que nosso dispositivo de quatro x l e menor, três exalem a fonte. Vamos torná-lo ousado. Parte superior do acolchoamento, parte inferior do acolchoamento. Vamos fazer isso também. Acho que isso fará com que tudo esteja certo. Já está parecendo bom. Ok, não se preocupe. Definitivamente vai chegar ao topo. Ok. Então, agora vamos ter uma tag p logo abaixo da etiqueta principal. Então, aqui eu vou copiar um teste fictício e depois colá-lo aqui. Então, isso é apenas um teste fictício. E se quiser, você pode voltar para o que poderia ajudá-la. Eu sei que a maioria de vocês gostaria de fazer exatamente o que eu estou fazendo. Então venha aqui e copie este teste. Mas você pode acessar a Internet e simplesmente configurar um teste fictício e depois copiá-lo para lá. Quando você salva, finalize a compra no navegador. Boom, parece bom, mas eu não gosto do jeito que parece. Formato. Não se preocupe Vamos prosseguir. Vamos fazer um parafuso, dar a ele um nome de classe e depois vamos fazer a diálise. O tabuleiro em segundo plano será bloqueado. O teste, certo? Estamos no barco, vai ser esse cara aqui. Só tenho que copiar. Não há necessidade de repetição. A largura, 200 pixels, arredondada, a fonte. Vamos fazer disso um meio. Margem, superior e inferior. Vamos fazer com seis margens, esquerda e direita. Vamos fazer com que seja automático. Em um dispositivo médio. Vamos fazer com que a margem esquerda e direita seja zero. E a parte superior do acolchoamento, parte inferior do acolchoamento serão três. Então, logo no barco, eu vou escrever, começar. Seguro. Tudo bem, então tudo parece estar bem, mas eu realmente não gosto do resultado. Então, eu só tenho que voltar ao VS Code. Vamos descobrir as coisas por aqui. Esta é a div que contém todas essas informações aqui. Então, o que vou fazer, temos 15, 20, vamos mudar para 12, 40. Seguro. Vamos dar uma olhada ou escrever. Tudo parece extremamente incrível. E parece como esperado. Uma coisa que resta é que não há espaço entre a tag p na parte inferior. Então, acho que temos que corrigir isso rapidamente. Agora vamos adicionar, certo pessoal, vocês podem ver que adicionamos seis como margem superior e margem inferior. Mas olha, não está funcionando. E você vê que temos que fazer o traço seis. E aí está. Caras perfeitos. Isso é tudo por enquanto. E na próxima palestra, prosseguiremos com os principais componentes de pico. E lá também vou te ensinar como fazer um controle deslizante React usando o slide fornecido. Nos vemos na próxima palestra. Mantenha o foco em sempre cuidar. 63. 61 componente de picareta superior: Bem-vindos de volta a todos. Nesta palestra, implementaremos o controle deslizante, que são os principais componentes do pico. Então, sem mais delongas, vamos começar. Abra o Explorer. E então temos que abrir o pico superior do ponto js, fechar o Explorer. E então eu vou fazer um FCE para gerar o componente funcional da seta. Agora, eu quero mudar essa div, certo? Queremos ter um fragmento de reação que foi salvo como o nó pai. Então, certo, dentro desses fragmentos, vou fazer a primeira página. Então, vou dizer aqui os tópicos. Vamos dar uma aula para que possamos estilizá-lo. O teste Orange Dash 500, as fontes, queremos que seja vaiado. Emblema de teste para o Excel. Vamos alinhar o texto ao centro. Acolchoamento na parte superior e inferior, na parte inferior. Vamos fazer com que seja mais simples, certo. Ok, digamos que, por enquanto, direitos dentro do componente do aplicativo direitos dentro do componente do aplicativo. Vamos executá-lo no componente de pico superior e fazer bem em importá-lo em uma banheira. Seguro. Verifique se o aplicativo está em execução. Tudo bem, então no navegador, aqui está. Então, isso será salvo como cabeçalho. Linda. Agora, a próxima linha é implementar esse planador. Ok, então vá rapidamente para splice gs.com. Em seguida, você verá o botão Começar, clique nele. E aqui você pode ler a documentação para entender as conhecidas obras de altura. Mas, por enquanto, vou prosseguir para o MPM aqui. Ok. Deixe-me te mostrar rapidamente. Você pode ver o link para esta página, à direita, indicaria ajudar nosso nebuloso. Aqui, veja como instalar o slide do React aqui. Vou copiar, voltar ao VS Code Control C para interromper o comando V do servidor atualmente em execução, colar o comando e pressionar a tecla Enter para iniciá-lo. Bom, instalado, bem-sucedido. Agora, o próximo na fila é importá-lo de forma cartola para o tópico. E então, novamente, volte para o slide de reação. Temos que copiar essa entrada aqui . Cole na parte superior. Seguro. Bom. Tudo bem, tão rapidamente, também precisamos importar os dados que usaremos para o controle deslizante de pico superior. Aconselho você a minimizar seu VS Code. Comando B para abrir o explorador, fechar os componentes e também fechar o SRC. Então, abra os materiais alimentares. Então você encontrará o pacote aqui chamado data. Certo? Dentro desses dados, temos o módulo data js, que compreende as categorias, os dados de pico médio e superior são incautos. Quando terminarmos de importar, vou divulgar para você. Então, arraste e solte diretamente no SRC. Você pode ver agora que está dentro do SRC. Quando eu fechar o SRC, você não verá mais os dados. Você vê bem? Maximize nosso direito. Então, vamos abri-lo. Agora, aqui você verá uma série de objetos e direitos dentro do objeto. Você verá alguns itens na forma de um par chave-valor, que é o id. E aqui está um, o título, e aqui está o que é. O preço de 50 e a imagem. Então, esses são os dados dos principais picos. Vou rolar para baixo novamente. Você verá os dados da refeição. Obviamente, há uma série de objetos que incluem o ID, o nome da refeição, a categoria em que ela se enquadra, a imagem e o prêmio. Role para baixo novamente. Você verá os dados das categorias. E é claro que é exatamente o mesmo, mas agora temos dados diferentes. Sim, então isso é exatamente o que é. E os benefícios de fazer isso são ajudá-lo a trabalhar com a API, ok, então, se pudermos buscar dados aqui. Então, obter dados de dinossauros S não será mais um problema no futuro. Quando começarmos a criar o site do filme, definitivamente precisaríamos nos ajustar a partir de um endpoint de API. Então, logo na parte superior, vamos importar os dados diretamente no módulo de dados, todos chamados de exportação. Deixa eu te mostrar. Você pode ver um ponto no topo do pico. Portanto, essa é uma exportação nomeada. E temos que importá-lo assim partir de dados de barra de dados de barra de ponto a ponto. Simples assim. Bom. Agora, aqui é onde a diversão começa. Vamos ter um div aqui, dê a ele um nome de classe para estilizá-lo. Queremos que ele fique escondido em um dispositivo menor. Portanto, em um dispositivo maior, queremos que ele seja flexível, com a largura máxima. Queríamos 15, 20. Portanto, simplificando, não queremos exibir a categoria deslizante em telefones celulares. Tudo bem? Queremos que ele seja exibido em uma tela maior, como seu laptop, desktop e o resto deles. Com certeza, isso será em pixels. E então a margem é automática. Mas no estofamento superior e inferior , o padrão da mão esquerda também é dois. Feito isso, temos que mapear os dados, que são os dados do tópico, tudo bem, então temos que mapear todos esses topos aqui. Assim. Queremos que eles passem por ele e depois o exibam na tela. Na verdade, é muito simples fazer isso. Primeiro, os colchetes de abertura e fechamento. E então eu vou fazer um mapa de pontos de tópicos. Então aqui eu vou fazer o item. Então, esse item aqui representa cada objeto, à direita, dentro da área do tópico. Sim, então agora vamos devolver a interface do usuário. E logo na interface do usuário, começaremos a exibir itens como título, preço, N e imagem. Então, aqui eu vou ter um div com o nome da classe e depois teremos que estilizá-lo. Então, vamos estilizar o raio da borda, que será três posições x L em relação. Então, certo, dentro desse div, vamos ter outro div, dar a ele um nome de classe e depois estilizar o div. Então, como esse cara está posicionado em relação, queremos posicionar esse cara forma absoluta para que ele possa ficar no topo da div principal, assim. Ok? Então essa div aqui vai ser posicionada em cima desse cara. A mais simples dessa posição, absoluta. A largura está cheia, o que a torna 100%. A altura está cheia, o que também torna a altura 100 por cento a BG, eu vou fazer o bloco de traço B G. Mas, nesse caso, queremos que seja um pouco transparente. Então, vou dividir por 50 depois arredondar, que fará com que as bordas fiquem um pouco curvas. Então eu vou ter o Excel, o teste. Apenas torne-o branco. Feche a div. Ok. Vamos encerrar isso. Acho que estou bem. Legal, assim. Então, queremos usar a tag p para exibir o título. Então, aqui eu vou fazer p, depois o título do ponto do item. Você pode lembrar que esse item aqui representa cada objeto na matriz. Então, o título do ponto do item, este é o título aqui que estamos tentando exibir. E então todos esses títulos como esse, todos eles assim, serão exibidos. Porque usamos o item que representa cada objeto a ser exibido, esse título. Definitivamente entenderia isso bem o suficiente. Salve e vamos conferir no navegador, certo? Portanto, antes de conferirmos no navegador, lembre-se de que paramos o servidor, então precisamos reiniciá-lo novamente. Tudo bem, role para baixo. Onde estão os dados? Nenhum lugar pode ser encontrado? Quando você observa a tela, você pode não ver os dados, certo? Mas eu posso te garantir. Os dados estão escondidos no canto inferior esquerdo da tela. Deixe-me ampliar um pouco. E agora eu quero mostrar que você pode ver simplesmente porque não estilizamos, é exatamente por isso que ela aparece assim . Então venha aqui. Agora, vamos dialisá-la, dar a ela um nome de classe e escrever bem no nome da classe. Mas à esquerda e à direita há duas fotos. Ao salvar e finalizar a compra no navegador, você pode não ver isso claramente. Então, vamos fazer algo agora. Essa é a div parental desse cara, ok? Então, posicionamos esse cara em relação e, em seguida, posicionamos esse div para ser absoluto. No sentido natural, isso significa que essa div estará bem na frente desse d. Ok? Então, deixe-me te mostrar rapidamente. Agora, saia do def, fora desse D, ok. Vamos ter uma tag IMG porque eu quero exibir a imagem agora para que tudo apareça do jeito que esperamos. Aqui. Vamos dar a ele um nome de classe. Ok, primeiro, vamos exibir a imagem antes do nome da classe. Então, eu vou apenas desfazer a tag de fechamento automático e vou fazer SRC igual item dot IMG. Deixe-me te mostrar aqui. Então é isso aqui. Quando você salva no navegador. A ideia é, você pode ver, agora parece bom, mas não parece bom porque também não estilizamos a imagem. Mas pelo menos você pode ver que é comida aqui com o título correspondente. Aqui temos o Sharma, temos o suco de frutas, os iogurtes, as laranjeiras, o ovo que estou plantando. Wu vata terá um sabor agradável. Peixe tilápia naquele julho de arroz. Oh meu Deus, pessoal. Vamos estilizar essas coisas. Vamos dialisar isso rapidamente. Agora. Vamos dar a esse IMG um nome de classe. A altura será uma altura personalizada. Então, vamos fazer com que seja 200 pixels. A largura. Vamos fazer com que seja 2100 pixels, o que está cheio. Então, agora, vamos salvar e ver o que temos. Parece assim. Não se preocupe Quando começarmos a implementar o controle deslizante, teremos espaços entre os itens. Agora, vamos terminar. O objeto de estilo será chamado. Então, esse será o objeto que se encaixa. E, na verdade, o que isso faz é redimensionar a imagem para caber em seu contêiner real. Queremos que as bordas da imagem sejam um pouco curvas, expire mais grosseiramente. Vamos fazer disso um indicador. No entanto, quando você passa o mouse sobre a imagem, queremos dimensioná-la. 105. Bom. E queremos que isso facilite a duração. Vamos fazer com que seja 300. Você salva no navegador e está certo, então quando passamos o mouse sobre a imagem, nada acontece. Tudo bem, pessoal, acho que precisamos configurar um controle deslizante antes de começarmos a ver algumas das mudanças. Mas, por enquanto, vamos arredondar com o controle deslizante. Ok? Ok, vamos implementar o canto inferior direito abaixo da tag p, que está dentro desta div aqui. Vamos exibir a parte inferior. Eu vou fazer para cortar. Vamos dialisar a fronteira. A fronteira. Vamos fazer com que seja pontilhado. Esse é o meu próprio estilo, então você pode realmente fazer outra coisa do seu lado. A cor da borda será branca. O teste. Vamos deixá-lo branco também. margens esquerda e direita terão sua posição absoluta. Por fim, o fundo. Vamos fazer quatro, que é a margem inferior. Ok? Quando você salva, vamos ver os resultados. Bom. Consegue ver a linha pontilhada? Você vê? Mas o problema agora é que ele não apareceu em branco. Deixe-me ver uma coisa. Opa, pessoal. É aqui que está o problema. A borda deveria ser branca. Então, agora você pode ver isso na tela. Veja, ok, vamos implementar o controle deslizante para que tudo pareça bom para implementar o controle deslizante. Primeiro, precisamos instalar o slide do React que fizemos no estágio inicial. Confira o arquivo package.json. E aqui está. E então, quando você chega ao pico superior, temos que importar essa praga no slide, slide, incluindo o pacote CSS. Agora, o que vamos fazer é embrulhá-lo com o fornecido. Então, logo após esse div, vou fazer o fornecimento. Feche-o, certifique-se de destacar, copiar e depois colá-lo aqui. Assim. Ok, ótimo. Agora, neste slide, vou fazer as opções de abrir e fechar colchetes e, em seguida, queremos que apareça quatro por página. Se você observar a tela agora, perceberá que temos quase dez itens que aparecem no par na página 1, 234-567-8910. Então essa é a razão pela qual a imagem não tomou sua forma. Ok, agora queremos quatro itens por página. Então, como fazer isso é pouco a pouco. Queremos isso para. E, novamente, antes de prosseguirmos, vamos encerrá-lo com o slide fornecido. Logo abaixo da devolução. Vamos dividir o slide, destacar, cortar, a tag de fechamento e, em seguida, colocá-la após a divisão de fechamento. Aqui assim. Ao salvar uma tela observada, você perceberá que esta cidade será aplicada. Veja, temos 1234 e agora você pode deslizar as imagens. Você pode ver o quão incrível é isso? Temos as setas para deslizar. Dê uma olhada. Linda. Agora, se você observar os itens, perceberá que há mais espaço entre eles. Sim, então vamos fazer isso rapidamente. Venha aqui para criar espaços entre os itens. Tudo o que vamos fazer é que a lacuna será igual a 0,5 rem VCs conforme minha própria especificação, você pode fazer isso para m cinco ou o que quiser no final. Salve e confira o navegador. Agora, você vê, você pode ver isso? Isso é legal. Eu adoro isso. Ok, então uma coisa que eu quero fazer é realmente tornar a droga um pouco mais suave. Então, vamos fazer isso rapidamente. Certifique-se de colocar uma vírgula aqui e então eu vou me livrar das drogas. Ao observar a tela, que está no lado esquerdo da tela, você verá esta seta deslizante aqui. Eu não gosto disso. Ok, então vou cortar meu cabelo e depois vou fazer flechas. Vamos configurá-lo como falso. E eu acho que isso é o fim de tudo. Você vê? Agora a flecha desapareceu. Os campos são formados. O que precisamos fazer novamente? Ok, vamos abrir o console e deixar eu te mostrar. Aqui diz querer cada filho e pelo menos ter um suporte chave único, é claro, você já deve saber disso. Então o que eu vou fazer agora é a chave igual ao item ponto. Portanto, temos que procurar algo que seja usado para identificar os itens de forma exclusiva. E aqui, posso dizer que o ID é a única coisa que pode ser usada para identificar de forma exclusiva todas essas coisas aqui, porque você também pode ter dois itens com o mesmo preço. Você pode ter dois itens com o mesmo título. Então, acho que usar o id é a melhor ideia. Sim, então agora vou fazer a identificação de pontos do item. Quando você salva no navegador. Vamos retirar o console novamente. Atualizar. Linda. Agora você não vê mais o erro do índice de chaves. Por favor, leve cargas ao aplicar a chave, isso deve ser feito no nível superior. Então, quando eu faço algo assim, copio essa chave aqui, capturada. Suponha que eu queira aplicá-lo a esta div. Ao salvar no navegador, abra o console e verá que o gráfico nas folhas deve ter um suporte de tecla exclusivo, simplesmente porque aplicamos o suporte de tecla a esse dv aqui. Portanto, isso deve ser feito no nível superior. Então, vamos fazer assim. Finalização da compra segura, navegador, atualize o console, recarregue. Tudo está funcionando perfeitamente, conforme o esperado. Até agora, tudo bem. Tudo está bom. Eu adoro isso. Portanto, o melhor online é mostrar o prêmio. E com certeza, vamos dar uma alternativa aqui para que, se a imagem não aparecer, algo bom realmente apareça. Se a imagem não aparecer, exibiremos o nome do item. Então, agora eu vou fazer o título do ponto do item. Então, se tivermos uma pausa na imagem, queremos exibir essas coisas aqui, que é o título. Ok, vamos formatar o código e ele parece limpo. Por fim, vamos implementar o preço. De novo. Queremos usar a tag p para fazer isso. Sim, vamos ter uma etiqueta p. E então eu vou fazer o preço por pontos do item. Quando você salva e verifica o navegador. Você pode ver agora que o preço é assim. Vamos dialisá-lo rapidamente com um className, que precisa dar uma parte em B X traço dois, mas à esquerda e à direita há dois. E aqui, para o título, também precisamos fazer com que as fontes fiquem em negrito. Fonte, traço, quadro. O teste para se destacar, preenchendo a parte superior. Ok, vamos uniformizá-lo. Parte na parte superior. Vamos fazer quatro. Você pode ver que tudo parece bem? Adoro esses resultados. Amigos. Você pode ver, pessoal, tudo parece bem. Mas se você observar a borda esquerda da tela, perceberá que não há espaço no meio. E eu não gosto desse jeito. Ok. Então, deve começar daqui assim. Então, vamos dar uma olhada no padrão à esquerda. O nome da classe Div está chegando. Uma tela grande deve parecer flexionada na posição. A largura máxima é de 15, 20 pixels, a margem é Otto, a onda P e a P X são duas. Mas pessoal, dêem uma olhada. É aqui que entra o erro. C P x. Aqui temos que tirar o sinal de igual. Consegue ver o cofre de atendimento? Dê uma olhada agora, parece bom. Gente, na verdade, nós seres humanos, estamos propensos a erros ao digitar e vocês estão ensinando, falando, com certeza cometeriam erros. Sim, então, mas isso não importa necessariamente porque todo mundo comete erros. Por enquanto, tudo isso é para o controle deslizante e está funcionando perfeitamente bem. Adoro o resultado final mais uma vez. Sim, então dê uma olhada. Linda. Isso é tudo por enquanto. E na próxima palestra, prosseguiremos com a fábrica. Portanto, teremos que exibir as gravações dos alimentos na tela. Te vejo então. 64. Componente de refeição: Bem-vindos de volta a todos. Anteriormente, implementamos o controle deslizante de pico superior. E do papai. Tudo bem, então nesta palestra, vamos implementar o componente de refeição. Ok? Então, vamos mapear os dados das refeições e exibi-los na tela com um design muito bonito. E acredite em mim, o design será responsivo, como sempre. Heroína para componentes do código VS e depois refeição. Mas g está próximo do Explorer, um FCE para gerar o componente da função de seta de reação. Ok, vou tirar isso por enquanto. Volte para o app.js e vamos renderizá-lo aqui. Vamos começar estilizando essa div. Primeiro, dê a ela um nome de classe. E então a largura máxima, 15, 20 pixels. Margem automática. Mas não padronizou à esquerda os direitos de preenchimento da parte superior e inferior. Vamos fazer com que seja 12. Sim, então, nessa div, teremos a tag hedge one que será salva como título. Agora vou abordar o tópico. Quero copiá-lo daqui, destacar a etiqueta principal, vir aqui e colar. Só precisamos mudar o artigo. Nossa refeição Save. E aqui está. Você pode ver logo abaixo da tag H1, vamos ter um div, dê a ele um nome de classe. E então estilize menos a div. Queremos que esse div apareça em um tipo de coluna de grade. Tudo bem, então vamos dizer grade de exibição. Então. Em dispositivos médios, como iPads, queremos que a grade apareça em duas colunas. Então, eu vou fazer colunas de grade, traço dois, simples assim. Então, em um dispositivo menor, que é SM, mude esse cara para S M. Em um dispositivo menor, queremos uma coluna. E em um dispositivo maior, queremos quatro colunas. Aqui. Vou mudá-lo para o nosso GI. E não o LG na forma de seu gadget. Ok, isso é grande. Susan, está certa, qual ninho? A diferença deve ser de seis, mas acho que devemos implementar o resto dos estilos quando terminarmos o design. Aqui dentro da div, temos que mapear os dados. E, claro, na palestra anterior, importamos esses dados aqui. E é, certo, estamos nos dados SRC, SRC, e então você verá o arquivo JS de dados. Então, à direita neste módulo, temos os dados Mu. E, claro, isso é apenas uma matriz de objetos. E escreva o objeto de renderização, temos os itens na forma de par chave-valor, o ID, o nome, categoria, a imagem e o preço. E então temos quantos deles aqui? Temos até 15. Bom. Comando B para fechar o explorador. Em seguida, vamos abrir o colchete aqui para incluir expressões em JavaScript. Mas antes de prosseguirmos, temos que importar os dados na parte superior, eu vou fazer as importações. Será uma refeição de exportação nomeada a partir de dados de barra de dados GIS. Aqui, vou fazer o mapa de pontos de dados de refeições, o método do mapa, a vacina, um parâmetro chamado item. E com certeza você pode nomear esse parâmetro como quiser, mas eu recomendo fortemente que você se atenha ao item da convenção, ok? Mas você pode dar a ele qualquer outro nome descritivo do seu lado. Portanto, esse item aqui representa os direitos de cada item dentro do objeto. Então, defina-o para nossa função. E então queremos retornar uma interface de usuário. Certo, na interface do usuário, teremos um div. Vamos dar um estilo a isso. Então. A borda dessa div não será nenhuma porque ela servirá como cartão. Sim. Então, esta é a div sobre a qual toda essa parte superior se apoiará. Então, vamos ter a fronteira a ser conhecida em Hoover. Quando você passa o mouse sobre este div ou sobre este cartão. Então, por exemplo, queremos escalá-lo em 105. E a duração é 300. Feche isso. Sim, então qual ninho? Agora, vamos ter uma tag IMG. Img. Vamos fazer SRC, que é a fonte e a fonte dessa imagem. Está vindo da imagem de pontos do item. Feche com a etiqueta de fechamento automático. Portanto, o molho aqui vem, é claro, dos dados que importamos na parte superior. Então, quando você salva e verifica no navegador, os IDs, Você pode ver a beleza agora em uma tela grande, aparecem em quatro colunas, coluna um, também aparecem em quatro colunas, coluna um, coluna 23.4. Se você observar com atenção, quando eu passo o mouse sobre a imagem, ela aumenta um pouco o zoom, o que a torna extremamente agradável. Dê uma olhada. Você pode ver que, no entanto, eu entendo que não há espaço entre os itens, mas também podemos corrigir isso rapidamente. Agora, volte para o cartão, que é esse cara aqui. Eu vou fazer a lacuna, a lacuna de seis. Salve no navegador. Você pode ver agora que temos espaço entre as imagens. Mas, novamente, você perceberá que as imagens não estão bem, Stout, não se preocupe, faremos isso em um G V. Então, agora conseguimos exibir todas as imagens corretamente, dentro dos dados da refeição. Esses caras estão aqui. Tudo isso é legal. Agora você sabe como andar dinamicamente com o React js usando o método map. Ensinar, ótimo. Linda. Tudo bem, vamos continuar. Agora. Vamos estilizar a imagem. Então, aqui eu vou fazer className, dentro da classe, eu vou fazer a largura. Vamos fazer com que seja 100 por cento, a altura. Vamos torná-lo 100% seguro no navegador, nos IDs. Agora, está tudo bem, mas quando você observar novamente com cuidado, você vai perceber que as imagens estão meio quebrando como essa imagem aqui. Portanto, temos que redimensionar a imagem de forma que ela caiba em seu contêiner. E a maneira de fazer isso é especificando os feeds do objeto. Venha aqui. E eu vou fazer Object dash cava. Portanto, a alimentação do objeto é cava, salve no navegador. Você pode ver que todos eles estão bem agora, eu gosto. Vamos fazer com que a parte inferior da imagem fique um pouco curvilínea. Venha aqui e eu vou fazer um traço arredondado, LG, salve no navegador. Do papai. Agora você tem as bordas arredondadas. Espero que você possa ver isso claramente. Ótimo. Vamos continuar. Tudo bem, então pessoal, há algo que eu apenas observo agora. Se você olhar de perto, perceberá que a altura das imagens não é igual. Como esse chuveiro mais aqui. A altura não é igual a essa pizza. E também, esses peixes de tilápia muito saborosos que você pode ver por lá. Portanto, temos que procurar uma maneira de fazer com que as alturas sejam iguais. E, claro, vai ser muito fácil. Então, vamos mudar a altura para 200 pixels. Quando você salva no navegador. Eles são todos iguais. Agora, ensinar bem, é lindo. Portanto, se houver uma quebra na imagem, teremos que exibir o tipo alternativo de opção. Então, aqui eu vou fazer uma alternativa. Queremos exibi-lo dinamicamente. Vou colocar o ponto do item no nome do item. Bom. Feito isso, vamos trabalhar no nome. Logo após a tag de fechamento do IMG, teremos um div, daremos um nome ao cluster para estilizá-lo. E então vamos fazer com que ele seja flexível. Justifique o espaço do conteúdo entre preenchimento superior e inferior para o preenchimento à esquerda e o padrão à direita. Vamos fazer quatro também. Ok, vamos fazer esses dois para que não se tornem demais. Feche a div. Salve , dentro desta div, vamos usar a tag p para exibir o preço. Ok? Vou fazer Hi Tim, dogs, price, save and see no navegador. Ok, agora você tem o preço aqui, mas não é assim que queremos. Agora, vamos dialisar isso. Vamos dar a ele um nome de classe. Queremos que o fundo seja laranja. Traço laranja 700. A altura é, está na largura. Tem 18 anos. Arredondado, queríamos enganar. Você pode ver que isso fará com que o raio da borda seja esférico, quase 100%. Sim. Quando você salva no navegador, o papai está. Ok, você pode ver que agora não está aparecendo bem. Então, agora queremos colocá-lo em cima da imagem. Então, eu vou fazer a margem superior. Vai ser menos dez. É por isso que eu uso esse topo de margem negativa para ser dez. Então, isso realmente fará com que esse valor seja um valor negativo. Salve e veja do que estou falando. Isso vai empurrá-lo para o topo. Você pode ver agora que temos o material aqui , bem no topo da imagem. Então lembre-se de que antes estava abaixo da imagem, agora está no topo, à direita. Então, o teste, vamos torná-lo branco. Branco. Pui, que é o padrão superior e inferior, parte inferior do preenchimento à esquerda e à direita está na borda, é oito porque queremos dar a ela uma borda muito grande. Quando você se salva e semeia, você pode ver que agora ela está gradualmente tomando forma. Eu amo isso honestamente. Isso parece tão bonito e tão bonito. Sim, isso é legal, incrível, incrível, fantástico. As fontes, vamos deixá-las em negrito. Painel de controle de empresas. Tudo bem, então não exibi o preço. O ninho e a linha são, vamos dar uma olhada aqui. O nome da refeição. Sim, então logo acima do preço, teremos outra etiqueta p. Então eu vou fazer o nome do ponto do item. É tão simples quanto isso. Salve, confira. E você vê que o nome aparece aqui. E agora, empurrou o preço para a direita. Tudo aqui está bem e eu adoro isso. Vamos continuar. Vamos dar um pouco de estilo. Aqui. Eu vou fazer o painel de fontes. Essa é a única coisa que vamos fazer aqui . Eu posso te garantir. Ok, Cool. A próxima é a visão mais votada. Sim, então teremos um botão Exibir Mais logo abaixo do nome do item. Então, logo após esse div de encerramento, teremos outro div com o nome da classe. Ok, vamos fechá-lo. Vamos colocar um preenchimento à esquerda de dois e depois preencher a parte superior e inferior. Vamos fazer com que caia. Ok, agora, você pode não ver nada. Então, vamos trabalhar nisso aqui. Vamos ter uma etiqueta P e eu vou fazer uma visualização assim. E o que eu vou fazer é exibi-lo com uma seta. Então vá para o topo. Vamos importar. Vamos importar o ícone direito da seta SM do. Portanto, antes de prosseguirmos com a entrada, vamos instalar rapidamente o pacote aqui. Npm install, adhere, icon slash, reaja aqui, você também pode visitar sua página e copiá-la daqui. Você vê sinal verde para instalar. A solução está em andamento, então vamos continuar importando a barra, reagindo e olhando do ícone do herói. A instalação está concluída. Linda. Ok, vamos iniciar o servidor para que não tenhamos que fazer isso de novo. Então, aqui queremos exibir o ícone. E eu vou fazer mais depois da exibição. Vou fazer nosso ícone correto do OSM. Feche com uma etiqueta de fechamento automático. Vamos dar rapidamente a esse tau, a largura. Vamos fazer com que sejam cinco. Margem esquerda. Vamos fazer isso também. Sim, então quando você salva e confere o navegador, ok, pessoal, o ícone não está funcionando. Na verdade, não sei por quê. Então, vou pausar o vídeo e depois fazer uma pesquisa nos bastidores para entender por que o ícone não está funcionando. Porque, na verdade, fizemos a coisa certa aqui. Também podemos fazer algo como um contorno de barras. Vamos ver o que acontece. Não funcionou. Ok, vamos ver o console. Você está tentando importar, blá, blá, blá, blá, blá, blá, blá. Da V1. Ambos instalaram sua própria visão de ícones para nossos caras certos, parece que eles realmente atualizaram a biblioteca. Agora eu tenho que fazer uma reinicialização nos bastidores e ver o que funciona para nós. Tudo bem. Te vejo então. Tudo bem, pessoal, embarquem. Depois da pesquisa que fiz nos bastidores , percebi isso. Eles atualizaram a biblioteca, ok, então a única solução que tenho no momento é fazer o downgrade da biblioteca profissional. Se você olhar aqui, perceberá que instalamos a versão 2.0. Portanto, a ideia é fazer o downgrade para a versão um. Sim, então vou destacar, limpar e salvar diretamente no arquivo package.json. E venha aqui, deixe-me te mostrar. Temos que copiar esse cara daqui, assim, cópia. E então, diretamente no terminal, verifique se você está no diretório do cliente, comando V para colar. Então, vou fazer isso simplesmente porque temos que segmentar uma versão específica, 1.0, 0.6. Portanto, essa é a versão que nos permitirá usar esse erro específico. Então, quando eu instalo, vamos ver o que acontece. Ok, tudo bem. Instalado, bem-sucedido. E por que é isso? Então, volte para o giro medial. E então, se você não tem esse esboço, você só precisa fazer algo assim. Esboço de corte. Salvar. Vamos começar com vários mais uma vez. Tudo bem, então quando você rola para baixo, aqui está o erro. Agora temos a seta exibida na tela. Então, nesta linha deve alinhá-la adequadamente porque queremos que ela fique mais na frente da vista. Sim. Então, volte ao código VS. Então. Vamos dialisar a tag p. Dê a ele um nome de classe. Aqui vamos fazer com que ele seja flexível. Então, quando você exibe flex, tudo vai aparecer na mesma linha. Aqui está, você pode ver? Incrível. Vamos alinhar os itens ao centro. O teste. Esquivar. O lote Indigo contém 100. Vamos dar uma olhada. Oh, lindo. Dei uma olhada. Você pode ver? Funciona bem. Vamos pensar que há espaços entre o modo de visualização e o nome do item que, na verdade, são demais e não estão bem alinhados em relação ao eixo esquerdo. Então, vamos corrigir isso rapidamente. Vamos dar a ele uma margem superior. Será um valor negativo, o que o empurrará para o topo. Vamos fazer com que seja sete. Salve o navegador. Agora, funcionou, mas não está na mesma linha do lado esquerdo. Tudo bem pessoal, então isso é tudo por enquanto. E na próxima palestra, continuaremos com esse componente. 65. Chave de componente de refeição: Bem-vindos de volta a todos. Tudo bem, então antes de prosseguirmos, quero chamar sua atenção para um resultado muito importante e eu, para abrir o console, certo? Estamos no console. Você quer ver se sua criança em uma lista deve ter um adereço chave exclusivo, pessoal Na verdade, pensei que vocês conseguiriam descobrir isso do seu lado. Mas não tem problema, vou ajudá-lo a voltar ao código VS aqui. Deixe-me ver. Dentro dessa div, vamos especificar a chave. chave é igual a item.name id. O id é o que pode ser usado para identificar de forma exclusiva os itens na matriz dos dados da refeição. Claro, você sabe disso. Deixe-me te mostrar mais uma vez. Ok, aqui está. Portanto, o ID é exclusivo. Portanto, temos que usar o ID como um teste de chave exclusivo para identificar cada elemento na matriz ou em cada objeto, por exemplo, Atualizar. E agora, quando você atualiza o console, tudo está funcionando bem. Você não tem mais o erro irritante do que o bom. Outra coisa importante que eu quero que você anote é o nome do item e a equipe de visualização móvel. Então, queremos que esteja alinhado. Você pode ver que parece que está sobreposto. O que precisamos fazer agora é alinhá-los adequadamente. Venha aqui. Então, dentro desse div, esse div aqui. Então dissemos que o padrão, padrão esquerdo à direita, é quatro aqui e Micky dois aqui, Save. Agora está tudo alinhado. Outra coisa que queremos fazer aqui é que você pode ver que não há espaço entre o título e os itens. Então, eu só vou errar. Aqui. Temos que o PI é 12. Isso aqui. Vamos ver o que acontece. Vamos ter um PUI aqui. Mas em cima e em baixo, embaixo, vamos fazer quatro. Salvar no navegador ou certo? Agora, tudo está funcionando perfeitamente, conforme o esperado. Na próxima palestra, começaremos a implementar a navegação para classificar os itens de acordo com as categorias. Nos vemos na próxima palestra. 66. 64 Botões: Ok, agora temos um design muito bonito com os itens exibidos na tela. O próximo passo é implementar os painéis para classificar os itens por categorias. Tudo bem, então, ao clicar no botão, queremos classificar os itens por suas categorias correspondentes. Vamos implementar isso rapidamente. Código Vs. Então, logo após o fechamento da etiqueta principal, teremos um div. Vamos dar a ela um nome de classe para que possamos estilizá-la. Vamos ter esse div display flex. A direção da flexão é cólon. Em dispositivos grandes, a direção flexível será Rho. Justifique o conteúdo para o centro, feche o DFF. Então, certo, dentro desse div, vamos ter outro div, dar a ele um nome de classe e então podemos estilizar o div. Agora mesmo. Vamos ter um display flex, então vou copiar daqui e colar. Também queremos que seja justificada a pasta central. E o que está, novamente, em um dispositivo médio MD. Também queremos justificar o conteúdo para centralizar. É tão simples quanto isso. Tudo bem, então vamos criar rapidamente os botões. Aqui eu vou fazer, tudo bem, estamos neste destaque de navegação. Duplique-o três vezes. Então aqui eu vou fazer pizza, verificar, verificar a grafia da galinha. E por último, vou fazer Salat, exceto. E vamos ver o que temos no navegador. E osso. Você pode ver que parece assim. Na verdade, parece muito legal, mas eu quero usar um pouco de lanterna profissional para que o botão pareça medido em Andes. Então, o que fazer agora é dar aula de botânica e depois estilizá-la, destaca o Bertin. E, por favor, só precisa ser preciso aqui, estou destacando apenas os direitos de voto dentro da tag. Agora estou destacando as línguas. Então, quando você destaca o primeiro presidente apoiante, o OT e a tecla de comando em seu teclado. Em seguida, toque na tecla de seta para baixo para selecionar várias coisas e, em seguida, dê a ela um nome de classe. Agora você pode ver? Queremos estilizar todos os botões de uma só vez, e isso é fantástico. Isso facilita o trabalho. Gente, estou te ensinando algumas paradas profissionais por aqui. E espero que você goste. Dê uma margem de um. A borda será laranja, traço 700, mas o teste será branco. Então, no Hoover, queremos mudar a cor de fundo para branco. Eu vou fazer em Hoover. Mude o fundo para branco. Sim. Depois, também ao passar o mouse. Queremos mudar o teste para Orange Dash 700. Novamente em Hoover. Também queremos mudar a cor da borda para laranja traço 700. Acho que isso é tudo por enquanto. Ok, vamos salvar rapidamente no navegador. Opa, dê uma olhada. Então pessoal, vamos mudar o plano de fundo aqui. Temos que aplicar o plano de fundo. Deixe-me mostrar como fazemos isso agora. Aqui temos a borda para ser laranja. O teste é branco, a margem é uma. E então vamos especificar o plano de fundo. Bg, dash, orange, dash, 700, salve e veja o resultado no navegador. Bom. Tudo funciona perfeitamente bem. Mas agora, quando você clica nos botões, nada acontece. Opa, pessoal, dêem uma olhada. Certifique-se de corrigi-lo. Deve ser sólido e não o contrário. Assim. Tudo bem. Pizza, tudo, tudo está escrito. E depois salve aqui. Bom. Parece bom com o efeito de passar o mouse funcionando perfeitamente bem. Linda. Eu amo o que estou vendo honestamente. Então, quando clicamos em que as ervilhas estão votando, ele selecionará todos os itens relacionados à praça. O frango selecionará os itens relacionados ao frango. E então o sólido também filtrará os itens com classificação sólida. Então, como fazer isso agora? Então, primeiro temos que importar os EUA, gancho na parte superior. É importante usar dívidas. E aqui vamos fazer os trechos usados. E eu vou chamar isso de alimentos. Vamos colocar alimentos como esses no Cup. Dei uma olhada. E aqui o estado inicial será o dado da refeição, que é o objeto de dados que temos no pacote de dados. É importante te mostrar isso de novo? Ok, deixe-me te mostrar aqui. Esta é a refeição Beta, ok? Então, tendo feito isso, presume-se que atribuímos os dados da refeição a uma variável chamada alimentos. Então eu vou copiar, venha aqui. Então, vamos fazer mapa de pontos de alimentos quando você salvar e conferir o navegador. Frase, tudo legal. Sim. Certo. Então, vamos implementar a funcionalidade do filtro. Estrague tudo logo abaixo das variáveis de estado. Vamos definir a função para filtrar os itens por cada categoria. Agora, vou criar algumas categorias de TA, que é o nome da função. Em seguida, vou pegar a categoria como parâmetro e, em seguida, configurá-la para nossa função. Aqui, temos que atualizar o estado inicial. Então, vou fazer o filtro de pontos de dados de refeições porque vamos filtrar dados do MUX para selecionar com precisão cada categoria. Ok? Então aqui eu vou fazer o item, sim. Novamente, defina-o para nossa função. Pronto, retornaremos a pontos do item igual à categoria real, certo, dentro dos dados da refeição. Então, tendo feito isso, menos de uma linha é implementar o onclick. Vamos formatar o código. Assim. Desclique em igual. Temos que atualizar os alimentos e alimentos de acordo com meus dados. Ok, bom. Destaque esta cópia, vá até a peça para cima ou para a lata e depois vamos colá-la aqui. Mas agora, neste caso, queremos chamar a função que definimos aqui. Chame essa função assim. Então temos que passar na categoria pizza. Ok? Salve e vamos ver se funciona. Diz que as categorias não estão definidas para. Eu fiz isso? Por outro lado, meu Deus pessoal, dêem uma olhada na linha dez. Agora, deve funcionar. É minha data não definida. Opa. Os olhos do cara estão se fechando aqui. É tarde da noite, desculpe por isso. Agora vamos experimentá-lo na Piazza. Funciona, pessoal, está lindo. E quando eu clico em Tudo, ele retorna todas as refeições. Acho que é bom, mas salada de frango não está funcionando por enquanto. Vamos implementá-lo rapidamente. Eu só tenho que copiar esse cara. Cole aqui mesmo. E isso vai ser frango. Eu amo muito frango. Em seguida, copie novamente, inserido no corpo sólido, e depois altere a categoria para sólido. Salvar. No navegador. Atualizar. Quando você clica em pizza , mostra pizza, frango, salada de frango. Parece sólido. Isso é extremamente fantástico, pessoal, e eu adoro isso. Estou adorando cada pedacinho desse curso. Isso é tudo por enquanto e tudo está funcionando perfeitamente, conforme o esperado. Vamos verificar a capacidade de resposta do celular. Consegue ver isso? Funciona bem? Dê uma olhada. Vamos fazer isso em um dispositivo iPhone. Frango para salada. Oh meu Deus. Ok, vamos continuar. Na próxima palestra, começaremos a implementar a seção de categorias principais. Isso é tudo por enquanto. Nos vemos na próxima palestra. 67. 65 categorias de tendência: Linda. Tudo bem, então, nesta palestra, vamos trabalhar nas principais categorias. Então, basicamente, o que vamos fazer é mapear as categorias e exibi-las na tela. E, claro, vamos dar a ele uma aparência muito bonita em termos de design para que pareça atraente aos olhos dos usuários finais. Siga o comando B do VS Code para abrir as categorias de jazz do Explorer. E então eu vou fazer uma análise aproximada, degenerar é um componente funcional e , em seguida, só precisamos analisar os dados novamente. Então, aqui estão os dados das categorias, essa seta aqui com objeto e depois os itens ali. Então, basicamente, vamos exibir o nome e as imagens. Feche isso. Então, primeiro, o que vou fazer é importar categorias. E, por favor, esta é uma letra minúscula dos dados da barra de dados de barra de dados de ponto a ponto. Claro que você já deveria saber disso. Precisamos renderizar o componente de categorias diretamente no aplicativo. Além disso, certifique-se de importá-lo na parte superior. Então, agora eu vou fazer categorias de console.log. Definitivamente, algo aparece diretamente no console. E aqui estão os detalhes. Você pode ver? Temos que o índice é zero, o ID é um, o nome da categoria e o caminho da imagem. Sim, então pessoal, isso é exatamente o que temos por enquanto. Então, vamos ver como podemos exibir todas essas características na tela. Vamos dar ao div um nome de classe para estilizá-lo. A largura máxima será de 15, 20 pixels. Margem, automática. O acolchoamento esquerdo e o canto inferior direito são para a parte superior externa e a parte inferior do acolchoamento é de 12 K. Quero ser exato, então não tenho certeza disso. Deixe-me abrir o e-mail JS ou qualquer outra coisa e deixe-me ver. Ok. 15, 20, acho que é isso. Ok. Ótimo. Quando você salvar aqui, teremos uma tag de cabeçalho que será salva como título, página um, diretamente em Eu também farei as categorias mais populares. Eu só tenho que copiar o estilo daqui. Eles são todos iguais. Copiar. Venha aqui. Só tenho que substituí-lo assim. Salve o navegador. Aqui. É isso. Bom? Portanto, o PY tem 12 pixels, acho que devemos fazer com quatro pixels. Sim, isso é beta agora. Tudo bem, então vamos continuar. linha de Vanessa agora é mapear os dados e depois exibi-los na tela. Além de estilizar o item para que fique bem aos olhos dos usuários finais. Aqui, vamos ter um div, dê a ele um nome de classe, grid dash. Então, vamos fazer com que seja uma grade de exibição. Em um dispositivo médio. Queremos que a grade exiba as colunas seis. Em seguida, dê ao espaço cinco, preenchendo a parte superior e inferior, cinco, preenchendo para a esquerda e o padrão para a direita. Vamos fazer isso também. Vamos começar a mapear as categorias. Categorias, pontos, mapa. Eu acredito que todos vocês podem mapear por meio de um item. Não há mais muita coisa para todos vocês, porque estamos fazendo isso nas últimas quatro a cinco palestras no momento. Então, sim, eles podem itens que representam cada elemento corretamente, dentro da matriz. E aqui vamos retornar uma interface de usuário, dar a ela um div com o nome da classe. Vamos dialisar qual será o padrão div, vamos fazer com que ele exiba o flex. Justifique o conteúdo para centralizar. Itens, alinhe. Centro. Em Hoover. Queremos que ele seja escalado de um a cinco e a duração seja 300. Ok, tudo bem. Fechado sob dv. De novo. Aqui eu vou fazer IMG, SRC, item igual, imagem de pontos. Feche isso. Quando você economiza. Vamos tirá-lo no navegador. Opa, nada está aqui. Certo, pessoal. Vamos fazer assim. Dê uma olhada. Você pode ver? Funciona. Isso está lindo. Ok, vamos analisar o topo agora mesmo. Então, a imagem, vamos dar uma alternativa. Se o link da imagem ficar inativo, algo mais pode realmente aparecer na tela. Agora, a alternativa, ok, eu vou fazer o nome do ponto do item. Então, na verdade, quando o link da imagem estiver morto, esse cara vai aparecer, que é o nome do item. Deixe-me mostrar, por exemplo a. Erro neste momento, quando eu salvo no navegador, você vê que ele vai exibir os nomes, certo? Então, essas são as alternativas, certo? Bom. Eu lhe disse no início deste curso que vou tentar, tanto quanto possível explicar tudo de forma simples, para que todos entendam bem o suficiente. E, a propósito, varia a voz de Albert Einstein. Tudo legal. Quando você verificar o console, você verá este aqui. Então, neste momento, quero que você pause o vídeo e tente tanto quanto possível, implementá-lo do seu jeito. Bem-vindos de volta a todos. Agora, eu quero ajudá-lo a resolver esse problema. Na verdade, não é um problema, ok? Então, isso é apenas uma coisa muito simples que todos podem fazer. Então, temos que especificar a chave, certo? No nível superior. Vou fazer um item muito difícil, ID, porque ID é algo que pode ser usado para identificar as categorias de forma exclusiva. Vamos refrescar. Bom. Você pode ver que é móvel, responsivo. Difícil, tudo bem, então tudo está funcionando perfeitamente, conforme o esperado. Isso é tudo por enquanto. E na próxima palestra, começaremos a implementar os componentes do boletim informativo. Te vejo então. 68. 66 Contagem de Cateogry de tendência: Então, rapidamente, vamos prosseguir com o componente de boletim informativo VS Code. E então temos que abrir os componentes do boletim informativo. Ok, rapidamente, Let's run died dentro do componente do aplicativo. Agora vamos começar. Vamos dar um nome à classe desse defeito. Então, podemos estilizá-lo. A largura máxima será, como de costume, de 15, 20 pixels. A margem será Otto. O teste. Vamos torná-lo branco. Acolchoamento à esquerda e à direita. Vamos fazer com que caia. Então. O BG, que é a cor de fundo, vamos especificar nossa própria cor personalizada. Então eu vou fazer 24, 26 para ser outro div com o nome da classe. Desta vez, vou fazer uma grade de exibição automática com o máximo de traços e um dispositivo grande. Queremos que ele cumprimente a coluna três. E então o div com o nome da classe. Então, dispositivo destravado, vamos fazer com que seja bom. Margem, superior e inferior. Vamos fazer cinco ou quatro. Ok. Vamos usar uma etiqueta principal e eu darei bons conselhos sobre como melhorar seu piso. Vamos ter uma etiqueta p aqui. Logan, sim. Ok, vamos salvar o aplicativo para ver o que temos no navegador. Outro div, dê um nome de classe, e então eu vou fazer MEU dash four, certo? Dentro desta div. Teremos outro div com o nome da classe e , em seguida, teremos um display flex. Portanto, a direção da flexão é cólon. Em um dispositivo menor. A direção da flexão será em linha. Vamos alinhar os itens. Centro. Justifique o conteúdo. Espaço entre. A largura será a largura total, o que a torna 100%. Ok? Tudo bem, estamos nesta div, vamos ter uma tag de entrada aqui. A entrada é fechada com uma etiqueta de fechamento automático. Vamos dar a ele um nome de classe. P traço três. Vamos ter uma tela flexível com a qual ficará cheia. Em seguida, arredondado. Teste médio, vamos torná-lo preto. Bom. E o tipo de entrada é igual a e-mail. Vamos dar a ele um espaço reservado. Vou enviar um e-mail quando você salvar no navegador. E aqui está. Ok, então o próximo termo é criar a navegação. Então, logo após a tag de fechamento do campo de entrada, teremos uma garrafa. Dê a esse botão um nome de classe e depois estilize-o. O plano de fundo será um plano de fundo personalizado. Então eu vou fazer aquelas setas D, F, a. O teste é amplo. Queremos que a borda seja um pouco curvilínea. As fontes terão largura média. Então, a largura do botão, vamos fazer com que seja 200 pixels. Margem esquerda. Vamos fazer com que a margem esquerda seja quatro. E, em seguida, marque a margem superior e a margem inferior. Vamos fazer com que sejam seis. Margem esquerda e margem direita. Além disso, vamos fazer seis. Então. Fronteira. Nenhum. Então, aqui vou me notificar com segurança. Você pode ver aqui Acho que a largura do botão não é. Tudo bem, pessoal, aqui deveriam ser pixels, certo? Bom. Então, logo após o encerramento da div, teremos uma tag P. E eu vou fazer. Então. Na verdade, isso ajudará a criar espaço intermediário. E eu vou fazer aqui. Vamos ter span, dê a ele um nome de classe. Temos que estilizá-lo. Teste, teste interno vai ficar bem. Só precisamos usar a mesma cor aqui, então copie e cole. Tudo bem, por fim, o que vou fazer agora é destacar a etiqueta de fechamento capturada e fechá-la aqui. Então, depois disso, logo abaixo da div de fechamento, teremos uma seta de cobertura. Dê uma aula. Então, isso traçará a linha intermediária. Então se preocupe, eu vou te mostrar, ok, vamos fazer um comentário sobre eles. Salve o aplicativo. E agora temos algo assim. Parece bom. Remova os comentários e depois o nome da classe. Eu vou fazer. Meu traço oito. Para estilizar o engate estão o traço g, traço cinza 700 na borda. Trace um. Aqui estão os resultados. Ok, então essa linha aqui. Acho que tudo é legal. Sim, então, novamente, vamos examinar essas coisas aqui porque eu não gosto da forma como o botão aparece. Então fique por aqui. Meu E6. P x é três, e então P Y é três. Ok? Então, acho que temos que adicionar um preenchimento a ele. Então, eu vou fazer PY, que é preenchimento, parte superior, preenchimento inferior. Vamos fazer com que sejam três. Salve nossos olhos. Parece muito bom e eu adoro isso. Por enquanto, isso é tudo para os componentes do boletim informativo. E na próxima palestra, prosseguiremos com o FUTA. Nos vemos na próxima palestra. 69. Componente de 67 rodapé: Bem-vindos de volta a todos. Tudo bem, então, na palestra anterior, implementamos o componente de boletim informativo. Com certeza, tudo parece bem conforme o esperado. Então, nesta palestra, prosseguiremos com a implementação do FUTA. Volte para o VS Code, abra o Explorer e aqui estão os anos completos de Todd. Cada FCE gera nossa linha de tônus venoso de componentes funcionais para importar os ícones de mídia social necessários que serão usados no rodapé. Então, aqui eu vou fazer em potes FA, driblar a vírgula quadrada. E isso deve ser o triplo B, depois f, um quadrado do Facebook, FAA, quadrado do GitHub, Instagram. E, por último, FA, Twitter. E tudo isso vem dos ícones do painel do React. E então temos que resolver, consertar com o mais simples que temos, quadrado de reinicialização FH, f. F é quadrado grande, quadrado GitOps, Instagram e Twitter. Tudo bem, vamos continuar. Agora. Vamos dialisar o div. Então, teremos a largura máxima de 15, 20 pixels. A margem será automática. padrão X, que é da esquerda para a direita, serve para preencher a parte superior e inferior, da parte inferior até a cor do plano de fundo. Tudo bem, então vamos copiar alguns dos materiais do boletim informativo. Ok, então essa é a cor de fundo que usamos. Então, eu vou fazer assim. Tudo bem. Vamos ter outra div, dar a ela um nome de classe, e depois ficaremos na parte superior e inferior, a parte inferior será 16. Mas então o padrão esquerdo à direita é quatro. Vamos ter uma grade de exibição. E em um dispositivo grande, queremos que a grade exiba três colunas. Então, a diferença, a diferença é oito. Os testes dão a ele uma cor de grade verde 300. Legal. Outra div, certo, dentro dessa div, teremos uma tag principal. Então eu vou fazer isso o mais rápido possível para estilizar o Adriano, dar-lhe uma largura total. O teste será de três x L. A fonte estará em negrito. A cor vai ser laranja. Dash 500. Linda. Agora vamos ter uma etiqueta p, certo? Quando a tag p, vou copiar e colar o teste fictício. Vamos formatar o código. Depois de fechar a tag p, teremos outro div, daremos a ele um nome de classe e, em seguida, faremos com que ele exiba flex. Justifique o conteúdo. Espaço entre dispositivos médios. Vamos ter a largura de 75 por cento, margem superior e margem inferior. Vamos fazer com que sejam seis. E aqui está isso. Lee é onde exibiremos o ícone. Ok, então primeiro vamos ter o tamanho quadrado do Facebook. Vamos fazer com que seja 30. Em seguida, destaque, duplique quatro vezes. Este lugar será o Instagram, FE, Twitter, GitHub Square. E por último, FE drible ao quadrado. Tudo bem, vamos economizar. Vamos executar isso. O componente diretamente no aplicativo G está aqui. Teremos uma palestra completa para importá-la na parte superior. Salve no navegador. Eles são esses. Você pode ver? Dê uma olhada. Facebook, Instagram, Twitter, GitHub e o drible. Minha porta. Não apareceu como um espectador. Não se preocupe. Vamos dar a ele um treinador profissional. Então, vamos fazer isso rapidamente. Então, logo após esse div de encerramento, teremos outro div com o nome da classe. Desculpe pessoal, certo, dentro da div. Em dispositivos maiores, teremos seu traço de extensão de coluna, é verdade. Vamos ter uma tela flexível que justifique o espaço do conteúdo entre as seis primeiras margens. Outro div, certo? Dentro desta div, teremos um engate seis mais escuro. E eu vou fazer a localização aqui. Eu vou fazer className da mesma forma. Vamos fazer com que os telefones sejam médios. O teste. Vamos usar um teste personalizado aqui. Então eu vou fazer 999. Tudo bem? Vou te dar um pequeno toque de verde, certo? Agora vamos ter em tudo que pelo menos você escreverá que não era um UL. Teremos os itens da lista. Então, aqui, dê um nome de classe. O preenchimento da parte superior e inferior servirá para testar o ASM, o que implica no tamanho da fonte e nos destaques da altura da linha, precisamos duplicá-lo três vezes. Então, aqui eu vou fazer a cidade de Nova York. Eu vou fazer EUA, Índia. Por fim, temos o Canadá. Eu amo muito mais o Canadá, certo? E faz, aliás. Então, o que é, agora, vou destacar essa div. Em seguida, vamos duplicá-lo três vezes. 123. E esse é o verdadeiro d que criamos. Salve e vamos ver o que temos no navegador. Tudo parece bem, mas com certeza, esse não é o resultado esperado. Então, eu não gosto da forma como essas coisas estão espalhadas. Portanto, volte ao código VS, a menos que corrija isso rapidamente. Basicamente, é aqui que está o problema. Aqui, dissemos que, em dispositivos maiores, queremos que seja a coluna três da grade. Mas o problema é que tudo estava misturado. E eu acho que essa é uma das desvantagens do vento de cauda. Você tem que estar fazendo o traço três da coluna. Se você não usar esses dados aqui, eles não funcionarão para você. Então, quando você faz o Columbus dash three, ele o divide em três colunas. É quando tudo vai ficar bem. E você vai ter algo assim. Dê uma olhada. Você gosta disso? Tudo bem pessoal, esse é o fim da palestra e acredito que tudo está conforme o esperado. Você pode ver? 70. 68 Teste e fixação: Bem-vindos de volta a todos. Tudo bem, então, na palestra anterior, implementamos o componente de boletim informativo. Com certeza, tudo parece bem conforme o esperado. Então, nesta palestra, prosseguiremos com a implementação do FUTA. Volte para o VS Code, abra o Explorer e aqui estão os anos completos de Todd. Cada FCE gera nossa linha de tônus venoso de componentes funcionais para importar os ícones de mídia social necessários que serão usados no rodapé. Então, aqui eu vou fazer em potes FA, driblar a vírgula quadrada. E isso deve ser o triplo B, depois f, um quadrado do Facebook, FAA, quadrado do GitHub, Instagram. E, por último, FA, Twitter. E tudo isso vem dos ícones do painel do React. E então temos que resolver, consertar com o mais simples que temos, quadrado de reinicialização FH, f. F é quadrado grande, quadrado GitOps, Instagram e Twitter. Tudo bem, vamos continuar. Agora. Vamos dialisar o div. Então, teremos a largura máxima de 15, 20 pixels. A margem será automática. padrão X, que é da esquerda para a direita, serve para preencher a parte superior e inferior, da parte inferior até a cor do plano de fundo. Tudo bem, então vamos copiar alguns dos materiais do boletim informativo. Ok, então essa é a cor de fundo que usamos. Então, eu vou fazer assim. Tudo bem. Vamos ter outra div, dar a ela um nome de classe, e depois ficaremos na parte superior e inferior, a parte inferior será 16. Mas então o padrão esquerdo à direita é quatro. Vamos ter uma grade de exibição. E em um dispositivo grande, queremos que a grade exiba três colunas. Então, a diferença, a diferença é oito. Os testes dão a ele uma cor de grade verde 300. Legal. Outra div, certo, dentro dessa div, teremos uma tag principal. Então eu vou fazer isso o mais rápido possível para estilizar o Adriano, dar-lhe uma largura total. O teste será de três x L. A fonte estará em negrito. A cor vai ser laranja. Dash 500. Linda. Agora vamos ter uma etiqueta p, certo? Quando a tag p, vou copiar e colar o teste fictício. Vamos formatar o código. Depois de fechar a tag p, teremos outro div, daremos a ele um nome de classe e, em seguida, faremos com que ele exiba flex. Justifique o conteúdo. Espaço entre dispositivos médios. Vamos ter a largura de 75 por cento, margem superior e margem inferior. Vamos fazer com que sejam seis. E aqui está isso. Lee é onde exibiremos o ícone. Ok, então primeiro vamos ter o tamanho quadrado do Facebook. Vamos fazer com que seja 30. Em seguida, destaque, duplique quatro vezes. Este lugar será o Instagram, FE, Twitter, GitHub Square. E por último, FE drible ao quadrado. Tudo bem, vamos economizar. Vamos executar isso. O componente diretamente no aplicativo G está aqui. Teremos uma palestra completa para importá-la na parte superior. Salve no navegador. Eles são esses. Você pode ver? Dê uma olhada. Facebook, Instagram, Twitter, GitHub e o drible. Minha porta. Não apareceu como um espectador. Não se preocupe Vamos dar a ele um treinador profissional. Então, vamos fazer isso rapidamente. Então, logo após esse div de encerramento, teremos outro div com o nome da classe. Desculpe pessoal, certo, dentro da div. Em dispositivos maiores, teremos seu traço de extensão de coluna, é verdade. Vamos ter uma tela flexível que justifique o espaço do conteúdo entre as seis primeiras margens. Outro div, certo? Dentro desta div, teremos um engate seis mais escuro. E eu vou fazer a localização aqui. Eu vou fazer className da mesma forma. Vamos fazer com que os telefones sejam médios. O teste. Vamos usar um teste personalizado aqui. Então, eu vou fazer 999. Tudo bem? Vou te dar um pequeno toque de verde, certo? Agora vamos ter em tudo que pelo menos você escreverá que não era um UL. Teremos os itens da lista. Então, aqui, dê a ele um nome de classe. O preenchimento da parte superior e inferior servirá para testar o ASM, o que implica no tamanho da fonte e nos destaques da altura da linha, precisamos duplicá-lo três vezes. Então, aqui eu vou fazer a cidade de Nova York. Eu vou fazer EUA, Índia. Por fim, temos o Canadá. Eu amo muito mais o Canadá, certo? E faz, aliás. Então, o que é, agora, vou destacar essa div. Em seguida, vamos duplicá-lo três vezes. 123. E esse é o verdadeiro d que criamos. Salve e vamos ver o que temos no navegador. Tudo parece bem, mas com certeza, esse não é o resultado esperado. Então, eu não gosto da forma como essas coisas estão espalhadas. Portanto, volte ao código VS, a menos que corrija isso rapidamente. Basicamente, é aqui que está o problema. Aqui, dissemos que, em dispositivos maiores, queremos que seja a coluna três da grade. Mas o problema é que tudo estava misturado. E eu acho que essa é uma das desvantagens do vento de cauda. Você tem que estar fazendo o traço três da coluna. Se você não usar esses dados aqui, eles não funcionarão para você. Então, quando você faz o Columbus dash three, ele o divide em três colunas. É quando tudo vai ficar bem. E você vai ter algo assim. Dê uma olhada. Você gosta disso? Tudo bem pessoal, esse é o fim da palestra e acredito que tudo está conforme o esperado. Você pode ver? 71. 69 clone de Netflix (criar aplicativo de reação): Bem-vindos de volta a todos. Nesta seção do curso, começaremos a construir a colônia Netflix. E, como sempre, vamos começar do zero para instalar um novo aplicativo React. Então, diretamente no desktop, vamos criar rapidamente um novo diretório chamado clone da Netflix. Não fiz isso. Arraste e solte a pasta, à direita, dentro do código VS. Só precisamos fechar a página de primeiros passos. Tudo bem, então eu vou dizer que sim. Em seguida, feche esta página maximize a tática de controle de pressão do VS Code para abrir o terminal integrado do VS Code. Ou você também pode encontrá-lo no menu superior, dominó no novo terminal. Deixe-me arrastá-lo ou construir, aí vai haver, então aqui eu vou fazer e ser x, create dash , react, dash n. Como normalmente fazemos, vamos instalá-lo em um diretório chamado cleanse. E, claro, você sabe que o React js é usado para criar um aplicativo de front-end. Essa é a razão pela qual sempre o instalamos em uma reclamação direta. Pressione a tecla Enter para fazê-lo disparar. E com certeza, a instalação definitivamente demoraria um pouco. Então, eu tenho que acelerar a palestra. O React foi instalado com sucesso. Aqui eu vou fazer npm. As startups estão certas, vou fazer o cliente de CD e depois o npm start. Tudo está funcionando conforme o esperado. Aqui está a página de amostra. Então, vamos limpar rapidamente o código de volta para o VS. O código foi recusado. Abra o SRC. Não precisamos do teste de configuração dot js. Selecione, pressione a tecla de comando no teclado e toque no trackpad para selecionar relatórios como vitaes, logotipo dot SVG up test.js e tudo isso que não precisamos. Tudo bem, então, depois de fazer isso, clique com o botão direito do mouse e mova-o para a lixeira. Abra o aplicativo Js, o logotipo desapareceu. Temos que limpá-lo. Além disso, não precisamos de nada aqui dentro do aplicativo js. Então, vou destacar tudo, desde a do cabeçalho de abertura até a tag de fechamento do cabeçalho . Limpe-o. Certifique-se de salvar. Vamos voltar ao index.js. E, com certeza, não precisamos do relatório de sinais vitais da web e de todas essas coisas aqui. Limpe-o. O que é de novo? Vamos salvar o aplicativo e está tudo bem. O navegador, esses são os resultados esperados. Tudo bem, então nesta palestra, começaremos a criar as páginas e os componentes. Te vejo então. 72. 70 Componentes e páginas: Nesta palestra, vamos começar a criar os componentes MPGs. Então, usando a receita do SRC, crie uma nova pasta chamada componentes. Outro, diretamente dentro do SRC. E vou chamar essas páginas de outra. E isso será chamado de seus T's. E por último, isso será chamado de barraca. Bom. Certo. Não seria no diretório de páginas que teríamos páginas como a página de login, filme Pitch, a inscrição e muito mais. Então, vamos fazer isso rapidamente. Faça login em peach.genome ways, você também pode fazer o GSS, se desejar. Mas eu sempre gosto de usar a extensão dot js. Novamente, diretamente nas páginas. Novo arquivo, peach.genes. Aqui está o jogador que nos convida. Então esse será o componente ou página do reprodutor de filmes. Veja aqui que teremos o programa de TV dot js. O filme ph dot g é. Então vamos ter netflix dot g is. Tudo bem, então, depois de criar as páginas, vamos criar rapidamente os componentes relacionados. Logo quando o pacote de componentes clicar com o botão direito do mouse e, em seguida, em um novo arquivo, teremos a imagem de fundo dot g está aqui. Novamente. Metade da receita tinha nossos pontos. Então, tudo bem, por enquanto, à medida que prosseguirmos com as palestras, criaríamos mais componentes. Tudo bem, então, depois de fazer isso, vamos gerar rapidamente os componentes funcionais, diretamente com ele. Então, eu só tenho que fechar todos eles a partir daqui, fechar os componentes. E então, na página de login, vou fazer nosso FCE. Boom, sem mais nem menos. Netflix ou um reprodutor FCE, uma inscrição no FCE ou um FCE. E isso deve ser aplicado a todas as páginas e componentes. É tão simples quanto isso. Ok, vamos trabalhar no componente. Tudo bem, agora terminamos de configurar as páginas e os componentes. Na próxima palestra, vamos configurar nossas rotas. Nos vemos na próxima palestra. Mantenha o cuidado focado e holístico. 73. 71 Configurando as rotas: Para começar com a rota, primeiro, temos que instalar o roteador React fazendo aqui, está aqui? Eu só tenho que copiar esse comando. E com certeza você pode acessar NPM js.com slash packages slash React router, fazer e depois copiar o comando de instalação aqui. Certo? Estamos no terminal. Vou fazer o Controle C para parar o servidor atualmente em execução e depois colar o comando npm, install, React, router, dash, não aperte a tecla Enter para ativá-lo. Instalado. Bem sucedido. Portanto, o próximo passo é implementar o comando de rotas P para abrir a caixa de pesquisa na parte superior. E agora, você deve saber como fazer isso. E então eu vou configurar o G está aqui. Vamos fechar o Explorer. Primeiro. Vamos importar rotas e rotas de roteadores de navegadores. Deixa eu te mostrar. Eu vou fazer em vasos, navegador fora, coma, rotas, rotas, assim. Todos esses pacotes viremos da rota do React dash. Eu simplesmente não gosto disso. Tudo bem, então, depois de fazer isso, vamos configurar rapidamente as rodadas. Então, aqui vou excluir tudo porque queremos agrupar todo o aplicativo diretamente no roteador do navegador. Então, eu vou fazer um roteador de navegador. E boom, eles servirão como nódulo principal por enquanto. Então, por dentro, teremos as rotas. Portanto, isso inclui todas as rotas às quais teremos direitos de acesso. Vamos especificar rotas individuais. Sim, então eu vou fazer rotas como essas. Então isso representa cada rota que vamos ter. E isso fechará todas as rotas que teremos no aplicativo NPR. E então, dentro das rotas, vamos resumir isso com o roteador do navegador , tão simples quanto isso. Então, ao inserir as rotas individuais, vou fazer exatamente. Então, vamos definir o caminho exato. O caminho será igual à barra, vamos supor que faça login, ok? Então, sempre que seguimos esse caminho, temos que abrir um elemento, neste caso, o componente de preocupação. Então eu vou fazer elementos. Então, os elementos que queremos abrir serão uma página de login de cartão competente. Certifique-se de fechá-lo. O que é a etiqueta de fechamento automático? Além disso, certifique-se de importar a página de login na parte superior. Então, o que vou fazer agora é fechar a rota com uma etiqueta de fechamento automático. Agora, vou destacar e duplicar seis vezes. Exatamente assim. Aqui temos um alvo, a inscrição. Quando seguirmos esse caminho, abriremos a página de inscrição. Certifique-se sempre de importá-los na parte superior. E essas são as páginas que criamos anteriormente nesta palestra. Então, nada é novo por aqui. Então, quando atingimos esse caminho, queremos nos abrir. Deixe-me mostrar também o pH de login quando entrarmos em contato. Ok, vamos abrir os objetos. De novo. Estou tentando, tanto quanto possível, garantir que todos entendam isso bem o suficiente. Quando atingirmos as rotas de inscrição, abriremos a página de inscrição e assim por diante. Aqui. Eu vou jogar. E também temos que abrir a página do jogador. Vamos fazer aqui, TV. E isso abrirá os programas de TV. Isso aqui abrirá a página inicial. E, nesse caso, a página inicial é a Netflix. Ok. Acho que com isso terminamos. Deixe-me verificar isso agora mesmo. A página de inscrição, a página do filme. Ok. Também temos que abrir a página do filme. Então eu vou fazer aqui v. Então temos que abrir a página do filme. O que significa se inscrever novamente? Acho que fizemos todas as paradas por aqui. Tudo bem, então vamos dar uma olhada. Quando você salva o aplicativo. Aqui, vou fazer npm start. Vamos dar uma olhada no navegador. E agora estamos na página inicial, que é a Netflix dot js. Então, eu vou fazer o login com barra. E agora estamos na página de login. Mais uma vez, tire a barra. Eu vou fazer Slash, inscrever-se. Agora. Deixe-me ampliar um pouco. Agora estamos na página de inscrição. Então é exatamente assim que vamos fazer isso. Para testar todas as rotas. Temos que testá-lo. Que bagunça de novo, vamos fazer TV. E isso nos levará ao componente ou página do programa de TV. Então, todos os seus artistas estão trabalhando perfeitamente bem. Você também pode testar seus fins. Isso é tudo por enquanto. Na próxima palestra, começaremos a criar a página de inscrição e login. Nos vemos na próxima palestra. 74. Componente de reutilização de imagem de fundo: Nesta palestra, vamos criar os componentes reutilizáveis da imagem de fundo. Então, abra rapidamente a imagem de fundo ponto g é, ei, não é? Portanto, antes de prosseguirmos, precisamos instalar componentes estilizados. Sim, vamos falar sobre as zombarias do MPM. Ei, é para instalar o componente estilizado? Você só precisa copiar o comando aqui. Ou você pode fazer componentes de painel no estilo npm install. Para npm install style dash components, precisamos parar o neurônio atual e pesquisar novamente pressionando Control C e depois colar o comando aqui, npm, que é instalado no estilo dash components. Portanto, o componente de estilo é o que usaremos para estilizar nossa obrigação. Basicamente, o componente inicial é uma solução de mosaico CSS e JS específica do React que cria uma plataforma para os desenvolvedores usarem seu código CSS real para estilizar seus componentes. Sim, então, na verdade, a forma como fazemos uso disso é especificando os literais temperados. Não se preocupe, você verá como funciona em um G V. Não instalei o componente de estilo aqui em segundo plano, nós também geramos o componente funcional. Então, primeiro, aqui, temos que importar Stout a partir de componentes robustos. E logo abaixo, vou fazer const background container equa, start dot div. Então, é assim que se usa os componentes robustos. E feito isso, todo o nosso CSS será escrito entre os litros temperados. Portanto, temos que especificar os literais do modelo. E, a propósito, isso é apenas o Ártico. E o Arctic está localizado no canto superior esquerdo, logo abaixo da tecla Escape do teclado. É aqui que Lee é onde vamos escrever o CSS. Então, agora, tendo feito isso, vou copiar essa aula assim. Aqui. Eu vou fazer assim. Sim. Agora temos que trabalhar na imagem de fundo. Vou fazer IMG, SRC, equa, voltar aos materiais da Netflix e depois abrir. Eles poderiam ajudar e copiar o link para a imagem de fundo do clone da Netflix. Aqui está o link, sim, então você só precisa copiar o link em segundo plano da Netflix. Ele está localizado diretamente nos materiais da Netflix. E então abra o auxiliar de código. Aqui. Vou apenas colar, fechá-la também com a tag de fechamento automático. Temos que especificar a alternativa. Eu vou fazer aqui. Igual, conexão com a Internet. Exatamente assim. Sim, quando você salva , tudo bem, agora temos que estilizar essa imagem. Então, volte para os componentes robustos à direita, entre os literais do modelo. Portanto, o estilo do aplicativo ocorreria aqui. É tão simples quanto isso. Então, vamos especificar a altura da imagem de fundo. A altura. Vamos fazer com que seja 100 alturas de visão. Tudo bem, então, antes de prosseguirmos, quero apresentar a você a inteligência de componentes de estilo que o ajudará a exibir as opções diretamente no IntelliSense. Então, por exemplo, se você digitar hedge, ele exibirá a opção de altura. Então abra as extensões. A extensão que vamos definir para a ferramenta de destaque de código VS para o componente padrão. Então, aqui eu vou fazer VS code dash stout, componente grande. Aqui está. Portanto, essa é uma ferramenta de destaque de sintaxe para instalação de componentes estilizados. Eu costumava tê-lo antes. Eu o excluí simplesmente porque quero instalá-lo do zero para um entendimento adequado. Agora terminei de instalar a ferramenta de realce de sintaxe, que precisa fechá-la. Com certeza, alguns de vocês estão me perguntando o tema que estou usando para meu código VS. Então, dentro do decodificador, novamente, você só precisa configurar sua miragem. Aqui está. Portanto, esse é o tema que estou usando para o meu VS Code. E no final, você verá o botão Instalar. Então, instale-o e você começará a usar exatamente a mesma coisa com seu instrutor. Ensinar bem. Linda. Feche isso. Sim, então eu vou salvar e depois vamos voltar para o Explorer. Feche aqui embaixo. Vamos especificar a largura. Agora, quando eu faço isso, você consegue ver os direitos dentro do IntelliSense? Mostra as opções. Eu adoro isso. Isso facilita as coisas. As empresas instaladas terão uma largura de visualização de 100. E, por favor, sempre termine com ponto e vírgula. Se você não terminar com ponto e vírgula, definitivamente teremos problemas. Feito isso, queremos estilizar a tag IMG logo abaixo. Vou abrir e fechar colchetes do IMG. Dê a ele uma altura de 100 de altura de visualização, uma largura de 100 de largura de visualização. Tudo bem, então terminamos com isso. Só teremos que salvar os incautos. Você definitivamente verá o que fez em um GP. Então, só precisamos iniciar o aplicativo npm start. Se você quiser ver o que fizemos até agora, tudo o que você precisa fazer, Comando P, abra o aplicativo js, ok, por enquanto, só preciso fazer um comentário sobre eles. Sim, e eu vou fazer uma imagem de fundo como esta. Quando você salva e finaliza a compra no navegador. Aqui está. Você pode ver que esses são os componentes reutilizáveis em segundo plano que acabamos de criar. Tudo bem. Você pode ver? Está bem. Perfeito. Eu adoro isso. Eu só tenho que limpá-lo e depois remover o comentário aqui. Salvar. Volte ao normal. Vamos voltar para a página inicial. Remova a barra de TV. E ele tem pelo menos a página inicial, Netflix. Tudo bem. Deixe-me formatar o código com prettier. Tudo bem, então isso é horrível agora para os componentes reutilizáveis em segundo plano. E na próxima aula, também criaremos o componente reutilizável do cabeçalho . Te vejo então. 75. 73 Componente reutilizável de encabeçamento: Na palestra anterior, criamos os componentes reutilizáveis da imagem de fundo. Então, nesta palestra, criaremos o também criaremos o componente reutilizável do cabeçalho. Então, Command P e, em seguida, configure para head ArcGIS. E, claro, também criamos todos esses componentes na palestra anterior. Bom. Então, estamos neste componente primeiro, temos que importar o componente padrão, importar estilos de componentes robustos. E aqui, eu só tenho que limpar isso. Agora vou fazer aqui o contêiner de cabeçalho. Portanto, temos que criar isso rapidamente. Estou aqui e vou fazer o header container equa stout dot d. Então, é assim que se cria seu componente inicial. Feito isso, precisamos especificar o buck tq que não possamos escrever nossos estilos intermediários. Aqui é pelo menos onde vamos estilizar essas coisas. Deixe-me ampliar um pouco. Você pode ver o consecutivo aqui e o fechamento consecutivo aqui. Eu acho que é muito assim. Você tem que diminuir o zoom. Ótimo. Vamos prosseguir. Aqui. Vamos ter um div, dê a ele um nome de classe ou logotipo. Logo na definição, teremos uma tag IMG, SRC equa, copie e cole o link do logotipo da Netflix diretamente do código help out. Eu já copiei o link. Então, volte para o Catawba, desfaça isso mais de perto com a etiqueta de fechamento automático. E então temos que especificar a alternativa que vou fazer aqui. E eu vou fazer uma conexão com a internet. Dê uma olhada na internet aqui. Tudo bem? Feito isso, criaremos os painéis do lado fora do div com o nome da classe Logo. Vamos fazer um passeio de barco com o clique deste botão. Vamos navegar até a página de login ou a página de inscrição, dependendo da página em que você está atualmente. Sim. Então, se você estiver disposto a se inscrever na página, a parte inferior mostrará o login. Então, se você estiver disposto a fazer login na página, a parte inferior mostrará a inscrição. Então, vamos fazer essa limpeza rápida primeiro. Bem no topo. Vamos importar. Use navegações a partir de adivinhe onde reator, depois de fazer isso, eu vou fazer navegações. Vamos ter uma variável chamada navigates. Adquira, use navegadores. Tudo bem, então aqui, ao clicar neste botão, navegaremos até Ada, a página de login ou de inscrição, dependendo da página em que você está atualmente. Então, agora, como fazemos isso? Vou fazer aqui, configurá-lo para nossa função e depois navegar até, vou fazer adereços, pontos. E, claro, essa função também precisa levar adereços para ele. Então, vamos usar adereços para alterar a funcionalidade do barco e também o teste. Então, eu vou fazer se o login de pontos de props for igual a verdadeiro, vamos navegar até o login de barra. Portanto, em todo esse aplicativo, sempre que você seguir esse caminho, você sempre navegará até a página de login para exibição. Fizemos isso na palestra anterior. Aqui, não é? Sim, então, sempre que você seguir essa rota, você sempre navegará até a página de login e o resto da rota, bem como para o componente correspondente, como páginas. Então visite outra pessoa aqui. Vamos navegar até a página de inscrição, fechar o botão inferior direito, o botão. Também precisamos mudar o teste. Deixe-me te mostrar. Eu vou fazer aqui props dot login. Então, se o prompts dot login for igual a verdadeiro, o que faremos é mastigar o teste de login dessa forma. login. Sim. Caso contrário, vamos transformar o teste e o barco em sinal. Não há nada complicado por aqui. Sim, vamos começar a estilizar esse componente muito rapidamente. Mas aqui entre o Ártico, teremos uma tela flexível. Justifique o conteúdo. Espaço entre os itens alinhados ao centro. O acolchoamento será a mira distante de Sarah. Feito isso, temos que estilizar o logotipo. O logotipo, temos que estilizar o IMG, que é a tag IMG que exibe o logotipo. Aqui eu vou fazer IMG, dê uma altura de três rem. O mais grosso é o ponteiro. Agora vamos estilizar rapidamente o tabuleiro. Saia da cinta, aqui mesmo. Vamos fazer as duas coisas neste botão aqui. Dê um acolchoamento, 0,5 rem. E um aro. A cor de fundo, vamos torná-la vermelha. A fronteira será conhecida como o ponteiro do caso. As fontes dentro do barco serão brancas, que é esse cara aqui, o login ou login, raio de fronteira. Vamos fazer com que seja 0,2. Gente, essa é exatamente minha especificação. Portanto, você pode decidir alterar o estilo na última extremidade de acordo com sua própria especificação ou opinião. O peso da fonte será, vamos torná-la mais ousada. E por último, o tamanho da firma, 1,05, rem, lindo. Salvar. Vamos verificar rapidamente o que fizemos até agora. Abra o aplicativo js. Do lado de fora da rota. Vamos renderizar o cabeçalho na parte superior. Isso é apenas, por exemplo, saquê. Salvar diz que os adereços não estão definidos. O que temos que fazer agora é voltar ao cabeçalho. Você pode ver que isso deveria ser um aviso, ok, Salvar. Aqui temos o logotipo e aqui temos o login. Então, ao clicar nesta assinatura aqui, você será redirecionado para a página de login. Dê uma olhada de perto. Estamos exatamente onde está a página inicial, que é a página da Netflix. Agora, quando eu clico no login, dê uma olhada. Agora fomos redirecionados para a página de inscrição. Então, a ideia é simples. Se estivermos na página de inscrição, esse teste aqui será alterado para fazer login. Portanto, se estivermos na página de login, o teste dentro do botão será alterado para fazer login. No momento, talvez você não tenha essa funcionalidade simplesmente porque não implementamos a página de inscrição e a página de login. Vamos fazer isso na próxima aula para que possamos ter uma página de login e inscrição totalmente funcional. Nos vemos na próxima palestra. 76. 74 página de inscrição: Bem-vindos de volta a todos. Nesta palestra, vamos criar a página de inscrição. Então, diretamente no VS Code, vamos abrir rapidamente o Explorer e seguida, abrir o componente da página de inscrição da página. aqui, vamos importar os arquivos necessários. Primeiro, temos que importar a empresa de stout em Pottstown a partir de componentes robustos. E aqui vamos importar o componente de cabeçalho reutilizável, importar o cabeçalho de, Opa, temos que direcionar a barra do componente e, em seguida, o cabeçalho IgA é tão simples quanto isso. E, novamente, também precisamos importar a fundo do componente de aterramento do saco reutilizável da imagem de fundo da barra dos componentes. Ok, mais uma coisa. Também temos que importar o gancho feito nos EUA porque vamos fazer uso dele. Are, agora estamos prontos para ir. Então, aqui, eu vou limpar isso. Em seguida, vou renderizar a classe container. Agora temos que fazer const container equa stout dot d e, em seguida, especificar o verso. Então, vamos abordar o CSS aqui. Amigos. Eu quero que você tome nota de algo aqui. Você vê esse cara aqui. Eles devem estar na convenção de nomenclatura pascal. Portanto, isso implica que você coloca em maiúscula a primeira letra de cada palavra. Aqui está a letra maiúscula C. Bom, certo? Dentro do contêiner, vamos alugar a classe de imagem de fundo reutilizável mais próxima da etiqueta de fechamento automático. Então, aqui vamos ter um div. Vamos dar a ele um nome de classe de conteúdo, certo? Estamos no conteúdo, teremos o cabeçalho reutilizável. E o que vou fazer agora é especificar a sonda de login aqui. Deixa eu te mostrar, abra o cabeçalho. Você pode ver aqui que estamos pegando adereços, então estamos passando o login para esses componentes. Então, se o login do props dot for verdadeiro, abriremos a página de login. E outra. abriremos a página de inscrição tão simples quanto essa aqui Se o login do ponto de props for verdadeiro na votação, mostraremos o login. Agora, também dentro do barco, vamos mostrar o sinal. O objetivo é tão simples quanto isso. Agora, passamos essas sondas de login diretamente para o componente de cabeçalho. Ensino, bom, lindo. Tudo bem, aqui vamos ter um div com o nome da classe body. E exatamente onde no corpo vamos ter outra div, dê a ela um nome de classe de testes. Então vamos ter uma etiqueta de Adriano. E vou fazer filmes, programas de TV ilimitados e muito mais. Novamente, aqui vamos ter um hit por tag. E eu vou fazer o quê? Em qualquer lugar, cancele por vírgula a qualquer momento. Novamente, aqui teremos um hit six tag. Então, esses são os artigos que você pode ver na página de aprovação da Netflix. Sim. Então, na verdade, estamos copiando a partir daí. Então eu vou me preparar para assistir. Digite seu e-mail para criar. Reinicie os direitos de associação, a div de encerramento com o teste do nome da classe. Vamos ter outro div, dê a ele um nome de classe de espuma. E, a partir da espuma, teremos o campo de entrada, o tipo, a senha e o espaço reservado iguais. O que vou fazer agora é senha e o nome igual, senha, simples assim. E, hum, outro, um campo de entrada. O tipo aqui é igual a e-mail, o espaço reservado é igual a e-mail. Ou você pode dizer digite o endereço de e-mail ou algo parecido. Então deixe-me fazer o endereço de e-mail, pessoal de operações. Bom. No nome, e-mail igual. Também feche-o com a etiqueta de fechamento automático. Que mol. Agora, vamos ter dois botões. Aqui. Nós vamos tê-lo comprado. Esta será a votação do Get Started. Destaque e duplique. Esse será o botão de inscrição. Tão simples quanto isso. Tudo bem, então vamos dar uma olhada no navegador para ver o que fizemos até agora. Venha aqui e eu vou especificar o caminho para fazer a inscrição, barra da página de inscrição está correta. Aqui está o componente de fundo da imagem que renderizamos. Aqui está o cabeçalho em que também publicamos. E abaixo, aqui eles escrevem sobre os campos de entrada. Aqui está o botão Começar, a inscrição, o e-mail e o campo de senha, tudo legal. Tudo bem. Parece que não está bem alinhado. Sim, é simplesmente porque não o estilizamos. Então, vamos estilizar rapidamente esse componente para que fique bonito. Volte. A ideia aqui é colocar todos esses bastões em cima da imagem de fundo. Como você pode ver no cabeçalho, está logo abaixo da imagem de fundo. Então, para fazer isso, temos que especificar a posição como relativa, e então a posição desses caras será absoluta. Então venha aqui e eu vou fazer a posição relativa. Feito isso, o conteúdo, que é esse cara aqui, você pode ver tudo por dentro ? Vamos torná-lo absoluto para que ele possa ir direto para cima do componente da imagem de fundo. Eu sei que você entende do que estou falando. E, de fato, um cara esperto. Tudo bem, então eu vou fazer conteúdo de pontos. Então, vamos fazer com que ela posicione os absolutos. Feito isso, o que faremos a seguir é posicioná-lo do zero superior e do zero esquerdo. Então, quando eu fizer isso aqui, também, vamos zerar quando você salva a compra no navegador. Agora temos todos esses termos aqui, assim . Você pode ver? Vou fazer da esquerda, vamos fazer com que seja zero. Então, ao observar a tela, você perceberá que o brilho do fundo é bastante alto. Sim, então vamos fazer com que seja um pouco considerado. Então, isso é o que aparece na parte superior, pode ser mais visível, como esse topo aqui. Então, o que eu vou fazer isso é especificar a cor de fundo. E eu vou fazer RGBA. Zero vírgula zero vírgula zero vírgula zero pontos 79. Essa é minha especificação, certo? Assim, você pode fazer outra coisa do seu lado. Quando você salva e verifica o navegador. Você pode ver agora que temos um histórico considerado. Deixa eu te mostrar. Vamos tirar isso de novo. Salvar. Ao recarregar, você perceberá que o fundo fica muito claro. Então, quando você libera esse cara, Save, agora, isso é considerado um pouco, mas aparece no topo por enquanto. Você pode ver? Eu não sei se você pode ver esses. Ok. Vamos estilizá-lo para caber na tela. Vamos dar uma altura. 100 vh, a largura 100 vh. E você pode lembrar que essa é a dimensão real da imagem de fundo reutilizável. Então, estamos apenas chamando isso aqui para caber na tela da imagem de fundo quando você salva no navegador. Ainda temos algo assim. E eu não sei por quê. Opa, isso deveria ter uma largura de visualização de 100, assim. E você pode lembrar que essa é a dimensão real do componente reutilizável da imagem de fundo. Sim, então estamos trazendo isso aqui para caber na tela, salve, confira o navegador aqui. É mais uma vez? Deixe-me mostrar o que esse cara faz quando comenta Salvar. Agora você pode perceber que o fundo se torna realmente brilhante. Quando você economiza. Parece uma parte do nosso construtor. E é exatamente isso que estamos procurando. Então, aqui eu vou fazer colunas de modelo de grade, engate de 15 V e 85 v h. Agora vamos dialisar o corpo. O corpo. Deixe-me mostrar aqui, está dentro do corpo? Vamos ter uma tela flexível. E a direção da flexão é cólon. Justifique o conteúdo no centro, alinhe os itens ao centro. Quando você salvar, tudo ficará alinhado ao centro. Você pode ver agora o logotipo foi alinhado no canto superior esquerdo da tela. Aqui, o botão de login foi alinhado ao canto superior direito da tela. E na palestra anterior, eu disse que quando você estiver na página de inscrição, isso mostrará o botão de login. Quando você estiver na página de login, essa parte inferior será alterada para se inscrever. Acho que fizemos isso na palestra anterior diretamente no componente de cabeçalho aqui. Então, quando você coloca esses adereços aqui, tudo funciona melhor. Esse cara aqui. Então, isso significa que passamos as sondas de login para o cabeçalho. Então, aqui mostra que os prompts dot login são iguais a true. Então, esse botão no topo da votação aqui será alterado para fazer login, caso contrário, mudará para se inscrever. Mas deixe-me te mostrar rapidamente. Venha aqui. Vamos nos inscrever. Então, quando você salva o aplicativo, o checkout, o navegador, você pode ver agora que projetamos a votação. É tão simples quanto isso. Então, vamos deixar isso como login por enquanto. Vamos continuar com o estilo. Para o teste. Vamos ter uma tela flexível. A direção flexível é coluna. Então, vou copiar daqui desse jeito e depois colar aqui. O tamanho da fonte. Vamos passar pela borda. A cor dos telefones será branca. Vamos tirá-lo no navegador. Você vê tudo bem alinhado, no centro. Ok, vamos fazer algo aqui. Temos que remover o conteúdo justificado para centralizar. Então eu vou fazer o alinhamento do texto. O centro formata o código, salve o aplicativo. E agora eles estão bem no centro. Está tudo bem. Ok. O ninho é a etiqueta principal. Então, se eu acertar uma etiqueta, o preenchimento será 0,25 espaço para o engate para a etiqueta. Para. Então, vamos especificar a margem superior. E eu vou fazer com que seja -1,5 rem. Vamos tirá-lo para que você possa vê-lo claramente. Pressione um comentário sobre o seguro. Você pode ver que eu não gosto dos espaços entre o teste. Você vê que não parecem linhas. Então, como resolver isso é aplicar a margem superior. E também quero que o programa de TV acabe. Então, para o preenchimento, vou tirar o 0,25 rem. Então, eu vou dar 0,25 rem. Bom. H6. O hit F6 tem exatamente o mesmo limite de margem de dividendos , então pode se aproximar. Tudo bom. Tudo bem, então vamos começar a estilizar o campo de entrada, incluindo a parte inferior. Então, aqui, eu vou fazer o formulário de Dodds. Vamos ter uma grade de exibição. Vamos especificar que a largura seja de 60%. Ok? Também precisamos especificar as colunas do modelo de grade. Mas vamos deixar isso por enquanto. Então, aqui vamos estilizar a entrada visualizada, a cor. Vamos torná-lo preto. Perdão? 1,5 rem. O tamanho da fonte, 1,2 rem. E a largura desse campo de entrada será de 45 rem. Vamos dar uma olhada no navegador. Salvar. Eu adoro isso. Então, aqui estão os dois campos de entrada. Não se preocupe com o botão. Na verdade, não chegamos a isso por enquanto. Algo importante que também precisamos fazer é, deixe-me mostrar um olho focado no campo de entrada. Você verá o esboço. Você vê o contorno azul. Eu não quero isso. Então, o que vou fazer agora é fazer previsões. Vamos remover o contorno apenas para que não seja tão simples assim. Então eu não fiz isso. Vamos estilizar rapidamente o corpo. Dê um preenchimento de 0,5 rem, uma aula de borda para finalizá-la com ponto e vírgula e depois com a cor de fundo. Vamos torná-lo vermelho. A fronteira vai ficar entorpecida, mais grossa. Vamos fazer questão de salvar e ver o que temos. Ok, vamos encerrar isso agora. A cor, deixe-me mostrar a cor dos direitos da fonte. Mas na navegação, por exemplo, eles começam na inscrição. Vamos torná-lo branco. O tamanho da fonte. Vamos aumentá-lo um pouco. 1,05 rem. E a largura dessa borda oriental flutuante. Salvar. Confira. Certo. Mas esses não são os resultados esperados. Então, agora temos que obter o resultado esperado. O que vamos fazer é destacar o campo de senha e mostrar o e-mail quando o usuário digita o e-mail e pressionar o botão Começar a abortar. O campo de senha aparecerá e também o botão de inscrição. Deixe-me reiterar. A intenção é ocultar o campo de senha e o botão de inscrição. Então, a princípio, o que você verá é o campo de e-mail n, o botão Começar. Então, quando você digita seu e-mail e aquece o botão Começar, o e-mail e o botão Começar desaparecerão. Em seguida, o campo de inscrição e senha será exibido. Deixe-me mostrar o que quero dizer com isso. Então, role para cima. Agora temos que implementá-lo. O que os americanos, lembre-se que importamos os EUA, fizemos anteriormente. Temos que declarar as variáveis de estado necessárias a serem usadas. Vamos chamá-lo de Mostrar senha. Karma define a senha show para usar o stage. Então, o estado inicial será falso, assim. Agora, vamos condicionar o campo de entrada. Abra os colchetes. Então, se sua senha for igual a, mostraremos o campo de senha. Então, o que vou fazer é copiar o campo de senha como esses destaques capturados e depois colá-lo no meio. Senão. Vamos mostrar o campo do e-mail, recortá-lo e colá-lo aqui. É tão simples quanto isso. Ao salvar o checkout no navegador, agora você não vê mais o campo de senha. Sim, então você precisa digitar algo, certo, para colocar no campo de e-mail e clicar no botão Começar para que o campo de senha apareça. simples quanto isso. Então, agora vamos pressionar uma condição nos botões para que tudo comece a funcionar perfeitamente, conforme o esperado. Rapidamente, vamos formatar o código. Aqui. Vamos ter outro colchete encaracolado. Eu vou fazer. Se a opção mostrar senha não existir. Vamos mostrar como começar a votar a favor e colar aqui. Agora. Vamos mostrar o botão de inscrição. Quando você salva no navegador. Agora, tudo aparece assim, mas também queremos que apareça no canto superior direito do campo de entrada. Agora, venha aqui. Deixe-me mostrar o que nos resta, à direita, dentro da espuma. Temos que especificar as colunas do modelo de grade, um colchete de coluna, um parêntese e um colchete no meio. Então, vou mostrar a senha. Se a opção Mostrar senha for verdadeira. Aqui teremos uma seta F, e aqui teremos uma FOR, estamos tentando particionar as colunas e os erros. Não precisamos COMPRAR UM FOR quando você salva e finaliza a compra no navegador. E são esses, dá para ver que tudo parece como esperado, perfeitamente em bom estado. Então, deixe-me tentar digitar meu e-mail. Digito meu e-mail e depois clico no botão Começar. Por enquanto, nada acontece. Ok, então vamos voltar e implementar o OnClick para começar a votar. Estrague tudo, até onde temos o botão Começar. Então, vou clicar no botão Começar. Vamos mudar o estado inicial para verdadeiro, certo? Então, é mais como um tipo de vibração verdadeira ou falsa agora. Então, agora vou implementar o onclick no botão Começar. Ao clicar neste quadro em. Vamos chamar a função de configuração para atualizar o conjunto de estados iniciais. Mostrar senha. Vamos definir o estado inicial, o verdadeiro. Então, vamos atualizar os estados iniciais para verdadeiros. Nesse caso, esse cara aqui. Então, vou clicar aqui, Comece a votar. Alteramos o estado para verdadeiro e, em seguida, o botão de inscrição aparecerá. É tão simples quanto isso. Então, agora temos que atualizar. Deixe-me limpar meu e-mail e depois começar. Você vê que, ao clicar no botão Começar, o campo de senha que aparece no botão de inscrição também aparece. Aqui você pode digitar sua senha. Então, amigos, é isso que estamos esperando nesta palestra. Além disso, quero mostrar algo que fiz nos bastidores e que você não conhece. Quando você observa esta página? Você pode ver onde meu logotipo da Netflix está começando aqui? Eu também tenho um pouco de espaço aqui. Eu tenho algum espaço aqui no meio. É simplesmente porque, certo, para colocar o cabeçalho, especifiquei um preenchimento de um rem. Então, quando você tirar essa parte aqui e salvar o projeto, volte. Agora, você não tem espaço entre o logotipo da Netflix e a parte inferior. Então, essas linhas não parecem assim. E essa foi a razão pela qual coloquei um padrão aqui para ser wireframe. Agora você pode ver, está linda, tudo legal. Eu adoro isso. Então, França. Na próxima palestra, começaremos a criar a página de login. Isso é tudo por enquanto. Nos vemos na próxima palestra. Mantenha o foco no cuidado holístico. 77. 75 Login: Bem-vindos de volta a todos. Na palestra anterior, implementamos a página de inscrição. E, para mostrar, isso está extremamente bonito e eu gosto. Então, nesta palestra, continuaremos criando a página de login. Vamos começar rapidamente. Não precisei usar o código VS. Vou configurar o login peach.genome years e depois abrir a página de inscrição. Temos que copiar quase tudo daqui, assim, que é o impulso de copiar e colar. Sim. Então, o que acontece de novo, agora vamos ter uma embalagem aqui. E eu vou fazer isso deve começar daqui. Para facilitar a leitura. Embalagem igual a ponto robusto dV. Em seguida, especifique a marca inversa. Ele tem, pelo menos, um estilo CSS que acontecerá. Feito isso, vou limpar isso e então teremos um nodo pai chamado wrapper, que é esse cara aqui. A linha Nesta é para renderizar os componentes reutilizáveis da imagem de fundo. Então, agora você vê como um componente reutilizável pode ser útil? Vamos renderizá-lo aqui também. Vamos renderizar o componente reutilizável do cabeçalho. Mas antes de prosseguirmos, teremos um div aqui. Dê a ele um nome de classe do conteúdo de login, como este. Direto para dv. Vamos renderizar o componente do cabeçalho. E todas essas dificuldades. Nós os importamos anteriormente. Nós apenas copiamos a entrada da página de inscrição quando você salva. Ok, vamos dar uma olhada no navegador. Venha aqui. Então, quando você clica nesse login, no canto inferior direito, estamos na página de inscrição. Ele o redirecionará para a página de login. E deixe-me mostrar onde implementamos isso. Venha aqui, fiz um componente rolar até a parte superior e inferior. Então, aqui especificamos o OnClick. Se o login do prop dot for verdadeiro, você será direcionado para a página de login. E ao observar a página de inscrição, você perceberá que os adereços aqui estão logados. É tão simples quanto isso. Agora, quando clicarmos nesse botão, ele nos levará à página de login e à página de inscrição, e à página de inscrição, faça login. E aqui renderizamos o componente reutilizável em segundo plano. E abaixo está o componente do cabeçalho. Não se preocupe, quando começarmos a estilizar a obrigação, tudo aqui dentro do conteúdo será colocado na parte superior do componente reutilizável da imagem de fundo. Vamos continuar rapidamente. Desculpe, certo, depois do cabeçalho. Vamos ter um div com o nome da classe da empresa. A empresa, teremos outro div com o nome da classe da ferramenta e a palavra certa no título. Você vai ter uma etiqueta enorme aqui. E eu vou fazer o registro da forma mais simples possível. Tudo bem, então logo após a div de encerramento do título do nome da classe, teremos outra div. Dê a ele um nome de classe de contêiner, certo? Para aproximar o contêiner div, teremos os campos de entrada, o tipo de entrada, os obrigatórios os textos mais próximos da tag de fechamento automático. Aqui eu vou fazer uma equação de espaço reservado, e-mail. Então você perceberá que eu tenho usado aspas duplas e aspas simples. Isso não importa necessariamente. Sim, então vamos continuar rapidamente. Mas o que vou fazer agora é duplicar esse campo de entrada, destacá-lo e duplicá-lo. Então eu vou mudar essa aqui para senha, porque ela será usada para o campo de senha. Aqui, vou criar a senha logo após o campo de entrada, vamos fazer logo após o campo de entrada, com que um barco seja o próprio botão de login. Tudo bem. Quando você salva no navegador, aqui, não é? Então, agora temos que estilizar os componentes para que tenham uma boa aparência. Aqui, a posição do invólucro será relativa para que possamos realmente colocar esse conteúdo de login diretamente no topo da classe de imagem de fundo para que todo esse conteúdo aqui apareça bem em cima da imagem de fundo. Então, continuo explicando essas coisas repetidamente , simplesmente porque quero que elas fiquem na sua memória. Então, aqui vamos estilizar o login contido. Basta copiar o conteúdo de login de pontos , abrir e fechar o colchete. Agora a posição vai ser, adivinha? Absolutos. Então, de cima para baixo, vamos fazer com que seja zero. Da esquerda. Vamos fazer com que seja zero. Então, com simplicidade, manteremos tudo dentro do conteúdo diretamente sobre o componente da imagem de fundo. E aqui está. Você pode ver agora que tudo está bem em cima do componente da imagem de fundo. Tudo bem, então vamos dar a ele uma altura de 100 pontos de vista. E, uh, também temos 100% de largura de visualização. E com certeza o plano de fundo será o mesmo. Então, eu só preciso ir até a página de inscrição e depois rolar até o final. Vou copiar tudo aqui. Não precisamos perder tempo fazendo essas lonas repetidamente. Desculpe por isso. Eu só tenho que fazer isso no começo, mas não me veio à mente. Salve no navegador. Bom. Tudo bem, depois de fazer isso, temos que estilizar o recipiente firme. Então, o que vou fazer agora é logo após o componente de cabeçalho, criar outro div, dar a ele um nome de classe no formato Dodge wrapper. Então, tudo aqui, copie das faixas 152, linhas 20. Mantenha pressionada a tecla Opção no Mac e pressione a tecla de seta para cima para movê-la para dentro. Se não funcionar para você, você também pode. Destaques e depois Controle X para recortar, cole-o dentro do div com o nome da classe de Form Wrapper. Quando você salva, agora temos que estilizar o Form Wrapper. Dodds, eu, te mostro esse cara. Cópia mais suave. Vamos ter uma tela flexível. A direção flexível é coluna. Alinhe os itens ao centro, justifique o conteúdo para centralizar a lacuna. Será para escalar as alturas. Vamos fazer com que seja 85, 85 v h. Ok, vamos tirá-lo no navegador. Você pode não ver isso claramente, mas agora, esse top está gradualmente tomando forma. Tudo bem, então vamos dialisar o ponto firme. Deixe-me mostrar o formulário. Esse cara aqui. Acabei de copiar e colar. Ok, vamos ter uma tela flexível, flexionar a direção, a coluna, o centro de itens de alinhamento e o centro de conteúdo justificado. Então, o que vou fazer agora é copiar tudo daqui. Vou copiar das linhas 44 a 48. Copie e cole aqui. Salvar. Vamos conferir o formulário. Tudo parece a mesma preocupação. Nós vamos melhorá-lo. Então, a cor de fundo do formulário. Agora vou fazer isso em seis. Seja zero. Vamos contar que 123456 são. Então, deixe-me salvar e dar uma olhada no navegador. Você pode ver que aqui está o que acabamos de fazer agora. Esse cara aqui, eu não sei se você pode ver isso claramente. Vamos voltar. Ok. Vou fazer algo para que apareça claramente aqui. Eu só vou fazer 0.1. Ok? Veja, é exatamente disso que estamos falando. Coloque-o de volta no palco real. Vamos liberar o formaldeído de 70 v h. Agora, ele vai aparecer claramente. O estofamento é para correr. A cor será branca para que o teste dentro da empresa pareça branco. E, hum, o que acontece de novo, vamos dar a ela um raio de fronteira. Queremos que a borda seja um pouco curvilínea. Então, vou usar o ponto zero para chuvas. Dê uma olhada ao salvar no navegador. E aqui está. Você pode ver agora que temos a empresa pronta. A próxima linha do termo é estilizar o campo de entrada e a navegação. E espero que você possa ver isso claramente agora. O melhor é estilizar esse contêiner. Então, podemos empacotar o contêiner de pontos do campo de entrada. E sempre verifique se a grafia do nome do seu cluster está correta. Ok. Flexão da tela. Direção flexível, coluna, uma lacuna. Vamos chegar até eles. Acho que isso é tudo para o contêiner. Então, vamos direcionar o campo de entrada. Aqui temos os imputos. Eu vou te mostrar em um GP, vá até o topo. Aqui está o div com o nome da classe do contêiner. E logo dentro do contêiner, temos os campos de entrada. Então, vamos direcionar os campos de entrada agora e depois estilizá-los. Forneça o raio da borda de ponto zero para o preenchimento em 0,5 rem. Aqui vamos ter um quarto. A largura é de 25 quartos. A altura será de 3,4. Então, vamos salvar e levar para o navegador. A ideia é, você pode ver, parece absolutamente bom. Eu adoro esses. Absolutamente. Isso parece bom. Ok. Então, novamente, temos que sair do modo offline. Você pode ver que quando eu coloco minhas necessidades de console, você verá esse contorno azul. Portanto, é muito fácil fazer isso. Vou fazer um esboço. Vamos fazer com que seja nove. Seguro. Aqui no navegador. Quando você coloca o mouse novamente sobre ele, ele aparece bem. Então, vamos dialisar o parafuso e a votação por login. Para o botão. A separação será de 0,5. Rem. Opa, eu continuo fazendo isso. Eu não entendo. Saia daqui. A cor do plano de fundo. Pode fazer com que pareça simples assim. Fronteira. Nenhum. O mais grosso é o ponteiro, o raio da borda é o ponto zero. Temos que dar a ele um raio de borda igual ao campo de entrada. Então, eu vou copiar esse cara a 0,4 m. Ok, vamos ver. Bom. Agora vamos dar a ele uma altura e um ponto de largura. Para ele. A cor será branca, que é a fonte, o teste escrito dentro do corpo. Deixa eu te mostrar esse cara aqui. E o que vamos fazer. Tweet divertido. Vou fazer com que seja um tamanho de fonte mais ousado. Para fazer com que seja 1,05 rem. Acho que isso é tudo por enquanto. Vamos salvar e levar para o navegador. Tudo parece como esperado, e eu adoro isso. Agora, ao observar o canto superior direito da tela, você perceberá que a parte inferior está mostrando login. Então, quando você clica nesse cara aqui, ele o redirecionará para a página de inscrição. Ei, é que você pode ver? E aqui agora vamos ver o login. Quando você clica no Login, ele o redireciona para a página de login. E, claro, foi aqui que o implementamos. Assim, você pode ler as palestras para entendê-las bem o suficiente e colocá-las em sua memória. Então, vamos ver se há algo a fazer aqui nos componentes de login ou na página de login. Então, eu acho que está tudo bem, certo? Então, isso é tudo por enquanto. E na próxima palestra, começaremos a implementar a autenticação usando as abelhas de fogo. E posso garantir que será bom ver você na próxima palestra. 78. 76 Correção de login: Tudo bem, então, antes de prosseguirmos com a autenticação de inscrição e login, há algo que eu gostaria de informar. Se você observar a tela, perceberá que o formulário não está visível. Não é muito visível como esperado. Você pode ver? Vai ser muito difícil perceber que há algo aqui. Então, vamos fixar essa energia v. Outra observação importante que quero chamar sua atenção é a entrada vista, a altura é muito alta. Sim. Portanto, temos que encontrar uma maneira de reduzir a altura e também fazer com que a empresa fique um pouco mais incapacitada do que antes. Volte para o código VS, role para baixo. Portanto, para o campo de entrada, é extremamente fácil fazer isso. Só precisamos reduzir a altura para 2,4 ram. Você pode ver agora que parece Beta. Então, vamos trabalhar no plano de fundo e na empresa. O que vou fazer, vou destacar isso. Deixe-me mostrar o conteúdo do login. Vou destacar. Então, antes de continuar, quero alterá-los para 0,4. Role para baixo dentro do formulário. Eu só tenho que limpar esse cara e depois colar. Então, vou mudar isso para três quando você salvar e conferir o navegador. E aqui está. Você pode ver, agora parece um pouco mais visível do que antes. Mas outro problema aqui é que o fundo está ficando muito claro e não, não queremos que seja assim. Então, vamos tratar o plano de fundo aqui. Vamos fazer 0,6 e ver qual é o resultado. Bom. Vamos prosseguir para a próxima aula, na qual começaremos a implementar a autenticação de login. Te vejo então. 79. 77 Configurando a base de fogo: Bem-vindos de volta a todos. Tudo bem, então nesta palestra, vamos vincular nosso projeto ao Firebase. Então, para continuar, primeiro, precisamos instalar o Firebase diretamente em nosso projeto. Então, navegue até o VS Code, à direita, usando o terminal. Certifique-se de atender aos clientes C, D. E então o NPM instala o Firebase. Pressione a tecla Enter para ativá-lo. Instalado. Bem sucedido. Então, vamos abrir o arquivo package.json. E aqui está. Aqui. Agora, instalamos o Firebase com sucesso. Então, vá rapidamente para o console do Firebase e vamos criar um novo aplicativo. Firebase. Assim, você pode acessar firebase.google.com e clicar no botão Começar. Vamos adicionar um novo projeto. Então, vou chamá-los projetos da Netflix e depois continuar. Novamente. Continuando. Aqui, vamos deixá-la como conta padrão do Firebase. Deixe-me mostrar que clique aqui, você verá criar uma nova conta e selecionar a conta padrão para o Firebase. Em seguida, crie um novo projeto concluído. E agora criamos um novo projeto. Temos que continuar. E aqui, vamos selecionar o componente baseado na web. Sim, então vamos selecionar esse cara aqui. Vamos criar um componente baseado na web. E agora, aqui vamos dar um nome ao aplicativo. Aplicativo Netflix. Você pode decidir configurar o Firebase Hosting para esse projeto. Mas não se preocupe, talvez façamos isso mais tarde. Agora, clique em Registrar. Feito isso, esse código aqui será gerado. Agora, volte ao código VS, certo, para trazer o SRC, basta abri-lo. E então você clica, clique com o botão direito do mouse em utilitários e cria um novo arquivo. E eu vou chamá-lo de Firebase dash. Config dot g está aqui. Só precisamos selecionar assim. Por favor. Você pode ver o que eu selecionei aqui. Então. Clique com o botão direito Copiar. Cole aqui assim. Sim, então, tendo feito isso, vamos limpar o código. Selecione entre as linhas para duas linhas para limpá-la. Além disso, não precisamos do Firebase Analytics por enquanto. Só temos que limpá-lo. Limpe isso também, limpe isso. Feito isso, o próximo na fila é importar amostras de esferas de fogo. Então vá até o topo. E eu vou fazer importações. Saia da barra de estatísticas mais simples do Firebase. E por último, logo abaixo, temos que exportar esse módulo. Vou fazer um spot const, Firebase ou igual. Saia. Em seguida, vamos passar o aplicativo aqui mesmo. É tão simples quanto isso. Então, com isso, vinculamos com sucesso o projeto ao Firebase. Então, rapidamente, deixe-me guiá-lo pelo console do Firebase para se familiarizar com ele. Então, observe que copiamos esse clichê aqui. Sim. Então, o próximo da fila é continuar no console. No canto inferior esquerdo da tela, você verá esse botão aqui continuando no console, à direita, estamos no console. Você tem que abrir o Butte e depois a autenticação. Clique em Começar. Então, clique na barra de senha do e-mail. Então, temos que habilitar aqui e depois Salvar. Tudo bem, então você vai ver esse verde aqui. E então, novamente, continue com Use-nos. Aqui exatamente é onde todo o usuário será armazenado, ok? Quando um usuário faz login em nossa obrigação, suas credenciais serão armazenadas aqui, que implica a senha e o e-mail. O mais simples que isso. Tudo bem, então isso é tudo por enquanto. E na próxima palestra, começaremos a implementar a página de inscrição. E então o usuário poderá se inscrever em nosso projeto e começar a fazer o login. É tão simples quanto isso. 80. 78 CreateUsers: Bem-vindos de volta a todos. Tudo bem, então vamos prosseguir com a página de inscrição. Código Vs. A página de inscrição dot j é nosso direito é definitivo. Então, bem no topo. A primeira coisa que faremos é importar a configuração do painel do Firebase, que é o módulo que criamos na aula anterior. Deixe-me te mostrar rapidamente esse cara aqui. Ok, então venha aqui e vamos fazer isso aqui. Vamos importar o Firebase dos pés reduzidos do Firebase DashCon da UT. Então esse cara aqui, deixe-me te mostrar esse cara. Are, você entende todas essas coisas. Eu não fiz isso. Vamos importar algumas das coisas que vamos usar. Então, para fazer isso, temos que seguir as melhores práticas. Deixe-me fazer alguma coisa. destacar as linhas dois a três. Tirei isso, venha aqui e cole. Então, essas serão as entradas que criamos, mas essas são as principais entradas das bibliotecas externas. Então, aqui eu vou fazer importações, criar usuários com e-mail e senha do Firebase sair correndo também. Temos que importar trocos intermitentes. Exatamente assim. Vamos criar rapidamente o gerenciador para a inscrição. Ei, eu vou fazer const, handle, sign-in, equa, configurá-lo para nossa função. Então, aqui vamos ter uma assíncrona. Bom. Então, agora mesmo, vamos encerrá-lo em um bloco de tentativa e captura. Aqui. Eu vou fazer e-mail, senha constantes. E eu vou configurá-lo para formar valores. Portanto, antes de prosseguirmos, vamos criar rapidamente as variáveis de estado necessárias para serem usadas. Então eu vou fazer a narrativa. Eles usam trechos de dados do valor, definem valores de telefone. Ok, aqui vai estar um conjunto de valores da Copa. O estado inicial será um objeto. E dentro dos objetos, vou enviar e-mails. O e-mail. Vamos configurá-lo como uma string vazia. Sim, então o estado inicial do campo de e-mail estará vazio. Sim, então o campo de senha, também o estado inicial, será uma string vazia, o que a torna vazia. Tudo bem? Feito isso, vamos continuar com os valores do formulário aqui. Aqui vamos para nossa largura, pois é assíncrona, então ela retornará uma promessa. Então, temos que esperar aqui. Vamos chamar o método de criação de usuário com e-mail e senha. Nós o importamos. Deixe-me mostrar a você na parte superior, do Firebase. Então, dentro desse método, vamos usar o Firebase de e-mail em coma, senha mais calma, tão simples quanto isso. E aqui vamos detectar o erro necessário. Então, quando detectamos o erro, precisamos registrá-lo no console. Vou fazer console.log. Esse cara aqui, que é o erro. Se houver algum erro ou problema, vamos registrá-lo no console. Sim, então o que é agora, temos que implementar todas essas dificuldades, certo, dentro do campo de entrada. Então esse é o campo de senha. O valor dos valores, pontos, senha. Portanto, isso capturará qualquer senha que o usuário inseriu, os direitos estavam no campo. Tão inalterado. Isso significa quando o usuário começa a digitar no campo de entrada. Então, isso nos dará acesso ao evento e, em seguida, o definirá como nossa função. Quando o usuário começa a digitar no campo de entrada, precisamos atualizar a empresa. Agora vou fazer um conjunto de valores. Então, temos que espalhar valores diferentes. Feito isso, vamos fazer ponto E, alvo, nome do ponto. Então, por último, vamos fazer um ponto para atingir esse valor. Temos que copiar tudo a partir de um valor como esse. A cópia das linhas 42, 43 vem dentro do e-mail. Então, dentro do campo de e-mail, vamos colar. Mas agora temos que mudar o valor da empresa para e-mail. O mais simples que ter feito isso. Temos que chamar a humilde função de login quando o botão de inscrição é clicado. Então, aqui vamos especificar o onclick, onclick desse parafuso. Vou fazer login manualmente. Agora você pode ver que a função está registrada. A cor da fonte fica tão nítida, antiga. Mas quando você vem aqui, por exemplo, vamos deletar. Estragar tudo. Você vê? Tudo bem, tudo bem. Salve o aplicativo e vamos testá-lo. Vamos fazer o npm starts para interromper o projeto. Então, prefiro arrastar o Firebase até aqui para que o aplicativo fique aqui. Tudo bem, então vamos navegar até a página de login. Meu e-mail será um enorme mistake@gmail.com. Clique em Começar. A senha. Eu vou fazer 123, ABC. Vamos nos inscrever. Vamos tirá-lo. Se realmente tivermos uma inscrição. Temos que atualizar o console aqui para ver. Gente, tudo funciona conforme o esperado. Você pode ver agora que isso é tech@gmail.com? Tudo legal. Tudo bem, então a próxima linha é redirecionar o usuário para a página inicial quando o usuário entra e sai. Portanto, após o login, quando as credenciais estiverem corretas, ao clicar no botão de inscrição, o aplicativo poderá redirecioná-lo para a página inicial, que é a página da Netflix. Volte para o VS Code e aqui, estrague tudo. Então, logo no topo, vamos importar o que diabos é esse ****? Um toque para fora. Salvar. Agora vamos voltar e conferir novamente. Quero que sejamos exatos aqui. Vamos supor que Mike adicione gmail.com, comece. Senha, um-dois-três, ABC. Você não se inscreve. Volte para o console e atualize. Bom. Ainda funciona conforme o esperado. Portanto, essa entrada aqui é desnecessária. Sim, então agora temos que importar, usar, navegar do React, roteador doom. E depois disso, vamos fazer navegações constantes. O CWA, use navigates. É claro que é uma função. Sim. E depois de fazer isso, agora, venha aqui e vamos configurar a autenticação. Vou fazer uma mudança de estado. Deixe-me mostrar esse cara que importamos do Firebase. Na verdade, estamos realizando a autenticação aqui. O estado ligado/desligado mudou. Vamos fazer a vírgula do Firebase e, em seguida, vamos passar o usuário atual. Portanto, isso ajudará a verificar o usuário atual que fez login. Portanto, quando o usuário atual fizer login, ele o redirecionará para a página inicial, que é a página da Netflix. Qual é exatamente a intenção? Aqui? Vamos verificar isso. Então, eu vou fazer se for usuário atual, então, se houver um novo registro, sim. Vamos navegar até a página inicial. Não se preocupe, vou explicar isso em um GeV. Use Navegar. Navegue. Gente, vamos alterá-los para navegar. Isso soa melhor. Navegue. Então, aqui vamos navegar após a chave em seu e-mail e senha. Então, aqui vamos verificar se o usuário atual, se você é o usuário atual que se inscreveu diretamente nesta página, você será redirecionado para a página inicial. E se preocupe, vamos fazer isso em um instante para que você possa ver. Então, quando especificamos esse conflito aqui, significa que você será redirecionado para a página inicial. Consegue ver o Slash? Isso significa que você será a página da Netflix. Aqui está escrito que a identificação nossos usuários navega já foi declarada. Vamos ver o que acontece por aqui. Naveguem de forma igual, usem, naveguem, pessoal , olhem, nós estragamos alguma coisa aqui. Temos que limpar isso. E eu sinto muito por isso. Gravação Safe Harbor usada. É definido, mas não usado. Por que é usado? Provavelmente não nesta página que se encontra na página de login. Sim, não se preocupe com isso por enquanto. Salve no navegador. Você pode ver agora que fomos redirecionados para a página da Netflix. Tudo bem, deixe-me mostrar rapidamente para que você possa entender bem o suficiente. Volte para o console. Vou excluir todos esses usuários e excluir contas. E aqui também precisamos excluir a palestra da conta para atualizar. E você vê que nada está aqui. Por enquanto. Volte para o aplicativo. Atualizar. Agora temos que navegar até a página de inscrição. Agora dê uma olhada. Quando eu me inscrevi com um novo e-mail, ele vai me redirecionar para a página da Netflix. Vou fazer aqui. John@gmail.com. Comece. Vou fazer 123ab C e depois me inscrever. Agora fomos redirecionados para a página da Netflix. E essa é exatamente a intenção. Sim. Você pode ver tudo bem, então terminamos com a página de inscrição. Na próxima aula, faremos a autenticação com a página de login. 81. Autenticação de login: Bem-vindos de volta a todos. Então, na palestra anterior, implementamos a página de inscrição. Assim, os usuários poderão criar uma conta e serão redirecionados para a página da Netflix, que é o padrão. Agora vamos prosseguir com a autenticação de login. Então, vamos supor que use nosso cadastro no aplicativo e, em seguida, saia. Então, ao sair, você não precisa se inscrever do zero. Tudo o que você precisa fazer é fazer login no aplicativo usando suas credenciais, que você realmente criou anteriormente. Agora, antes de prosseguirmos com a página de login, faremos algumas configurações que não levarão tempo. Volte para o navegador e depois volte para o console do Firebase. Queremos excluir o usuário dessa forma. Vamos excluir essa conta. Então, qualquer conta que você tenha aqui, exclua toda a conta. Vamos criá-lo do zero. Volte ao código, vá para a página de inscrição e, em seguida, faremos um comentário sobre isso. Portanto, não queremos que ele seja redirecionado para a página da Netflix quando eles usarem nossa inscrição por enquanto. Ok, só por enquanto. Isso é apenas, por exemplo, saquê. Um comentário sobre o uso de navegação. Você também pode pressionar um comentário aqui, se desejar. Bom. Não fiz isso. Vamos continuar com a página de login, certo? Estamos na página de login. importar Vamos importar, vamos copiar a entrada da página de inscrição. Não quero que percamos tempo aqui. Destaque e copie. Página de login e cole. Agora, não precisamos de usuário decretado com e-mail e senha. Anteriormente, criamos os usuários e não precisamos mais deles aqui. Então, o que precisamos agora é fazer login com e-mail e senha e nebuloso e todas essas coisas, além de uma vírgula aqui. E ele será importado da autenticação do Firebase. E, claro, criamos esse módulo anteriormente. Feito isso, também temos que importar a cópia do navegador do usuário daqui e colá-la aqui do comentário. Tudo bem, então também temos que importar o suco daquele gancho na parte superior. Então, para fazer isso de uma forma mais profissional, o que vou fazer agora é separar a entrada, destacar isso, recortá-la, vir aqui e colar. Então, essa é a entrada que fizemos para as bibliotecas externas, e essas são as entradas que fizemos para nossos próprios arquivos que criamos. Isso mostra pelo menos como criar um aplicativo como um profissional. E, por favor, observe que isso definitivamente o ajudará no futuro quando você for contratado. Então, agora, o que fazer a seguir é criar as variáveis de estado necessárias para serem usadas. Em vez disso, vou gerar o uso de trechos. Então eu vou fazer e-mail definido por e-mail. Isso deve ser na carpa. Portanto, o estado inicial deles também será uma string vazia aqui. Vamos fazer o trecho de uso. E isso será uma senha, desculpe, como essa senha definida, isso estará no CUP. Além disso, o estado inicial será uma string vazia, que é o campo de login, certo? Deixe-me te mostrar. Venha aqui, corte o login. Tudo bem, então aqui está o campo de e-mail e aqui está o campo de senha. Portanto, o estado inicial será um campo vazio como esse até que o usuário comece a imputar suas próprias credenciais. Volte ao código e vamos começar. Certo? A aula de campo de entrada não seria para formatar o código. Agora, tudo bem, então agora o código aparece bem. Vamos implementar o onchange. Então, quando o usuário começar a digitar no campo de entrada, teremos acesso aos eventos. Tudo bem? E então, primeiro, vamos chamar a função de configuração para atualizar o e-mail. Defina o e-mail. Em seguida, vamos defini-lo como e dot, o que quer que o usuário esteja digitando, que é o ponto e, tem como alvo esse valor. E eu te ensinei todas essas coisas. Então, quando estávamos realmente praticando o básico, reage individualmente. Então, aqui eu vou fazer o valor que vai ser e-mail, copiar, não gostar dessa cópia, destacar e copiar. Acesse o campo de senha e cole aqui. Formata o código com mais bonito. Basta manter pressionadas as teclas Shift e Option no teclado e tocar em F no teclado para formatar com mais bonito. Ou você também pode fazer algo assim: clique com o botão direito do mouse em Formatar documento com um código de lema mais bonito. Ok, então aqui vamos alterá-lo para definir a senha. Aqui inalterado. O valor será o valor da senha é tão simples quanto isso. Tudo bem, então, depois de fazer isso, vamos realizar rapidamente a autenticação. Role até o topo. Tudo bem, Ei, vamos fazer const, handle, lock in, equa, configurá-lo para nossa função. Vamos ter uma pia e certeza, ela retribuirá uma promessa. Então, temos que esperar. O problema está aqui desse jeito. E eu vou fazer login com e-mail e senha. Logo nesta função, vamos passar o Firebase de carma, e-mail e senha. E tudo isso seria embrulhado em um bloco de tentativa e captura. Então, destaque e corte. Em seguida, vamos gerar um bloco try catch. Então, dentro do bloco de teste, vamos colar e aqui está a captura. Portanto, se houver algum erro ou custo, precisamos detectar o erro e fazer login no console. É mais simples que, depois de fazer isso , por fim, precisamos realizar a autenticação para verificar o usuário atual. E então, se as credenciais estiverem corretas, teremos que redirecioná-las para a página da Netflix. E é claro que fizemos isso na palestra anterior. Vá para a página de inscrição. Venha aqui. Copie esse cara, destaque e copie. Fora dessa função. Por favor, não faça isso dentro desta função. Saia da função e cole. Agora temos que remover o comentário, o formato, o código, a opção de mudança F para formatar o código. E agora temos que chamar essa função diretamente dentro da proteína. Quando o botão Login é clicado, precisamos chamar a função de login do identificador save. Diz que a navegação não está definida. Tudo bem? É simplesmente porque não o inicializamos. Lembre-se de que nós o importamos aqui na parte superior. Agora, aqui temos que inicializá-lo. E é claro que fizemos isso na palestra anterior. E eu tenho que copiar. Cole, destaque, remova o comentário, salve o aplicativo e agora tudo está funcionando perfeitamente. O código está livre de erros. Mas mais uma coisa que você disse é uma contribuição aqui. É uma importação desnecessária. Talvez você não tenha essa importação no final. Tão ignorado. Salve, volte para o navegador. E agora vamos fazer login porque primeiro você precisa criar uma conta antes de fazer login. Sim. Então, aqui vou fazer uma inscrição no Slash. Certo. Para trazer a página de inscrição. Eu vou fazer angela@gmail.com. Comece. E então o campo de senha aparece e vamos fazer 123ab c. Agora inscreva-se. Ao clicar no botão Inscrever-se, por enquanto, você não será redirecionado para a página da Netflix simplesmente porque removemos essa funcionalidade. Agora, vamos ver se a inscrição foi atualizada com sucesso. Agora, criamos a conta para Angela e não criamos essa conta. Temos que voltar para a página de login com barra na página de login. Você pode ver que, ao voltar para a página de login, ela o redirecionará para a página da Netflix. Você sabe por quê? Deixe-me explicar rapidamente o que acontece sob o capô. Volte para o código VS. Então, quando entrar na página de login aqui , dirá: Ei, encontrei um usuário atualmente registrado. Então, rapidamente, redirecione o usuário registrado para a página da Netflix. Sim, então isso é exatamente o que esse cara aqui faz. E é por isso que você vê que ele abre a página de login e redireciona rapidamente. Faça a página da Netflix. Deixe-me mostrar rapidamente como obter os resultados que estamos esperando. Volte para o navegador e abra o console. Então, certo, quando o console clicar nesse ícone de pasta aqui, vá para o aplicativo, certo? Então, temos que ir para Armazenamento, clicar em armazenamento e, em seguida, abrir o banco de dados de índice. Ei, não é? Então, temos que clicar aqui, excluir, selecionar novamente e excluir. Então, agora, quando tentamos novamente acessar a página de login e o osso, você consegue ver agora? Agora vamos tentar ver se podemos usar essa conta para fazer login na página da Netflix. Lembre-se, temos Angela aqui. Você pode criar qualquer conta de sua escolha. Então, limpe e cole Angela. E aqui a senha é 123ab C. Clique em Login para ver o que acontece. Você pode ver agora que tudo está funcionando perfeitamente, conforme o esperado. Isso não é lindo? É extremamente bonito e eu gosto. Na próxima palestra, tentaremos, na medida do possível, implementar a funcionalidade de desconexão. Volte para o código, ID de inscrição dot js. , precisamos remover os comentários para que tudo comece a funcionar perfeitamente, conforme o esperado. Está tudo bem? Seguro? Página de login. Kay. Bom. Isso é tudo por enquanto. Nos vemos na próxima palestra. Vamos nos concentrar no cuidado holístico. 82. 80 OnScrollEvent: Bem-vindos de volta a todos. Tudo bem, então, na palestra anterior, implementamos a autenticação e acredito que ela esteja funcionando perfeitamente bem para você. Sim, então nesta palestra, vamos implementar a navegação superior. Então, quando um usuário clica no link, ele será redirecionado para o componente correspondente. Tudo bem, então não precisamos fazer manualmente algo como não gostar, inscrever-se. Você pode ver que não precisamos mais fazer algo assim. Sim, vamos implementar rapidamente o comando B superior do VS Code para abrir o Explorer e gravá-lo no Explorer Temos que abrir o próximo ponto de fluxo js fechar o Explorer novamente. E então eu vou apagar esse Netflix aqui e dar essa div um nome de classe daqui, certo? Quando for o herói, vamos exibir a imagem do herói, IMG SRC igual, copiar e colar o link do herói, que é porque os direitos de imagem estavam nos materiais. Não se preocupe, eu vou te mostrar em um GeV aqui, não é? Sim, está dentro dos materiais da Netflix. E então você pode abrir o auxiliar de código e copiá-lo daqui. Vamos fazer aqui, imagem está boa, não tem problema. Então, ter feito isso aqui está o resultado. Bom. Então, agora a próxima fila é implementar os eventos on scroll. Deixe-me mostrar, por exemplo vou destacar esta imagem, duplicá-la o máximo que puder e salvar o navegador. Então, você vê que agora eu posso rolar de cima para baixo. Mas o que realmente queremos fazer é colocar o resultado na rolagem, por exemplo, vamos supor que a aplicação no eixo y. Portanto, no eixo y, o evento de rolagem é igual a zero, mas quando você rola até o topo, os eventos de rolagem automática serão maiores que zero. Então, vamos condicioná-lo de forma que, se eles possuírem eventos de rolagem, o deslocamento da página seja zero. Queremos que o estado inicial seja falso. Caso contrário, queremos que o estado inicial seja verdadeiro. Então, quando o aplicativo estiver assim na página Y, o deslocamento relação ao tom, o deslocamento será igual a zero. E então, se for igual a zero, vamos defini-lo como falso. Mas quando você rola até a página superior, deslocamento Y será maior que zero. E se for maior que zero, vamos definir o estado inicial como verdadeiro. Vamos implementá-lo para que você possa entendê-lo bem o suficiente. Volte aqui. Vamos fazer isso certo? Estamos no componente. Então, agora temos que implementar o evento on scroll e eu vou fazer pontos de janela na rolagem. Feito isso, também precisamos declarar as variáveis de estado necessárias a serem usadas. Então, rapidamente, vamos gerar os trechos usados. Então eu vou fazer isso, está ferrado. Ele vai ser definido, está parafusado na letra maiúscula I. Então, o estado inicial será falso porque isso será igual a zero. Portanto, quando o usuário abre o aplicativo, o estado inicial da rolagem será falso porque não parafusamos na parte superior ou inferior. Mas quando começarmos a rolar , será maior que zero. E é isso que vamos definir como verdade. Então, o que vamos fazer agora, tudo bem. Aqui temos que atualizar o estado inicial definido como multidão. Vamos definir os deslocamentos parafusados para o ponto Y da janela. Portanto, se os deslocamentos do ponto p-y da janela forem iguais a zero, o estado inicial será falso. E setas, o estado inicial será verdadeiro. E o que é agora, vamos voltar quando os pontos rolarem. Agora, o que vou fazer agora é rolar o log do console para que eu possa mostrar o que é. O Console.log é rude. Salvo o dito usado, não está definido. Temos que importá-lo na parte superior. Use você salvou novamente, tudo funciona perfeitamente bem e no navegador, bem, estranho Comando I para abrir o console. Aqui no console. E certifique-se de que você pode. Agora você vê que a aplicação no deslocamento de inclinação é igual a zero. Então, no navegador, você verá falso. Então, quando eu rolar até o topo, a aplicação em compensações de tom será maior que zero. Portanto, o estado inicial compensações de tom será definido como verdadeiro. Vamos ver. Você pode ver que, ao rolar até o topo, ele retorna verdadeiro. Além disso, novamente, a aplicação é verdadeira, mas muitos marcam três pontos quando a aplicação no deslocamento de tom se torna zero, ela retornará falsa. Você pode ver agora que é falso? Role para baixo novamente, isso se torna verdade. No topo, chega a zero e se torna falso. Então, basicamente, o que estamos fazendo é verdadeiro, falso, verdadeiro, falso. Certo? Linda. Então, essa é exatamente a intenção desta palestra. Na próxima palestra, implementaremos a navegação superior. 83. 81 Componente de TopNav: Tudo bem, então, na palestra anterior, implementamos os eventos on scroll. Conseguimos atualizar o estado inicial de falso para verdadeiro, falso para verdadeiro. E eu sei que alguns de vocês estão curiosos. Você quer saber por que fizemos isso. Não se preocupe. No final desta palestra, você definitivamente a entenderá bem o suficiente. De frente para o VS Code e para implementar com menos rapidez os direitos do Top Nav estavam nos Componentes. Crie um novo arquivo chamado top mouth. Os pontos são um FCE para gerar o componente funcional. Então, vamos importar rapidamente o material necessário para ser usado. Primeiro, vamos usar o ícone do React. Então, eu vou fazer o npm install React dash icons. Enquanto a instalação estiver em andamento. Vamos importar daqui, importar o esboço, sair dos ícones do traço do React, barra. Nós temos a superfície com IA. E, a propósito, o ícone do React foi instalado com sucesso. Se você não o tiver instalado do seu lado, basta fazer isso agora. Em seguida, temos que importar a stout do componente stout. Como as entradas ligam, várias letras maiúsculas L da rota do traço do reator estão funcionando. Ok. Agora estamos prontos para ir até aqui. Vamos armazenar os direitos de navegação dentro de uma matriz. Então, eu vou fazer const, nav link, equal, configurá-lo como uma matriz vazia. E logo durante a matriz, vamos pegar um objeto. Tudo bem, estamos no objeto. Vamos dar um nome para que seja a página inicial mais calma. Vamos vinculá-lo a uma barra assim. Deixa eu te mostrar. Lembre-se de que implementamos as rotas na palestra anterior. Toda essa rota aqui. Então, vamos fazer isso para a página inicial, inscrever em um player de TV e muito mais, certo? Eu falei demais. Desculpe por isso. Os destaques o duplicam três vezes e , por favor, certifique-se de colocar uma vírgula aqui para separá-lo. Feito isso, vamos transformá-los TV e teremos que seguir a rota. TV Dash. Ele vai ser minha lista. Temos que seguir a rota, minha lista, criamos todas essas rotas. Por fim, vamos fazer filmes de corte. Tão simples quanto isso. Feito isso, vamos mapear essa matriz e todas essas guias exibir todas essas guias no canto superior direito da tela. Então, para fazer isso, vamos trabalhar na UE. Agora teremos navios porta-contêineres suficientes. Tudo bem. Aqui. Eu vou fazer const, love container, um stout dot div. Em seguida, eles digitalizam as barras traseiras para que possamos estilizá-las por dentro. Esse cara. Aqui. É isso. Ok, tudo bem. Agora vamos ter um div com o nome da classe do lado esquerdo. Porque teremos o lado esquerdo do Top Nav e o lado direito. Então, fora dessa div, teremos outra div. Dê a ele um nome de classe no lado direito. Ok, vamos trabalhar no lado esquerdo. Certo? No lado esquerdo, teremos o logotipo. Então, vamos ter um div com o nome da classe do logotipo. Em seguida, o logotipo, temos que exibi-lo com a tag IMG, SRC igual. Vou colar o link do logotipo aqui, além da etiqueta de fechamento automático. E neste link, você pode copiar e colar do diretório de materiais. Aqui está? Sim, as probabilidades são iguais ao logotipo mais o mais simples. O que faz de novo? Ok, agora temos que mapear esses itens, certo? Portanto, esse é o div com o nome da classe do logotipo, lado de fora do div com o nome da classe Logo. Teremos uma lista ordenada. Então, vamos ter o UL como o nome da classe dos links, logo dentro. Vamos mapear as coisas aqui. Eu vou fazer um link de navegação. Ok, acho que devemos fazer disso uma palavra plural porque é boa. Você nomeia sua matriz com uma estrada plural porque ela é uma coleção de detalhes com tipos de dados semelhantes. Portanto, temos dados e não apenas dados. Eu entendo que não estamos na aula de inglês aqui, mas é bom sair gramaticalmente quando você está fazendo coisas. Tudo bem, links de navegação , mapa de pontos, outros parênteses, e então vamos colocar os colchetes, bem dentro dos colchetes, vamos interromper seu nome. Vírgula n ln, ou mostrando um Jiffy. Vá até o topo, esse nome aqui. E link. Depois de fazer isso, defina-o para a função de erro, abra e feche os colchetes e, à direita, para colocar os colchetes, retornaremos a interface do usuário. Então, aqui vamos ter uma etiqueta LI. E eu coloquei uma chave. A chave será nomeada. Então, diretamente na tag LI, ou teremos os links, certo? Então, aqui temos que exibir o nome dos links. Ao salvar, deixe-me mostrar palestra sobre estatísticas do MPM no diretório do cliente. E antes de começarmos, acesse a Netflix. Estrague tudo aqui. Vamos ver se podemos renderizar o botão superior aqui. E, por favor, certifique-se de importá-lo na parte superior. Vamos salvar o projeto. Venha aqui, cetona, a tecla Enter para fazer com que ela acione demais nossa conversa, na verdade. Nada é exibido na tela. Por quê? Certo? Vamos ver o que acontece. Navegação superior. Isso é link. Então, desestruturamos o nome e o link. Então, por que não está funcionando? Ok, vamos fazer algo igual a um link. Portanto, temos que vinculá-lo para especificar o link como este, seguro no navegador. Vamos atualizar o que está acontecendo novamente, deixe-me ver o que acontece aqui. Tudo bem, então vamos verificar o problema aqui. Diz que erro de tipo, componentes de sublinhado de estilo, sublinhado e sublinhado estavam estacionando aquele módulo. Padrão. Div não é uma função. Rapazes. Dê uma olhada. Na verdade, é um erro tipográfico. Isso deve ser dots div, quando você salva e verifica no navegador, os IDs, tudo está funcionando perfeitamente bem. Agora, você pode ver que aqui estão os links. Quando você clica no programa de TV, você desce para a página do programa de TV. Volte. Minha lista. Filmes. Tudo está funcionando perfeitamente bem como aspartato. Então, agora temos que estilizar o componente tão rapidamente. Vamos trabalhar no lado direito, def. E, novamente, aqui está outro tipo de erro gráfico. Eu não sei. Então aqui está, tarde da noite. Então, por favor, só tenho que me perdoar, só por esta palestra. Eu vou fazer a bandeira D. Isso é bom. Todos nós cometemos erros. E talvez seja apenas um erro tipográfico e não algo do passado. Certo. Agora. Vamos votar , certo? Estamos nesta divisão com o nome da classe de embarque do lado direito. E então, certo, estamos neste barco em que vamos renderizar o logout offline. Feche-o com a etiqueta de fechamento automático. Salve no navegador. Aqui está, você pode ver que aqui está o logout. Então, na próxima palestra, vamos implementar essa proteína. Mas, por enquanto, temos que manter a interface de usuário reivindicada estilizando a empresa. Ok, vamos dialisar o componente na próxima aula. 84. 82 css globais: Ok, então, antes de prosseguirmos com a estilização desse componente, vamos fazer rapidamente algumas configurações necessárias, certo? Estamos no CSS do ponto índice. Portanto, você pode simplesmente fazer o Comando V ou o Controle P para abrir a caixa de pesquisa na parte superior e, em seguida, pesquisar CSS do ponto de índice, assim. E aqui vamos aplicar um pouco de CSS global. Primeiro, vamos mudar o plano de fundo. Eu vou fazer aqui a cor de fundo. Vamos torná-lo preto, assim. Feito isso aqui, vamos fazer margem zero, erro de preenchimento. O tamanho da caixa será na caixa de borda. Então, aqui vamos fazer o overflow. Estouro no eixo x. Vamos escondê-lo. E eu estou tendo feito isso, deixe-me ver. Bom. Agora o fundo está preto e você não pode rolar para a direita. Você pode não perceber, mas posso garantir que eles transbordam escondidos funcionam perfeitamente bem. Essas são as configurações necessárias que precisamos fazer globalmente. 85. 83 Componente de TopNav: Bem-vindos de volta a todos. Então, vamos estilizar rapidamente os componentes do canto superior esquerdo. Volte para o código VS. Agora, antes de prosseguirmos, precisamos voltar à página da Netflix. E aqui implementamos ponto da janela no escutador de rolagem. Sim, então o que vamos fazer agora é passá-lo como sondas até a navegação superior. Portanto, é muito fácil fazer isso. Então, o que eu vou fazer é crescer. Igual, está ferrado. Agora ele está sendo passado como adereços até o topo. Agora, o próximo na fila é recebê-lo, certo? Estamos no principal componente de navegação. E para fazer isso, nós só temos que desestruturá-lo aqui. Ele rolou. O mais simples que isso. Sim. Então, tendo feito isso agora, seria capaz de obter as informações daqui, certo? Estamos no topo agora. Vamos descobrir se o estado é verdadeiro, falso, verdadeiro ou falso. Ótimo, aninhe aqui. Vou fazer navegação, dar outro nome de classe, e isso não acontecerá dinamicamente. Então, vamos ter os dentes tortos. E você sabe que está vindo daqui, certo? Bom. Então, se eu errar essa citação, teremos dinamicamente uma classe chamada parafusada. Agora, não vamos ter que transar, desse jeito. Na verdade, a ideia é que possamos estilizar a parte superior. Agora, não se preocupe, você vai entender isso bem o suficiente quando eu terminar com isso. Sim. Então, a seguir, vou copiar tudo assim. Você consegue ver das linhas 20 a 43? Mova-o dentro da navegação. Esse cara aqui. Você pode ver? Ok, tudo bem, agora, sem mais delongas, vamos começar a estilizar o aplicativo. Agora. Vamos estilizar, não parafusos, pontos, não pergaminhos. Vamos fazer com que ele seja flexível. Pontos, role. Novamente. Vamos ter uma tela flexível e, em seguida, a cor de fundo será preta. É por isso que ouvimos o evento de rolagem. Quando você diz ventrículo no navegador e boom. Agora, você pode não ver isso claramente porque temos que estilizar a navegação, que é esse cara aqui. Só tenho que copiar o nav. Vamos colocá-la em posição. Vamos torná-lo pegajoso. Do topo, seremos zero. Então, isso vai empurrá-lo para o topo. E a altura dessa navegação superior será de seis RAM. A largura é de 100 por cento. Justifique o conteúdo. O espaço entre as posições será corrigido porque queríamos fixar o índice z superior. Vamos fazer dois, preenchendo 0,4. Vamos alinhar os itens ao centro. Então, ao salvar e conferir o navegador, agora, ao errar, você perceberá que a cor de fundo da navegação superior mudará para preto. Tenho certeza que você pode. Você vê que é simplesmente porque quando você rola o aplicativo no eixo y, ele define isso como verdadeiro. Então, quando a rolagem estiver definida como verdadeira, chamaremos essa classe, que é o parafuso, e então aplicaremos o plano de fundo como preto. Então, tão simples quanto isso, agora vamos fazer uma transação para que você tenha uma boa animação ao rolar o ponto zero. Ou seja, o de Satanás é em horas. Ok, vamos estilizar rapidamente o logotipo para que você tenha uma imagem clara do que fizemos até agora, eu acho. Sim. Pontos. Vamos fazer o lado esquerdo. Eu sempre aconselho copiar exatamente o que você tem aqui para não ter problemas desnecessários. Lado esquerdo. Vamos fazer com que ele exiba a flexibilidade e , em seguida, alinhe o centro dos itens. Vamos dar a ele um espaço intermediário. Eu vou fazer Gap to Ram. Feito isso, vamos estilizar rapidamente o logotipo. O logotipo, então vamos fazer com que ele seja exibido de forma flexível novamente. O fluxo dividido. Justifique o conteúdo no centro, alinhe os itens ao centro, salve a obrigação. Agora vamos lidar com a imagem com precisão. Img a largura. Vamos fazer dez RAM na altura dois, rem, salve o aplicativo. E isso é o que temos. Tudo está bem alinhado. Agora você tem o logotipo aqui, e agora você também tem o botão de sair aqui. Lado comum aqui. E vamos fazer os links de probabilidades. Queremos estilizar esses links aqui usados para aparecer agora. Então, vamos fazer com que eles exibam flex, salvem e verifiquem. Você pode ver agora que temos um programa de TV caseiro e o resto deles está embelezado. Tudo bem, quando eu vou fazer aqui, LI, LI, vamos definir um alvo para resolver, dar a ele uma cor branca. Salve no navegador. Agora, você entendeu. Ok, está tudo bem, tudo bem. Mas outra coisa que eu quero que você observe que você pode não ver claramente, mas ela está aparecendo na tela. Agora, o que eu quero fazer, porque quero que você entenda cada pedacinho desse código, destaque todas essas imagens. Você pode colocar um comentário sobre ele. Não faça isso no final. Apenas me observe porque é para ensinar trabalhos. Você também pode não ver isso. Vou até o css do ponto de índice e não faço nada, destaco e coloco um comentário sobre a cor de fundo. Volte aqui. Bom. Então, esses são os pontos que não queremos. Tudo parece, deixe-me, deixe-me, deixe-me fazer isso tão bem o suficiente. Então, aqui mais um comentário sobre isso novamente. Ok, tudo bem. Consegue ver esse ponto aqui? Ponto, ponto, pontos. Não queremos que ele remova esses pontos. O que eu vou fazer é voltar ao link e, em seguida, vou fazer o estilo de lista, digitar, seguro no navegador. Agora, o ponto sumiu. Você não vê mais esquivas seculares? Você não pode ver nenhum. Estamos aqui. Agora, vamos remover o sublinhado. Eu não gosto do subjacente. Ei, eu só vou fazer decoração. Nenhum, salve o projeto. E agora temos um link adequado aqui. É bom, eu adoro isso. Ao observar com atenção, você perceberá que todos esses links estão todos unidos. Vamos ter um espaço intermediário. Então, para fazer isso, certo, dentro do link novamente, vou fazer gap as Mickey three rem, salvo no navegador. Opa, tudo bem. Legal. Vamos desfazer algumas das coisas acabamos de fazer para ensinar pimentas. Salve aqui. E agora temos um aplicativo como esse. Volte para Top Glove, mude a cor para branco e bom. Você vê que tudo está funcionando perfeitamente bem. Ok, agora é hora de estilizar o lado direito, que é onde o botão de sair está localizado. Ok. Você pode ver que é hora de estilizar esse cara. Agora, o que eu vou fazer é fechar o lado esquerdo. Destaque esse cara aqui , certifique-se de que está fechando aqui assim. Com eles, fechamos o lado esquerdo e agora vamos começar pelo lado direito. Pontos. Role para cima. Lado direito. Vamos fazer com que ele seja flexível. Alinhe os itens ao centro. A lacuna deve ser de um quarto. Vamos direcionar o botão. Deixa eu te mostrar esse botão aqui. Ok? Porque dê a cor de fundo de vermelho, o vermelho ficará bem. Depois, a fronteira. Vamos divulgar isso. Ponteiro causal. Veja o que temos. Agora. Você vê? Bom. Acho que temos que aumentar o tamanho. Então, antes de prosseguirmos com o aumento do tamanho, vou fazer aqui e focar. O esboço não terá como alvo o SVG em si, que é esse cara. Deixe-me te mostrar. Esses caras. Tudo bem, pessoal, é tarde da noite por aqui, então tudo bem, vamos continuar. Eu vou fazer como VG. A cor do SVG é vermelha. O tamanho da fonte, que uma atriz acha que será o tamanho do SVG, vamos fazer chover. Talvez seja muito grande. Então, vamos retirá-lo, salvar o navegador e você verá que ele é extremamente grande. E vamos mudar isso para branco e ver o que acontece. Se o aplicativo. E aqui e você recarrega, você pode ver que está tudo bem. Mas uma coisa que não queremos é essas coisas aqui. Queremos que seja um pouco circular aqui. O que vou fazer, raio de fronteira, vamos fazer com que seja 50 por cento. Então, quando você faz esses aplicativos de segurança no navegador, agora temos a aparência desta. Você pode ver que tudo está funcionando perfeitamente, conforme o esperado. Antes de encerrarmos esta palestra, quero explicar tudo bem o suficiente. Mais uma vez. Volte para a Netflix. Então, aqui ouvimos os próprios eventos de scroll. Não ouvi os eventos na tela. Criamos uma variável de estado. E dissemos que se o deslocamento do window.py for igual a zero, significa que se o usuário não errar, o aplicativo ficará assim. E o fundo da navegação superior não terá nenhuma cor. Então, se soubermos que os deslocamentos em termos de tom são iguais a zero, definiremos o estado inicial como falso, então vamos manter o estado e os L's. Estamos definindo o estado inicial como verdadeiro. Por exemplo, aqui no aplicativo, não parafusamos na parte superior. Agora, o deslocamento de Pedra é igual a zero. Portanto, ele retorna falso. Então, quando eu rolar até o topo, isso vai voltar verdadeiro. A ideia é atribuir um nome de classe ao Top Nav dinamicamente com base no estado. Não precisávamos aplicar uma cor de fundo ao nome da classe. Então aqui passamos os parafusos como adereços. Na navegação superior. Nós o recebemos aqui por essa estrutura. Deixe-me te mostrar aqui, depois de fazer isso. Então, aqui temos um nome de classe, aqui temos o nav. E aqui fizemos. Se um parafuso for igual a verdadeiro, teremos um className chamado parafusado. Sim, flechas. Se for falso, teremos um código className sem rolagem. Portanto, se a rolagem estiver definida como verdadeira, permitirá estilizar o nome do cluster e definir o plano de fundo como preto. Deixe-me te mostrar. Isso é exatamente o que acontece aqui. Agora, o fundo é preto. Com isso, quando os usuários aumentarem o aplicativo até o topo, aplicaremos o fundo preto na parte superior agora. Assim. Entendido, lindo. Então, isso é tudo por enquanto. E na próxima palestra, começaremos a implementar a seção de heróis. 86. 84 Logout: Tudo bem, então, nesta palestra, vamos continuar implementando a funcionalidade de desconexão. Então, ao observar o canto superior direito da tela, você verá o botão de sair. Então, quando o usuário clicar nesse botão aparecerá a possibilidade de sair do aplicativo. Vamos implementar isso rapidamente. Volte ao código VS. Vamos importar ou não alterar os estados, sair do firebase e desligar. Então, acho que o temos na página de login. Abra rapidamente a página de login e tudo bem, vamos importar esse cara. Destaque e copie. Vá para a navegação superior. Cole aqui. O que queremos é uma mudança automática e, também , a saída do Karma. Novamente para a página de login. Vamos copiar o Firebase que criamos. Vamos colá-lo aqui. E por último, vamos importar e usar o Navigate. É tão simples quanto isso. Então, na verdade, o que vamos fazer aqui é bem simples. Novamente, volte para a página de login e role para baixo. Agora, primeiro, vou copiar esse cara aqui. Em seguida, cole-o aqui novamente na página de login. Copie esse cara e cole aqui. Então, se não houver um usuário atual, assim, se não for um usuário atual, teremos que navegar até a página de login. Ao clicar no botão de sair, você será redirecionado para a página de login. Salvar. Role para baixo e vamos implementá-lo aqui. Então, OnClick, vamos encerrar a sessão aqui usando o Firebase. Assim como esses. Salve o projeto no navegador, certo? Consegue ver isso? Agora estamos bloqueados. Então, quando eu clico no login, vamos ver o que acontece. Tudo bem, agora, quando eu clicar no botão de sair, seremos desconectados e o aplicativo nos redirecionará para a página de login. Vamos tentar. Consegue ver isso? Agora estamos na página de login. Tudo também está funcionando perfeitamente, conforme o esperado , se eu quiser fazer login no aplicativo. Então, vou usar minhas contas. Angela gmail.com 123ab c, faça o login e pronto. Agora estamos aqui. Conseguimos criar asiáticos autênticos e tudo está funcionando perfeitamente, conforme o esperado. Então, na próxima palestra, continuaremos com a página do herói. Nos vemos na próxima palestra. 87. 85 Componente de herói: Bem-vindos de volta a todos. Nesta palestra, vamos criar o componente do herói aqui. Então, no final desta palestra, teremos um visual muito bonito em design. Prossegue para o código VS. E vamos continuar abrindo rapidamente o netflix dot js. Então, aqui, o que vou fazer é excluir algumas dessas imagens porque, na verdade, fizemos isso para permitir que o site deles rolasse. Consegue ver isso? Foi exatamente o motivo pelo qual publicamos essas imagens várias vezes. Agora, limpe-o no navegador. Ei, você pode ver que agora, talvez não consigamos rolar novamente. Não se preocupe, sem problemas. Então, a primeira coisa que vou fazer aqui é importar de componentes padrão. Logo abaixo. Vou fazer const hero container equa styled dot d e, em seguida, a interpolação de cordas, abrir a casca 80k. Ok, agora terminamos. O que vou fazer é destacar e copiar o contêiner do herói. Vá para o topo. Queremos agrupar todo o aplicativo no contêiner do herói. Destaque o Comando X para cortar, mova-o aqui, misture para formatar o código e ele ficará limpo. Vamos continuar. Agora temos um div com o nome de classe de herói. Dentro do div, renderizamos o Top Nav e depois passamos tão rudes quanto adereços para o Top Nav. E aqui temos a imagem do herói. Agora, o que vou fazer logo após a tag de fechamento do IMG, vamos ter outro div, dar a ele um nome de classe de contêiner. A div do contêiner. Vamos ter outro div, dê a ele um nome de classe de Dido e a palavra certa no título. Nós vamos ter uma etiqueta de Adriano, e eu vou fazer Superman. Então, eles servirão como título. Então, vamos ter uma tag p que servirá como descrição. O que vou fazer agora é copiar um teste fictício aleatório da Internet e colar entre eles. Agora. Eu só vou colar assim. Sim, então se você tem uma descrição adequada do Superman, você também pode escrevê-la aqui, mas para mim, eu não quero perder tempo, então sim. Então, logo após a div de encerramento do título do nome da classe, aqui está. Vamos ter outra div. E esse div nos salvará do contêiner de botões div, div, o nome da classe de boardings. Então, vamos ter dois botões diferentes, certo, na seção de heróis. Uma das partes inferiores será o botão Jogar e a outra será a informação, que é o botão Mais. Aqui eu vou fazer. Comprei em plea, dê um nome de classe de play between, só vou destacar essa mistura para duplicá-la assim. E o que acontece de novo aqui, eu vou fazer mais. O m deveria estar na Copa. E então aqui eu vou fazer mais. Então, se você acha que o nome da minha classe está aqui, a convenção não é descritiva o suficiente. Você pode fazer com que seja descritivo. Do seu lado. Você pode escrevê-lo na íntegra. Podemos fazer o botão play, o botão Mais. Podemos fazer isso no final. Mas para mim, vou manter as coisas simples assim. Outra coisa que vamos fazer rolar até o topo e depois importar alguns dos ícones que usaremos no quadro. Vou importar a linha AIR em um círculo completo. Você o sufixará com outro. Em parte. F, uma jogada do React dash, barra de ícones. simples quanto isso, quando você salva em uma chamada para o navegador. Esses. Então, vamos tê-lo aqui, o Superman, que serve como título do filme, a descrição aqui. E aqui temos o botão play na equipe móvel. Agora, quando eu aumentar um pouco o zoom da tela, você verá que essa imagem está quebrando. Tem essa aparência. Então, o que vou fazer agora é estilizar essa empresa. Certo? Estamos no banco de trás. Vamos fazer ponto aqui, linha. Você vai ter com a posição relativa. A ideia é realmente colocar todas as paradas bem no topo da imagem do herói aqui. Então, tudo é Superman, a descrição da jogada e a equipe móvel estarão bem na frente dela. Tudo bem, espero que tenhamos que estilizar as imagens de invasão porque a imagem do herói está quebrando e eu não gosto dela. Agora, o que vou fazer, IMG, vamos direcionar a imagem, dar uma altura para ela. Vamos fazer a cobertura de 70 V de altura e depois a largura. Vamos fazer com que seja 100%. Acho que vai ficar bem. Salve uma redução escalonada no navegador e eu amplio novamente, diminuo o zoom, amplio tudo está funcionando agora, tudo bem. Ok, então o melhor online é colocar esses caras no topo. Como fazemos isso? Você pode me dizer, não se preocupe, eu vou te ajudar. Recipiente Dot. Deixe-me mostrar tudo aqui. Como se isso estivesse dentro do D do nome da classe do contêiner. Então, quero dizer, todas essas coisas, o título, a descrição do barco. Vamos posicioná-la. Adivinha o que? Será absoluto para colocá-lo em cima da imagem do herói. Porque aqui nós o definimos como relativo. E aqui, quando você fizer o absoluto, esse cara virá direto para o topo. Não apenas na parte superior, bem na frente do corpo? Sim. Ok. Não se preocupe, vamos fazer isso para que você possa entendê-lo bem o suficiente. O que vou fazer agora é fazer com que o fundo seja um aro. Quando você economiza. Volte para o navegador. Ainda o temos aqui embaixo. Vamos dar uma olhada. Eu escrevi está bem. Quando você faz absolutos e embaixo um rem, esse contêiner deve estar em cima do herói, mas no momento parece que não está funcionando. Oh meu Deus, eu percebi que a mina estava errada. Me desculpe por isso. Essa é a grafia correta do contêiner. Eu sei que a maioria de vocês pode realmente ter visto isso na palestra. Certifique-se de corrigi-lo. É um erro tipográfico. Limpe esse cara e cole aqui. Agora temos a grafia correta do contêiner. Salve no navegador. Agora temos os fogões aqui. Ok, está tudo bem, mas vamos preparar mais sopa. Venha aqui. Tudo bem, dentro do contêiner, temos o título. E, claro, quero verificar o nome da turma novamente porque não quero que entremos em outro labirinto. O título está aqui para copiar. Gente, olha, nós temos que fazer assim que não fiquemos bem, está tudo bem, certo? Usando o título, temos a etiqueta H1. Aqui. Vou deixar a margem, transformada de cinco rem, maiúscula. Vamos salvar e ver. Ok, está bonito aqui, não é? Vamos dar a ele um tamanho de fonte de 73 pixels. Tudo bem, então, para o plano de fundo da fonte, vou copiar e colar do auxiliar de código. Você vai dar uma olhada. Você vai ver o plano de fundo do herói. Copie e cole esse bloco aqui. Salvar. E então vamos ver o resultado no navegador. Dê uma olhada. Você pode ver agora que temos esse Superman aqui com uma boa aparência. Eu adoro isso. Ok, vamos estilizar rapidamente a tag p. Margem, parte inferior de -50 pixels. A largura é de 40 pixels. Margem restante como manutenção. A margem restante é de cinco rem. A família da fonte não é problema. Dê a ele uma família de fontes de Lexend, Deca, coma, sans, serif. Em seguida, basta especificar a cor a ser branca. Tudo vai ficar bem. Parece bom, de fato. A margem inferior deve ter 50 pixels e não -50 pixels. Você pode ver agora que está no topo. Também temos os botões aqui, não se preocupe, vamos colocá-los no topo agora mesmo. Então, fora do título, temos outra div. Deixe-me mostrar a div aqui com o nome da classe dos boardings. Só vou copiar os botões de pontos do nome dessa classe. E então eu vou fazer com que ele seja flexível. Vamos dar uma margem de cinco rem. Lacuna desviada para rem. Ok. Está tudo bem. Ok. O que, novamente, temos que fazer? Temos que estilizar o botão e deixá-lo mais bonito. Também temos a classe btn. Temos pontos, mais classe BTN. E tudo isso, você já sabe que está no topo, aqui a mistura de grafias dos nomes das suas classes está correta. Vamos justificar o conteúdo. Para centralizar, as fontes dentro do botão ficarão vermelhas. Vamos dar a ele um raio de fronteira. Ok, vamos fazer disso um wireframe. Na verdade, isso o deixará um pouco curvas. Vamos salvar e ver. Ok, de fato está indo bem. Vamos seguir adiante. O tamanho da fonte. Um ponto para ele. A folga é de um estofamento de aro, 0,9 faixas de acolchoamento à esquerda para o padrão REM à direita. Ponto de sapato para AIM. Ups pessoal, dêem uma olhada. Não sei por que isso continua acontecendo. Ok. Corrigiu a borda. Não queremos a fronteira, então vou fazer com que ela não seja Vamos ver o que temos por enquanto. E parece bom. Diminua o zoom. Adoro os resultados. Vamos continuar com o caso. Vamos fazer disso um indicador. Então, será exatamente o mesmo que o número mais entre n. Então copie o estilo de a aqui e cole-o aqui ao salvar a, coloque-o de fora. Certo? Agora, temos que mudar a cor de fundo do mais btn. E a cor aqui, que é a cor da fonte em si, será branca, a cor de fundo. Vamos torná-lo preto e a borda. Cuidado. Então esse cara aqui, o corpo vai ter 0,1 RAM, branco sólido. Vamos dar uma olhada. Perfeito. Tudo está em boa forma. Mas uma coisa que eu quero fazer agora é o espaço vazio entre a descrição na parte inferior é bastante compatível. Então, acho que temos que diminuir um pouco. Deixe-me ver a descrição, que é o título. A descrição aqui, a margem inferior. Vamos fazer dez. Veja o que, quão polido não funcionou assim. Ok, vamos encontrar uma maneira de derrubá-lo. Então eu vou fazer com que olhem -50 caras, parece que o -50 funcionará desta vez e funcionará. Tudo legal. Mas uma coisa que eu quero que implementemos é deixar o plano de fundo um pouco escuro para que a imagem que é a imagem do herói, ok, pessoal, vamos implementá-la para que vocês entendam o que estou prestes a dizer. Venha aqui, vá até o topo. E aqui vamos fazer a cor de fundo. Vamos torná-lo preto. Feito isso, certo, não seria o herói, eu vou fazer ponto, plano de fundo, traço, imagem. Não se preocupe, vamos criar essa classe agora mesmo. Copie, dê ao IMG um nome de classe de imagem de fundo, o ponto mais simples e depois volte e menos Tailândia está aqui? Vamos ver o que acontece por aqui. Futa, eu vou fazer o brilho. Vamos fazer com que o brilho seja 40 por cento, pois espero que isso funcione. Funcionou perfeitamente bem. Exatamente o que eu quero dizer. Às vezes, o resultado do seu trabalho é a melhor explicação. Essa era a minha intenção. Venha aqui. Talvez você nem precise fazer isso. Ok? Agora conseguimos ter um fundo transparente. Isso é clássico. Isso é tudo por enquanto. E na próxima aula, implementaremos a votação por reprodução para que, quando o usuário clicar no botão Reproduzir, ele o redirecione para o componente de reprodução em que o filme começará a ser reproduzido . Vai ser interessante. Nos vemos na próxima palestra. 88. 86 Margem consistente: Tudo bem, então, se você observar com atenção, perceberá que não temos uma margem consistente. Deixe-me mostrar o conteúdo aqui, que é a descrição, o título e os botões. A margem esquerda é de cinco RAM. Mas ao observar a parte superior, você perceberá que o logotipo da Netflix aqui nem tem nenhuma margem aqui à esquerda. Então, o que vamos fazer é também especificar a margem restante para ser phi de RAM para que ela comece na mesma linha. Por assim dizer. Agora volte para o código VS e abra a parte superior. Agora, como esses, temos que rolar para baixo até onde temos o lado esquerdo. Lado esquerdo, estamos aqui. Tudo bem, é a lacuna a ser quebrada? Margem esquerda? Vamos fazer com que seja cinco rem. Você pode ver agora que tudo está alinhado? Se você observar o canto superior direito da tela, perceberá que o botão de desconexão está quase saindo da tela. Eu não gosto disso. Então, venha aqui, vamos procurar o lado certo. Do lado direito onde você está, aqui está a margem, certo? Vamos aumentar o alcance. Eu vejo Save. Linda. Agora temos um design muito bonito e maduro. É bom assim. Vamos prosseguir para a próxima palestra em que projetaríamos a empresa de reprodutores de filmes. 89. 87 Componente de VideoPlayer: Tudo bem, então nesta palestra, vamos criar o componente player de filmes. Mas antes de prosseguirmos, precisamos implementar o OnClick para essa parte inferior, que é o botão Play. Assim, quando o usuário clicar no botão Reproduzir, ele será redirecionado para o reprodutor de filmes. Volte para o código VS, Netflix. Temos que importar, usar a navegação. Onde fazemos isso agora? Ok, olha isso, o melhor NEF. Eu vou cortar, vir aqui e colar. Então, essa seria a contribuição que recebemos da biblioteca, e essas serão as entradas de nossas próprias empresas. Então, aqui eu vou fazer em potes, usar a navegação do React, a cúpula do roteador. Aqui temos que inicializá-lo. Eu vou fazer const, navigate. Um usuário navega. É claro que é uma função. Então, temos que fazer algo assim e voltar para a peça comprada aqui. Eu vou fazer onclick, onclick of the body. Vamos navegar até o jogador. Ok, deixe-me mostrar o componente do aplicativo novamente. Eu continuo te mostrando esses. Você pode ver que aqui está a rota e vamos navegar até esse componente chamado player Command B. E páginas, páginas, player, página do player, salvar, salvar no navegador. Vamos clicar nesse botão e pronto, estamos aqui na página play a. Você pode ver a peça no topo? Bom. Feche isso, feche isso e feche na parte superior. Agora ficaremos com o jogador dot g is. Então, o que vamos fazer aqui dentro do componente player, vamos ter um contêiner dividido. Novamente, certifique-se de que o baço do continente esteja correto desta vez. Ok, vamos importar o Stout dos componentes iniciais. E esse contêiner do jogador, const, contêiner do jogador é igual stout.df e depois ao banco traseiro. Tudo bem, ficaremos bem. Definitivamente. Tenha um DVI, dê o nome da classe clear, logo quando o player div, outro div com o nome da classe de seta para trás, à direita. Para trazer a seta para trás, vamos renderizar o BSR para a esquerda. E esse ícone BSR à esquerda vem do ícone do React em vasos, seja S, seta à esquerda dos ícones do traço do React. E, claro, vamos resolver isso com o BS. Os Bs estão corretos. Ok, está tudo bem. Agora vou fazer o VS seta esquerda renderizar o ícone aqui. E então vamos especificar o onclick. Quando o usuário clica nesse ícone, o que acontece? Queremos voltar para a página da Netflix. Então, com um clique, eu vou fazer. Agora temos menos um aqui e vamos fechar o que é a etiqueta de fechamento automático. Então, agora temos duas entradas usadas, navegue e inicialize. Vamos voltar à página da Netflix e copiá-la. Vou nos copiar e navegar a partir daqui. Venha aqui, cole novamente, aqui, copie a inicialização e cole aqui. Tudo legal. Então, logo após a div de encerramento da seta para trás do nome da classe, teremos aqui dentro desta div do nome da classe do jogador. Opa, isso deveria ser um jogador, por favor. Vamos ter a tag de vídeo, video SrC. Então, vamos copiar o trailer da barra de código do halo e colá-lo aqui. Este é o link para o vídeo mais próximo com uma tag de fechamento automático, a menos que atendam às configurações necessárias. Antes de prosseguirmos com as configurações, vamos salvar, ver o que temos. Vamos atualizar. Você pode ver que temos o vídeo aqui? Por enquanto. Você não pode reproduzir o vídeo. E sim, então vamos fazer as configurações necessárias. Vamos ativar a reprodução automática. Então vamos fazer um loop. E os controles. Vamos fazer com que seja mutado para que ele não faça barulho. Quando você atualiza. Você pode ver bem, vamos remover menos do que mover o mutante. Agora temos os controles de tudo que está funcionando. Ah, sim. Você vê isso? Está tudo bem. Então, o que vou fazer agora é estilizar os vídeos e tudo funcionará perfeitamente bem. Tudo bem, Brenda Starr, tocadora de componentes. A largura. Vamos fazer com que a largura seja 100, largura visualização, altura, 100 pontos. Seta para trás. Deixe-me te mostrar. Esse é o locatário. Garante que a grafia esteja correta. Tenha com posição absoluta. O preenchimento é dois ou M, Z, índice de traços. Vamos fazer disso um. Como V G, que serve para que o ícone seja preciso. O tamanho da fonte será, que é o tamanho do ícone. Vamos fazer com que seja três rem, um ponteiro causal. Eu vou fazer aqui a cor do SVG, cor, branco. Vamos ver o que acontece. Vamos lá. Agora é hora de estilizar o vídeo. O vídeo, o que vou fazer, vou atingir 100% de altura. Temos 100 por cento. Feito isso, salve o projeto e no navegador. Vamos clicar na tabela. Tudo está funcionando perfeitamente bem. Tudo bem, vamos nos divertir. Ok, está tudo bem. Muito obrigado. E isso é tudo por enquanto. Na próxima palestra, começaremos a desenhar os cartões para que você tenha a exibição do filme aqui que seja muito interessante. Nos vemos na próxima palestra. 90. 88 MovieCard: Bem-vindos de volta a todos. Nesta palestra, projetaremos os componentes do cartão de forma que, quando o usuário passar o mouse sobre o recorte, apareça o trailer do filme e o restante das informações, como os botes salva-vidas no botão de não gostar no botão Adicionar duas embarcações favoritas. Então, sem mais delongas, vamos começar. Volte ao código VS Command B para abrir o Explorer. Então, dentro do componente, vamos criar um novo arquivo chamado card dot js are EFC, que é agitado, para gerar o componente funcional de seta, fechar o Explorer. E, novamente, Comando P. Vamos pesquisar Netflix para renderizar esse componente, que é o componente da placa que os direitos estavam na página da Netflix. Estou aqui. Então, vamos renderizar os componentes da placa aqui. Quando eu fizer isso, o componente do cartão será importado na parte superior para mim, rolando automaticamente até o topo. Então você vê isso aqui. Ok. Portanto, certifique-se de importar a empresa do cartão para a banheira. Estou aqui, salve. Então, vamos fazer as entradas necessárias, como na parte superior, vamos importar o gancho de identificação dos EUA. E, claro, espero que você saiba que eles usam o TikTok como uma função. Então, definitivamente temos que invocá-lo quando quisermos fazer uso dele. Também precisamos importar e usar navegadores da cúpula do roteador React. Novamente, temos que importar Stout a partir de componentes robustos. Feito isso, vamos importar os ícones necessários para serem usados, como o ícone de luz, antipatia e muito mais. Não se preocupe, eu já preparei os ícones. Então, o que vamos fazer é copiar e colar, certo? Estamos no código **** power. E eles são esses. Portanto, destacar e copiar os ícones aqui não seria chamado de auxiliar. Venha até o topo e cole. É tão simples quanto isso. Então, o círculo nítido vem dos ícones de Riade e nós o cobrimos com eles. Portanto, todos os ícones vêm , na verdade, dos ícones de Riade. Não há nada com que se preocupar. Tendo feito isso. Vamos declarar as variáveis de estado necessárias a serem usadas. Primeiro, vamos fazer const On Whole Bad Karma, colocado em hovered. Então, vamos fazer estados iguais e usar. Obviamente, é uma função e isso será uma operação booleana, então o estado inicial será falso. Sim, depois de fazer isso, novamente, também precisamos inicializar a navegação nos EUA aqui. Venha aqui. Eu vou fazer const, navigates, aquatic, usar Navigate. É tão simples quanto isso. Feito isso, vamos prosseguir com o design. Venha aqui. Vamos ter um recipiente consistente e cortado. Inicie dot div, então, exatamente quando a bactéria, ou seja, é aí que o estilo aconteceria. Copie o recipiente do cartão. E então vamos encerrar todo o aplicativo com o contêiner do cartão. Abra a etiqueta e, em seguida, cole, feche a etiqueta. Esses destaques, esse cara, mude para cá. É tão simples quanto isso. O que temos que fazer agora é limpar isso por dentro, vamos exibir o pôster. Ok, então o que eu vou fazer é IMG, SRC, equa. Deixe-me mostrar o link para a imagem do pôster. Aqui está o destaque e o texto. Venha aqui, cole mais de perto com uma etiqueta de fechamento automático. E dentro da tag, vamos fazer as configurações necessárias, como probabilidades, estimativas e chances de ser um pôster de filme. Portanto, se a imagem não for exibida, essa será a alternativa. Então, aqui, vamos especificar o onclick. Clique no pôster. Queremos ser redirecionados para o componente play movie, onde começaremos a reproduzir o filme correspondente. Então, o que eu vou fazer agora é assim e depois vou fazer Navigate Slash Player. Vamos testá-lo. Salve no navegador. Clique em. Linda. Tudo está funcionando perfeitamente bem. Ok, ótimo. Então, antes de prosseguirmos, quero que façamos algo muito, muito rápido aqui. Porque você tem que entender essas coisas bem o suficiente. Venha aqui, vamos aplicar o estilo ao recipiente cortado, uma largura máxima de 30 pixels. Então eu quero te mostrar uma coisa. Vamos dar a ele uma cor de fundo. Vamos torná-lo vermelho. Se eu começar, então eu só quero ir embora. A largura máxima segura no navegador, você pode ver que o contêiner cortado está realmente cobrindo todos os lugares aqui? Você vê que isso é exatamente o que eu queria te mostrar. Agora, depois de fazer isso, vamos continuar. Vamos configurar o Hoover para esse contêiner de cartões. Então, quando o usuário passa o mouse sobre o recipiente do cartão ou o pôster do filme, para ser mais preciso, queremos que ele mostre o trailer e algumas das informações. Então, deixe-me te mostrar aqui. O que vamos fazer agora é assim. Vamos fazer nosso mouse enter. O que vamos fazer é atualizar o estado inicial. O estado inicial aqui é falso. Portanto, temos que chamar a função de configuração para atualizar o estado inicial. E, claro, é exatamente assim que se faz isso e, em seguida, defina-o como falso. Agora, o que vou fazer é implementá-lo logo após o fechamento da tag IMG. Vamos fazer se Hoover for um quadrúpede e queremos mostrar informações do IVA, caso contrário, não faremos nada. Então, aqui, se a ANOVA for verdadeira, basta copiar essa tag IMG novamente, destacá-la, copiá-la e colá-la aqui. Certifique-se de formatar o código para que pareça um pouco limpo. Então, por exemplo, eu só tenho que salvar, voltar ao navegador, necessidades. Nada acontece. É simplesmente porque ao inserir o mouse, precisamos atualizar os estados iniciais para serem verdadeiros e não falsos. Tão bom, assim. Ok, então quando o usuário coloca o mouse no pôster do filme, precisamos atualizar o estado inicial para verdadeiro. E então aqui estamos chamando a função de configuração, estamos prontos para atualizar o estado inicial, que é falso. Vamos atualizá-lo para verdadeiro. E então o efeito de passar o mouse, que é essa imagem, aparecerá. Novamente. Feito isso, vamos fazer o máximo possível para que, quando eles usarem, eu removi o mouse, as folhas do mouse adquiram. Também precisamos atualizar o estado inicial para forçar a quase saída. Então copie tudo aqui e cole como atualizado para falso. Então, tendo feito isso, vamos dar uma olhada. Quando você passa o mouse, você vê esse cara aqui, e quando você tira o mouse, ele desaparece, quase Enter, você vê o efeito de passar o mouse quase saindo, ele volta ao normal. Além disso, ao passar o mouse, queremos garantir o trailer do filme correspondente da massa. Então, aqui vamos fazer um vídeo e depois jogar um GS. Destaca a cópia do vídeo que vem aqui após a tag de encerramento do IMG. Colado aqui mostra um erro e não sei por quê. Ok, não se preocupe, isso é simplesmente porque temos que embrulhá-lo em um contêiner principal. Então, o que eu vou fazer agora, certo, não seria passar o mouse aqui. Vamos fazer div, dar a ele um nome de classe de Hoover, certo? Dentro desse div, teremos outro div com o nome da classe image, dash, video, dash, Wrapper. Copie tudo aqui das linhas 2092, linhas 36, cortes. É melhor que o div com o nome da classe de imagem, vídeo ou APA não formate o código, salve o aplicativo e volte para o navegador. Hoover novamente. Agora, tudo está funcionando conforme o esperado, mas não estilizamos esse componente, então não espere que ele pareça limpo e bonito. Por enquanto. Embora não esteja parecendo feio. As câmeras são desligadas e tudo funciona perfeitamente bem. Eu falei demais novamente. Então, logo após o fechamento da div do cluster name image video wrapper, teremos outro div com o nome da classe do contêiner de informações. Em um contêiner Dodge cheio, certo? Não seria o contêiner de informações, teremos vários ícones que serão exibidos quando o cartão for Harvard. Então, aqui vamos ter uma etiqueta de história e essa história logo em seguida, vou fazer um aviso vermelho porque também queremos exibir o título do filme, dar a ele um nome de classe. Também vamos chamá-lo de nome de filme. Ao clicar no nome do filme, queremos navegar até a reprodução do nosso componente, onde o filme correspondente será reproduzido. Aqui, especifique o OnClick. Então, logo após a tag de encerramento da história, teremos outra div. E essa div conterá todos os ícones que serão usados. Então, vou chamar isso de div icons rights dentro do div do cluster de ícones. Vamos ter outro div, dê a ele um nome de classe de controles. Porque teremos vários ícones de controles lá. Agora vamos renderizar o primeiro ícone. Vou colocar um kosher. Feche-o com a etiqueta de fechamento automático diretamente dentro. Dê também um título de jogo ao clicar neste ícone Queremos ser redirecionados para a empresa de reprodutores de filmes. Logo após o fechamento da loja de futebol Audio Play, teremos outra. Roi bate, dá vontade de fugir. E vou dar a ela um título de luz, destaques, duplicá-la. E então aqui estarão nossos itens no campo. E isso vai ser antipatia. O usuário pode editar, curtir ou não gostar do filme. Outro. Aqui, faremos com que o BS cheque para renomear e remover da lista. Descrevi os enredos, dê um título para adicionar à minha lista. Então, tendo feito isso logo após o fechamento da div dos controles de nome da classe, teremos outro div com o nome da classe close it down. Vamos dar a ele um nome de classe. Informações. Bh, eu tenho um resumo. Dê a ele um título com mais informações. Aproxime-se da tag de fechamento automático logo após a div de fechamento dos ícones do nome da classe como este, essa div aqui que termina nas linhas 54. Teremos outro div com o nome da classe de janeiro. Então, vamos fazer com que o filme seja generoso. Aqui. Queremos exibi-los com uma lista não ordenada. Dentro. Você vai ter uma etiqueta LI. Então, aqui eu vou agir. Então você pode, simplesmente, porque isso vai acontecer de forma dinâmica. Então, podemos simplesmente ter essas coisas aqui desse jeito. Quando você salva o aplicativo. Vamos conferir o que temos no navegador. Ok, vamos aspirar. Você pode ver todas as paradas aqui? Tequila, jogue, desgoste, acrescente e remova. Temos muitas paradas por aqui. Tudo bem, então isso é o que temos por enquanto. Eu entendo profundamente que não está bonito, mas posso garantir que também não está feio. Então não se preocupe. Na próxima palestra, começaremos a estilizar essa empresa. 91. 89 css de cartão: Tudo bem, pessoal, então vamos estilizar rapidamente o componente do cartão. Volte para o código VS, role para baixo. E aqui vamos remover esse comentário. Então, vamos dar a ele uma largura máxima de 230 pixels. Quando você salva e finaliza a compra no navegador e nos IDs. Agora você pode ver que a imagem está bem maior, mas não se preocupe, vamos corrigir isso. E depois a largura em si, que as imagens lhe dão uma altura de 100 por cento. O cursor será um ponteiro. Vamos fazer com que sua posição seja relativa. Agora, queremos atingir o IMG diretamente. Então eu vou fazer IMG. Vamos dar a ele um raio de borda, 0,2 ram. Meu Deus, esse cara continua, não sei por quê. A largura 100%, a altura, 100 por cento. Índice Z. Vamos fazer dez. Ao salvar, dê uma olhada no navegador verá que fica bem assim. Na verdade, o pôster é muito pequeno, mas está bem. Não há problema. Vamos continuar. Agora. Vamos começar a trabalhar com o mouse. Então, em Hoover, DOD, Hoover. E o usuário joga com o mouse no pôster do filme assim. Você pode ver que todas essas pombas não estão alinhadas, então temos que colocar tudo no lugar para que fique bem. Primeiro, teremos o índice z. Nove benignos. Vamos dar a ele uma altura máxima de conteúdo. A largura será de 20 jantes. A posição é absoluta. Mas agora não queremos colocá-lo diretamente em cima. Deixe-me mostrar, salve o aplicativo. Volte para o navegador. Quando você passa o mouse, você pode ver? Você vê? Portanto, não queremos colocá-lo diretamente em cima dele. Então, queríamos relaxar um pouco. Então, eu vou fazer do topo -18 V H da esquerda vai ser Zara. Forneça o raio da borda de 0,2. Rem. Novamente, olhem esses caras, me desculpe por isso. Dê a borda que vamos fazer Joe point 1RM, cinza sólido. E é claro que a RAM deve ser o valor, a cor de fundo, vou fazer 181818, Transition, 0.3 s. Então, quando você finaliza a compra, o navegador passa o mouse sobre ele. Deixe-me mostrar, você pode ver que está gradualmente tomando forma. Você pode não perceber por enquanto, porque tudo está escuro. Mas eu posso te garantir. Ok, vamos prosseguir. Para os pontos do invólucro de vídeo da imagem. Deixe-me te mostrar aqui. Imagens duram. Onde você está aqui? É destacar, copiar, dotar, emitir um invólucro de vídeo e, em seguida, deixar sua posição relativa. A altura é de 140 pixels. E para os direitos da tag IMG dentro do contêiner de imagem e vídeo, vamos dar a ele uma largura de 100 por cento. As alturas de 150 pixels. O objeto se encaixa na capa. Faixa de 0,3 do raio de borda. De cima para baixo, Zara. O índice z será quatro aqui. Então, vamos fazer com que ele posicione os absolutos. Ok, para o vídeo, certo, dentro do Hoover. Novamente, para o vídeo, ele terá exatamente as mesmas dimensões, então eu só preciso copiá-lo e colá-lo aqui. Salvar. Agora vamos tirar o navegador. Dê uma olhada. Você pode ver que está gradualmente tomando forma. De novo. Vamos finalizar isso. Para o contêiner de informações em um contêiner de quatro traços. Deixe-me ver daqui de cima, o que temos em estadias em recipientes de alimentos, precisa ser gramaticalmente exercido aqui. Porque se você digitar incorretamente os nomes das classes, você vai estragar as coisas sozinho. Então, vamos fazer com que ele exiba coluna de direção flexível e flexível. Tão bom quanto o acolchoamento de um rem. Vamos dar uma lacuna de 0,5 rem. Salve no navegador, Hoover nele. Agora você vê como tudo está surgindo gradualmente. Para os ícones, pontos, vamos ver qual é o agrupamento dos ícones. Também há ícones aqui. Não ria de mim. Só estou tentando ser exato aqui para não ter problemas. Agora vamos fazer com que ele exiba de forma flexível, justifique o espaço entre o conteúdo. Vamos estilizar o SVG para que a cor apareça bem. Svg. Primeiro, quero dar uma cor. Então, a cor do SVG será, vamos fazer com que seja assim. Sete. Confira. Ah, sim. Você pode ver agora? Vamos acabar com isso. Vamos dar a ele uma borda de 0,100 REM, raio de borda branca sólida. Queremos sua subclasse, então vou fazer 50 por cento do tamanho da fonte. Caso é uma transição de ponteiro. Terá 0,3 s de saída ou facilidade de entrada e saída. Então, para dizer, você entendeu, salve e veja o que temos. Kim, você pode ver? Ok, então podemos realmente mudar a cor do SVG para branco. Eu acho que vai ser mais melhor. Sim, ele está melhor assim. Então, vamos fazer a ANOVA. Quando você passa o mouse sobre o SVG, a cor será essa. Vamos experimentá-lo. Pegue isso. Você pode ver? Está bem, como se isso fosse bom. Portanto, se você observar com atenção, perceberá que não há espaço entre os ícones SVG. Então, o que eu vou fazer é escrever “traga os ícones aqui”. Temos outra estilização, o controle, o ponto, os controles. Vamos fazer com que ele exiba a flexibilidade. Então, vamos dar uma lacuna de um rem. Salve o aplicativo. Agora. Veja, eu acho que a diferença de um rem é na verdade demais para isso. Vamos fazer com que seja 0,5 rem. Legal. Isso é bom. Beta-zero. Ok, então antes de prosseguirmos, eu quero te mostrar uma coisa aqui. Você vê esse ícone. Deixe-me compartilhar aqui div com o nome da classe dos ícones. Esta é a div aqui. Isso termina aqui. Então, ele encerra os controles e todo o SVG. Então aqui o que eu vou fazer, esses são os ícones. Ele encerra todo o SVG. Então eu vou cortá-lo daqui, colar aqui para que ele feche e contabilize. Então, logo depois disso, vamos gerar pontos. Vamos fazer com que ele exiba flexionalmente a lista não ordenada. Também faça com que ele exiba flex. A lacuna. Vamos fazer disso um copo de vinho. O padrão aliado, certo, será 0,7 rem. Então eu vou fazer aqui no Fest of type. Vamos fazer pelo menos o tipo inicial igual a nulo. Então, queremos remover os pontos e todas as paradas. Portanto, o estilo e o tipo da lista serão conhecidos quando você salvar o navegador. Ok pessoal, parece que todas essas cidades não estão afetando os generosos. Então, vamos ver algo no topo. Isso é janeiro. Você vê? É exatamente por isso que eu continuo verificando , porque às vezes pode estar errado. Então, vamos tornar isso generoso assim. Sim, Save. Agora tudo vai funcionar bem. Vamos dar uma cor aqui. A cor vai ser ampla. Salvar. De novo. Agora você vê que ficamos com o título. Então, deixe-me mostrar onde temos esse título. O canto superior direito aqui é ele. Agora? O nome da turma está chegando. Então, vou copiar diretamente no contêiner de informações. Vamos ver o contêiner de informações, onde você, aqui, está o contêiner de informações. E então vamos fazer o nome do filme Dada. Vamos dar a ele uma cor branca para que você possa decidir estilizá-lo, se desejar, e como quiser ao passar o mouse. Você pode ver? Agora, tudo funciona perfeitamente, conforme o esperado. Dê uma olhada. Quando você clica no título, você é levado até aqui. Ok. Então pessoal, uma coisa que eu não gosto é que não há espaço entre a placa e esse outro componente. Então, o que vou fazer agora é especificar uma margem superior aqui. E vamos transformá-lo em um quarto. Você pode ver agora que temos um espaço entre os incautos. Quando começarmos a implementar os filmes, tudo ficará bem. Mas, por enquanto, vamos dar uma olhada no cartão novamente. Ok, outra coisa que notei aqui é que quando você passa o mouse sobre ela, você pode ver que ela desce. Esse não é o resultado esperado. Sim, deve ir até o topo. E eu acho que isso vai corrigir que o topo deveria ser -18 VH. Eu sei que a maioria de vocês pode não ter problemas aqui porque eu pronunciei que era 18 v aqui, mas tipograficamente, eu pulei a sebe. Então, salve no navegador. Tudo está funcionando bem conforme o esperado. É incrível, eu adoro isso. Então, isso é tudo por enquanto. Nos vemos na próxima palestra. 92. Chave de 90 api: Bem-vindos de volta a todos. Nesta palestra, vamos começar a trabalhar com a API. E a API que vamos usar neste curso é a API do banco de dados de filmes. Então, rapidamente, desenvolva como pontos, os filmes db.org. E então, aqui na introdução, aumente o zoom e deixe-me mostrar para você. Você precisa clicar no link da API. Clique. E então, quando você fizer isso, uma nova guia será aberta. No canto superior direito da tela, você verá o CMDB conjunto. Ok, então clique para entrar aqui. O que você vai fazer é digitar suas credenciais. Então, meu nome de usuário será uma barra de ferramentas. Minha senha, é claro, não vou te dizer qual é, então você pode fazer suas próprias coisas do seu jeito. Certifique-se de que sua senha esteja correta. Meu e-mail, eu vou fazer. Ok, vamos fazer ahaystack@gmail.com. Então eu vou me inscrever. Agora mesmo. Um e-mail de confirmação foi enviado para mim. Então, o que eu vou fazer é abrir minha conta do Gmail. E então aqui está. Preciso clicar neste botão aqui para ativar minha conta. E pronto, depois de fazer isso, você pode digitar seu nome de usuário e sua senha. Você pode voltar aqui, deixe-me mostrar e digitar sua senha. Eles são todos a mesma coisa. Vou salvar a conta e tudo mais. Feche isso, feche isso. E agora você será redirecionado para a página do seu perfil. O que você vai fazer a seguir é entrar aqui dentro deste ícone de desconexão no canto superior direito da tela. Clique para alternar a navegação e, em seguida, clique em configurações. Estamos nas configurações, você só precisa acessar a API. E aqui na parte superior, clique em Criar. E diz que tipo de API você deseja registrar , desenvolvedor ou profissional. Eu só tenho que me desenvolver aqui. E depois disso, você deve ler todos esses termos e condições. Faça isso se quiser. Independentemente do fato de eu não ter lido os termos e condições, ainda tenho que aceitar. Ok. Ótimo. O nome do aplicativo será projeto Netflix. O URL. O que vamos fazer agora é copiar e colar meu URL do YouTube aqui. Porque, por enquanto, suponha que você não tenha um site. Eu só tenho que ir ao YouTube. E então aqui está minha página do YouTube como esta. Copie o URL. Você pode copiar qualquer URL de sua escolha. Eu não acho que isso importe. Cole aqui mesmo. O resumo da inscrição que vou fazer. Este é um exemplo de sites de filmes que você pode decidir escrever. O teste acabou. I Primeiro nome e sobrenome. Seu X, k. Meu e-mail já está aqui. Meu número de telefone. Eu só tenho que fazer algo como esta cláusula, 23581400, ou 3755. E, a propósito, esse é meu número de telefone real. Que eu não vejo isso de jeito nenhum. Para o endereço, vamos apenas fazer um endereço temporário e temporário, destacar, copiar, vir aqui, colar, todas essas coisas. Isso realmente importa? Ok? A cidade, eu vou fazer Delta State, ok, Desculpe, a cidade vai ser, vamos fazer, vamos fazer isso aqui. Aqui eu vou fazer fitas deltas e o código postal. O que novamente é o código postal? Acho que são 32 zeros. Existem? Estou correto? Então você só precisa preencher seu endereço com seus dados aqui e clicar no botão Enviar. Maravilhoso. Então, aqui temos a chave da API. Deixe-me mostrar que essa é a chave da API e deixe-me mostrar outra coisa aqui que você deve observar. Eu quero ampliar um pouco. Como se esse fosse o URL base. Então, ao acessar esse URL base, você precisa segmentar o conteúdo real que deseja fagear, neste caso, o filme, a barra, o que quer que seja, o que for. E então eles colocam a chave da API e fazem isso. Portanto, é exatamente assim que você usará sua chave de API. Você especifica nosso URL base, destino, o que quiser, neste caso, filme, e faz algo assim. Então, aqui você escreve essa consulta para especificar a chave da API, e a chave da API é igual d. Então, neste caso, minha chave de API é essa. Sim, do seu lado, sua chave de API será diferente. Portanto, por favor, não copie minha chave de API porque ela não funcionará para você. Sim, então tudo o que você tem como chave de API é o que você deve usar do seu lado. Então, vamos adicionar rapidamente o código VS e configurá-lo corretamente. Código Vs. Então, aqui você tem que abrir os utilitários, clique com o botão direito do mouse em Novo arquivo. E vamos criar o arquivo chamado constantes, pontos, os Jays estavam na constante G é, vamos configurar a URL base e a chave da API. Então, o que eu vou fazer é um spot const. Minha API de sublinhado, a chave de sublinhado, será igual a, deixe-me mostrar, abrir as aspas duplas e os direitos dentro das aspas duplas. Volte. Certifique-se de destacar esse cara aqui, certo? Clique em Copiar. Então, essa é minha chave de API. Por favor, novamente, certifique-se de copiar e colar sua própria chave de API ou de vir aqui e colá-la entre aspas, assim. Ok, então sempre que quisermos usar minha chave de API, não precisamos chamá-la assim, ok? Então, só precisamos chamar minha chave de API e ela recuperará qualquer chave de API aqui. Vou fazer um spot const, sublinhado do CMDB, URL sublinhado. Então, esse será o URL base do T MDB. Além disso. Vamos copiá-lo e colá-lo diretamente entre aspas duplas. Volte aqui. Eu mostrei isso mais cedo a partir do HTTPS, seja o que for, seja o que for aqui. Dois cortam três. Por favor, dê uma olhada no que eu destaquei, por favor. Chris fez aqui assim. Novamente, terminamos de configurar a API. Na próxima palestra, instalaremos kits de ferramentas para escritores e também configuraremos. Há um kit de ferramentas de dose para poder buscar dados. Nos vemos na próxima palestra. 93. 91 Kit de ferramentas de Redux: Nesta palestra, continuaremos configurando o redox para abrir o VS Code, Control C para interromper o servidor atualmente em execução. Então, a primeira coisa que vamos fazer é instalar a chave redox de duas chaves. Aqui está o comando de instalação. Copie os destaques, venha aqui e cole. Este comando está dentro do código hidrelétrica. Pressione a tecla Enter para que ele seja acionado. Don instalado. Bem sucedido. Vamos dar uma olhada. Abra o arquivo package.json. E aqui está. Feche isso. Agora, estamos na loja. Clique com o botão direito em Novo arquivo. Vamos criar o ponto de índice g é. E aqui está que Lee está pronto para montar peças voltaicas. Então, primeiro temos que importar e configurar a vírgula estrela criar uma sincronização de fontes. vírgula cria mentiras em que todas elas serão importadas de leitores de at para digitá-las. Então, tendo feito isso, vamos declarar o estado inicial. O estado inicial é igual a, defina-o como um objeto vazio. Quando for o objeto, faremos com que a entrada dos filmes seja uma vírgula de matriz vazia, o estado inicial da carga mais próxima. Vai ser uma vírgula falsa. Depois, o generoso. Será uma matriz vazia. Então, nesse caso, o generoso são simplesmente as categorias do filme. E, claro, você sabe que um filme pode pertencer a três ou quatro categorias diferentes. Então, isso é pelo menos o que estamos tentando fazer. Queremos afetar os filmes por meio de categorias. Não se preocupe. Quando começarmos a afetar os filmes, você definitivamente entenderá tudo o que estamos fazendo aqui, mas saiba que o estado inicial dos filmes é uma matriz vazia, o estado inicial da carga generosa é falso e o estado inicial dos generais também é uma área vazia. Simplificando, se o gerador não estiver carregado, não queremos buscar um filme tão simples quanto isso. E é por isso que nós realmente levantamos essa bandeira aqui. Então, se o generoso for falso, nenhum filme será buscado. A única vez que vamos buscar um filme é quando buscamos os generosos. E ao buscar os jantares, poderemos localizar os filmes que pertencem a esses generais em particular. Acho que você definitivamente entenderá isso bem o suficiente à medida que seguirmos em frente. Aqui, eu vou fazer const, Netflix Slice. Então, estamos criando os slides aqui. Netflix divide o mesmo, cria slides, abre e fecha parênteses, abre e fecha colchetes. E entre colchetes, teremos o nome Netflix, karma, o estado inicial. E então temos que usar os redutores extras. E depois passar o Buda, o Buda para um objeto vazio. Voltaremos a isso em um G, se você ainda não fez isso. Por fim, temos que exportar, const, armazenar, o CWA, configurar a loja. Todos esses dados serão armazenados aqui. E aqui teremos um redutor, o redutor fatias da Netflix. Bom. Feito isso, o próximo passo é encerrar todo o aplicativo com o provedor. Então, o que estamos tentando fazer é fornecer a todo o aplicativo tudo o que temos na loja. Certo? Estamos no SRC. Deixe-me te mostrar como RC. Há um index.js aqui. Isso é conhecido como o index.js de nível superior. Então, aqui é onde todo o nosso aplicativo será visto. Sim, então o que vamos fazer é fornecer a loja ao nosso aplicativo que tudo o que fizermos aqui, possamos transmiti-lo a qualquer outro outono deste projeto , seja tão simples quanto isso. Ensino, bom, lindo. Feche isso. Volte para os direitos do index.js no SRC. Então, aqui vamos importar, vamos importar o provedor do React redox. E, novamente, vamos importar a estrela. É esportivo, então temos que embrulhá-lo em colchetes da loja Dot Slash. Feito isso, vamos encerrar toda a obrigação do provedor. Então aqui vamos ver a barraca, a barraca equa, a loja aqui. Em seguida, destaques recortados e colados na aula de aplicação para formatar o código. Salve o projeto. Venha aqui, salve. Certo, estamos no terminal. Temos que iniciar o aplicativo. Então, vamos ver se há algum problema aqui. Temos que esperar um pouco. Bom, com certeza, sem problemas. Odds Command I para abrir o console. E aqui você verá que não há problemas, certo? Dentro do console. Você pode ver que tudo está funcionando? Isso é bom. Ok , terminamos com a configuração e instalação do kit de ferramentas redox. E na próxima palestra, começaremos a buscar dados do endpoint da API CMDB. Isso é tudo por enquanto. Certifique-se de fazer perguntas se estiver confuso. Nos vemos na próxima palestra. 94. 92 gêneros de engate: Nesta palestra, vamos afetar os generais de filmes da API CMDB. Portanto, certifique-se de colocar o cinto de segurança, tomar seu café ao seu lado e vamos começar. Logo quando estiver no index.js, deixe-me garantir que é bom. Nós fechamos ou não. Esse cara, terminamos com isso diretamente no índice de parada dot js. Deixe-me diminuir um pouco o zoom. Então, a primeira coisa que vamos fazer aqui é instalar o ox, usar o Controle C para parar o servidor atualmente em execução. E eu vou fazer o node package manager install ox use. A instalação está em andamento. Chegue ao topo. Também precisamos importar minha chave de API de sublinhado das constantes de barra da UT. Precisamos usar o URL base. Esse URL, tudo isso que expliquei na palestra anterior quando criamos nossa conta para o sucesso da instalação axial TM dB para o próximo da fila, é para buscar os generosos. Então, logo abaixo dos estados iniciais, vou fazer aqui. Vou exportar, const, generalizar, ser generoso, igualar, criar um think tank. Abra e feche parênteses. Aqui mesmo. Vou usar a vírgula generosa para cortar a vírgula da Netflix. Então, temos que usar a função assíncrona um coletor. E, claro, isso retornará uma promessa. Então, aqui vamos esperar. Vamos fazer nosso ponto axial de peso. Então, o que vamos conseguir? Vamos fazer com que o filme seja generoso. E para fazer isso, primeiro, precisamos clicar no URL base e depois na barra, lista de barras do filme e, em seguida, especificar a chave da API. Deixe-me mostrar rapidamente o bug D, cifrão, abrindo e fechando colchetes. E eu vou fazer CMDB BaseUrl fora da barra de colchetes, barra geral e lista de barras do filme. E então teremos uma consulta aqui que será usada para atribuir a API. Então, eu vou fazer a chave de sublinhado da API , ou seja, qualquer que seja a chave da API. E vou fazer com que minha chave de API seja tão simples quanto isso. E tudo isso, vamos atribuí-lo a uma variável. Vou fazer const, const data, defini-lo como muito generoso e depois atribuí-lo assim. É tão simples quanto isso. Você pode ver? Bom. Ok, então agora vamos voltar generosos. É tão simples quanto isso. Vamos adicioná-lo aos redutores extras. Então, depois de fazer isso, vá para o reduziu-nos extra para adicionar as chaves. Role para baixo. Aqui, está certo? Estamos no Builder. Vamos fazer pontos de Buda, adicionar chaves. Vamos adicionar jantares. Ponto preenchido, mais calmo, o estado e a ação. Abra e feche colchetes, certo, para colocar, vamos fazer generais de pontos estaduais, que é igual à carga útil de pontos do leilão. A carga útil serão os dados reais. E aqui vou fazer o estado de degeneração. Temos que tornar isso realidade porque agora estamos preparando o jantar. Então, eu estou tendo feito isso, vamos tentar o log do console. O generoso registro de pontos do console. Generoso, assim. Com isso, abra a página da Netflix. E no topo, temos que importar insumos. Você usa o despacho para que algo aconteça. Temos que enviar uma ação. Não se preocupe, vamos fazer isso para que eu possa te mostrar o que quero dizer com isso. As importações usam essa passagem do React redox. Então, aqui eu vou fazer const, dispatch equa, usar esse patch, certo? Não usaria efeitos. Temos que despachar a ação, rolar até o topo e menos entradas. Eles usam efeitos em uma banheira. Efeito do gancho React. E temos que invocá-lo. E, claro, você sabe que eles usam o efeito como parâmetro. Uma é a função e a outra é a dependência r0 vírgula, a dependência aqui, por dentro, que vamos despachar. Que ação temos que enviar aqui? Queremos enviar esse cara para cá, que é o que é gerado. Então é isso que ele seria capaz de buscar os dados. Então vá para Netflix dot js e nós vamos despachar. Seja generoso. É claro que jantar é um evento. E, por favor, certifique-se de importá-lo na parte superior, assim. Então, depois de fazer isso, volte para o terminal. Vamos iniciar o aplicativo mais uma vez. Veja o que temos no console. Esperemos que tudo fique bem. Diz que os axiomas não estão definidos. Nossos caras certos retornam ao index.js. No topo, temos duas entradas. Atos usados a partir do eixo, assim, salvam o aplicativo novamente e, desta vez, vamos fazê-lo funcionar. Mas Comando I para abrir o console. E logo dentro do console, você já vê uma área ali. Abra a área. E temos o filme generoso. Aqui você tem ação, aventura, animação, comédia, drama documental, família, fantasia e muito mais. Então pessoal, isso é extremamente fantástico e eu adoro isso. Agora, conseguimos fazer com que o filme fosse generoso. Isso não é lindo? Oi. Portanto, na próxima palestra, procederemos à adaptação dos filmes em si com base nos generais do cinema. Então, temos que ajustar filmes com base em cada categoria, é tão simples quanto isso. Nos vemos na próxima palestra. 95. 93 Filmes,: Bem-vindos de volta a todos. Na palestra anterior, pudemos buscar os jantares de cinema no endpoint da API TM DB. E eles são esses aqui. Então, nesta palestra, vamos buscar os filmes do endpoint da API. Vá rapidamente para o VS Code e prossiga menos. Antes de irmos buscar os filmes. Há algumas condições de configuração que devemos ter em mente. E, de fato, temos que declarar essas condições. Portanto, não queremos apenas encaixar todos os tipos de filmes. O único tipo de filme que queremos que seja o filme com o caminho de fundo, que envolve os filmes com a imagem do pôster. Portanto, se o filme não tiver uma imagem de pôster, não queremos encaixar esse filme também. Antes de podermos encaixar qualquer filme, precisamos garantir que os gêneros de filmes estejam disponíveis. Portanto, se os gêneros do filme não estiverem carregados, não queremos encaixar esse filme. Sim, então vamos implementá-lo rapidamente com código. Antes de prosseguirmos, acho que precisamos colocar um comentário nesse log do console para que ele não perturbe. Oh, lindo. Agora o console está vazio. Venha aqui. Portanto, teremos uma matriz constante de dados do filme igual. Agora, aqui vamos pegar alguns parâmetros: matriz vírgula, vírgula. Generoso. Defina-o para uma função de seta. Ok, tudo bem. Então, vamos, para cada um, o filme aqui, ponto RA para cada um. Agora vamos ter uma área de cinema aqui. Consiste em uma matriz de filmes. Defina-o como uma matriz vazia como esta. Agora, ponto de filme, IDs gerais de sublinhado, pontos para cada um. Então, aqui vamos considerar, em geral, novamente, configurá-lo para uma função de seta. Abra, feche, colchete, constante, nome é igual a pontos generosos. Então, o que estamos fazendo aqui é procurar os generosos com sua identidade. Então, se o generoso existe, temos que extrair o nome do general e, em seguida , colocá-lo em nossa matriz é tão simples quanto isso. Abra e feche parênteses e, dentro dos parênteses, abra e feche colchetes, pegando o ID e depois fora do id dos parênteses, faremos id igual. E então aqui temos que escrever a condição. Se. Então, quando encontramos o generoso por ID, tudo o que precisamos fazer é extrair o nome e inserir o nome na matriz desses filmes. Então, eu quero mudar o nome dessa matriz de filmes para algo mais legível. E eu vou fazer filmes em geral. Acho que isso será mais legível. Filmes de janeiro, algo assim. Então, se acharmos o jantar também, temos que mover seus generais, empurrar pontos. Temos que colocá-los na matriz. E eu vou fazer nome, pontos, nome. É tão simples quanto isso. Feito isso, o próximo passo é verificar se o filme tem um caminho de fundo, ou seja , se o filme tem um pôster ou imagem de filme. Então, vamos ter a condição aqui. Se houver caminhos de fundo de pontos de filme, sublinhe o caminho. Se o filme com caminho de fundo existe, então temos que colocá-lo na matriz de filmes que passamos aqui. Todos esses fogões são autoexplicativos. Minha explicação é bem simples, então você definitivamente obterá os Gs. Então eu vou fazer o filme Array Dot Bush. Então, o que estamos pressionando exatamente? Precisamos do documento de identidade. Vou fazer identificação de pontos de filme separada por uma vírgula. Meu Deus, essa inteligência aqui está realmente bloqueando essas coisas. Agora se foi. Nós temos o nome, então temos que extrair o nome do filme. E vamos fazer o filme. Onde o nome original, o nome do sublinhado original do ponto do filme. E então eu vou fazer isso. Se o nome do filme existir , teremos que obter o nome do filme e os L, obteremos o título original do filme dot. Portanto, temos que obter o título do filme se o nome do filme não existir, porque o título do filme é a mesma coisa que o nome do filme. Então, às vezes, talvez o administrador possa usar o título para salvar o filme ou usar o nome, algo parecido. E é por isso que estamos tendo essa condição aqui. Portanto, a próxima linha do termo é obter a imagem. A imagem que vou fazer, pontos do filme, caminho de fundo. E por último, para os generais, vamos fazer filmes, general. Slides de pontos. Então, o que queremos fazer agora é realmente cortar os generais. Deixe-me explicar o que quero dizer com isso. Por exemplo, todos vocês sabem que um filme pode ter vários generosos, sim. Então, em um filme pode pertencer, digamos, a ação de aventura, você sabe, coisas assim. Então, se o filme tiver menos, suponha que dez jantares, queremos buscar apenas três jantares. Então, se um filme pertence a cinco a seis generosos, só precisamos de três dos generosos. Então, eu vou fazer zero slash three. Isso é simples como a, B, C. Então aqui temos que verificar se eu fiz algo bom, ok, tudo bem. Quando executamos o aplicativo, queremos perceber se há algum erro de valor. Agora terminamos de configurar a primeira condição. A segunda condição é simples no banco de dados da equipe, posso garantir que temos milhares de filmes por lá. Mas agora queremos buscar apenas os filmes. Sim, então não queremos que 90 filmes sejam 100 ou mais, precisamos de apenas 80 filmes. Portanto, também temos que definir as condições para isso. Aqui eu vou fazer const, obter dados do filme e configurá-los para uma função sinc. E então, dentro da função, vamos usar uma vírgula de API, coma geral, paginação. E então vamos definir a paginação como falsa. Não se preocupe, você obterá o G com clareza suficiente. Da última vez que o código estiver aqui, vou fazer const movie array, equa, configurá-lo para uma matriz vazia como esta. Então, essa área do filme aqui que passamos como direitos de parâmetro dentro da matriz de dados do filme. Agora você está entendendo. Então, vamos percorrer os filmes para buscar apenas 80 filmes que eu vou fazer. Pois seja igual a um. O ponto e vírgula termina. Em seguida, tamanho dos pontos da matriz do filme. Então, se o comprimento dos pontos da matriz do filme for menor que 80, e se I for menor que dez ponto e vírgula incrementaremos i, i mais, mais. A função sinc retornará uma promessa, então teremos que aguardar. Então eu vou fazer um show de pesos usando Odd Gate. Então, o que vamos colocar no verso, API e no cifrão, aqui vamos fazer a página e, por favor , tenha cuidado aqui para não ter problemas. E então, se eles existirem, mostraremos os pagos e não mostraremos nada. Então, o que eu vou fazer para que, se a página igual sair, horas não mostrem nada de preocupação. Vou explicar cada linha de código. Vamos apenas digitar o código e o ROE do filme. Então, teremos seus resultados. Karma, área de cinema. Mais calmo, generoso. Então, tendo feito isso, vamos retornar a matriz de filmes. Então, por último, temos que ajustar o filme. Agora, a condição foi configurada. Vamos assistir ao filme rapidamente. Vamos exportar essa função porque precisamos enviá-la como um direito de ação na página da Netflix. Então eu vou fazer filmes consistentes, gordos, iguais, criar um funk sincronizado. Certo? Dentro dessa função, vamos usar o Netflix. E aqui vamos atingir a tendência de redução da Netflix , porque também queremos pegar o filme de trem. Então, novamente, vamos usar a função async, async e await. Você já sabe. Aqui vamos abordar esse tipo. Também queremos buscar os filmes por seu tipo. Pode ser uma série, um filme sazonal. Você assiste a um filme ou termina. Então, você sabe, tipos de filmes que auxiliam no coma. E aqui vamos usar a API de tronco como o segundo parâmetro dentro dessa função. Então, isso nos dará acesso aos estados. Então, devido à nossa função, vou fazer aqui uma fatia de Netflix. Então, vamos ter acesso à fatia da Netflix. E a partir daí, obteremos os generais, definiremos como myfunc, api dot gets, getState. Eu lhe disse que isso nos dará acesso ao estado. Dos estados. Poderemos pegar os filmes. É tão simples quanto isso. Não se preocupe, ainda preciso examinar a explicação para que você obtenha dados essenciais suficientes. O Ecua obtém dados do filme, certo? Estamos nesta função dividindo o dinheiro, abrindo e fechando uma chave ondulada. Agora temos que seguir a tendência de barra do URL base do TempDB porque queremos encaixar o filme em trens. Eu te disse mais cedo. Reduza também as tendências. Se estiver na moda e tivermos que entender o cachimbo do filme. Se for uma série, se for um filme sazonal. E também queremos obtê-lo até a semana de corte. Ok, aqui temos que atribuir nossa API, API na chave Bosco, equa, minha chave de API mais uma vírgula aqui. Generoso. E então defina isso como verdadeiro. Então, se o general é baixo, isso é verdade. Só então queremos buscar o filme. Eu não sei o que está errado aqui mais. Ok, vamos ver uma coisa. Aqui temos que fechá-lo com os parênteses. Acho que é só o ar. Ok, então, depois de fazer isso, dê uma olhada. Isso é uma largura. Portanto, temos que atribuí-lo a uma variável. E eu vou fazer dados constantes. E então vamos obter nosso resultado dos dados é o que S novamente, atribuí-lo assim. Salve o aplicativo. E vamos ver. Diz que generoso não é definido por, ok, pessoal, dêem uma olhada. Esse cara deveria ser generoso e você economiza novamente, vamos ver o que diz. Está funcionando perfeitamente bem, mas ainda não temos nada no console. Volte e vamos para a página Within da Netflix. Ok, vamos formatar o código. Vamos obter a indentação adequada. Certo? Depois disso, teremos const, generous loaded equa, use o Selector. Certifique-se de importar o uso select all do React, redox no nebuloso. Eles usam o seletor é uma função e escrevem para executar essa função. Vamos visitar os Estados Unidos. E eu vou fazer state dot, netflix, dot, generous loaded. Então, vamos ter isso nos efeitos dos EUA. Temos que enviar a ação diretamente dentro dos efeitos dos EUA. Acabei de duplicar esse cara aqui. Não tenha medo, certo? Dentro. O que eu vou fazer são realces verdadeiros e parar com isso. Agora. Então, eles simplesmente não gostam de filmes atraentes quando a degeneração está carregada. Então, vamos condicioná-lo aqui. Se os jantares estiverem cheios, queremos enviar o método de busca de filmes como esse e importá-lo na parte superior. Aqui está para buscar filmes na loja, certo? Não seria o método de busca de filmes Vamos interromper todo o tipo de filme que queremos buscar em todos os tipos de filme. Uh-huh. Tudo bem, então, depois de fazer isso, queremos que eles sejam acionados quando o componente for renderizado. Então, o que eu vou fazer é pegar a matriz de dependências porque ela não depende de nada por enquanto para iniciar e salvar o aplicativo. E então temos que voltar ao índice de zombarias. Role para baixo até onde temos o método de busca de filmes. E aqui temos que colocar uma barra assim. Feito isso, também temos que terminá-lo com um ponto e vírgula aqui. E então aqui eu vou fazer console.log. O que queremos ver? Queremos registrar os dados aqui. Então, vou fazer dados, salvar a revogação. Vamos ver se há algo errado novamente, está tudo bem. Volte ao navegador e aqui temos a promessa de gastar. Agora abra essa promessa e veja o resultado aqui. Você pode ver agora que temos 80 filmes, certo? Usar esse IRI está nessa linda. Eu gosto disso. Então, fizemos algo ótimo aqui. Agora, deixe-me expor os detalhes. Ok, aqui temos os geradores de filmes, que são Drama, sim, o ID do filme. É isso aqui com a largura da imagem, neste caso, o caminho do pano de fundo. Aqui está o caminho de fundo. E esse é o nome do filme, The Last of Us. Então é isso que é. Vamos falar da generosidade que você perceberá que o jantar aqui é um só. Sim. Então você terá alguns filmes com mais de um generoso, vamos ver, esse cara aqui. Ele tem três generosos. Pertence à ficção científica, aventura e ação. Então foi isso que fizemos quando condicionamos o número de jantares a serem buscados. Esse cara se tornou muito generoso e assim por diante. Novamente, vamos examinar o código para que você o entenda bem o suficiente. Então, aqui estamos para comer os generais. E nesta linha, estamos tentando definir para cada generoso sua identidade. Sempre que recebermos um jantar com um documento de identidade, teremos que extrair o nome e inseri-lo na variedade generosa do filme. Isso é que Lee foi o que fizemos aqui. E aqui, com a segunda condição, o que fizemos foi verificar se o filme tem um plano de fundo. Nesse caso, deixe-me te mostrar. Esse é o caminho de fundo. Se o filme tem um plano de fundo e então estamos interessados nesse filme. Só esse é o tipo de filme que uma mulher faga. Então, vamos pegar a identificação do filme, que está aqui. O nome ou título do filme, que é esse cara aqui. E também a imagem que é o caminho de fundo aqui. É isso. Feito tudo isso, temos que cortar os generosos porque não queremos colocar mais de três generais em um filme. Então, quando eu economizar, ok, deixe-me mostrar, vamos supor que não queremos acomodar mais do que dois. Quando eu salvo o aplicativo, volto para o navegador diretamente no console. Vamos abrir o generoso para que você possa ver o que quero dizer com isso. Agora, esse filme tem apenas um gênero. E aqui temos dois generais. Você pode ver que agora limitamos, o número de gêneros tem que ser dois. Assim, você pode decidir buscar mais de dois generosos em um filme. Então foi isso que fizemos aqui. E, claro, iniciamos três variáveis. Temos a variável ID, nome, imagem e geral. Então, a ideia armazenará o ID, o nome do filme será armazenado no nome. O caminho do plano de fundo do filme será armazenado na imagem, e assim por diante. Então, aqui, o que estamos fazendo é simples. Dissemos, olha, não queremos buscar um filme acima de 80. E como você pode ver nesta matriz, deixe-me mostrar. Na parte inferior, você verá que o comprimento dessa matriz é 80. Vamos ver se podemos ampliar um pouco. Ok, você pode ver, então não queremos buscar filmes acima de 80. Sim, então foi isso que fizemos aqui. E por último, aqui, o que fizemos foi buscar o filme de acordo com a tendência, a semana da tendência e o tipo do filme. Então, é tão simples quanto isso. Então, tendo feito isso na próxima palestra, continuaremos exibindo os filmes, certo? Estamos na interface do usuário e, claro, será extremamente incrível. Espero que tenha gostado desta palestra e, por favor , faça bem em fazer perguntas se estiver confuso. Eu entendo que essa palestra em particular é bastante complicada, mas se você prestar atenção suficiente, você definitivamente receberá os G's. Nos vemos na próxima palestra. 96. 94 Estado global: Tudo bem, então, na palestra anterior, conseguimos obter os dados do filme. E agora o que vamos fazer é colocá-lo em nosso cenário global para que os componentes do império possam se comunicar com esses dados. Volte para o código VS. E a primeira coisa que vamos fazer, certo, estamos na função de busca de filmes. Primeiro, precisamos remover o log do console. E aqui eu vou voltar, obter dados do filme, simples assim. Então, tendo feito isso, temos que adicioná-lo a essa mancha. Venha aqui, destaque do comprimento 66 ao 69 duplicado. Portanto, temos que nos livrar da carga generosa. Então, aqui vamos chamar a função fetch movies. Se a função de filmes do Fed for cumprida, podemos então retirá-la do estado desta forma. Então, vamos fazer pontos estaduais a partir do estado. Vamos pegar os filmes, depois a ação principal, essa carga útil. Feito isso, poderemos nos comunicar com os dados do filme em qualquer lugar do aplicativo porque eles foram adicionados ao estado. Volte para Netflix dot js. E então aqui eu vou fazer filmes iguais ao seu seletor. Então, eles usam selecioná-los, nos dão acesso aos estados. E, claro, é uma função, certo? Estamos na função. Vamos tomar os estados. Então, aqui vamos fazer filmes State Dot, Netflix Dot, tão simples quanto isso. E agora podemos comunicar quais são os dados. Deixa eu te mostrar. Venha aqui. Vamos apagar todos esses registros do console. Aqui. Eu vou fazer console.log. Vamos gravar filmes para que você possa vê-los. Salve o aplicativo no navegador. Do papai. Você pode ver agora que temos um loop infinito de dados. Você pode ver, vamos tentar abri-lo. Você vê que isso é exatamente o que são portas redox. Portanto, se alguma coisa fosse adicionada a essa data aqui, não conseguiríamos obtê-la em qualquer lugar dentro do aplicativo. Assim como você pode ver aqui. Agora disponibilizamos os dados do filme para consumo. Na próxima palestra, começaremos a consumir os dados. Nos vemos na próxima palestra. 97. 95 Pare o laço infinito: Tudo bem, então antes de prosseguirmos para a próxima aula, temos que fazer algumas configurações aqui. Então, ao observar o console, você perceberá que temos um loop infinito aqui. Ok? Então é nisso que temos que acabar. Você pode ver os dados , ou seja, os filmes estão sendo registrados no console infinitamente. Sim. Então, o que vamos fazer agora, voltar para a página da Netflix aqui, diretamente nas linhas 36. Vou apenas fazer um comentário sobre isso. Seguro, no navegador, do papai, e depois atualize. Portanto, o loop infinito diminuirá a velocidade do seu laptop. Ou seja, essa é a razão pela qual coloquei os comentários no log do console aqui. Agora, sua máquina pode ser um pouco mais rápida do que antes, porque o loop infinito estava, na verdade, diminuindo a velocidade de tudo. Ok, vamos passar para a próxima aula, onde começaremos a exibir os dados diretamente na tela. Até lá. 98. 96 filme de renderização na tela: Bem-vindos de volta a todos. Na palestra anterior, conseguimos obter os filmes da API do CMDB e, em seguida, bloqueamos os filmes no console. Então, nesta palestra, vamos exibir os filmes na tela para que os usuários finais possam interagir com os filmes, seja clicando nos filmes para assistir ou adicionando os filmes que eles gostam de pagar. Então, sem mais delongas, vamos começar. Crie rapidamente um novo componente chamado contêiner deslizante, certo? Quais são os componentes? Clique com o botão direito Novo arquivo. O contêiner mais plano dot g é outro. Além disso, certo, para trazer os componentes que vamos criar. O controle deslizante do filme dot g é o Comando B. Para fechar o explorador. Então eu tenho que excluir o índice de constantes, fechá-lo, fechá-lo. Desculpe, não exclua. Temos que fechar algumas páginas. Agora pronto para trazer o contêiner deslizante, cada FCE para gerar nosso componente funcional e , também, a mesma coisa aqui. Certo? Ok, então abra o Netflix Cheers. Aqui mesmo. Vamos renderizar o contêiner deslizante. Role para baixo exatamente no mesmo local em que colocamos a carta, vamos limpá-la. Então, eu vou fazer um contêiner deslizante aqui para garantir que ele seja importado na parte superior aqui. Depois de fazer isso, outra coisa que precisamos fazer novamente é passar as sondas de filme para o contêiner deslizante. Então eu vou fazer aqui filmes, filmes. Então, vamos voltar ao contêiner deslizante e receber essas sondas. Recipiente Slater. Então, aqui está a desestruturação dos filmes. Feito isso aqui, precisamos importar componentes estilizados, começando dos componentes iniciais abaixo. Também precisamos importar o controle deslizante de filme do controle deslizante de filme. Então, basicamente, o que vamos fazer é selecionar os filmes que queremos exibir em uma fileira. Ok, então, em uma fileira, queremos exibir dez filmes. Então, lembre-se de que buscamos mais de 80 filmes. Sim, então, em cada linha, queremos exibir dez filmes. A maneira de fazer isso é usando o método de slides. Sim, então seria possível selecionar do início ao fim, por exemplo, vamos vendê-lo de 0 a 10, 10 a 20, 20 a 30 e assim por diante. Vamos ter um método chamado get movies between. Então, vamos colocar os filmes entre uma faixa específica. Deixe-me te mostrar. Portanto, esse método tomará início e fim como parâmetro e, em seguida, o definirá como função de erro. Por fim, vamos devolver filmes, que é esse cara aqui que passamos como adereços, filmes, pontos, slides. Ok? Então, o que acontece agora é que vamos entrar nesses filmes em que temos todos os filmes, mais de 80 filmes. Sim. Então, vamos entrar nesses filmes e depois cortá-los do jeito que quisermos. Deixe-me te mostrar. Então, queremos selecioná-lo a partir de estatísticas, vírgulas e, aqui, você também pode fazer e rebocar barcos. Quero deixar assim ou começar e terminar. Então, depois de fazer isso, vamos implementá-lo na interface do usuário para que você entenda isso muito bem. Não precisamos desse DV por aqui. Tudo o que precisamos aqui é de uma barra deslizante. Temos que criar uma classe dela convertendo-a em componentes iniciais. Consiste em uma embalagem deslizante, igual a stout, dots, div e depois no banco de trás. Não seria no banco de trás que começaremos a aplicar essas toalhas. Ok. Então, certo, não seria o invólucro deslizante, nós vamos renderizar o controle deslizante do filme. Mova o controle deslizante assim e feche-o com a etiqueta de fechamento automático. Então, aqui, vamos passar os dados como sondas para o controle deslizante do filme. Então, vou igualar dados, abrir e fechar colchetes. Vamos chamar o método get movies between. Então, queremos obter filmes. 0-10. Sim. E aqui fora eu vou fazer apenas títulos, só na Netflix. Então, o que eu vou fazer é destacar esse cara e depois duplicá-lo seis vezes. Então, agora já estamos cortando os filmes. Agora, aqui nós dividimos o filme e, de 80 filmes, estamos obtendo de 0 a 10, certo para imprimir a primeira linha e a segunda linha, estamos obtendo 10-2020 para 30, 30-4040 para 50 aqui. 50 a 60. 60 a 70. Coisa principal. Isso é tudo. Ok. Sim, buscamos até 80 filmes. Então aqui eu vou fazer 70 a 80, tudo legal. Em seguida, temos que mudar o título. Então, eles aparecerão no topo de cada linha para dar a esse papel um nome descritivo, por exemplo, aqui eu vou fazer tendências em filmes de ação , filmes românticos e assim por diante. Então você entende todos esses tops muito bem. Você tem que fazer isso do seu lado. Aqui eu vou fazer novos lançamentos. Novos lançamentos populares na Netflix. Acho que temos que organizar as coisas de forma ordenada. Vou ligar para esse cara logo na ação, vou colar os destaques da ação, cortá-la e depois colá-la aqui para os novos lançamentos. Ok, vamos deixar como se estivesse tudo bem. Feito isso, vamos prosseguir com os controles deslizantes do filme, onde mapearemos os filmes e os exibiremos no controle deslizante do filme na tela. Então, o que vamos fazer agora, primeiro, vamos desestruturar os dados e o título. Deixe-me mostrar esse título aqui e esses dados. Então, nós apenas os desestruturamos. Nós os passamos para o controle deslizante do filme como sondas. Agora temos que voltar aos controles deslizantes do filme e receber esses adereços no controle deslizante do filme. E depois com os dados estruturados e o título, certo? Não seria esse div, vamos dar a esse div um nome de classe de slider, certo? Dentro da div, vamos mapear os filmes. Agora eu vou fazer dados, que é esse cara aqui que está vindo do contêiner deslizante. E você sabe que esse cara aqui recebeu o método filmes entre e o método get movies between está retornando os filmes. Sim. Ok. Eu sei que você entende todas essas abas. Controle deslizante de filme e, em seguida, vou fazer um mapa de pontos de dados. Vamos analisar o índice de vírgulas do filme. Aqui mesmo. Eu vou voltar, vamos devolver a interface do usuário. Mas, nesse caso, temos que renderizar a empresa do cartão porque queremos mapear os cartões. Então, o que eu vou fazer é cortar assim. E, por favor, certifique-se de importá-lo em uma banheira. Os dados do filme são iguais, vamos atribuir a ele um filme. O índice é igual ao índice. É claro que temos que especificar que a chave será a identificação de pontos do filme, mais próxima da tag de fechamento automático. Quando você salva e finaliza a compra no navegador, a ideia é você pode ver agora Talvez você não a exiba dinamicamente simplesmente porque ainda não fizemos isso. Mas agora, você pode ver que conseguimos mapear as cartas. Ok, vamos exibir os detalhes correspondentes. Volte para o código VS e abra o cartão. G é que estamos no carro, j, temos que desestruturar os dados do filme. Deixe-me te mostrar o filme. O tau aqui está vindo do controle deslizante do filme. E então atribuímos o filme, os dados do filme. Eu sei que você entende todas essas coisas. Então, volte para o cartão. Os Gs não desestruturaram os dados do filme. Temos que exibi-los dinamicamente. Então, aqui temos que deletar tudo assim. Portanto, a fonte dessa imagem virá do CMDB. Especifique o Ártico. Vou fazer HTTPS com dois pontos de barra image.cmdb.org slash d slash p slash w 500. Então, aqui teremos o sinal de $1 e depois abriremos e fecharemos o colchete. E aqui vamos fazer a imagem de pontos do Movie Data. Quando você tiver sete anos, confira o navegador, os IDEs. Você pode ver agora que conseguimos exibir os filmes de forma dinâmica. Eu adoro isso. Isso é interessante. Você vê nosso direito. Mas, se você passar o mouse sobre os filmes, verá os dados estáticos . Você pode ver, como o vermelho, perceber a ação e todas essas coisas. Então, vamos chamá-los dinamicamente. Volte para os componentes da placa e, aqui, passe o mouse, destaque e copie. Venha aqui. Também queremos mostrar a imagem do pôster correspondente, apagá-la e colá-la aqui. Para o vídeo, vamos viver o vídeo porque não temos acesso ao vídeo do CMDB, então só precisamos sair do vídeo agora. O que mais uma vez temos que fazer. Temos que mostrar o título. Então, para exibir o título, temos que limpar isso e, em seguida, pegar os colchetes para nos permitir escrever JavaScript entre os GSAs. Então, o que vou fazer agora é o nome do ponto de dados do filme. Vamos voltar para onde temos o filme generoso. Por aqui. Vamos mapear essa dificuldade agora. Então, o que eu vou fazer é limpar a etiqueta LI por enquanto e depois abrir e fechar colchetes, ponto de dados do filme, ponto, ponto mob. Então, estamos mapeando o que é generoso agora. Então, eu vou pegar em geral, configurá-lo para nossa função, certo? Estamos na função, vamos ter a tag LI novamente, certo? Estamos na etiqueta LI. Temos que exibir o filme de forma generosa, e eu vou fazer um geral, tão simples quanto isso. Vamos salvar e ver no navegador. Em qualquer filme. Você pode ver que esse filme é Babylon. Quando você passa o mouse sobre isso, este é Avatar, o caminho da água. Tudo bem. Você pode ver a última semana? Alguns dos filmes têm apenas um título e alguns também. Tem mais de um título. Então, sim. Então, quando você passa o mouse sobre este filme, Pantera Negra, Wakanda para sempre. Então, as coisas estão começando a tomar forma. Over Andy tem uma roda de remo cheia de água. O último desejo. E tudo isso, tudo está funcionando perfeitamente bem, conforme o esperado. E com certeza estou adorando o resort deles. Então, na próxima aula, vamos estilizar o componente deslizante e alinhar tudo corretamente. Isso é tudo por enquanto. Nos vemos na próxima palestra. Mantenha o foco e sempre tome cuidado. 99. 97 Componente de filme de estilo: Bem-vindos de volta a todos. Na palestra anterior, exibimos os filmes na tela. Você pode ver? Então eu entendo que esse componente não é bonito, mas também não parece feio. Então, nesta palestra, vamos estilizar esse componente e fazer com que ele pareça extremamente bonito. Prossiga para o código VS. E vamos começar. Logo quando o controle deslizante do filme. Primeiro, vamos começar com empresas iniciais. Então, abaixo, vamos fazer const container equa, start dot d. Então, vamos criar rapidamente esse cara na linha superior para destacar das faixas 122, linhas 18, capturadas. Dentro do formato de contêiner, o código é mais bonito. Feito isso, teremos outro div, certo? Para trazer o contêiner div com um nome de classe de wrapper. E novamente destaques das linhas 112, linhas 15, cortes, colados aqui. Formate o código com pretty também. Logo após o contêiner, teremos uma etiqueta principal. E aqui vamos pegar o título, que é esse cara aqui que se desestruturaria e vem do contêiner deslizante. Aqui está. Agora, quando fizermos isso, teremos a única tendência da Netflix no momento, popular na Netflix e nos demais. Então, vamos exibi-los no topo de cada função para dar a essa função um nome descritivo, para descrever veteranos, por assim dizer. Então, tendo feito isso aqui, vamos dar ao recipiente uma lacuna de 0,7 rem. Ok, está tudo bem assim. Vamos colocá-la em posição. Realmente Tea Party. Feito isso, vamos estilizar rapidamente a tag oculta. Ele havia vencido. Vamos dar uma margem restante. A margem esquerda é de 50 pixels. O tamanho da fonte é de 25 pixels. A família da fonte, eu vou escolher isso aqui. Pode decidir dar a ele qualquer família de fontes de sua escolha. E essa é sua própria especificação ou receita, por assim dizer, vamos continuar. Logo após a etiqueta principal. Vamos atacar o invólucro. Deixe-me ver. Aqui está o invólucro. O invólucro, vamos direcionar o controle deslizante e depois estilizá-lo. Slider escuro. Então, vamos fazer com que ele seja flexível. E isso alinhará todos os itens em cada linha do navegador. Você pode ver? Tudo bem, então eu acho que o acolchoamento é demais. Então, temos que rolar até aqui. Vamos fazer disso uma parte de um salvamento remoto. Tudo bem, é bom. Pense também, é demais, mas tudo bem, vamos continuar. Definitivamente vamos consertar as coisas. Então, aqui vamos dar isso. Deixa eu te mostrar uma coisa. Ao observar a tela, você perceberá que as cartas não estão mais ocupando a largura apropriada que atribuímos a elas. Sim. Então, o que vamos fazer agora é com o máximo de conteúdo. Quando você salva no navegador, vê que agora está tudo bem. Tudo bem, então se você também observar a tela, verá o fundo vermelho no cartão. Isso é o que não queremos de jeito nenhum. Eu o usei na palestra anterior para fins de ensino. É apenas, por exemplo, saquê. Volte, abra o cartão. Jazz. Certo, dentro do cartão, só precisamos destacar a cor de fundo. Ok, limpe isso. Seguro no navegador. Do papai. Bom. Oi, certo. Está gradualmente tomando forma. Volte. Agora, vamos abrir o controle deslizante do filme. Vamos dar um espaço para que haja espaço entre cada cartão. A diferença será de 0,6 RAM. Transforme, traduza X zero pixels. Então, quando você faz isso, aqui está o resultado. Você pode ver? Então, vamos fazer a transição de 1 s. Fácil entrada e saída, margem esquerda. Vamos fazer com que seja de 50 pixels. Feito isso, com segurança, veja o que temos agora. Bom. Vocês podem ver, pessoal , está realmente bonito. Agora, a margem no eixo esquerdo, não acho que será necessário que a margem esquerda seja de 50 pixels. Então, podemos realmente fazer com que seja de cinco pixels. Vamos ver. Tudo bem, ótimo. Feito isso, deixe-me mostrar logo na parte superior, temos no cabeçalho uma tag que é usada para exibir o título. Mas na tela, você não a verá simplesmente porque a fonte é preta. Você pode ver? Agora, quando eu destaco tudo, isso se torna viável. Então, o que vou fazer agora é especificar a cor da fonte. Cor. Vamos torná-lo branco. Isso vai ficar bem. E eles são esses. Você pode ver? Ok, vamos também especificar a margem esquerda da fonte. Então, vamos fazer com que seja de cinco pixels. Qual é a margem esquerda da tag Hadrian usada para exibir o título. Estão certos, pessoal. Tudo parece extremamente limpo. Isso é tão limpo e eu adoro isso. Você pode ver? Tudo bem, então o próximo na fila é implementar o controle deslizante. Certo? Acho que devemos fazer isso na próxima palestra. Isso é tudo por enquanto. Nos vemos na próxima palestra. Mantenha o foco. Os analistas tomam cuidado. 100. 98 Otimização de desempenho: Nos bastidores, percebi que o desempenho do aplicativo é um pouco afetado. Deixe-me avisá-lo. Ao rolar o aplicativo, você perceberá que a navegação superior está demorando para mudar sua cor de fundo para preto quando o aplicativo excede zero nos eixos y. Agora dê uma olhada. Também leva tempo. Você também perceberá que o aplicativo está ficando lento. Você verá, eu não sei se você pode anotar isso do seu lado. Você pode ver que o aplicativo está bem lento. Portanto, antes de prosseguirmos com a implementação desse controle deslizante, precisamos otimizar o desempenho. E isso será feito com o React dot mammal. Portanto, temos que encontrar uma maneira de memorizar o aplicativo. Portanto, um memorando de pontos do React é um alto número de outros componentes que aceitam outro componente e funcionam como um argumento que segue para código VS, a menos que seja implementado rapidamente no VS Code. Agora vamos voltar ao controle deslizante do filme. Primeiro. O que vou fazer aqui é agrupar o código no memorando de pontos do React. Agora vou excluir a função de erro, excluir o operador de atribuição e, em seguida, rolar para baixo. Também precisamos excluir essa exportação. Ainda não excluí todas as paradas, então temos que deletar esse cara. E eu vou exportar padrões, React dot, mammal, abrir e fechar parênteses. E vamos assumir uma função. E, internamente, também temos que considerar o segundo argumento, que é o componente. Destaque tudo aqui, corte, venha aqui e cole. Ok, temos que trazê-lo um pouco mais e mais perto. Feito isso, destaque os parênteses finais do mamífero React dot. Pare com isso. Então temos que fechá-lo aqui, bem na linha 18. Você pode ver que o erro desapareceu? Agora, esse componente específico está otimizado. Vamos também otimizar os componentes da placa. Claro que você sabe o que fazer. Limpe a função de seta, o operador de atribuição. Aqui eu vou exportar o memorando padrão de pontos do React, pegando os parênteses e, em seguida, vamos pegar o destaque da função assim, cortá-lo e vir com ele. E colar também destacou os parênteses finais do livro de memórias React dot. Pare com isso. Temos que fechá-lo aqui. Deixa eu te mostrar aqui embaixo assim. Então, depois de fazer isso, o aplicativo ainda está reclamando. Role para baixo. Temos que excluir essas exportações. Você pode ver o aplicativo? De novo? Vamos dar uma olhada no navegador. Então, vamos rolar para baixo. Você pode ver agora que tudo está funcionando perfeitamente bem? Dê uma olhada. Oi, certo pessoal. Então, tudo isso é para a otimização. Na próxima palestra, continuaremos com o controle deslizante do cartão. Nos vemos na próxima palestra. 101. Controle de controle de controle: Bem-vindos de volta a todos. Nesta palestra, implementaremos os ícones de controle do controle deslizante para que os usuários finais possam deslizar os filmes para a esquerda ou para a direita. Então, sem mais delongas, vamos começar o código VS. A primeira coisa que faremos aqui é importar os ícones da rolagem de ícones do React para o topo. E aqui eu vou fazer as importações. Temos que importar a extremidade esquerda do contorno, a UTLA anda em vasos. Eu delineei o contorno da vírgula esquerda, certo? Agora, tudo isso vem dos ícones do React. E então temos que resolver, fixar com um corante, assim como esses. Linda. Feito isso, a próxima linha é renderizar os ícones, certo, não seria você. Então, logo após o div com o nome da classe wrapper, teremos outro div. Vamos dar a ele um nome de classe. Então, aqui também vamos abrir, abrir e fechar os colchetes. Vamos tomar o chá da casca. Portanto, o nome do cluster será Slider dash. E vou chamá-los à esquerda para que indique para a esquerda. Sim. É isso. Ok. Então, tendo feito isso, temos que fechar o D. Ok, certo, não seria a div com o nome da classe da ação deslizante à esquerda. Vamos aproximar a camada de contorno com a tag de fechamento automático. Portanto, a próxima linha é destacar essa definição, a div do nome da classe de destaque da ação deslizante das linhas 152, linhas 17. cópia vem logo após o div com o nome da classe de slider. Aqui está a div de encerramento do controle deslizante ClassName e cole-a aqui. Então, aqui vamos alterá-lo para um valor atípico aqui. Vou mudar para a direita. Bom. Então, depois de fazer isso, vamos estilizá-lo rapidamente dentro do componente de estilo. Ok, vamos tirá-lo. Por enquanto. O controle deslizante está diretamente dentro do invólucro. Então, o que vou fazer agora, role para baixo. Este é o invólucro. Há um controle deslizante, certo? Estamos na borracha. Deixe-me mostrar esse slide aqui. Então, queremos estilizar a ação do controle deslizante. Então, depois de fechar os colchetes do controle deslizante ClassName, vamos estilizar o leilão deslizante holandês. Vamos ter uma tela flexível. Justifique o conteúdo no centro, alinhe os itens à posição central. Vamos posicioná-lo de forma absoluta porque queremos que os ícones estejam na parte superior do controle deslizante. Então, vamos ter isso absoluto. E lembre-se de que aqui, a posição foi definida como relativa ou está definida como relativa, por assim dizer, oi, certo? E, a propósito, não estamos na aula de inglês por aqui. Me desculpe por isso. Então, o índice Z, o índice de traços z, vamos fazer com que seja 99. A altura, 100%. O topo. A parte superior vai ficar na parte inferior. Vai ser zero. A largura. Vamos fazer com que seja de 50 pixels. A transação, vamos realizá-la em um segundo, acabou. Ou você pode entrar e sair com facilidade o que quiser. Então, temos que estilizar o SVG. Svg, vamos fazer como VG, o tamanho da fonte. Vamos fazer com que sejam dois aleatórios. Causal. Vamos fazer com que seja um indicador. Vamos dar uma cor. Vamos torná-lo branco. Está bem. Salve e vamos ver o que temos no navegador. Então pessoal, esses são os ícones aqui. Tudo bem pessoal, então os ícones aparecem aqui. Deixe-me mostrar, você pode ver que temos dois à esquerda e à direita, alinhe-os corretamente. Então, agora o que vou fazer, vá até o topo. Deixe-me mostrar esse cara que também indica o certo. Esse cara que indica a esquerda. Temos que estilizá-lo com cuidado. Então venha aqui. Eu vou para a esquerda. Da esquerda, queríamos zero, à direita. Da direita, queremos que seja zero. Vamos ver o resultado dessa implementação agora mesmo. Ótimo. Tudo parece bem. E agora você pode ver a seta ou a esquerda. E você pode ver a seta à direita. Esse é o fim esperado. Tudo bem, então, depois de fazer tudo isso, quero explicar uma coisa para você. Portanto, a ideia é a seguinte não queremos que as setas apareçam em cima das cartas como padrão, como essas. Sim, então queremos que as setas apareçam somente quando passamos o mouse no controle deslizante. Portanto, se o mouse não estiver no controle deslizante, você não verá as setas. Vamos implementar rapidamente. Venha aqui, vá até o topo. Vamos declarar as variáveis de estado necessárias a serem usadas. E antes de fazermos isso, temos que importar o gancho e um termo dos EUA. E aqui vou gerar os trechos de uso. Então eu vou fazer seus estados. E aqui estão os trechos. Então, primeiro vamos ter visibilidade de controle. Em seguida, vamos definir a visibilidade do controle como falsa. Então, o estado inicial será falso aqui você tem que fazer com que o C esteja em carboidratos, definir o controle da visibilidade e o estado inicial será falso. Agora, quando o usuário passa o mouse sobre o cartão, queremos que as setas apareçam. A maneira como fazemos isso é: vamos direto. Estamos no contêiner. Vamos ter uma constante aqui. Vou fazer Control Visibility, aquático. Controle a visibilidade. E fazendo isso logo abaixo, temos que implementar o enter n. Nosso mouse sai. Então, entre n, vamos chamar a função de configuração para atualizar o estado inicial. Defina a visibilidade do controle. E vamos definir isso como verdadeiro. A maioria das folhas. Vamos definir a visibilidade do controle como falsa, de forma autoexplicativa. Agora, tendo feito isso, vamos implementar a condição agora, certo? O div com o nome da classe da ação do controle deslizante não sobraria . Temos que colocar uma condição aqui. Agora vou fazer, se não controlar, a visibilidade. Vamos fazer assim. E L's, vamos mostrar uma corda vazia também. A mesma coisa aplicável aqui. Se não controlar a visibilidade, o que significa que se a visibilidade do controle não existir, faremos Nenhuma. E agora não vamos fazer nada. Então, a ideia por trás de tudo isso é estilizar esse neurônio aqui. Ok? Então, quando vamos até aqui, não há pontos. Então, não teremos nenhum display. Então, isso ocultará os ícones de controle. E quando usar, coloque o mouse no cartão. Vai ficar visível. Quando você salva e verifica o navegador. Você pode ver? Deixe-me te mostrar. Eu tiro o mouse do cartão. Agora, quando eu passar o mouse sobre o cartão, você verá os ícones. Você pode ver? Passe o mouse sobre a boca? E tudo está funcionando perfeitamente, conforme o esperado. No momento, quando você clica no ícone, nada acontece. Você pode ver, deixe-me te mostrar. Quando você clica no ícone, nada acontece. Por que é simplesmente porque não implementamos esse controle deslizante. Então, vamos para a próxima aula onde implementaremos o controle deslizante. Nos vemos na próxima palestra. Mantenha o foco no cuidado holístico. 102. 100 Implementando o controle deslizante: Nesta palestra, vamos implementar o controle deslizante. Portanto, no final desta palestra, não poderemos mover as cartas para a borda esquerda ou direita da tela. E definitivamente você vai adorar os resorts Angel. Vamos começar rapidamente. A primeira coisa que faremos aqui é declarar uma variável de estado desnecessária. Role até o topo. Nós importamos o gancho feito nos EUA da palestra anterior. E aqui vamos importar o usuário if hook. E vamos inicializá-lo rapidamente aqui. Lista Ref, igual. Use costela. Feito isso, vamos rapidamente a variável de estado de nebulosidade S3. E aqui vamos gerar os trechos do estágio de uso. Vou chamá-la de posição deslizante. Vamos definir a posição do controle deslizante. Sim, vai estar na CUP. E então o estado inicial do controle deslizante será zero. Aqui vamos ter uma constante. Como a igualdade de direção começou com nossa função. E então aqui vamos tomar a direção como parâmetro. Então, vamos fazer dessa vez. Vamos distanciar um quádruplo lista o ponto de referência, o ponto atual. Então, o que vamos fazer agora é obter a posição real do carrinho no eixo x em relação à janela de visualização. E a maneira como podemos fazer isso é usando o método de vinculação de clientes do gueto. Get recebe pedidos de fiança por ovos. É claro que é um método. Estamos obtendo a posição no eixo x e eu vou fazer -17. Então, se agora vamos ter uma condição. Se a direção for igual à esquerda, se a direção for um núcleo à esquerda, posição do controle deslizante será maior que zero. Essa é a única vez em que poderemos mover a carta. Significa simplesmente que quando você clica no ícone esquerdo, deixe-me mostrar aqui. Então, esse ícone esquerdo aqui, quando você clica nele, também, se a direção no eixo x for maior que zero. Então, o que vou fazer agora é listar o ponto de referência. Temos que obter a posição atual, essa corrente, e depois estilizá-la como transformação de pontos. Então, queremos animá-lo para a esquerda. E aqui vamos aplicar estilo a ele. Vamos traduzir o cifrão X. Então, vamos mover esse controle deslizante de 230 pixels para a esquerda, a memória. Quando terminarmos de digitar o código, eu o explicarei de forma simples para que todos o entendam bem o suficiente. Vou fazer mais distância e depois aplicar os pixels aqui. Feito isso, temos que definir a posição para deslizar para cima mais um. Isso é mais simples: os pais estão certos. Então isso é para o lado esquerdo. Também temos que implementá-lo para o lado direito. Eu só tenho que copiar a declaração if. Destaque das linhas cisteína até 19. Copiar. Venha aqui, cole. Mude-os para a direita. O que faz de novo? Agora vamos fazer se a posição do controle deslizante for menor que quatro, só podemos mover as cartas menos 210 pixels para a direita? É tão simples quanto isso. E isso, isso deve ser menos um, e isso deve ser mais um. Vamos salvar o aplicativo. Agora vamos ver como podemos implementar isso nos dois lados. Tudo bem, quais são os div do nome da classe do slider? Eu vou fazer. E isso vai ser uma referência de listas. Então, vamos implementá-lo no ícone. Aqui, vamos especificar o ícone onclick, onclick do ícone esquerdo. Temos que mover esse controle deslizante para a esquerda. Então, o que vou fazer agora é chamar a função de direção do manípulo. Bem dentro, vamos passar pela esquerda. Vou copiar o onclick. Vou copiar o onclick. Vamos colá-lo aqui. Não seria um passeio pelo Atlântico. Temos que mudá-lo para andar com eles. Eu acredito que tudo vai funcionar bem. Vá até o navegador. Certifique-se de atualizar. Vamos movê-lo para a direita, bumbum, bumbum , movê-lo para a esquerda. Boom, bum, bum. Você pode ver? Tudo está indo perfeitamente bem, conforme o esperado. Eu adoro isso, mas o controle deslizante é bem lento. Volte. Deixe-me mostrar qual é a ação do controle deslizante. Vamos fazer com que esse 0,1 segundo acabe. Agora vamos tentar novamente. Você pode ver que eu amo esses? Tudo bem, tudo está funcionando perfeitamente bem. É hora de explicar isso de forma simples para que todos o entendam bem o suficiente. Agora, vou recarregar a página. 103. Projeto de painel de 101 (criar aplicativo de React: Nesta palestra, vamos começar do zero para criar um novo aplicativo React. Então, na minha área de trabalho, vou criar um novo diretório chamado dashboard. Clique com o botão direito em nova pasta. Este painel será capturado. O próximo passo é arrastar e soltar esse diretório no VS Code. Vou apenas abrir meu código VS. Então, agora, vou arrastá-lo e soltá-lo aqui. Feche a página de amostra e, em seguida, maximize o código VS. Abra rapidamente o terminal integrado VSCode. Certo? Não determinaria que não. Temos que gerar um novo aplicativo React. E para fazer isso, temos que usar o comando MPS. Np x. Create dash react, dash r. React é usado para criar um aplicativo de front-end. Portanto, temos que instalá-lo em planos de registro direto. A placa de caldeira necessária para desenvolver nosso aplicativo de front-end será instalada, certo? Estamos no diretório de clientes. Pressione a tecla Enter para ativá-lo. A instalação do React está em andamento. O React é instalado com sucesso em seguida. Temos que entrar no diretório do cliente onde instalamos o CD React years, o que significa simplesmente alterar o cliente do diretório. Aqui mesmo, vamos fazer npm. Comece, pressione a tecla Enter para ativá-lo. Linda. Aqui está a página de Londres de um aplicativo React. Isso é tudo por enquanto. Na próxima palestra, limparemos as placas da caldeira excluindo arquivos desnecessários que não são necessários para este projeto. Nos vemos na próxima palestra. 104. 102 limpando a placa de caldeira: Bem-vindo de volta aos recalls. Nesta palestra, vamos excluir flores desnecessárias que não são necessárias neste projeto. E essas flores incluem o teste AP, o logotipo, o ponto SVG, o relatório, os sinais vitais da web e os dados do teste de configuração. Então, logo quando o cliente abriu o SRC. E aqui vamos selecionar o logotipo dot SVG. Pressione e segure a tecla de comando no teclado e clique para selecionar relatório, sinais vitais da web, testes de configuração, ponto de logotipo SVG e aumentar esse teste. Clique com o botão direito Excluir. Linda. E agora o aplicativo está reclamando. Vamos ver qual é o problema. Teorias não resolvem esse cara, certo? Portanto, temos que acessar o comando P do index.js para abrir a caixa de pesquisa na parte superior. E então vamos pesquisar o ponto de índice g para reduzir um pouco isso. Comando B para fechar o Explorer. Então não precisamos mais desse cara. Eles denunciam, vetam na web, destacam e excluem, salvam e, novamente, do que se trata o problema , estão aqui. É excluído? Quando você economiza? Também precisamos excluir o comando logótipo dot SVG p, configurar quatro no topo. Vamos destacar e depois excluir o ponto SVG do logotipo. Tudo bem, então também temos que deletar tudo. A partir da linha C há duas linhas. 19. A tag de cabeçalho de abertura para a tag de cabeçalho de fechamento. Limpe-o. Salve-a bem, parece que tudo está funcionando perfeitamente bem. Agora. Vamos tirá-lo no navegador. Agora, vamos usar um pacote de Adriano para fazer algo assim. Painel de controle. Salve e confira o navegador. Agora, ao observar a tela, você perceberá que a cabeça de uma etiqueta está alinhada ao centro. Volte para o Comando P e, em seguida, configure os CSAs. Aqui está. Você pode ver o Align Center. Então, tudo aqui está alinhado ao centro. Destaques, limpe-os, com segurança no navegador. E agora a cabeça de um perú foi alinhada à esquerda. Muitas vezes, esse é o nosso objetivo. Nesta palestra, vamos detalhar o aplicativo para entender a estrutura e como ela foi visualizada. E depois disso, vamos configurar as estruturas de pastas. Nos vemos na próxima palestra. 105. 103 Compreendendo o fluxo: Entendendo o projeto e configurando a estrutura de pastas seguindo as melhores práticas. Nesta palestra, vamos entender o padrão da estrutura de pastas do nosso projeto. Vamos desvendar o projeto e entender a gripe. Então, na tela está o aplicativo de painel React que vamos criar neste curso. Vamos prosseguir rapidamente com este projeto. Aqui, temos o topo agora. Então, no canto superior esquerdo da tela, temos o logotipo do painel de administração. E no canto superior direito, temos as notificações. Na borda esquerda da tela. Nós temos o lado. Agora. Aqui, temos os componentes de informações futuras, o componente gráfico exibe os componentes do hotel. E logo abaixo temos a tabela de transações n, a tabela de membros recém-ingressados. Dito isso, vamos entender rapidamente o fluxo do aplicativo usando a navegação lateral para navegar pelos projetos. Então, aqui temos os usuários. Quando eu clico no usuário, isso me leva para reutilizar como página de lista. Você vê que quando eu clico no botão Editar, ele vai me levar ao perfil do usuário. Veja aqui, poderemos editar um usuário e depois atualizar os dados. E no canto superior direito da tela temos o botão Criar. Então, isso nos levará ao componente de criação de usuários. E aqui está sua linda. Vamos continuar com os produtos. Agora, eu clico nos produtos. Isso me leva até as folhas do produto. Então, aqui podemos selecionar produtos individuais. Podemos classificar o produto, filtrar, ocultar ou mostrar qualquer coluna que quisermos mostrar. E a partir de agora isso não é necessário. Quando você clica no botão Editar, você será direcionado para a página de produtos individuais. Portanto, todo esse componente nas páginas será criado nesta palestra. Então, rapidamente, use heroína para o código VS e vamos criá-los. Comando B para abrir o Explorer, diretamente no SRC. Clique com o botão direito em nova pasta. Esses serão componentes capturados, certo? Estamos no diretório competente. Vamos criar as pastas competentes. Clique com o botão direito em nova pasta. Com certeza, teremos os componentes do bate-papo. Então, isso será chamado de gráficos. Então, agora estamos no diretório de bate-papo. Vamos criar os componentes do gráfico. Agora. Clique em Componentes, Nova pasta. E vamos criar o total de exibição. Novamente, clique com o botão direito nos componentes. Vamos criar os widgets de pedido de aprovação do Top Nav , que serão usados para criar o componente de tabelas de transações. E, por fim, diretamente dentro da empresa. E, novamente, vamos criar o widget de membros. Linda. Portanto, as páginas incluem, deixe-me mostrar aqui que também teremos a página da lista de produtos em torno página da lista de produtos em torno da página única da lista de produtos. Teremos a página do produto cred. Quando chega aqui. Usuários, teremos a página de lista do usuário, a página de perfil do usuário, a página do usuário. Ok, então, quando você volta para casa, criamos agora o lado superior dos produtos futuros. Mas os bate-papos que exibem o total. Essa é a tabela de transações e o componente de membros recém-unidos. Então também temos que criar esse cara no topo aqui. Para isso. Volte ao código VS, clique com o botão direito do mouse nos componentes, na nova pasta e, em seguida, criaremos a comida do futuro. Então, vamos criar o componente filtrado, certo? Dentro do campo, aquela comida. Na verdade, estou ensinando você a escrever código como uma pérola. Essa é pelo menos a razão pela qual eu quero manter tudo simples. Então agora terminamos com isso, certo? Estamos no SRC. Vamos criar um novo diretório chamado pages. Certo? Quando a página é clicada com o botão direito do mouse em nova pasta. Faremos com que a casa reformule a página novamente. Teremos a página do produto criativo. Teremos a própria página do produto, que são os produtos individuais. Teremos a lista de produtos. Teremos os usuários. Ok, vamos fazer a lista de usuários, o perfil do usuário. Por fim, teremos o usuário de criação. Perfeito. E agora estruturamos nossa pasta com sucesso. Na próxima palestra, começaremos com o componente Top Nav. Para recapitular, certo? Não seria o SRC, criamos um diretório chamado direitos de componentes. Dentro do diretório desse componente, temos os bate-papos que exibem futuros membros do conselho do hotel. Fizemos pedidos, fizemos o suficiente e fizemos o Top Nav. E nos direitos das páginas, temos a página de criação do produto, o usuário de criação, a página inicial, os produtos, que são os produtos únicos, a lista de produtos, use pelo menos. O perfil do usuário é bem simples. Então, aqui está o componente Top Nav, os componentes secundários suficientes, o componente de informações futuras, os bate-papos que dividiram o hotel. Portanto, esse é o widget mais antigo e esse é o widget de membros. Quando você fala sobre as páginas, temos a página de lista do usuário, a página de perfil do usuário e também a página de criação de usuários. Temos a mesma coisa com os produtos. Isso é tudo por enquanto. Nos vemos na próxima palestra. 106. Componente de 104 TopNav: Nesta palestra, vamos construir a empresa Top Nav. Mas antes de prosseguirmos, precisamos instalar a interface de usuário do material, o que obviamente nos permitirá usar os ícones SVG. Tabelas. Basta imputar qualquer coisa escondida muito mais rapidamente ao material ui.com. E clique em Começar. Na borda esquerda da tela, você verá a banheira. Logo na banheira. Você precisa clicar na instalação. Aqui temos conselhos sobre como instalar o material. Você. Nesse caso, basta copiar o comando npm. Copie, volte para o VS Code, abra o terminal integrado VSCode, terminal e o novo terminal. Mas olha, eu já o abri. Então, o que vou fazer é gravar as declarações em CD e , em seguida, o Comando V para colar o comando npm para instalar o material, você clica na tecla Enter do teclado para ativá-lo. A instalação está em andamento. Instalado, bem-sucedido. O próximo passo é instalar o Material Icon especificamente. Então, aqui eu vou fazer o gerenciador de pacotes node. A instalação adiciona uma barra de interface de usuário, ícones, materiais do painel, pressiona a tecla enter para acioná-la, tudo pronto, instalado, subtrai a queda. A próxima linha é criar o componente Top Nav. E esse componente será criado, certo? Estamos no diretório de navegação superior. Então, clique com o botão direito do mouse no topo da navegação, novo arquivo, e eu vou chamá-lo de top Nav dot j é, quero que você observe o uso convencional para nomear esse componente. É chamada de convenção de nomenclatura Pascal, o que implica que você coloca em maiúscula a primeira letra de cada palavra. Ensinar bem, é lindo. Pressiona a tecla enter, RFC, gera os componentes funcionais. E se esse atalho não funcionar para você, tudo o que você precisa fazer é acessar as extensões e pesquisar por React. nativo reage prontamente aos trechos. Aqui está. Ele precisa clicar e instalá-lo do seu lado. Volte para o Explorer. O próximo passo é criar o arquivo CSS. Top Nav dot CSS. Feche o Explorer. Então, vamos continuar com o componente Top Nav. O que vou fazer agora é destacá-los e depois apagá-los. Agora vamos dar a esse div um nome de classe do contêiner Top Nav, certo? Estamos no contêiner de navegação superior. Vamos ter outro div com o nome da classe top nav wrapper. Portanto, a navegação superior será dividida em duas partes diferentes, a da borda esquerda e a porção da borda direita. Portanto, a borda esquerda da navegação superior será usada para exibir o logotipo. A borda direita será usada para exibir a notificação e o perfil do administrador. Então, aqui vamos ter um div. Dê a ela um nome de classe no canto superior esquerdo, logo dentro desta div, faremos com que um espaço exiba o logotipo. E eu vou fazer admin dash. Então, queremos usar o teste como logotipo. Aqui. Vou dar a ele um nome de classe. Logotipos. Bom. Ok, vamos renderizar rapidamente os componentes no conjunto P comum do aplicativo Js para ArcGIS. E aqui, só precisamos executar o componente Top Nav perto com uma tag de fechamento automático e importá-la na parte superior. Aqui no terminal, vou fazer npm starts. Então, elementos para obter uma imagem real das coisas que estamos fazendo. Aqui está o painel do administrador no canto superior esquerdo da tela. Certo. Estamos na casa de cima. Ok, bom. Aqui fora desta div com o nome da classe no canto superior esquerdo, teremos outra div com o nome da classe no canto superior direito. Aqui é onde vamos organizar a notificação e o perfil Logo quando tivermos um div, atribua a ele um nome de classe de top nav, container de ícones. Certo, dentro desta div, teremos primeiro o ícone de notificação. E para obter o ícone SVG, precisamos importá-lo dos MEUS ícones. Notificação de importação materiais do traço dos ícones de barra do MUS. Então, vamos usar essa oportunidade para importar todos os ícones necessários. Mais calmo. Aqui precisamos do idioma, precisamos do ícone de configurações. E por último, precisamos do chat Babu, seguro ou correto. Então, aqui vamos aproximar a notificação. Que etiqueta de fechamento automático. Além disso, temos que dar a ela um nome de classe simplesmente porque vamos estilizá-la. Ícone de navegação superior. E aqui vamos ter um intervalo. Se o nome da classe do emblema do ícone superior, certo, estamos no HTML interno que queremos exibir à medida a contagem de notificações é maior, certo? Então veja o que eu vou fazer agora. Vou destacar as linhas 11 a 14. Mantenha pressionada a tecla Shift e toque na tecla de seta para baixo para duplicá-la três vezes. Você só precisa continuar pressionando a tecla de seta para baixo três vezes. Então, aqui temos que renderizar a linguagem. Digamos, para o meu cabelo ou três configurações. Temos que renderizar o gráfico Babu. É mais simples que isso seja uma notificação. Salve e vamos ver o que temos. Diz que a notificação não está definida. Sim, claro, temos que efetuar a mudança aqui e economizar novamente. Perfeito. Então, aqui está o logotipo do painel de administração. Aqui está a notificação e Laurie, as coisas não estão dispostas da maneira que você espera. É simplesmente porque não temos como estilizá-lo. Então, vamos mostrar a foto do perfil do exército. Logo após a div de fechamento do nome da classe, o contêiner do ícone de navegação superior, teremos uma tag IMG, SRC equa. Vou copiar uma foto aleatória de um cara na Internet e depois colá-la aqui. Questão igual. Então, vamos nos aproximar rapidamente com uma etiqueta de fechamento automático. Salve no navegador. Aqui está. Você pode ver, aqui está a foto do cara, porém, não está linda como esperado. E eu te disse o motivo. Na próxima palestra, quando começarmos a estilizar essa empresa, você definitivamente adoraria. Tudo bem, então vamos passar para a próxima palestra, onde estilizaremos essa empresa. Nos vemos na próxima palestra. 107. 105 Css de TopNav: Nesta palestra, vamos estilizar a parte superior dos componentes agora. E no final, teremos um Top Nav muito bonito. Prossiga rapidamente para o VS Code. Abra a navegação superior, CSS. Aqui está. Vamos dividir a tela. Agora. Vamos ter o CSS ou a borda direita da tela. E então teremos o componente superior esquerdo na borda esquerda da tela. Vamos continuar com a imagem. Deixe-me mostrar, você pode ver que a imagem está ocupando toda a tela. E eu não gosto disso. Vamos estilizá-lo rapidamente. Agora temos que definir o nome do cluster da imagem. O nome da classe é admin, IMD. Copiar. Venha aqui, pontos, cole o nome do cluster da imagem, abra e feche os colchetes. Certo? Dentro dos colchetes, vamos aplicar os estilos. A largura da imagem será de 40 pixels. A altura será de 40 pixels. E, claro, queremos que a imagem seja circular. Para fazer isso, precisamos especificar o raio da borda em 50 por cento, que ocuparia a metade da altura da imagem e a metade da largura da imagem, 50 por cento. Portanto, antes de prosseguirmos para o navegador, precisamos vincular os componentes ao arquivo CSS. Estou aqui logo no topo. Eu vou fazer input dot slash, Top Nav dot CSS. É tão simples quanto isso. Quando você serve e finaliza a compra no navegador. Ei, não é? Consegue ver isso? Agora temos a imagem linda, conforme o esperado. O próximo na fila é estilizar o contêiner Top Nav. Então, amigos, vamos classificar nosso arquivo CSS de acordo com os nomes das classes para que nosso código se torne tão fácil de ler e entender. Então, aqui, bem no topo da imagem, vamos fazer pontos, destaques, copiar. Venha aqui, cole, assim. Portanto, o contêiner Top Nav ficará na parte superior, seguido pelo invólucro de navegação superior e assim por diante. Então, aqui teremos a largura, 100 por cento, a altura, 50 pixels. A cor de fundo. Eu vou escolher Alice blue. A posição em que vai ficar pegajosa. O topo será zero. O índice z. Vamos fazer o triplo nove. Incrível. Agora vamos dialisar o invólucro de navegação superior, que é a div do gráfico para o contêiner Top Nav. Eu destaco e copio. Vamos dar a ele uma altura de 100 por cento. Estofamento. Vamos fazer com que seja zero pixels, 20 pixels. Vamos ter um display, flex. Alinhe os itens ao centro. Quando você serve e finaliza a compra no navegador. Linda. Então, o que vamos fazer agora é criar espaço entre o logotipo e as notificações. Então, temos que dividi-lo em dois. Esse cara aqui se moverá para a direita e , em seguida, o logotipo será alinhado à esquerda. Eu quero alcançar. Tudo o que vou fazer é criar espaço intermediário. Então, vou justificar o espaço de conteúdo entre salvar no navegador. Aqui está. Você pode ver agora que temos a amina aqui e as notificações no canto superior direito da tela. Vamos continuar. A próxima linha é estilizar o logotipo. Eu destaco e depois Copio, venha aqui, colo. Simples assim. O peso da fonte será em negrito. O tamanho da fonte será. 30 pixels, a cor. Vamos fazer isso, Alice, azul, mais grossa. Vamos fazer dele um ponteiro para que, quando acabarem, passe o mouse sobre ele. Isso mostra o suficiente. Ok, deixe-me te mostrar rapidamente. Acho que mostrar a você é a melhor maneira de explicar isso. Estão certos. Você pode vê-la por mais tempo simplesmente porque é azul Alice. Então, vamos dar uma cor de fundo. A cor de fundo, vamos torná-la vermelha. Portanto, a cor de fundo fará com que o teste tenha uma boa aparência, porque agora a cor do teste está na forma de branco, porque agora a cor do teste está na forma de branco, mas na verdade não. Dê uma olhada. Você pode ver? Então, quando eu coloco meu mouse ou minhas necessidades, você pode ver que ele aparece assim. É simplesmente porque definimos o cursor um ponteiro, o raio da borda. Então, queremos que as bordas do fundo sejam um pouco curvas. Vamos fazer com que seja de cinco pixels. Fonte, família, monoespaço, margem, topo. Vamos fazer com que seja 30 pixels. Salve no navegador. Esses são mais altos, certo? Bom. Vamos especificar o perdão. Serão cinco pixels. Salvar. Linda. Agora vamos empurrá-lo para o topo. Está aqui simplesmente porque esse cara está na verdade, meio que se sobrepondo. Então, vamos fazer com que tudo fique bem organizado agora. Temos que estilizar o canto superior direito. Esse cara está aqui, pontos no canto superior direito. Em seguida, temos que exibir o flex. Alinhe os itens ao centro. Salvar. Dê uma olhada. Você pode ver que tudo está bem alinhado conforme o esperado? O próximo na fila é o contêiner de ícones no canto superior esquerdo. Portanto, esse é o contêiner que abriga os ícones. Ao copiar, venha aqui, pontilhe o contêiner do ícone no canto superior esquerdo. Então, por dentro, teremos a posição relativa. Obviamente, o Corso será configurado como ponteiro e depois com a margem direita? Dez pixels. Seguro. Ainda temos os mesmos resultados, mas desta vez, um resultado melhor. Estamos nos concentrando no canto superior direito da tela agora. K. Então, a próxima na fila é a barcaça melhor do que o suficiente. Deixe-me destacar a cópia aqui. Não ceda. Vamos dar uma largura a ele. 15 pixels. A altura é de 50 pixels. Posição. Lembre-se de que a posição anterior era relativa. E agora vamos torná-los absolutos, por favor. Esse cara aqui vai estar aqui. Precisamos classificar o CSS de acordo com a classe para que você não se confunda no futuro. Quando você faz algo assim, seu código se torna muito fácil de ler e entender. A parte superior menos 55 pixels. A cor de fundo será vermelha. A cor, que é a cor da fonte, será branca. Então, quando você conferir o navegador por enquanto, vamos ver o que temos. Você pode ver? Você verá esse fundo vermelho com o número de notificações escritas nele. Portanto, o próximo passo é torná-lo secular. Você pode ver? Então, vamos especificar o raio da borda. Vamos fazer com que seja 50 por cento. Claro que você deve entender o que é agora. Tenha uma tela flexível. Vamos alinhar os itens ao centro. Justifique o conteúdo para centralizar. O tamanho da fonte. Vamos fazer com que seja dez pixels. Ao salvar o navegador, dê uma olhada. Tudo está bem alinhado conforme o esperado. Eu adoro isso. Você pode ver, deixe-me ampliar um pouco. Dê uma olhada. Você vê isso? Agora, o que vou fazer seguir é mudar a cor dos ícones. Eu não gosto desse jeito. Ok, vamos fazer isso rapidamente. Eu vou vir aqui. Esse é o nome da classe dos ícones. Então, vou destacar a cor da ervilha. Venha aqui, ponto, ícone dot nef. Então vamos dar a cor da imagem W. Salvar no navegador. Dá para ver que tudo está muito bonito. Eu adoro isso. Então, amigos. Isso é tudo por enquanto. Na próxima palestra, começaremos a trabalhar na navegação lateral. Nos vemos na próxima palestra. Mantenha o foco e sempre tome cuidado. 108. Componente de 106 sideNav: Nesta palestra, vamos construir a navegação lateral. O fim. Teremos um sistema de navegação lateral muito bonito como esse carro, certo? Então, vamos prosseguir com o VS Code. Abra o Explorer e o B e, em seguida, escreva no diretório de navegação lateral. Temos que criar os componentes de navegação lateral. Novamente, precisamos criar o arquivo CSS correspondente. Aqui mesmo nos componentes de navegação lateral. Vamos gerar os componentes funcionais. E então temos que renderizar esses direitos de navegação lateral dentro do componente do aplicativo. Para isso, vou ter um div aqui. Dê a esse div um nome de classe de contêiner. Opa, certo. Ok. Então aqui estamos na div. Vamos controlar os nervos laterais. E, por favor, faça bem em importá-lo na parte superior. Tudo bem. Então, a ideia aqui é dividir a tela em cinco unidades diferentes. Então teremos a unidade 1.234,5. Portanto, a navegação lateral ocupará uma unidade da tela. Portanto, a parte restante da tela será quatro vezes maior na lateral, agora é bem simples. Então, a maneira de conseguir isso, de implementá-lo, foi o flexbox. Então, diretamente no aplicativo CSAs, vamos criar o contêiner para exibir flocos. Ok, vamos voltar a recitar componentes suficientes. E então temos que especificar o nome da classe dessa div. Dê a ele um nome de classe de Sidon of container. Vou destacar e depois copiar. Venha aqui, do lado suficiente do DOD, abra e feche os colchetes ondulados. Então vamos fazer com que ele flexione um. Então isso fará com que ele ocupe apenas uma unidade da tela, é tão simples quanto isso. Então, vamos voltar para a navegação lateral e começar a criar a navegação lateral da interface do usuário. Vou limpar isso. Vamos ter um div com o nome da classe de slide agora para nosso invólucro par direito , vamos ter outro div, dê a ele um nome de classe do menu de navegação lateral. Então, dentro do menu, teremos uma hash tag com três. Dê à história um nome de classe, suficientemente apertado, Hall. Eu só vou fazer o painel, certo? Ainda assim. Tudo bem, no menu de navegação lateral, teremos a tag UL, pelo menos o nome da classe de navegação do site, certo, estamos na UL, teremos uma tag LI. O LI é um nome de classe de Sidon do item da lista. Certo? Dentro. Nós vamos ter um ícone. E, claro, você sabe que vamos importar nossos ícones da Materia para você. Portanto, não há mais necessidade de voltar ao site porque já o temos instalado aqui. Então, o que vou fazer agora é importar colchetes abertos e fechados. Linhas tau da barra MEI, material de barra de ícones. Então temos que renderizá-lo aqui. Feche também o que é a etiqueta de fechamento automático. Temos que dar a ele um nome de classe. Então, se um motivo para um className é poder estilizá-lo. E ei, eu vou fazer em casa é bem simples. Tudo bem, vamos tirar o navegador. Você pode ver? Dê uma olhada. Agora, temos a aparência assim. Não se preocupe. Quando começarmos a estilizá-lo, novamente, você o verá extremamente bonito. Vamos continuar com a interface do usuário. Então, quando a tag de fechamento da tag LI, teremos outra tag LI. Dê a ele um nome de classe. Desta vez. Será um item da lista de navegação lateral, assim como este. Ok, Kirby. Então, desta vez, temos que importar o ícone da linha do tempo. Vamos fazer chover aqui embaixo. Feche com a etiqueta de fechamento automático. E então também temos que dar o nome da turma. E nesse caso, os nomes dos clusters serão os mesmos. Então, eu só tenho que copiar esse cara daqui. E depois cole simples. Aqui. Vou escrever análises. Novamente. Eu só tenho que destacar isso e duplicá-lo. Então, não precisamos digitar tudo de novo , porque quem já fez isso antes? Dedo para copiar e colar. Ok pessoal, eu falo demais. Aqui. Vamos ter uma tendência ascendente. Então, temos que mudar o ícone. Agora, vamos importar a tendência em. Tudo bem, aqui temos dois. A tendência no braço direito serão as vendas. Alt, Shift F para formatar o código com mais bonito. E, claro, se você não instalou seu código VS, tudo o que você precisa fazer é acessar as extensões e procurar por mais bonitas. Definitivamente, você o terá lá. Clique no botão Instalar para instalá-lo. Quando você salva e finaliza a compra no navegador. Você terá algo assim. Então, o que vou fazer agora, deixe-me mostrar a div com o nome da classe do menu de navegação lateral. Você vê nas linhas 92, linhas 25 destaques. Ok, só temos que abrir espaço aqui porque eu não quero que ninguém se confunda. Destaques. Vamos ver. Então, temos que duplicá-lo três vezes. 123, simples e curto. Quando você salva e marca no navegador. Certo? Portanto, temos que alterar os ícones e a tarefa certa para corresponder à especificação. Vamos começar com esse cara aqui. Vou dar um espaço para que você não se confunda. Gosto de ensinar em uma oficina de barro, Marla. Certo? Você pode ver aqui que vamos importar o ícone da pessoa do material. Você altera também altera esses usuários da ferramenta. Aqui temos que importar inventário. Olha pessoal, vocês podem realmente fazer isso do seu lado sem assistir mais às palestras. Uh-huh. Sim, você pode fazer isso. Vou importar um ícone chamado P. Novamente, vamos importar todos os ícones para esta seção a cavalo, vou importar outro ícone chamado avaliação. Então, logo abaixo, também teremos um poço. Temos que mudar a redação para , vamos supor, produtos. Então, aqui vamos fazer uma avaliação. Ok. Podemos deixar isso como venda? Sim, podemos, mas vou fazer uma transação. E por último, vou duplicar essa tag LI aqui. E então temos que importar outra árvore de eventos de ícones. Então, parece que fiz algo que não é nove, está aqui para a avaliação. Isso deveria ser um relatório. E aqui vamos fazer aqui o inventário. E estes terão uma transação. Então, vamos passar para a próxima linha. Esse cara aqui, deixe-me te mostrar. Então, terminamos com isso. Ok? Agora vamos passar para a próxima seção da navegação lateral. E você pode fazer isso no final, como eu disse anteriormente. Para esta seção, vamos importar. Então, vamos importar o ícone email karma. Vamos importar a classificação de ícones. E por último, nesta seção, temos que importar o ícone da bolha de bate-papo. Esta é a primeira, a segunda e a terceira seção. Aqui. Costumo enviar e-mails. A redação será por e-mail. Aqui. Vamos transformá-lo em um quadro de chatbot. Aqui, seria mensagem ou mensagens? Então, por assim dizer? Obviamente, o último aqui desta seção será a classificação. A esperança certa será administrada. Então esse é o último de tudo. Vamos ver o que fizemos até agora. Você pode ver que está muito bonito, mesmo sem estabilizá-lo. Então, na próxima palestra, nós definitivamente a tornaríamos perfeita ou correta. Então, vá para o código VS e vamos continuar. Vamos importar os ícones necessários para a última seção. Coloque uma vírgula aqui. Precisamos de contas gerenciais, mais calmas, precisamos de análises, mais calmas. E, por fim, precisamos de relatórios. Aqui. Temos que mudar esse cara para gerenciar contas. E aqui, a parte superior direita será a análise de gerenciamento. Serão análises por aqui. E, por fim, teremos relatórios. E aqui estarão os relatórios. Salvar. Você pode ver? Portanto, tudo está funcionando perfeitamente , conforme o esperado nesta palestra. Antes de prosseguirmos para a próxima palestra, precisamos fazer alguma coisa. Aqui você verá um painel. Painéis e painéis estão na seção. Essa seção deveria ser uma seção diferente e não a seção do painel. Então, temos que voltar ao código, especificar as seções. Digamos que esse seja o menu de administração. Você pode alterá-lo para o que quiser do seu lado. Mas o nome deve ser relevante. Aqui. Vamos ver as notificações. Por fim, podemos ver aqui nossas equipes simplesmente escrevem algo que seja relevante para o aplicativo que estamos criando de forma segura. No navegador. Eles são esses. Você pode ver? Tudo está funcionando perfeitamente, conforme o esperado nesta palestra. Então, na próxima palestra, começaremos a estilizar essa empresa. E no final, você fará com que fique extremamente bonito. Isso é tudo por enquanto. Nos vemos na próxima palestra. Mantenha o cuidado focado e holístico. 109. 107 Css de lado: Nesta palestra, começaremos a estilizar o componente de navegação lateral. No final. Você terá uma aparência extremamente bonita. Prossiga com o código VS e vamos continuar. Abra o CSS de navegação lateral. E aqui, temos que dividir a tela em duas partes. A borda esquerda da tela será a quantidade suficiente de empresas alimentadas, e a borda direita da tela será a navegação lateral, CSS. Ok, então vamos começar com o contêiner de navegação lateral. Na palestra anterior, temos a flexibilidade de ser uma, que por acaso ocupará unidades de toda a tela. Ok? Agora, vamos dar uma altura. Um V vermelho, cuja posição de 50 pixels ficará pegajosa. A cor de fundo será azul Alice. Os 50 pixels principais. Feito isso, vamos vincular o componente ao arquivo CSS. Importações. Seguro no navegador. Isso você pode ver? Perfeito. A próxima linha é o invólucro de navegação lateral. Claro que aqui cometemos um pequeno erro aqui. Tem que estar pronto, por favor. Você tem que ter paciência comigo porque estou gravando áudio negado. Claro, eu não sou os robôs. Somos humanos e às vezes podemos cometer alguns erros de ortografia. Ok? Acolchoamento, 20 pixels. A cor, vamos fazer com que seja cinza. Então, eu vou fazer cinco por cinco desse jeito. O ninho é o menu de navegação lateral. Esse cara aqui, copie, venha aqui, pontos, menu de navegação lateral. A margem inferior será de dez pixels. A lista agora é o lado do título. Entendido, venha aqui. Dod, título suficiente. Teremos que o tamanho da fonte seja igual ao das imagens. A cor, que é a cor da fonte, RGB. Quando é sete, vírgula um, vírgula um é seis, salve e veja o que temos no navegador. Legal. Você pode ver, agora isso está ficando bom. Vamos torná-lo mais bonito. A próxima na fila é, no mínimo, a navegação lateral. Observe a forma como estou configurando o CSS de acordo com os nomes das classes. Essa é uma das maneiras de escrever código como um profissional. Espero que você esteja aprendendo algo lindo. Para a lista de navegação lateral, o que vamos fazer é remover esse ponto aqui. Você pode ver? Então, vamos retirá-lo. Vamos fazer em estilo de lista. Não vamos ter nenhum. Salve e finalize a compra no navegador. Está desaparecido. Consegue ver isso? Vamos continuar. Volte aqui. Então. Vamos especificar que o preenchimento seja de cinco fotos. Para o item de navegação lateral, que é o item da lista de navegação lateral, item lista de inscrição por pontos, preenchimento, cinco pixels. Vamos fazer com que os custos sejam indicativos. Então, vamos fazer com que ele exiba o flex. Alinhe os itens ao centro, ao raio da borda. Vamos fazer com que seja de cinco pixels. Quando você salva e volta para o navegador. Isso é o que você entende, certo. Agora fizemos o item da lista de navegação lateral. A próxima linha é destacar os itens quando você coloca o mouse sobre eles. Então, vou copiá-los daqui. Cole os colchetes. E aqui eu vou fazer vírgula ativa por pontos. Copie esse cara novamente. Quando você passa o mouse sobre o item da lista, especificaremos que a cor de fundo seja RGB. Na verdade, pode torná-la azul Alice. Mas vamos continuar com isso aqui. Então. Vamos mudar a cor dos telefones para preto. Quando você economiza na finalização da compra no navegador. Agora, quando você passar o mouse sobre ele, você obterá esse belo loop aqui. Tudo bem. Finalmente, precisamos adicionar cores para decidir ícones suficientes. Então, esse ângulo aqui, temos que dar a mesma cor com o ícone de navegação superior. Então, o que vou fazer agora é destacar o ícone lateral suficiente. Venha aqui. Dod, ícone com o lado suficiente, abra os colchetes. E certo, para colocar os colchetes, temos que aplicar os estilos. Meu direito geral. Vamos fazer com que seja de cinco pixels. Tamanho da fonte, 20 pixels. E a cor, que é a cor do ícone, será Dodger blues, safe and checkout. O navegador. Você pode ver que tudo está funcionando perfeitamente como espectador. E isso é extremamente bonito. Então, vamos dar uma olhada. Você pode ver? Parece bom. Eu adoro isso. Isso é tudo por enquanto. Nos vemos na próxima palestra. 110. Componente de item em destaque: Nesta palestra, vamos nos concentrar nos itens futuros, nos componentes, onde teremos a receita, os retornos de vendas n, os profetas. Acesse rapidamente o código VS e vamos prosseguir. Então, a primeira coisa que vamos fazer é dividir as telas também em unidades. Do jeito que fizemos na palestra anterior. Abra o Explorer. E então, no diretório inicial, criaremos um novo componente chamado também criaremos um novo componente chamado Whom dot gears. Temos que criar o arquivo CSS correspondente. Certo? Estamos na casa J é, temos que gerar o componente funcional. Em seguida, daremos a esse div um nome de classe de qual contêiner eu vou destacar e depois copiar. Vamos importar rapidamente o arquivo CSS. Quem pontilha CSS. Então, certo, estamos no CSS inicial. Temos que estilizar o contínuo. Então, a ideia é simples. Deixe-me te mostrar. Queremos que esse espaço aqui seja seis vezes maior na lateral agora. Tudo bem, então fazer isso é extremamente simples. Tudo o que precisamos fazer é flexionar seis. Então, quando você fizer isso, esse cara aqui será seis vezes maior que os nervos laterais, o que simplesmente implica que a navegação lateral vai entrar nesse espaço aqui seis vezes. Também é tão simples quanto isso. Se você quiser entrar quatro vezes, tudo o que você precisa fazer é alterá-lo para flex for. Então, quando você fizer isso, esse espaço aqui será quatro vezes maior no lado agora de Spades. Deixe-me te mostrar em Protocolo. Volte ao nosso componente de aplicativo e , em seguida, executaremos os componentes domésticos. Aqui temos que importar quem a partir de dot slash pages slash, home slash home. Salve e volte para o navegador. Talvez você não consiga observá-lo, certo? Então, agora eu vou ajudá-lo a vir aqui, voltar para o CSS inicial e vamos especificar a cor de fundo. Vamos torná-lo vermelho. Bom. Tudo bem, então eu quero que você observe o espaço aqui. Sob o espaço que temos aqui. Então, quando eu fizer isso aqui, flexione seis e economize. Relógio. Consegue ver isso? Então, esse espaço se torna seis vezes maior do que o espaço da navegação lateral, o que simplesmente implica que o lado agora de vai entrar nessa parte aqui seis vezes. Então, vou deixar você fazer seu próprio julgamento no final e escolher o espaço apropriado que será bom para o seu projeto. Mas para mim, vou deixar assim. Vamos limpar o fundo vermelho. Agora, aqui é Lee que a diversão começa. Quando o componente abre os componentes, certo? Estamos no diretório futuro. Vamos criar um novo componente chamado ponto em destaque. Crie o arquivo CSS correspondente. Estamos no futuro gs. Vamos gerar também o componente funcional. Temos que importar o arquivo CSS para não esquecermos de fazer isso. Em destaque, mas CSAs. Perfeito. Ok, vamos começar. Vamos dar a esse div um nome de classe de destaque. Ok, vamos acabar com esse cara e descarregá-lo. Diretamente dentro desta div. Vamos ter outro div com o nome da classe do item futuro, certo? Estamos no item futuro, teremos um intervalo com o nome da classe, o título. E o título será receita. É claro que pode ser o que você quiser, mas que seja relevante para o aplicativo que estamos criando. Vamos ter outra div aqui, dê a ela um nome de classe contêiner de dinheiro em destaque e em destaque. E adaptando a div. Vamos ter uma etiqueta de extensão. O nome do cluster incluirá dinheiro em destaque. Então eu vou fazer aqui, vamos ter outro período. Dê a ele um nome de classe. Leituras de dinheiro em destaque. Então, também queremos exibir um ícone aqui. Então, o que faremos a seguir é importar o ícone do ícone de materiais. Aqui no topo. Eu vou fazer importações. Seta para baixo a partir do ícone de materiais. Ok, precisamos da seta do teclado. Seta do teclado para cima , bem entre o vão. Vamos correr mortos. teclado está mais próximo da tag de fechamento automático e também vamos especificar o nome da classe. Em destaque. Ícone aberto. Ok, a razão para isso é que vou estilizá-los de forma diferente. Sim, então é exatamente por isso que ele terá nomes de classes diferentes. Então, aqui teremos outro intervalo logo após a div de encerramento com o nome da classe do futuro contêiner demoníaco. Esse cara aqui, aqui está a divisão final. Vamos ter outro período. Dê a ele um nome de classe do futuro sérvio. Vou fazer em comparação com as últimas vendas. Então, tendo feito isso, temos que renderizar esse componente, certo? Estamos no componente doméstico. Aqui. Você só precisa deletar esse cara. Nós vamos renderizar. Componentes futuros. Estão certos. Feche-o com a tag de fechamento automático e certifique-se de importá-lo. Quando você salva e verifica o navegador. Aqui está. Você pode ver? Agora temos um tempo assim. Portanto, temos 1234. Então, o que vou fazer agora é duplicá-lo três vezes. Volte para Vue.js. Selecione a div com o nome da classe do item em destaque, abrindo e fechando a div. Então, o que eu vou fazer é duplicá-lo três vezes, assim. E então você só precisa alterar as informações e deixe-me fazer isso por você. Essa é a receita. Então, isso vai ser uma venda. Podemos dizer que as vendas são de 9.000, seja o que for. E então podemos fazer com que isso pareça assim. Temos que mudar o ícone ou você pode decidir usar qualquer ícone de sua escolha. É só uma escolha. Então, para mim, vou usar um ícone chamado Trending Up Friends. Na verdade, você pode conferir todos esses ícones no site deles, ok, material ui.com, você pode conferir todos esses ícones lá. Então, eu não quero perder seu tempo levando você até lá , porque isso realmente não importa pois podemos importá-lo diretamente daqui. Ei, eu vou fazer tendências em tudo. O Cs é bem alto. Podemos fazer a flecha para subir com a área europeia. Então aqui vai estar para devoluções. Eu vou fazer assim. Eu vou fazer assim. E então temos que mudar o ícone. Estão para cima. Agora você pode usar qualquer um dos ícones. A seta para baixo é legal. Não há problema nisso. Porque nosso retorno não é tão alto. Então, para o último , serão os feeds profissionais. Então, o que vou fazer agora são lucros. Olha, todo mundo adora lucrar com alguma coisa. Estou te dizendo honestamente. E os lucros, vamos torná-los extremamente altos. Todo mundo adora prosperar. Portanto, temos que mudar o ícone para cima. Ok, tudo bem. Feito isso, também precisamos especificar o nome da classe, respectivamente. Então, aqui vou fazer alguns pontos, com o ícone para cima. Vamos tornar isso negativo porque queremos estilizá-los individualmente. Podemos fazer com que isso seja positivo. Assim como você quiser. Deixe-me tornar isso positivo também. Assim como você quiser. Podemos dizer que o retorno deve ser negativo. Tudo bem, estamos prontos para ir. Confira no navegador. Temos 1234. Perfeito. No entanto, não está bonito como esperado. Não se preocupe. Novamente, na próxima palestra, quando terminarmos de estilizar esse componente, você definitivamente vai adorar. Isso é tudo por enquanto. Nos vemos na próxima palestra. 111. 109 Css de item em destaque: Bem-vindo de volta aos recalls. Nesta palestra, continuaremos estilizando o componente de poucos pontos. Mantenha-se fiel ao código VS e vamos continuar. Portanto, você precisa abrir o CSS futuro e , em seguida, o G em destaque é dividir a tela como de costume. Mas antes de prosseguirmos até aqui, eu quero fazer alguma coisa. Deixa eu te mostrar essa div aqui. Vamos dar a ele um nome de classe diferente. Então, aqui vai ser o item futuro B. Então, em qualquer lugar que você chegar ao item futuro novamente, aqui vamos fazer C. E, por fim, vamos fazer d. Então, estamos procurando uma maneira de poder estilizá-los de forma diferente. Em outras palavras, vamos aplicar cores diferentes em cada um desses tufos. Então, outra coisa que precisamos fazer aqui antes de prosseguirmos com a estilização da obrigação é mostrar os ícones. Damos a eles className e filtramos o ícone. Eu não acho que isso seja bom. Portanto, você deve selecionar o item futuro op, comando D para desmarcar todas as ocorrências. Acho que isso é tudo por enquanto. Agora, use a tecla de seta para a direita para movê-la para a frente, limpar o salvamento e, em seguida, vamos prosseguir com os CSAs. Primeiro, temos que estilizar o futuro. Então, basicamente, queremos que esse cara apareça em uma empresa horizontal. Então, para fazer isso, venha aqui, pontilhe no futuro, então a largura será de 100 por cento. Vamos ter uma tela flexível. Então salve e confira o efeito dessa flexão que usamos aqui. Você pode ver agora que tudo parece assim. Então, vamos criar espaço entre cada item. Ok? Para fazer isso, é extremamente simples. Justifique o conteúdo, o espaço entre o momento em que você salva e a finalização da compra no navegador. Agora você vê que temos espaço entre cada item. Tudo bem, já está aparecendo conforme o esperado. Olha, nós só temos que torná-lo mais bonito. O próximo item da fila é o item futuro. Destaque e copie, venha aqui, item filtrado por pontos. Então vamos fazer com que ele flexione um. A margem zero pixels, dois pixels e, em seguida, a margem dos dez pixels superiores. Estofamento. Para usos épicos. O raio da borda é de dez pixels. O causal. Então, um dia, o usuário passa o mouse e precisa, ele mostrará o ponteiro de um antes esplêndido, certo? Sim. E a cor de fundo. Vou usar o anticline Hide. Tudo bem, ao salvar e conferir o navegador, você verá que, opa, isso deve ter 30 pixels. Novamente, salve e volte. Então, o que vamos ter mais espaço aqui, como Lee, uma bela linha fina é especificar a sombra da caixa. E, claro, você pode divulgá-lo na Internet visitando o site box-shadow e, em seguida, poderá fazer seus próprios julgamentos e usar a sombra de caixa apropriada que será boa para sua aplicação. Para mim. Mais uma vez. Vou apenas copiar e colar porque já tenho isso em mente. Então é isso caso você queira usar minha própria sombra de caixa. Assim, apenas os valores desse tipo. K. Então, o que eu vou fazer agora é destacar e depois duplicar isso. Aqui eu vou chamá-lo de item filtrado B. Mais uma vez, destaque esse cara duplicado. Este será o item em destaque C. Por fim, este será o item filtrado D. Quando você salva e verifica o navegador, tudo deve aparecer bem agora, perfeito. Esse é o resultado esperado, mas agora só precisamos mudar as cores. Para o feto. Item B, a cor de fundo será filtrada com água. Item C. A cor de fundo será violeta. Então, a rixa no item D será o lugar do hijab. Claro, você sabia o quanto eu amo esses Da Jia Bu. E espero que você possa ver tudo com clareza. Me disse se você vê claramente ou não. Ok, você pode ver claramente. Está bem. Vamos dar uma olhada no navegador. Linda. Eu adoro isso. Tudo bem, então vamos nos concentrar nas fontes. Agora mesmo. Vamos estilizar o futuro em forma de título. O tamanho da fonte é de apenas 20 pixels. Não é demais. Depois, o recipiente de dinheiro filtrado, esse cara aqui. Imagine dez pixels, zero pixels. Vamos ter uma tela flexível. E então vamos alinhar os itens ao centro. O ninho é o futuro do dinheiro. E, por favor, do jeito que estou organizando esse arquivo CSS, você deve seguir meu exemplo assim. Isso definitivamente o ajudará no futuro. O tamanho da fonte, 30 pixels. As ervas daninhas da fonte estão em negrito. A futura Margaret, opa, veja o que eu fiz aqui. Gente, olha, eu estou gravando às nove, então, por favor, vocês precisam me colocar. Então, o que vou fazer agora é destacar todas as ocorrências da futura taxa de pneumonia. Comando D para fazer seu multicore. Então, a edição, que normalmente é selecionar todas as ocorrências. Eu só tenho que mudar meu mouse aqui e depois fazer assim. Copiar. Vamos fazer com que ele exiba a flexibilidade. Vamos alinhar os itens ao centro. A cor, que é a cor da fonte. Vamos torná-lo verde. Então, queremos fazer com que o futuro ícone negativo tenha a cor vermelha. E então o tamanho da fonte Futura tamanho da fonte é de 15 pixels. A cor. Concordo. Salve e vamos ver o que temos agora. Perfeito, tão simples e agradável. Eu adoro esses. Portanto, você pode mudar algumas das cores, se desejar. Mas, para mim, sou Qu e estou satisfeito com eles. Tudo bem? Isso é tudo por enquanto. Nos vemos na próxima palestra. 112. Componente de gráfico 110: Bem-vindo de volta aos recalls. Nesta palestra, vamos implementar o chat Analytics. E, claro, vai ser muito interessante. Não se preocupe. É muito simples fazer isso. Portanto, não entre em pânico. Acesse rapidamente o VS Code e menos prossiga do Heron para o código VS. Primeiro, temos que configurar a estrutura da floresta e tudo o que está envolvido. Então, abra os componentes e escreva no diretório de bate-papos. Vamos criar um novo arquivo chamado charts dot js. Crie rapidamente o arquivo CSS correspondente. Certo? Dentro dos componentes domésticos. Vamos renderizar o gráfico G é. Mas, por enquanto, temos que gerar o componente funcional e ir para a casa, G está aqui. Vamos ter um div, dê a ele um nome de classe do widget analítico de bate-papos. Certo? Estamos na div, vamos aproximar o componente do gráfico com a tag de fechamento automático e importá-lo na parte superior. Vamos aplicar estilos rapidamente à classe de widget analítico de bate-papo. Helen to home sss dot chat analytic rejeita. O que vamos fazer é exibir o flex. É tão simples quanto isso. Certo? Agora terminamos a configuração. É hora de prosseguir com o chat Analytics. Para uma análise de bate-papo, usaremos uma biblioteca externa chamada recarga. E aqui está. Então, heroína, para entrar em contato com out.org, podemos abrir o guia e, em seguida, é exatamente como instalar retardados. Então, o que vou fazer agora no terminal é o npm install retardar o VS Code e depois o Control C para interromper o servidor atualmente em execução. Npm install, alcance anúncios como esses. Mas embora eu já o tenha instalado, estou fazendo isso apenas para mostrar exatamente como instalá-lo. Então, durante a instalação, vamos entrar em contato novamente e clicar nos exemplos. Então, primeiro, vamos copiar esses dados aqui de linhas para duas linhas, 47, cópia. Venha aqui, vá para o chat GS Command B para fechar o Explorer. E então temos que colar os dados aqui. Então, esses são os dados que vamos usar. Volte aqui também, temos que copiar essas importações. Mas faça isso, vamos excluir algumas entradas desnecessárias. Venha aqui no topo. Assim. Richard instalou com sucesso. É hora de tirar o microfone das paradas. Volte para as leituras novamente, para a API. E queremos usar os gráficos de área. Você pode usar qualquer um dos bate-papos que quiser. Mas neste curso e para o propósito de nossa obrigação, esse é o gráfico que vamos usar. Então, basta copiar da tag de bate-papo da área de abertura, a tag de fechamento, destacar e copiar. Volte ao código VS, selecione a definição, limpe-a e cole. Então, quando você salva e executa o aplicativo, ele definitivamente reclamará por que é simplesmente porque precisamos importar os bate-papos da área na parte superior. Então, vamos eliminar essas entradas desnecessárias. Importa os gráficos de área e também temos que importar a área assim. E a lenda aqui são entradas desnecessárias. Portanto, o contêiner responsivo será usado no futuro. Portanto, não vamos excluí-lo. O K. Nice. Nosso direito. Vamos formatar o código, shift f, formatar o código. E agora temos a indentação adequada. Ok, vamos executar rapidamente o aplicativo novamente. Estatísticas da mãe. Aqui está a análise do gráfico. Não se preocupe. Vamos mapeá-lo com nossos próprios dados. Então agora temos o Y e o X. São esses. Volte ao código VS e vamos fazer as coisas da maneira correta. A primeira coisa que vamos fazer é mudar os dados aqui, o nome, queremos que comece em janeiro. Aqui vão estar as despesas. Serão devoluções. E aqui vamos ser muito mais difíceis, certo? Então você pode realmente indicar onde quer fazer aqui, mas é assim que deveria ser. Para o nome novamente, chegará fevereiro. Isso vai ser caro. Rapazes. Acho que você pode continuar com o final sutil. Serão devoluções. Isso vai ser total. E você tem que colocar a coluna aqui. Então, você só precisa alterar todos os dados. Mas, para mim, tenho todos esses dados prontos. Então, eu vou apenas copiar e colar. Portanto, se você quiser copiar esses dados, basta acessar os materiais holandeses. E então você encontrará todas essas guias aqui. Organizei os dados adequadamente para que você possa absorver, pausar o vídeo e digitar o meu, se desejar. Então, deixe-me jogar devagar. Você pode ver que você pode pausar o vídeo. Então você pode simplesmente digitar todas essas coisas aqui é bem simples. Agora temos que voltar aqui. A largura dos nossos gráficos será 30, a altura será 350. E boom, borla entre os dez primeiros, direita é 30, a esquerda é zero e a parte inferior é zero. Estamos bem com isso. Não há nenhum problema. Mas mais uma coisa que vamos fazer é adicionar o gradiente de linha, que é esse cara aqui. Ok? Novamente, aqui mesmo, vou colá-los, tudo isso nos materiais do painel. Então, aqui está exatamente o que exibirá algumas das coisas. Copie isso e duplique-o apenas uma vez. A chave de dados aqui serão as despesas. E aqui a chave de dados será retornada. Então, na verdade, estamos traçando o gráfico com nossos próprios dados agora. Aqui, a chave de dados será total. Exatamente o que você tem aqui. Despesas, devoluções para tau. Ok? Tudo está correto. Devoluções. Perfeito. Vamos tirá-lo no navegador. Percebem, pessoal? Quero que os retornos apareçam na cor vermelha. Temos que voltar e fazer algo a respeito. Então, você vê que os retornos aqui estão usando PV colorido, que é esse gradiente linear. E esse é o gradiente linear que criamos sozinhos. Portanto, isso será aplicado às devoluções. E o ID é chamado de cópia RV. Então, até os retornos aqui, vamos fazer um trailer colorido. Quando você salva e verifica o navegador. Você pode ver que tudo apareceu bem conforme o esperado? Mas, embora não esteja bem alinhado, então se preocupe. Na próxima palestra, usaremos CSS para finalizar o trabalho. Mas, por enquanto, vamos recapitular rapidamente o VS Code logo na parte superior. Então, para usar o gráfico, primeiro, precisamos instalar uma biblioteca externa chamada retards. E então tudo isso é importado do módulo de varejo. A área, o gráfico de área, eixo x, o eixo y e muito mais. Então, esses são os dados que usaremos para traçar o gráfico. Então, aqui temos o nome e o nome estará no eixo x. Deixe-me te mostrar rapidamente. Você pode ver que aqui está o eixo x. Então, aqui você tem janeiro, fevereiro, março, abril, maio, junho a julho. Portanto, o restante desses dados será plotado nos eixos x e y. E é por isso que você pode vê-los aqui. Então, isso é tudo para os dados. E aqui nós renderizamos os retardados. E então damos a ele uma largura de sua altura gorda de 350. E então os dados aqui são os dados que queremos usar, que é esse cara. Deixe-me mostrar esses dados aqui. Então, se eu o nomear como data, eu também tenho que vir aqui e chamá-lo de TBI. Quando você diz ventrículo no navegador, vai ser o mesmo. Correto? Portanto, você pode deixar assim ou simplesmente observar a entidade até os dados padrão. Agora, aqui nas cores do gradiente. Então, isso realmente depende de você. Eu mesmo criei esse gradiente porque queria que os retornos aparecessem na cor vermelha. Então, eu mesmo tenho que criar essas colunas de gradiente vermelho. Mas esse, o verde e esse outro cara aparece aqui, é uma espécie de cor padrão da Rachel. Assim, você pode criar mais cores e adicionar mais detalhes. Então esse é o eixo x. O eixo x está usando a chave de dados do nome, que é janeiro, fevereiro, março, abril e maio a julho. Então, traçamos o nome no eixo x. Então aqui está o eixo y. E então temos os dois dentes, na verdade a ponta da ferramenta. Deixe-me te mostrar rapidamente. Quando coloco o mouse sobre ele, os dois dentes ajudam a exibir as informações. Então, quando você o retira, por exemplo e salva, vamos ver o que acontece. Agora. Você pode ver que, ao colocar o mouse sobre ele, não obterá mais os detalhes. Certo. Então, é meio que isso para a TBS. Ele fornece dicas sobre o que é o gráfico em um ponto. Você pode ver neste momento as despesas são 1.200, então o retorno é 23.300, ponto mais simples. E aqui você tem o tipo de ser monótono. Despesas principais de dados. Ei, faça com que o traço seja dessa cor. E então a opacidade de preenchimento é uma. Portanto, o URL do combustível, que neste caso, é a cor que você deseja usar é o ID de cor do gradiente que criamos. Então, é tão simples quanto a, B, C. E, por enquanto, vou dizer, cuide-se e nos vemos na próxima palestra. 113. 111 Css de gráfico: O chat Analytics já parece muito bom. Mas vamos ver se há algo que possamos fazer para alinhá-lo de uma forma mais perfeita. Porque, como você pode ver, não há espaço entre a análise de dados e as informações do recurso. Então, vamos adicionar rapidamente o VS Code. E, por favor, certifique-se de importar o arquivo CSS, certo, para colocar no componente gráfico. Portanto, essa é a maneira de vincular seu arquivo CSS ao componente. Diretamente na interface do usuário. Vamos ter uma div aqui. Dê a esse div um nome de classe do contêiner do gráfico. Portanto, o aplicativo está reclamando simplesmente porque você não pode ter o elemento GSS fora do nó principal. Então, vamos destacar um reator para marcar a tag de fechamento, o precedente, a tecla Alt em seu teclado e, em seguida, tocar na tecla de seta para cima para movê-lo esta div com o nome da classe do contêiner Chad. E rapidamente temos que estilizar essa div, abrir o CSS do chat. Então aqui vamos fazer com que seja flexível. Vamos dar a ele um preenchimento de dez pixels. E agora você verá o espaço entre a margem superior. A margem superior é de 30 pixels. Salve e vamos dar uma olhada. Certo. Agora, está bem alinhado. Temos um espaço entre o gráfico n, as informações futuras. A linha ocidental é para especificar a sombra da caixa. Então esta é minha própria sombra de caixa. Você pode decidir, deixe-me mostrar uma coisa rapidamente. Ligue a Internet. Então, aqui, você só precisa configurar o gerador de sombras de caixa. Aqui está? Você pode ver aqui que você pode fazer sua própria sombra de caixa. Tudo bem, então, sim, muitos salvam o código. Você pode ver que tudo está funcionando perfeitamente bem. Então, quando começarmos a trabalhar no lado direito da tela, você a verá em um estado muito bom. Nos vemos na próxima palestra. 114. Configuração de estilo 112: Tudo bem, então, antes de prosseguirmos com a seção total da tela, com a seção total da tela, precisamos fazer algumas configurações. E é extremamente simples. Então, vá rapidamente para os materiais do painel que estão dentro. Você só precisa abrir a porta para ajudar. Em seguida, vamos copiar esse destaque em tau. Copiar. Volte para recodificar, abra o HTML do ponto de índice. Depois, basta encontrar um local para colar as configurações. Tudo bem, vamos fazer isso aqui. Cole e salve. Agora, vamos esperar para ver melhor o resultado. Eu adoro isso assim. Portanto, nesta palestra, prosseguiremos com o componente display to tau. Até lá. 115. Componente total de exibição de 113: Vamos prosseguir com o componente display to tau. Então, rapidamente, vá para a barra de progresso circular de reação. E aqui está o endereço. Você também pode pesquisar a barra de progresso circular do React. Aqui, não é? Por aqui? Você verá uma barra de progresso diferente diretamente nesta página. Portanto, o primeiro passo que vamos dar é instalar a barra de progresso circular do React. Então, vamos seguir o conselho. Então, se você estiver usando o yum, este é o conselho para você. E se você estiver usando o MPM, aqui estão os conselhos para você. Então, o que vou fazer é copiar esse conselho ou esse comando e depois voltar para o VS Code. Vamos encerrar isso. Controle C para parar o neurônio atual no servidor. Então eu só tenho que colar esse conselho aqui ou esse comando. Aqueça a tecla Enter para ativá-la. Instalado. Bem sucedido. Linda. Então abra o explorador, feche o bate-papo Jess no Comando B para abrir o Explorer. E, em seguida, abra o componente em que está a exibição em nosso diretório, criaremos um novo componente chamado dossiês de hotel dividido. Crie o arquivo CSS correspondente. Vamos passar para o RFC do hotel dividido para gerar o componente funcional. Bom. Vamos renderizá-lo rapidamente, certo, estamos em casa. Então, vamos entrar nessa div com o nome da classe do widget analítico Charles. Ele vai ficar logo abaixo do gráfico. Então eu vou fazer o hotel dividido. E, por favor, certifique-se de importá-lo na parte superior. Salvar. Agora, vamos prosseguir. Vamos começar dando a esse div um nome de classe de contêiner de exibição. Certo? Estamos na divisão. Vamos ter outro div com o nome da classe top. E então, logo dentro, teremos uma etiqueta H1. E essas, eu vou fazer a receita total. Especifique também o nome da classe. Vamos criar um título logo fora desta div com o nome da classe top. Vamos ter outra div. Dê a ele um nome de classe de Butão, certo? Para trazer o div com o nome da classe de bottom, teremos outro div com o nome da classe do gráfico em destaque. Logo dentro, temos que mostrar a barra de progresso do React. E para fazer isso, primeiro, temos que importá-lo com um dedo do pé. Também vou importar o progresso circular por meio do qual as crianças da barra de progresso circular do React. Temos que importar outro chamado Estilos de construção. Feito isso, vamos importar os estilos também. Então, o que eu vou fazer é voltar para a página da web. Aqui estão, na verdade, as entradas, mas estou usando a barra de progresso circular. Estou usando a barra de progresso circular com crianças. Então, eu só tenho que copiar essa entrada para os estilos. Venha aqui, cole, certo? Assim. Perfeito. Agora vamos começar a usar a barra de progresso secular. Então, neste div com o nome da classe do futuro, vamos renderizar o progresso circular com crianças. Feche isso. O que é a etiqueta de fechamento automático? Certo? Dentro do valor será 80. Todas essas coisas. Portanto, você também pode copiar diretamente da página, mas eu só quero especificar minhas próprias informações para que possamos seguir em frente e fazer o que você quiser. Mas é bom. Você segue minha liderança. O adquirente do teste. Ok. Vamos usar os dentes tortos diretamente dentro dos colchetes encaracolados. Então. Vamos ter AT e, fora da faixa curvilínea, vou especificar por cento. Então isso vai mostrar os 80 por cento, certo? Estamos na barra do progresso secular. Preocupe-se, eu vou te mostrar em um GeV, a largura do traço. Vamos fazer dez estilos. Agora temos que fazer uso dos estilos de construção. Acoplamento, feche parênteses, abra e feche o suporte ondulado. Eu vou fazer traçado, curva de linha. Isso vai ser MAS t, assim, você pode chamá-lo de mas, mas eu não sei como pronunciar isso de qualquer maneira. Então, quando você salva e vamos ver se temos algo exibido no navegador. E no navegador. Ok, então essa é a porcentagem que eu estava tentando explicar. Então aqui está a barra de progresso, aqui está o título da receita da cidade. Então, vamos adicionar os detalhes necessários e fazer com que pareça extremamente bonito. Código Vs. Então, logo após esse div com o nome da classe de bate-papos futuros, teremos uma tag P. Vamos dar a ele um nome ou título de classe. Então, todas essas coisas, eu acredito que você deveria entender. Não preciso explicar nada aqui. Você já sabe o que é a tag p. Processamento de transações anteriores. Coma, o último pagamento pode não ter sido contabilizado. Então você tem que fechar a tag p. O mais simples que, certo, vamos ver como ele aparece no navegador. Ok, aqui está a preocupação. Começaremos a estilizar essa capa e você definitivamente vai adorar. Vamos formatar o código para que agora tenhamos a indentação adequada. Aqui. Vamos ter um div com o nome da classe sumário, certo? Estamos nesta div, vamos ter outra div. Dê a ele um nome de classe. Off Item, certo? Estamos no item. Também temos um div. Dê a ele um nome de classe ou título do item de exibição. Aqui teremos outro div, o nome da classe do item resolvido. Então, dentro dessa div, vamos exibir alguns ícones para realmente indicar negativo. Então vá para o topo. Claro, você sabe, estamos buscando nossos ícones, vamos importar a seta do teclado para baixo da interface do material. Aqui. Aqui mesmo. Vamos alugar é bom. Você o fecha com a etiqueta de fechamento automático. Agora, vamos especificar o tamanho da empresa. Vamos ter outro div, dê a ele um nome de classe com o valor do resultado 15, 73. Ok, ótimo. Então, agora vamos copiar o div para o nome da classe do item e depois duplicá-lo duas vezes. O que vamos fazer agora é mudar os detalhes. Aqui vai ser na semana passada. Vamos fazer com que elas também sejam positivas. Como é positivo, a flecha vai subir. Então, temos que voltar aos ícones e depois importar o teclado. Ok, então aqui também vamos torná-lo positivo, assim como ser positivo. Tudo bem, vou fazer o alvo aqui assim. Vamos fazer disso o que você quiser, então, você sabe que isso é apenas um detalhe temporário. Então aqui eu vou fazer teclado. Ok, acho que estamos prontos para ir. Certifique-se de formatar o código com. Você pode ver agora que temos as indentações adequadas. Quando você salva e volta para o navegador. Aqui, você pode ver que temos a tela totalmente pronta? Mas agora não está tão bonito quanto o esperado. E, claro, você sabe que, na próxima palestra, certeza faremos com que seja agradável. Nos vemos na próxima palestra. 116. 114 Display de estilo total: Vamos estilizar os componentes totais da tela. Vá para o código VS. Abra rapidamente este split hotel dot css. E, por favor, antes de prosseguirmos, basta vinculá-lo para que não esqueçamos de fazer isso no futuro. Importe CSS com ponto e barra. Tão simples assim. Como sempre, vamos demarcar a tela assim. Certo? Vamos começar com o contêiner total de exibição. Copiar. Venha aqui. Vamos flexioná-lo para a margem, certo? 15 pixels. Vamos especificar a sombra da caixa. Então, vou copiar o que vou usar aqui. E eu disse que você pode realmente navegar na Internet para pesquisar por box-shadow e, em seguida, ela o levará a um site onde você pode, você sabe, fazer paradas sozinho. Portanto, você não precisa memorizar essas margens, os 20 pixels principais e o raio da borda. Queremos que seja um pouco exagerado. Então, pixels de deriva fariam isso. Quando você salva e finaliza a compra no navegador. Linda. Agora ele assumiu a forma esperada. Você pode ver como está certo? Então, vamos estilizar o resto dos itens. A próxima linha do termo é a parte superior. Vamos ter um display, flex. Alinhe os itens, centralize. Justifique o conteúdo e o espaço de maneira uniforme. Então, queremos que toda a espécie seja igual. E é aí que você usa o espaço uniformemente. Acho que você já sabe que a cor, é claro, você sabe o que é um número par, certo? Faça-o cinza. Sete ingressos para o navegador. Dê uma olhada. Você consegue ver a perfeição. Western Line é o título, que é esse cara, afinal. Então, vamos dar a ele um tamanho de fonte de 15 pixels. A fonte wheat. Vamos torná-lo ousado. Ok, vamos tirar isso para ver se estamos obtendo os resultados esperados. São. Isso é muito pequeno. Vamos fazer com que seja de 18 pixels. Ok, está bom agora. Tudo bem. O próximo da fila é o fundo. Deixa eu te mostrar esse cara aqui. O estofamento. Tela de 20 pixels : flexão, direção flexível. Então, queremos isso de cima para baixo. E eu vou fazer uma coluna. Tudo bem, espero que você entenda seu Flexbox. Alinhe os itens ao centro e justifique o conteúdo. Centro. Depois, a lacuna. Vamos fazer 14 fotos. K. Este componente está gradualmente tomando forma. A seguir está o gráfico futuro. Esse cara aqui. Quando terminarmos com isso, tudo deve estar bem. Vamos especificar a largura. 100 pixels, a altura, 100 pixels. Bom. Você pode ver? Tudo bem, vamos continuar. O próximo na fila é o título. Vamos fazer uma quantia. Deixa eu te mostrar esse cara aqui. Então. Dê a ele um tamanho de fonte de 30 pixels. Agora temos que estilizar a descrição. As ervas daninhas da fonte são 300. O tamanho da fonte. Para tirar fotos, a cor é verde. Alinhe o texto, centralize, salve e vamos ver a aparência da descrição agora. Parece bom. O ninho é o resumo. A largura. Vamos fazer com que seja 100%. Vamos ter uma tela flexível. Em seguida, alinhe os itens ao centro. Justifique o conteúdo. Espaço entre o consumidor e o espaço entre as paradas. Então, quando você dá uma olhada no osso do navegador, você pode ver que tudo está gradualmente tomando forma. Então, vamos começar rapidamente com a tela total. O próximo é o item. E, por favor, siga minha dica sobre como estou salgando o CSS. Definitivamente, isso o ajudará no futuro, para que você não precise espalhar a classe CSS que existe. Ao fazer isso, você levará algum tempo para procurar uma classe específica, talvez quando quiser estilizar o projeto novamente no futuro. Mas quando você faz isso assim, você pode obtê-lo facilmente quando estiver procurando por ele. Vamos testar uma linha até o centro. Acho que deveríamos continuar com isso. Ok. A seguir estão os resultados do item. Vamos fazer com que ele seja flexível. Alinhe itens. centro, a margem superior, ok, de cima, vamos fazer com que dez pixels sejam suficientes para isso. Em seguida, o tamanho da fonte. Vamos fazer com que seja de 1 pixel. Temos que estilizar o negativo e o positivo copiará isso. Agora, quando é positivo, queremos mostrar a cor verde. E, claro, quando é negativo, certo? Queremos mostrar a cor vermelha. Quando é negativo. É tão simples quanto isso. Multidão. Dê uma olhada. Tudo está bem alinhado e parece extremamente bonito. Você não gosta disso? Eu adoro isso. Tudo bem, agora temos nosso total de tela em bom estado. Isso está desligado agora. E na próxima palestra, continuaremos criando os widgets. Nos vemos na próxima palestra. 117. Componente de widget de ordem 115: Nesta palestra, começaremos a criar o componente do pedido que fizemos, que é a tabela de transações mais recente, que rapidamente acessou o VS Code e menos prosseguirá. Certo? Estamos na ordem em que fizemos o diretório. Vamos criar o pedido Widget Company. Ei, clique com o botão direito do mouse em Novo arquivo. widget de pedido dot g é RFC para gerar o componente funcional, vamos criar rapidamente o arquivo CSS correspondente. O que eu faço a seguir é vincular meu componente ao arquivo CSS para que não esqueçamos que, no futuro, insira dot slash dot css. E, por favor, leve roupas. Isso está em letras minúsculas. Linda. Abra rapidamente o GAS inicial e vamos renderizá-lo sobre a. Então, logo após a div de encerramento do className, widget analítico de bate-papo, teremos outro div, atribuiremos a ele um nome de classe de ordem, um widget de membro. Certo? Dentro desta div, vamos renderizar o OBJ mais perto da tag de fechamento automático e, por favor, faremos bem em importá-la na parte superior. Não sei se o código está limpo, então só preciso ampliar. Eu acho que é muito grande. Tudo bem, vamos continuar assim. Salve o quanto antes formate o código com prettier. Bom. Portanto, antes de prosseguir com a verificação no navegador, precisamos estilizar essa div com o nome da classe do pedido e widget do membro, home sss dot. E aqui vamos exibir o flex. Dê uma margem de 30 pixels e osso. Ao salvar, confira o navegador. Agora, na ordem em que fizemos o componente, vamos começar a trabalhar nele. Terminamos com a casa, então feche-a e prossiga com o pedido do widget dot js. Vamos dar rapidamente a esse div um nome de classe desse contêiner, certo? Onde está o contêiner do pedido, teremos uma etiqueta de hash para exibir o título. Então, primeiro, vamos dar a ela um nome de classe ou outro título. Então vou fazer a última transação. Quando você salva e verifica o navegador. Aqui, não é? Certo? Estamos nesta divisão. Também teremos uma mesa. Dê à tabela um nome de classe da tabela de pedidos. Então, certo, estamos na mesa. Vamos ter o papel da mesa, que é o TR. Dê a ele um nome de classe da ordem t ter o cérebro direito. Tr. Vamos ter o cabeçalho da tabela. fornece o nome da classe da ordem t para esse outro cabeçalho da tabela. Então, estamos no HTML interno. Vamos fazer o cliente, bem, destacá-lo e duplicá-lo cinco vezes. Aqui vamos mudar isso para isso. Então, basicamente, estamos apenas trabalhando no cabeçalho da tabela. Curso de amor. Quando terminarmos, vou te mostrar no navegador. Quando você salva no navegador. Neles, você pode ver os dados, o produto, a quantidade, a localização ou o status do cliente ? Opa. Gente, precisam ser cavaleiros do status de saída gramatical. Portanto, o próximo passo é criar os dados da tabela. Tudo bem, para que possamos sentir a mesa com alguns detalhes. Exatamente como parecia assim. Aqui está o cabeçalho da tabela e esses são os dados da tabela. Certo, estamos na etiqueta TR de encerramento. Vamos ter outro T, R. E isso será para os detalhes da tabela. Dê a ele um nome de classe da ordem t, r. E então, logo dentro, teremos um Td, que são os dados da tabela. Forneça o nome da classe Ou o IMD do usuário como RC porque queremos exibir a imagem do produto. Portanto, antes de prosseguirmos com o código, precisamos importar as imagens do Comando B para abrir o Explorer e depois abrir o público. Agora temos que minimizar o código VS. Execute dois materiais do painel. Temos as imagens que vamos usar neste curso. Arraste e solte onde eles provavelmente quiserem maximizar. Abra as imagens. Aqui temos a imagem dos membros, que é a imagem que vamos usar para exibir na tabela de membros. E aqui temos o produto IMG, que são as imagens do produto, por exemplo, temos o fone de ouvido. Eu sei que você entende essa cama. Feche isso. E então SRC é igual a quatro. Temos que referenciar as imagens. Produtos Slash, fone de ouvido IMG Slash. fone de ouvido é uma das imagens do produto que temos no armário com uma etiqueta de fechamento automático e, em seguida, a saída é a alternativa. Então, se essa imagem não carregar, vamos resolver problemas com a internet. Então, se essa imagem não aparecer no navegador, a alternativa, que é esse cara aqui, será exibida. E vamos dar a ele um nome de classe de IMG, simples assim, salve e vamos dar uma olhada. Aqui está o pessoal perfeito. Tudo limpo, mas não tão limpo quanto o esperado. Não trabalhei na imagem. Agora, vamos trabalhar nos demais detalhes. Aqui vamos ter outro td. Dê a ele um nome de classe de O'Donnell. Logo após a etiqueta de fechamento do T D, teremos outro td. Dê a ele um nome de classe de ordem d. Então, aqui teremos 4 de janeiro de 2023. Essa é apenas uma data imaginária, então você pode decidir mudar o título e duplicá-lo quatro vezes. Nome antigo, valor ou esse local ou status. Então, vamos supor que esse cara esteja fazendo um pedido da USC e, em seguida, o status como, como você está gastando. Então, agora teremos pedidos com status diferente. Portanto, teremos a permanência única de gastos recusada e aprovada. Então, para implementar essa funcionalidade, deixe-me mostrar. Ok, deixe-me fazer isso aqui. Eu vou acabar com os gastos por enquanto. Em seguida, vou renderizar uma função chamada boating, dar a ela um tipo aprovado mais próximo com a tag de fechamento automático. E então, quando você salva e faz o check-out no navegador, vai dizer que a navegação não está definida. Aqui, não é? Então, vá até o canto superior direito, estamos no componente, vamos definir a equipe de policiais náuticos. Defina-o para nossa função. Dentro da função, vamos pegar o tipo. E essa função retornará uma parte da interface do usuário. Nesse caso, vamos fazer um passeio de barco. Vamos dar ao botão um nome de classe de. Isso será encerrado. Suporte Macaulay. Vamos dar a ele um nome de classe de votação. Certo? Estamos no HTML interno. Vamos exibir o tipo assim. Então, com isso, poderemos especificar um status diferente para pedidos diferentes. Tudo bem, então poderemos ter um pedido pendente, aprovado em nosso console. Com certeza. Eles aparecerão em cores diferentes. Por exemplo, se o pedido for aprovado, vamos comercializar com verde. E se for recusado ou cancelado, vamos comercializar com vermelho. E se estiver pendente, vamos comercializar com amarelo. Então, isso nos ajudará a lidar com esse problema. Claro, isso não é um problema. Salve e confira o navegador. Ids. Ela está certa. Tudo apareceu conforme o esperado. E aqui está a votação aprovada. Portanto, o próximo passo é duplicar o TRO de um nome de classe da ordem TRO. Você vai destacar a partir das linhas 22, linhas 30. E então eu quero duplicá-lo cinco vezes. Mas, do seu lado, você pode decidir duplicá-lo quantas vezes quiser. Eu não fiz isso. Agora. Eu só vou mudar os dados, mas não acho que isso seja necessário. Então, vou me concentrar apenas no botão Aprovar para que possamos fazer o mesmo pedido. O resto, mas sim. Ok. Deixe-me fazer algo por você. Eu não quero que você se confunda. Aqui. Vamos fazer referência à capa e ela é JPEG. Salve e finalize a compra no navegador. Você pode ver aqui que eu só vou vestir uma jaqueta. Aqui. Eu vou fazer Gucci. Então eu acho que isso deveria ter sido o nome da marca, mas é legal. Você pode alterar os dados. Vamos supor que esse cara esteja fazendo um pedido do Reino Unido, então o status será cancelado. Por exemplo, e esse outro cara, vamos mudar o status deles. Isso vai ficar pendente. Alterações em pendentes. Vamos mudar isso para cancelar. Eu só quero que você veja como isso funciona. Então, no final, você pode realmente alterar todos esses detalhes, ok, você pode preenchê-los com algo diferente. E já temos as imagens do produto para que possamos abastecer os CROs com as imagens de minha escolha. Vamos deixar assim para que a palestra não dure mais do que isso quando você salvar o projeto. Bom. Então, aqui está, isso é o que alcançamos nesta palestra. E posso garantir que na próxima palestra, quando começarmos a estilizar esse componente, é claro, você já sabe como seria o final esperado. Isso é tudo por enquanto. Nos vemos na próxima palestra. 118. Widget de ordem de estilo 116: Certo, então vamos começar a estilizar esse componente. Então você só precisa dividir sua tela novamente. Traga o arquivo CSS para a direita e depois o componente que saiu. Vamos começar com o contêiner de pedidos. Aqui está o destaque e o texto. Venha aqui, pontinho ou o recipiente. E então o fluxo será preencher 20 pixels. Então, se o fluxo for dois, significa que serão necessárias duas unidades da tela. A sombra da caixa. Eu já tenho a sombra de caixa que estou usando. Então eu só tenho que vir aqui, destacar e copiar. E é claro que você já sabe como obter a sombra da caixa. Economize e vamos ver o que temos. Ok, bom. Você pode notar alguma coisa? Dê uma olhada. Perfeito. O ninho é o título do pedido. Realizado. O tamanho é de 20 pixels. A fonte, margem de trigo, certo? 20 pixels é bom. Aqui está. Estilize a tabela de pedidos. A largura é de 100 por cento. Espaçamento entre bordas. 20 pixels. Salve e finalize a compra no navegador. Bom. Está gradualmente tomando forma. O usuário do pedido. Vamos ter uma tela flexível, alinhar o centro dos itens. Portanto, o ninho é da ordem T, H, que é o cabeçalho da tabela de pedidos. Acho que está no topo aqui. Teste o alinhamento. Alinhe o texto à esquerda. Você pode ver que tudo está em bom estado agora, mas você não conseguirá perceber isso simplesmente porque a imagem está ocupando um grande número de espadas. Então, quando reduzirmos o tamanho da imagem, ela ficará perfeitamente bem. O próximo passo é estilizar a imagem. Qual é o nome da classe da imagem? Aqui está o ponto ou o IMG? A largura é de cinco pixels. A altura terá a mesma altura e largura. Seth? Você pode ver? Agora parece perfeitamente bom, conforme o esperado. Queremos especificar o raio da borda. Para ser um pouco curvilíneo. Cinco pixels nos ajudarão a fazer isso. Ao conferir o navegador, talvez você não consiga perceber isso simplesmente porque essa imagem específica é PNG. A imagem mostra você, você pode ver isso? As bordas são curvas. Então, para que fique bem, vou especificar a cor da borda. Vamos ter um pixel, vermelho sólido. Você pode mudar o Collado e ser criativo. Você pode ver agora o ajuste do objeto , o centro, a margem, certo? Dez pixels, salve. Linda. Você pode ver? Vamos continuar. A linha é estilizar a ordem dos pontos de barco. Deixa eu te mostrar esse cara aqui. O acolchoamento, cinco pixels. Não queremos nenhuma fronteira, raio de fronteira. Vamos fazer com que seja de cinco pixels. Salvar o ninho e a linha é aplicar cores de acordo com o status. Então, aqui aprovamos o console pendente. Portanto, se for aprovado, queremos que esse botão seja exibido em verde. Os riscos são cancelados. Não precisamos mostrar vermelho. E se estiver gastando, queremos que mostre uma espécie de cor amarela. Então, vamos fazer isso rapidamente. Pontos. Esse cara aqui, vamos copiar e colar, aprovado. Deixe-me te mostrar aqui. É do tipo de botão? Então, vamos ter a cor de fundo E5, FA, F2. E a cor da fonte vai ser meio verde. Sim, salve no navegador, recarregue. O status não é aplicado. O que aconteceu? Isso está correto. Consiste no fundo. Isso está realmente correto. Ok pessoal, olhem, vai haver espaço aqui assim. Ok. Se você escreveu assim, não vai funcionar. Então você só precisa espaçá-lo e depois Salvar. Vamos dar uma olhada no navegador agora. Linda, trabalhada. Consegue enxergar bem? Vamos aplicar essas toalhas ao resto do status. Então, eu vou copiar esse cara assim. Aqui, cole. Em seguida, vamos fazer ponto pendente. Certifique-se sempre de verificar se a grafia do nome do seu cluster está correta. Foi exatamente por isso que eu dividi a tela. Então, podemos dar uma olhada. Pendente. Tudo bem. Então, quando estiver pendente, a cor de fundo será na forma de amarelo, 12, 34ff f, f, e verá que a cor da fonte será de 32 por cento. Certifique-se de encerrá-lo e, em seguida, colocar parênteses, salve-o no navegador da forma esperada. Por fim, vamos implementar os estilos do console de navegação, conselho de navegação. Ou você pode ver o declínio no final. Não há absolutamente nada de errado. Eu te disse que é preciso ser criativo do seu lado. Ok? Tudo bem, vamos dar uma cor de fundo. Também vamos usar esse formato aqui. Desta vez, 35584. Isso nos dará a cor atlética que desejamos. A cor da fonte será D9 57. Salve no navegador. Eles são esses, dá para ver que tudo aparece conforme o esperado. Veja, parece extremamente bom. Isso é profissional. O aplicativo está extremamente bonito. Geralmente, esse é o nosso n. Nesta palestra, começaremos com o widget de membros. Te vejo então. 119. Componente de widget de membro: Nesta palestra, começaremos a criar os membros que fizemos. Aqui estão as técnicas? O widget de pedidos tem o dobro do tamanho do widget de membros. E conseguimos isso fazendo o flex two, o que significa que esse cara aqui tem duas unidades. Então, em atrizes significa que tem o dobro do tamanho desse cara aqui. Então, na palestra anterior, houve um erro que eu cometi. Eu esperava que você corrigisse esse erro. Então, abra o CSS doméstico. Isso deveria ser flexível. E então temos que flexionar duas, o que significa que está ocupando duas unidades da tela. Feito isso, vamos encerrá-lo. Comando B para abrir o Explorer. E logo, dentro do diretório de membros, vamos criar um novo componente chamado members. We jet dot g é genérico, o componente funcional. E, claro, também precisamos criar os membros do arquivo CSS correspondente (widget dot CSS). Tudo bem, então, rapidamente, vamos vincular o arquivo CSS aos membros da barra de pontos do componente. Nós usamos Jet Dot CSS. Aqui, satisfeito. Será em letras minúsculas, exceto por ter três componentes casa, e vamos renderizar os membros. Nós fizemos. Então, logo abaixo dos widgets de pedidos, vamos renderizar os membros. Aproximamos a tag de fechamento automático e sempre nos certificamos de importá-la na parte superior. Salve e finalize a compra no navegador. Você pode ver agora que temos os membros que tínhamos aqui. Vamos começar a criar o widget de membros. Abra os membros do E-jet. Então, agora, eu vou limpar isso. Vamos dar a esse div um nome de classe dos membros. Fizemos o contêiner, certo? Dentro da div. Vamos criar um espaço, dê a ele um nome de classe dos membros aos quais acabamos de nos relacionar. Dentro do HTML interno. Vou fazer membros recém-ingressados. Aqui vamos ter uma etiqueta UL, certo? Estamos na URL com o nome da classe dos membros com pelo menos caras. Eu quero ser um pouco mais rápido aqui nesta palestra. Então você só precisa seguir meu ritmo. E vermelho, onde está a etiqueta UL, teremos uma etiqueta LI. Dê a ele um nome de classe de membros, item da lista de widgets. Basta copiar, colar e fazer o item na lista. Vamos ter uma tag IMG, com uma barra de imagens iguais a SRC. Então, deixe-me mostrar algo que vai para o público. Aqui estão as imagens e aqui está o diretório de membros onde temos todos os membros, barra de imagem Members slash dc dot JPG. Feche-o e resolva um problema de Internet. Claro, você deve saber o que está ao ar livre. Dê a esse cluster de destino do IMD o nome do qual está no IMG, mais próximo da tag de fechamento automático. Vamos ver o que acontece na tela. Linda. Agora vamos ter um div, dê a ele um nome de classe de usuários do widget membro. Uma coisa que eu quero que você imite de mim é como eu passo o tempo escrevendo o nome da minha turma. Sempre me certifico de escrevê-lo na íntegra para determinar a intenção do DV. Então, quando outro desenvolvedor pega meu código, ele se torna muito fácil de ler e entender. Então, nesse caso, eles não terão problemas em definir paradas em meu código. Acho que você entendeu. Agora. Retro e D, se quisermos ter um span, atribua a ele um nome de classe ou nome de usuário do widget de membro. Eles veem Dominic se espalhar novamente. Dê a ele um nome de classe do widget de membro. Use um título. Ela é uma reativa em um valor nulo, mas está certa. Então, do lado de fora dessa div com o nome da classe dos membros que recebemos, vamos passear de barco. Dê a ele o nome da classe dos membros, os direitos de voto do widget estavam no barco. Queremos exibir um ícone. Então, o que vou fazer aqui é importar a visibilidade da interface do material. Então, aqui temos que renderizar cluster de visibilidade tanto da tag de fechamento automático quanto da parte interna. Também precisamos dar a ele um nome de classe para que sejam membros. Nós fizemos um ícone. E o teste será exibido. Pode ser lindo. Vamos salvar e marcar no navegador. Tudo bem, então aqui está o barco em que está o ícone. E quando começarmos a estilizar, faremos com que fique bonito. Portanto, não é necessário que a próxima fila seja duplicá-la quantas vezes quiser. Feito isso, você também pode alterar a imagem do usuário, o título e o resto deles. Ok, então eu vou fazer um para você e então você pode fazer o resto. Então aqui é DC Dominic. Vou fazer aqui. Eles também veem Victor. Ela é reativa. E deixe-me abrir as imagens e ver se consigo obter uma imagem muito bonita. Lady dot PNG. Então, aqui eu vou fazer o Lady Dot PNG Portable Network Graphics. Espero que você saiba que, ao salvar um, veja o que acontece. Ok, agora temos essa imagem aqui. Tudo bem, então, basicamente, isso é tudo por enquanto e, por favor, certifique-se de alterar as imagens e o título. Portanto, não há necessidade de eu fazer isso nesta palestra, porque quando eu fizer isso, a palestra vai demorar muito. Há um erro tipográfico aqui que eu não gosto. Então, isso deve ser escrito. Não gosto de cometer erros no meu trabalho. Eu gosto disso perfeito e arrumado. Tudo bem. Então, isso é tudo por enquanto. E na próxima palestra, começaremos a estilizar esse componente. Te vejo então. 120. 118 Styling O Widget de membro: Nesta palestra, começaremos a estilizar o componente de membros. Porque, por enquanto, parece que tudo está fora de forma. Simplesmente porque essa imagem está muito baixa. Ele está ocupando uma grande parte da tela. Então, vamos começar com a imagem. Claro, você deve saber como fazer isso. Pegue os membros que fizemos para a direita e, em seguida, leve os componentes de seus membros para a esquerda. Vamos começar com a imagem. Qual é o nome da classe da imagem? Img. O nome da classe é widget IMG. Copiar. Venha aqui. A largura é de 40 pixels, a altura de 40 pixels. Em seguida, especificaremos o raio da borda, 50 por cento, que será a metade da largura e metade da altura. E então ele vai dar um laço circular. Quando você salva e marca no navegador. E você vê agora que as coisas estão gradualmente tomando forma. Ok, vamos fazer com que seja alimentado por objetos. Acabou. Agora podemos começar a estilizar o resto da aula. Então, aqui, primeiro temos os membros que fizemos de contêiner. Por favor, certifique-se de que ele venha no topo. O fluxo será um. Então, isso vai levar uma unidade de toda essa porção. E, claro, você sabe, isso é pegar duas unidades, então isso é duas vezes maior do que isso, e então essa será uma unidade. Estou explicando isso de forma simples para que todos entendam bem o suficiente. Quando você salva e confere no navegador, você pode ver um lindo preenchimento. O preenchimento será de dez pixels. Margem esquerda. Vamos fazer com que seja de 20 pixels. Você salva e finaliza a compra no navegador. Bom. Então, a próxima linha de mandato são os membros, nós simplesmente morremos em casa. Desculpe, vamos fazer isso aqui. O tamanho da fonte, 20 pixels, largura da fonte, vamos fazer com que ela seja 100. E, claro, temos que especificar a sombra da caixa desse contêiner. Eu te disse que tenho uma sombra de caixa de fantasias que uso no meu projeto. Então aqui está. Tudo bem, ótimo. O ninho são os membros com pelo menos a margem zero. Estofamento. O estilo da lista. Tenho certeza de qual é o estilo da lista. Você vê esse ponto aqui. Não sei se você consegue ver claramente esses pontos, esses pontos, todos esses pontos que indicam esses itens da lista. Então, queremos retirá-lo e faremos isso quando você salvar e finalizar a compra no navegador. Aumente um pouco o zoom. Você pode ver que ele sumiu. What Nest, eu acho que são os membros com pelo menos um item. Vamos ter uma tela flexível, alinhar os itens ao centro, justificar o conteúdo, espaço entre os itens. Então, vamos fazer um espaço entre salvar. E assim você pode ver a diferença. Você pode ver? Então, flexionamos e depois criamos esse espaço intermediário. Então, ao remover os flocos e salvar o projeto, veja onde você vai ter. Agora eu acho que você também entende a utilidade do fluxo. Quando você retira o espaço entre eles, deixe-me mostrar o que é bom. Eu te mostro esses. Você pode ver agora que tudo está agrupado. Dê uma olhada. Você vê que agora, quando você retira o conteúdo que justifica ser um espaço entre eles, isso criará um espaço intermediário. Todos esses duros. Acho que estou fazendo o meu melhor para que você entenda o CSS, independentemente de, se estivermos reagindo, margem da esquerda para a direita ser de muitos pixels. A parte inferior tem 20 pixels. Linda. Tudo bem, estamos quase terminando com o estilo. O melhor são os membros desse usuário. Vamos fazer com que exiba direção flexível, flexível. Queremos isso de cima para baixo. Então, eu vou fazer cólon. Agora você pode ver que temos o nome e depois temos o título do trabalho. Então, antigamente, eles eram todos escritos na mesma linha. Deixe-me mostrar quando eu retiro a direção flexível para ser uma coluna. Você pode ver agora o eu na mesma linha? E então, quando eu flexionar a direção para a coluna, vou começar de cima para baixo. Dê uma olhada. Os próximos na fila são os membros. Recebemos nome de usuário. Só precisamos especificar a fonte wheat. Vamos fazer com que veja 100. Os membros, nós usamos um título. O tweet da fonte é 300. Portanto, o melhor é o botão do widget de membros. Esse botão está aqui. Queremos fazer com que fique bonita, em um minuto, pessoal, antes de continuar, eu tenho que cortar essa imagem, chegar a x. Temos que colocá-la logo após os membros com pelo menos o item aqui. Assim. Estou tentando resolver isso. Então, é claro que eu já te disse isso várias vezes. Portanto, o melhor é a votação do widget dos membros. Membros, nós andamos de barco. Vamos fazer com que ele exiba a flexibilidade. Vamos alinhar os itens. Centro. A fronteira. Não queremos nenhuma borda ao redor do corpo. Mas queremos especificar o raio da borda para que fique um pouco curvilíneo. D é dez pixels, preenchimento, sete pixels, dez pixels aqui. Portanto, a cor do plano de fundo e a cor da fonte serão cinza. O ponteiro do cursor. Por fim, vamos estilizar o membro. Fizemos um ícone, que é esse ícone aqui que aparece dentro do corpo. O tamanho da fonte é pixels do sistema. Margem direita. Cinco pixels. Quando você economiza. E vamos ver o resultado final. Você pode ver que tudo parece perfeitamente bem, conforme o esperado? Então, terminamos com a página inicial. E com certeza, isso é extremamente bonito. Isso é de alto nível. Eu adoro isso. Tudo bem, então isso é tudo por enquanto. Na próxima palestra, começaremos a especificar nossas rotas. Portanto, quando você clica no usuário, ele deve levá-lo para os EUA como empresas. Quando você clica nos produtos, você também o levará à página do produto ou ao componente de três produtos. Ok. Então, se você quiser mudar o nome e o título dessas coisas aqui, você pode fazer isso do seu jeito. Por enquanto. Decadência. 121. 119 implementando as rotas: Em um cenário real, um aplicativo como esse deve ser capaz de redirecioná-lo para outro componente quando o link for cortado, certo? Qual é a navegação lateral quando clicamos em usos, o aplicativo também deve ser capaz de ler diretores para reutilizar como página. Quando clicamos em produtos, ele deve ser capaz de nos redirecionar para a página do produto. Portanto, para implementar essa funcionalidade, precisamos usar uma biblioteca externa chamada React Router. Não acesse rapidamente o react router.com. E aqui temos a documentação. E, claro, no seu tempo livre, você pode decidir ler a documentação para ter uma compreensão completa do roteador React. Vamos prosseguir rapidamente. Vá para o VS Code. Para prosseguir. Primeiro, temos que instalar o roteador React, certo? Estamos no terminal. Vou fazer o Controle C para parar o neurônio atual no servidor e escrever nele o diretório do cliente. Vou fazer o gerenciador de pacotes Node, install, react, dash, router, dash dome. Mais simples que apertar a tecla Enter para disparar. A instalação está em andamento. Cúpula do roteador React instalada, com sucesso. Deixe-me mostrar rapidamente o Comando P e, em seguida, procure o arquivo package.json. E aqui está na internet, cisteína. Feche isso. A próxima linha do termo é criar os componentes que queremos redirecionar para saber se o link foi clicado. Então, abra as páginas dos componentes. E então, logo nos EUA, pelo menos vamos criar um novo componente chamado lista de usuários dot j para gerar os componentes funcionais. Vamos criar rapidamente o arquivo CSS correspondente. Bom. Feche o Explorer. Abra o aplicativo. G é perfeito. Então, o próximo da fila é importar o roteador do navegador, rotas, rotas do React, roteador, dune, sands fake, certo? Deixe-me te mostrar. Vamos importar o roteador do navegador. Rotas, rotas mais calmas do React, roteador, trajeto, não. É tão simples quanto isso. Não importei todos esses recursos do reator, pois o melhor é encerrar todo o aplicativo com o roteador do navegador. Então, só precisamos limpar esse div com o nome da classe do aplicativo. Não é absolutamente necessário. Tudo bem, o aplicativo está reclamando simplesmente porque o elemento GSS precisa ser agrupado em um nó principal. E agora o nó principal será o roteador do navegador. Destaques. Mantenha pressionada a tecla de opção no teclado. Toque na tecla de seta para cima para movê-la para dentro. Se essa opção não funcionar para você, basta destacar o comando X para recortar e colá-lo no roteador do navegador. É tão simples quanto isso. Vamos implementar rapidamente as rotas. Venha aqui. Eu vou fazer rotas que compreendem todas as rotas que teremos neste curso. Então, estamos em vitrines. Teremos nossas rotas individuais. Então eu vou fazer rotas, especificar o caminho e o caminho. Só precisamos indicar uma barra para frente. Portanto, isso é um indicador para o componente doméstico. Então, tendo feito isso, nós realmente temos que especificar o componente de preocupação. E então eu vou fazer a aquisição de elementos, pegar esse cara aqui e colar aqui. Certifique-se de excluir o espaço intermediário. Assim, tudo legal. E também queremos criar uma rota para a página ou componente da lista do usuário, por assim dizer. Então, vamos ter uma rota até aqui, certo? Estamos na rota. Vamos especificar o que foi dito acima. Será uma lista de usuários reduzida. Em seguida, vamos especificar os elementos. Os elementos neste caso se referem aos componentes de preocupação. E agora vamos ter. Pelo menos para o usuário, mais perto da tag de fechamento automático. E, por favor, certifique-se de importá-lo na parte superior. Assim como o formato, o código com mais bonito parece limpo. Agora vamos testá-lo. Destaques. Vou copiar tudo diretamente entre aspas e no navegador. Portanto, teremos no mínimo 3.000 usuários de slash localhost. Quando você pressiona a tecla Enter. Diz que esse lado não pode ser alcançado de forma alguma. É simplesmente porque precisamos novamente iniciar o servidor. Venha aqui. Tudo bem, estamos no terminal integrado VSCode. Verifique se você está no diretório do cliente. E então eu vou fazer o Node Package Manager, iniciar o servidor assim. E no navegador. Você pode ver agora que temos a página do usuário. Linda. No entanto, eles estavam trabalhando conforme o esperado. Mas, por enquanto, quando você clica em Usuários, nada acontece. Vamos implementá-lo rapidamente. Voltar ao VS Code. Abra o lado superior do Node.js, role para baixo. Ok, então esta é a casa aqui. Temos que encerrar esse item da lista, certo? Estamos no link. Então, vamos especificar o link aqui. E eu vou fazer aqui, link para a página inicial. Então, também, especifique a barra que serve como ponteiro para a página inicial. Por padrão, é assim que especificamos a página inicial. Em seguida, destaques. Mova-o novamente para a direita no link. Ok, aqui está o usuário. Especifique o link. Hum, por favor, certifique-se de importar o link do roteador React fazendo isso aqui? Ok, então aqui vamos fazer um link para. Portanto, precisamos especificar a rota que nos levará à página do usuário. Claro, já fizemos isso antes. Então, só precisamos voltar para o app.js e copiá-lo assim. Certifique-se de que isso seja exatamente o mesmo com o que você está almejando aqui. Cole-o assim e, em seguida, destaque o item da lista. Mova-o diretamente no link. Vamos formatar o código com mais bonito. Parece bom. Tudo bem, salve o projeto no navegador. Então, quando clico na página inicial, esgoto a página inicial, quando clico em Usuários, nos leva à reutilização ou velocidade, ou você usa como componente, por assim dizer. Portanto, o aplicativo está funcionando perfeitamente, conforme o esperado. Na próxima palestra, começaremos a implementar a página do usuário. Isso é tudo por enquanto. Nos vemos na próxima palestra. 122. Tabela de lista de usuários: Nesta palestra, vamos implementar o componente de lista de usuários. Basicamente, teremos uma tabela mostrando os detalhes do usuário e seus pagamentos. Portanto, essa funcionalidade será implementada com a tabela de dados do material UI. Acesse rapidamente o MU i.com e pesquise uma tabela. Aqui, é mei.com? Certo? Um na caixa de pesquisa. E vamos nos arrumar para a mesa aqui. Temos várias tabelas que podem ser usadas para criar vários aplicativos. Temos aqui a tabela básica, os dados da tabela. Temos a mesa densa e muito mais. Então, certo? Neste curso, usaremos os dados da tabela. Portanto, você tem a opção de verificar um usuário individual também selecionar todos os usuários. Você pode classificar os itens aqui. Podemos optar por uma classificação não solicitada por ordem decrescente. Você pode filtrar, ocultar ou mostrar coulombs. Portanto, essa tabela é, na verdade a melhor para o aplicativo que estamos criando. Então, vamos usar essa tabela. Role para baixo. Aqui mesmo. Você verá esse ícone de tag. Clique para abrir o código. Para implementar essa tabela. Primeiro, precisamos instalar essa biblioteca. Destaque tudo diretamente entre aspas simples e depois copie. Volte para o VS Code, abra o terminal integrado, certo? Já o abrimos. Então, vou parar o servidor atualmente em execução. E então eu vou fazer o comando V do npm install para colar o que copiamos do site do MUL, apertar a tecla Enter para que ele inicie. Então, com isso, poderemos fazer uso da tabela de dados instalada com sucesso. Então, aqui temos as colunas e as colunas serão salvas como cabeçalho da tabela, certo? Isso vai nos salvar da forma mais madura possível, como nome, sobrenome, idade, nome completo. Então, a coluna aqui é responsável por isso. Então, aqui temos a linha e a linha será salva como os dados que serão usados para preencher a tabela. E quando você observar a tabela com cuidado, você definitivamente perceberá que é verdade. Ok, então aqui temos o sobrenome para ser neve. O primeiro nome é John e depois 35 anos. Venha aqui. Lembre-se de que resolvemos esse alarme. Ok, então aqui temos John Snow como sobrenome. O primeiro nome é John, o sobrenome é neve. A idade é 35 anos. Então, todas essas coisas aqui, vamos salvar como dados para preencher a tabela. Aqui mesmo. Vamos renderizar a grade de dados. Vamos definir regras como linhas, que é esse cara. E então vamos definir colunas como colunas. Esse cara aqui. E aqui temos a opção de linhas por tom. Aqui está definido como cinco. Então é por isso que você vai ter 12345. Então, aparecerão cinco nessa tabela. Mas você pode decidir aumentar a opção de marionete ROS para qualquer número de sua escolha. E aqui temos a seleção da caixa de seleção. É tão simples quanto isso. Então, vamos implementar isso diretamente em nosso aplicativo. Volte para o código VS. Vou destacá-los, apagá-los. Vamos dar a esse div um nome de classe. E o nome da classe será lista de usuários. Então, logo no momento do div, vamos renderizar a grade de dados. Mas, por enquanto, basta copiar a coluna Highlight Command C para copiar, vir aqui e colar, voltar também. Temos que copiar esse impulso. Então, destaque-os e limpe-os também. Não precisamos dos destaques das linhas 21 a 22 e eliminá-los. Bom. Volte. Vamos copiar as linhas. E por último, temos que copiar os dados, concorda? melhor colá-lo aqui. Certo, vamos estilizar rapidamente o nome dessa classe. Copiar. Venha aqui. Vou fazer uma lista de usuários de pontos e vamos flexionar. Vamos fazer quatro e ver o que temos a bordo. Abra o terminal e então teremos que começar o projeto. Feito isso, vamos vincular rapidamente. Componente com o arquivo CSS. Então, aqui eu vou fazer o dot slash, user least dots, CSS, Save e finalizar a compra no navegador. As identidades. Consegue ver isso? Linda? Vamos tentar. Eu verifico este item e ele é selecionado. Quando eu procurei. Está funcionando perfeitamente bem. Você vê isso? Olha, amigos, isso é fantástico. Podemos classificar por ordem crescente. Veja, você pode filtrar. Você consegue ver por nome, sobrenome, idade do nome completo? Você pode fazer muita coisa por aqui. Tudo bem, então o próximo na fila é preencher a tabela com nossos dados. Porque esses dados não são relevantes para o aplicativo que estamos criando. Volte para o código VS. Vamos deixar o id, depois a disputa pelo primeiro nome, vamos alterá-lo para nome de usuário. Aqui. Vamos alterá-lo também para usar um nome, dar a ele uma largura de 200. E isso será alterado para e-mail, e aqui estará o e-mail. Ok, vamos fazer com que seja 200, que é a largura. E aqui temos o campo para a era. Vamos mudar a borda para status. Status. Status. Vamos apagar o número. A largura é 90. E aqui temos o campo para o nome completo. Vamos mudar esses dois. Pagamento. Exclua a descrição. Também classificável. Nós vamos limpá-lo. Depois, a largura. Uma vez que esse T é suficiente. Ótimo. Tudo legal, eu adoro isso. Então, aninhe outro campo extra. Eu só tenho que destacar, duplicar. Vou agir quando esse T for suficiente. Bom. Feito isso, ao salvar e finalizar a compra no navegador, você vê que agora temos o cabeçalho como nome de usuário, e-mail, status, pagamento e ação. Então, vamos implementar a regra use as, que salvará como os dados para preencher a tabela. Então, vou destacar as linhas 32 a 39. Limpe-o. A ideia é uma delas. Vamos deletar o sobrenome, e esse será o nome de usuário. Certifique-se de que seja exatamente o mesmo com o celoma. Então, o nome de usuário que vou usar é Victor Dominic. Então, aqui vamos incluir o avatar. E o avatar estará aqui. Vou apenas copiar o URL da imagem, mas quero usar e, com certeza, essa é apenas uma imagem aleatória que obtive da Internet. Ok, vamos limpar isso. Aqui. Vamos receber um e-mail. E o status do e-mail ficará ainda mais calmo. O pagamento. Isso é tudo. Vamos formatar o código com mais bonito. E quando você formatar o código, ele ficará exatamente assim. Então, o que vou fazer agora é destacar e duplicar quantas vezes quiser. Então, aqui, você deve alterar o nome de usuário, o id e o resto dos detalhes. Mas para mim, só estou interessado em mudar a identidade certo? Portanto, o nome de usuário aqui pode ser Dominic Daisy. O avatar pode ser qualquer imagem aleatória na Internet. O e-mail, você pode alterar o e-mail para outra coisa. Você pode fazer com que eles estejam ativos ou não ativos. Você pode especificar um valor diferente aqui. Então, quando você salva e verifica o navegador, os IDs, você pode ver que tudo parece estar funcionando perfeitamente bem. Mas ao observar a tela, você perceberá que a ação aqui está vazia e, em seguida, teme que isso seja feito no futuro. Então, aqui vamos ter um botão para editar, botão para excluir. Estamos indo para lá em breve. Tudo bem, então isso é tudo por enquanto. E na próxima palestra, vamos refatorar o código. Então, ao refatorar o código, quero dizer simplesmente que teremos os dados em um módulo separado. O código parece um pouco feio porque temos os detalhes aqui, e isso não é nada legal. Então, na próxima aula, vamos separar os dados em um módulo diferente. Nos vemos na próxima palestra. 123. 121 Refactoring: Nesta palestra, vamos refatorar o código. Ao refatorar, quero dizer simplesmente que vamos separar os dados dos componentes da interface do usuário. Então, vá rapidamente para o código VS. E deixe-me mostrar como fazer a abertura do Explorer. E certo, não seria o SRC. Vamos criar um novo pacote chamado arquivo de dados, certo? Estamos no arquivo de dados. Vamos criar um novo arquivo chamado data do usuário. O ponto j está aqui. Teremos os dados do usuário. Então, vou fazer um spot const, usar como dados, configurá-lo como uma matriz vazia e abri-lo. Então, certo, estamos nessa matriz, vamos colar as linhas. Então, Heron para usar como lista. Deixe-me mostrar aqui as linhas. Então, vou destacar as linhas 208290, cortá-la. Só temos que limpar isso da heroína para usar esses dados. Vou colar isso tão simples quanto isso. Agora, vamos usar o mínimo de confusão. Vamos importar os dados dos usuários do arquivo de dados e cortar os dados do usuário. Então, aqui, as linhas serão iguais aos dados dos usuários. Quando você salva e finaliza a compra no navegador. Aqui, tudo está funcionando perfeitamente , conforme o esperado. Isso é tudo por enquanto. E na próxima palestra, veremos como adicionar dados personalizados. Te vejo então. 124. 122 Adicionando dados personalizados: Nesta palestra, vamos personalizar a tabela. Tudo bem, então veremos como adicionar nosso próprio item personalizado, certo? Estamos na mesa. Então, rapidamente, deixe-me mostrar como fazer isso com o código VS. Então, aqui, eu vou ficar mais calmo. Vamos adicionar nossos campos e dados personalizados. E então poderemos fazer isso com o método render cell. O método render permite que você retorne um React Node em vez de uma string. Então, aqui eu vou fazer uma coluna de célula aleatória para abrir e fechar parênteses. E vamos usar um parâmetro. Params, defina-os de acordo com nossa função e direitos internos, retornaremos um elemento de reação, que neste caso div, com o nome da classe do usuário, certo? Estamos nesta divisão, vamos ter uma imagem. Agora. A imagem será igual a params dot rho dot avatar image show you command P, e então vamos usar nossos dados, ponto g is, então aqui está o avatar. Tudo bem, então queremos recuperar essa imagem e exibi-la com a tabela, é tão simples quanto isso. Venha aqui. Alternativa aqui, vamos fazer conexão com a Internet. Aproxime-se com a etiqueta de fechamento automático, diretamente no interior. Vamos fazer o nome de usuário params dot rho dot seven, finalizar a compra. O navegador. A ideia é você pode ver que a imagem é extremamente grande, então não pode aparecer corretamente. Vamos estilizar rapidamente a imagem para que ela pareça limpa. Certo? Estamos na lista de usuários. Ok, deixe-me te mostrar. Então, aqui só precisamos copiar o nome da classe AMD. Opa, acho que temos que dar o nome da turma. Sim, vamos fazer isso rapidamente. Forneça o nome da classe do usuário IMG, destaque e copie. Venha aqui. Usuário Dot IMG. Vamos dar a ele uma largura de 40 pixels, altura de 40 pixels e, em seguida, raio de borda. Vai ser de 50 por cento. Margem, certo? Nove pixels. O objeto se encaixa. Vamos torná-lo seguro. Você pode ver que agora temos o perfil, o ninho e a cal são para trabalhar na ação. Então, logo abaixo dessa ação, queremos ter um botão de edição e um botão de exclusão. Portanto, quando clicarmos no botão Editar , precisaremos usar nossa página de perfil, onde também poderemos editar e atualizar usuários. Quando clicamos no botão Excluir, ele excluirá um item específico, certo, para colocar na tabela. Se você optar por excluir esse cara, ele será excluído. Ok. Vamos deletar o item pelo ID, heroína pelo código VS. E vamos implementar as ações. Vamos fazer exatamente a mesma coisa. Então, aqui, é claro, queremos retornar um nó. Então, vamos usar o método de célula de renderização. Recebe um parâmetro. Então, aqui, agora podemos retornar um elemento de reação. Então aqui vamos ter um div, esse div é um nome de classe do contêiner de ação, certo? Estamos nesta divisão, vamos fazer um barco, dar a ele um nome de classe de usuário. Então, diretamente no HTML interno, faremos edições. E aqui teremos o botão Excluir. Mas, nesse caso, usaremos o ícone de exclusão dos ícones na parte superior. E aqui vamos importar, excluir, esboçar. Desse cara aqui. Então, aqui teremos a linha Delete Art mais a queda da tag de fechamento automático. Vamos dar a ele um nome de classe de delete, least, save, a menos que eles sejam chamados de navegador. você pode ver que agora temos o botão Editar entanto, você pode ver que agora temos o botão Editar e excluímos a votação. Não está bonito como esperado. Então, vamos estilizá-lo rapidamente e fazer com que tenha uma aparência melhor. Use todo esse CSS. usuário do Dod edit precisa verificar se a grafia está correta. Ok. Para mim, você pode ver agora aqui que está escrito em caixa de karma e aqui. É exatamente por isso que eu gosto de dividir a tela. Bom. Vamos fazer com que a fronteira seja conhecida. Nós realmente não nos preocupamos. Então, o raio da fronteira. Vamos fazer com que seja de cinco pixels. Estofamento. Cinco pixels, dez pixels. Cor de fundo. Vamos torná-lo azul mais escuro. E a cor da fonte será branca. Margem, certo? A margem direita é de 20 pixels. Quando você salva no navegador. Você pode ver agora que o botão está lindo. Vamos dialisar o ícone de exclusão. Aqui. Vamos ter pontos. Deixe-me copiá-lo diretamente deste lugar para não cometermos erros. A cor será vermelha e a causal. Vamos fazer com que ela esteja segura. Agora, tudo parece clássico. Eu adoro esses. Tudo bem, então há algo que eu quero que você anote. Meu pescoço. Clique em qualquer parte da tabela para que ela seja selecionada. Você vê que é necessário ser preciso. Então, quando eu recarrego a página, queremos que essa difícil seja selecionada somente quando o usuário clica nela, assim. Ok? Portanto, não queremos que esse tipo de coisa aconteça. Não é nada bom. Então, vamos voltar ao código VS e depois usar como lista. Role para baixo. Aqui mesmo. Desabilitaríamos a seleção ao clicar. Recarregar. Ok. Agora você pode ver que quando eu clico aqui, isso não afeta a caixa de bate-papo. Portanto, a única maneira de selecionarmos um item é verificando-o diretamente. Você pode ver que isso precisa ser preciso? A linha Vanessa é implementar a funcionalidade de exclusão. Então, acho que podemos fazer isso na próxima palestra. Te vejo então. 125. 123 Botão de exclusão: Nesta palestra, vamos implementar o botão Excluir. Portanto, quando o usuário clicar na parte inferior Excluir, poderemos excluir um item específico da tabela. Ok, vamos implementá-lo rapidamente. Não precisei usar o VS Code. Bem no topo. Vamos declarar a variável de estado necessária a ser usada. Aqui eu vou fazer const, data, set data. Portanto, o estado inicial serão os dados do usuário. E, por favor, certifique-se de importá-lo usado na parte superior. Aqui. É difícil, certo? Então, agora estamos definindo o estado inicial a ser usado como dados, que são os dados corretos para trazer o arquivo de dados. Nest é definir a função. Nós vamos ter aqui. Consiste em cem cliques, igual, defina-o para sua função. E então, dentro da função, vamos definir dados em pontos de dados algumas vezes. Portanto, temos que examinar a tabela e remover um item específico com base em seu ID. Sim, então vamos fazer isso. Aqui. Vamos pegar um item e eu vou fazer a identificação do ponto do item. Vamos especificar o botão ao clicar, à direita, dentro do esboço de exclusão. Vamos especificar o onclick. Agora. Vamos ligar para o identificador, clique aqui. Na verdade, é bom. Alteramos essa função para lidar com exclusões. Tudo bem, então esse nome é bastante relevante para o propósito para o qual o botão foi criado. Aqui, 200 deletam. Exatamente assim. Então, aqui vamos pegar os parâmetros dot rho dot id. Então, na linha, temos que pegar os dados, que é esse cara aqui. Esse cara aqui está mantendo o estado inicial e o estado inicial acabou sendo usado como dados. É tão simples quanto isso. Então, aqui só precisamos ir até a tabela e excluir um item específico com base em seu ID. E depois disso, também precisamos atualizar a tabela, salvar no navegador. Tudo bem, diz que o ID não está definido. Aqui. Ok, vamos ao nosso código. Estrague tudo, deixe-me te mostrar. Tudo bem, então temos que pegar um ID aqui como parâmetro seguro no poema do navegador. Vamos tentar clicando no botão excluir. Então você só precisa ficar de olho nisso. Quero excluir este item com o ID de cinco. Ok? Veja, o item era a ideia de cinco ter sumido. Agora, deixe-me excluir o item com o ID de dois. Você vê que desapareceu. Quando continuamos excluindo. Você pode ver que tudo está funcionando perfeitamente, conforme o esperado. Mas quando você recarregar a página, teremos os itens. Mas você sabe por quê? É simplesmente porque não o estamos armazenando em algum lugar. Então não se preocupe, isso não é grande coisa. Tudo bem, então agora a próxima fila é implementar o botão Editar. Quando clicamos no botão Editar, queremos passar o ID e os detalhes do usuário para uma nova página. Deixe-me te mostrar rapidamente. Deixe-me formatar o código. Esse é o botão de edição. Certo? Agora. Eu só tenho que especificar a senhora, destacar a navegação e movê-la para dentro. Então, temos que vincular à barra, barra do usuário, assim. Em seguida, params dot rho dot ID. Tudo bem, agora estamos passando o ID para uma nova página. Vamos salvar e ver o que temos no navegador. O link não está definido, ok, vamos importá-lo rapidamente. Importa o link do roteador React para salvar no navegador. Vamos tentar. Você vê isso? Agora, ao observar a banheira, você verá um item com o ID de um. Deixe-me te mostrar novamente. Vou clicar neste item com o ID de cinco. Você pode ver aqui? Agora temos um item com o ID de cinco. Isso é tudo por enquanto. E na próxima palestra, começaremos a criar o perfil do usuário, que é a velocidade do usuário. Te vejo então. 126. Perfil de usuário: Na palestra anterior, implementamos o mínimo do usuário. Tudo bem, então agora, quando eu clico no botão Editar, ele vai transmitir a inflamação com a ideia de uma para uma nova página. Você pode ver aqui que temos o ID de um. E aqui estamos em uma nova página. Volte. Quando eu clico no botão Editar do usuário com o ID de cinco, vou passar o ID para uma nova página, bem como os detalhes do indivíduo. Consegue ver isso? Então é isso que vamos implementar nesta palestra. Por aqui. Talvez você não veja nada diretamente na tela. Então, vamos começar a implementá-lo rapidamente. Vá para o código VS. A primeira coisa que faremos é implementar a rota. Abra o aplicativo Js. Aqui mesmo. Vamos ter a rota, especificar o caminho. Então vai ficar assim. Barra, os usuários cortam a coluna e, em seguida, o ID do usuário. Agora, os elementos serão os componentes reais para os quais queremos redirecionar. Nesse caso, será o perfil do usuário. Certifique-se de importá-lo na parte superior. É tão simples quanto isso. Salvar. E agora vamos continuar usando nosso perfil. Vamos vincular rapidamente o arquivo CSS ao componente. Limpe isso. Vamos dar a esse div um nome de classe do contêiner superior do perfil. Então, dentro dessa div, teremos outra div com o nome da classe do contêiner do título do perfil, logo dentro. Vamos ter uma tag principal, dê a ela um nome de classe ou título de perfil. Agora vamos fazer um passeio de barco. Dê a ele um nome de classe de perfil, adicione direitos de voto no HTML interno que vou criar usuário. Ok? Então, logo após o fechamento da div com o nome da classe do container tidal de perfil, teremos outro div, atribua a ele um nome de classe de container de perfil. E então um div com o nome da classe de profissional, certo? Dentro do div com o nome da classe do perfil. Claro. Vamos ter outro div com o nome da classe Deep show TO logo dentro, vamos ter uma tag IMG, igual a SRC. Vou copiar uma imagem aleatória na Internet e colá-la aqui. Todo esse link está certo, não ajudaria? Aqui, não é? Tudo bem, então vamos rapidamente dar a ele um nome de classe do programa de perfil IMG. Vamos fechá-lo com a etiqueta de fechamento automático. Logo após a imagem. Vamos ter outro div. Dê a ele um nome de classe. Detalhes do perfil, certo? Nos detalhes do perfil, teremos spam. Mostre algumas configurações, coisas como o nome do usuário, o título e o resto. Vamos dar a isso um nome de classe do título do meu perfil. E o título que vou fazer reagir, o desenvolvedor do react. Então, logo após a divisão final da parte superior do sapato de perfil, teremos outra div. Dê a ele um nome de classe de perfil, parte inferior do sapato, assim. Em seguida, teremos um espaço com o nome da turma, perfil e título do programa. Vamos usá-los para exibir os detalhes da conta dessa forma. Vamos ter um div com o nome da classe do perfil Mostrar informações. E por dentro, teremos alguns ícones aqui. Para isso. Vamos até o topo. Importe todos os ícones necessários para o perfil do usuário. Então, logo no topo, vou fazer, em parte, vamos importar a identidade PEM, calendário mais calmo hoje. Localização mais calma, pesquisando, mais calmo, masculino, contorno, coma, Android completo e publicação. Tudo foi importado dos materiais do painel MY Slash Icons. Claro que você sabe que aqui eu vou ter a identidade deles, fechá-la com a etiqueta de fechamento automático. E logo em seguida, vou dar a ele o nome da classe do ícone de exibição de perfil que está no lugar abaixo, aqui, teremos um espaço, assim como o nome da classe do perfil, como título. Tudo bem, então vou salvar o projeto e depois vamos ver o que temos no navegador. Tudo bem, então a imagem está realmente ocupando toda a tela. Então, vamos estilizar rapidamente a imagem. Venha aqui, certo? E o perfil CSS. Ok, primeiro, vamos dialisar o contêiner superior do perfil. Esse cara aqui, Highlight Copy, venha aqui, dots profile top container. E então teremos o flex para ser seis. Ele ocupa essa unidade da tela. E então vamos especificar o preenchimento será em pixels de treinamento. Quando você também confere o navegador, talvez não veja as alterações aqui, mas observará que a barra lateral é, na verdade, menor. Tudo bem, então vamos estilizar rapidamente a imagem para ver mais de perto o que fizemos até agora. Aqui, o nome do cluster da imagem é profissional, IMG. Só precisamos especificar o tamanho da imagem. Eu vou fazer com que a altura seja, vamos fazer com que seja de 40 pixels. Largura. Vamos fazer com que seja de 40 pixels. É simples assim. Quando você salva no navegador, os IDs. Perfeito, então é isso que temos por enquanto. Vamos continuar. Volte para o VS Code. Vamos finalizar o estilo da imagem para que não precisemos usá-la. De novo. Vamos dar a ele um raio de fronteira. 50 por cento. O objeto se encaixa. Vamos fazer com que ele cava, salve e confira no navegador. Ok, perfeito. É bom assim. Mas o que vou fazer agora é mudar a altura e a largura. Vou mudar para 100 fotos. Eu quero que a imagem seja um pouco maior. Nossos direitos, eu estou bem com isso. Assim, você pode manter qualquer tamanho no final. Mas para mim, é exatamente disso que eu gosto. Perfil GAS. Então, aqui, vou destacar essa div com o nome da classe do perfil, mostrar informações das linhas 25 a 27. E então eu vou duplicá-lo quatro vezes. Então, temos que mudar o ícone e os detalhes. Então aqui vai estar o calendário de hoje. E eu estou aqui. Eu só tenho que especificar as ações. Vamos supor que deveria haver um número de telefone. Então eu vou fazer e fazer o que você quiser. Eles serão delineados. Então, vou apenas para do@gmail.com. Aqui teremos localização e pesquisa. Então eu posso ir para Nova York, economizar. E vamos ver o que temos no navegador. Ou escreva. Linda. Vamos passar para a próxima seção. Ok. Então, logo após o encerramento da divisão profissional, deixe-me mostrar que este é o sapato de perfil. Então, logo após a div de encerramento, que fecha na linha 54, se você estiver realmente seguindo minha liderança. Vamos ter outro div, dê a ele um nome de classe de atualização de perfil. Vamos ter um período. Dê um nome de classe, título de atualização de perfil. Vai fazer em D. Agora, vamos ter um formulário. Certo, estamos na forma. Ok, então vamos especificar o nome da classe. Perfil, empresa de atualização. Vamos ter um div aqui, dê a ele um nome de classe de atualização de perfil à esquerda e à direita. Dentro dessa div, teremos outra div. Dê a ele um nome de classe dos itens de atualização do perfil. Em seguida, teremos um nome de perfil de etiqueta. Aqui teremos uma tag de entrada. O tipo é um teste quádruplo, o espaço reservado. Vamos dar a ele um nome de classe de atualização de perfil. Imputos. Feche isso. O que vou fazer agora é destacar o div com o nome da classe do perfil, atualizar o item, destacar tudo dentro e depois duplicá-lo quatro vezes. Bom. Agora vamos mudar esses dois nomes completos. Então. Serão e-mails. Aqui. Podemos fazer o número de telefone. Aqui, podemos resolver isso de forma tão simples quanto isso. Então, logo após a divisão de encerramento da atualização do perfil, deixei este dv aqui. Deixe-me te mostrar novamente. Aqui está a div com o nome da classe de atualização de perfil à esquerda, logo após a div de fechamento, que fecha aqui. Vamos ter outro div com o nome da classe atualização de perfil, certo? Certo, dentro desta div. Vamos dar a ele um nome de classe de perfil, atualização ou upload. Agora vamos ter uma tag IMG, SRC equa. Novamente, vou copiar a mesma foto e colá-la aqui. O link desta imagem aqui, copie e cole. Vamos dar à imagem um nome de classe de atualização de perfil, IMG. Aproxime-se com a etiqueta de fechamento automático. Logo abaixo da imagem, teremos um rótulo. Html é igual a um arquivo. Feche isso. E aqui vamos chamar o ícone Publicar. Feche com a etiqueta de fechamento automático. Vamos dar a ele um nome de classe do ícone de atualização de perfil. Aqui, teremos uma tag de entrada fechada diretamente no tipo de arquivo principal. O id, um qualificador. Vamos dar um pouco de estilo. A tela será conhecida. Então, vamos testá-lo. Salve o navegador. Diz que nenhum não está definido. Volte. Na verdade, isso tem que ser resumido em uma citação, recorte e cole aqui. Salvar. Confira novamente. Linda. Esta imagem parece extremamente grande. Não se preocupe Vamos fazer isso no futuro. Então, ao rolar até o final, você verá esse ícone publicado aqui. Quando você clica nesse ícone, ele abre uma pasta da qual podemos escolher a imagem. Clique nele. Você pode ver agora que pode acessar a imagem diretamente no seu PC. Consola. Role até o topo. Aqui estão os formulários. Agora vamos continuar. Em cada formulário, você definitivamente deve ter uma parte inferior que seria clicada para enviar o formulário. Isso é pelo menos o que vamos implementar agora. Então, logo após essa div de encerramento, vamos formatar rapidamente o código novamente. Logo após essa divisão de encerramento. Vamos fazer um passeio de barco. Vamos dar a ele um nome de classe do botão de atualização de perfil. E aqui vamos fazer atualizações. Então esse será o teste que aparecerá no botão. É tão simples quanto isso. Vamos salvar o código. Volte para o navegador e role até a parte inferior. Aqui está o fundo. Você vê que quando eu clico no botão, o aplicativo aprende de novo. Tudo bem, então isso é tudo por enquanto. E na próxima palestra, começaremos a estilizar o perfil do usuário. E confie em mim, o resultado será alucinante. Nos vemos na próxima palestra. 127. 125 Css de perfil: Bem-vindos de volta a todos. Tão rápido. Vamos começar a estilizar o componente do perfil para o código VS. Vamos começar com a imagem de atualização do perfil. Deixe-me mostrar rapidamente essa imagem aqui porque ela está indo para o desktop, o que vamos fazer. Então, para isso, vamos dializá-lo rapidamente. Pontos. Perfil, imagem de atualização. A largura é 80. A altura é 80. Raio de fronteira. Cinco pixels. Alimentação de objetos, cava. Margem esquerda. 19 fotos. Vamos salvar e conferir o navegador. Certo? Tudo parece bem. Eu adoro isso assim. Vamos continuar. Vá para o topo. Então, aqui vamos começar com o perfil intitulado cópia do contêiner. E, por favor, certifique-se de definir o CSS em três classes de ocorrência. Tudo bem, vamos ter uma tela flexível. Alinhe os itens ao centro, justifique o conteúdo. Queremos que tenha um espaço intermediário. Então, eu vou fazer um espaço entre eles. Vamos especificar a sombra da caixa. Temos que copiar a sombra de caixa normal que estamos usando neste curso. Cole aqui. Vamos dar uma cor de fundo. Esquive o oblíquo. Quando você diz ventrículo no navegador. A ideia é, você pode ver, agora temos essas coisas aqui. Vamos estilizar o título preferido. Dê uma cor. Alice azul. Margem esquerda, dez pixels. A fonte we 300. O ninho é o perfil dos passeios de barco. Então esse botão aqui decretou inchaço. A largura é de 100 pixels. Acolchoamento de borda, cinco pixels. Margem, certo? Dez pixels. A cor de fundo, água-marinha. Vamos dar a ele um raio de borda de cinco pixels. E o custo apontará para economizar e conferir. Eu escrevo muito bem. Agora, para o contêiner de perfil , esse cara aqui, vamos ter uma tela flexível. A margem superior é de 19 fotos. A sombra da caixa é como sempre. Agora, para o show de perfil, flex, eu vou ser uma festa em 19 fotos. Agora, para o show talk do perfil, exiba flex. Alinhe os itens ao centro. Vamos dar uma olhada no navegador. Feito é que tudo está gradualmente tomando forma. Nest é a atualização do perfil. Deixa eu te mostrar isso aqui embaixo. Realce a cópia. Flexione para alimentar em 19 pixels. Margem esquerda, 19 fotos. Você pode ver agora que está alinhado aqui. Bom. A seguir está o perfil IMG. E é claro que fizemos isso aqui, que é o perfil do IMG. Agora temos que estilizar os detalhes do perfil. Deixe-me procurá-lo. Ok. É o perfil em que as equipes dividem o fluxo, a direção flexível. Queremos isso de cima para baixo, certo. Então, eu vou fazer cólon. Quando você salva no navegador. Você pode ver que esses são os detalhes do perfil. Então, quando eu saio da direção flexível, vamos ver o que acontece. Você vê que a colina dos detalhes é uma fileira não descendente. O que está acontecendo? Eu especifico a direção da flexão para ser a coluna. Agora veja o novo comportamento. Bom. Ok, vamos especificar a margem esquerda. 19 fotos. Nest é o nome do meu perfil. O peso da fonte é 300. Então aqui temos meu título preferido. A mesma coisa aqui. Copiar, colar, perfilar, calçar, parte inferior e margem superior são dez fotos. Agora temos o perfil, mostre o título. O tamanho da fonte é de dez pixels. Tweet divertido. Vamos fazer com que ele veja 100 cores. Vou usar o RGB. Para vermelho. Teremos 17570 peças de verde e 170 peças de azul no navegador. Aqui está. Vamos para a próxima fila, se os perfis mostrarem informações. Vamos fazer com que ele exiba itens flexíveis, alinhe, centro, margem, pixels do item, pixels. E a cor vai ser, vai ser cinza. Salve, confira. Você pode ver agora que todo esse lugar aqui está realmente tomando forma. E eu gosto disso. Tudo bem, está tudo bem. O Nest é um ícone profissional. Então, queremos estilizar todos esses ícones aqui. Vamos dar uma cor. Dodge apple, você está seguro, certo? Ok. Bom. Eu adoro isso assim. Vamos estilizar o título ShowInfo do perfil. Vamos dar a ele um tamanho de fonte de 22 pixels. A largura da fonte 600. Você pode ver agora que a edição parece mais grossa. O ninho é o formulário de atualização do perfil. Assim como uma coluna de flexão de tela e , em seguida, de direção flexível. Em seguida, atualize os itens do perfil em Rótulo. A margem inferior será de cinco pixels. Tamanho da fonte. Serão 17 pixels. Agora, para a atualização do perfil em períodos, entrada de atualização de perfil dod , teremos a largura de 250 pixels a altura de 21 pixels. Vamos dar o estofamento. O preenchimento é de cinco pixels. Fronteira. A borda é de um pixel. Cinza sólido de um pixel. Vamos dar a ele um raio de borda porque queremos que ele seja um pouco curvilíneo. Vamos fazer com que seja de cinco pixels. Salve o navegador. As crianças. Linda. Ok, então temos que alinhar tudo. Vamos fazer isso rapidamente. Agora, o ninho e a linha são o objeto do perfil aqui. É copiar, vir aqui, colar. Então teremos um display flex, a coluna de direção flexível. Vamos justificar o conteúdo. Espaço entre a parte inferior, o botão de atualização. Mas eu realmente não sei por que os imputos não estão bem alinhados. Quando terminarmos de usar o botão, definitivamente corrigiremos algumas caixinhas ou erros, por assim dizer. Ok, vamos continuar. Para o perfil, atualize, faça o upload, destaque e copie. Vamos ter uma tela flexível. Vamos alinhar os itens ao centro. Agora, para os ícones de atualização do perfil, basta especificar o causal a ser um indicador para o quadro de atualização do perfil. Deixe-me ver aqui. Destaque e copie. Tudo bem, então acho que temos que classificá-lo adequadamente. Isso vai chegar aqui. Porque temos o botão de atualização do perfil e temos o ícone de atualização do perfil, perfil e imagem de atualização. Então é assim que vai ser classificado. Consultado do jeito que você quiser. Mas certifique-se de que você possa se lembrar disso no futuro. A fronteira não é nenhuma. Raio da borda, cinco pixels. Acolchoamento, cinco pixels. O causal é ponteiro, largura da fonte, gangorra e leitura. A cor de fundo. Então, a cor da fonte será branca. Nós salvamos o navegador. Então, ao observar a espuma, você perceberá que os imputos não estão bem alinhados. E, como tudo, não há espaço entre a entrada e o botão também não deveria estar aqui. Queremos que esteja alinhado na idade certa, ok? Quero que você pause o vídeo no final e tente máximo possível corrigir esse problema. E depois disso, você pode retomar o vídeo para assistir minha solução para eles. Deixe-me mostrar minha ética. Volte para o código VS. Role até o formulário de atualização do perfil. Aqui está. Então, vamos limpar a direção flexível. E eu vou justificar o espaço de conteúdo entre o momento em que você salva confira o navegador. Agora temos esse alinhamento aqui, e esse é o alinhamento adequado. Agora, o único problema que temos aqui é que não há espaço entre o formulário de entrada e os rótulos, nem entre os campos de entrada. Volte para o código VS. Agora vou fazer aqui a margem superior. Vamos fazer a noite em pixels. Feito isso, agora, também precisamos estilizar o item de atualização do perfil Aqui está o problema de Lee. Tudo bem, então vamos ter uma tela flexível. E então a direção flexível será a coluna, que alinhará os itens de cima para baixo. Então você só precisa copiar o item de atualização do perfil assim. Cole colchetes ondulados abertos e fechados. Vamos fazer com que ele seja flexível. A direção flexível é coluna. Quando você salva e verifica o navegador. Aqui está. E agora tudo está bem alinhado conforme o esperado. Eu adoro esses. Vamos fazer mais uma coisa. Eu quero que algo seja escrito no topo assim. Volte e esse será o título preferido. Acho que esquecemos de fazer isso. Eu vou fazer Editar perfil. Quando você salva no navegador. Aqui está. Você consegue ver que tudo aparece conforme o esperado? Por enquanto, tudo isso é n. Nesta palestra, vamos implementar o componente de criação de usuário. Sudão. 128. 131 Crie rota de usuário: Nesta palestra, vamos implementar o componente de criação de usuários. Então, quando clicamos no componente Criar usuários, ele nos redireciona para recriar ele nos redireciona para recriar usuários, onde poderemos criar novos usuários rapidamente agrupados no código VS, a menos que continuemos. comando B para abrir o Explorer, certo, não decifraria o diretório do usuário. Vamos criar um novo componente chamado create user the cheers. Gere o componente funcional. Vamos criar rapidamente o arquivo CSS correspondente. Bom. Feche o comando P do Explorer e, em seguida, pesquise o aplicativo Js. Agora, a primeira coisa que vamos fazer é implementar a rota. Aqui mesmo. Eu só tenho que destacar e depois duplicar isso aqui, certo? Estamos na corda. O caminho será criar usuário com barra. E os elementos a serem renderizados são o componente de criação de usuários. E, por favor, certifique-se de importá-lo na parte superior. Certo. Agora vamos ver se o que fizemos está realmente funcionando. Vou copiar essa parte aqui, de frente para o VS Code. Vamos para casa. Agora, vou colar aqui. É a tecla Enter. Estão certos? Então, agora estamos no componente de usuários da rede. Linda. Mas você deve saber que, em um aplicativo do mundo real, talvez seus usuários finais não consigam copiar o caminho dessa forma. Portanto, temos que implementar o botão de edição de links dos usuários. E então, quando clicamos nos componentes de criar usuários, queremos ser redirecionados para recrutar usuários. Então, vamos encerrar esse fundo com um link. Perfil do usuário. Aqui está o canto inferior direito, aqui eu vou fazer o link. Queremos criar um link para essa parte aqui. Ok? Em seguida, destaque a navegação. Mova-o diretamente no link. Então essa é a parte que criamos diretamente no aplicativo Js, assim. Então, quando você salva e confere o aplicativo no navegador, opa, diz que o link não está definido. Voltar diretamente ao perfil do usuário é importar o link do roteador React. Vamos importar o link do React Router. Não faça. Quando você salva novamente no navegador os IDs. Vamos experimentá-lo clicando em criar usuário comprado. Consegue ver isso? Linda? Agora vamos começar a implementar os criativos como página. 129. 126 Crie um componente de usuário: Nesta palestra, vamos implementar o componente de criação de usuários. Quando clicamos no componente Criar usuários, devemos ser redirecionados para recriar usuários. Poderemos criar novos usuários aqui. Então, vamos adicionar rapidamente o código VS para implementá-lo. Comando B do Vs Code para abrir o Explorer. A primeira coisa que vamos fazer é criar os componentes. Então, certo, estamos no diretório do usuário. Vamos criar um novo componente chamado create users.js. Gere o componente funcional. Vamos criar o arquivo CSS correspondente. Linda. Portanto, temos que vincular o arquivo CSS aos componentes. Insira barra de pontos, crie, use dot css. E, por favor, faça anotações. É uma letra minúscula. Agora vamos implementar rapidamente o comando de rota P para abrir o decodificador na parte superior. E então eu vou configurar nosso aplicativo. Então, aqui, eu só tenho que destacar esse cara e depois duplicá-lo. Então, agora temos que especificar o caminho. Destaques, limpe-os. O caminho será criar usuário com barra. Assim. Em seguida, os componentes a serem renderizados, que neste caso o elemento será criado pelo usuário. Certifique-se de importá-lo na parte superior. Feche o Explorer. Então, agora temos que copiar esse caminho e vamos experimentá-lo. Venha aqui, volte para casa. Aqui mesmo. Eu vou colar isso. Kit na tecla Enter. E boom, são pixels para recrutar usuários. Por aqui. Vamos dar rapidamente a esse div um nome de classe do contêiner de criação de usuários. Destaque, copie. Volte para o arquivo CSS para criar o contêiner de usuários. Então, vamos flexioná-lo para tudo bem, vamos fazer seis. Então, o preenchimento é de 20 pixels. Quando você salva e verifica o navegador. Opa, dê uma olhada. O usuário também está em letras minúsculas. Na verdade, o que aconteceu antes foi que o componente não conseguiu ver o arquivo CSS porque a UE estava em letra maiúscula. Agora está tudo bem. Salve no navegador. Ei, é que o usuário de criação está tomando seis unidades da tela. Mas uma coisa que eu também quero que você entenda é que, em um aplicativo do mundo real, cliente pode não conseguir realmente implementar o caminho dessa forma. Talvez eles não consigam digitar todo esse caminho dessa forma. Então, o que precisamos fazer é encerrar a criação de navegação do usuário com o link que, quando o usuário clicar no barco da Creative Juices, ele o leve para a página de criação de usuários. Agora, quando clico no botão, nada acontece. O Vs Code abre o perfil do usuário. Então, aqui vamos ter um link. E queremos criar um link para, deixe-me mostrar essa parte aqui que criamos anteriormente. Corte, crie um perfil de usuário, cole-o entre as aspas. Então temos que destacar a navegação, movê-la para o link. Vamos formatar rapidamente o código com mais bonito. Parece bom. Depois de fazer isso, vamos tentar. Seguro no navegador. Vamos tentar clicando na equipe Create User Pool. Você pode ver que tudo está funcionando perfeitamente bem como aspartato? Então, vamos começar a criar os criativos como empresa. Feche-o e, em seguida, feche o componente do aplicativo. Tudo bem, destaque-os, limpe-os. Então, certo, dentro dessa div, teremos uma etiqueta principal. Vamos dar a ele um nome de classe ou um novo título de usuário. E o título será de novo usuário. Abaixo da tag H1. Vamos ter uma empresa porque precisamos criar nosso formulário para coletar os detalhes do novo usuário. E à direita, estamos no formulário, teremos os campos de entrada. Mas, por enquanto, vamos dar a esse formulário um nome de cluster para criar usuário. A partir daqui, teremos um div. Dê a ele um nome de classe do novo item de usuário, diretamente no div, teremos um rótulo. Então, certo, quando esse rótulo. Vamos fazer o nome de usuário. Quando você salva e verifica o navegador. Aqui está. Você pode ver o nome de usuário? Aqui está o título, aqui está o rótulo. Usando esse nível, queremos ter um campo de entrada aqui. Então, abaixo do nível, vamos fazer o tipo imputado. O tipo de entrada é igual a texto. O espaço reservado, Issaquah. Eles enxergam. Vamos fechá-lo com a etiqueta de fechamento automático. Lateralmente, o espaço reservado se refere ao texto que aparece como padrão, diretamente no campo de entrada. Confira. Agora você pode ver que estamos no campo de entrada, temos uma margarida de teste. E aqui está o campo de entrada. Bom. Agora, o próximo passo é copiar esse div com o nome da classe do novo usuário. Copie tudo entre o div e duplique-o sete vezes. Agora vamos começar a mudar o nível e o resto dos fogões aqui serão o nome completo. Então aqui vamos receber um e-mail. Aqui vamos ter uma senha. Então, eu vou fazer algo assim. Não se preocupe. Isso não significa nada. É apenas um espaço reservado. E aqui vamos ter um número de telefone. Este será nosso endereço. E não se esqueça da cidade de Nova York. Agora vamos implementar a agenda. Então, isso realmente exigirá algumas coisas, então temos que fazer isso juntos. A agenda tem que ser masculina ou feminina. Tudo bem, agora vamos usar o botão do rádio. Então aqui o tipo de entrada não será mais testado, será rádio. Não há necessidade de espaço reservado por enquanto. O nome equa agenda, o ID, homem igual, valor, espelho igual. Agora vamos ter outra gravadora aqui. Para um moinho de núcleo. Dentro do HTML do rótulo, vamos fazer refeição. Então, agora o que vou fazer é destacar esse cara. Copiar. Venha aqui, cole. Portanto, o tipo de entrada é rádio, o nome é gênero. Mas desta vez a identidade será feminina e o valor será feminino. Além disso, eu só tenho que destacar esse cara e copiar. Venha aqui, cole. Agora aqui vai ser mulher, e aqui vai ser mulher, assim. Destaque a duplicata. Então, aqui vamos fazer o pedido. Tudo bem, então talvez tenhamos outras agendas, que eu não sei. Não posso chamá-lo de exército se você sabe disso. Agora, aqui eu vou fazer isso. Tudo bem, vamos dar uma olhada no navegador. Linda. Você pode ver aqui que temos agendas masculinas, femininas e outras. Tudo bem, então eu não sei disso, mas talvez vamos continuar. Volte para o código VS, a menos que execute o topo. Então, o que eu vou fazer agora é agrupar todas essas coisas em uma div. A partir daqui, vou fazer div, dar a ele um nome de classe da nova agenda de usos. Certo, estamos na divisão. Vou destacar as linhas 42 a 46. Mova-o para dentro. Aqui, não é? Tudo bem, então vamos mudar rapidamente o rótulo para gênero. Ok, tudo bem. Então, certo, estamos nessa div de fechamento, essa div de fechamento com o nome da classe do novo item de usuário. Teremos outro div com o nome da classe do novo item de usuário. Tudo bem, então novo item de usuário, certo, colocando o div, vamos ter um rótulo. E eu vou fazer aqui ativo, que é o HTML interno que aparecerá na tela. Aqui está. Agora teremos uma opção de seleção. Dê a esse select o nome da classe do novo usuário select. Vamos especificar o nome. Vamos tornar isso ativo. O ID está ativo, certo? Vamos selecionar a tag. Teremos duas opções. Opção. O valor será, opa, isso deve ser uma string e não um colchete de colega. Vamos nos ter aqui, certo? Estamos no HTML interno. Vamos fazer é destacar, duplicar. E com certeza, você deve saber o que isso será. Não e não. Exatamente assim. Vamos salvar um CT Browser. Tudo bem, temos a opção de seleção. Você pode ver quando clica, você tem sim ou não. Tudo está funcionando perfeitamente, conforme o esperado. Formate o código novamente para que possamos ter um recuo adequado. E por último, logo após o fechamento da div com o nome da classe do novo item de usuário, vamos especificar body. Vamos dar a essa classe de botânica o nome de botão Novo usuário. Cria. Quando você salva no navegador. E osso. Aqui está a criação de barcos. E o formulário é realmente bom, mas não parece extremamente bonito, como esperado. Mas não se preocupe. Na próxima palestra, resolveremos tudo e então você vai adorar a arte com. Isso é tudo por enquanto. Nos vemos na próxima palestra. Mantenha o cuidado focado e holístico. 130. 127 Crie Css de usuário: Tudo bem, bem-vindos de volta a todos. Nesta palestra, vamos estilizar o componente de criação de usuários. Então, sem mais delongas, vamos começar. Agora vamos prosseguir com o novo título de usuário. Vamos ter uma tela flexível. Vamos alinhar os itens ao centro. Então. Justifique o conteúdo. Espaço entre. Ok, vamos dar uma sombra de caixa. Copiar. Claro que, agora, você já deve saber onde encontrar essa sombra de caixa. A cor de fundo, esquiva ou azul. Em seguida, a cor da fonte. Eu vou fazer com que seja azul Alice. Acolchoamento de cinco pixels. Quando você economiza. Vamos dar uma olhada no navegador. Você pode ver? Certo? Então, vamos começar com esse cara aqui, que é o telefone. Agora, vamos para o formulário de usuários críticos. Vamos fazer com que ele exiba o flex, depois o flex wrap. Vamos fazer com que caia. Vamos economizar e ver o que temos. Certo? Ok, esse é o resultado. Então, vamos continuar. O ninho é o novo item do usuário. Destaque, copie. Venha aqui. A largura é de 400 pixels. Vamos fazer com que ele exiba uma coluna de direção flexível e flexível. Vamos ver agora que isso vai ser organizado de cima para baixo. Você pode ver agora que estamos chegando lá. Margem, dez pixels principais, margem direita? 20 pixels. Então, agora queremos estilizar esse rótulo. E se você observar a tela, perceberá que esse rótulo está dentro do novo nome da classe do item de usuário. Então, o que eu vou fazer agora é destacar esse cara, copiar, vir aqui, colar. Temos que referenciar a margem mais simples da mão de obra, dez pixels inferiores. O tamanho da fonte será de 14 pixels. A largura é de 100. A cor, que é a cor da forma. Tudo bem, então vamos deixá-lo cinza. Quando você salva a finalização da compra, o navegador. Você pode ver? Linda. Vamos prosseguir. Agora, para os novos imputos do item de usuário, deixe-me mostrar, que é para as tags de entrada. Tudo bem, aqui também. Ao observar a tela, você perceberá que a tag de entrada está diretamente dentro do div com o nome da classe dos novos itens do usuário. Então, vou destacar novamente. Desta vez, basta destacar tudo assim. Estou aqui, cole e depois temos que referenciar o imputado. O mais simples que a altura de 20 pixels, preenchendo dez pixels. A borda, um pixel em cinza sólido, o raio da borda, cinco pixels. Ok, vamos ver o que temos a bordo. Lucro. Parece bom. Agora temos que estilizar a nova agenda do usuário. Vamos ver. Aqui estão os pontos de cópia? Você usa a agenda. E então temos que referenciar a entrada porque queremos capturar os botões de rádio e o resto deles. Então, margem superior. Vamos criar 15 pixels para a etiqueta, certo? Não seria a agenda de notícias? Estamos nos referindo a esses rótulos. Tudo bem. E eu vou destacá-los. Venha aqui. Colar. Vou fazer Label. A margem em vez de pixels. Tamanho da fonte 18 pixels. A cor vai ficar ótima, mas vamos fazer assim. Cinco por cinco. Mas esse cinza é uma espécie de tika. Ok, vamos dar uma olhada na tela. Ainda bem em Nice. Então, o próximo na fila é o barco e esse cara aqui, que é o botão Selecionar e a coisa criável. Aqui, destacaremos a seleção do novo usuário, o ponto de cópia, o novo usuário seleciona e o que está dentro. Vamos dar a altura de 40 pixels. Isso reduziu cinco pixels. Salvar. Bom. Tudo bom. Vamos estilizar rapidamente como criar a votação do usuário. Hum, então, hum, vamos pegar o ClassName rapidamente. O nome da classe aqui é novo, use abortando, realçando e copiando. Venha aqui. Ambos os nêutrons pontilhados são finos. E agora temos que aplicar essas toalhas. A largura de 200 pixels. A fronteira é conhecida. Não queremos nenhuma fronteira. A cor do plano de fundo. Vou fazer com que ele se esquive até aqui. A cor, que neste caso a cor da fonte será, ok, vamos torná-la azul Alice. Ou eu também posso torná-lo branco. Espaçamento, esquerdo, direito, sete pixels, superior, inferior, dez pixels. A fonte elimina a margem de 600, os 30 pixels superiores. Vamos implementar rapidamente o raio da borda. O raio da borda e os pixels funcionarão bem. E por último, o causal , será derramar alcatrão. Quando você salva e verifica o navegador. Teremos uma bela especialista para esse fim. Dê uma olhada. Você pode ver que tudo está tão bonito e eu adoro isso. Então, aqui estão os imputos. Tudo legal. Amigos. Aqui. Ativo é não. Você pode fazer isso. Sim. Ok. Pode escolher entre maio ou mulher ou pode ser outra agenda que eu não conheço por enquanto. Então temos aqui a agenda em si. Temos que mudar alguma coisa. Esta é a agenda, o rótulo aqui, temos que corrigi-lo. Então, abra o usuário de criação. Aqui. Podemos apenas medir a idade, digamos 28,7 anos, retirá-la. Bom. Tudo funcionando conforme o esperado. Amigos, esse componente é extremamente bonito e eu gosto dele. Vamos testar todo o componente do usuário para ver se tudo está funcionando perfeitamente. Eu bati em casa. Linda. Aqui mesmo. Eu bati no do usuário. Isso me leva à lista dos judeus. Eu posso selecionar um usuário individual. Eu também posso desmarcar. Eu consulto. Então, se tivermos mais itens aqui com fotos diferentes em nomes diferentes, você verá a classificação. Então, simplesmente porque estou usando o mesmo teste em todos os lugares, você pode não notar, mas posso garantir que o sal está funcionando perfeitamente bem. Certo? Então, aqui você pode clicar e, em seguida, os indesejados podem ser classificados por ordem crescente. Você pode filtrar. Você pode fazer muitas coisas aqui. Você também pode. Excluir. Você pode ver que está funcionando perfeitamente bem. Depois, você pode editar. Linda. Tudo parece bom. Então, após a edição, você só precisa clicar na parte inferior da atualização. Mas lembre-se, isso é apenas uma interface de usuário. Portanto, a funcionalidade de atualização pode não estar funcionando por enquanto. Então, quando você clicar em Creative Juices Boating and Boom. Consegue ver isso? Linda? Tudo está bom. Isso é tudo por enquanto. E na próxima palestra, começaremos com as folhas do produto. Portanto, quando clicamos na lista de produtos, devemos ser redirecionados para o componente da lista de produtos. Até lá. 131. Componente de lista de produtos: Nesta palestra, prosseguiremos com os componentes da lista de produtos. Portanto, o componente da lista de produtos é, na verdade , o mesmo paradigma do componente de lista do usuário. Tudo bem, então vamos ter coisas parecidas com essas, mas só que os nomes dos cabeçalhos também mudarão . As imagens. Mas a mesa é exatamente a mesma. Vamos usar a tabela de dados MAOI. Tão rapidamente escondido no código VS. E vamos começar implementando o comando route VS Code B para abrir o Explorer. Então, aqui estão as páginas, e esta é a lista de produtos. o botão direito do mouse nas listas de produtos, vamos criar o componente da lista de produtos. Gere o componente funcional e crie rapidamente o arquivo CSS correspondente. Abra as engrenagens do aplicativo. É aqui que Lee é onde implementaremos a rota duplicada. Aqui, vou especificar um caminho da lista de produtos. E então vamos renderizar os componentes da lista de produtos. Sempre certifique-se de importá-lo na parte superior. Seguro. Vamos tentar ver se o caminho está realmente funcionando. Volte para casa. E aqui eu vou colá-lo bem no topo. Clique na tecla Enter. E boom, agora estamos no componente da lista de produtos. Lindo, mas parece que nada é exibido na tela, certo? Então, vamos corrigir isso rapidamente. Agora, dentro do CSS, primeiro, temos dois div, esse div é um nome de classe do contêiner da lista de produtos. Destaque e copie o nome da classe, pontilhe o contêiner da lista de produtos. E então vamos flexioná-lo. Seis, seguro. Salve aqui no navegador. Ei, não é? Você pode ver agora que temos a lista de produtos escrita. Apenas no extremo. Tudo está funcionando perfeitamente, conforme o esperado. Confie em mim Na próxima palestra, começaremos a projetar os componentes. Te vejo então. 132. Design de lista de produtos: Bem-vindos de volta a todos. Nesta palestra, prosseguiremos com o design da lista de produtos. E, claro, é simplesmente a tabela de dados que implementamos na aula anterior para a tabela de usuários. Então, agora o que vou fazer agora é ir para o auxiliar de código. Vamos copiar os dados do produto. E esses são todos detalhes editados. Se você quiser fazer isso sozinho, é muito fácil fazer isso. Abra o arquivo de dados. Aqui está, ele usa dados. Venha aqui. Vamos colá-lo aqui. Então, o que temos aqui é exatamente o mesmo paradigma com o que temos aqui. Esses são os dados do usuário. Sim, então é exatamente a mesma ideia. Se tivermos o ID, o nome de usuário, o avatar, que serve como imagem, o status do e-mail e o pagamento. Então, quando você acessa os dados do produto, temos o ID, o nome, a imagem, o estoque, o status e o preço. Então, acabamos de mudar os campos. Ok, perfeito. Agora vamos voltar para a lista de produtos. Novamente. Comum p.sit. Vamos abrir o mínimo para o usuário. Certo? A lista do usuário não seria? Temos a cópia daqui até este ponto. Ok. Você pode ver 9-64? Você vê, certifique-se de copiar corretamente. Copie, acesse a lista de produtos, cole aqui. Novamente, volte para a lista do usuário. Também precisamos copiar os dados. Concordou? Fizemos isso na palestra anterior, quando estávamos implementando a lista de usuários. Então você já deve saber disso. Pestis rasga tudo fresco, tudo bom também. Temos que copiar algumas entradas. Vamos importar a grade de dados. Aqui. Queremos fazer uso de todas essas coisas aqui. Excluir. Vamos copiar as linhas três, linhas cinco, que são a grade de dados, o link e o contorno de exclusão. Cole aqui também. Temos que copiar os ustedes porque vamos usar o gancho de identificação dos EUA. Começamos a implementar o botão de exclusão, salve o aplicativo. Agora, precisamos combinar os campos com exatamente os mesmos dados que temos diretamente nos detalhes do produto quando você abre o arquivo de dados. Então, aqui temos ID, nome, IMG, estoque, status e preço, incluídos na lista de produtos. Feito isso, vamos importar os detalhes do produto a partir da barra de pontos SRC, dados do produto, barra de queda. Assim mesmo. Ok? Então, aqui vamos combinar os campos com exatamente os mesmos campos que temos nos dados. Então, aqui o nome do campo será produtos. A cabeça e o nome. Vai ser um produto. Aqui, faz div, vamos dar o nome da classe do item da lista de produtos, dar ao IMG um nome de classe da lista de produtos, IMG, que é a lista de produtos. Cada imagem. Temos que ter cuidado aqui para não cometer um erro tolo, vamos mudar o campo de e-mail para estoque, assim como temos nos dados. Isso será status. Isso será status. O ninho e a linha aqui serão o preço. Deixe-me te mostrar. Temos o status e temos o prêmio. Aqui temos a ação. Então, isso ajudará na exclusão e edição do quadro quando tudo estiver realmente igual, só que precisaremos alterar os nomes das classes e o resto delas. Então, aqui temos um div com o nome da classe do container de ação. E temos um botão com o nome da classe do usuário de edição. Vamos transformar o nome da classe inferior em um editor de listas produtivo. E aqui vou mudar isso para exclusão do produto. Legal. Tudo bem, então, por último, vá até o topo e deixe-me mostrar. Portanto, temos que considerar isso como o estado inicial. Limpe, destaque, copie, venha aqui, cole os dados aqui, armazene os dados do produto como estado inicial. E os dados do produto estão diretamente neste módulo. E é composto por todos esses itens aqui. É tão simples quanto essa lista de produtos. Role para baixo e, em seguida, as linhas são iguais aos dados, que estão na parte superior. Salve e confira o navegador. Diz que os países do arquivo de dados SRC cortam os dados do produto. Ok. Vamos fazer a importação novamente, importar dados do produto. Então, agora parece que devemos criar um arquivo separado para os dados do produto. Então, o que eu vou fazer agora é copiar, vir aqui, diretamente dentro do arquivo de dados. Vamos criar um novo arquivo, dados do produto, dot js. Então, Heron, para usar nossos dados. Vamos copiar tudo assim. Destacar. Pare com isso daqui. Agora temos um módulo separado para todos os arquivos que vamos usar. E acho que é uma ideia melhor. Dados do produto. E mantenha-o aqui. Bom. Vamos adicionar S aos detalhes de cada produto. Agora vamos voltar para a lista de produtos. Então, vou começar a importação do zero novamente. Importe detalhes dos produtos desse cara aqui. Vou adicionar S para comer como detalhes do produto. Acho que terminamos. Seguro. Finalize a compra, o navegador. Linda. Vamos clicar nos produtos. No momento, temos os itens. Você pode ver? Algo muito rápido? que vamos fazer agora é especificar os flocos para que ele possa assumir algumas unidades na tela. Certo, dentro da lista de produtos. Opa, nós fizemos isso aqui. Então, vamos vincular rapidamente o arquivo CSS ao componente. Vamos importar rapidamente o CSS das listas de produtos com barra de pontos. Quando você salva o navegador, tudo aparece conforme o esperado, e eu adoro isso. No momento, a imagem não está aparecendo. Então, vamos dar uma olhada no botão excluir. Você pode ver que o botão de exclusão está funcionando perfeitamente bem? Você vê? Dê uma olhada. Caras legais. Quando eu recarregar, todos os itens mostrarão nosso começo. Não há problema nisso porque este é apenas um site estático. Tudo bem, então, quando começarmos a implementá-lo com o back-end, teremos alguns dados sendo armazenados em algum lugar. E então, quando excluímos, excluímos do banco de dados, entendido, lindo. Vamos tentar clicar no botão Editar. Ok, o botão Editar nos leva ao discurso do usuário do editor, e isso não deveria ser. Então volte. Agora, vamos tentar corrigir a imagem. Ao olhar para o canto inferior direito da tela, você verá a paginação. Então, quando você clica, você pode ver que continuamos passando de um pico da tabela para a outra página. Ok. Bom. No momento, a imagem não está aparecendo. Não se preocupe. Eu tenho uma solução simples para isso. uma pausa rápida na palestra para terminar e tente corrigi-la. Quando terminar, você pode retomar o vídeo e ver minha própria solução para isso. Tudo bem, estrague tudo e deixe-me te mostrar. Certo, o método de renderização aqui não diria que o SRC será params dot rho dot avatar, um substantivo. Ao abrir os dados do produto, você perceberá que não temos Avatar aqui. Tudo o que temos aqui é a AMD. Portanto, temos que fazer referência ao IMG e anotar Avatar. Venha aqui e cole os parâmetros IMG dot roll, dot IMG ao salvar no navegador. E são essas, porém, as imagens não aparecem como esperado. Então, é simplesmente porque não o estilizamos. Ok, então o tamanho da imagem aqui é extremamente grande. Portanto, não vai parecer como esperado por enquanto, mas é incerto. Na próxima palestra, daremos uma solução rápida. Muitas vezes, esse é o nosso n. Vamos passar rapidamente para a próxima palestra para estilizar essa empresa. 133. 130 Css de lista de produtos: Tudo bem, então vamos estilizar o componente da lista de produtos, heroína para VS Code. Abra a lista de produtos CSAs. E agora podemos dividir a tela. Em seguida, abra a lista de produtos e percorra a interface do usuário. Então, primeiro, quero que estilizemos a imagem. Então, aqui vamos ter a lista de produtos, lista produtos IMG dot IMG. A largura e a altura serão de 50 pixels. O raio da fronteira. Cinco pixels. O objeto se encaixa. Capa. Salvar. Você pode ver agora que parece bom. Mas uma coisa que eu também quero que façamos é aumentar o número de itens que serão exibidos nesta tabela. Então, role para baixo. Aqui, diz o tamanho da página, eu vou fazer oito. Quando você salva no navegador. Você pode ver que há um problema com essa imagem aqui com o ID de cinco. Então, o produto foi a ideia de cinco. Temos que dar uma olhada. Dados do produto. Vamos procurar o produto com a ideia de cinco aqui, não é? Por que você não está aparecendo? Ok, o que eu vou fazer agora é copiar outros produtos daqui. Então vamos substituí-lo, limpá-lo e colá-lo aqui. Quando você nos salva, veja o que acontece a seguir e está funcionando perfeitamente bem. Agora aumentamos o número de itens que serão exibidos em nossa mesa. Lembre-se de sempre classificar seu CSS e a ocorrência de acordo com a forma como eles aparecem na linha de componentes será o item da lista de produtos, destacando e copiando no topo. Portanto, o item da lista de produtos vem antes da lista de produtos IMG ou da imagem da lista de parâmetros. Vamos ter uma tela flexível. Vamos alinhar os itens ao centro. A margem será de dez fotos. Quando você salva e verifica o navegador. Ok, ótimo. Parece mais limpo. O ninho é o editor da lista de produtos. E vem logo após a lista de produtos IMG. Deixe-me mostrar uma escritura na lista de produtos, destaque-a e cole-a aqui abaixo da imagem da lista de produtos e depois da borda. Nenhum. O que eu reduzo em dez pixels. Acolchoamento, cinco pixels, dez pixels. A cor do plano de fundo. Dodge W. A cor. Vai ser branco. Consola. ser ponteiro, margem, certo? 20 pixels. Salve e confira o navegador. As evidências desses caras parecem boas. E vamos dialisar a edição de barco de forma simples. O que vamos fazer é mudar a cor. Então copie o nome da classe do produto delete. Venha aqui, pontilhe o produto e exclua. Dê a cor. A cor vai ficar vermelha e o cursor vai derramar alcatrão. Você salva e finaliza a compra no navegador. E boom, tudo parece como esperado. Mas agora, percebi rapidamente que a imagem do usuário aqui no canto superior direito da tela, que está aqui na navegação superior, simplesmente desapareceu. Não há nada lá. Pode ser um problema de conexão com a Internet comigo aqui. Portanto, não tenha medo. Certifique-se de consertá-lo. Se houver um resultado em, tudo isso é por enquanto. Nos vemos na próxima seção deste curso. Cuide-se.