Fundamentos do reato moderno: crie um gerador de citações

1. Introdução: Nesta aula, vou ensinar-lhe os fundamentos do react, o que é, por que acho que é uma ótima biblioteca para lidar com e como implementar as práticas mais recentes e recomendadas em seus projetos web. React é uma das principais estruturas ou bibliotecas na criação de UIs interativas perfeitas. Portanto, é realmente essencial que qualquer desenvolvedor web front-end tenha alguma experiência em. Ao longo desta aula, ensinarei como trabalhar com componentes funcionais do React, JSX, props, hooks, gerenciamento de estados, como depurar e testar seu aplicativo. Difícil adicionar estilos e muito mais. Todas são partes cruciais para saber ao construir ótimas UIs com o react. Ao seguir junto comigo em todas essas lições, você usa essas habilidades recém-adquiridas para construir seu próprio gerador de cotações. Cada etapa da construção deste gerador de cotações cobrirá tantas habilidades importantes que você precisará para ser um desenvolvedor React completo e confiante. Ei, eu sou David e sou um desenvolvedor web front-end de Northridge, na Inglaterra. Tenho muitos anos de experiência na criação aplicativos digitais para uma variedade de clientes internacionais. Divirta-se ajudando outros desenvolvedores da web como você a melhorar suas habilidades, o que os ajudará a promover suas carreiras e finalmente, ajudá-los a se tornarem o melhor desenvolvedor ou aleatório que podem ser. Mas eu odeio falar sobre você mesmo. Então, vamos seguir em frente rapidamente. Esta aula sou eu sob alunos que têm algum conhecimento básico de tecnologias front-end incluindo JavaScript, mas gostariam de aprender a reagir. Mesmo que você tenha vindo de um plano de fundo de linguagem de codificação diferente, ainda poderá acompanhar desde que conheça os conceitos básicos de funções, matrizes e objetos. Se você é um iniciante completo para reagir, isso é absolutamente bom. Tudo o que você precisa para criar seu projeto de classe é seu IDE favorito. Vs code será meu editor de código preferido usado nesta classe. Mas qualquer outro que você se sinta confortável em usar é absolutamente bom. Quando você terminar de construir seu gerador principal, você estará implantando um produto na Web usando o Netlify. Eles se preocupam, vou te mostrar como é fácil fazer isso e tudo é totalmente gratuito. Com as habilidades que você ganhará com essa classe, você poderá oferecer muito mais como desenvolvedor, seja você freelancer ou se trabalha para uma empresa, react ainda é a biblioteca JavaScript mais popular usado no mundo. E muitos aplicativos da Web são criados usando o React. Depois de precisar dessas novas habilidades, você poderá demonstrar seu conhecimento para qualquer empresa que procura desenvolvedor front-end altamente qualificado e sólido. No final desta classe, você poderá criar um desempenho elegante e alto, usar interfaces usando os recursos react mais recentes. Sem mais delongas, vamos começar. 2. Apresentação do projeto: Nesta classe juntos estaremos construindo um gerador de cotações aleatórias por dentro, reagir. Quando você pressiona este botão e novas citações aleatórias aparecerão instantaneamente. Este será um aplicativo de página única, que incluirá uma área para preencher a cotação, um rodapé simples. E mostrarei como gerenciar o estado do seu aplicativo. Se você estiver seguindo comigo, o que eu encorajo fortemente que você faça, você também pode criar algo como um gerador de fatos aleatórios ou um aplicativo semelhante que olhe algum texto dados e preencha aleatoriamente uma string de texto aleatória. O texto em si não era muito importante. Serão todas as técnicas do React que mostraremos em cada lição que são importantes. Agora eu escolhi um gerador de cotações como um projeto para construir, pois este é um aplicativo web ideal que abordaremos muitos conceitos importantes do React. Isso inclui trabalhar com componentes filho do paradigma de gerenciamento de estado, trabalhar com adereços, trabalhar com ganchos e dados de altura que Kennedy usou dentro do react. Primeiro projeto bem-sucedido. Tente usar todos os conceitos que vou mostrar neste curso. Se você está se sentindo particularmente confiante em pontos de bônus, não tenha lido os documentos oficiais de desenvolvimento do React e inclua mais contextos que não são abordados neste curso. Você também pode tentar incluir componentes adicionais, como um cabeçalho ou até mesmo páginas adicionais. Tente também iniciar seu tribunal gerado de forma diferente à mente usando seu próprio layout, fontes e cores. Os alunos devem usar o IDE favorito ou o editor de código para criar o projeto da classe. Vou usar o código VS, mas qualquer IDE funcionará tão bem. Agora você precisará usar um terminal disponível na maioria dos sistemas operacionais. Mas usarei o terminal que vem junto com o VS Code. Qualquer um fará, é claro, você usa o terminal para criar o projeto e também para ajudá-lo a implantar seu projeto final usando o Netlify. Não se preocupe, mostrarei como é fácil configurar isso e empurrar seu trabalho para uma página da Web ao vivo para que todos possam ver. E podemos fazer tudo isso em menos de um minuto. Todo o meu trabalho estará no GitHub neste URL. Então você pode ver meu projeto final. Eu usaria isso para referência se você ficar preso. E incluirei esse URL nas notas do curso para quando você tiver implantado seu projeto, será ótimo para você compartilhar capturas e vincular ao gerador completo. Você pode fazer isso enviando seu trabalho para a seção do projeto no Skillshare. Esta é uma ótima maneira de receber feedback de mim, dos outros alunos e realmente priorizar mostrar seu trabalho e seu novo amigo reagir habilidades. Claro, se você tiver alguma dúvida, por favor me avise. Agora, vamos dar uma olhada no que React realmente é na próxima lição. 3. O que é o React e por que usá-la?: Então, o que é o React e por que aprendê-lo? Simplesmente, como dito no site oficial do react, React é uma biblioteca JavaScript útil criando interfaces de usuário. Com o React, você pode criar visualizações simples para cada estado do seu aplicativo. Reaja a tão eficiente que saberá atualizar apenas componentes corretos quando seus dados forem alterados, em vez disso, recarregando a página inteira. Isso o torna ideal para o aplicativo de página única que estaremos construindo nesta classe. Isso significa que seu aplicativo React terá um ótimo desempenho e será super rápido. Cada componente é encapsulado, o que significa que cada componente gerencia seu próprio estado. Componentizado, trabalhe misto, fácil de gerenciar todo o seu código, permitindo que você reutilize componentes em todo o aplicativo. Reagir agora é usado em mais de 10 milhões de sites em todo o mundo. Isso também significa que há uma comunidade forte com ótimos recursos por aí para ajudá-lo em sua jornada. Houve também uma curva de aprendizado muito mais suave em comparação com sua contraparte Angular. E espero mostrar-lhe exatamente isso neste curso. Vamos montar nosso projeto? Vamos fazer isso na próxima lição. 4. Como configurar seu projeto do React: Agora deixe-me mostrar como criar seu projeto React e como colocá-lo em funcionamento. Então eu já abri o código VS aqui. Portanto, este é o editor de código que vou usar. Então, por favor, faça o mesmo, abra o seu e acompanhe comigo. A primeira coisa que fiz foi criar uma pasta vazia chamada gerador de cotações. Curse o que você quer e salve onde quiser. Não há arquivos lá ainda, mas é isso que estaremos configurando. Agora, para criar um projeto React, você precisará ter certeza de que você tem o Node JS instalado. Se você ainda não tiver JS baixado, acesse Node js.org. Você será apresentado com esta página. Agora, como você pode ver, já detectou que estou em um Mac iOS e você quer baixar os arquivos de download mais recentes ou atuais aqui. Agora, já tenho o Node instalado, então não preciso fazer isso. Mas quando você clicar nisso, você receberá um assistente de instalação. E você só precisa passar pelas etapas até que você tenha o nó no seu sistema. E então, como você verifica se você tem nó? Só vou abrir um terminal. Então, se o VS Code no novo terminal, se você não estiver usando o código VS e não tiver um terminal dentro do editor de código. Você não pode simplesmente usar qualquer terminal que esteja empacotado com macOS ou Windows. Então acabei de abrir um terminal aqui, mas vou fechar isso porque usarei o total dentro das curvas S. Então, espero que isso faça sentido. De qualquer forma, para verificar se eu tenho o Node instalado, vou escrever o nó dash V, que fica com a versão. E ele pode ver que 17.9, então isso está instalado. Se você vir esses números aqui, depois de escrever o nó b, você terá o nó instalado corretamente. O que exatamente é nó e por que precisamos dele? Basicamente, é um ambiente de servidor e é totalmente de código aberto, multiplataforma. Agora, o que isso faz, ele permite que você use JavaScript para escrever ferramentas de linha de comando ou terminal para scripts no lado do servidor. E é exatamente isso que precisamos para criar este aplicativo React. Como criamos o aplicativo React? Escrevemos n px, criamos traço, reagimos, traço, espaço. E então você pode escrever o nome da sua pasta ou aplicativo. Mas eu só queria usar o gerador de cotações, que é o nome da minha pasta aqui. Então, para fazer isso, eu só uso um ponto em vez de um nome e pressiono Enter. Preciso instalar, Create, React app. Ok, para continuar, sim, eu apertei Y. E aqui está abarrotado o aplicativo React e todos os arquivos e pastas necessários. Apenas dê um segundo a isso. Pode levar algum tempo dependendo do alto phos para uma máquina é desculpa, não preciso gastar todo o nosso processo de instalação porque estava demorando um pouco de tempo. Aqui queremos armazenar completo, correto. Tudo com bom aspecto. Como você pode ver à esquerda aqui, temos essa estrutura de pastas que ela criou. Então, temos molho com vários arquivos. App.js como o aplicativo raiz base. Muitos outros arquivos aqui. Chegaremos a eles em um minuto. Agora, para iniciar este aplicativo no seu navegador, novamente no terminal, deixe-me limpar tudo. Se eu escrever npm parado, não MPS, NPM, que significa Node Package Manager, que fornece vários scripts que você pode executá-lo. Então eu só queria parar esse espaço MPM. Interrompeu Enter. Presumo que é um pouco passar bem. Ele deve abrir uma guia ou uma janela. E se isso não acontecer, ou você precisa fazer é ir ao anfitrião local três vezes e lá vamos nós. Agora, se você puder ver esta página, sua replicação reagiu durante a configuração. Começando. Tudo bem. Agora, se você não vir isso, você não verá isso no host local 3 mil. Então eu devo ter sido um erro em algum lugar. E então vale a pena verificar o que seu terminal está dizendo, porque provavelmente lhe dará algumas mensagens de erro, que explicaremos exatamente onde está o problema. Ok, agora sabemos que isso está funcionando. Vamos arrumar alguns arquivos dentro do app.js, que é o arquivo pai do aplicativo. Não precisaremos de metade disso, então vamos nos livrar de tudo dentro da div, o cabeçalho. Vou incluir um H1 para dizer. Jen. Só para garantir que saibamos o que é isso. Isso é atualizado em tempo real, como você pode ver, perdemos a animação e ela tem o novo texto. Portanto, não há necessidade de continuar atualizando isso ou continuar iniciando o servidor. Tudo está parecendo boas atualizações em tempo real. não precisamos importar o logotipo. Salve isso. Dentro da fonte como estamos aqui, vamos configurar uma estrutura de pastas. Agora, é assim que eu gosto de fazer para manter as coisas arrumadas e arrumadas. Você pode me copiar ou você pensa diferente? Mas precisaremos de uma pasta para nossos componentes. Esta é a fonte interna, a propósito. Também dentro da fonte, vamos ter uma pasta para nossos dados, nossos dados de texto. E depois faremos o mesmo para a pasta de estilos. Para estilos. Tudo isso parece bom. Do que mais podemos nos livrar daqui? Livre-se de ferramentas legais web phi sempre que estamos fazendo algum teste e nos livrarmos dos testes de configuração. Está tudo bem. O que significa que é index js. Podemos nos livrar do que excluímos lá. E também esta parte da parte inferior. Lá vamos nós. Compilado com sucesso. Index js mantém nosso app.js, que deve simplesmente ter o tribunal de janeiro para também se livrar desse teste. Sim. E meio para fazer isso, mas não tem usado esses arquivos. Vamos mantê-lo limpo e arrumado, agradável e simples. Com a escola carregando bem nesta fase, deixe-me mostrar algumas extensões úteis que estou usando no código VS apenas para economizar algum tempo. Então, ao longo deste curso, você me verá usando alguns atalhos de teclado e coisas apenas para economizar tempo e esforço. Você pode achar isso útil para mostrar isso em. Então, componentes, vou criar um componente para o rodapé apenas para testar essas coisas que eu mostrei a vocês. Então vamos chamar esse ponto de rodapé js. Geralmente é a convenção normal para iniciar o componente js com uma letra maiúscula. O primeiro atalho útil é criar um componente funcional React. Vou simplesmente digitar II e tab e ela é criada uma estrutura de componentes aqui. O que está fazendo isso é uma extensão que estou usando trechos de código, trechos DX7 e atualizei. Então isso está me dando um monte de atalhos de teclado apenas para economizar algum tempo. Portanto, fique de olho nessa extensão exatamente. Outra extensão útil que estou usando é chamada de mais bonita. Se eu fosse apenas mover isso para que isso não pareça muito bom. Se eu destacar a escola e usar o atalho de teclado, Bennett a formata no lugar. Agora isso está usando o belo Act. Então, se formos para Extensões tempo, novamente, eu vou ter isso já instalado. Desde que você é mais bonita. Deve ser esse resultado principal aqui. Código todo o assunto. Você pode ver que esse arquivo está usando proteína morrendo na parte inferior aqui. Eu não vi muito bem que isso é mais bonito aqui. Deixe-me apenas mover isso para cima. Só para você saber, isso está sendo executado neste arquivo. Isso é uma ótima economia de tempo. Outro, deveríamos mudar essa tag de abertura. Se eu mudar isso para um, digamos, você pode ver que a tag de fechamento também atualiza e obtém suas extensões. Este é chamado de tag auto complete. No entanto, lá vamos nós. Então este top aqui. Novamente, muito útil, especialmente se seus arquivos estão crescendo em tamanho, então você não precisa encontrar essa tag de fechamento inferior na parte inferior da documentação. Você sabe, se você atualizar isso, a segunda tag bem, a tag de fechamento também será atualizada. Com isso, seu aplicativo está pronto e pronto para uso. Vejamos mais um código. E isso é realmente criar o aplicativo em si. 5. Componentes e JSX: Vamos falar sobre componentes e JSX. Primeiro de tudo, na tela, temos o componente de custo e um componente funcional. Ao longo deste curso, estaremos trabalhando com componentes funcionais por apenas queria mostrar a diferença entre os dois. Quando o react foi feito pela primeira vez, era bastante comum usar componentes de custo. Isso envolveria o balanço, a classe da palavra, o nome que você pode componente. Você teria que estender o componente ponto React. Você teria que incluir uma renderização para retornar o código HTML real. E se você estiver mudando de estado, você teria que incluir um construtor. Você teria que incluir super, ter que usar esta, a palavra-chave, esta para alterar um estado. Componentes funcionais. Estamos realmente acostumados se você estiver renderizando um componente ou algum código. Se você estivesse trabalhando com a mudança de estado, você teria que usar um componente de classe. Mas isso tudo mudou agora. Você pode usar ganchos para gerenciar o estado dentro de componentes funcionais. Acho a função Comparando. É um pouco mais fácil de entender. Mas isso pode ser diferente para alguém de de fundo de programação orientados a objetos, como Java. Mas acho que os componentes da função usam menos código. E, como eu disse, com a introdução de ganchos, agora você pode gerenciar o estado. Há menos código. Eu acho que é mais limpo, então estaremos trabalhando com componentes funcionais por toda parte. Não, o componente funcional é basicamente apenas uma função JavaScript declarando o nome constante Hayek ou fitter. E é apenas uma função de seta simples. E então estamos retornando o código HTML. Agora, na verdade, não há mais necessidade importar o React do react de importar o React do react porque esse aplicativo já sabe que este é um arquivo React. A única vez que iremos importá-lo dessa forma é quando começamos a usar ganchos mais tarde na linha. Mas, por enquanto, podemos remover isso. Isso torna o código ainda mais limpo. Isso pode parecer estranho. Colocar mock-up dentro do JavaScripts não mostra que você se acostumará com isso, mas isso é essencialmente o que o JSX é. Agora, toda a lógica e o trabalho para o rodapé disposto permanecerão dentro do arquivo js de ponto de rodapé. E é mais fácil gerenciar marcação e lógica no mesmo arquivo. React está focado em separar as preocupações mais do que qualquer coisa. Aqui embaixo, é aqui que exportamos o rodapé. E estamos dizendo que esse rodapé é a coisa padrão a ser exportada. Você pode retornar outros componentes ou funções aqui. Estamos apenas dizendo que há o rodapé que é o padrão a ser explorado a partir deste arquivo. Agora, dentro do retorno aqui, está a marcação, que é essencialmente HTML. Então, se você já está familiarizado com o HTML, você pode escrevê-lo da mesma maneira. No entanto, há alguns casos em que alguns atributos são nomeados de forma ligeiramente diferente. Por exemplo, se você quiser adicionar uma classe, digamos que a classe seja uma palavra reservada, como acabei de mostrar anteriormente. Você pode usar componentes baseados em classe no React. A classe se torna ClassName assim. E já meu candidato, está me dizendo ou sugerindo o nome da classe, Aqui está a coisa certa a usar. Portanto, lembre-se de usar o ClassName e não a classe. Além disso, se você estava trabalhando com o Forms, digamos criar, digamos um rótulo para um tempo mais suave do formulário para outra linha. Se você estiver vinculando isso a uma entrada, normalmente você teria quatro e em seguida, o ID da entrada. Quatro também é uma palavra reservada. Você precisa se lembrar de incluir HTML completo com CamelCase assim. Só é útil lembrar que isso foi removido. Ainda não adicionaremos nenhum estilo. Mas enquanto estiver no rodapé. Vamos mudar isso para uma etiqueta de rodapé. Então vou colocar o texto dentro de um parágrafo assim. E então vamos atualizar isso ainda mais para dizer algo como co-geração para David JC Lee, sou eu. E, em seguida, adicionaremos um símbolo de direitos autorais como este, e uma cópia comercial. Remova esses caracteres. Estou dizendo copiar ponto e vírgula 2022. Outra coisa a estar ciente é nesse retorno, se o seu HTML está começando a ficar bastante grande, o que está aqui, você pode, claro, mu é M em duas linhas separadas. É assim, mas lembre-se incluir parênteses em torno de tudo entre parênteses como este. Usando mais bonito, vou apenas formatar isso na imprensa Command a para selecionar tudo. Então eu vou segurar a opção Shift F para Formatar. E então vamos economizar muito mais limpo. Esse é essencialmente nosso rodapé completo. Vamos passar para outro componente. Você pode selecionar o diretório de componentes. Vamos criar um componente para a cotação. Então, a citação ab.js, porque este é apenas um arquivo JavaScript. E, em seguida, usando meus atalhos de extensão S7 ou a guia ICF, na verdade removeu a entrada porque ela já sabe que está reagir. Citação. Certo, ótimo. Já temos parênteses para várias linhas no retorno quando ele está retornando a maquete. Então isso é útil. Vamos apenas espaçar isso um pouco. Dentro da div. Vamos realmente usar uma tag blockquote e, em seguida, vamos apenas codificar alguma consulta. Esta é uma ótima citação que vou fazer por enquanto. E então, para o nome da pessoa que disse a citação, vamos colocá-lo em tags de parágrafo. Vamos colocar seu nome. Claro, quando eu estiver trabalhando com dados reais na linha, tornaremos isso dinâmico tanto a citação quanto o nome. Mas, por enquanto, estamos apenas juntando o componente base. Mais uma vez, vou pressionar Command a shift opção F, adorável em formatado. E esse é o nosso segundo componente filho. Agora, quando digo o componente Charles, isso significa que tanto a foto quanto a citação precisam morar dentro de um componente pai. Agora, o componente aparente é o app.js, que deveria ter sido criado quando você criou seu aplicativo React. Mais cedo. Nós apenas codificamos isso neste gerador de aspas. Enquanto aqui, vamos mudar para o maquete. Então, na verdade, vamos deixar aquele Davidson, mas vamos colocá-lo em uma seção, envolver tudo nesta seção assim. Eventualmente teremos a área de cotação aqui. Comente que eles estão entre a div, A seção, eventualmente teremos o rodapé aqui. Vamos apenas comentar essa matemática por enquanto. Abaixo da consulta, precisaremos um botão para aleatorizar cada grupo. Então, vamos apenas criar um botão lá. E vou escrever o texto gerado para o botão. Agora você pode ver que nada está mudando à direita. Isso porque precisamos iniciar o servidor. Basta iniciar o npm inter. Aguarde que isso carregue. Iniciando o servidor de desenvolvimento, eles são compilados com sucesso. E então podemos ver nosso botão Gerar. Antes de trazermos a citação e o rodapé, apenas gostaria de apontar uma dica útil enquanto já é dica é algo que você deve saber. Dentro do nosso retorno, temos essencialmente um invólucro. Então, é a seção. Se eu fosse colocar um segundo aqui. Segunda seção. Segunda seção, você pode ver que há linhas vermelhas em todos os lugares. Está reclamando , não gosta. Se passarmos o mouse sobre o texto, você poderá ver que as expressões JSX devem ter um elemento pai. O que acontece se você realmente precisar dois irmãos como essas duas seções? Bem, você precisa de algum tipo de invólucro. Funcionaria se você tivesse uma div externa. São ambos. Mas se você não quiser incluir um dia de apenas por causa disso, você pode usar um fragmento React e tudo o que é uma div vazia como esta. Você pode ver uma tabela vazia aqui e uma div de fechamento vazia aqui. Estes são Fragmentos do React. Felizmente, não precisamos de uma segunda seção. Eu só estava mostrando isso como um exemplo para que você possa se livrar disso. Livre-se desse fragmento de abertura e salve isso. Então. Vamos importar nosso componente de cotação que fizemos sempre cabeça. Abaixo desta entrada do CSS. Novamente, este CSS de ponto de aplicativo foi empacotado com seu aplicativo Create React. Talvez não precisemos disso, então vamos excluir isso por enquanto. Para importar um componente filho para o pai, podemos fazer cotações de entrada de. Então, como uma string, precisamos entrar em componentes de barra de pontos, aspas de barra. Certo, ótimo. Ele diz que a citação é declarada , mas seu valor nunca é lido. Tudo o que fazemos aqui é ter um componente de cotação de fechamento automático como este. Somente o nome do colchete do colchete de fechamento da barra do componente. Isso vamos salvar. E então, no ouvido direito, podemos ver que temos nosso cuidado com o coração feito bem. Vamos fazer o mesmo pelo rodapé. Rodapé de desculpe, barra de componentes de barra de ponto. Melhor. Fazendo o mesmo rodapé. Feche esse salvamento. E esse é o nosso rodapé. Importamos componentes filhos para nosso componente pai. Agora, o melhor de separar esses componentes é que você pode usá-los em todos os lugares porque eles são componentizados. Portanto, esse é essencialmente quo componente. Poderíamos dobrar, triplet, salvar. Lá vamos nós. Temos três desses. Portanto, esse é um componente bastante pode ser deixado em qualquer lugar dentro do nosso aplicativo e funciona de forma independente. Cada um comparando-os, gerencia seu próprio estado, seus próprios estilos e tudo assim. Então, pode ser deixado cair em todos os lugares enquanto estamos aqui. Antes que eu esqueça, se você quisesse parar seu servidor, você pode ver que isso ainda está sendo executado dentro seu terminal ou você faz é fazer Control e C. E então você pode ver que isso parou. E então, se eu fosse atualizar esta página, não há nada lá porque paramos o vendedor. Espero que tudo faça sentido. Agora vamos continuar trabalhando com prompts. 6. Props: Vamos dar uma olhada em trabalhar com propriedades ou adereços. Agora, primeiro deixe-me iniciar o servidor novamente. Faremos npm parado, clique em Enter. props são uma classificação útil para passar dados dinâmicos do proponente pai para seus vários componentes filho. O que você pode passar para baixo? Bem, quase tudo realmente. Neste exemplo, você não precisa me acompanhar. Estes são apenas alguns exemplos antes de começarmos a trabalhar com nossos dados reais. Então, o que vou fazer primeiro é dizer que queríamos mudar o nome no rodapé. Então aqui está nosso rodapé nos pais. Podemos adicionar um atributo, digamos nome. Você pode chamar isso de qualquer coisa que você quiser. Mas mudamos o nome. E então vamos mudar esse nome para dizer, Jim, vamos salvar isso. Estão dentro do nosso rodapé. Como recebemos a string de texto de volta? Bem, os parênteses aqui, o parâmetro precisa ser props. Adereços, jogo puxado no mesmo. É declarado que seu valor nunca é lido. Como atualizamos esse texto aqui? Vamos excluir isso. E então o que precisamos fazer é abrir alguns aparelhos encaracolados. E é assim que usamos JavaScript dentro deste JSX. Podemos escrever qualquer tipo de droga aqui, mas vamos trabalhar com as variáveis de adereços. Usamos props e , em seguida, paramos e seja qual for o nome do atributo aqui, que é chamado de nome de ponto aproximado. Vamos salvar isso e ele é atualizado para Jim aqui. Também podemos usar isso várias vezes na segunda foto e vamos mudar o Dave, é que a coisa honesta chamada Julie vai bater em salvar. E lá vamos nós. Temos o mesmo para dois componentes, usado três vezes, mas está aceitando três tipos diferentes de adereços. Agora você também pode passar variáveis, entrar no dentro do nosso aplicativo. Vamos criar um const. Vamos chamar esse nome de um. Vai salvar como uma string chamada Jamie. O nome um pode ser usado aqui em vez de Jim, mas não é uma string. Portanto, certifique-se de usar chaves encaracoladas. E vamos colocar o nome um lá dentro. Eu digo Save. E há Jamie. Remova os rodapés. O que mais podemos passar aqui? Vamos nos livrar do nosso nome um, vamos passar algum tipo de booleano. Então, teremos um verdadeiro ou falso. E o que podemos fazer é, digamos que o rodapé vai aparecer ou ocultar essa data. Vamos chamar nossa pontuação constante do ano. E definiremos isso como false porque vamos ocultá-lo no rodapé e vamos remover esse atributo. Digamos que vamos chamar isso. Isso é chamado de um ano. Então, em alguns aparelhos encaracolados, estamos passando nossa variável acima. Isso é chamado de ano, então isso significa que no rodapé, precisamos mudar isso de volta para o meu nome. Tão difícil de levar de volta. Como mostramos e nos escondemos? Este ano? Mais uma vez, precisamos abrir chaves encaracoladas. E vamos usar uma abreviação condicional. Então vamos passar para baixo adereços, ponto de adereços, apenas chamado ano. Acho que estamos apenas passando. Se o ano do ponto de adereços for igual a verdadeiro, mostraremos a string de 2022. Caso contrário, teremos apenas uma árvore vazia, cordas vazias, então vamos nos esconder de volta. Isso é apenas uma taquigrafia. O ponto de interrogação é basicamente um if, se verdadeiro, e esse códon é basicamente um outro. Vamos ver, vamos salvar isso e realmente o temos em nosso ano. Então, se voltarmos para nossos pais, vamos mudar isso para falso. Desculpe, mude isso para verdade porque queremos mostrar aqui. Vamos salvar isso e mostrar o ano. Isso é realmente útil para mostrar e ocultar coisas como conteúdo de texto ou até mesmo alterar nomes de classes devido ao estilo diferente. Vamos reverter isso de volta para quando tivemos o nome aqui. Sim, aproximadamente o nome aqui. Alteraremos isso de volta para nome, mudaremos isso para nome e, em seguida, vamos alterar o nome da nossa variável. Mudou o nome para Keith. Keith criou este gerador de consultas, bem, dentes de burro. Meu próximo exemplo é que você pode definir props padrão. Por exemplo, temos o nome do ponto de adereços aqui. Mas se Keith não estiver mais disponível, podemos fazer tubo duplo, o que significa todos os nomes de pontos de adereços ou agrupamento. Isso não mudou, isso ainda diz dentes porque Keith foi declarado aqui em cima. Se essa fosse uma string vazia, digamos que os adereços não estejam mais disponíveis. Então, remova isso. Então temos agrupamento aqui porque o nome está em branco. Estamos passando por um adereço de mistura. Dentro dos adereços, o nome do ponto de adereços não está disponível. Então, nos dedicamos a puxar. Isso também é útil para backup se você não tiver nenhum dado ou se não houver dados passados para baixo. Ok, espero que isso faça sentido. Não, podemos deixar isso ainda mais limpo. Imagine que você tem vários textos. Então você está tendo que escrever adereços repetidas vezes. Usamos a palavra adereços quatro vezes lá. Mas o que precisamos é de nome. Agora, podemos o que é chamado D estruturar esses adereços. Então, podemos apenas obter o nome e fazer isso. Exclua prompts novamente em chaves, podemos simplesmente escrever o nome da palavra. Apenas se livrar desses vários nomes. E isso significa que só precisamos do seu nome como gordo. Isso é muito necessário. Você é apenas poupança e mensagens de texto isso. Portanto, lembre-se de usar as chaves para se apossar de qualquer um desses prompts que estão sendo passados pelo pai. Mesmo que tenhamos usado o rodapé aqui e na verdade não precisamos passar nada para o rodapé. Então, vamos nos livrar disso. Vamos reverter isso de volta para o meu nome. Será seu nome. Claro, se você criou uma foto sua, diga isso novamente. Isso está de volta ao normal. Acho que acabamos com uma foto por enquanto até começarmos a estilizá-la. Portanto, estamos mais preocupados com a cotação gerada para o componente de cotação. Portanto, esse código é codificado e esse nome é codificado. O curso que queremos transmitir dados reais dentro do aplicativo. Vou criar seu objeto e vamos chamar esses dados iguais, e isso será um objeto. E a razão pela qual isso é um objeto é porque estamos passando para baixo. Bem, preciso de duas coisas aqui, a citação e o nome. Digamos que o nome seja igual a Joe Bloggs. E digamos que a citação esteja na string. Este é um tribunal incrível. Esses dados são o que gostaríamos de passar para o nosso componente de cotação. Vamos chamar esses dados. Estamos referenciando o objeto de dados acima. Citações internas, vamos começar com um nome aqui. Vamos excluir isso, algumas chaves encaracoladas. E antes que eu esqueça, devemos trazer adereços aqui. Ele está aceitando adereços e M, precisamos referenciar dados de pontos de props. E então, em nosso objeto, temos nome, nome. Vamos salvar. E lá temos. Joe Bloggs usaria o mesmo para que a citação precisasse do texto codificado, chaves abertas, adereços, dados de pontos, aspas de ponto. Esta é uma citação incrível. Ótimo. Ok, eu vou ser muito chato e apenas adicionar algumas citações lá para que pareça que uma cotação real melhorou. Lembre-se, podemos destruir isso. Vamos nos livrar dos adereços para fazer esse aparelho encaracolado mais limpo. Vamos chamar esses dados não. O que significa que podemos nos livrar dos dados do ponto de prop, nome do ponto de dados deve permanecer exatamente o mesmo. Estaremos trabalhando com várias aspas porque a ideia é pressionar Gerar e, em seguida, ela mostra uma cotação aleatória. Por enquanto, vamos apenas código rígido, digamos cinco citações diferentes. Então isso significa que isso não vai conter um objeto. Ele contará com cinco objetos, o que significa que devemos incluir isso em uma matriz. Então, o colchete quadrado torna o espaço mais fácil e claro do lado e tudo o que vou fazer é acertar uma vírgula lá e eu vou copiar isso cinco vezes. E então vou alterar o nome e a consulta de cada um. Então use qualquer texto que você queira usar, seja qual for o nome que quiser, onde quiser, você não precisa apenas ter cinco, você pode ter três onde você pode ter 100. Apenas certifique-se de que ele siga esse formato. Portanto, certifique-se de usar suas próprias cotações onde quer que você colete informações. Você não pode simplesmente escrever esse ato, mas eu só vou acelerar isso. Farei isso muito rapidamente e então voltaremos em breve. Ótimo. Se codificado por cinco aspas lá, cinco objetos dentro do formato de matriz de dados. Ou seja, isso é tudo arrumado. Agora você pode ver que isso não está preenchendo aqui. E isso porque agora estamos trabalhando com objetos dentro de uma matriz. Então, não sabe o que acabei de passar para baixo. Essencialmente, não estou passando um array. Portanto, a cotação final. Isso não faz mais sentido porque os dados são uma matriz, então ele não sabe qual consulta extrair dessa matriz. Vamos apenas puxar a primeira citação para baixo. Então, vamos fazer o colchete quadrado de dados 0. Por enquanto, diremos que isso está passando pela nossa primeira citação. Mais uma vez. Em breve mostrarei como mudar isso. Portanto, isso é dinâmico e compartilha citações e nomes aleatórios. Não, para fazer tudo isso, vamos começar a olhar para ganchos e ganchos nosso conjunto antes são uma ótima maneira de gerenciar estado e mudar os efeitos das coisas. Vamos passar por isso em seguida. 7. Introdução aos ganchos e useState: Vamos agora falar sobre ganchos e depois vamos nos aprofundar em nosso primeiro estado americano. Agora apenas explique algumas coisas e então vamos dar uma olhada em algum código. O que são ganchos? Como você pode ver aqui, os ganchos permitem que você use recursos encontrados em componentes baseados em classe. Agora podemos usá-los dentro de componentes funcionais, e são componentes funcionais que usaremos neste curso. Esses recursos incluem lógica com estado. Portanto, isso significa que você pode adicionar estados a cada componente de forma completamente independente e reutilizados de componente para componente. Para mim, usando ganchos em componentes funcionais, o código parece ser muito mais curto, mais simples e mais limpo, enquanto eles têm todos esses recursos encontrados em componentes baseados em classe. Porque o código é mais curto? Ou você acha que os ganchos têm uma curva de aprendizado mais rasa em comparação com o equivalente nas aulas, o que é ótimo quando você está aprendendo esse tipo de coisa pela primeira vez no React. ganchos só foram adicionados no React 16.8. Então sim, tipo de novidade na vida do React. Uma dica rápida. Não use ganchos com loops internos dentro de condições ou funções aninhadas. Você chamaria ganchos no nível superior do seu componente. Como meio tocado. E os ganchos evitam muita sobrecarga que as classes exigem, como criar instâncias de classe, como eventos de vinculação e criação de um construtor também. Agora, se isso não fizer sentido e tudo bem, agora vamos mostrar algum código. Então, primeiro, criarei um componente baseado em classe e criarei esse contador. Então, quando você pressiona um botão, aumente o número na tela em um. Então o que faremos é criar um componente funcional usando o gancho do Estado dos EUA para alcançar a coisa equivalente. E então você pode ver uma comparação com a quantidade de código e a diferença no código para obter a mesma coisa usando o gancho do Estado dos EUA. É assim que um componente básico baseado em classe se parece. Vamos apenas criar uma função de estado simples. Então, quando você clica neste botão, ele adiciona 12. Bem, então a Amazon lá no momento, mas mostrarei como isso parece em um segundo. Com aulas. Primeiro precisa importar o componente, precisará usar a palavra-chave class, o nome do nosso componente e temos que estender o componente. Portanto, isso já é mais longo que a primeira linha de um componente funcional. Se estamos atualizando o estado, precisamos incluir um construtor e um super. Então, para definir o estado, digamos que sempre o número padrão, precisaríamos usar o, esta palavra-chave, esse estado é igual. E, em seguida, um objeto que podemos chamar de nossa variável, digamos contar, e definiremos esse padrão de 0. Precisaríamos de uma função para incrementar o número. Vamos chamá-lo de incremento. E então, para definir o estado novamente, precisamos usar a palavra-chave this e usaríamos esse estado definido. Portanto, isso mudará o valor dentro de um objeto. Nossa variável de contagem precisaria ser atualizada para este estado de ponto, contagem de pontos mais um. Então, estamos pegando o valor original e atualizando-o por um de cada vez. Para usar a função de incremento no botão, usamos onclick. Então precisamos chamar esses incrementos de pontos. Então, para realmente fazer com que essa função de incrementos funcione, você tem que ligá-la também dentro do construtor, que é facilmente esquecido. Então, sim, isso está incluído ou necessário em componentes baseados em classe, você faria essa corrente igual a esses incrementos de pontos, ponto de ligação ponto isso. Quando você está aprendendo coisas como essa, especialmente em componentes baseados em classes, isso é bastante confuso. Há muito o que levar aqui. E não faz sentido imediatamente por que isso é necessário. Mas é. Mais uma vez, mostrarei como isso difere dentro de um componente baseado funcional usando ganchos. E, em seguida, para exibir um número, o número agora é essa contagem de pontos do estado do ponto. Vamos salvar esse número agora é um a um. Lá vamos nós. Está mudando o estado a cada vez. Ok, então muito incluído lá, cerca de 20 linhas de código. Agora vamos dar uma olhada no nosso gancho. O que vou fazer é apenas comentar a classe e comentarei no gancho. Certo, o número é nove minutos em branco. Ok, então como conseguimos o resultado equivalente dentro do componente base funcional usando o gancho Estado dos EUA. Primeiro, precisamos importar o estado dos EUA. Terceiro do React. Precisa importar seu estado assim. E então, como se parece o estado de uso? Inicialmente, precisaríamos declarar uma constante, o que seria igual ao seu estado trazido acima. E então dentro dos parênteses está nosso valor padrão, que é 0. Então, sabemos disso. E então o que acontece antes dos iguais. Então, como eu disse, é um const. E então precisamos destruir o que você afirma que nos dá. Existem dois parâmetros que devemos incluir. Na verdade, diz que atingiu. Ele espera que um valor ou retorne ao valor com estado e uma função o atualize. Então essas são as duas coisas. O valor é chamado de contagem, podemos chamar isso do que quisermos. E, em seguida, uma função para atualizar isso. Normalmente, a sintaxe convencional dessa função seria a palavra definida e, em seguida, o nome da variável, ou em CamelCase nesta corrente, neste caso, ela é definida contagem assim. Você não pode contar o set current, use state. Dentro do nosso botão, precisamos que incrementos função ou onclick, pelo menos onclick é igual. Então o que precisamos fazer é usar uma função de seta. Toda vez que você clica nisso, ele aciona a função e podemos usar o set current aqui. Então defina contagem. Podemos contar mais um. Então o número agora está atual. Não precisamos usar o, esta palavra-chave em qualquer lugar que possamos saltar de referência atual. Não há ligação da função. Podemos simplesmente fazer tudo na fila. Então, teoria, pressionar um atualiza o número sem atualizar a página. E veja o quanto isso é mais limpo comparado à nossa classe de componentes baseada em classe. Temos que incluir comparativo. Não há necessidade disso. O nome da função é muito mais simples. Não estamos estendendo o react, não estamos estendendo o componente. Não há uso do construtor aqui ou super. Não precisávamos vincular a função. Nós apenas usamos uma linha do seu estado aqui. Não há necessidade dessa função adicional. Não precisamos usar a palavra-chave, esta aqui. Podemos apenas referir a contagem como fizemos aqui. Você pode ver como economizamos tanta codificação aqui, apenas usando o gancho do Estado dos EUA. Ok, então vamos usar o estado dos EUA em nossa aplicação real, mas chegaremos a isso em breve. Vamos dar uma olhada em um outro gancho útil, mas usaremos o efeito de usuário resfriado na próxima lição. 8. hook do uso: O efeito dos EUA Hooke. Senhoras e senhores, usaremos o efeito US Hooke em nosso aplicativo. Usamos para buscar nossos dados locais, portanto, nossa variedade de cotações e facilidade. Na verdade, o Herc é ótimo para isso porque permite que você execute efeitos colaterais dentro dos componentes e isso é um efeito colateral. Portanto, isso é a busca de dados, como configurar uma assinatura e alterar manualmente o DOM dentro dos componentes do React. Vejamos alguns códigos agora para que eu possa mostrar alguns exemplos práticos do uso do gancho de efeito. Ok, então este é um aplicativo muito grosseiro. O que isso fará é atualizar o título aqui da guia. Quando você clica no botão, ele configurará o número no título e no título do documento. E isso só pode acontecer depois que tudo for carregado, depois que o comparativo tiver pensado. Isso não pode ser feito imediatamente porque estamos acessando o documento. Usamos efeito tão semelhante ao estado dos EUA, podemos trazê-lo em aparência de efeito importante nessas chaves encaracoladas. Como é o efeito das abelhas? Você pode escrever esse efeito. Em seguida, abrimos alguns parênteses e depois esvaziamos parênteses por enquanto. E então usaremos uma função de matriz e abriremos isso com algumas chaves. Ok, então eu disse que queremos atualizar o título do documento depois que tudo tiver meu título de ponto de documento igual, e então mudaremos a mensagem para algo como clicado. Então vamos apenas interpelar a corrente. Então, usando o estado dos EUA, que mostrei em uma lição anterior, para atualizar o contador por um. Você clicou em contagem, mas muitas vezes o padrão é 0. Você pode ver que ele está atualizado sobre o tópico clicado 0 vezes. Então, em teoria, se pressionarmos incremento, você verá esse número mudando lá em cima. Agora isso não funcionaria fora do efeito dos EUA Hooke. E isso porque, como eu disse, isso é um efeito colateral. O que estamos fazendo aqui, estamos atualizando o documento. Precisamos esperar que tudo seja carregado antes que isso aconteça. Agora podemos passar um segundo parâmetro aqui, que será alguns colchetes. O que isso diz ao componente é basicamente assim. Por padrão, esse efeito colateral do efeito de uso é executado tanto após a primeira renderização quanto após cada outra atualização após qualquer renderização na página. Então eu não fiz colchetes significa que isso só acontecerá uma vez. Neste exemplo, isso não é realmente útil porque podemos ver que estou pendurando incrementos. Não está mais atualizando a qualquer momento, porque tudo o que estou dizendo é apenas obter essas informações uma vez e nunca mais. Cenário em que isso é útil é quando você está buscando dados externos ou qualquer dado, na verdade, o que mostrará um exemplo muito em breve. Nesse cenário, você só queria reunir informações na única vez em que tudo diminui. Mas aqui queremos atualizar isso muitas vezes. Na verdade, podemos especificar quando queremos que isso seja renderizado ou mude. Vou colocar toda vez que essa contagem muda. Isso ignorará qualquer outra vez que a página for renderizada, mas somente se contar atualizações , então faça essa teoria. Se eu pressionar incremento agora, ele está atualizando novamente porque está reconhecendo que a contagem está mudando. E quanto a dados externos? Portanto, se quisermos obter alguns dados de uma API ou usar efeitos entrarem em jogo , então é um componente de dados externos get. Aqui estamos apenas listando arte de tarefas. Portanto, esta é basicamente caixa de texto de espaço reservado. Essas informações são provenientes dessa API externa. Você pode ver aqui com nosso estado dos EUA, isso é um monte de tarefas. Portanto, o valor padrão inicial é apenas uma matriz vazia. Desculpe, inicialmente não temos os dados, mas sabemos que serão uma variedade de tarefas ou uma matriz de texto. Então, no nosso efeito de usuário, aqui, apenas buscamos os dados e essa é uma função que estou chamando aqui. Como você pode ver, estou usando a matriz vazia. Isso só é resfriado uma vez na primeira renderização porque só queremos obter essa informação quando tudo for baixo, quando tudo estiver montado, apenas a única vez que estou usando assíncrono aguardar. Eventualmente, você pode esses dados, que é Jason. E então, quando tivermos a resposta, qual é uma variável dinâmica aqui, definindo as tarefas. Então, nosso estado dos EUA é a resposta. A resposta é uma carga de informações dentro de um array. E isso significa fazer o que é. Agora, causamos o mapeamento de resposta por meio de todas as tarefas porque é uma matriz. E então, em uma tag de parágrafo, estou apenas listando o título do item. Essa variável aqui pode ser chamada de qualquer coisa que quisermos. Podemos chamá-lo para fazer se quisermos importar o item, então estou apenas acessando o título do item e ele está exibindo essas informações aqui. Como essas informações, esses dados podem ser um arquivo massivo e massivo, encontrarão centenas e milhares e milhares de entradas, o que significa que não podem ter acesso a isso imediatamente. Temos que esperar por tudo para o Monte. No efeito colateral. Pode levar um segundo para carregar esses dados. E é por isso que estamos usando esse efeito. E então, quando estiver pronto e tiver acesso a todos os dados que podemos exibir. Ele usa o Effect se aplica ao nosso aplicativo e aos nossos dados. Onde mostrarei isso na próxima lição quando começarmos a conectar todos os nossos ganchos e usar nossos dados. Então, usaremos o estado dos EUA e você usará o efeito em nosso aplicativo na próxima lição. 9. Os dados e engatar as nossas: Agora aprendemos sobre o básico dos ganchos. Vamos realmente usar o estado dos EUA e usar o efeito e trabalhar com nossos dados de cotação reais aqui. Então, a primeira coisa que vou fazer é realmente mover esses dados para um arquivo de dados. Criamos esse diretório de dados dentro dos dados de origem que é apenas criar um arquivo js de ponto de dados. Por favor, acompanhe comigo, se puder. Vou copiar esses dados chegados. Veja se isso realmente quebra porque os dados não estão definidos, vamos colá-lo aqui. E não nos esqueçamos de exportar o formato dos dados em si. Certo, isso é exportado. Só precisamos importar data e eu importo, não se esqueça de chaves. Dados de dados de barra. Os dados de barra estão funcionando muito bem em seu próprio arquivo, então é mais fácil de manter. Novamente, se isso fosse um, 100 linhas ou mais do que faria mais sentido tê-lo em seus próprios dados, um arquivo. Então, no momento, estamos apenas codificando na primeira citação da nossa matriz. E estamos fazendo isso passando aspas datadas de tag para abrir o componente de cotação, você pode ver dados e, em seguida, o primeiro é 0, e essa é a primeira cotação. Mas gostaríamos de mudar isso quando você clica no botão. Estará atualizando o estado, o que significa que precisamos trazer estado de uso, novo estado. E então você pode ver que ele diz que você declara snippet, eu só vou clicar em Tab e preenchendo quase o que precisamos. Então vou chamar essa citação, então definir cotação, que precisa ser CamelCase. O que podemos fazer o equivalente à codificação rígida a primeira na matriz é apenas fazer dados. Então o estado 0 não está definido porque não tenho importância aqui em Fort direto do React. Ótimo. E então o que precisamos fazer é, em vez de apenas passar o tempo, todos os dados, só precisamos passar a cotação, citação é declarada aqui e passá-la aqui. Vamos quebrar porque o interior é bastante competitivo. preço de todos os dados em relação a isso precisa ser alterado. Para citar, não vale a pena trimestre. Note que estamos chamando dados de meus erros. Eu mudei esses bytes de dados, mas não precisamos mais dessa matriz excluída da citação e do nome. Lá vamos nós. Certo? Se eu fosse mudar esse valor padrão para um, então é ideal. Outras citações, Judy Smith, se chegarmos aos nossos dados, então sim, é a correta. O próximo na matriz que é codificado, essa é a nossa cotação padrão. Mas, em seguida, no botão, é claro que queremos clicar. Basta usar essa cotação definida para alterar o valor. Por enquanto, vamos apenas codificar um valor como digamos para os dados, para o próximo na matriz. Então, em teoria, ele deve mudá-lo para mim. Pressione Gerar. Lá vamos nós. Isso sempre será apoiado. Terceiro na matriz porque isso é o que o definimos aqui. O que realmente precisamos fazer é aleatorizar esse número aqui, porque a ideia é que você aperta Gerar e ele escolhe uma cotação aleatória de nossos dados já. Então, vamos descobrir um número aleatório. Vamos colocar isso em um const e vamos chamá-lo de número aleatório. Apenas usando JavaScripts padrão, precisamos utilizar pontos matemáticos aleatórios, que escolhe um número aleatório entre 01, então 0.10.2, etc. Mas então precisamos cronometrar isso pelo comprimento dos dados. Então, temos cinco citações aqui. Podemos fazer o comprimento dos pontos de dados. Isso significa que, mesmo se acabarmos com mais 100 e continuarmos adicionando a isso, comprimento dos pontos de dados sempre será o comprimento de nossos dados. Porque não queremos apenas um decimal, queremos que seja um número inteiro. Precisamos adicionar piso de ponto matemático. Certo? Esta é a nossa teoria dos números aleatórios. Acabamos de registrar um número aleatório. E vamos apenas inspecionar o que está acontecendo no console. Estamos recebendo 23340144. Estamos recebendo números aleatórios aqui. Agora, nossa explicação e logo por que isso está acontecendo duas vezes porque só queremos que isso aconteça. E então o que precisamos acontecer é, em vez de codificar isso, precisamos randomizar o número onClick. Então, vamos criar uma função aleatória. Vamos chamar randomizar. Só vou ser uma função de seta. A função simplesmente usaria a cotação definida. Você declara valores aqui onde se apossar dos dados. Mas então, em vez de um número codificado, estamos usando um número aleatório aqui. Então, em vez de na cotação do conjunto de chamadas padrão, podemos usar aleatoriamente assim. Vamos ver o que acontece. Por que isso não está mudando? Claro, precisamos usar o efeito dos EUA. Trazendo você use o efeito aqui. Basta excluir alguns desses valores. Exclua o valor entre colchetes. Então, deixaremos isso vazio porque só queremos obter os dados. A primeira carga. O que vamos fazer é chamar de efeito de uso interno randomizar. Agora você tem um problema? Quando clico em Gerar não está preenchendo continuamente as cotações. A razão é que quando definimos nosso número aleatório aqui só acontece os que acontecem. Claro, queremos obter uma cotação aleatória. Toda vez que algo muda na página, eles estão no primeiro carregamento quando a magnitude de tudo e onclick aleatoriamente a causa está ficando frio e usa um vetor que está correto, mas nós só precisa obter esse número de rodada ser preenchido em cada clique e depois cada teoria da agenda agora estão recebendo as diferentes citações. Excelente. E uma coisa que é útil fazer é se este fosse um enorme arquivo de dados de milhares de entradas, isso pode demorar um pouco para carregar quando você carrega a página pela primeira vez . Portanto, é útil ter algum tipo de carregamento de texto e arquivo de carregamento você usa para dizer ao usuário que os dados estão chegando. Efetue principalmente o que estamos fazendo aqui porque há dados normalizados para trabalhar. Quando você está trabalhando com aplicativos maiores. Isso é útil para saber. Podemos fazer isso com o estado de vocês também. Então, aqui em cima, vamos apenas criar o snippet de dados dos EUA e vamos lembrar que isso está carregando e, em seguida, o set está carregando o I. E então vamos definir isso como verdadeiro. Porque isso será verdade inicialmente quando estiver tentando obter os dados. Ele estará carregando os dados quando você carregar isso pela primeira vez, mas depois quando eles tiverem os dados e podemos dizer que está carregando de volta para false porque os dados foram recebidos. Mas o que fazemos com isso é carregar o valor. Bem, podemos usá-lo como uma condicional para mostrar ou ocultar determinado texto ou conteúdo. Este é um booleano para verdade. Em seguida, definimos como false quando ele obtém os dados. Portanto, não queremos mostrar essa cotação até que o carregamento seja concluído. Por baixo do H1. Para usar algum JavaScript, acabamos de abrir algumas chaves. Então podemos fazer é carregar. Então, se isso for verdade, então o que precisamos fazer? Vamos mostrar um parágrafo que diz citação, carregamento. Isso é bom por enquanto. Caso contrário, se não for verdade, se for falso e o aprendizado foi concluído. É aí que queremos essa citação que pode ficar aqui. Mesmo que eu atualize esta página, você simplesmente não verá isso porque é tão rápido. Vamos definir está carregando para false aqui, ponto de exclamação. Atualize a página e você pode ver que diz citação agora aprendendo, então é assim que seria reverter isso de volta. Lá, basicamente temos nossa configuração de gancho. Estamos usando um novo estado para definir uma cotação, para definir se estiver carregando. Estamos essencialmente usando o efeito do usuário para o efeito colateral, onde estamos obtendo um número aleatório e, em seguida, definindo-o para os dados. Então, tudo isso acontece depois que tudo for carregado na página. Podemos então usar o carregamento condicional para mostrar e ocultar conteúdo diferente. Passando nossa cotação para o nosso componente de cotação, OnClick, estamos aleatorizando o número aleatório e estamos aleatorizando a cotação para obter desses dados que estão em seu arquivo separado. Isso fará sentido, bom e arrumado, apenas usando os ganchos de símbolo. E, na verdade, porque estamos usando esse fato de usuário, podemos excluir esse valor padrão porque um enorme efeito no nó já está aleatorizando esse quarto. Todo tipo de nota que traz uma nova cotação, ótimo. 10. Teste: Testando, testando 123. Certo, aqui está o que vamos fazer. Agora, basicamente, concluímos a parte do React do trabalho. Podemos testar os dados, podemos testar nossos componentes. E a melhor maneira de fazer isso é se você estiver usando o Google Chrome é acessar a loja virtual de barra Chrome.google.com e procurar ferramentas de desenvolvedor React. Estas são as ferramentas oficiais de desenvolvimento porque são oferecidas pela Meta, que é o novo Facebook, que reage se você não soubesse disso. Você pode ver que eu já baixei isso para o meu cromo porque ele diz que foi removido do crescimento, mas sim, certifique-se de obter isso. O que isso lhe dá. Deixe-me fechar isso. Vou te mostrar como você ganha dois. E você chega a isso. Estamos em um aplicativo antes da sua hora para inspecionar. Abra suas ferramentas de desenvolvimento normais onde você provavelmente está familiarizado. E então você pode ver essa nova guia, saquê oponentes e perfil. Clique em Componentes. E ele é o nosso aplicativo. Então, temos nosso aplicativo, que é nosso componente pai. E você pode basicamente ver a hierarquia, senhor. Você pode ver que o aplicativo precisa componentes filho, aspas e rodapé. Clique neles, também o destaca no front-end também. E também é ótimo se formos cotados, sabemos sobre nosso componente atual, estamos transmitindo os dados da cotação. Você vê hélice, talvez seja do outro lado. Temos adereços. Podemos ver o aproximado sendo passado para esse componente principal. E, de fato, são dados que temos um nome e temos uma cotação. Se atualizarmos isso, gerar e, em seguida, atualizações em tempo real, você poderá ver como isso mudou. Podemos até testar nosso proxy para que eu possa escrever o que quiser. E lá vamos nós. Está atualizando no front-end. Tenho que fazer isso. Também podemos ver que há o estado que estamos declarando em nosso componente de aplicativo pai, que na verdade é que isso foi percebido por plantas erradas excepcionais, não muito excepcionais da minha parte. Ignore isso, por favor. Temos nosso estado aqui. Também temos um segundo estado. Portanto, esse é o nosso estado de carregamento. Atualmente, ele está definido como false. Se eu fosse marcar isso, há uma caixa de seleção todo o caminho para a direita aqui. Você pode ver em nossa cotação agora carregando. Portanto, é uma boa maneira de testar coisas que você pode interagir com seus dados reais e avisos aqui, ativando e desativando isso. E você pode ver também na hierarquia a ocorrência oculta o componente principal, que ele deve fazer quando estiver carregando está definido como true. Acontece o falso e está de volta novamente. Outra coisa a mostrar rapidamente, isso não faz parte das ferramentas reativas. Se formos para elementos, podemos ver que o rodapé tem uma classe de Rodapé. Lembre-se de que a classe é uma palavra-chave reservada em reacts. Se eu for para o meu código, você verá que no rodapé estamos usando o nome da classe corretamente. E então mostra que está compilando a palavra correta de classe aqui, o que é bom saber. Então, quando você estiver brincando com o aplicativo URN, sim, definitivamente baixe isso e tenha um clique e veja quais dados você está passando. Além disso, é uma boa maneira de depurar sua mão se você não estiver recebendo os dados, se você não estiver recebendo os adereços corretos passados, se o estado não parecer certo, este é o melhor lugar para ver o que está dando errado e onde você pode precisar consertar algo. 11. Como adicionar estilos: Certo? Bem, mas mais ou menos terminou com a parte React deste curso, que é a coisa mais importante. Nesta lição, vou adicionar alguns estilos que depende completamente de você se você quiser acompanhar ou assistir a esta lição, eu literalmente vou apenas adicionar alguns estilos CSS. Mas se você estiver feliz em adicionar o seu próprio e não precisar acompanhar. Sinta-se à vontade para pular esta lição, certo? Então, de qualquer forma, para aqueles que estão dentro do nosso diretório de estilos, dentro do código-fonte, vou criar um arquivo styles.css. Vamos continuar. No corpo. I'm just going to set a nice font family. Vamos para algo como Gilroy gostou dessa família da fonte. Vamos fazer Helvetica sans-serif para acabar com isso. O que podemos fazer é dentro do App, vamos importar estilos barra barra styles.css, ele depois de estilos. Certo. Vamos criar alguns estilos para a página. Ainda não criamos essa classe. Precisamos adicionar isso à nossa marcação. Mas, por enquanto, vamos apenas adicionar algum estilo para escolher um belo fundo verde, 70 aC para AD, sim, y nada. Então, vamos voltar ao nosso aplicativo. Vamos adicionar o nome da nossa classe à nossa seção. Não se esqueça do nome da classe e não da classe. Página K Existe o nosso verde. Vou alterar o nome dessa classe do aplicativo para contêiner. E então o que mais devemos mudar? Nosso está carregando texto, podemos parar isso como adicionar um nome de classe. Tudo apenas aprender é bom. Nossa citação, e vamos apenas colocar isso em uma nova linha para que possamos ver isso um pouco melhor. Eu vou realmente embrulhar essa citação em um nome de classe div do contêiner quart. Apenas execute o fato. O nosso rodapé estava olhando em nome fértil, tudo bem. Então, que tal nosso comparador queer? Bloqueou o parágrafo da palavra para o nome. Na verdade, vamos adicionar um nome de classe. Nome aqui. Neste ponto, eu encorajaria você a apenas ter uma bagunça com o Oregon College e já estamos em fundos e fazemos este aplicativo você seja dono do seu estilo, o próprio caminho de David. Portanto, é um pouco diferente. Meu. Dentro da página, quero que tudo seja empilhado um sobre outro apenas para ter certeza de que está acontecendo. Vou definir a exibição para flexionar lado a lado, mas então podemos mudar de direção para coluna melhor. E então vou definir a altura para ser 100% da altura da visão, ok, verde em todos os lugares, exatamente o que eu quero. Em seguida, o que devemos olhar? Temos um contêiner. Um contêiner. Também vamos fazer esse display flex. E novamente, vamos colocar isso em uma coluna, coluna de direção flexível. Quero colocar tudo centrado justificado no centro de conteúdo. Em seguida, a altura do recipiente. Vamos fazer a altura da visão 95. Agora no centro. Certifique-se de enviar para corretamente com a margem 0, a parte superior e inferior ou duas no meio. Está parecendo bom. Faremos uma largura máxima de 1200 pixels apenas para telas maiores. Então vamos definir uma largura de 80 por cento porque eu não queria passar por todo o caminho. Lá vamos nós. Isso é cheque. Lá vamos nós. Você pode ver a largura máxima funcionando bem lá. Vejamos nosso cabeçalho H1. H1. Vou tornar isso um pouco verde escuro, então um hash 2676. Vamos fazer um tamanho de fonte de 5050 pixels e bastante grande. Margin zeros 0100 escolhe um pequeno espaço na parte inferior. É assim que nossa cotação contém um x. eu quero fazer é adicionar um pouco de margem. Fundo de gerenciamento 50 pixels. A citação em si blockquote, centrada. Vamos nos certificar de que é branco. Então hash FFF, estilo fonte para torná-lo itálico. Espero que você possa ver como isso é útil para que isso seja atualizado em tempo real. Assim, podemos, em tempo real, afetar os estilos e vê-lo realmente funcionando e como ele se parece, o que é realmente útil. Margem e vamos mover isso. Imagine zeros à esquerda. Faremos um tamanho de fonte de 90 pixels. Bom e grande. Massivo, mas muito parecido. Tudo bem, então o nome abaixo, Joe Bloggs, nome da classe. Vou definir a cor para hash CA 755 C. Sim, bom tipo de cor laranja. Quase como eu pré-preparei essas cores. Incrível. Tamanho da fonte até 20 pixels. Maneira de torná-lo ousado ou 800. Seja bom. Na verdade, farei a transformação de texto em maiúsculas. Sim, Nice. Certo, estamos chegando perto. Em seguida, dê uma olhada no botão. Cor de fundo. Vou colocá-lo para um verde escuro 267, uma fronteira. Vamos nos livrar de 0. Cor do texto e torne-o branco. Vamos garantir que o cursor esteja ponteiro quando você passar o mouse sobre ele. Bom. Família de fontes para o botão. Na verdade, vamos roubar ou você tem aqui peso da fonte, negrito, 800. A largura é muito grande, então é uma largura máxima. 150 pixels. Precisa de algum preenchimento de 5015 pixels em torno de lacunas e boas, e faremos a transformação de texto. maiúsculas. Bom. Assim como adicionar um estado de focalização a este botão, o botão dois-pontos passa o mouse. Vou mudar a cor de fundo para ser branca. E mudaremos a cor do texto para ser o verde escuro. Basicamente, basta reverter tudo para 66 F. Parece bom. Acho que acabamos de colocar o rodapé no fundo aqui. Na verdade, não adicionei uma classe de rodapé a isso. Vamos usar essa classe de rodapé. Cor do texto. Vamos fazer isso cinza. Sim, tudo bem. E garantiremos que o texto se alinhe definido para o centro. Sim, está tudo bem. Isso fará isso procurando nosso texto de carregamento. Deixe-me ir ao aplicativo. O que faremos é definir como aprendendo como falso. Aqui está um ponto de exclamação, carregamento coordenado e veja, meu parágrafo tem o nome do carregamento. Então, vamos para estilos. Certamente não precisa ser para Francine. Aprender constantemente a cor pode ser branca. E faremos apenas um tamanho de fonte maior de seis pixels profundos aqui. Absolutamente bom. Basta reverter isso de volta. Salvar. Isso está parecendo muito decente. Sim, boa. Esse é o nosso gerador de código. Bom e simples. Mas trabalhar, parecer muito bom. 12. Como impulsionar seu trabalho: Agora é hora de implantar seu aplicativo fantástico, mas você acabou de construir para que o mundo inteiro possa vê-lo. E agora vou mostrar como é fácil fazer usando o Netlify. Netlify é uma ótima equipe e tem um ótimo serviço em várias ferramentas para criar e implantar aplicativos. Sim, tenho muitos recursos incluindo análises e testes divididos. A implantação é realmente ótima. E é por isso que usaremos o serviço de implantação do Netlify para implantar seu aplicativo. Vamos fazer tudo isso dentro do terminal aqui. Abra seu terminal. Dentro do aplicativo. Certifique-se de criar um aplicativo pronto para produção. Para fazer isso, vamos executar o npm run build. Como diz no terminal, criando uma otimização de compilações de produção. Então, isso vai compilar todos os nossos arquivos nesses arquivos de tamanho muito pequeno, o que é ótimo. E se olharmos para nossa estrutura de pastas, agora temos uma pasta Build. E isso é exatamente o que vai ser carregado. Então, essencialmente, ele criou um arquivo HTML de índice com todo o nosso trabalho. Há também uma pasta estática com nossos estilos e JavaScript. Isso está pronto para produção, construa nosso aplicativo. Basta clicar uma vez na tela. Então só precisamos instalar o npm, instalar o cliente Netlify, que é o Netlify space CLI, e faremos space dash g. Então ele é instalado globalmente. Se você encontrar qualquer área de permissão como eu tenho, basta escrever tudo de novo, mas coloque sudo na frente. Isso nos dá permissões de administrador para instalar o cliente Netlify. Sudo npm instale o Netlify. Cli, space dash g. Temos o cliente Netlify instalado. Vamos apenas claro que estava no terminal e, em seguida, é apenas um caso de escrever espaço Netlify, implantar. Pressione Enter. Certifique-se de que eu soletre direito. Faltando um T lá. Em seguida lo-fi, escrevi errado novamente. Elevador líquido phi. Implante. Novamente, por ter áreas de permissão faça o mesmo com o sudo na frente. Netlify. Não notifique a implantação. E então isso abrirá uma página que se parece com essa e você precisa fazer login no Netlify. Você pode usá-lo dependendo do que você tem é você tem GitHub ou Bitbucket, ou você pode simplesmente usar seu e-mail. Vou fazer login com meu GitHub. Já povoado para mim. Acabamos de entrar. Temos autenticação de dois fatores. Deixe-me resolver isso. Em seguida, autorizaremos a Netlify. Então, novamente, estamos apenas passando pelas etapas de segurança, autorizar. Acabamos de voltar ao nosso terminal. Vou selecionar esses dois oxigênios. Vou selecionar Creighton, esquecer um novo nome de site como opcional. Vamos apenas ser freelance, indefinidos. E então ele está me perguntando qual diretório publicar. Bem, é nossa pasta Build. Só vou escrever build aqui. Há a implantação do nosso trabalho, apenas esperar que o Go Live seja bem rápido e a implantação esteja ativa. Em teoria. Este URL que foi fornecido em nosso terminal. Vamos para aquela noite. Esse é o nosso aplicativo. Trabalhando conforme o esperado. Tudo isso também é gratuito e conseguimos implantar isso rapidamente. Espero que todas essas coisas do terminal façam sentido. É assim que você pode implantar o trabalho Netlify e ele é gratuito, o que é ótimo. Gráfico para seguir estas etapas, siga as instruções do terminal. Certifique-se de criar uma pasta de compilação que seja o destino que você precisa dizer à Netlify para examinar. Em seguida, como gerador de cotações final no URL fornecido no terminal. Agora eu recomendaria que se você chegou a esse estágio e tudo for bem-sucedido e você tem um link para compartilhar. Por favor, certifique-se de compartilhar seu trabalho no Skillshare. Ou você também pode incluir uma boa captura de tela, se quiser. Seria ótimo compartilhar seu URL. Então eu e outros alunos podem ver seu trabalho incrível e eu não recebi feedback. E enquanto fazemos isso, por que não damos uma olhada no trabalho do outro aluno. Boa. Você acabou concluir a criação de um gerador de cotações ou nenhum react e foi implantado na web também. Muito bem. 13. Para onde ir a partir daqui?: Poderia dizer que você criou seu aplicativo, aprendeu os fundamentos do React. Você é incrível, mas como você se torna mais incrível em reagir? Bem, essas são apenas algumas sugestões de mim mesmo sobre onde você pode ir seguida se quiser fazer alguma leitura adicional, mas com relação a reagir e então é mais intermediário, tipo avançado de coisas que eu acho que você deveria fazer é dar uma olhada em alguns outros ganchos. Há mais ganchos diferentes do que você declara em uso. Aqui estão alguns. Use href e use o contexto. Chegaremos àqueles em um segundo e muitos outros. Então, dê uma olhada na documentação do React. Em seguida, listei o roteador react porque seria ótimo para você saber, entender como você pode trabalhar com outras páginas. Então, acabamos de criar um aplicativo de página única. O que acontece se você tiver outras páginas que precisa lidar com o sistema de rotina, então você pode utilizar algumas estruturas. E Next, JS é uma estrutura React muito popular e tem alguns recursos realmente úteis para simplificar seu processo e otimizar para tornar mais completo e otimizar o aplicativo React. Outros ganchos usam ref que mencionei, e essa é uma ótima maneira de acessar elementos DOM. Neste exemplo, usamos href aqui. Inicialmente é nulo. Adicionamos isso a uma constante chamada elemento de entrada. E na própria entrada estamos usando REF para elemento de entrada. Portanto, esse elemento de entrada agora é um referenciado. Então, quando clicamos no botão, no botão, clique aqui, esta é a função. Temos o elemento ponto de entrada, a corrente escura de referência, foco escuro. Então, estamos adicionando foco a esse elemento. Acessamos este elemento DOM com use ref, use contexto. Então, como escrevi aqui, ele é usado para criar dados comuns que podem ser acessados em toda a hierarquia de componentes devem ser destacados porque essa é a coisa mais importante sem passar a paroxetina manualmente para cada nível. Então imagine que você tem crianças cinco níveis abaixo. Então, quando nosso aplicativo, nosso aplicativo, desculpe, tivemos um dos pais e dois filhos em um nível abaixo, mas imagine se houver mais filhos, netos, bisnetos, os níveis continuam diminuindo. Você não quer continuar passando pela escola Prop todo o caminho para baixo. Vou ficar muito chato. Você pode usar, usar contexto ou criar contexto, o contexto no nível pai. Então, neste exemplo, eles estão usando temas, sistema hey ou sistema de cores para claro e escuro. E então você envolveria o aplicativo com este tema, provedor de contextos constantes passando por seus valores e depois com a criança. Portanto, isso pode ser qualquer nível para baixo, em vez de passar as colheitas até o interior da criança, qualquer criança, você pode usar esse contexto. Escolhemos uma constante chamada tema e, em seguida, você só tem acesso a esse contexto ou plano de fundo. Pense em primeiro plano. Este tema está sendo acessado pelo pai. Mencionei roteamento. Dê uma olhada na documentação oficial que está aqui. O URL é apenas uma coleção de componentes de navegação que podem ser usados em seu aplicativo. Então, dê uma olhada nisso se você quiser trabalhar com várias páginas em suas estruturas de aplicativos, eu mencionei o Next JS. vez, dê uma olhada na orientação eficiente do Dr.. Ele tem muitos, muitos recursos excelentes, renderização estática e no lado do servidor para um bom desempenho, empacotamento inteligente, suporte completo a TypeScript, pré-busca rude e roteamento. Um particularmente parecido no próximo e o torna tão simples. É quase como um sistema de arrastar e soltar, no sentido que você teria um diretório para páginas e arrastaria, você as comparará ou páginas nesse diretório e fonte torcendo para você mais ou menos. Sim, agradável e fácil. Ele também vem com a otimização de imagem e muitos outros recursos. Então, uma vez que você tenha a cabeça reage anualmente confortável, próxima geração x valeria a pena dar uma olhada. 14. Resumo e razões por que você é incrível: Muito bem. Você fez um trabalho incrível passar todo o caminho neste curso e criar seu próprio gerador de cotações usando as técnicas mais recentes que você aprendeu. Certamente recursos importantes do React, incluindo JSX, props, hooks, gerenciamento de estado e testes, só para citar alguns. Ser um desenvolvedor front-end e ter conhecimento dos fundamentos modernos do React é um conjunto tão útil de habilidades para ter, não importa em que nível você esteja, seja júnior, médio ou sênior. React ainda é a biblioteca JavaScript mais popular do mundo. Portanto, o fato de você ter criado um aplicativo React de página única coloca você na parte superior do espaço do desenvolvedor web front-end. Parabéns a você. Agora você pode pegar essas habilidades e usá-las em seu trabalho futuro? Finalmente, eu só queria agradecer muito por não apenas se inscrever neste curso, mas também por completá-lo. Sem o seu apoio, professores como eu não seriam capazes de criar conteúdo como esse. Então, realmente, muito obrigado. Se você gostou desse curso, e eu realmente espero que você tenha gostado, significaria muito para mim se você pudesse tomar um tempo para deixar um comentário. Eu li todos os comentários que recebo e levo qualquer comentário que você possa deixar. Assim, você pode continuar melhorando minhas lições e continuar fazendo os cursos que achar úteis. Então, com isso dito, muito obrigado novamente, você é incrível. noite vai em frente e código.