Fundamentos do React para iniciantes absolutos | Crie seu primeiro site de portfólio

1. Introdução ao curso: Oi, aí. Bem-vindo a este curso sobre os fundamentos do React Sou Fazal, empreendedor e entusiasta da tecnologia, apaixonado por ajudar você a dominar tecnologias modernas que podem ajudar você a facilitar a sua vida e a de outras pessoas Agora, neste curso específico, abordaremos os fundamentos do react, e há uma ampla gama de tópicos que abordarei neste curso específico Então, vamos começar. Então, eu tenho esse plano de estudos aqui, em primeiro lugar, eu tenho os benefícios do curso sobre por que você deve fazer este Agora, para começar, começaremos com a visão geral do react, o que é react e o desenvolvimento web. Então, teremos uma visão geral completa de como as coisas funcionam quando você está trabalhando com o react. Estaria fazendo uma configuração de projeto, certo? E para a configuração do projeto, usaremos o código VS e o Wheat. Ambos são como ferramentas comerciais de produção que estão sendo usadas quando se trata de desenvolvimento web. Então, aprenderemos sobre eles. Vamos descobrir o GSX. Agora, o que é GSX e tudo mais, se você nunca ouviu falar desses termos, não se preocupe, eu tenho tudo o que você precisa dentro do curso Esta é apenas uma visão geral que estou dando a você com os tópicos que basicamente você precisa conhecer. OK. Em seguida, falaremos sobre os componentes, adereços e retornos de chamada Então, vou abordar todos esses conceitos. Em seguida, desestruture e espalhe a sintaxe. Então, como você pode usar a sintaxe de desestruturação e propagação, que é um conceito de JavaScript com aplicativos web react ou react, é o que devo dizer E então teremos um projeto prático em que pegaremos todo o nosso aprendizado e o implementaremos para criar um site de portfólio Agora, este site de portfólio fornecerá uma prática completa de tudo o que você aprendeu em todo o curso e lhe dará confiança suficiente para que você possa sair e construir coisas com o react. Agora, ao aprender com este curso, há alguns benefícios. Número um, palestra prática. Então, eu entendo que, quando se trata aprender tecnologia ou desenvolvimento, os alunos preferem palestras práticas, uso mínimo de slides Então, eu quase não uso slides. Eu me certifico de tudo, desde o filme de reação, desenvolvimento web até a construção do site do portfólio Tudo está coberto de forma prática. Agora, quando falo sobre o Ovie of react e por que react foi realmente inventado e por que ele realmente existe, dê exemplos no navegador de como são as coisas ou quais são os problemas que existiam antes da compra do react e, quando o react chegou, como ele resolveu esses problemas Então, tudo isso com exemplos ao vivo. É por isso que eu disse que as palestras são práticas. Passamos a maior parte do tempo no navegador e no IDE. E então temos um encerramento com a ajuda do projeto. Portanto, esse é um dos benefícios importantes em que você também pode criar algo no final das contas, que é um site de portfólio Então essa é a visão geral do curso e, ao final deste curso, posso garantir que você terá uma base sólida com o react, que lhe dará confiança suficiente para aprender conceitos muito mais avançados com relação ao desenvolvimento web. Além disso, este curso específico vem com um projeto que você pode conferir na seção de projetos. E no final, depois de terminar o curso, você pode fazer o projeto, enviá-lo e compartilhá-lo com toda a turma. Então, o que você está esperando? Te vejo dentro da sala de aula. 2. Introdução ao React: Oi, aí. Bem-vindo, e vamos começar a falar sobre o react. Então, falaremos sobre o que é reagir, por que isso existe. Está bem? Então, aqui, estou no Google e vou simplesmente digitar react. Então, no momento em que você digitar react, você verá este site oficial do react, que é react dot F. Agora, antes de visitar o site, deixe-me falar um pouco sobre o que é react O React é uma biblioteca, como você pode ver aqui na descrição, e é uma biblioteca JavaScript. Se você está um pouco familiarizado com o desenvolvimento web ou se é engenheiro da computação, você saberá que a web consiste essencialmente em SGML, então temos CSS e até mesmo JavaScript. Agora, o que é HTML? O HTML nada mais é do que o alicerce da web. Então, se você clicar com o botão direito em qualquer coisa aqui, como qualquer elemento, esses são todos elementos, certo? Então, se você clicar com o botão direito em qualquer um dos elementos, se você disser inspecionar. Estou no Chrome e tenho essa opção, inspecionar. E deixe-me anotar isso. Você vai ver todo o código aqui. Você pode ver todos os elementos HTML aqui. Se você estiver em algum elemento, verá o elemento HTML correspondente sendo destacado. Isso é um DIF. HTML consiste essencialmente em tags, você pode ver aqui, tag DIF Então temos a etiqueta H two. Tudo isso está em tags HTML incorporadas que os navegadores entendem. Esses são navegadores modernos que entendem essas coisas. Está bem? Então, isso é HTML. Para que é usado o HTML? É usado para definir os elementos. Agora, o que acontece é que definir os elementos não é suficiente. Está bem? Você precisa embelezá-los. Por exemplo, aqui, você vê que essa reação está sendo destacada em negrito, certo? Por que está sendo destacado em negrito? Porque eu pesquisei por react. Está bem? Existe um estilo específico para isso, certo? Você pode ver que isso está sendo destacado em cinza claro, o que é um pouco diferente dessa coisa aqui. Isso é um link, certo? Então, isso está sendo destacado de forma diferente. Então, se eu clicar com o botão direito aqui e se eu inspecionar, você verá que esta é a etiqueta H três e A. Aqui você pode ver uma etiqueta. Então, em HTML, você cria links usando a tag A. Agora, se você expandir um pouco, aqui é onde você verá todo o CSS. Você pode ver. Então, uma tag, essa é a tag A, e aqui você pode ver o CSS, a cor é definida como azul. Se eu mudar a cor para, digamos, rosa, vermelho, você verá que a cor está sendo alterada no navegador. Você pode ver que isso é totalmente em tempo real. Se eu quiser mudar isso para, digamos , amarelo, qual cor você quer? Ok. Então você pode mudar a cor. É assim que o embelezamento está sendo adicionado às páginas da web. Ok. Como você pode ver, embelezamento está sendo controlado pelo CSS O que é esse código, você pode ver aqui, esse código é CSS. Então você está dizendo para uma etiqueta. Agora, o que é uma tag Uma tag está aqui, seja, se eu passar o mouse sobre A tag, você verá a tag correspondente sendo destacada ou o elemento correspondente sendo destacado à esquerda, quando você passar o mouse sobre a Então é a reação, esse texto de reação. Isso é o que é. Aqui você tem CSS para o mesmo. Uma etiqueta, diz toda a etiqueta. Se eu passar o mouse sobre Etag, você verá todas as etiquetas eletrônicas sendo destacadas no lado esquerdo, certo Então é aí que todas as tags estão sendo usadas, o que significa que é onde todos os links estão sendo renderizados porque todos são links, certo? Então, eu quero que todas as etiquetas eletrônicas estejam nessa cor. Não quero nenhum tipo de decoração de texto. Isso é o que você está definindo aqui. Está bem? O cursor está sendo alterado para ponteiro. Então, se eu passar o mouse sobre isso, você pode ver que o cursor está sendo alterado, certo? Está sendo alterado para um ponteiro. Eu posso desativar isso. Ok. Ok, não está me permitindo ignorar isso, mas tudo bem O objetivo é entender o que é CSS? Você pode ver isso ao vivo aqui, certo? Então, vou tentar trazê-lo para a cor padrão. Foi algo parecido com isso. Ok. Amarelo e verde não parecem tão naturais. Mas você entende, isso é CSS, certo? Então você tem algo chamado JavaScript. Agora, o que é JavaScript? O JavaScript dá vida às páginas da web. Então, qualquer tipo de validação que você queira fazer nas páginas da web, qualquer tipo de pop-up que você queira mostrar, você pode fazer tudo isso. Ok. Então, se você quiser ver o JavaScript em ação, podemos ir para a guia Console aqui na parte superior. Ok. E esse é o console do navegador. Então, aqui eu posso dizer alerta, e eu posso simplesmente dizer oi aqui, algo assim. Você pode vê-lo. Esse é o alerta. Portanto, qualquer tipo de validação, pop-ups ou qualquer tipo de coisa dinâmica que você queira fazer, você pode usar o Ja Script Está bem? Então, o Ja Script dá vida às suas páginas da web. Está bem? Agora, o que é react React é uma biblioteca JavaScript. Está bem? Vamos até o site do React e vamos entender por que essa coisa existe. 3. Como a Web funcionava antes do React?: Agora, vamos entender como a web costumava funcionar antes de reagir. Está bem? Então, o que costumava acontecer é esta é uma página da web, e você tem diferentes elementos interativos aqui. Posso clicar na barra NAF e ir para outra página. Agora, quando você carrega uma página da web, HTML é carregado, o CSS é carregado, o script Ja é carregado. Agora, quando você muda para outra guia aqui, novamente, tudo é recarregado O HTML é recarregado. O CSS é recarregado e o Jscript é recarregado. Se eu for até aqui, novamente, tudo estará recarregado. Clique em Comunidade, novamente, tudo está recarregado. Portanto, isso não é eficiente. Você sabe, toda vez, mesmo que o CSS e o Jscript não mudem e sejam constantes em todo o lado, nós os recarregamos Está bem? E isso não é bom, certo? Essa não é a maneira eficiente, e nós humanos adoramos ser eficientes, certo? E é por isso que o react existe. Então, eu vou te dizer como o react é diferente. Portanto, o react é usado para criar aplicativos web de página única. O que isso significa? Então, o que acontece é que você tem esse aplicativo da web, esse é um aplicativo da web. É uma página da web. É um aplicativo da web. Vai ter uma moldura externa. É uma moldura e por dentro, por exemplo, ela terá componentes. Por exemplo, a pesquisa é um componente. Essas guias são um componente da barra de navegação. Você pode criar uma barra de navegação e adicionar quatro botões nela Está bem? Esse botão também é componente. Isso também é um componente. Então, a parte central também é componente. Essa página inteira tem uma moldura e, dentro dessa moldura, você tem componentes inseridos no interior. Está bem? Agora, o que acontece é que, se você quiser mudar para aprender aqui, pode ver que a principal coisa não muda em todo o site, certo? Então, por que você quer recarregar isso? Você não quer recarregar isso? Você pode simplesmente recarregar essa parte inferior, certo? Então, com a ajuda dessa arquitetura baseada em componentes, isso se tornou possível. Então, em vez de recarregar toda a página da web, mesmo que o Navbar seja constante, você está recarregando a coisa toda Não é eficiente, certo? Está consumindo seus dados, está consumindo a atividade da rede. Também está consumindo poder de processamento. Não é eficiente. É por isso que surgiu essa coisa baseada em componentes , onde apenas o componente em que houve uma alteração costumava ser recarregado Portanto, se você for para a referência, somente essa parte será recarregada Se eu mudar para isso, somente essa parte será recarregada. Então é isso que é um aplicativo de página única. Portanto, na verdade, é um aplicativo de página única, como uma página, e os componentes estão sendo recarregados Está bem? E eles estão sendo recarregados dependendo de onde você está interagindo e de como o aplicativo é criado OK. Então é isso que são aplicativos web de página única, e o react é usado para criar esse tipo de aplicativo web de página única. Está bem? Então, o que o Reacts permite que você faça é aqui que você pode ver, ele permite que você crie componentes Está bem? Agora, como eu disse, aqui, essa coisa é um componente, essa coisa é um componente. Todas essas coisas podem ser componentes que você definiu e, em seguida, você pode ter um quadro e, dentro desse quadro, você pode carregar todos os componentes. Isso é o que o react permite que você faça. OK. E por que isso permite que você faça? Então eu acabei de explicar. Porque se você for para referência, estou apenas recarregando esta parte inferior Não estou recarregando esta Navbar. Não estou recarregando esta mensagem na parte superior, certo? Somente esta parte inferior está sendo recarregada. Se eu clicar aqui, somente as coisas do lado direito serão recarregadas Você não precisa recarregar toda a página da web toda vez, certo? Então é isso que o react permite que você faça. Ele permite que você crie componentes. Você pode criar componentes, ok? Então, por exemplo, você pode criar uma barra de pesquisa usando re, você pode criar Navbar usando react, e então você pode definir um quadro, e dentro desse quadro, você pode montar todos os componentes da maneira que quiser Está bem? Então é disso que essa coisa fala. Está bem? Então, ele permite que você crie interfaces de usuário a partir peças individuais chamadas componentes, e também tem uma demonstração incrível aqui no site, ok? Portanto, este site pode mudar a interface pode mudar dependendo de quando você está assistindo a este vídeo. Mas agora estou vendo esse tipo de interface no site. Ok, se você vier, eles terão esse exemplo incrível. Não se preocupe se você não entender esse código. O que essa coisa está tentando destacar aqui é que existem componentes aqui. Você pode ver que isso é uma interface. Nossa interface que você deseja mostrar. Esta é uma miniatura de vídeo. Depois, você tem o título do vídeo, descrição, o botão curtir e assim por diante. Está bem? Agora, aqui o que você fez foi criar um componente chamado miniatura, então você pode ver aqui a miniatura Em seguida, você criou um componente chamado botão. Botão Curtir. Você tem um componente chamado vídeo. Você pode ver. Este é o vídeo componente inteiro, você pode ver, certo? Então, isso é reutilizável, como você pode imaginar, tipo botão, se eu quiser usar em algum outro lugar, preciso apenas fazer uso dessa tag Está bem? Miniatura, preciso usar outro lugar, posso simplesmente usar essa tag. Amanhã, se houver alguma alteração na miniatura, só preciso fazer essa alteração em um lugar e ela será refletida na um lugar e Amanhã, se eu quiser mudar a forma como a animação desse botão funciona ou qualquer tipo de interface de usuário mudar aqui, quero mudar a cor do botão curtir. Você apenas faz alterações onde quer que tenha definido esse botão. Onde quer que você o tenha definido como botão, você faz essa pequena alteração e a salva, ela é implantada em todo o aplicativo Essa é a mágica. A reutilização, como você pode imaginar, é uma das principais coisas que estão surgindo. Você pode ver aqui. OK. Você pode ver se trabalha sozinho ou com milhares de outros desenvolvedores Usar o react parece o mesmo. Ele permite que você combine perfeitamente componentes escritos por pessoas independentes E aqui você pode ver, isso é incrível, você pode ver aqui. Usando um pouco de JavaScript, ele foi renderizado. Você criou um vídeo aqui. Este foi um vídeo que você criou e usando JavaScript, você está renderizando o vídeo três vezes, você pode ver Três vídeos. Está bem? E sintaxe, essa é uma sintaxe de marcação conhecida como Então, JSX é algo que você ouvirá frequência quando estiver trabalhando com o react, ok Então, isso é sobre o React e como ele funciona. OK. Então, eu encorajaria todos vocês a acessarem este site. Além disso, para dar mais um exemplo, um pouco interativo. Podemos ir para ganhar aqui. E se eu rolar até aqui, você pode ver isso. OK. Então, aqui, o que fizemos foi essencialmente criar uma função. Portanto, esta é uma função que está retornando o botão. E digamos que isso possa ser qualquer botão. Então, neste momento, é um botão muito simples e diz: “Eu sou um botão”. OK. Mas digamos que, se você precisar de um tipo de botão específico na interface do usuário e na mensagem do seu aplicativo, você pode defini-lo assim. E aqui, o que você fez está aqui, eu estou, tipo, renderizando esse botão aqui Você pode ver meu botão. Então, eu vou te dizer que quando você está desenvolvendo com HTML, você tem tags embutidas Você tem essa tag H um, você tem H dois tag, você tem H três tag. E cada tag tem um significado, certo? A tag H one tem um significado, se você escrever alguma coisa usando a tag H one, ela será mostrada dessa forma no cabeçalho. Se eu substituir isso e isso for como um editor adequado, posso alterar o código aqui. Então, se eu mudar isso para H dois, assim, você pode ver que isso vai mostrar as coisas de uma maneira diferente, ok? O tamanho da fonte é um pouco menor, ok? Portanto, cada tag embutida em HTML tem seu próprio significado. Então, aqui você pode ver que essa é nossa própria tag personalizada. Então, o react permite que você crie sua própria tag personalizada aqui. Definimos nossa própria tag personalizada, Meu botão. Esta é a função, botão M que definimos. Qual é a definição de myButon? Essa é a definição. Então, sempre que você está ligando para MyButon, estamos chamando Mbiton, estamos usando Mbiton Sempre que você estiver usando o botão Meu aqui, ele será retornado e , de certa forma, substituído aqui. Então, tudo isso está sendo substituído aqui desta forma quando é renderizado no navegador Vou apenas fazer o Control Set. Eu posso até provar isso para você. Então, se eu clicar com o botão direito aqui e dizer inspecionar, vamos ver aqui o que está acontecendo Então, vou anotar isso um pouco. Vou rolar para a direita. Você pode ver. Aqui você não está vendo meu botão. Então, aqui, na verdade, estamos escrevendo Mbton no código. Mas aqui você não está vendo Mybton. Aqui você está vendo esse código sendo renderizado. Você pode ver Então, o que está acontecendo é que, onde quer que você esteja usando o botão Meu, durante o tempo de execução, isso será renderizado A definição do botão M será renderizada. Então, deixe-me replicar isso. Vou replicar isso e você pode ver que mais um botão foi adicionado OK. Agora, se eu mudar a definição, eu sou A, deixe-me dizer que sou incrível, botão. Você pode ver, isso se reflete em todos os lugares. Você consegue imaginar essa mágica? Da mesma forma que você muda em uma coisa, você muda em um lugar. Desculpe, você muda em um só lugar e isso se reflete em todo o aplicativo. Então, se você tem algum tipo de botão personalizado, curtidas personalizadas, imagine criar o Instagram. Você está usando o botão em vários lugares, certo? E você tem esse tema para manter. Então você cria um componente. Está bem? Você o usa em vários lugares, milhares de lugares que você usa. Você precisa fazer uma alteração no componente. Não tem problema. Você vem e faz uma mudança aqui. E isso se reflete em todo o aplicativo. Está bem? Então é isso que você pode usar desse componente várias vezes. Posso continuar renderizando isso e você verá que você verá a definição está sendo substituída aqui Portanto, esse é o benefício do react. Então, como entendemos isso, react promove o uso de aplicativos de página única. Você pode criar aplicativos web de página única. Basicamente, você pode criar seus próprios componentes. Você pode reutilizar esses componentes. Por isso, promove a reutilização. Ele também permite que você mantenha seu código com facilidade. Então, se você quiser fazer uma mudança, você faz a mudança em um só lugar, ela é refletida em todos os lugares. Então, mantém as coisas arrumadas, ok? Além disso, o react é muito popular atualmente. Então, se você pesquisar o salário do react em sua região, de onde quer que você seja, você pode ver, então este é o payscale.com para os Estados Unidos e você pode ver esse é o salário atual que está sendo pago para que os desenvolvedores do React ou até mesmo os desenvolvedores do Full Stack estejam sendo bem React ou até mesmo os desenvolvedores do Full Stack estejam Há muitos trabalhos que exigem esse conjunto de habilidades, e é importante que você aprenda isso como engenheiro de software. Seja você um engenheiro de back-end ou quem quer que seja, atualmente, o react também está sendo usado para criar aplicativos móveis OK. Então, sim, é muito importante que você entenda essas coisas e comece a construir coisas usando essa tecnologia. Então isso é reagir. Agora, como escrevemos código no react? Então, para escrever código e reagir, você precisa do NoDJS. Agora, o que é nogs? Portanto, o NoDGS nada mais é do que um tempo de execução do Jascript e permite que você execute o código do Jscript no lado do servidor Então, isso é algo que precisamos acenar com Gs. Também precisaremos de algo chamado NPM. Agora, o que é NPM? Então o NPM nada mais é do que um gerenciador de pacotes para JavaScript, ok? Ele é usado para gerenciar os diferentes pacotes que você usa com JavaScript. Por exemplo, ele é usado para instalar bibliotecas, ferramentas, estruturas. Portanto, se você quiser usar o react, precisará usar esse gerenciador de pacotes. OK. Além disso, precisaremos de algo chamado código do Visual Studio. Então esse será o IDE, ok? E vamos fazer uso disso e ele também tem um suporte maravilhoso para o desenvolvimento web. Então, vamos usar o código do Visual Studio para isso. Então, chegando ao nosso navegador, o que vamos fazer é acessar o Google e pesquisar o NodeGs Isso é algo que vamos precisar. Vou clicar aqui e você pode ver aqui. É aqui que precisaremos instalar o node JS. Você pode baixar a versão LTS do NodeJS. Você pode baixá-lo aqui. E você pode até mesmo ir para a página de download. E se precisar de algo personalizado, como para Windows, Mac, você pode obter a seleção aqui. Está bem? O processo de instalação é muito simples. Você baixa isso como qualquer programa de software normal e apenas segue as instruções de configuração e instalação. Está bem? Depois de fazer o download, o que você pode fazer é acessar seu terminal e verificar se a instalação foi bem-sucedida. Então você pode dizer node hyfen V. Você deve ver esta versão sendo impressa Portanto, o número da sua versão pode ser um pouco diferente do meu. Porque isso pode depender de quando você está assistindo a este vídeo e se há uma versão mais recente disponível Mas não se preocupe com números de versão diferentes. Um número deve ser impresso. É com isso que você deve se preocupar. Em seguida, você digita NPM. Portanto, também precisamos desse gerenciador de pacotes de nós. E você pode dizer hífen. Portanto, isso também deve imprimir um número Vosion. Tudo bem se for diferente do meu. Mas precisamos que essas duas coisas sejam instaladas em seu sistema. Então, um é o node JS, que é o tempo de execução do JavaScript, e então temos o NPM, que é um gerenciador de pacotes Apenas tenha certeza de que você tem essas duas coisas. 4. Criando seu primeiro projeto do React: Oi, aí. Então, agora é hora de começarmos a criar nosso aplicativo react, e vamos fazer isso com a ajuda da linha de comando. Então, a primeira coisa que vou fazer é acessar ou navegar pela linha de comando até a pasta do projeto. Agora, o que quero dizer com pasta de projeto é que é uma pasta de minha escolha onde eu desejo ter meus projetos de reação organizados, ok? Então, o que você pode fazer é acessar o Finder. exemplo, se você estiver no Mac, você pode acessar o Finder ou se estiver no Windows como eu, você pode acessar o Explorer, Alright e criar uma pasta no local de sua escolha, você pode chamar a pasta, como quiser Eu diria que é reagir. E então, a partir da linha de comando, você pode simplesmente navegar até o local em que criou a pasta. Então, eu criei essa pasta react aqui neste local específico, e CD é o comando, que é alterar o diretório, e está me ajudando a navegar ou acessar essa pasta específica ou estar nessa pasta a partir da linha de comando. Então, agora que estou nessa pasta específica, vou limpar todo o resto. Tudo bem Agora, nesta pasta específica, vou começar a criar meu aplicativo react. E para isso, vou usar o NPX, ok? Opa. Então, eu já criei alguns aplicativos de reação antes. Então você pode ver essa sugestão aqui, ok, mas não há nada que eu possa fazer sobre a sugestão. Está bem? Mas ignore essa sugestão por enquanto, porque o que esse terminal uh em particular faz é que, o que quer que ele veja em seu histórico, ele continua sugerindo você, o que é bom. Mostrando todo o comando, tudo bem. Então, NPX, vou usar o NPX, ok? Agora, NPX é uma sintaxe, certo. É usado para executar os pacotes de nós ou é usado para executar os pacotes. E então vamos usar o aplicativo Create react. Tudo bem Agora, o que é o aplicativo Create React. O aplicativo Create React é uma espécie de ferramenta que ajuda você a criar todo o aplicativo react. Agora, por que estamos fazendo uso disso? Como o projeto react precisa ser organizado de uma certa maneira, ele precisa ter a pasta SRC, alguns arquivos, e tudo isso vem junto e eles permitem que você ou seu aplicativo funcione perfeitamente, certo? Portanto, você também pode criar esses arquivos manualmente, mas essa é uma ferramenta que permite criar , criar ou configurar a estrutura do aplicativo da maneira correta. Está bem? E depois disso, vou apenas mencionar o nome do meu aplicativo, que eu possa chamá-lo de aplicativo MyRact, algo assim Ok. E o que eu posso fazer é simplesmente pressionar Enter. No momento em que eu pressiono Enter, o que isso fará é criar uma pasta nesse local específico. Então, nesse local específico, ele criará essa pasta. Por que está criando uma pasta nesse local? Porque eu naveguei até essa pasta a partir do terminal, e esse será o nome da pasta sob a qual todos os arquivos do meu projeto react existirão Está bem? Assim, você pode pressionar Enter e deverá ver algum tipo de processamento acontecendo. Assim, você pode ver a criação de um novo aplicativo de reação nesse local específico. Ele está instalando alguns pacotes e isso pode levar alguns minutos. Então, ao instalar, ele também informa o que está instalando. Está instalando react, react Dom, react scripts e tudo, tudo o que precisa. Então, vamos esperar um pouco até que todo esse processo seja concluído e vejamos uma confirmação. Então, recebi a confirmação e também recebi uma pequena mensagem. Ok. Então, quando comecei a gravar este vídeo, há uma nova versão secundária, que diz sobre o NPM, que está disponível, e está me perguntando se eu posso atualizar Ok, então eu vou atualizar mais tarde. Você pode não ver isso, ok, mas sim, vou ignorar isso por enquanto. É só uma notificação de upgrade. Você pode ver a confirmação aqui, happy hacking. Tudo bem E se você rolar até aqui, verá todo o processo do que aconteceu. Então, executamos esse comando aqui. Opa. Deixe-me rolar para cima. Então, executamos esse comando aqui. Está bem? Se você vier aqui, você pode ver que ele adicionou tantos pacotes. Demorou 36 segundos. Se você vier aqui, ok, foi dito que o sucesso criou esse aplicativo específico neste local e dentro desse diretório. Então, você precisa navegar até esse diretório e, dentro dele, você pode executar todos esses comandos aqui. Está bem? Agora, depois de navegar, ele fornece comandos prontos, como o NPN start Ele começará no servidor de desenvolvimento. Portanto, o aplicativo react que você criou vem com um servidor embutido incorporado Você pode executar este comando para agrupar o aplicativo e em arquivos estáticos, basicamente para implantação em produção. Isso iniciará o executor de teste, caso você queira executar casos de teste, NPM run Isso é algo que você pode executar. Então, a sugestão é que você pode começar executando isso aqui. Vou copiar isso. Está bem? Vou colar aqui. Vou até este diretório, ok, e então ele lhe dirá o início do NPM Agora, esse é um comando usando o qual você pode iniciar um servidor de desenvolvimento em sua máquina local. Então eu posso executar esse comando também, ok? E você podia ver o aplicativo instalado e funcionando. Então esse é o aplicativo, ok? Você pode ver o navegador aberto automaticamente, e você pode ver que este é o aplicativo que está funcionando. Agora, este é um servidor que mostra seu conteúdo que está executando seu aplicativo react no navegador Agora, qualquer alteração que você fizer nos arquivos, você verá recarregamentos ao vivo acontecendo aqui Tudo bem? Agora, você pode ver a mensagem aqui, como se precisasse editar esse arquivo específico e salvá-lo para recarregar Está bem? Então, essa interface que vem desse arquivo em particular, é o que diz. E se você clicar aqui, esse é o link para o site oficial do react. É a isso que está vinculado. Está bem? Assim, você pode acessar esse site e conferir ou ler algumas coisas também. Tudo bem Mas algumas coisas que eu gostaria de mencionar aqui são que, depois de iniciar o servidor de desenvolvimento, você pode pará-lo pressionando Control e C no Windows ou Command e C no Mac. Está bem? Estou no Windows, então pressiono Control C, e você pode ver que ele encerrou esse trabalho em particular E aqui agora, você vem se tentar atualizar, isso não vai funcionar Ok, porque o servidor está inativo, certo? Agora, para colocar seu servidor em funcionamento, você precisa executar o NBM start nessa pasta específica Está bem? Só então seu servidor estará ativo. Portanto, durante o desenvolvimento, você pode manter o servidor ligado e realmente modificar os arquivos, salvar e ver as mudanças acontecendo ao vivo. Está bem? Agora, vou falar um pouco mais sobre esse comando. Então, criamos o aplicativo react ou todo o aplicativo usando esse comando específico. Agora você também pode adicionar opções aqui no final. Está bem? Então, o que você pode fazer é usar os modelos aqui. Está bem? Agora, digamos que, ao trabalhar com o react, você também queira usar o texto datilografado Está bem? Então, se você estiver usando texto datilografado, você pode adicionar algo assim Você pode dizer template aqui e digitar script. Eu não vou executar isso, mas isso é apenas uma informação extra. O que isso fará é usar o modelo de texto datilografado para criar seu aplicativo e adicionar o suporte de texto datilografado desde o início, o que é útil se você estiver trabalhando em um projeto maior que pode se um projeto maior que pode beneficiar da Tudo bem Então você pode usar esse comando dessa forma, tudo bem. Espero que esse comando esteja claro. NPX create react tap para que não tenhamos o servidor aberto em execução, mas agora você pode reiniciar o servidor novamente dizendo NPM run NPM start Me desculpe Então, é o início do NPM, algo assim E se você iniciá-lo, ele iniciará novamente o servidor. Tudo bem Então, espero que isso seja útil e espero que você tenha conseguido acompanhar. 5. Instalando o código do Visual Studio: Este é nosso primeiro aplicativo baseado em reação, que criamos, ok? Ou devo dizer que não criamos. OK. Portanto, esse é um projeto gerado automaticamente usando o aplicativo Create React. Ok, e também está nos dando algumas dicas aqui. Você pode editar o app dot qs e salvar para recarregar. Está bem? Ele tem um link para aprender a reagir, que o levará ao site oficial do react. Tudo bem, até agora tudo bem. Portanto, este é o nosso aplicativo instalado e funcionando. Agora, o que precisamos fazer? começar a codificar e modificar as coisas. E o que vamos fazer para isso? Vamos instalar um IDE que é o código ID do Visual Studio. OK. Então, isso é o que parece. Se você já o tem no computador, se não o tem, acesse este site oficial. É uma ferramenta gratuita. É gratuito, desenvolvido em código aberto e executado em qualquer lugar. Como estou no Windows, estou solicitando que eu baixe uma versão estável para Windows Você pode alternar para qualquer sistema operacional necessário. Mas se o seu sistema operacional tiver um instalador aqui, ele funcionará automaticamente. Então, se você estiver fazendo login do Mac aqui, ele mostrará o download do Mac. Está bem? Então, seja qual for a plataforma em que você estiver abrindo isso, ele mostrará esse botão e você poderá passar por isso se não souber o que é o código do Visual Studio Mas basta fazer o download e instalá-lo como qualquer outro programa de software. Eu já o tenho instalado, então não vou mostrar as etapas de instalação, mas as etapas de instalação não são nada complexas. É muito simples e direto. 6. Passando para o Visual Studio Code: Agora, depois instalar o código do Visual Studio com êxito, você verá uma página como esta. Portanto, se você abrir o código do Visual Studio, pela primeira vez, verá esta página de boas-vindas. Agora, sou usuário do Visual Studio Code há algum tempo, ok? E você está vendo todos esses projetos recentes. Portanto, é provável que você não veja a lista de projetos recentes a menos e até que seja um usuário, ok? Mas como sou usuário, como eu disse, estou vendo a lista de projetos recentes que usei ou criei no passado. Além disso, você verá essas opções aqui, novo arquivo, arquivo aberto, pasta aberta, clone do repositório Git, conecte-se a tudo É uma ferramenta muito útil. Código do Visual Studio, eu o uso o tempo todo. Agora, para abrir o projeto, você conhece a pasta em que criou o projeto. Então você pode simplesmente clicar aqui, Abrir pasta e navegar até o local da pasta onde você criou o projeto. Como alternativa, se por algum motivo você não estiver vendo isso, você pode ir para o arquivo nas opções do menu aqui e dizer abrir pasta. Ambos são iguais. Então, o que vou fazer é selecionar Abrir pasta. Vou navegar até o diretório de minha escolha e abrirei o projeto aqui. Agora, quando selecionei Abrir pasta, vi essa janela de pasta, que é exploradora, navegue até a pasta em que criei o aplicativo react E vou selecionar essa pasta específica. Este é o meu projeto de aplicativo react que criamos. Lá dentro, você verá alguns arquivos, mas precisará selecionar a pasta raiz. Eu direi que selecione e ela abrirá essa pasta específica para mim. Agora eu posso fechar esta página de boas-vindas aqui, ok? Então você pode ver o projeto aqui no lado esquerdo, ok? Você pode ver essa pasta inteira. Se você expandir isso, verá os arquivos dentro. Está bem? Então, quando você executou o comando chamado Create React app, ok com Create React app, ele criou tudo isso para você. Você também pode criá-lo manualmente. Mas, como você pode imaginar, isso vai ser muito entediante, certo Então, essa ferramenta específica, aplicativo Create react, faz o trabalho para você, configurando toda a estrutura do projeto para você. Está bem? Analisaremos essa estrutura de projeto em breve, mas, por enquanto, o que eu também gostaria de explicar é que temos o servidor instalado e funcionando a partir do terminal. Agora, o que posso fazer é não precisar usar um terminal externo. O código do Visual Studio tem uma maneira pela qual eu posso realmente ter um terminal dentro do código do Visual Studio Dessa forma, nunca preciso sair código do Visual Studio e mudar para um terminal local. Aqui no topo das opções, vou ver o terminal aqui. Você pode dizer novo terminal, e você pode ver que este é um terminal integrado dentro do código do Visual Studio. E se você disser PWD, que é o diretório de trabalho presente, o terminal é aberto automaticamente na pasta que você abriu dentro do código do Visual Studio, que é a pasta do projeto Portanto, você também não precisa navegar, não precisa executar comandos, CDs e tudo mais e navegar, isso funciona como um terminal local. Então, aqui, posso dizer que o NPM começa aqui. No momento em que eu disser, recebo um erro, você pode ver que algo já está sendo executado na porta 3.000 E o que está sendo executado, nosso próprio aplicativo está em execução e está nos perguntando se você deseja executar o aplicativo em outra porta. Eu não quero fazer isso. Eu vou dizer não. Ok, e isso simplesmente interromperá a execução. Está bem? Mas o que vou fazer é fechar esse servidor porque não quero mais usar um terminal externo, você sabe, externo por aqui. Está bem? Quero usar terminal fornecido pelo código do Visual Studio e iniciarei o NPM, e agora ele deve executar o servidor de desenvolvimento para você Está bem? Dessa forma, o que podemos fazer é mover isso para uma nova janela. Então, aqui estamos na nova janela, e eu tenho o código do Visual Studio em execução na nova janela. Então, dessa forma, eu não preciso deixar o código do Visual Studio nunca. Eu posso até minimizar isso aqui desse jeito. Está bem? Eu posso até mesmo criar um novo terminal a partir daqui, para que você possa ver mais, e você pode ter vários terminais funcionando aqui. Está bem? É muito útil, e essa é a razão pela qual. Então, esse tipo de ferramenta que o Visual Studio Code fornece é a razão pela qual ele é tão amado na comunidade de desenvolvedores. Agora, também mostrarei a lista de extensões que eu tenho. Então, aqui, se você acessar essa guia de extensão no lado esquerdo, você tem algumas opções como pesquisar, controlar o código-fonte, executar e depurar, tudo isso, ok? Estou usando o Docker também em alguns dos meus projetos, então você também pode ver o Docker aqui Mas você pode não ver isso. Está bem? Isso precisa de uma extensão separada, ok? Mas se você for para a extensão. Agora, o que são extensões? Portanto, as extensões permitem que você aprimore ou estenda a funcionalidade padrão que Visual Studio Code já fornece. Então você pode ver, eu tenho uma extensão para o notebook Jupiter. OK. Sempre que estou programando em Python , e se eu quiser suporte para notebook , eu uso essa extensão OK. Então eu tenho essa extensão. Isso não é necessário para reagir. Eu tenho a extensão Python. OK. Agora, essa tag renomeada automaticamente, isso pode ser útil para o React porque, você sabe, se você estiver renomeando uma tag, tudo bem e se houver uma tag de fechamento, o que isso fará é renomear a versão paga dessa tag específica Ok, então isso é algo que você pode ter. É útil. Por exemplo, se eu tiver que dar um exemplo, deixe-me dar um exemplo. Então, digamos que se eu criar ou deixar eu abrir algum arquivo aqui. Ok, deixe-me abrir um arquivo HTML. Agora, essa coisa aqui, você pode ver, deixe-me ir até aqui, rolar para baixo. Portanto, esse título tem uma tag de abertura e uma tag de fechamento. Então, por causa dessa extensão específica, se eu renomear a tag de abertura, você pode ver que a tag de fechamento também está sendo renomeada Está bem? Então esse é o benefício dessa tag renomeada automaticamente Você não precisa renomear a tag de abertura primeiro e depois renomear a tag de fechamento, coloração beta, como você pode ver pelo próprio ícone, é usada para destacar a cor do par final do colchete Isso é útil se você estiver usando muitos colchetes em seu Okay, Debugger for Java, contêineres de desenvolvimento, jango doco, tudo isso eu uso para outras linguagens, extensão back para Java, gradle para Java, código Intel . Está bem? Isso é para desenvolvimento assistido por IA. Isso também serve para exemplos de uso da API Intelicode. OK. Eu tenho alguns para Python Então, tudo isso está relacionado ao Python. Vou rolar para baixo, um servidor ativo. Não precisamos desse Maven para Java. Isso também não é necessário. Mais bonito é algo que você pode usar. Isso formata o código. OK. Eu organizo o código para você OK. E sim, isso é o que temos. Ok. Também adicionarei algumas extensões agora mesmo aqui. Está bem? Então, o que você pode fazer é pesquisar trechos de código de reação aqui, algo assim OK. Ok, então você pode pesquisar o ES seven plus react, algo assim. E você verá essa extensão com quase milhões de instalações Então, são 12,9 milhões enquanto estou gravando este vídeo. Obviamente, isso continuará aumentando e você poderá ver um número diferente ao assistir isso. Então isso é extensão. Esse é o nome ES seven plus react redux react Native snippets Agora, o que isso faz é te dar modelos, ok? Por exemplo, se você quiser criar uma função, então você pode dizer RAFC Você pode simplesmente digitar isso e ele fornecerá toda a definição da função. OK. Então, esse tipo de atalho ele tem, o que ajuda você a economizar tempo. Então você pode instalar isso. Vou clicar em Instalar e adicioná-lo à minha lista de extensões. Está bem? Então, sim, nós o temos instalado agora, ok? Você pode explorar mais plug-ins ou extensões de reação no mercado aqui e pode brincar com eles. E você pode aprimorar a funcionalidade padrão que o Visual Studio Code já fornece a você. Tudo bem. Então, sim, trata-se de configurar o código do Visual Studio, e espero que você o tenha achado útil. 7. Explorando a estrutura do projeto: Então, agora é hora de começarmos a entender a estrutura do projeto react. Agora, ao abrir ou analisar o aplicativo react que você criou, há muitos arquivos que você verá. Alguns deles também são pastas. Está bem? Então, aqui você vê essa pasta de módulos de nós. Está bem? E o que é módulo de nó? Esse é um diretório que contém todos os pacotes do NPM, como bibliotecas, dependências das quais seu projeto depende E, geralmente, durante o desenvolvimento de seu aplicativo de reação, você geralmente não precisará interagir diretamente com essa pasta específica. OK. Então, sim, isso é algo que está lá, você precisa saber o que é, mas não trabalhará nisso. Pasta pública. Agora, essa pasta abriga todos os arquivos estáticos, como o HTML de ponto de índice principal, que contém o div raiz que seu react tap é injetado Está bem? Se você não entende isso, não se preocupe. Vou explicar isso, mas isso basicamente tem uma lista de todos os arquivos estáticos. Como você pode ver o fabricante você pode ver alguns logotipos, manifesto Jason robot dot HD e index dot HTML OK. Agora, o que é HTML com pontos de índice? Agora, este é o arquivo em que seu aplicativo react está sendo injetado. Então, aqui, esse é o HTML padrão, você pode ver, ok, tudo. E aqui, você vê o título como react tap. Então, ao executar o aplicativo, você vê o título como react tap. Se você mudar o título, posso dizer que aplicativo react mudou aqui, algo assim. E se eu salvar isso, se você vier aqui, verá o aplicativo react alterado, certo? E sempre que você faz uma alteração, o servidor se recarrega. Então, se eu adicionar três pensamentos, e se eu salvar isso, você verá que isso foi atualizado, certo E se você vier até aqui, as alterações também serão refletidas imediatamente no navegador. Então eu vou me livrar disso. Vou salvar isso e, se você voltar, verá que é o aplicativo react agora, certo? Então este é o arquivo em que seu aplicativo de reação está sendo injetado, ok? E aqui, se você vê dentro do corpo, você está tendo esse DIF Está bem? Agora, estamos usando esse div raiz para injetar o aplicativo react aqui Está bem? E como estamos fazendo isso, explicarei isso em breve. Por enquanto, basta entender que index ou HTML é um arquivo em que seu aplicativo react é injetado e está lá no diretório público Você tem a pasta SRC. Agora, a pasta SRC é a pasta onde toda a mágica acontece. Ele contém todos os arquivos JavaScript do seu componente de reação, folhas de estilo, imagens, tudo que existe nessa pasta específica. Então, basicamente, todo o código-fonte relacionado ao seu aplicativo de reação no qual você trabalhará reside na pasta SRC Então, você, como desenvolvedor do React , criará aplicativos e passará a maior parte do tempo nessa pasta específica. Está bem? Você tem Get ignore, é claro, se você o configurou aqui, pacote de log do pacote JCN Está bem? Então esse é o JCNFle Então você pode dizer que esse é o cerne do projeto quando se trata do gerenciador de pacotes de nós, NPM, ok? Então esse é um arquivo que vai listar todas as dependências que seu aplicativo está usando, ok? E dependendo das dependências desse arquivo específico, tudo bem, todas as dependências serão buscadas remotamente e adicionadas à serão buscadas remotamente e adicionadas pasta de módulos do nó É assim que vai funcionar. OK. Portanto, sempre que você adiciona uma nova dependência, pacote JCN é sempre atualizado Então é isso que o pacote GSN faz. OK. Mas agora, vamos dar uma olhada na pasta SRC Então, na pasta SRC, você encontrará esse arquivo chamado app dot Qs Ok, antes de explorar o app dot js, vamos ao index dot Gs. Index dot js é o ponto de partida do nosso aplicativo react, certo? E é aqui que o componente do aplicativo é renderizado. Então, vou abrir o index dot js, vou abrir o app dot js e vou simplesmente recolher isso. Está bem? Agora, se você der uma olhada no ponto de índice js, o que isso faz é obter a raiz aqui. Você pode ver o ponto do documento Obter elemento por ID, raiz. Agora, o que é raiz? Raiz que vimos aqui. Isso vem do HTML de pontos de índice. Então, index dot js está obtendo essa raiz e está renderizando. Você pode ver a renderização do ponto raiz aqui. Está bem? Ele está criando a raiz do React primeiro usando o React Dom e está renderizando o aplicativo aqui Você pode ver o aplicativo. Tudo bem? Agora, o que é app? Portanto, o aplicativo nada mais é do que um coral de pontos Assim, você pode ver no topo a lista de entradas, Importar aplicativo do ponto App. Agora, o que é isso? Este é o app dot chos. Está bem? Então, aqui temos um componente definido que foi predefinido, não o definimos . Foi definido. Ele estava disponível por padrão para nós. E isso tem algum código que está sendo renderizado na interface Está bem? Então, estamos renderizando esse componente aqui. Está bem? E se você vier aqui, isso é o que você está vendo na interface do usuário. Você pode ver edit src slash app dot Gs e salvar para recarregar. Você pode ver. Portanto, se você quiser alterar a interface, precisará editar o app dot js. Então, toque em dot js porque é isso que está sendo renderizado. E de acordo com as instruções, você pode modificar isso. Assim, você pode ver, editar App Js e salvar para recarregar. Essa é a mensagem que você está vendo aqui, e essa mensagem está vindo daqui. Certo? Então, quaisquer mudanças que você fizer aqui, você verá imediatamente. Então reflita isso. Então eu posso dizer recarregar e posso dizer atualizar aqui, atualizar o teclado E você verá aqui 1 segundo. Eu não fiz isso. OK. Atualizar. Você pode ver que a atualização foi adicionada aqui. Então, estou atualizando ao vivo e estou vendo as mudanças. Se eu salvar novamente, se eu for aqui, atualização será removida, certo? Então, qualquer tipo de mudança que você queira fazer na interface, você pode fazer no APD, ok? Você pode até adicionar mais componentes, como se estivéssemos renderizando apenas um aplicativo aqui Por exemplo, app é o componente definido pelo APD. Você pode ver que estamos exportando aqui. OK. Então, estamos exportando para cá e ele está sendo importado neste arquivo e está sendo renderizado aqui Está bem? Qualquer tipo de alteração que você queira fazer, você pode fazer aqui. E se você quiser adicionar mais componentes, podemos fazer isso também, é claro. Você aprenderá isso quando nos aprofundarmos um pouco mais. Mas sim, espero que isso lhe dê uma clareza completa sobre o que está acontecendo, por que está acontecendo. E você encontrará mais alguns arquivos, como o CSS de pontos de índice. Você pode ver nos pontos do aplicativo que você encontrará o CSS do aplicativo sendo usado Então, esses são todos arquivos CSS, ok, eles existem e estão sendo usados. Você tem um ponto de logotipo SVG. Está bem? Esse é o arquivo do logotipo. OK. Então, sim, isso é sobre a estrutura do projeto. É muito simples e dá uma ideia do que está acontecendo quando seu aplicativo de reação é criado quando você o executa pela primeira vez criado quando você o executa pela Tudo bem. Portanto, espero que você tenha clareza sobre como essa interface está sendo renderizada e espero que tenha sido útil 8. Nosso primeiro projeto do React: Então, agora é hora de fazermos um pouco de experimentação com nosso projeto que criamos Então, o que vamos fazer é modificar um pouco a fala para imprimir uma mensagem personalizada de nossa escolha, e a mensagem que podemos imprimir é bem-vinda ao react, e este é meu primeiro aplicativo de reação. Então essa é uma mensagem que vamos imprimir. Se você acha que pode encarar isso como um desafio, tudo bem, dependendo do que entendemos até agora, eu ficaria feliz se você fizesse isso. Está bem? Então, pause o vídeo agora e tente isso como um desafio em que você substitui o conteúdo que está vendo e o substitui pela mensagem que acabei de dizer: OK Para substituir as instruções também fornecidas aqui, você precisa editar esse arquivo específico, arc slash app dot CHS, para fazer qualquer alteração Tudo bem? Então, experimente isso. E se você não conseguir, não se preocupe, você voltará. Você pode voltar e reproduzir este vídeo e assistir a esta solução. Então, espero que você tenha tido a chance de tentar isso como um desafio. O que eu faria é começar com essa coisa em particular aqui. Vou até o SRC e vou para o app dot Hs. Está bem? Agora, o app dot js está sendo renderizado. Portanto, esse componente do aplicativo está sendo renderizado em caracteres de pontos de índice. Está bem? E esse é o componente principal no momento, ok? Então, o que eu vou fazer é vir até aqui. Ok. Na verdade, posso minimizar isso aqui. O servidor está em execução. Então, aqui, estou devolvendo esse DIF. Então eu não preciso de tudo isso, então eu posso simplesmente me livrar disso. Tudo bem? Por aqui. E então aqui eu posso ter uma mensagem. Está bem? Então eu posso dizer H um. Posso dizer, bem-vindo ao React, algo assim. E você pode colocar a tag E P aqui e dizer que está tudo bem, este é meu primeiro aplicativo de reação. Algo assim, e você pode salvá-lo. No momento em que você a salvar, e se você vier aqui, verá essa mensagem aparecer. Está bem? Agora, você pode ver que isso é totalmente widescreen porque removemos muitos elementos por aqui, certo? Então é isso que você precisa fazer. Outra coisa é que, mencionarei aqui, agrupei esses dois elementos ou esses dois elementos HTML em um TIF pai Está bem? Então, o que está acontecendo aqui só observar que esta é uma função, uma função normal de JavaScript, e eu estou usando e eu estou usando o logotipo aqui, o que, na verdade, eu não sei. Vou fazer uma pequena limpeza. Ok. Agora, estou usando o app dot CSS, esse arquivo CSS. Essa é uma função que está retornando algo. Ok, ele está retornando isso e eu estou exportando essa função específica E isso está sendo usado em index, index dot Qs. Você pode ver aqui. Está sendo usado aqui. O que significa que está sendo renderizado aqui e está sendo renderizado em root Def. Está bem? Então, o que está acontecendo é que eu estou retornando isso ok, esse código aqui. Esse trecho de código parece HTML, ok? Mas, na verdade, não é HTML. É conhecido como JSX, ok? Então, a sintaxe XML do Ja Script, porque você pode ver em HTML, se quiser escrever um nome de classe, você terá um atributo diferente aqui Você não vai usar o nome da classe aqui, ok? Então, em vez do nome da classe, você escreverá a classe em HTML. Está bem? Mas no Jx, você usará o nome da classe. Ok. E a sintaxe é muito parecida com a do HTML. Então, se você conhece HTML, isso seria bem fácil. Ok. E há uma regra que você precisa saber que está aqui ao retornar a interface. Então, na verdade, você está construindo uma interface e a está retornando do componente Portanto, ao retornar isso, você precisa garantir que todo o elemento da interface do usuário esteja agrupado em um único elemento. Portanto, você só pode retornar um único elemento e não vários. Vou mostrar isso para você. Então, se eu remover isso, ok, você pode ver que eu começo a receber um erro. Você pode ver que as expressões JSX devem ter um pai. E se eu tentar salvar isso e ir até aqui, você pode ver todos os tipos de erros aqui. Você pode ver. E também está exibindo a mensagem de erro. Ok, está dizendo que deve ser embrulhado em etiquetas anexas e que você precisa de um fragmento aqui. Ok. Então essa é a explicação que está dando. Vou apenas fazer o Control S, trazer de volta o TIF e salvá-lo para devolvê-lo à sua forma original de trabalho Tudo bem Então, espero que isso seja algo que você tenha entendido e espero que tenha sido capaz de fazer isso. Está bem? Você pode até mesmo adicionar sua introdução aqui. Tipo, Ei, eu sou, seja qual for o seu nome, você pode adicionar isso. Você pode salvar o arquivo e verá a saída na página da web. Tudo bem? Então, espero que você tenha conseguido acompanhar e espero que tenha sido útil. 9. Introdução ao Vite e sua configuração: Então, estou aqui no meu terminal, ok, e navego até minha pasta onde estou criando os projetos react Então, se eu disser LS, verei que um projeto de reação já foi criado aqui. Está bem? Agora, o que eu quero fazer aqui é falar sobre trigo. Agora, o que é comer? Então, o WT é outra forma de criar projetos de reação, e o WT é, na verdade, uma ferramenta de construção moderna que oferece uma experiência de desenvolvimento rápida e eficiente para aplicativos web modernos, ok? E isso acelera o tempo de desenvolvimento para desenvolvedores, processando arquivos somente quando eles são realmente importados, e é muito mais rápido. Ele também tem um servidor de desenvolvimento muito mais rápido, ok? Então, hoje, se você está desenvolvendo reações, trigo está sendo muito usado. Está bem? E se você acessar o navegador, se pesquisar trigo aqui desta forma, ok, você verá que é um servidor de desenvolvimento local. Está bem? É uma ferramenta de front-end. E se você acessar o site aqui, verá que é um Biltol para Ok, e é uma ferramenta de criação de front-end extremamente rápida que alimenta a próxima geração de aplicativos web E você pode passar. Você pode ver o servidor instantâneo iniciar rapidamente, HMR. Ele suporta muitas coisas: Ja script, typescript. OK. E sim, você pode acessar o site e saber mais sobre o que ele permite que você faça. Tudo bem. Além disso, para explorar mais, você pode clicar em Começar aqui. OK. E você pode ver mais sobre o trigo. Você pode ver como é pronunciado. É pronunciado como Wheat Okay. E você pode ver, esses são os modelos que ele suporta, ok, Vanilla juice Vanilla TypeScript, veja se ele suporta react Tudo isso ele suporta. Tudo bem? Então, se você rolar um pouco para baixo, você também verá os comandos usando NPM, yarn, PNPM e B. Mas estamos usando o NPN, então podemos fazer uso desse então podemos fazer uso Então, o que vou fazer é mostrar como você pode criar um projeto usando VT. OK. Você pode até criar um projeto usando o aplicativo Create React, mas eu diria que é uma forma mais moderna de criar projetos de reação e trabalhar no desenvolvimento web. Tudo bem? Isso é o que todo mundo está fazendo atualmente. Ok, então você deve saber o que é TI e como você pode fazer uso dela. Então você pode ver este comando NPM create Wet latest. Está bem? Então eu posso copiar isso. Está bem? Há mais uma versão. Desse comando em particular. Então, depois de executar o comando, ele perguntará o tipo de projeto que você deseja criar. Qual é o nome do projeto? Eu vou te dizer qual modelo você deseja usar. OK. Então, tudo isso será solicitado e você poderá selecionar as opções. Mas se você quiser especificar as opções antes com esse comando em si, sem passar pelo prompt. Assim, você pode dizer diretamente: NTM create Wet latest, especificar o nome do projeto e especificar também o modelo Por isso, especificou que o modelo é visualizado. Você pode especificar o modelo como react se estiver trabalhando no react aqui. OK. Ou se você estiver trabalhando no react com suporte para TypeScript, você pode dizer react hyfen Dependendo do que você deseja fazer ou do tipo de projeto que está criando, você pode especificar o modelo. OK. Mas vou continuar com essa abordagem. OK. Vou te mostrar todas as opções que ele nos pede. Está bem? Agora, verifique se você está na pasta, que não é um aplicativo de reação. Está bem? Então, estou aqui nesta pasta onde estou criando todos os aplicativos de reação, certo? Portanto, este é um aplicativo de reação que eu tenho. Agora, vou executar esse comando. Está bem? Opa, não esse Está bem? O que eu copiei, deveria ser esse. OK. Vou colar aqui. Então, o NPM cria o Wheat, o mais tardar. No momento em que você pressiona Enter, ele dirá que, Ei, ele precisa instalar os seguintes pacotes. Tudo bem para continuar? Eu vou dizer que sim. OK. E ele instalará todos os pacotes e está me perguntando qual deveria ser o nome do meu projeto. Está bem? Assim, posso inserir o nome do meu projeto. Eu posso entrar. Posso dizer reagir por 1 segundo. Então, eu tenho minha guia de reação, certo? Então eu posso ver minha reação ou não deveria ser meu toque de reação, então eu posso dizer o que reage, algo assim. Está bem? E eu vou pressionar Enter, e você pode ver que ele está me perguntando a estrutura. Então, qual estrutura eu gostaria de escolher aqui? Está bem? Você quer baunilha, você quer usar o react. Então, como estamos usando o react, selecionarei react aqui. Ele está me perguntando se eu quero o suporte do TypeScript ou algo parecido Então, vou selecionar JavaScript aqui. OK. E sim, terminamos, você pode ver o quão rápido isso foi. Está bem? Você pode ver. Não é necessário instalar os seguintes pacotes. Ok, desculpe, preciso instalar os seguintes pacotes. E ele me fez algumas perguntas para as quais eu havia respondido. Você também pode pular esse prompt, como eu disse, adicionando isso no comando Você pode especificar o nome do projeto e especificar coisas como modelo e tudo mais aqui. Está bem? Isso também é factível. Tudo bem? Mas eu escolhi seguir o caminho interativo, e então ele criou esse projeto aqui, ok? E está dizendo para você fazer CD, o que reage. E faça a instalação do NPM, e você pode executar o NPM Tf Então, vamos executar esses comandos e ver o que acontece. Vou ver o CD no react. Vou dizer NPM install, que instalará todas as dependências de que meu projeto precisa, e copiarei esse NPM run Def Ok, sim, está instalando tudo. Isso levará alguns segundos. Isso é feito em 10 segundos, e eu direi NPM run def E agora você pode ver que ele iniciou o servidor no host local 5173 Portanto, essa é uma porta padrão aqui. Ok, isso está sendo usado para executar esses projetos, ok? E se você passar para isso, ok, deixe-me reiniciar para que você possa ver que eu fui muito ampliado Está bem? Então você pode ver que essa é a página padrão. Então diz Wt plus react, e você pode ver aqui um contador no qual você pode clicar e aumentar a contagem. Está bem? E você tem o app dot Jx, que você pode explorar e editar basicamente para atualizar essa interface específica aqui Está bem? E você pode clicar nos logotipos de TI e React para saber mais. Então, se você clicar em React, você será direcionado para a página React. Se você clicar no logotipo Wet, você será direcionado para a página Wet. Tudo bem. Então, espero que você tenha conseguido seguir um e espero que tenha sido útil. 10. Passando para o código do Visual Studio e alterando a porta: Agora, o que vou fazer é ter esse aplicativo de aquecimento em execução, mas na verdade estou executando-o no meu terminal nativo. Então, o que eu faria é ir até o Visual Studio Code e abrir o projeto heat no Visual Studio Code para eu trabalhar nele. Então, vou até File. Eu vou dizer, abra a pasta, ok. E aqui, selecionarei eat react. Está bem? Então, Wheat react é o nome do meu projeto, certo? Vou abrir o terminal também. Aqui. OK. Agora eu posso executar o servidor a partir daqui. Então, eu posso executar o servidor, na verdade, mas aqui você notará que um servidor está sendo executado na porta 5173 OK. Então, vou parar esse servidor. Está bem? Então, configuramos o NPM como run deep e ele está sendo executado em 5173, que é a porta padrão para Agora, digamos que eu queira personalizar essa porta para Loose 3.000 Está bem? Então, o que eu posso fazer é vir até aqui. Uh, você pode ver a estrutura do projeto. Está bem? É quase semelhante ao aplicativo react aqui. Você pode ver. Está bem? O que é WeatJS Esse é o arquivo de configuração que temos. OK. Então, o que vou fazer é entrar nessa configuração. OK. Isso me permite fazer algumas configurações personalizadas para o Wheat. Vou abrir isso e aqui, você pode ver isso. Ok, essa é a configuração. Então, eu tenho plug-ins de reação. Agora, aqui embaixo disso, eu vou dizer servidor. Ok, e vou dizer dois pontos, vou acrescentar um elogio aberto e fechado. Vou adicionar uma vírgula Vou terminar com uma vírgula. E aqui, vou dizer porto, Colin, vou dizer 3.000 e vou terminar com uma Está bem? Isso está feito. Vou salvar esse arquivo aqui, podemos dizer NPM, corra surdo Está bem? Se você fizer isso, verá que o servidor está funcionando no host local 3.000 Opa, eu acidentalmente encerrei o servidor, mas ele está rodando em 3.000 Agora, se você atualizar o 5173, não encontrará nada aqui Aqui em 3.000, se você atualizar isso, este é nosso aplicativo antigo que criamos Você verá t plus react correndo por aqui. Está bem? Então, sim, você tem um contador. Você pode ver que tudo está igual. OK. Então, é assim que você pode alterar a porta adicionando uma configuração simples em et config chas e você pode fazer isso da maneira que eu mostrei Está bem? Agora, aqui você verá todas as pastas e tudo o que foi criado, que são semelhantes, devo dizer, ao que vimos no projeto que geramos usando o aplicativo Create React. Você verá o ponto médio principal SX. Está bem? Portanto, no arquivo react ou no projeto anterior que tínhamos, se você criar um projeto usando create react app, verá que será mean dot js e não JSX Aqui você tem app dot jsx e não app dot Gs. Está bem? Então, aqui, tudo está sendo definido na extensão GSX E a razão para isso é porque ele tem código JSX. Está bem? Então esse código aqui que você está vendo não é HTML. Ok, deixe-me minimizar isso. Portanto, isso não é HTML. Na verdade, isso é código JSX. Ok, que é semelhante ao HTML. Quase semelhante, eu diria que, se você conhece HTML, você pode realmente ler esse código. Mas há pequenas diferenças, como o nome da classe. É assim que você define classes. Então, em HTML, você terá uma classe como essa, certo, com essa tag de classe. Mas aqui, você tem o nome da turma, ok? E você pode ver que, no resto, tudo parece semelhante ao HTML. Está bem? Então esse é o JavaScript XML, JSX, ok E você encontrará os nomes dos arquivos como jsx dot JSX aqui. Está bem? Então, isso é algo que você precisa saber, certo? E em qualquer RRS, tudo é semelhante. Índice ou TML, você tem fora da pasta pública aqui Você pode ver. Você tem o pacote dot JCN que é usado basicamente para empacotar ou não empacotar, devo dizer que é basicamente usado para gerenciar dependências para o seu projeto aqui E todas as dependências que você adicionar virão em módulos de nós, que não abordaremos Sua pasta pública, que tem um arquivo SVG. Está bem? Portanto, é uma estrutura semelhante, quase a mesma, eu diria. E você entendeu que, se entender o projeto criado usando a ferramenta de aplicativo Create React , também entenderá isso. Tudo bem. Então, sim, espero que isso seja útil e espero que você tenha conseguido acompanhar. 11. Introdução à sintaxe e regras do JSX: Então, agora é hora de começarmos a falar sobre JSX. Agora, o que é JSX? Então, eu adicionei alguns comentários a este aplicativo ou arquivo JSX . Tudo bem Como você pode ver aqui, o JSX é uma extensão de sintaxe para JavaScript que se parece com HTML Está bem? E com a ajuda do JSX, você pode escrever código semelhante a HTML em JavaScript Então, você pode escrever código HTML em JavaScript? Não, mas com a ajuda do JSX, você pode escrever, e essa reação transforma isso em objetos JavaScript. Ok. Então é isso que o GSSix é, e é por isso que ele está sendo usado, certo? Então, vamos dar uma olhada em alguns exemplos aqui, ok? Você pode ver que já existe algum código escrito no Gasix quando criamos o projeto, e é isso que está sendo renderizado, ok, com a ajuda Está bem? Mas vamos esclarecer isso e abordaremos exemplos muito mais simples Ok. Mas uma coisa a lembrar é que é disso que você deve se lembrar. Parece HTML, mas não é HTML. Ok, se você conhece HTML, você pode facilmente entender, ler e escrever, desculpe, não Ja Script, GSX, e isso permite basicamente ajudá-lo a criar componentes de reação, e você pode ver como será a aparência da sua interface diretamente no seu código, porque é semelhante ao HTML. Está bem? Então, o que eu vou fazer é, você pode ver aqui que há algumas variáveis e tudo criado, então eu vou me livrar disso, de tudo isso. Ok. Vou me livrar de tudo isso. Ok. E eu vou guardar isso. Portanto, não há literalmente nada agora na página. Ok. Está totalmente vazio, como você pode ver. Ok. Eu vou me livrar dessas importações também, ok? Vou apenas manter o arquivo CSS. Se você for para o arquivo CSS. Ok, é um CSS bastante decente, certo. Então, algo foi escrito lá. Ok. Então, vou ficar com esse arquivo. Ainda não vamos mexer no CSS, certo? Mas vamos começar a escrever cerca de seis códigos. Está bem? Então, o que eu faria é dizer aqui, aqui dentro disso. Está bem? Então, aqui, digamos que isso é DIF. Ok, então eu vou ter um elemento TF. Ou era uma etiqueta vazia. Eu posso dizer aqui H um, não. E eu posso dizer como eu posso dizer um mundo, algo assim E você verá hello world sendo impresso aqui como uma saída. Está bem? Agora, isso é JavaScript. Essa coisa é inteiramente JavaScript, certo? E dentro do JavaScript, você tem permissão para escrever HTML como código, e isso parece HTML, mas na verdade é JSX Está bem? Você pode até mesmo pular essas tags Div, se desejar Vou explicar a importância de ter um DIV, como tudo embrulhado em um TIF Mas você pode ver que isso também está funcionando perfeitamente bem. Está bem? Agora, o que você pode até mesmo fazer é levar isso para cá, ok? Posso dizer const ligment aqui, e posso atribuir isso aqui, algo assim Ok. Então, aqui, você pode simplesmente dizer, ok, lamento dentro do par, em troca Está bem? Agora, se você salvar isso e vier, tudo bem, você não verá nenhuma saída. O motivo pelo qual você não está vendo nenhuma saída é porque ela precisa ser encapsulada em um TIF, ok? Então, vou cortar isso e colar aqui. Está bem? Algo parecido com isso. Ok. E eu vou guardar isso. E se você vier aqui, verá hello world como saída. Está bem? Então, sim, essa é outra maneira de renderizar a mesma coisa. Você pode até mesmo recortar e colar aqui, como fizemos no início. Está bem? Mas sim, existem algumas regras quando você está usando o GSX, existem algumas regras sobre as quais eu quero falar. Tudo bem Agora, a primeira regra são os elementos GSX. Então você está retornando elementos JSX aqui como parte da declaração de retorno Está bem? Então, dê uma olhada na estrutura desse código, ok? Você tem essa função. Isso é retornar os elementos JSX, tudo o que você está retornando aqui está sendo renderizado na interface Então, se você não retornar nada daqui, se eu não retornar o elemento, ele não será renderizado na interface, você pode ver, certo? Se eu salvar o arquivo, ele não será renderizado. Se eu salvar o arquivo novamente, ele será renderizado. Então, tudo o que você está devolvendo aqui está sendo renderizado na interface, e é isso que você está exportando aqui E a razão pela qual está sendo renderizado é porque no ponto principal Jx, você está renderizando o aplicativo aqui como parte do elemento raiz E o que é aplicativo , aplicativo, está vindo daqui, é esse componente. Ok. Portanto, o que quer que você esteja renderizando, quaisquer elementos que você esteja retornando aqui como parte da instrução return devem ser agrupados em um único elemento pai. Está bem? Então, deixe-me explicar isso melhor. Está bem? Então, o que eu vou fazer é comentar isso por um tempo, ok? E eu vou dar olá mundo por aqui, ok? Diretamente, em vez de ter esse elemento. Está bem? Então, digamos que eu tenha hello world simple. Está bem? Agora, sem esse elemento pai, eu posso ter hello world. Não há problemas como tais. Você pode ver. Se eu tiver isso, funcionará bem. Está bem? Mas no momento em que eu adiciono mais um elemento aqui, digamos que eu diga aqui no alto. Ok. Primeiro de tudo, você vê que eu recebo um erro. Ok, então você pode ver que as expressões JSix devem ter um elemento pai E se eu vier aqui, você pode ver o erro aqui. Você pode ver que ele deve estar envolto em uma etiqueta de fechamento e você pode ver que não está funcionando, certo? Portanto, tem que haver um elemento pai. E se você tiver vários retornos, vários elementos que você está retornando, vários seis elementos J, o que você pode fazer é agrupá-los em um único elemento pai, o erro desaparecerá e você verá a saída aqui. Então você vê hello world, e então você vê high, que está escrito na tag P. Tudo bem Então, espero que isso esteja fazendo sentido. Essa é a regra número um, ok? Os elementos JSX devem ser agrupados em um único elemento pai. Você trabalhará muito com o JSX se estiver desenvolvendo o React e se lembrar dessa regra, porque as pessoas sempre se perguntam por que você precisa agrupar tudo em uma única dica e tudo Está bem? Então essa é uma das regras. Está bem? Outra regra é em HTML, você usa a classe, certo, para atribuir um nome de classe a um elemento específico, certo? Mas com o JSX, você precisa usar o nome da classe. E não é uma aula. Portanto, o nome da classe é usado em vez da classe, e a classe não é usada porque classe é, obviamente, uma palavra de reserva no Ja Script. Ok, então estamos usando o nome da classe aqui. Está bem? Então, isso é algo que você precisa ter em mente. Então, se você quiser adicionar nomes de classes que eles possam ser estilizados corretamente, você deve usar o nome da classe Está bem? E lembre-se da sintaxe aqui. Opa. Então lembre-se da sintaxe, tem que ser o nome da classe Então N, você pode ver a caixa do camelo em ação aqui, ok? Então, essa é outra regra, então existe uma regra sobre tags de fechamento automático. Está bem? Agora, haverá tags que não precisam de nenhum tipo de criança, por exemplo, tag de imagem. Ok, então eles têm que ser fechados sozinhos. Está bem? Por exemplo, eu preciso ter aros Então eu posso dizer, eu tenho que fazer uso de uma imagem como essa. Eu posso adicionar SRC e tudo mais aqui. Está bem? Mas a etiqueta tem que ser uma etiqueta de fechamento automático. Está se fechando sozinho, certo? Então, isso é algo que você precisa ter em mente. Ok. Então, essas são algumas das regras sobre o GSX, ok. Mas lembre-se de que os pontos principais desse vídeo em particular são que JSX não é HTML Ok, parece muito, muito parecido, mas não é TML. Você também pode usar o JavaScript no JSX incorporando-o em Ok, aqui, algo assim. Você pode dizer sete mais seis mais sete, algo assim, aqui, e você verá 13 como saída A. Assim, você pode ter o código JavaScript incorporado em um único par de urbass Isso é algo que pode ser feito. Está bem? E os elementos JSX devem ser agrupados em um único elemento pai, como DV aqui Está bem? Então, sim, isso é sobre J six, sobre introdução ao JSix Espero que isso esteja claro e espero que esteja sendo útil. 12. Expressões e atributos com JSX: Então, vamos começar a falar sobre expressões e atributos com o Jax Então, eu tenho alguns comentários aqui. Ok, então você pode ver esse primeiro. O primeiro ponto diz que você pode incorporar qualquer expressão JavaScript válida dentro da predefinição ondulada no JA six E os atributos JSix usam a sintaxe de maiúsculas e minúsculas do Camel. Então, esses são os dois pontos que vamos abordar. Está bem? Agora, o que vou fazer é limpar um pouco aqui Só vou ter uma única briga aqui. OK. Então, primeiro ponto C, você pode ter ou incorporar qualquer expressão JavaScript válida dentro do curly pres E isso está dentro do JSX. Agora, o que isso significa é que, se eu quiser imprimir uma edição de dois números, ok, dez mais dois, eu posso absolutamente fazer isso porque essa é uma expressão Java válida, ok? Isso é totalmente permitido. Agora, em vez de apenas imprimir o total aqui, posso ter H uma etiqueta, algo assim. Ok, 1 segundo. Então, eu vou ter cada um. Vou dizer olá. Ok, e eu vou ter um nome aqui, algo assim. OK. E aqui, eu posso dizer const, nome, e eu posso dizer ALS, algo assim OK. Então, com isso, você pode ver, estamos cumprimentando Alice, ok E aqui, o que fizemos foi criar uma variável JA Script ou constante JA, posso dizer, chamada nome. E então eu estou fazendo uso disso na sintaxe JSX. Está bem? Agora, essa é uma expressão que está sendo avaliada, ok? Então, o resultado será Hello Alice, e é isso que vemos como saída Está bem? Agora, uma coisa que eu gostaria de mencionar aqui é que mencionei algumas vezes que G six não é HTML. OK. Então a questão é: como ele está sendo renderizado no navegador Portanto, ele é convertido em HTML pelo react e exibido no navegador. Então é assim que a renderização funciona para JSX. Agora, isso é sobre expressões. OK. Vamos dar um exemplo de J seis atributos. Está bem? Agora, sempre que você estiver usando elementos , é claro que você também usará atributos, certo? Por exemplo, um desses atributos está aqui, um desses atributos seria o nome da classe, ok? Ou se você quiser atribuir uma tag H a uma classe, você adicionaria o nome da classe aqui. É assim que você atribuirá uma classe a um elemento no JSX, ok E você pode chamar isso de saudação aqui. OK. Agora, lembre-se que isso é um caso de camelo, ok? E você não pode ter aula aqui, ok, porque isso é HTML, certo? E isso é JSX. Tudo bem. Então tenha isso em mente, ok? Você pode até mesmo ter em linha. Você pode até mesmo usar atributos que permitem usar o estilo embutido Está bem? Deixe-me dar um exemplo disso também. Está bem? Então, digamos que eu queira ter um botão aqui, ok? E eu vou dizer, clique em M, algo parecido aqui. OK. E digamos que eu queira ter estilo aqui. Ok, então eu vou dizer estilo. OK. E vou adicionar peras duplas encaracoladas e vou ver. Então, sem um estilo, vamos ver como esse botão está chegando. Então, está vindo dessa maneira. Você pode ver, clique em mim. OK. E aqui eu posso ver agora a cor de fundo. OK. Cor do plano de fundo. Você pode ver isso aqui e eu vou atribuir, digamos, verde. OK. Você pode atribuir qualquer cor que quiser. OK. E eu terei que a cor seja a do branco. Ou aqui. Algo parecido com isso. OK. Vou guardar isso. E se eu vier aqui, você pode ver, clique em mim. OK. Você pode ver como isso foi renderizado. OK. Deixe-me mover essas duas linhas separadas para que fiquem visíveis para todos. OK. Tudo bem. Então você pode ver. Estou usando estilos embutidos aqui em vez de um estilo externo Está bem? E eu posso até remover isso, me livrar desse texto. Está bem? Eu posso adicionar isso como uma expressão. Então, posso dizer const button, label, algo assim, e posso clicar em M aqui em códigos únicos como uma string Ou você pode usar códigos duplos. Isso seria melhor. OK. E aqui você pode atribuir o rótulo como expressão e verá a mesma saída. Você pode ver. Está bem? Então é assim que você pode usar os atributos, ok? Você pode até ter outro botão. Ok, então deixe-me pegar um botão, opa. Vou copiar esse botão. Vou adicioná-lo aqui. OK. E aqui, você pode dizer alerte-me, ou este é o texto. OK. E aqui, você pode dizer. Então, aqui, o que estou fazendo agora é atribuir um evento ao clicar. Está bem? Então eu criei um botão. Você pode ver o alerta para mim. OK. Mas digamos que eu queira ter um evento onclick aqui Está bem? Agora, clicar em HTML é clicar assim, certo? Mas em J six, como eu disse, segue a sintaxe camel Kaye Então C será a capital aqui. Apenas tenha isso em mente. Ok, C será maiúsculo aqui, e então, dentro do par de chaves, você pode criar esse tipo de função aqui, e você terá um alerta, e eu posso dizer botão de acento invertido, clique, algo clique, Está bem? Se eu salvar isso, vamos ver como isso funciona. OK. Você pode ver o botão clicado Isso está funcionando perfeitamente bem. Está bem? Então, essas são pequenas coisas sobre JA six que as pessoas sempre se perguntam. Então, se você é um iniciante, se você pular isso e ir diretamente para o código react, e se você ver um código escrito assim, você se perguntará por que isso é maiúsculo, em primeiro lugar Está bem? Portanto, você precisa entender que é assim que ele é usado no JA six. Está bem? Então, lembre-se dessas duas coisas você pode incorporar qualquer expressão válida do Jascript dentro de um Curly Breeze no código JSix, e os atributos do JSix usam a sintaxe das teclas Camel, atributos do JSix usam a sintaxe das teclas Camel Então, espero que você tenha conseguido acompanhar Vou dar um último exemplo aqui de exibição de uma imagem. OK. Então, o que vou fazer é usar a tag IMG aqui OK. E exibiremos uma imagem. Vamos dizer SRC aqui. OK. E o que vou fazer é que precisamos de uma imagem aqui, então vou dizer, por favor, segure a imagem, algo assim. OK. E eu vou a este site e obteremos a imagem do espaço reservado de 600 por 400 Portanto, este é um site que fornecerá qualquer tipo de imagem reservada OK. Então eu vou dizer SRC, esta é a parte da imagem E se eu salvar isso e se eu vier aqui para ver a saída, você pode ver. OK. Ok, 600 por 400 é muito grande. Então, vou mudar isso para cem por 100. Se isso vier aqui, você pode ver uma imagem de 100 por 100. E isso pode até ser convertido em uma expressão. Então eu posso cortar isso. Ok, eu posso ir até aqui. Eu posso dizer consimage URL, algo assim. Eu posso adicionar isso aqui, e eu posso vir aqui e posso ter o caminho da imagem aqui, URL da imagem. Assim. Está bem? Posso até adicionar um espaço reservado Eu posso ver Alt e esta é uma imagem dinâmica. Assim. OK. Você pode ver. A saída não mudou, ok? Está funcionando perfeitamente bem. Ok, então é assim que você pode trabalhar com imagem. Você pode até mesmo mover essa declaração para cá, vamos ver. OK. Opa, você não pode. Você não pode. Então, considerando isso, tem que estar aqui no topo, ok? Logo após o retorno, ok? Isso não pode fazer parte da escrita. Me desculpe por isso. OK. Então, sim, este é o J six, e espero que esteja bem claro para você e espero que tenha achado isso útil. 13. Renderização condicional: Tudo bem, então vamos agora falar sobre renderização condicional e Agora, a renderização condicional é usada quando você deseja renderizar diferentes elementos da interface com base em determinadas condições e, em reação, você pode usar a renderização condicional de Portanto, há várias maneiras de implementar a renderização condicional Está bem? A primeira maneira é fazer uso de declarações IL. Agora, se você conhece JavaScript, deve estar ciente da declaração FL. Portanto, você pode usar a instrução FFL para fazer renderização condicional Você também pode usar o operador ternário e também pode usar o operador Deixe-me mostrar isso para você como funciona. Então, aqui, eu tenho essa função que está retornando um TIF vazio Ainda não está retornando nada. E se você vier aqui, não verá nenhum tipo de saída. Agora, digamos, se eu quiser verificar se um usuário está bloqueado ou não. E dependendo se o usuário está bloqueado ou não, eu quero exibir uma mensagem, certo? Então, o que eu posso fazer é ter uma variável aqui. Posso dizer que está preso, não, e posso dizer que é verdade. Está bem? Então, o usuário está bloqueado. Eu posso dizer que está trancado. OK. Então, nesse caso, o que você pode fazer é ok, isso não virá aqui. OK. Então, vou ter que adicioná-lo aqui. OK. Portanto, se o usuário estiver bloqueado, você poderá retornar. Está bem? Então, vou remover essa devolução aqui. Eu posso voltar e posso ver cada um por aqui. Está bem? Bem-vindo de volta. Algo parecido com isso. Eu não preciso desse retorno aqui. OK. Então isso é o que se torna meu retorno, ok? E se ele não estiver preso, ok, então eu posso dizer devolver, e eu posso dizer H um e eu posso dizer, por favor, faça o login. Por exemplo, e eu vou guardar isso. OK. Então aqui você pode ver, bem-vindo de volta. E se eu mudar a bandeira para falsa e se eu salvar, você verá, por favor, faça o login. Então, dependendo da condição, essa variável está controlando a condição. Dependendo dessa variável, avalie o valor que essa variável está mantendo, seja verdadeiro ou falso. Na verdade, você está renderizando mensagens diferentes na interface Está bem? E é assim que a renderização condicional funciona Você pode ver se estamos usando duas declarações de retorno, o que é absolutamente correto. Eu até pulei os colchetes redondos. OK. Então, esses colchetes redondos são ignorados Você pode adicioná-lo se quiser, mas eu só queria dar uma olhada mais limpa aqui. Está bem? Algo parecido com isso. Está absolutamente bem. OK. Vou me livrar desses colchetes redondos Então é assim que a renderização condicional funciona usando a instrução if OK. Espero que isso esteja fazendo sentido. Agora, você também pode converter tudo isso em um operador Turnary Está bem? Então, o que eu faria é simplesmente adicionar o comentário aqui. OK. Vou apenas converter isso em um comentário. E agora, vou usar o operador de toner. Está bem? Então, o que eu posso fazer é dizer const aqui Ok, eu posso dizer comida. OK. E eu posso ver cada um. OK. Agora, se sim, terei isso como uma expressão. OK. Agora, a expressão diz que se ele estiver preso, tudo bem, então eu serei bem-vindo. De volta. Ok, algo assim, ou então, eu direi Qual é a mensagem? Por favor, faça o login. Então, eu vou ter isso aqui. OK. Agora, o que eu posso fazer é retornar T, então eu posso dizer retornar aqui, e eu posso simplesmente retornar H ou eu posso simplesmente retornar o elemento aqui, algo assim. E eu posso salvar isso. OK. Opa, então isso não vai funcionar. Preciso embrulhá-lo dentro de um TIF. OK. Portanto, isso deve fornecer a saída. Ok, você pode ver, por favor, faça o login, e se eu mudar isso para verdadeiro aqui. Opa. É verdade aqui. Então, nesse caso, você verá Bem-vindo de volta. Está bem? Então, estamos usando o operador ternário, ok Vou levar isso para novas linhas para que fique visível para todos. Você pode ver como isso está sendo usado, ok? O elemento constante é igual a H, um está logado. Está bem? Então, aqui estamos fazendo uso dessa expressão que está bloqueada em Bem-vindo de volta, login e estou fechando a tag H one. E com base nisso, estamos retornando esse elemento aqui. Ok, então aqui estamos usando o operador ternário, essencialmente, para fazer renderização condicional, é o que Está bem? Então eu espero que isso esteja fazendo sentido, certo? Deixe-me dar mais um exemplo. Agora, esse exemplo é renderização condicional usando Ok, agora o que é operador? Usando e duas vezes? Ok, então você também pode usar isso, basicamente para renderizar um elemento somente quando uma condição for verdadeira. Certo? Agora, deixe-me dar um exemplo para isso também. Está bem? Então, digamos aqui, o que eu posso fazer é, logo acima, escrever mensagens constantes Então, digamos que eu esteja mantendo uma lista de mensagens, ok? Digamos que seja um aplicativo de bate-papo. Agora, se houver qualquer número de centenas de mensagens. Ok, então essas são 100 mensagens, digamos, ok? Há uma série de centenas de mensagens. Agora, se houver centenas de mensagens, gostaria de mostrar uma notificação ao usuário de que, Ei, você tem X centenas de mensagens aqui. Está bem? Como eu faria isso? Então, aqui, o que eu faria é simplesmente dizer o tamanho do ponto das mensagens. Se o comprimento dos pontos das mensagens for maior que zero. Ok, e eu vou operar aqui. Eu vou dizer H dois, algo assim. OK. E eu direi que as mensagens têm comprimento de pontos. OK. Centenas de mensagens, algo assim. Está bem? Se eu salvar isso, você verá que não há nada sendo exibido. Ok, porque o tamanho das mensagens é zero. Agora, se eu adicionar uma mensagem a ela. Ok, você pode ver que tem 100 mensagens. Se eu adicionar mais uma mensagem, ok? Qualquer mensagem, ok, estamos apenas dando uma olhada na contagem. Você pode ver que tem 200 mensagens. Está bem? Como isso está funcionando? Então, na verdade, isso está levando em consideração o comprimento da matriz e vendo se o comprimento da matriz é maior que zero. Agora, deixe-me explicar para você como essa linha está funcionando e como ela está renderizando condicionalmente a mensagem para nós, ok Então, estamos fazendo uso da lógica e aqui. E se você estiver familiarizado com JavaScript, você deve estar ciente do operador lógico. Então, quando e está sendo usado, o lado esquerdo está sendo avaliado primeiro. Então essa é a expressão no lado esquerdo. A mensagem tem um comprimento maior que zero. OK. Então, ele avalia isso e se essa expressão for verdadeira, ele avalia e retorna o lado direito Está bem? Se isso for verdade, ele avalia e retorna o lado direito E se isso for falso, o lado esquerdo é falso, ele não retorna para o lado direito e, essencialmente, causa um curto-circuito. E isso é conhecido como curto-circuito, ok? Onde ele não avalia o lado direito e, basicamente, não renderiza nada aqui Está bem? Então, sim, é assim que funciona por aqui, ok? E isso está sendo usado para fazer renderização condicional. E você verá muito esse tipo de expressão, ok? Então, se você tiver alguma condição aqui e estiver usando e, em seguida, o que quiser renderizar no lado direito. Está bem? Então é assim que esse curto-circuito está sendo aproveitado aqui para exibir mensagens condicionais E eu diria que isso é muito mais conciso do que escrever declarações FL e operadores ternários, na Está bem? Então você também pode converter essa expressão inteira, uh, em algo desse tipo, ok? Mas o operador ternário , na verdade, também é útil se você quiser receber uma mensagem de falha Ok, então você está recebendo duas mensagens. Bem-vindo de volta e, por favor, faça o login, ok? Então aqui está você recebendo apenas uma mensagem, ok? Mas aqui você tem duas mensagens que estão sendo renderizadas quando algo é verdadeiro Então, na verdade, os dois não são iguais, ok? Mas sim, se você está exibindo apenas uma coisa, tudo bem, então essa pode ser a melhor opção disponível. Tudo bem. Então, sim, isso é sobre renderização condicional Então, analisamos a renderização condicional várias maneiras O primeiro é usar FL. Em seguida, usamos o operador ternário e, em seguida, vimos com a ajuda da lógica e do operador. Tudo bem. Então, espero que você tenha conseguido acompanhar e espero que tenha sido útil. 14. JSX e funções: Então, vamos agora falar sobre J seis e funções. Agora, o JSix permite que você use funções dinamicamente para gerar e retornar elementos ou componentes, e isso pode ser útil se você quiser encapsular uma lógica dentro de uma função e reutilizá-la Deixe-me dar um exemplo disso. Então, digamos que eu tenha essa saudação aqui, que é uma saudação simples, olá, certo Digamos que eu adicione um nome a ele e esteja personalizando, para que eu possa dizer Alice Olá, Alice aqui. Ok. Agora, digamos que eu queira cumprimentar vários usuários que passaram seus nomes, para que eu possa duplicar Olá Alice, olá, Bob, digamos. Ok. Ok, isso não vai funcionar porque eu preciso de um pai, de acordo com as regras, certo? Então eu preciso mover isso. Vou cortar isso e colar aqui, algo assim. Ok. Agora, isso funcionaria. Olá Alice, Olá Bob. Agora há uma maneira melhor de lidar com isso. Está bem? O que estou fazendo é basicamente replicar a maneira como estou cumprimentando os usuários em vários blocos. Está bem? Mas essa coisa também pode ser gerada com a ajuda da função . Tudo bem O que eu posso fazer aqui é dizer função. Opa, preciso desativar as tampas. Eu posso dizer função. Posso dizer uma mensagem de boas-vindas aqui. Ok. E eu posso ter o nome como parâmetro aqui, então , e eu posso cortar isso, eu preciso disso. E aqui, eu posso dizer “volte”. Eu posso adicionar isso aqui. Em vez de Alice aqui, vou apenas dizer o nome Está bem? Então, estou gerando JSX com a ajuda dessa função Agora, como faço uso disso? Eu posso usá-lo com a ajuda da sintaxe de expressão. Eu posso dizer uma mensagem de boas-vindas, e posso passar a Alice aqui Algo parecido com isso. Ok. E eu posso salvá-lo, e você verá Hello Alice, hello boop Então, eu ainda não mudei isso para pop, ok, mas vou me livrar da saudação do Pop aqui e vou converter a saudação do Bob na saudação do Está bem? Agora, você verá Hello Alice, Hello Bob Eu posso até adicionar mais um. Olá, John. Ok. Você pode ver. Então é assim que você pode usar a função que retorna seis e esse Aix pode então ser renderizado em um componente dentro de um componente Tudo bem Então, sim, como funciona é que temos uma função de mensagem de boas-vindas aqui, função Ja Script simples que usa o nome como parâmetro e retorna uma mensagem de saudação. Esta é uma mensagem de saudação E no componente do aplicativo, você pode chamar essa função e passar o nome como argumento, passar nomes diferentes para renderizar saudações personalizadas Espero que isso esteja fazendo sentido, ok, agora você pode até mesmo fazer isso condicional Está bem? Portanto, você pode condicionalmente ou usar funções para decidir quais elementos JSX renderizar com base em Então é isso que eu quero dizer com renderização condicional. Está bem? Então, deixe-me dar um exemplo. Digamos que, dependendo da hora do dia, eu queira dar bom dia ou boa noite. Está bem? Então, o que eu posso fazer é ter uma função aqui. Eu vou dizer função. Ok. Vou dizer saudação, vou dizer que é manhã Está bem? Agora, se for de manhã, se for de manhã, tudo bem. Então, o que fazemos? Eu devolvo cada um. Por aqui, algo assim. Eu posso dizer que é bom. Opa, bom dia, algo assim Ok. E se essa condição não for satisfeita, posso devolver boa noite, algo assim. Ok. Agora, o que posso fazer aqui é usar Const agora igual a um novo oito, algo assim Posso dizer que Const está de luto aqui, e posso dizer que agora ensinado, e posso dizer que agora ensinado, Então, essa é a lógica que eu estou usando para verificar se é a lição 12 ou maior que dez aqui, o que eu estou fazendo é que eu preciso fazer é dizer dentro de uma expressão, eu posso dizer saudações, e eu posso passar luto aqui, Agora estou vendo boa noite porque é noite aqui, ok? Então, na verdade, estou me divertindo aqui, certo? Mas sim, se é uma hora matinal para você, então essa lógica vai devolver o bom dia por aqui. Ok. Então, o que está fazendo é pegar a data atual, ok, a atual, e depois obter os Rs. Ok, então se RS for menor que 12, significa que é de manhã. Se não for, significa que é noite. Então, isso será falso aqui nesse caso e, dependendo disso, se o valor booleano é verdadeiro ou falso, ou se estamos realmente renderizando a saudação aqui Então, sim, isso pode ser feito, e você pode Eu também gostaria de mostrar mais um exemplo em que você mais um exemplo em que você pode ter funções que retornam JSX e também podem ser passadas como argumento para outras funções permitindo uma lógica de interface de usuário mais complexa Então, digamos que queremos exibir uma caixa de alerta dependendo de uma condição. Ok. O que eu faria é criar mais uma função. Está bem? Eu vou dizer mostre o alerta aqui. Ok. Eu vou ter a condição aqui e vou receber uma mensagem. Agora, essa condição, opa, não é uma mensagem de boas-vindas. Será uma mensagem. Agora, essa condição que eu estou tendo como parâmetro, isso é um booleano, ok? Então, vou ter um cheque booleano para isso. Se houver condição, retorne. Ok. E eu posso retornar o alerta aqui. Está bem? Então eu posso dizer TIF e posso adicionar uma mensagem aqui, algo assim. Assim. Ok. E eu posso até mesmo estilizá-lo ou o que eu quiser fazer. Está bem? Então isso pode ser feito. Tudo bem Caso contrário, estou retornando nulo, certo? Agora, deixe-me chamar isso aqui. Então, aqui, o que você pode fazer é ter um tipo de sintaxe de expressão Você pode dizer mostrar alerta. Verdadeiro. Ok. E então você pode dizer que isso é importante, algo assim. Essa pode ser sua mensagem. Vou guardar isso e você pode ver que isso é importante. Isso é o que você está vendo aqui, certo? Agora, aqui, o que podemos fazer é dentro dessa função específica, eu posso ter outra chamada de função. Está bem? Então, aqui estamos renderizando esse alerta, estamos criando esse alerta dentro dessa função específica Está bem? Então, em vez disso, o que vou fazer é aqui que eu possa ter uma função. Ok, eu posso dizer caixa de alerta, assim Ok. E aqui eu posso ter uma mensagem. Ok. E aqui, eu posso dizer “volta” e “isso”. Ok. Agora eu também posso estilizá-lo aqui. Posso tornar o alerta um pouco complexo porque separei o código em uma função separada E aqui, posso simplesmente chamar essa caixa de alerta com uma mensagem, e isso não afetará a saída aqui ou a saída que estou recebendo. Ok. E se você vier aqui, verá que isso é importante. Então, estamos vendo a saída, ok? Isso é importante e você pode ver como isso está chegando. Temos uma função separada para gerar a caixa de alerta estilizada Você pode dizer: Ok, isso não é realmente estilo. Precisamos escrever CSS para isso, mas você entendeu o que estou explicando aqui. Está bem? Preciso adicionar ponto e vírgula aqui nas declarações de retorno . Está bem? Portanto, todas as declarações de retorno terão ponto e vírgula. Ok, eu percebi que perdi alguns. Ok. Acho que sim, isso deve ser bom por aqui. Ok. Então, sim, essa função específica está sendo chamada por essa função aqui. Então, estamos fazendo uma chamada de função dentro da chamada e retornando o Jx daqui, dependendo da condição E então essa condição está sendo renderizada aqui. Está bem? Então isso também é permitido, e é assim que funcionaria. Se eu salvar isso, você pode ver que a saída está aqui. Tudo bem Então, espero que tenha sido útil e espero que você tenha conseguido acompanhar. 15. Comentários em JSX: Então, agora é hora de começarmos a falar sobre bens comuns em JSX Portanto, este é um arquivo JSX simples de pontos de aplicativo. Está bem? Tem código JSix aqui. Então, esse é o código JSix que estou retornando, você pode ver, e o resto do arquivo tem código JavaScript. Está bem? Agora, estou vendo essa saída aqui. Está funcionando bem. Agora, se eu quiser adicionar bens comuns, ok? Agora, há dois lugares aqui ou há dois tipos de código. Um é o código JSX que está aqui e, em seguida, temos o código JavaScript que existe no resto do arquivo Portanto, no código do Ja Script, você pode usar os comentários regulares que normalmente usa. Portanto, este é um comentário de uma única linha. Isso é um comentário, e você também pode ter o comentário de várias linhas no código Jscript Assim, isso é um comentário de várias linhas, algo assim É assim que você escreve comentários em JavaScript, ok? Mas você não pode fazer isso quando se trata de JA six. Então, dentro do código J six, se você tentar fazer isso, não funcionará, certo? Agora, como você escreve um comentário aqui? Assim, você pode adicionar comentários como esse. Então, eu apenas usei o atalho Control e a barra frontal, então ele adicionou essas tags para Está bem? Então, se você quiser adicionar comentários dentro do Jasix, é assim que você faria OK. Você pode ver, isso é um comentário. OK. E você pode adicionar um comentário de uma única linha ou um comentário de várias linhas, dependendo da sua necessidade OK. Então, na verdade, este é um comentário de uma única linha. Posso até adicionar um comentário de várias linhas aqui. OK. Eu posso dizer isso. Vou ver que este é um comentário de uma única linha, e este é um comentário de várias linhas, posso dizer que anote isso aqui, algo assim Espero que isso esteja fazendo sentido sobre como os comentários funcionam no arquivo GSX e espero que seja útil 16. PROJETO: criando um site de portfólio usando o React: Então, agora é hora de fazermos um projeto usando tudo o que aprendemos até agora e reagirmos. E o que vamos construir? Vamos criar uma página web de portfólio simples. Tudo bem. Então você pode ver esse portfólio aqui. Isso é o que vamos construir. Então você pode ver o nome, o slogan. Você tem seções como sobre projetos em contato. Esta é a seção A, você pode clicar aqui e ir para Sobre também. OK. E aqui você tem projetos. Assim, você pode clicar em projetos e em Bons projetos. Você tem esse Projeto um, a descrição do projeto e o link para o projeto, Projeto dois, o Projeto três e assim por diante. E então você tem a opção de entrar em contato aqui, e depois com o FUTA, ok? Bem simples. Está bem? É um aplicativo de página única, aplicativo web de página única, devo dizer, em que estamos fazendo uso do react J. Então é exatamente isso que vamos construir Vamos manter as coisas bem simples, e o objetivo é aprender e reunir tudo o que aprendemos até agora na criação desse aplicativo para que possamos praticar. Então, vamos começar. Então, estou aqui no Visual Studio Code e tenho o app dot JS aberto, ok? E está simplesmente imprimindo uma mensagem muito simples chamada olá. Tudo bem. Agora, o que eu vou fazer é que nós vamos vir até aqui. E dentro do aplicativo de funções, ok, vamos criar algumas variáveis. OK. Agora, essas são as variáveis que nos ajudarão a exibir todas as informações que queremos mostrar no aplicativo de página única que estamos criando, ok? A primeira variável que teremos é, obviamente, nome. Ok, você pode ter o nome de sua escolha aqui. Vou usar esse nome fictício chamado John Doe. Você pode ter uma profissão aqui. OK. E você pode dizer desenvolvedor full stack. Algo parecido com isso. OK. Você pode ter projetos aqui, algo assim. E aqui, teremos que isso será em uma espécie de formato JCN Ok, eu posso dizer título. Opa, Title Colin e eu faremos o Projeto Um. Você pode adicionar qualquer tipo de detalhe do projeto aqui, ok? Descrição aqui, algo assim, e você pode ver o aplicativo web. Construído usando React e Node Chase, algo assim. Qualquer tipo de descrição que você possa ter. OK. Eu também vou ter um título. Desculpe, não é título. Deve haver um link aqui. O link, vou mantê-lo como hash. OK. Não há necessidade de adicionar um link agora, ok? Isso é o que eu acho porque não é um projeto real, certo? Então, adicione uma vírgula, e é por isso que estamos recebendo o erro. Eu acho que isso está feito, ok? Você pode duplicar isso para mais um projeto, vírgula Aada, mais um projeto, Projeto dois OK. E você pode dizer que é uma plataforma de comércio eletrônico. Opa, então eu errei. Tudo bem. Portanto, é uma plataforma de comércio eletrônico. Podemos dizer que é uma plataforma de comércio eletrônico. Construído usando o Gingo. Você pode dizer algo assim. Está bem? Eu só vou ter dois projetos por enquanto, ok. E agora podemos vir aqui. Está bem? Então, isso é um olá de volta. OK. Eu não preciso voltar olá por aqui. OK. Então, o que podemos fazer é mover isso. OK. Em primeiro lugar, para essa guia específica, terei o nome da classe como aplicativo. E estou fazendo isso porque, mais tarde, eu também gostaria de estilizá-lo. Está bem? Agora, aqui eu tenho um cabeçalho. OK. Então, este é um cabeçalho HTML que estou adicionando. Ok, deixe-me acrescentar. Último nome. OK. E isso é chamado de cabeçalho, algo assim aqui. OK. Agora, esse cabeçalho está dentro do cabeçalho. Eu vou ter algumas coisas por aqui. Eu vou ter cada um, e isso seria nome, isso renderizaria nome aqui. Eu vou ter uma etiqueta P. Isso renderia profissão, algo assim. E então eu posso ter o par E NAF aqui. Eu vou ter a NAF aqui. Eu posso dizer, opa, eu posso dizer a tag E aqui, e isso pode ser sobre e isso pode apontar para HF e isso pode apontar para hash, sobre para HF e isso pode apontar para hash 17. Introdução aos componentes e criação do seu primeiro componente: Oi, aí. Bem-vindo. E agora é hora de começarmos a falar sobre o que são componentes e como eles funcionam no React. Então, aqui, estou no site oficial do react, que é react dot TEF, e vou analisar esse site, entender e conhecer esse conceito de componentes, certo? Agora observe este site, ok? Você pode observar qualquer site, mas eu usei esse exemplo porque estamos aprendendo a reagir, e esse é o oficial. Se você ver no topo, há uma barra superior aqui, ok? Você pode chamá-lo de cabeçalho ou barra de navegação superior ou o que quiser Agora, dentro disso, há um logotipo no lado esquerdo, a versão, ok? Você pode ver a barra de pesquisa, os itens de navegação, como referência de aprendizado , blog da comunidade e mais algumas opções aqui. Está bem? Você pode navegar pelo site, certo? Agora, se você alterar a página aqui, referenciar, comunidade, aprender, você pode ver essa barra superior permanece como está. Isso não muda, certo? É estático em todas as páginas. E o mesmo vale para o rodapé. Por aqui. Está bem? Então, o que eu quis dizer aqui é sempre que você estiver criando qualquer tipo de aplicativo web ou qualquer tipo de software, haverá alguns componentes ou algumas coisas em seu aplicativo que seriam iguais e podem ser reutilizados, certo? Agora, no desenvolvimento web tradicional, o que costumava acontecer é se você estiver construindo esse tipo de site, você criará esta página aqui. Você terá esse código escrito na parte superior para renderizar essa interface do usuário. Ao criar a página para aprender aqui, nesta página, você replicará novamente esse código que cria essa coisa específica na parte superior Está bem? Se você estiver criando uma página de referência, você a criará novamente na parte superior. Então isso costumava acontecer no desenvolvimento web tradicional, ok? E como você pode imaginar, houve muita repetição, certo? Agora, se você tiver que fazer algum tipo de alteração na barra de navegação superior amanhã , quero adicionar mais uma opção aqui Então eu tenho que lembrar de fazer alterações em todos os arquivos, onde quer que eu tenha essa barra superior sendo usada, certo? E isso era entediante, não era fácil e não era uma boa prática, certo Agora, com o conceito de reutilização. Está bem? Portanto, existe um conceito de reutilização, que significa que você cria coisas uma vez e reutiliza várias vezes ao longo do ciclo de vida do aplicativo Então, o que significa reutilização é que você criou essa barra na parte superior, um rodapé na parte inferior e pode simplesmente reutilizá-la em Está bem? Isso é o que significa reutilização, certo E isso é possível com a ajuda de componentes no react. OK. Então, o que é um componente de reação. Então, se você for aprender a reagir aqui, ok? Então, na verdade, eu o abri aqui. Ok, então você pode ver aqui. Um componente é uma parte da interface do usuário que tem sua própria lógica e aparência. Está bem? Ele pode ser tão pequeno quanto um botão ou tão grande quanto uma página inteira. Está bem? Então, deixe-me colocar desta forma. Os componentes do React são o alicerce de qualquer aplicativo de reação. Está bem? O que é, é uma peça reutilizável de interface de usuário ou interface que pode ser definida pelo desenvolvedor e permite que você a use reutilize em vários locais em Então, por exemplo, eu te dei o exemplo dessa barra no topo, ok? Você o cria uma vez e o reutiliza em todo o aplicativo, ok? E é independente. Ele tem seu próprio trecho de código. OK. Amanhã, se você quiser fazer qualquer tipo de alteração, basta fazer a alteração em um arquivo, e ela será refletida em todos os lugares. Esse é um benefício dos componentes. Está bem? Agora, você pode ver que é assim que você pode criar componentes, certo? Agora, antes de falar sobre esse trecho de código, deixe-me dizer mais uma coisa. Os componentes no react podem ser criados de duas maneiras. Uma delas é fazer uso de funções, como você pode ver aqui na minha tela. Outra forma é fazer uso das aulas. Agora, classes, se você explorar qualquer tipo de código mais recente no react, não verá muito uso de classes por lá. Então, funções são o que está sendo usado em todos os lugares. Então é isso que vamos manter. E os componentes criados usando funções são conhecidos como componentes funcionais, certo? Então você pode ver esse trecho de código aqui. É uma função de script Ja. Você pode ver que os componentes de reação são funções de script Ja que retornam uma marcação. Certo. Então aqui você pode ver que isso é uma função, uma função de script Ja, que está retornando JSX, a marcação E esse é um exemplo muito simples de um componente que é apenas um botão. Está bem? Então você pode ver como ele está retornando esse botão, e você pode usar esse botão em seu aplicativo, ok, onde você quiser usá-lo. OK. Então, aqui você pode ver que ele está usando isso no meu aplicativo aqui e está renderizando o botão aqui Está bem? Agora, uma coisa que você precisa observar aqui, então diz que começa com uma letra maiúscula. Está bem? Portanto, os nomes dos componentes do react devem sempre começar com uma letra maiúscula, enquanto tags HTML devem estar em minúsculas Está bem? Então você pode ver aqui. OK. Isso está começando com a letra maiúscula, certo? Então é assim que os componentes são criados. Agora, aqui, você também tem um editor para testar. Ok, você pode ver que este é o botão que foi criado. Claro, tudo isso está no mesmo aplicativo de arquivo dot js. Você pode criar vários arquivos. Então, por exemplo, você pode criar button ou mybutton Js aqui separadamente, e você pode ter myapp dot js onde você está usando o Está bem? Isso também pode ser feito. Mas aqui, o exemplo está demonstrando isso em um único arquivo aqui Está bem? Então, aqui, se você ver meu botão, ok? E eu posso reutilizar o botão aqui. Então, se eu quiser, posso usá-lo umas dez vezes ou quantas vezes eu quiser. Você pode e se eu quiser fazer uma alteração no texto aqui, eu tenho que fazer uma alteração em um lugar, e eu sou um botão dizendo olá. Desculpe. Cante olá. Você pode ver. Eu me refleti em todos os usos. Você pode ver que eu o estava usando em vários lugares, certo? Assim, você pode ver que isso está sendo refletido em todos os lugares. Portanto, esse é um benefício dos componentes. Agora imagine que, se você não estiver usando um componente, você está realmente pegando esse botão de código e renderizando-o dessa forma dez vezes Amanhã se você quiser fazer uma alteração na cópia aqui ou amanhã se quiser atualizar qualquer tipo de texto ou qualquer tipo de estilo, você tem que fazer isso em todos os lugares, certo? E isso não é bom porque, você sabe, introduz a possibilidade de erros no aplicativo porque somos humanos, certo? Nós, desenvolvedores, somos humanos. Você pode sentir falta de fazer uma mudança em uma jogada específica, certo? E isso introduziria qualquer tipo de erro no aplicativo. Então isso não é recomendado, mas essa forma de componentes é recomendada, certo? E você pode usá-lo em seu aplicativo, certo? Então, o que eu faria é já que agora temos alguma clareza sobre quais são os componentes de reação, ok, mudaríamos para nosso aplicativo. Eu tenho esse aplicativo de reação criado, ok, com o aplicativo muito simples dot Jx Agora, aqui no ApdT Jasix aqui você vê, eu tenho uma saudação muito simples, muito simples que estou retornando aqui E isso é na verdade um componente, ok? Então, se você ver aqui em main.j6, verdade estou renderizando o aplicativo aqui no E eu estou importando o aplicativo do app dot Jx, e o aplicativo está sendo exportado aqui, você pode ver, você pode ver Então, sim, esse também é um exemplo de componentes. Está bem? Estamos vendo o ponto e vírgula de exportação do Oops IMS aqui Vou apenas adicioná-lo. OK. Mas você pode ver como isso está funcionando. Você também pode adicionar componentes aqui no próprio arquivo. Está bem? Então, o que eu posso fazer é pegar esse trecho de código. Eu posso criar um botão. OK. Então, o que eu vou fazer é vir até aqui. OK. Vou adicionar um botão dessa forma. Está bem? Sou um botão dizendo olá e posso realmente adicionar um botão. Está bem? Mas antes de fazer isso, deixe-me mostrar como é a saída atual. Portanto, a saída atual diz olá porque não há nenhum botão envolvido no momento. Ainda não vi o arquivo. Está bem? Agora eu criei um botão. Eu disse função, meu botão. Eu sou um botão e estou dizendo olá aqui. OK. Agora eu posso vir aqui e dizer meu botão, algo assim, e eu vou fechá-lo e você pode ver um botão entrando aqui, certo? E eu posso simplesmente replicar isso do jeito que eu quiser, ok? Assim, posso adicionar quantos botões eu quiser. Você pode ver que muitos botões estão sendo adicionados, certo? Esses são todos botões. Amanhã, se eu tiver que fazer uma mudança na interface do usuário, como eu disse, tenho que fazer isso em um só lugar, certo? E tudo isso está vindo em um único arquivo, certo? Talvez eu queira modularizar o código. Portanto, não é uma boa prática ter vários componentes em um único arquivo. Então, o que eu deveria fazer é criar um novo arquivo aqui. Em SRC, vou dizer meu botão. Ensinou JAX aqui. OK. E eu vou cortar esse código, e vou movê-lo para cá. Está bem? Algo parecido com isso. E aqui, eu vou dizer exportar ou padrão, e vou dizer myPton aqui, algo assim E aqui, eu vou apenas importar isso. Então, no momento em que pressiono Controle e espaço aqui, ok, essa linha é importada. Você pode até digitar essa linha na parte superior. Está bem? Na verdade, você está importando meu botão desse arquivo aqui, ok? Se você mantiver o controle e passar o mouse sobre isso, verá que isso é convertido em um link e você pode acessar esse arquivo se quiser Tudo bem? E se você salvar isso, a saída não mudará, mas o código agora está muito mais modularizado. Está bem? Então você tem um componente que você criou e o está usando em seu aplicativo. Tudo bem? Espero que isso esteja fazendo sentido. E espero que isso seja útil. Espero que você esteja entendendo a importância de como os componentes são importantes. Então, esse é um exemplo muito simples que eu demonstrei. Mas imagine que você está criando um aplicativo complexo em que gerencia vários perfis de usuário, certo? Agora, pode haver vários tipos de usuários e talvez você queira exibir as informações do perfil em locais diferentes no aplicativo. Então você pode ter um componente, certo? Você pode ter um componente de imagem de perfil para exibir a imagem de perfil de uma determinada maneira. E você pode reutilizá-lo várias vezes em vários lugares Por exemplo, se você quiser exibir a imagem do perfil na tela inicial, certo? Então você pode usar esse componente. Ok, se você quiser exibi-lo na página Editar perfil, você pode exibir o uso desse componente, certo? Portanto, isso é válido se você tiver algum tipo de requisito personalizado. Então, por exemplo, normalmente as fotos do perfil são exibidas em um círculo, certo? Sempre que você acessa qualquer aplicativo, as fotos do perfil são exibidas em um círculo, certo? Portanto, talvez você queira ter uma visão circular na qual exiba a foto do perfil do usuário Assim, você pode criar um componente para isso e reutilizá-lo em todo o aplicativo sempre que quiser exibir a imagem. Certo? E se houver alguma alteração na interface do usuário amanhã para exibir a foto do perfil, você faz uma alteração nesse arquivo e ela é refletida. É tão bom e muito útil, certo? Então, espero que você tenha uma boa compreensão de como os componentes são importantes e os alicerces da aplicação react, e espero que isso tenha sido útil. 18. Indo com as mãos: Então é hora de colocarmos as mãos na massa e praticarmos um pouco com os componentes, certo? E aqui, o que eu tenho é um aplicativo react, que está renderizando um portfólio de um desenvolvedor, então você pode ver esse aplicativo aqui Está bem? É um aplicativo muito simples. Mas o problema com esse aplicativo é que tudo está chegando ou sendo renderizado a partir de um único arquivo Então, se eu tiver que te dar uma lista aqui, ok? Uh, deixe-me rolar para cima. Então, ok, esse é o app dot JSX, que está sendo renderizado pelo ponto principal JSX E dentro do app.j6, você está usando esse arquivo CSS e tem esse aplicativo de funções que está sendo usado E dentro disso, você tem essas variáveis. Ok, primeiro, temos essas variáveis. E então o que estamos fazendo é retornar esse JSix que está fazendo uso dessas variáveis, como os dados armazenados nas variáveis, e renderizando os O que vamos fazer é modularizar isso e introduzir alguns componentes aqui Então, isso nos dará um pouco de prática com componentes. Então, em primeiro lugar, vamos modificar o cabeçalho aqui. Então, o que eu vou fazer é vir aqui no SRC. Vou adicionar o ponto de cabeçalho Jx. Ok. Ok. Primeiro, criarei todos os arquivos. Então, o cabeçalho JSix é o que eu vou precisar. Vou precisar de cerca de seis. Ok. Eu também vou precisar que você possa dizer, lista de projetos que eu tenho seis aqui. Também vou precisar entrar em contato com Jix aqui, e vou precisar de um rodapé no final, que é Puta tout, J Ok. Agora, para organizar isso melhor, posso introduzir uma pasta aqui e posso dizer componentes aqui, e posso mover todos os arquivos recém-criados que acabei de criar para essa pasta específica. Está bem? Portanto, isso parece um pouco limpo, inclusive sobre a lista de projetos do cabeçalho de contato. Eu mudei tudo. Tudo bem Agora, o que vamos fazer é vir aqui no app dot JSX e, primeiro, trabalharemos no cabeçalho dot Então, vou pegar essa seção de cabeçalho aqui, ok, toda essa seção de cabeçalho aqui. Certo? E eu vou mover isso para o componente. Está bem? Então, o que eu vou fazer está aqui no cabeçalho. O que precisamos fazer é criar a primeira coisa. Eu preciso ter uma função. Declaração de função, vou dizer cabeçalho. E aqui nos parâmetros, eu não preciso de nada. Ok. E eu vou voltar. Tudo bem? Precisamos devolver o JSX Ok. Então, vou devolver essa parte aqui. Vou colar isso. Tudo bem Agora, faltam nome e profissão por aqui. Então, o que eu preciso fazer é rolar para cima, cortar ou colocar essas duas coisas aqui, e adicionar nome e profissão aqui, algo assim. Está bem? Então isso está feito, ok? E, sim, é isso. Preciso adicionar uma declaração de exportação aqui. Posso dizer exportação padrão e vou exportar cabeça. Ok, algo parecido com isso. E é isso. Agora, aqui neste arquivo em particular, vou rolar para baixo e aqui no lugar da seção de cabeçalho, posso dizer cabeçalho. Você pode ver esse componente e eu posso pressionar Enter. No momento em que faço isso, preciso ter certeza de fechar a etiqueta também aqui. No momento em que adicionei ou selecionei isso na sugestão de pedido, você pode ver essa declaração de importação sendo adicionada na parte superior, que significa que estamos importando o componente aqui E tudo bem, há algum problema. O aplicativo não está funcionando conforme o esperado. Deixe-me ver qual é o problema aqui. Então, vou verificar o erro aqui no console. Está bem? O erro diz que a profissão não está definida no App JA 626 Ok, eu entendi o erro, a propósito. Então mudamos a profissão para o cabeçalho, ok? E é necessário no aplicativo dot JSX, devo dizer que está aqui Você pode ver a profissão e também, eu diria que o nome é necessário. Ok. Então, vou manter as variáveis aqui. No final, excluiremos essas variáveis para evitar problemas. Tudo bem E agora, se você vier aqui, verá que o cabeçalho está funcionando perfeitamente, ok. Sem problemas. Então, isso está absolutamente sendo renderizado a partir daqui. Você pode ver a seção do cabeçalho. Está bem? Vou remover esse comentário agora. Ok. E sim, ou vamos continuar com o comentário. Vamos removê-lo no final. Está bem? Agora, vamos fazer o mesmo com o A. Ok? Agora vou cortar essa seção sobre aqui. Ok. E para A, já criamos um arquivo chamado at JSX aqui Está bem? Então, o que vou fazer é adicionar uma função, sem parâmetros, e vou dizer return, o e colar esse Jx, algo assim Ok, então isso está feito. Ok. E vou pressionar a tecla tab para isso. Tudo bem Então, isso é sobre, e eu preciso adicionar exportação aqui, exportação padrão, A aqui, algo assim. Tudo bem Vou guardar isso e se você vier aqui, preciso importar cerca de. Tudo bem Isso está feito, e se você vier aqui, ok, vemos novamente um problema. O problema é que nome e profissão não existem. Então, eu preciso dessas duas chaves também. Então, vou pegar os esquis, desculpe, não pegue essas variáveis aqui e vou vencê-las aqui Ok. Vou salvar isso e você deverá ver a saída. Você pode ver. A também está sendo convertido em um componente. Está bem? Se você vier até aqui, role para baixo. A está pronto. Temos projetos. Então, vou pegar a seção do projeto assim. Eu vou até aqui. Vou adicionar uma função, algo assim, projetos ou lista de projetos. Algo parecido com isso. Sem parâmetros, LO, e vou pegar a lista de projetos também que estamos definindo aqui, esta lista. Está bem? Então, vou adicionar essa lista aqui. Opa. Então, há um problema. Isso deve fazer parte da declaração de devolução, certo? Portanto, ele deve ser devolvido. Então, vou cortar isso. Algo assim. Está bem? Então isso está feito. Ok, estamos devolvendo este GA six, e temos esses projetos para levá-lo ao topo. Tudo bem? Isso está fazendo sentido, e eu vou exportar como padrão, e vou dizer que falta a lista de projetos. Algo parecido com isso. Ok. E aqui no app.j6, eu vou vir aqui Seção de projetos, direi lista , tag de fechamento automático, e veremos a lista se ela está sendo renderizada da maneira certa, certo? Também faremos o mesmo com o contato. Está bem? É praticamente a mesma coisa de mover isso. Está bem? Então entre em contato, eu virei aqui. Eu vou dizer função, contato. Vou me livrar disso, e depois direi voltar aqui. Assim. E então eu terminei, ok? E eu vou dizer exportação padrão, e eu vou dizer contato. Opa. Então, vou dizer que entre em contato aqui. Assim. Ok. E você precisa fazer uso do contato aqui. Está bem? Então eu vou dizer contato. E sim, Footer também fará o mesmo. Vou cortar isso. Vamos para footer.j6 e eu direi function, Futter Okay. E então eu direi para voltar aqui. Assim. E eu vou ter o Puta t, e vou adicionar a tag **** Ok. Ok, então você não está vendo **** como uma importação aqui porque você não exportou. Está bem? Então, eu preciso dizer exportar Puta padrão. Ok. E depois aqui, Puta Você deveria ver Puta entrando aqui. Ok. E bronzeado, bronzeado, certo? Agora, se você vier aqui, tudo deve funcionar, certeza, ok? Você pode ver. Tudo bem, faremos uma pequena limpeza aqui neste arquivo específico, então não precisamos dessas variáveis. Vou me livrar deles. Ok. E eu vou me livrar dos comentários, ok. Então, algo assim. Tudo bem E sim, estamos bem. Vou apenas alinhar isso um pouco. Estamos bem agora. Você pode ver. Então, este é o nosso componente de aplicativo agora, ok, que tem vários outros componentes como a lista de projetos headbo, entre em contato com FUTA E esses são todos componentes individuais agora, ok, que estão sendo renderizados ou que estão sendo criados separadamente. Tudo bem? Esses são todos componentes individuais, e qual é a lição aqui, ok? Então, amanhã, se você quiser adicionar vários componentes em um único projeto, isso é absolutamente possível. Não é como se você pudesse ter um único componente em um projeto de reação ou algo parecido. Essa regra não existe. Você pode ter quantos componentes quiser, ok? E você pode usá-lo dessa maneira. Agora, amanhã, se eu quiser alterar a ordem por aqui, se eu quiser passar para baixo lista de projetos, posso fazer isso facilmente. Você pode ver que isso mudou. Eu posso fazer controles e trazê-los volta ao estado original, certo? Então isso é possível, certo? Além disso, uma coisa que você lembra é que o aplicativo aqui é um componente em si. E dentro desse componente, estamos inserindo outros componentes. Você pode ver que o aplicativo é um componente em si mesmo e, dentro desse componente, estamos inserindo outros componentes, como cabeçalho, arco, lista de projetos, contato, oleiro Então isso é possível, certo? Um aplicativo em si é um componente, ele está sendo renderizado aqui Então, se você for para o ponto principal Jx, ele está sendo renderizado aqui no elemento raiz aqui, certo? Portanto, elemento raiz no main.j6, o que está sendo renderizado como app dot JSX, componente do aplicativo E o componente do aplicativo está renderizando esses muitos componentes sozinho, certo? Portanto, o componente também pode renderizar outros componentes, o que é perfeitamente válido e há nenhum problema nisso, certo? Então você pode imaginar como os componentes são modulares. Então, eles permitem que você inclua modularidade em seu código. Eles permitem que você divida todo o aplicativo em pequenas partes gerenciáveis Então, amanhã, se eu quiser fazer uma alteração no cabeçalho, ok? Cabeçalho em todo o aplicativo. Eu tenho que apenas fazer alterações neste único arquivo. Ok, se eu tiver que fazer alterações no FUTA em todo o aplicativo da web, tenho que fazer alterações aqui É isso, certo? Portanto, é reutilização. Depois que o componente for criado, você poderá reutilizá-lo várias vezes. Você pode reutilizar o FUTA várias vezes em qualquer lugar que quiser, capacidade de manutenção, é claro, devido à reutilização e modularidade, permite que você mantenha esses componentes individualmente separadamente A capacidade de manutenção, é claro, devido à reutilização e modularidade, permite que você mantenha esses componentes individualmente separadamente. Além disso, há uma separação de preocupações, é o que eu diria, porque os componentes ajudam você a organizar o código separando coisas diferentes em seus próprios arquivos individuais, certo? Então, é um indivíduo, é um bloco independente, é o que eu diria, certo? Portanto, há uma separação de interesses em que você tem sua própria função O componente tem sua própria função, seu próprio JSX, sua própria interface em seu próprio arquivo, certo? Portanto, é independente, certo? Então, sim, isso é sobre componentes no react. E mais uma coisa que eu gostaria de mencionar se você quiser usar ou reutilizar o componente, você tem que adicionar essa exportação na parte inferior sempre que estiver criando essa função dessa forma, certo? E que depois de adicionar a exportação, só então você poderá inseri-la dessa forma no arquivo onde quiser usá-la, certo? Então, não escrevemos essa entrada porque, se eu remover isso, digamos. Puta. Se eu salvar isso, obterei um erro, é claro. Isso não vai funcionar. E se você ver o console, ele gerará um erro. Você pode ver. Potter não está definido Agora, para trazer o Putter, você pode digitar toda essa linha de entrada, ou o que eu sugiro é pressionar Control e espaço Controle e espaço no Windows, comando e espaço no Mac, você pode ver essa sugestão, com essa importação aqui. Você pode ver que vou selecionar isso. E no momento em que eu seleciono isso, a entrada é adicionada automaticamente na parte superior. Não há problemas como tais. Se eu salvar isso, o aplicativo começa a funcionar novamente, você pode ver, está funcionando novamente, certo? Então, sim, espero que tenha sido muito bom e espero que você tenha uma boa clareza sobre como criar vários componentes e organizá-los em um único aplicativo. E espero que isso tenha lhe dado algumas dicas sobre a importância dos componentes ao trabalhar com o react. 19. Acessórios - Uma introdução: Bem-vindo, e é hora de falarmos sobre adereços no react. Agora, para demonstrar o mesmo, eu tenho esse aplicativo muito simples. Então, aqui, se você ver, eu tenho esse ponto principal Qx, que está renderizando esse aplicativo no elemento raiz E este é o aplicativo aqui, que está apenas renderizando olá aqui Então você pode ver Hello como a saída aqui, certo? Agora, deixe-me criar um cenário. Digamos que você esteja criando ou mostrando perfis de usuário, certo? Então, você está criando um aplicativo no qual deseja mostrar perfis de usuário para diferentes conjuntos de usuários, certo? Agora, o que eu faria seria criar outro componente. Está bem? Eu chamaria isso de cartão de perfil aqui, ou pontuaria Jx aqui OK. E dentro disso, eu vou ter uma função. Eu vou dizer cartão de perfil. Opa. Então, vou dizer cartão de arquivo aqui. Vou me livrar dos parâmetros. E aqui, vou devolver um pouco de GSX. Está bem? Portanto, precisamos retornar à interface. Agora, qual é a interface que você está retornando? Vou manter as coisas bem simples, certo? Vou tomar um TIF. Eu vou ter H dois. Vou dizer o nome aqui. Mostraremos o nome e os Is. Ou vamos ficar com o nome aqui. Está bem? Vamos nos limitar ao nome agora. E, claro, adicionarei exportação aqui, padrão, e direi cartão de perfil, algo assim. Está bem? Agora, preciso usar o cartão de perfil aqui. O que eu preciso fazer é dizer cartão de perfil, algo assim, e eu vou importá-lo. Está bem? Assim, você pode ver a declaração de entrada diretamente na parte superior. Vou simplesmente derrubar isso para que tenhamos mais espaço. E agora, se você acessar o aplicativo aqui, poderá ver o nome sendo exibido aqui, o que significa que nosso componente está sendo renderizado com sucesso Está bem? Agora, vamos vir aqui. Preciso mostrar o nome de usuário aqui, certo? Então, o que eu posso fazer aqui é dizer constante. Vou criar uma variável. Vou dizer o nome, e vou chamá-lo de Alice Está bem? Então, este é um script Java que estou escrevendo, e vou usar esse JavaScript no JSX dessa forma, e vou dizer OK Agora você vai dizer que vai ver o nome Alice aqui, ok? Então, por uma questão de conveniência, vou mudar isso para H três, algo assim. Está bem? Então você pode ver, o nome é Alice aqui. Está bem? Então tudo bem, então isso está funcionando bem. Agora, digamos que nosso aplicativo se expanda e seja um aplicativo multiusuário Agora, talvez você queira usar esse cartão de perfil para exibir informações de vários usuários, certo? No momento, o que estamos fazendo é exibir ALS codificado aqui. Eu não quero fazer isso. Quero mantê-lo o mais dinâmico possível, e haverá cenários que poderemos obter dados do back-end, poderemos obter dados da entrada do usuário. Podemos obter dados de qualquer lugar, certo? Então, eu deveria ser capaz de ter algum tipo de dinamicidade nesse componente específico, que me permite renderizar esse nome com base no que é passado ou no que está disponível, certo? Então, como podemos fazer isso acontecer? Então é aqui que o conceito de adereços entra em cena, certo? Então, adereços em reação, o que são? Eles são usados para passar dados de um componente para outro. Então imagine isso. O que quero dizer com isso é esse componente, esse é outro componente, certo? Você quer usar o cartão de perfil neste componente aqui, certo? Agora, onde quer que você esteja usando, você teria algum tipo de dado, certo? Por exemplo, eu poderia fazer uma chamada de EPI aqui, digamos, chamada de API aqui, e eu poderia buscar o nome de usuário desse servidor, certo Eu busco buscando o nome de usuário, certo? Agora, na verdade, não estou fazendo isso, mas digamos que eu tenha uma chamada de API em que estou buscando o nome do usuário no servidor usando JavaScript, certo E talvez eu queira usar esse nome e talvez queira exibi-lo com um cartão de perfil, certo? O cartão de perfil é um componente que eu quero usar. Então, como posso passar esse nome que tenho aqui? E exiba-o com cartão de perfil. Não há como fazer isso, certo? Mas com a ajuda de adereços, você pode fazer isso. Então você precisa fazer uso de adereços para habilitar essa funcionalidade, certo? Então, o que está acontecendo aqui é entender que esse aplicativo aqui é um componente principal, que está renderizando esse cartão de perfil infantil Por que o cartão de perfil é infantil? Porque está sendo renderizado no aplicativo. E, portanto, o aplicativo é o componente pai e esse é o componente filho, certo? Portanto, adereços no react são usados para passar dados de um componente para outro, especificamente de um componente pai para um componente filho E com a ajuda de adereços, os adereços ajudam a tornar os componentes mais flexíveis e reutilizáveis No momento, codificamos Alice por aqui. Então, é claro, você só pode usar isso para exibir as informações de Alice Está bem? Mas se eu remover essa coisa codificada aqui e torná-la dinâmica, algo dinâmico aqui , isso me permitiria usar esse cartão de perfil para exibir qualquer tipo de informação do usuário, certo? Deixe-me demonstrar isso. Então eu vou me livrar disso aqui, ok? E vou adicionar um parâmetro aqui. Vou dizer adereços, algo assim, ok? E aqui, vou dizer adereços. Nome do ponto, certo? Agora, de onde vêm esses adereços? Então, no momento, ele não exibirá nada, ok, porque não estamos passando nada. Então, aqui, eu preciso passar. Então eu preciso dizer que o nome é igual a, e eu posso dizer, vamos lá. Ok, então eu posso ver a Alice. Você pode ver Alice, certo? Agora, se eu duplicar este cartão, deixe-me duplicar este cartão aqui. Eu posso ver Joan OK. Você pode ver John sendo renderizado. Então é disso que eu estava falando. Essa é a dinamicidade que os adereços adicionam. OK. Sem isso, se você tiver codificado Alice Ok, imagine isso. Você codificou Alice aqui OK. Então isso não vai funcionar. Está bem? Então, eu não estou programando no momento. Não estou revertendo meu código, ok? Mas se você codificar Alice aqui, você pode imaginar, como se eu duplicasse esse cartão de perfil, eu veria Alice em todos os lugares, eu veria Alice Porque é codificado. Mas agora o que está acontecendo é que estou passando dinamicamente esse elemento aqui ou devo dizer essa propriedade aqui, e isso está sendo usado para exibir as informações Tudo bem. Então, sim, isso é o que são adereços Então, adereços é uma forma abreviada de propriedades, ok? E eles são uma forma de passar dados de um componente para outro no react, ok? E eles são usados para tornar os componentes mais reutilizáveis, passando valores diferentes como entrada para o componente, certo Então, em vez de codificar o nome e todo o outro tipo de informação dentro do componente, você pode passá-los como adereços, ok Mais uma pergunta que eu gostaria de abordar que você pode estar pensando: ok, eu disse, terei as informações do usuário disponíveis neste componente, certo? Porque estou fazendo uma ligação para a EPA, ou posso fazer uma ligação para o banco de dados aqui, certo? Agora, a pergunta que você pode fazer é: em vez de usar adereços, se eu mover a chamada da EPA daqui para aqui? Certo? Essa é uma pergunta muito boa. Mas vou te dizer uma coisa, se você está fazendo isso, você não precisa usar adereços, certo, porque você tem as informações do usuário aqui, você pode buscá-las e exibi-las aqui OK. Mas deixe-me dizer aqui, se você está codificando a chamada de API , o que você está fazendo é definir como esse componente específico está buscando dados Está bem? Talvez você não queira fazer isso porque, dependendo do cenário, você pode buscar as informações em lugares diferentes Então, por exemplo, se aqui você está exibindo as informações do perfil, você está buscando os dados do servidor, digamos Se você estiver usando esse cartão de perfil em algum outro arquivo e quiser exibir as informações do banco de dados. Então, em vez de uma chamada de API, você pode ter uma chamada de banco de dados aqui ou algum tipo de outra chamada aqui. Está bem? Portanto, a busca de dados está completamente dissociada aqui do componente Se você começar a codificar a coleta de dados no componente, ela será restrita ela será Então, aqui compramos o componente de dados como a parte de busca. Está bem? busca de dados está fora do componente, e estamos apenas passando os dados que recuperamos para o Portanto, o componente se concentra apenas em renderizar as informações Espero que isso seja útil e espero que você consiga ter uma ideia disso. Agora, algumas coisas que você precisa ter em mente sobre os adereços é o fluxo dos adereços Portanto, os adereços são passados de um componente pai para um componente filho Eu já discuti o que é o componente principal. O componente principal, no nosso caso, é o aplicativo aqui. Portanto, nesse caso, ele será passado de pai para filho, que significa aplicativo para perfil porque o cartão de perfil está sendo renderizado dentro do aplicativo Então, o cartão de perfil é um componente infantil, certo? Então é assim que o fluxo funcionaria. Então esse é o fluxo de adereços de pai para filho. Outro ponto sobre o qual quero falar é a imutabilidade. Está bem? Portanto, os adereços são apenas para leitura Isso é algo que você precisa se lembrar. Os adereços são somente para leitura, ou seja, componentes secundários. Portanto, quaisquer que sejam os adereços que você esteja transmitindo, os componentes secundários não podem modificar os adereços que recebem Em vez disso, o pai controla os dados e os transmite conforme necessário. Tudo bem? Então, se você tentar modificar adereços aqui, digamos Então, se eu tentar dizer adereços esse nome aqui é igual a test, por exemplo, se eu tentar salvar isso, a saída desaparecerá E se você for até o console aqui, se você rolar para cima, você pode ver, não é possível atribuir a propriedade somente de leitura e você está tentando modificar isso. Isso é o que está tentando dizer. Está bem? Se você se livrar dessa linha, o erro desaparecerá. Se eu salvar isso, você verá a saída está lá e o erro desapareceu. Você pode ver, certo? Então, sim, adereços são imutáveis. Eles são somente para leitura. Eles não podem ser modificados por componentes secundários e dependem do componente pai para passar os dados para eles, certo? Então, espero que isso seja útil e espero que você tenha conseguido acompanhar. 20. Vários adereços?: Então, eu tenho este exemplo em que estamos renderizando o cartão de perfil passando o nome como adereço aqui, e estamos exibindo o nome assim no cartão de perfil, e estamos vendo o nome sendo renderizado aqui Agora, pode parecer que, olhando para este exemplo, estamos passando apenas um adereço aqui Então, o que é uma possibilidade? Está bem? Então, eu gostaria de mostrar e dizer que você também pode passar vários adereços Então eu posso dizer 23 e posso dizer que H é 42, por exemplo. Está bem? Então, aqui estou passando mais um adereço aqui, que eu posso exibir aqui Está bem? Então eu posso dizer H e posso dizer H aqui. OK. Algo parecido com isso. E se eu vier aqui, você pode ver Alice e John, ok, com seus respectivos Hs Ok, então isso é completamente possível, pois você pode passar vários adereços para um componente filho Agora, em nosso exemplo, H que estamos passando aqui está sendo passado como uma string. Haverá um cenário em que talvez você queira passar os dados como número inteiro ou Então, o que você pode fazer nesse caso é dizer um número aqui, vou passar outro parâmetro. Vou dizer que um tinha dois aqui. Está bem? Ou deixe-me passar isso como uma corda, ok? Vou passar por um lugar na corda e outro por aqui desta maneira. OK. Então é assim que você pode passar como um número. OK. Isso não é uma string. OK. E aqui, deixe-me experimentar uma coisa. Posso dizer que a soma constante é igual aos adereços ensinados, num mais um Está bem? E eu vou mostrar os dados aqui. Está bem? Então, aqui, você pode dizer que num é para que eu não precise. Não preciso disso, vou ver a soma aqui. Está bem? Agora, se você vier aqui, você pode ver que num é 21 aqui, que significa que dois mais um, tornou-se 21 porque estava sendo passado como uma string aqui neste caso. Está bem? No segundo exemplo, nós o passamos dessa maneira, e aqui ele está sendo exibido como três, que significa que está sendo passado como um número inteiro, certo? Então, espero que isso esteja fazendo sentido, como você pode trabalhar com dados e passar vários adereços em um único componente Tudo bem? Espero que isso tenha sido útil. 21. Gerenciar valores booleanos e tipos de proposição: Agora vamos falar sobre como você pode usar os Pollans ao trabalhar com Então, aqui em nosso exemplo, temos um cartão de perfil, que estamos exibindo que estou passando para strings e números, Allr? E eu estou exibindo esse número dessa forma com a ajuda de cálculos. Então, vou me livrar dessa tela para o número. Nós não precisamos disso. OK. E eu também vou me livrar de Num aqui. OK. Então, agora vamos falar sobre booleano. Digamos que eu queira passar um adereço booleano, direi que é membro aqui Ok, e eu vou dizer a verdade aqui. OK. E eu vou passar uma coisa parecida aqui também. Opa, eu preciso fechar isso aqui. OK. Vou deixar seu membro, e vou dizer que cai aqui. Algo parecido com isso. OK. Agora, estou passando Boolean aqui, mas isso está sendo passado como uma string OK. Deixe-me mostrar para você. Então, se eu duplicar isso, se eu disser que é membro aqui, me desculpe É membro? OK. Algo como esse início de adereço é um memorando OK. Agora, se você ver aqui, verdadeiro e falso, está sendo impresso como uma string E. OK. Agora, para passá-lo como booleano E aqui, eu preciso, tipo, remover esses colchetes redondos Desculpe, essas vírgulas invertidas e preciso adicionar as Cobras. OK. Isso também é o mesmo para números inteiros. Agora, se eu salvar isso e vir aqui, você verá que não consegue ver os valores booleanos Está bem? Então, qual é o propósito de passar os valores booleanos Portanto, os valores booleanos são usados para a tomada de decisões. Está bem? Então, digamos que você queira mostrar ou mostrar uma mensagem dependendo se o usuário é membro ou não Portanto, você pode usar esse membro booleano is aqui e exibi-lo Ok, deixe-me mostrar isso para você. Então, eu posso dizer status aqui. Status. E se você der uma olhada no status agora, não há nada porque é um valor booleano Então, posso dizer se posso usar o operador ternário, na verdade, aqui Está bem? Então, posso dizer que props é membro Então, se isso for verdade, eu diria membro ativo ou então, diria adivinhação. Algo parecido com isso. Eu salvo isso e você pode ver o membro ativo e o convidado. Então, Alice é membro ativo porque passamos por Alice aqui Você pode ver que Alice era verdadeira. E John não é um membro ativo, então você pode ver um convidado aqui porque falhamos. Ok, se você quiser que isso também seja verdade, você pode passar por verdadeiro assim. Opa. Então, vou selecionar isso, salvar isso e você poderá ver o membro ativo. OK. Por uma palavra, você verá Johns adivinhar OK. Então é assim que você pode usar valores booleanos em adereços Então, adereços, exceto o membro booleano do suporte, tudo bem e isso permite que você gerencie o estado dentro Então, se você quiser adicionar algum tipo de exibição condicional ou algo parecido, você pode usar adereços booleanos exibição condicional ou algo parecido, você pode usar adereços booleanos, certo? E como você passa por isso? Você o passa dentro de um par de passagens curvas e não com vírgulas invertidas como esta e não com vírgulas invertidas como Essa é uma forma de passar uma string para cá. Tudo bem. Então, espero que isso seja útil. 22. Desestruturando adereços: Então, vamos começar a falar sobre a desestruturação de adereços. Então, aqui, eu tenho um exemplo em que eu tenho esse componente de aplicativo, que está usando o cartão de perfil duas vezes, certo? Você pode ver que ele está renderizando o cartão de perfil duas vezes e está passando esses dados aqui, e esses dados estão sendo passados na forma de adereços, e esse componente do cartão de perfil está usando Com a ajuda da notação de pontos. Assim, você pode ver como ele o está usando. Agora, o que quero dizer com notação de pontos é que esses dados que você está passando daqui, nome, H é membro Esses atributos estão sendo passados na forma de objeto aqui. Está bem? Então, os adereços se tornam um objeto, e você pode acessar o que foi passado com a ajuda da notação de pontos, o que significa usar esse ponto aqui Certo, então você pode ver o nome do ponto adereço, o ponto do adereço h e o membro do ponto do adereço Essa forma de acessar as coisas é conhecida como notação de pontos, e podemos usar a notação de pontos aqui porque os adereços aqui são porque os adereços aqui são Está bem? Está em um objeto JavaScript, certo? Agora, em JavaScript, é comum fazer uso da desestruturação, certo? E quando você está usando adereços no react, desestruturação é comumente usada para tornar o código limpo e mais legível. Deixe-me dar um exemplo. Primeiro, vou fazer uma análise do que é desestruturação Então pense dessa forma, ok? Você tem um objeto JavaScript aqui. Está bem? Isso não é reagir. Este é um script Java simples que estou escrevendo aqui. Ok, estou dizendo nome, John. OK. E tem que ser, tem duas coisas nele. Tem nome e cada um. Então, cada um é 30 aqui. Está bem? Agora, uma maneira de extrair os dados desse objeto é uma maneira de descompactar, é você pode dizer nome, pessoa, tenso, nome aqui. Essa é uma maneira. OK. Então, isso é sem desestruturação, ok? E usando notação de pontos, certo? Isso é o que você está usando, ok? Você pode dizer g aqui e dizer a idade da pessoa. Essa é uma maneira de fazer as coisas, certo? Outra forma de fazer as coisas é com a ajuda da estruturação em T, com a desestruturação Como você faria isso? Então você pode dizer const, ok? Você pode dizer o nome, vá aqui. Está bem? E você pode atribuí-la a uma pessoa. Opa. Então, isso descompactaria todos os valores que existem no objeto pessoa e os atribuiria a essas duas variáveis Agora estou recebendo um erro porque isso é redundante, certo O nome e a idade já foram criados, então vou apenas comentar isso, ok, para que não vejamos o erro. Mas você tem a sensação de que isso é uma reestruturação em que você está descompactando uma pessoa em um nome e cada reestruturação em que você está descompactando uma pessoa em um nome e cada uma, certo? E o que é nome e idade? O nome e cada um são atributos que você pode ver aqui dentro do objeto aqui. Então, descompactamos as propriedades que existiam dentro desse objeto Você pode ver que isso foi descompactado. Agora, isso é conhecido como desestruturação. É uma sintaxe melhor em comparação com esta. Está bem? Isso também é possível. Você pode fazer isso, mas isso não é tão legível. É um processo um pouco demorado e complicado, certo? Agora, eu disse que isso está sendo passado como o objeto, ok? E essas são todas as propriedades por aqui. Então, aqui, se você vê que tem adereços, você tem adereços nome do ponto, adereços ponto H. Então, nome, idade e membro não são nada além Portanto, você também pode aplicar o padrão de estruturação de D semelhante aqui. OK. E para fazer isso, o que você faria é se livrar disso aqui. Está bem? Podemos usar a sintaxe semelhante, certo? Você precisa desses colchetes, então vou copiar isso, colar aqui, e aqui eu posso ter o nome H e tenho mais um membro, algo assim Agora, no momento em que faço isso, não preciso acessar todos esses atributos ou todas essas propriedades, nem atributos, todas essas propriedades usando a notação de pontos Então eu posso me livrar do nome do ponto, ponto H, e tot está aqui. OK. Vou salvar isso e isso também pode ser salvo, e você verá que não há alteração na saída. Também não haverá erros. OK. Está tudo bem, certo? Então, isso é o que é a desestruturação de JavaScript, e acredito que você esteja familiarizado com a desestruturação de JavaScript. Mas isso foi só um lembrete. Então, espero que você entenda o que é isso e como isso é usado para a desestruturação de adereços Agora, lembre-se de que a desestruturação em JavaScript é uma maneira conveniente extrair valores de matrizes ou objetos em variáveis, É usado com muita frequência e o termo usado é desestruturação que permite que você descompacte Então, desempacotar é o termo que está sendo usado em todos os lugares, certo? Então, aqui, o que estamos fazendo é realmente desempacotar os adereços, certo Estamos descompactando os adereços em variáveis individuais aqui, ok? E estamos fazendo uso dessas variáveis dentro do componente, certo? Então, aqui, as variáveis estão sendo usadas diretamente, e isso é muito mais legível do que usar a notação tot Então, quando você estiver trabalhando com componentes de reação, esse tipo de sintaxe, você verá muito onde os atributos estão sendo passados dessa forma As propriedades estão sendo passadas dessa maneira, e aqui estão sendo desestruturadas dessa maneira. Portanto, não se confunda. Isso é uma desestruturação normal de objetos com o script Java. Então Javascript, o conceito de JavaScript, está sendo usado aqui, certo? Então, espero que isso seja útil e espero que você tenha conseguido acompanhar. 23. Validando props com PropTypes no React: Vamos começar falando sobre validações de adereços e como elas podem ser usadas para validar as propriedades que você está passando Então eu tenho esse componente aqui, aplicativo, que está usando o cartão de perfil duas vezes, e estamos passando alguns adereços aqui, você pode ver, e esse suporte está sendo desestruturado aqui por nós, e estamos fazendo uso dos dados desestruturados dentro do composto Agora, deixe-me dar um cenário. Aqui estamos passando H e estamos passando H como uma string, certo? Agora, não há nenhum tipo de validação como tal, ok? Não há nenhum tipo de validação que estamos fazendo agora que possa nos ajudar a destacar esse destaque para um desenvolvedor ou para quem está usando esse componente específico de que, ei, g deveria ser um número e não uma string, certo? Então, no momento, não estamos recebendo nenhum tipo de erro. Estamos todos bem, mas haverá cenários em que você projetou um componente e gostaria que quem estivesse trabalhando nesse componente ou usando esse componente em seu arquivo passasse dados de uma determinada maneira, certo Porque normalmente o que acontece é que em uma equipe você está trabalhando em um componente, você está escrevendo um componente, e esse componente está sendo usado por qualquer número de desenvolvedores. Como você comunica isso? Então é aí que a validação de adereços entra em cena. Agora, com a ajuda dos tipos de propriedade, tipo de propriedade é uma ferramenta que pode ser usada para validar as propriedades que estão sendo passadas ou que estão sendo passadas ou que Está bem? Portanto, com a ajuda dos tipos de prop, você pode ajudar a detectar pugs logo no início do desenvolvimento quando os dados estão sendo passados, garantindo que o tipo atual de dados seja passado para o componente E se um componente receber os adereços que não correspondem aos tipos esperados, o react emitirá um aviso no console no modo de desenvolvimento Certo? Então, isso é algo que você deve saber, e vamos ver como você pode adicionar validações. Então, o que eu faria é primeiro usar uma instrução de entrada, então vou dizer entrada, tipos de adereços Está bem? Estou escrevendo isso no cartão de perfil dot Qx, e direi que vou dizer tipos de adereços aqui Ok, então eu estou fazendo essa declaração de entrada no topo. Agora, o que eu faria aqui é escrever a validação que eu preciso ter. Então, para adicionar validação, o que faríamos é aqui, diríamos cartão de perfil. Ok, esse é o nome do componente. Nós diríamos tot, eu diria tipos de adereços ou algo parecido Ok. E então eu vou abrir um par de elogios encaracolados Ok, alinhe isso com um ponto e vírgula. E aqui, vou escrever a validação, o que eu quiser ter. Então eu posso dizer o nome. Para designar o nome, preciso dizer prop types, tot string. Ok. Então esse é um deles. Ok. Eu posso dizer que para cada tipo de adereço, pensei, digamos que é um número Queremos que seja um número, certo, então eu vou dizer número. Ok. E para um membro, Ok, eu vou dizer tipos de adereços, e vou passar o ponto Bool Ok. E eu vou passar em coma. Está bem? Ainda não salvei esse arquivo, mas antes de salvar, quero mostrar que estamos passando uma string agora e não estamos recebendo nenhum tipo de erro, certo? Então, aqui, se você ver em app.j6, estamos passando uma string Não estamos recebendo nenhum erro no console. No momento em que eu salvar isso e se eu vier aqui, você verá esses avisos aqui Tipo de prop falhado, inválida uma idade de prop do tipo string aplicada ao cartão de perfil, número esperado Está bem? Portanto, você recebe esse tipo de aviso no modo de desenvolvimento somente quando está usando a validação de tipos de prop Está bem? Agora, o que acontecerá é se um desenvolvedor estiver usando o componente de cartão de perfil. Digamos que o componente do cartão de perfil seja desenvolvido por você e eu como desenvolvedor, sou seu colega de equipe, estou usando esse cartão de perfil e, por acaso, passei H S 23. Que é uma corda. Ele simplesmente começaria a enviar avisos para o console e para o desenvolvedor, eu sou o desenvolvedor. Nesse caso, eu saberia que, ei, eu não deveria passá-la como uma string, mas sim como um número Está bem? Agora, eu posso mudar isso para o número também aqui, e o aviso desaparecerá. Então eu posso dizer 23. Se eu salvar isso, ainda recebo um erro, ok, porque eu mudei apenas em um lugar, certo? Então, eu preciso fazer uma mudança aqui também. Apenas salve-o. Ok. E agora, você verá que não há nenhum erro como tal. Está bem? Então, está tudo resolvido. Agora, mais uma coisa que eu quero falar é se eu não passar como membro, vamos ver o que acontece, ok? Então, se eu pular um membro, você verá que não há nenhum problema como tal, certo? Então você pode ver, não há problema, certo? Estou recebendo algum tipo de erro que eu deveria passar para o membro? Não, certo? Portanto, você também pode adicionar validação para isso. Então, se algum tipo de adereço for obrigatório, ok? Você pode adicionar qualquer tipo de validação ou adicionar esse tipo de validação. Solicitando que o usuário passe o valor dessa propriedade específica. Está bem? Então aqui, Boll, eu posso dizer tot, e aqui eu posso dizer que é obrigatório. Você pode ver. Se eu salvar isso, se eu vier até aqui, você verá que o adereço do membro está marcado como obrigatório no cartão do perfil, mas seu valor é indefinido, certo Então, antes de passar, eu não estava passando esse adereço e não estava recebendo nenhum tipo de erro, mas agora tenho que passar isso compulsoriamente. Ok, é Não há como escapar. E se eu salvar isso e fizer uma atualização, você verá o erro desaparecer. Tudo bem Então, espero que esteja claro como a validação dos adereços funciona Agora, lembre-se, isso será mostrado. Esses serão os erros que você está vendo serão mostrados no modo de desenvolvimento e serão mostrados como avisos, ok, no console do navegador, o que ajudará os desenvolvedores a corrigir o problema e resolvê-lo, Então é para isso que servem os tipos de adereços, ok? Então isso significa que você quer uma string. Isso significa que você quer um número. Isso significa que você quer um booleano, assim como é obrigatório, ok? Ele e o nome são opcionais, mas o membro é obrigatório, ok? Você pode fazer com que T também seja obrigatório aqui, passando isso aqui. Se você adicionar é obrigatório , significa que H também é obrigatório e não é opcional. Tudo bem Portanto, dependendo da sua necessidade, você pode adicionar esse tipo de validação e fazer as coisas Tudo bem? Espero que você tenha conseguido acompanhar e espero que tenha sido útil. 24. Usando adereços com arrays: Então, vamos começar a falar sobre como você pode usar matrizes como adereços aqui Portanto, temos esse aplicativo componente, que usa o cartão de perfil duas vezes aqui. E eu tenho esse cartão de perfil, que está reestruturando os adereços que estou recebendo Estou exibindo os adereços e tenho alguma validação para os adereços aqui Está bem? Agora, o que vou fazer é dizer que eu queira mostrar os hobbies aqui, e os hobbies podem ser múltiplos Então, o que eu gostaria de fazer é ter hobbies armazenados na forma de matrizes aqui Digamos que eu tenha hobbies, então eu posso dizer com um hobby Ok. Eu posso dizer hobby um, e eu posso ter E desse tipo. Ok, algo assim, e eu vou dizer ler, e eu vou ter apenas dois hobbies para cozinhar agora Ok. Vou passar isso. Ok. E o que eu posso fazer aqui é adicionar um adereço aqui, hobbies, e eu posso transmitir Eu posso dizer hobby. Um. Tudo bem, então isso está sendo aprovado agora, e o que eu preciso fazer é usá-lo aqui. Está bem? Então, eu posso dizer hobby aqui. Ok. E sim, eu entendo o hobby aqui. Ok, hobbies, não será um hobby. Serão hobbies porque você está passando isso por hobbies por aqui Está bem? Então eu tenho hobbies. Agora, o que precisamos fazer é mostrar os hobbies, certo? Então, primeiro de tudo, eu vou vir aqui. Vou dizer três ou três anos, hobbies. Ok. E aqui, o que vou fazer é dizer que vou adicionar uma lista não ordenada, L, e então aqui, vou escrever um roteiro de Ja Eu vou dizer mapa de hobbies. Então, vou usar o método map aqui. Ok, mapa de pontos de hobbies, e eu vou dizer hobby Eu vou ter dois parâmetros aqui, ok. Então, caso você não saiba o que estou fazendo, estou usando o mapa aqui e estou usando o mapa para iterar essencialmente sobre cada elemento na matriz de iterar essencialmente hobbies Então, hobbies são uma variedade aqui que eu recebi. Ok, estou passando isso como uma matriz. Você pode ver aqui, certo? É uma matriz. Está bem? Agora eu preciso iterá-lo e exibi-lo para o usuário Então, matrizes em JavaScript. Então, isso é JavaScript e matrizes em JavaScript têm esse método incrível chamado map, que você pode usar, certo? Então, eu estou fazendo uso do mapa de pontos de hobbies. Agora, o que o mapa faz é anunciar cada elemento na matriz de hobbies ou em qualquer matriz com a qual você o esteja usando Então, neste momento, a matriz em questão são hobbies. Estou dizendo que ele avalia cada elemento na matriz de hobbies, e o que você faz é, para cada elemento na matriz, executar essa função de seta Então eu tenho essa função de seta que você vê, então vou cortar isso. Ok, isso é um mapa. Ok. Agora, dentro disso, estou colando essa função de seta. Você pode ver? Ok. Essa é a função de seta que estou usando, e essa função de seta é o que será aplicada ou executada e retornará em um novo valor. Está bem? Então, isso está considerando dois parâmetros, essa função de seta, hobby e índice. Agora, hobby é o elemento individual ou atual na matriz de hobbies durante cada iteração Portanto, ele representa o elemento atual durante cada iteração. Por exemplo, se nossa lista de hobbies for ler e cozinhar, primeiro, o hobby será ler e depois será cozinhar. E o índice correspondente será passado aqui. Está bem? Então, o que eu faria é devolver algo aqui. Então, tudo o que você está adicionando aqui é retornado. Então, vou criar um elemento LI aqui. Ok. E eu vou dizer que a chave é igual a, vou adicionar o índice aqui e hobby será adicionado aqui, algo assim. Assim. Está bem? Então, o que fizemos foi adicionar essa função aqui, e essa função basicamente é executada para cada elemento na matriz. Está bem? Ele tem dois parâmetros. Um é o elemento atual na matriz de hobbies durante cada iteração Isso é chamado de hobby. E então temos o índice. Este é o índice do elemento atual na matriz, ok? E o que acontece é que, depois essa função é executada, um valor é retornado, e o valor retornado nesse caso é esse markdown, ok, ou esse código JSX que estamos retornando Agora isso está acontecendo, o que isso está fazendo é que é LI, ok? Portanto, é uma lista que está sendo construída. Ele representa um único item da lista. Ok. E eu tenho essa chave aqui. Ok. Agora, a chave prop está sendo adicionada aqui com o valor do índice Então, para o primeiro elemento, a chave será uma. Para o segundo elemento, a chave será duas. Desculpe, para o primeiro elemento, a chave será zero. Está bem? E para o segundo elemento, chave será uma e assim por diante, porque os índices começam com zero, é claro, certo? Agora, por que adicionamos essa chave aqui? Está bem? Então, adicionar essa chave é uma das melhores práticas sempre que você estiver trabalhando com listas no react, certo? Ou sempre que você estiver renderizando matrizes no react. Então, isso é muito importante porque o uso da chave aqui está sendo feito para gerenciar com eficiência a renderização da lista, ok? E essa chave ajuda a reagir, acompanhar cada item da lista e atualizar apenas aqueles que mudam e que precisam das alterações quando a lista é alterada. Então, se houver alguma alteração na lista ou na matriz aqui, ok, com base nesse valor de chave, ele fará uma atualização dinâmica, ok, porque ele precisa realizar uma atualização, certo? Se houver alguma alteração no valor, ele não será recarregado instantaneamente Portanto, com base no valor da chave, dependendo de como essa chave está sendo atribuída e renderizada na interface, o hot reload será feito Então, basicamente, do ponto de vista da otimização, react precisa dessa chave, e é importante incluí-la sempre que você estiver renderizando uma matriz ou uma lista, devo dizer Ok, então isso é o que fizemos. E se você vier aqui, ok, não estamos vendo nenhum tipo de saída. Por quê? Por que isso? Ok. Então, ok, estou recebendo um erro aqui 11, ok? E não é possível ler as propriedades de indefinido. Tudo bem É porque estou repassando isso para provavelmente apenas 11 componentes e não para o outro. Então, se eu salvar isso, devo ver a saída aqui Você pode ver a saída que estou vendo. Ok. Agora eu não estou vendo hobbies sendo mostrados aqui. Os hobbies não estão sendo mostrados. Ok, hobbies não estão sendo renderizados, na verdade, ok? Então, vamos ver por que o hobby não está sendo renderizado. Então eu acho que tenho o problema aqui. Estamos apenas criando este LI, mas não o estamos devolvendo Então, certo? Precisamos adicionar uma declaração de devolução aqui. Ok. E no momento em que adicionarmos a declaração de devolução, deixe-me salvá-la aqui. Também vou fechar isso com um ponto e vírgula, ok, e vou salvá-lo E se você vier aqui, verá leitura e a culinária sendo mostradas. Ok. Ignore a interface. Tudo bem. Não está muito bonito, mas espero poder comunicar os conceitos que estamos aprendendo, certo? Então aqui você pode ver Hobby, Hobby one sendo aprovado. Ok. O que você pode fazer é cortar isso diretamente em vez de usar uma variável. Vou me livrar disso aqui. Ok. E aqui, o que eu posso fazer é simplesmente colar o hobby. Está bem? Então, aqui eu posso ler e fazer caminhadas. Ok, e nadando. Então, primeiro um lê, cozinha, outro nada e faz caminhadas. E se você ver aqui, lendo , cozinhando, nadando e caminhando. Está bem? Portanto, está sendo exibido corretamente. Isso é absolutamente ótimo aqui. Está bem? Agora, aqui, o que estamos fazendo é passar a matriz da string aqui, certo? A matriz da string está sendo passada. Agora você pode adicionar algum tipo de validação aqui, se desejar. Então, aqui, vou falar sobre os tipos de adereços. E eu posso adicionar validação. Digamos que eu queira ter hobbies apenas como matriz de cordas Não quero que nenhum outro tipo entre em hobbies. Está bem? Então, o que eu posso fazer é dizer hobbies aqui. Está bem? Colin, vou dizer tipos de adereços, algo assim Uma variedade de aqui. E aqui, eu posso dizer tipos de adereços ponto, eu posso dizer string, algo assim Portanto, essa é uma sintaxe que você precisa seguir. Ok. Estamos vendo uma matriz de tipos de adereços e estamos vendo que deveria ser string, certo? E isso garante que o hobby seja sempre uma variedade de cordas. Então, se eu salvar isso e vir aqui, ok, se eu estiver fresco, você verá que não há erros desse tipo, ok? Mas se eu mudar isso para o número, e se eu vier aqui, você poderá ver um tipo de prop inválido fornecido por um tipo de Você verá a renderização acontecendo aqui. Nada está impedindo a renderização, mas um aviso é emitido, ok? Esse é o benefício da validação que estamos fazendo. Tudo bem? Então, sim, espero que isso seja útil e espero que você tenha conseguido acompanhar como usar matrizes com adereços no react 25. Configurando callbacks: Agora é hora de começarmos a falar sobre retornos de chamada. Agora, o que são retornos de chamada? Os retornos de chamada são funções passadas como argumentos para outras funções e executadas após a conclusão de uma tarefa específica Agora, essa tarefa específica pode ser algo como uma espécie de operação de renderização ou uma espécie de operação assíncrona chamada de API ou algo parecido Está bem? Então, mostrarei como podemos usar retornos de chamada neste exemplo Então, aqui, o que eu fiz foi ter esse componente de aplicativo que você está vendo aqui. Está bem? Este é todo o componente do aplicativo, que está usando o cartão de perfil aqui. Está bem? E o cartão de perfil é o componente aqui, ok? Ele está renderizando alguns dados, alguns adereços que está obtendo do componente pai E eu adicionei um pouco de CSS apenas para embelezar essa interface aqui Então você verá uma interface um pouco bonita, uma interface decente. Ok, apresentável. Não vou dizer que é muito bom, mas é apresentável, é o que eu diria. Tudo bem E se você vier aqui, este é o CSS que eu adicionei para o mesmo. Está lá no arquivo CSS do ponto do aplicativo. Está bem? É um CSS muito simples, bem direto. E eu também concluí o trabalho adicionando algumas classes, como o App contains aqui e o cartão de perfil aqui. Certo. Agora, voltando ao tópico dos retornos de chamada, ok? Então, digamos que eu queira adicionar um ouvinte de um clique sobre hobbies, e esse ouvinte de um clique trará um alerta, ok E eu quero saber qual hobby foi clicado. Eu quero mostrar isso para o usuário. Está bem? Portanto, a funcionalidade é simples. Ok, poderia ser mais complexo, mas vou me limitar à funcionalidade simples. Tudo bem Agora, o que eu faria é ter uma função definida, certo, primeiro de tudo, dentro do aplicativo, eu diria, vamos ter uma função. Então aqui você pode dizer, const handle, Hobby, clique aqui Ok. E eu vou ter um parâmetro. Ok, por aqui. Vou usar a função de seta e vou dizer alerta. Ok, algo parecido com isso. E aqui, eu vou dizer que você clicou em Eu vou dizer um hobby mais alto Hobby, algo assim. Está bem? Então essa é uma função que eu criei, e eu quero que essa função seja acionada sempre que um hobby for clicado Está bem? Além disso, vou apenas alinhar isso Então, isso se tornou bastante longo, eu diria. Ok. Está saindo da tela, então vou alinhar esse animal de estimação de uma maneira melhor Está bem? Então você pode ver isso aqui. Ok. Vou colocar o nome aqui. Cada um é um hobby para os membros. Ok, então isso agora está legível e não está saindo da tela agora Tudo bem Então, agora o que eu preciso fazer é o que eu posso fazer, eu posso passar essa função específica como um retorno de chamada para esse componente específico Está bem? Como com a ajuda de adereços Tudo bem Então eu posso vir aqui, ok, pressionar Enter e dizer em Hobby, clique, esse é o nome do adereço. Eu posso ter essa sintaxe de JavaScript, e posso dizer handle hobby click, algo assim Ok. E eu posso passar por isso também. Aqui, algo parecido com isso. Está bem? Então, sim, eu passei os dois para os componentes que estou renderizando, as duas placas de perfil, estou passando isso como um suporte Agora, aqui no cartão de perfil, o que eu preciso fazer é entrar no Hobbie, clicar aqui Ok, algo parecido com isso. Está bem? Agora, o que eu vou fazer aqui é eu preciso adicionar um ouvinte no elemento LI quando estamos renderizando o elemento LI, certo Então, o que eu posso fazer aqui é depois de uma chave como essa, eu posso dizer ao clicar aqui, e eu posso ter igual a. Ok. E eu vou adicionar isso e vou adicionar a função de seta, e eu vou dizer que no hobby clique aqui, e eu vou passar o hobby que eu tenho, ok? Então, espero que isso esteja fazendo sentido. Está bem? Então, o que estamos fazendo é adicionar um L ao clicar aqui. Temos acesso ao hobby. Então, com a ajuda desse mapa, ele está iterando sobre a matriz Hobbie, certo E para cada iteração, essas duas coisas têm o hobby atual e o índice Então, estou deixando esse hobby aqui. Ok, sempre que o evento de clique estiver sendo acionado, e eu estiver ligando para o Hobbie, clique O que está no Hobbie Click? chegando como suporte por aqui. E o que está chegando como adereço aqui? Essa coisa está chegando. Essa função. Ok. E o que vai acontecer é essa coisa que estamos passando como parâmetro aqui. Ok. Deixe-me levar isso também para a nova linha, algo assim. Ok. Então, essa coisa que você está recebendo essa coisa que você está passando como parâmetro, hobby, será passada aqui. Ok, vá até esta função, e esse alerta será acionado. Está bem? Vamos ver isso em ação. Vou salvar esse código. Eu virei até aqui. Opa. Então você vê nadando com um clique caminhando com um clique. Há algum problema na renderização. Então, aqui, se você ver um hobby, clique. Opa. Cometemos um erro, então vou cortar isso. Ok. Vou cortar isso. Ok. E, uh, então eu acidentalmente adicionei isso em um lugar errado Ok, então deveria estar aqui. Está bem? Sim, algo parecido com isso. Agora, deixe-me abordar isso em uma nova linha. Deveria estar depois da chave e, seguida, essa tag de fechamento aqui para HTML, e então estamos renderizando a IA como eu espero que isso esteja fazendo sentido agora, ok? Então, como funcionou, a tag LI tem dois atributos. Uma é a chave, outra está no clique, você pode ver. E então estamos fechando essa tag aqui. Estamos entrando no hobby e fechando a etiqueta LI. Ok. Espero que isso esteja fazendo sentido. E se você vier aqui, eu farei isso do zero. Você clicou em Cooking, ok? Você clicou em caminhar. Você clicou em nadar. Você clicou em ler. Então você pode ver como o callback está em ação, ok? Agora, isso pode fazer com que aqui passemos para um componente. Passamos isso como um suporte para o componente. Está bem? Você pode passar isso para qualquer retorno de chamada que normalmente é usado para ser acionado Eles devem ser acionados quando a operação assíncrona ou qualquer tipo de renderização Está bem? Então, nesse tipo de cenário, você pode usar o retorno de chamada Então, digamos que você tenha uma chamada de API, o que você pode fazer é passar essa função como um retorno de chamada E quando a chamada da API for concluída, dependendo de uma determinada operação ou de um determinado evento, você poderá acionar o retorno de chamada, como estamos acionando aqui Certo? Portanto, essa é a função definida no componente pai sendo acionada a partir de um elemento no componente filho com a ajuda de um clique de Lissner Tudo bem Então, espero que isso tenha ficado claro e espero que você consiga acompanhar isso. 26. Acessórios e a sintaxe de Spread: Vamos falar sobre como você pode usar o operador spread ao trabalhar com react e passar adereços aqui Está bem? Agora, operador de propagação é um conceito de JavaScript, ok? E veremos como podemos aplicá-la aqui. Agora o que está acontecendo aqui é que eu tenho esse componente do aplicativo, ok, que tem essa função criada, ok, essa função, manipular hobby clique dentro do componente do aplicativo, e eu estou passando esse identificador hobby clique junto com alguns outros adereços aqui para o cartão de perfil, e eu estou renderizando o cartão de perfil aqui, E o cartão de perfil é um cartão muito simples que renderiza essas informações na interface do usuário Tudo bem? Também tem algumas validações. Então, o que vou fazer é passar adereços do cartão de perfil com a ajuda do operador de propagação, certo? E o que vou fazer primeiro é criar um objeto com todos esses valores. Agora, esses adereços estão sendo passados para o cartão de perfil, e esses são adereços de diferentes usos, certo Então, essas são propriedades que representam Alice e John, certo? Então, o que podemos fazer é converter esses adereços em objetos aqui. Está bem? Então, o que eu faria é aqui, eu diria const, eu diria perfil de Ale Ok, eu vou dizer o perfil de Alice aqui, e eu os adicionaria como objetos aqui Oh, desculpe, mas propriedades. OK. Então, aqui, eu estou construindo um objeto, ok, eu não preciso dessa cinta encaracolada. OK. E aqui, então eu vou ter, uh, esse membro, ok, algo assim. Eu não preciso de True, algo assim. Eu terei hobbies. E quando você se livra desses aparelhos ondulados, isso era necessário no GSX, mas não aqui, ok? Eu vou ter vírgula E, uh, vou adicionar isso. OK. E sim, eu ainda estou recebendo erros, eu sei. E a razão para isso é que deveriam ser pares de valores-chave e não iguais a, ok? Então, eu vou Opa. Eu vou Opa. Estou bagunçando o teclado. OK. Então, vou copiar isso. OK. Vou apenas copiar isso e colar. Opa. Então, sim, algo assim. OK. E sim. Então é assim que o perfil de Alice se parece. Está bem? Então, estamos passando os dados para a Alice aqui Está bem? Precisamos fazer o mesmo John também. Então eu vou cortar isso. Ok, corte isso aqui. Eu virei até aqui. OK. Isso está feito. Vou dizer const, John, perfil OK. E aqui, vamos comer isso. OK. Em primeiro lugar, vou colocar isso aqui com uma vírgula. OK. E precisamos formatar isso um pouco, ok? Então, 42, eu não preciso de um colete encaracolado. Esses eram necessários para sexo mastigável. E vou adicionar cólon. Ok, coma. E aqui, novamente, vou adicionar cólon e esses coletes encaracolados não são necessários Vou adicionar coma e isso será cólon. Os colchetes encaracolados não são necessários, e então eu vou alinhar isso Isso está feito. Tudo bem. Temos o perfil do John e o perfil da Alice. Agora o que podemos fazer é vir aqui, no cartão de perfil. Ok, precisamos passá-los como adereços, esses objetos como adereços O que eu posso fazer é adicionar uma base encaracolada. Posso dizer três pontos e posso dizer o perfil da Alice aqui E aqui, eu posso ver três pontos e eu posso ver o perfil de John. Eu posso ver se isso. Agora, se você der uma olhada na saída, ela não mudou. Não há alteração na saída, nenhum erro como tal, ok? Tudo é o mesmo. Só que melhoramos um pouco as coisas , criando primeiro perfis para cada membro, tudo o que queremos transmitir, e estamos transmitindo isso usando o operador de propagação para esse componente específico. Portanto, o operador de spread é usado para passar todos os principais pagadores de valor do objeto como adereços para o componente do cartão de perfil Dessa forma, em vez de listar cada prop manualmente, você espalha o objeto e o componente recebe o valor correspondente como props Tudo bem. Deslize os benefícios em relação à abordagem mais antiga. Muitas pessoas também prefeririam a abordagem mais antiga, mas alguns benefícios aqui são um código mais limpo. Você está reduzindo a reputação e, basicamente, você tem objetos criados agora, com base nos dados que deseja transmitir. Agora, esse objeto que estamos construindo em tempo real, certo? Estamos construindo, codificando todos os valores. Haverá cenários em que você obterá esse objeto diretamente da API. Ok, você obtém alguns dados do EPI, converte nesses tipos de objetos e os passa dessa forma para os Desculpe, para o componente na forma de adereços. OK. Portanto, não se confunda com esse tipo de sintaxe É a mesma coisa, certo? Ele faz o mesmo trabalho. São apenas as diferentes maneiras de fazer as coisas. Está bem? Isso é muito útil se você estiver recebendo alguns dados de uma chamada EPI ou de uma chamada de banco e os tiver na forma de objetos, ok? Então, em vez de construir os adereços inteiros manualmente aqui, basta usar o operador spread e passá-lo porque você já o está obtendo na forma de objetos Certo? Então, espero que isso seja útil e espero que você tenha conseguido acompanhar. 27. Conclusão do curso: E isso nos leva ao fim dessa empolgante jornada no mundo dos fundamentos do react Juntos, exploramos os principais conceitos do react, desde a criação de seu primeiro projeto, domínio da cadeira sX, componentes, adereços Ao longo do caminho, desenvolvemos habilidades práticas e até concluímos um projeto para solidificar seu aprendizado. Mas lembre-se, isso é só o começo. O React é uma ferramenta poderosa e muito versátil, com infinitas possibilidades para criar aplicativos web dinâmicos , como você entendeu até agora. Eu o encorajo a continuar experimentando, explorando tópicos avançados e aplicando o que aprendeu em seus próprios projetos Estou entusiasmado em ver como você usa o react para criar aplicativos incríveis para seu portfólio Seja um projeto pessoal, uma tarefa profissional ou qualquer outra coisa, sinta-se à vontade para usar o react, e ele servirá como base para criar um grande aplicativo As habilidades que você adquiriu aqui servirão como um trampolim para avançar em sua carreira Obrigado por ser um grupo de alunos tão engajado e motivado Espero que este curso não tenha apenas ensinado novas habilidades, mas também tenha incentivado você a pensar de uma perspectiva e dimensão completamente diferentes sobre o desenvolvimento web. Além disso, não se esqueça de conferir a seção de projetos deste curso onde temos um projeto que você pode concluir e compartilhar com toda a turma. Obrigado por se juntar a nós nessa jornada. Boa programação, tudo de bom.