Guia definitivo para site de portfólio responsivo no React Js

1. Introdução ao curso: Oi, Bem-vindo e muito obrigado pelo seu interesse no meu curso. Neste curso, vou te ensinar como construir um site de portfólio responsivo usando diferentes tecnologias, como React, js são USGS, Bootstrap, load JS, express JS e minima. E no final deste curso, você poderá implantar o site no servidor, o que implica que seu site de portfólio estará acessível na Internet. Parece bom, certo? Linda. duas primeiras imagens. 2. Demonstração do projeto: Na tela está de repente o aplicativo que vamos para Butte neste curso. E eu quero começar revelando um dos futuros impotentes desta aplicação que você não pode desprezar. E esse futuro é a funcionalidade de email. Então, quando eu bati no abortamento do alto exército, ele vai suavizar o parafuso para reentrar em contato comigo componente onde seu potencial cliente poderá se comunicar com você e contratá-lo. Então, vamos tentar clicando no abortamento do alto exército. Você vê como é um pergaminho suave, eu adoro. Então, aqui, vamos continuar clicando em descer comprado para verificar se a empresa está bem validada. Dê uma olhada no canto superior direito da tela. Você verá a mensagem de brinde e ela diz, por favor, sinta ou os campos com os campos de nome para e-mail. Então, antes de clicar no botão Enviar, tenho que mostrar minha caixa de entrada para maior clareza. Aqui está isso? certeza não há nova mensagem na minha caixa de entrada. Você pode vê-la no site? Vamos tentar clicando no mesmo embarque. Dê uma olhada. Você pode ver isso diz, obrigado por entrar em contato com uma hélice. Deixe-me levá-lo para a caixa de entrada. E aqui está isso. Clique para abrir. Aqui está o nome do remetente. Envie-nos um e-mail, e aqui está a frase da mensagem. Este é um dos futuros mais importantes do site do portfólio. Não se preocupe, vou te ensinar como implementar essa funcionalidade do zero. Ela no site. Está certo, Então agora vamos clicar no call to action comprado para Smooth Scroll para os componentes da casa. Vamos conferir a região do portão comprada na roleta. Clique na placa Obter erosão em. Ele vai baixar meu currículo. E vou clicar para abrir. Então aqui está meu currículo. Veja, aqui temos os ícones das mídias sociais. E quando você clica em qualquer um dos ícones, ele o levará até a página correspondente. E logo abaixo dos ícones, temos o nome e o belo efeito de tipo com emojis diferentes. E agora meu Hoover e a foto do perfil, ele vai diminuir o zoom para melhorar a visibilidade. Agora eu pairo e depois tiro-o. Espero que eu novamente, eu tirei. Vamos passar rapidamente para o componente Sobre mim. E então, quando eu clico no Sobre mim, ele vai suavizar a rolagem para o outro componente. Aqui está o Sobre Mim, um componente onde você chamaria suas possíveis reivindicações sobre você mesmo. E abaixo estão os componentes do currículo. Esse componente é muito importante simplesmente porque é aqui que você compartilhará sua experiência com seus clientes em potencial. Você precisa mostrar seu histórico de trabalho, sua habilidade de programação, projetos e interesse. Então, na árvore da lista de espera, você precisa exibir há quanto tempo você está no setor e a empresa em que você está trabalhando atualmente. Para a habilidade de programação. Você precisa mostrar suas habilidades com base em sua habilidade. E tudo aqui é bem personalizado. Mas projetos, isso inclui os vários projetos que você de qual tom você vai mostrar, a início e a data de término. Então, aqui, site de portfólio pessoal, nem por um site de comércio eletrônico de loja. E aqui, temos o interesse, o que implica seu hobby. E aqui em baixo temos o componente depoimento. E teremos o depoimento rolando da borda direita da tela para a esquerda para fora da tela. E isso é o que seu cliente diz sobre você. Por fim, temos o componente entre em contato comigo, e é aqui que seus clientes em potencial poderão entrar em contato com você enviando e-mails. Essa funcionalidade é realmente fantástica. Tudo bem, então deixe-me mostrar o Fed em animação. E quando você rolar o site agora mesmo, e quando eu rolar para baixo, você perceberá que os componentes alimentarão DUC, certo? Então, deixe-me recarregar. Dê uma olhada. Mais uma vez. Quando eu rolar para baixo, o componente original desaparecerá. Você vê o componente depoimento? E o componente? Ok, então vamos tirar mais capacidade de resposta. Vamos tirá-lo no iPhone cinco. Por 678. Com eles, posso garantir que o site é 100% responsivo em nossas plataformas. Então, se você quiser verificar este site de portfólio, no final, aqui está o endereço. Você pode digitar rapidamente em um SET Engine, ele Ababa dot herokuapp.com. E então este elegante site de portfólio seria exibido em sua tela. E agora, quem sou eu? Meu nome é mais fácil e tenho mais de sete anos de experiência em desenvolvimento de software, não trabalhei em empresas diferentes como desenvolvedor de pilha completa. Então, tenho a experiência necessária para percorrer esse curso. Neste curso, serei seu instrutor. Não se preocupe, vou segurar sua mão no Butte este site de portfólio clássico do zero até o estágio final de implantação. E, no final, você poderia implantar o site em um salva-vidas e também enviar o código-fonte para o GitHub. Dito tudo isso, inscreva-se rapidamente e vamos começar. Vejo você então. 3. Pergunte o que quiser: Fazer perguntas é tão importante simplesmente porque permite que você esteja na direção certa. Então, sempre que você tiver problemas, sempre faça bem em fazer perguntas antes de prosseguir com a próxima palestra. No entanto, eu entendo claramente que você será Busey Lenin neste curso. Mas eu agradeço profundamente se você pudesse passar alguns minutos extras do seu tempo para ler uma folha, uma revisão de arnês sobre este curso. E assim recebo um feedback de você e espero McManus faça com que a Beta esteja certa. Então, sem mais delongas, vamos começar. 4. Crie aplicativos do react: Então, agora vamos começar a criar o aplicativo. E nas primeiras palestras, percebi que a maioria de vocês provavelmente conhece essas guias. Simplesmente porque estou bloqueado com o olhar básico do aplicativo Create React configurado. Então, por favor, tenha cuidado comigo porque eu só quero explicar os fogões para o benefício de pessoas que são novas no React js. E a razão é que eu quero levar todos sozinhos. Tão rapidamente teve o React js.org. E aqui está o endereço. Prossegue para a documentação. Aqui está isso. Você só precisa clicar em cães? Tudo bem, então aqui em Create a New react up. Aqui está no canto superior direito da tela? Clique em. Então, a primeira coisa que vamos fazer aqui é basicamente gerar uma placa de base de um aplicativo React, que inclui as bibliotecas, os arquivos iniciais e pastas para executar um aplicativo de boilerplate React simples. Na tela está a documentação do React. E, claro, passar por isso nesta palestra não é relevante para o propósito deste curso, certo? Então, se você é um novato, recomendo que leia a documentação para ter um conhecimento sobre o que é um React js. Role rapidamente para baixo, a menos que continuum. Aqui, o comando MAX que seria usado para simplesmente executar o aplicativo Create, React sem ter que instalá-lo em nossa cauda CCE. Tudo bem, então vamos começar. Volte para sua área de trabalho. E aqui, vamos criar um diretório raiz chamado portfolio Pro. Clique com o botão direito aqui em novos alimentos. Portfólio pro. Frase técnica. Ao nomear seu projeto, use sempre um nome descritivo que informe a finalidade do projeto. Então você poderá reconhecê-lo no futuro. Ok, então o próximo na linha é abrir este diretório com o editor de código e o editor de código perfeito que vou usar neste curso, leasing. Então, código VS. Sinta-se à vontade para usar qualquer editor de código de sua escolha. Mas para mim, porém, VS Code é o meu favorito. E quando você olhar para o canto superior esquerdo da tela, você verá esse diretório de um portfólio de cabelo Pro. Mas para alguns de vocês, você pode não vê-lo lá. Então, tudo o que você precisa fazer é arrastar e soltar o diretório do portfólio no VS Code. Então você só precisa arrastar e depois soltar. Então, quando você fizer isso, você definitivamente o verá aqui. Agora. Maximize o VS Code e, em seguida, feche isso. Abra o terminal integrado VS Code. E no Mac, você pode encontrá-lo aqui no menu superior. E, em seguida, novo seminário. Bem no terminal. Vamos escrever o comando para instalar o React js. E eu vou fazer MDX, criar traço, reagir traço. Não instalaremos o aplicativo React em um pacote separado. E vou nomear o cliente do pacote. Você pode decidir alterar o nome do pacote no final. Mas eu recomendo que você fique o cliente da convenção simplesmente porque o React js tem a ver com o front-end, que implica a parte da interface do usuário do aplicativo. Tudo bem, então destilação reativa está em andamento. E isso definitivamente, eu só tenho que avançar para a palestra. React js instalado com sucesso. Para prosseguir, temos que seguir esta instrução. Ok, então primeiro temos que fazer cd para o diretório do cliente onde instalamos o React js e, em seguida, apertar a tecla Enter no seu ninho de teclado. Temos que iniciar o servidor de desenvolvimento front-end. Então vamos fazer MPM, comece. Pressione a tecla Enter no teclado para atirar. Na tela está a página de Londres. E, por padrão, o servidor está sendo executado na porta localhost 3000. Aqui está isso. Ok. E agora terminamos a instalação. Na próxima palestra, começaremos a revelar a placa React. Isso é tudo por enquanto, para esta palestra. Vejo você na próxima palestra. Mantenha-se focado e tome cuidado. 5. Placa de React do reato: Nesta palestra, vamos revelar a placa React. Abra rapidamente o diretório do cliente. Vamos prosseguir com o arquivo package.json. É aqui que todas as dependências que dizem respeito ao front-end se sentarão. E aqui temos o React 17.2 armazenado e o ninho é, eles reagirão, mas o React DOM é usado para trabalhar com o módulo de objeto de documento nas sobrancelhas. E aqui temos os scripts do React e os vetos da web. Para baixo. Aqui estão os scripts estão OK. E aqui está o início que executamos na palestra anterior para dar o pontapé inicial no servidor. Aqui em baixo está o BWT. Então, quando executarmos o npm BWT, ele irá construir os ativos estáticos para implantação. Tudo bem, então no futuro, quando quisermos implantar este aplicativo no servidor, faremos uso do abuso. E aqui temos o teste e o Egito. Na verdade, a ejeção é necessária quando você ejetar do aplicativo Create, React e personalizará sua web part. Procedeu rapidamente para o index.html, depois vá para o público e o neblina. Role para baixo. Então, antes de prosseguirmos, temos que entender o que reage GS é tudo. React JS é uma biblioteca JavaScript usada para calcular um aplicativo de página única. E aqui temos uma div com o id da raiz. Rapidamente, deixe-me mostrar o que acontece na comida do papai. Prossegue para a fonte, que é o SRC. Abra o index.js. E no topo temos o React importado do módulo React. E também o módulo React DOM do React DOM. E o React DOM tem um método chamado render. E esse método aleatório assume o componente principal. Aqui está isso. E o componente Min up é importado na parte superior. É isso aqui mesmo. Certo. Agora abra o aplicativo js. Só vou defini-lo. Comando T ou Controle T no Windows. Então, temos que definir para AP dot js. Você vê agora que temos algum GSS aqui. Portanto, a diferença entre o CSS e HTML é o atributo do nome da classe. Em HTML, é uma classe, mas aqui no GSS, é o nome da classe porque a classe é uma palavra-chave reservada. Anteriormente, eu disse que o reacts é usado para calcular um aplicativo de página única. A questão é: como isso funciona? Deixe-me mostrar-lhe rapidamente. Agora, tudo aqui no ArcGIS está sendo passado para o ponto de índice js. Deixe-me mostrar-lhe. Você pode ver aqui é o app.js. Quando o app.js é renderizado aqui, ele passará para o index.html através dessa linha de código, Document.getElementById de root. Então, temos que abrir o HTML de ponto de índice. Agora, esta é a div com o id da raiz. Quando for passado para o index.html, ele será renderizado aqui entre essa div com o id de root. Então, em resumo, como seguir para o RGS, que quer que renderizemos no RGS, ok. Seria passado para o index.js vendido quando o objeto for renderizado, se eu ouvi-lo, passará por essa linha de código e, em seguida, passar todo o conteúdo no app.js para baixo para o index.html, certo? Para esta div com a rota id. Então, o index.html é o que é exibido na web. Então, rapidamente, vamos limpar o código. Destaque, limpe-o. E, em seguida, das linhas 18 a 26, limpe-o. Limpe isso. E o portfólio de títulos para cima, estraga até onde temos o conteúdo. E então vamos fazer. Então, agora temos que excluir os arquivos que não precisamos neste curso. Não precisamos disso aqui. Mantenha pressionada a tecla Command no Mac e a tecla de controle no Windows para selecionar. E então não precisamos do ponto do logotipo SVG, o ponto de teste de configuração HGS. Clique com o botão direito do mouse Tudo bem, então Heron para o UP GAS. Aqui está o que falta. Nós o excluímos no SRC e o importamos aqui no UP GAS. Portanto, temos que excluir a importação também. Seguro. Portanto, temos que destacar da tag de cabeça de abertura para a tag de cabeçalho de fechamento. Limpe isso. Salvar. Vá para fazer a praça, a menos que confira. Ela está certa. Então esse é o resultado que estamos esperando desta palestra. Na próxima palestra, começaremos a configurar a estrutura do nosso projeto. Vejo você na próxima palestra. Mantenha-se focado e tome cuidado. 6. Como configurar a estrutura do projeto: Vamos configurar a estrutura do nosso projeto seguindo as melhores práticas. o botão direito do mouse no SRC pressione uma nova pasta. E aqui vamos criar uma pasta chamada contêiner de portfólio. Certo? Neste contêiner de portfólio, vamos criar outro diretório chamado Sobre mim. Clique com o botão Nova pasta. Sobre mim o diretório conterá o sobre mim. É um arquivo CSS e as imagens correspondentes. Essa é uma história muito divertida sobre o componente MY. Então, precisamos de outro. o botão direito no contêiner do portfólio aqui em Nova pasta. E isso seria chamado entre em contato comigo. E é claro que você deve saber que o entre em contato comigo também e nós contêm o componente, seu arquivo CSS e suas imagens relacionadas. o botão direito no contêiner do portfólio novamente Nova pasta. E isso será chamado de lar. Ok, você só tem que seguir minha liderança. Currículo, portfólio, contêiner, Nova Pasta, FUTA. E o ninho é depoimento. Agora terminamos de configurar a estrutura do nosso projeto. Então, na próxima palestra, começaremos a construir essa estrutura. Tome cuidado. 7. Componente 1: Seguindo a estrutura do nosso projeto, vamos começar com o componente doméstico. E como você pode lembrar que na palestra anterior, criamos todos esses diretórios diretamente no contêiner do portfólio. Aqui está na borda esquerda da tela, bem no Explorer. Lindo. Agora, o primeiro que vamos fazer é criar o componente profundo. o botão direito do mouse no diretório inicial aqui no novo arquivo. E isso seria chamado de ponto de perfil js. Frase técnica, quando o componente mnemônico sempre usa a convenção de nomenclatura pascal, o que implica em maiúsculas a primeira letra de cada palavra. Isso soa bem, Beautiful. Agora temos que criar o arquivo CSS correspondente. o botão direito do mouse no diretório inicial novamente. Aqui no Novo arquivo. CSS de ponto profundo. Ela no perfil GAS e odeia. Aqui vamos usar os atalhos para gerar o componente funcional React js. Eu vou ter c, e aqui está isso. Pressione a tecla Enter para selecionar. Para alguns de vocês, talvez você não tenha isso funcionando. Tudo o que você precisa fazer é instalar um plugin muito poderoso chamado snippet de leitores React Native react. Deixe-me mostrar como instalar esse snippet tinha no Explorer. E se eu ouvir, você tem que clicar nas extensões, então você vê aqui no canto inferior esquerdo, clique nas extensões. Tudo bem, dentro do set box, vamos procurar por React, Native e neblina já. Eu o tenho instalado na minha máquina. Então, esse é o motivo pelo qual você está vendo a desinstalação comprada. Quando você vê? Mas, no seu final, se você não o tiver instalado, verá o barco de instalação. Tudo o que você precisa fazer é clicar no botão Instalar e instalá-lo no seu VS Code. E por alguns motivos, se não funcionou para você pela primeira vez, tudo o que você precisa fazer é reiniciar o VS Code. Agora, a menos que o feche. Aqui, vamos dar a esta div um nome de classe de traço profundo contêiner de traço profundo. E certo, nesta div, precisamos de outra div com o nome da classe do perfil pai. Div. Dê ao perfil do tema da classe traço pai. Tão tristemente. Outro, div com o nome da classe, detalhes do traço do perfil. E, por fim, precisamos de outra div com o nome da classe de cornrows. Perfeito. Tudo bem, então vamos esconder o explorador ou vir estar em suas janelas. Agora, o que vamos implementar são os ícones das mídias sociais. Vamos para o projeto de demonstração. Este é o endereço de um Ei, ele vai portfólio dot herokuapp.com. E é isso que queremos implementar no início, o Facebook, instagram, YouTube e Twitter. Código Toronto VS, a menos que faça isso rapidamente. Então, na div com o nome da classe , é claro, vamos ter a tag a. Agora. Nós vamos ter a etiqueta I. Vamos dar a ele um nome de classe de f, um f dash, Facebook dash, square, lambda menor que linha é duplicar esse código quatro vezes. Então, vou destacar do atado 9 a 11. Mantenha pressionada a tecla Shift e Alt e, em seguida, toque na tecla de seta para baixo no teclado quatro vezes. Você pode ver que isso é exatamente o que fazemos para duplicar código no VS Code. E aqui, vamos mudar o nome da classe para FA. Google dash, traço ao quadrado. E agora precisamos do ícone do Instagram. traço F8 é o chão. E precisávamos para o YouTube. E, por último, para o Twitter. Salvar. Agora vamos executar o aplicativo para ver o que temos a bordo tinha no terminal. E então temos que cd cliente, MPM. Comece. Vamos esperar por isso. Certo? Então, se seus ícones não estão aparecendo, você sabe por que ela entra no código VS? E deixe-me mostrar-lhe aqui. Usamos as classes Bootstrap, que é a FA, dash, Facebook, Google Plus Instagram e o resto delas. Então, para usarmos essas classes, temos que vincular o projeto com o Bootstrap. Abra o diretório de materiais. Para mim. O diretório de materiais está localizado na minha área de trabalho. E por que é isso? Então eu só tenho que abrir. Este diretório está bem ali no recurso. Então confira e baixe esse diretório. Ele contém todos os arquivos necessários que vamos usar neste curso. Agora abriu o poderia ajudá-la. Cabelo, não é? E este é o link Bootstrap. Copie heroína para o comando VS Code P para exibir esta pequena caixa de pesquisa na parte superior. E então vamos definir o HTML de ponto de índice . E aqui está isso. Lindo. Cole-o aqui. Ok, então temos que formatar o código para parecer um pouco reivindicada. Clique com o botão Formate documento com prévia. Ok, agora o código parece muito limpo. Gosto disso. E se você não tem pédia sobre o seu VScode, inerentemente Explorer novamente, e deixe-me mostrar como instalá-lo. Explorer e, em seguida, clique em S. Tensão está aqui neste sandbox. Você precisa definir para pré-venda e neblina. Já o instalei. Então, clique no botão Instalar no final para instalá-lo no seu VScode. Feche-o para baixo. Agora temos que renderizar este componente no js P e depois definir para o nosso app.js aqui nesta div. Ok, antes de fazermos isso, só temos que importar o perfil de importação , certo? Eu não importei automaticamente do que me preocupar, vou fazer isso do zero. Então eu só tenho que limpar isso. Importe o perfil do perfil de barra inicial da barra do contêiner do perfil de barra de ponto . E aqui só temos que renderizar o perfil do componente com a tag de fechamento automático. Salve-a no navegador e vamos conferir. Dê uma olhada. Ele aparece aqui no centro da tela. Vamos tentar clicando no ícone do Facebook, instagram, YouTube e Twitter. Os links não estão funcionando. Você sabe por que Heron para VS code e deixe-me mostrar-lhe. Prossiga para o perfil. E aqui, bem no alto potássio ou amigos. Temos que copiar e colar o link de mídia social correspondente lá. Então, para o Facebook, você pode ver que eu só tenho que copiar o URL do meu pit do Facebook. Venha aqui, limpe o sinal de libra, e depois cole. Então, vou fazer isso pelo YouTube. Aqui está meu canal no YouTube. Então, aqui está o ícone do YouTube. Certifique-se de colar o link e os ícones correspondentes. Certo? Então, eu só tenho que fazer isso para o Instagram também. Então você pode continuar fazendo isso no seu final e ter tudo feito. Agora, para o Instagram. Wip desta pasta de libra pasta salva, tinha no navegador. Abra o portfólio, suba, recarregue. Para tentar, vamos clicar nos ícones mais uma vez. Facebook. Você pode ver? Então você só tem que voltar. Vamos experimentá-lo no YouTube. E Tierra, frase certa, tudo está funcionando conforme o esperado. Então, na próxima palestra, prosseguiremos com os detalhes restantes sobre o componente de perfil, incluindo o reator típico. Vejo você na próxima palestra. Mantenha-se focado e tome cuidado. 8. Componente 2: Nesta palestra, vamos implementar esse efeito de tipo. Pode ver. E também implementaremos a breve descrição, os corpos e a foto do perfil. Código Toronto VS. A menos que implemente isso rapidamente. Antes de prosseguirmos, temos que fazer alguma coisa. Dane-se. E deixe-me mostrar-lhe aqui esta div com um nome de classe de detalhes profundos. Você pode ver? Agora eu quero que você destaque ovos comuns ou Control X para cortá-lo. E então venha aqui, cole-o aqui. Então, é exatamente aqui que ele deve fechar. Salve-a no navegador. Na verdade, tudo parece o mesmo. Mas se você não fez essa correção, e quando começarmos a estilizá-la, isso o afetará muito. Então, logo após a div de fechamento de className, perfil, nome do banco de dados, vamos ter outra div, dar a ela um nome de classe de perfil, detalhes, traço, função. E agora vamos ter que implementar o efeito de tipo. Temos que instalar o tipo de meta do React no terminal e, em seguida, ver para parar o servidor em execução atual. Agora vou fazer o npm install. React dash. A instalação está em andamento, então temos que esperar por ela. Instalado com sucesso War. Role até o topo, a menos que importe o pickle. Role para baixo. Agora temos que implementá-lo, certo? Ei, eu prefiro usar a etiqueta de fechamento automático. Então, aqui, vamos tê-lo em loop infinito. As etapas, configure-o como objeto vazio. E então teremos uma variedade de itens, que são os detalhes a serem exibidos com base no tempo. E aqui vamos ter um Dave de plástico completo, separado com uma vírgula. Queremos que seja 1 segundo. Então, a cada segundo, teremos uma tela. Então esse cara apareceria por um segundo. E então, ok, destaque, segure o Shift e Alt e, em seguida, toque na tecla de seta para baixo quatro vezes. Tudo bem, então aqui vamos ter horror para desenvolvedores de pilha completa desenvolvedores de pilha completa, certo? Então o que acontece aqui é isso, esse cara vai exibir por um segundo, e então esse cara vai exibir é silício. Então, é mais como tudo isso na inclinação vai esperar por cada corrente de célula. Então, quando Guy exibir um circuito vai disparar e esse cara exibir um segundo, ele se apaga. E assim como papai, haha, certo, solucionador Nestor linha é implementar os emojis. Então, fazer isso ou marcar é muito simples. Então, por favor, se você estiver apoiado no Windows, você só precisa segurar. Então, se sua caneca, siga minha liderança. Agora, coloque o mouse aqui embaixo e vá para o menu superior direito. Aqui em Editar, emoji e símbolos. Aqui eu vou escolher esse cara. Você pode ver muito simples de implementar? E aqui também, eu só tenho que escolher ômega dot. Dê uma olhada. Certo. Então agora terminamos com isso. Então, se você estiver trabalhando no Windows, só precisa fazer é copiar e colar meu código. E você vai exibir isso na web. Não, vá para o terminal. Temos que iniciar o aplicativo mais uma vez. Início do Mpm. Linda, eu adoro. Você pode ver dar uma olhada. Harold, para código VS, a menos que prossiga. Logo após esta tag de extensão de fechamento. Vamos ter muita etiqueta de span. Dê o nome da classe de perfil, traço, traço, slogan. Vá para o projeto de demonstração. Então, só temos que copiar esta breve descrição de uma cópia Hey,. Cole-o diretamente entre a tag. Salvar. Confira no navegador. Você pode ver, ei, é agora que o ninho e a linha é implementar o barco é. Então, vamos fazer isso rapidamente. Logo após essa div de fechamento. Vamos ter opções de perfil div. E aqui vamos ter um boughten dar o nome da classe botnet. E entre a etiqueta, me contrate, salve. E aqui está o fundo, à direita. Então, temos que implementar o currículo get comprado. Vamos embrulhar tudo em uma etiqueta, a hipótese ou uma frase. Tudo bem, então para implementá-los, temos que importar o currículo deles. Já fui para o diretório de materiais. Eu o tenho aqui na minha área de trabalho, abro e, em seguida, abro o portfólio pro client public. Então aqui temos que copiar este currículo. Clique com o botão Cópia. Venha aqui, cole Heron no VS Code, limpe o sinal de libra, o nome do PDF do ponto de currículo porque é um arquivo PDF. Então aqui vou fazer o download. Aqui, vamos ter um barco dar a este botão um nome de classe de traço destacado btn. E aqui, obtenha currículo, salve. A menos que seja retirado. Aqui está o get currículo de barco. Vamos tentar. Clique em. Você pode ver isso? Agora ele baixa meu currículo, obedecendo e tem. Você pode ver tão bonito? Isso é tudo por enquanto, para esta palestra, vejo você na próxima palestra. Mantenha-se focado e tome cuidado. 9. Exibir imagens e correções: Ok, então agora vamos implementar a imagem do perfil. E depois disso, faremos as correções necessárias. Role para baixo. Logo após essa div. Vamos ter outra div com o nome da classe de traço profundo. Imagem. Outro. traço profundo, imagem, traço, fundo. Seguro. Parafuse a menos que faça as correções necessárias. Logo após essa div com o nome da classe de Coase. Vamos ter outro def, dar o nome da classe. Ícone de traço. Linda. Deixe-me mostrar-lhe algo. Então aqui os destaques das faixas 14 a 28 são as tags a. Pressione a tecla Alt e toque na tecla de seta para cima no teclado. Você vê isso? É exatamente assim que mover o código no código VS. Então, se eu quiser mover esse código para fora dessa div com o nome da classe do ícone de pausa. Tudo o que preciso fazer é pressionar o Alt e depois tocar na tecla de seta para baixo no teclado. Você vê isso? Tudo bem, então vamos movê-lo. O mais simples que o cofre. Você pode ver agora, temos o código diretamente na div com o nome da classe Coase, ícone de traço ANOVA. A alternativa para fazer isso é copiar e colar todas as tags a, à direita, em uma div com o nome da classe do ícone de traço de causa. Então, por exemplo, isso geralmente ocorre após essa palestra, e na próxima palestra, começaremos a estilizar esse componente. Vejo você na próxima palestra. Fique por custos e tome cuidado. 10. Estilizando o perfil: Vamos começar a estilizar o componente de perfil elástico. E lembre-se que na palestra anterior, deixamos assim. Percebi que não está linda, mas embora também não esteja parecendo AGI. Portanto, não se preocupe, nas próximas palestras, vamos fazer com que fique perfeitamente bem. Heroína para código VS, a menos que prossiga. Então, a primeira coisa que vamos fazer aqui é fazer com que as importações necessárias abram rapidamente o explorador. Clique com o botão direito do mouse em SRC e clique em nova pasta. Vamos chamá-lo de ativos. E, certo, nesses ativos, vamos criar uma nova pasta. Casa. Vá para o diretório de materiais, Orban, e também abra os ativos SRC do portfólio pro client. Então eu só tenho que arrastá-los para o lado e depois copiar o pacote de fontes. Portanto, essa é a fonte que vamos usar neste curso. Venha aqui, cole-o diretamente nos ativos. E aqui, temos que copiar com imagens desnecessárias que sejam relevantes para o componente de perfil. O BDI, a forma e a foto do perfil. Selecione. Cópia. Abra a casa, cole, feche a sonda do portfólio. Trazendo o código aberto, até onde precisamos copiar o arquivo CSS. Confira. Você pode ver Copiar heroína para código VS? Continua para o ponto de índice css, destaca, esfrega e, em seguida, cole-o aqui. Certo? Salve-a no navegador e vamos conferir. Linda. Gosto disso. Você pode ver? Agora temos que o barco está lindo. Aqui está a importação, que é o principal Barton e VCs. Eles destacaram o abortamento. Retido no código VS. Deixe-me mostrar-lhe. Role para baixo. Role para baixo. Aqui está o principal BTN, que é a alta AMI comprada. Então, tudo o que fizemos foi especificar o plano de fundo, o tamanho da fonte, a borda e a cor da fonte. E aqui, fizemos isso em Hoover. Então, quando você passar o mouse sobre ele, este será o fundo da borda e todas as outras propriedades permanecerão as mesmas. Deixe-me mostrar-lhe. Você vê isso? Quando eu pairo o mouse sobre ele, o fundo da borda muda. Ok, então a mesma coisa para o PTEN destacado. Atingir é o mesmo. E aqui está o estilo de um feno. Então prossegue para o poder. Role para baixo. E aqui estão as cores que preparei para as pontuações. Destaque, copie, heroína para VS Code. E então temos que prosseguir para o nosso aplicativo dot CSS. Destaque também o comando scrub V para colar. Perfeito. Agora terminamos as configurações. Vamos prosseguir para o ponto do perfil CSS. Feche isso, feche isso, oculte o Explorer e, em seguida, prossiga para o CSS de ponto de perfil. Então, aqui começaremos com o contêiner de perfil. Atualmente, o JS preferido. E deixe-me mostrar-lhe e por que é? Então, vamos configurá-lo para um contêiner flexível. Para fazer isso, só temos que exibir flex. Faça anotações. E quando um contêiner é configurado para exibir flex, ele expande os itens para filmar espaço disponível ou encolher os itens para evitar transbordamento. Aqui está a ilustração na tela. Dê uma olhada. Você pode ver isso? Linda? Vamos alinhar itens. Para enviar nosso melhor alinhamento. Centro. Justifique o conteúdo. Centro, a altura, 10%. A altura média, o conteúdo de ajuste e o URL da imagem de fundo. Precisamos avançar alguns passos para os ativos, para a casa. E aqui temos que escolher o Bg dot JPEG, que salvará como plano de fundo do perfil. Mas no futuro, vamos tirar isso desse lugar. Então, isso é apenas para fins de ensino. Assim, você pode ter algo exibido na tela e ser feliz. Salvar. Agora vamos vincular os componentes com o arquivo CSS. Prossegue para o perfil. E aqui só temos que importar o ponto de perfil CSS Save. Seguro no navegador. E ei, agora é o efeito de tipo e uma breve descrição não é mais visível. Vamos consertar isso rapidamente. Só precisa prosseguir para o CSS do perfil. Então temos que estilizar o perfil. O pai tem sua tela flexível, alinha itens, centro e cor. Vamos fazer com que se sinta seguro. Vá para o navegador e embaça-o. O tamanho do farm é de 24 pixels. As papoulas font-family, semi-ousadas. Agora, para o perfil fez esse papel. Então eu só tenho que destacar, copiar. Venha aqui, cole, feche o suporte encaracolado. E tudo o que precisamos fazer aqui é limpar o nome. E vamos ter papel, o cólon da direção flexível. Então, esta é a direção em que as linhas de gosto atingiram a margem. Então, vamos tê-lo de cima, direita, inferior esquerda, da parte superior por 10 pixels, da direita, 0, da parte inferior, 24 pixels e à esquerda 0. Então, em seguida, eu só tenho que destacar, copiar, colar, fechar o suporte encaracolado. E aqui temos que estilizar a cabeça. E, claro, você deve saber que o efeito de tipo está certo no primeiro estágio. Deixe-me mostrar a etiqueta escondida e neblina. Então, estamos nos referindo a todos esses tops certos sobre, ei, dê a ele um tamanho de fonte de 40 pixels. Fonte, família, moeda que você salva. Vamos verificar. Você vê tudo bem, o teste primário. Então, a cor, agora temos que fazer uso dessas cores. Então importamos LAR, branco, o texto destacado. Então, aqui queremos usar a cola que importamos anteriormente. Temos que definir para o AARP dot css. E aqui queremos usar a cor laranja escura que seja mantida no CSS. É tão simples quanto isso. O slogan profundo, que é a breve descrição. Esse cara aqui, perfil, traço, traço. Slogan. Dê a ele um tamanho de telefone de 19 pixels. Dê uma margem. Do topo, teremos 50 pixels da direita. E 0 no resto dos lados. E aqui as papoilas da família da fonte acendem, carregam, você vê código ou escreve algo acabou de chegar ao meu aviso. Dane-se onde temos os testes destacados. Certo. Tudo bem, pessoal, temos que soletrar isso corretamente. Olha pessoal, estamos construindo um projeto de portfólio clássico. Portanto, há necessidade de que sejamos exames gramaticais. Então eu acho que agora é legal. E aqui vamos dar a margem. Então eu só vou selecionar Duplicate women it for the on-hold. Dê a cor de fundo. O fundo é branco. Então, temos que fazer a cor preta Salvar. E antes de prosseguirmos, deixe-me mostrar algo certo no perfil GAS. Então você vê aqui esta div com um nome de classe de opções profundas de traço. Então, temos que ser gramaticalmente EXXAT. Salve-a no navegador. Agora Hoover no getter é importado em DOC. Na verdade, vamos usar a classe de imagem de perfil e a sombra da caixa. Então, queremos ter um círculo. Para isso. Vamos definir o raio da fronteira para 50%. Dê uma altura de 80 pixels, dê uma largura de 80 pixels para a margem. Então, a menos que retire o quadro. Você pode ver aqui o quadro no canto superior direito da tela. Parece muito bem. Eu adoro isso. Agora temos que sentar a foto do perfil diretamente no quadro. Só tenho que destacar essa cópia. Venha aqui, cole, feche o suporte encaracolado, traço o fundo e dê a pele de 92%. Dê uma largura de 92%. Agora temos que exibir a imagem. Então, vamos fazer URL, atingiu os ativos, a casa, então precisamos da foto do perfil. Seguro. Você pode ver que isso não está bonito. Heroína para código VS. O tamanho do plano de fundo. Cubra, seguro, vá para o navegador. Você consegue ver que o perfil aparece bem? Então, agora vamos consertá-lo no quadro. É bem simples fazer isso. Então, tudo o que temos que fazer é copiar o raio fronteiriço. Cole direito, pressione, Salve e volte. Você pode ver isso? Linda? Repita. Não, repita. Posição de fundo. Centro. Você pode ver isso? Linda? Então, agora vamos implementar o Zoom em efeito. Deixe-me mostrar-lhe. Você vê quando eu pairo o mouse no perfil, nada acontece. Então, eu só tenho que copiar esses. Venha aqui, cole, feche o suporte encaracolado. E aqui vamos ter o UNH acabado. Temos a transformação e depois damos uma escala de 1,07. E queremos que ele faça a transição de 1 segundo. Facilite. Seguro. Passe o mouse sobre a foto do perfil. Você pode te ver? Isso é perfeito. Tudo bem, então temos que estilizar os ícones das mídias sociais. O perdão, são pixels de preenchimento à esquerda? 0 pixels. Então, só temos que completar tudo aqui. Então, quando você passa o mouse sobre os ícones, dada a escala de 1,5. E aqui temos que especificar a tag I, heroína segura para o navegador e dar uma olhada. Tudo está funcionando conforme o esperado. Isso é tudo por enquanto, para esta palestra. Vejo você na próxima palestra. Mantenha-se focado. E TK. 11. Responsibilidades do perfil: Vamos prosseguir com o componente de perfil. E nesta palestra, vamos trabalhar na capacidade de resposta móvel. Vamos verificar rapidamente. Você vê no Galaxy S5. Vamos conferir no iPad Pro. Certo, legal. Ipad. Você vê por enquanto, o aplicativo não responde ao código VS, a menos que prossiga. Vamos começar com o iPad Pro. A foto do perfil. Vamos especificar a margem. Os detalhes do perfil, nome, detalhes do traço do perfil. Só temos que dar a ele um tamanho de telefone de 20 pixels. Agora temos que reduzir o tamanho dos corpos no iPad Pro. Então dê uma largura de 120 pixels. Preenchimento do índice Z. Vá para o navegador e vamos conferir. Vamos experimentá-lo no iPad Pro. Novamente, como esperado. Eu gosto que tivesse no código VS, a menos que prossiga na tela com a largura máxima de 900 pixels. Então eu só tenho que rolar para cima, realçar, copiar, vírgula k, colar, fechar o suporte encaracolado. E agora temos que alterar os pixels, que é o tamanho da tela. Então, isso coincide com a largura máxima dos pixels brutos de ninguém. Temos que estilizar a foto do perfil. E o que vamos fazer é especificar a altura de 320 pixels. A largura, 320 pixels, dá uma margem. Destaque, copie, cole, feche o suporte encaracolado. E em uma tela com a largura máxima de 100 pixels. Em seguida, a foto do perfil. Vamos especificar a margem. Então você deve saber qual é a regra impotente, as portas NCSS definitivamente as portas NCSS definitivamente essas aqui vão substituir esta. Certo. Profundo. Dodge, pai. A margem reversa da coluna de direção flexível dos 40 pixels superiores, 0 nos lados da parada. Vamos ter seu display flex. Justifique o conteúdo. Espaço entre os detalhes do perfil. Detalhes. Tudo o que temos que fazer aqui é especificar a margem. O nome dos detalhes do perfil, ponto de vírgula. Profundo. Fez esse papel. Só temos que testar uma linha para o Papai Noel. Salvar. Vá para o navegador e vamos conferir. Parece bom no Galaxy S5, iPhone, iPhone 6, 7 e 8. Linda. Então, vamos experimentá-lo. Eu tenho um x no iPad, um iPad Pro omega. E, por último, agora em uma tela menor com a largura máxima de 375 pixels. Mais uma vez, destaque, copie. Venha aqui, cole, feche o suporte encaracolado, e temos que especificar o tamanho da tela, 3, 75 pixels. Na tela. Temos que reduzir o tamanho da imagem do perfil. Dê uma altura. 75 fotos. Dê a largura para 75 pixels. Margin top menos 90 sapatos grandes. Os detalhes do perfil dão a ele uma largura de 90%. Salvar. Agora, no navegador, irrealista. Portanto, eles devem ser responsivos em todas as plataformas. Você vê? Você pode ver que isso é tudo por enquanto, para esta palestra. Vejo você na próxima palestra. Mantenha-se focado. 12. Footer do perfil: Vamos começar a trabalhar no FUTA diretamente no componente doméstico. Deixe-me mostrar o que quero dizer com isso. Não leio projeto de demonstração. Você pode ver essa curva aqui? Vamos implementá-lo rapidamente. Prossegue para o VS Code. Clique com o botão direito em casa aqui em Nova pasta. E isso se chamaria FUTA. Bem aqui. Temos que criar a comida, nosso componente. Aqui, um novo arquivo, foo dot dot js. Vamos criar o arquivo CSS correspondente. Daqui no novo arquivo, foo dot dot css. Estamos em comida RGS. Vamos gerar o componente funcional. Lindo. Agora, só temos que vincular os componentes com seu arquivo CSS. Então, não temos que fazer isso quando começamos a estilizá-la, certo. Então, com link, o arquivo CSS com o alimento IgA é conhecido. Vamos dar esta classe de TVNome do contêiner FUTA. Se o nome da classe food R dash, contêiner. E bem nesta div, teremos outra div com o nome da classe do pai FUTA. Temos que exigir a imagem IMG, SRC, abrir e fechar o suporte encaracolado. Então vou exigir. Você tem que espaçá-lo no suporte aberto e fechado. Vamos avançar alguns passos para atingir os ativos. Navio de barra em casa, traço BG dot PNG com a etiqueta de fechamento automático. Certo? Lindo. Agora vamos dar um estranho. Portanto, isso seria exibido se houver um problema com a imagem. Deixe-me mostrar a imagem rapidamente. Ela em bens, em casa. E então aqui estão as imagens. Lembre-se, importamos esta imagem é aileron na palestra anterior. E aqui está o navio dash BG dot PNG. Portanto, esta é a imagem a ser usada como a FUTA. Tudo bem, feche-o. E também, acho que acabamos com isso. Também temos que fechá-lo. Agora ela para o FUTA CSS. Por aqui, começaremos com o recipiente de comida ou traço. Dê a altura de 17,8%. Frase, eu quero que você siga minha liderança, certo, para que todos possamos alcançar o mesmo resultado. Dê uma largura de 100%. Estouro. Oculto. Display, flex. Justifique o conteúdo para centralizar, comida e traço, pai. E sempre certifique-se de que os nomes de sua classe estejam escritos corretamente para que você não se mergulhe em problemas. A largura 100%, dê uma altura de 100%. E a largura máxima de 1920 pixels. Agora, para cada imagem, FUTA traço, pai e, claro, você deve saber que a imagem, que é a tag IMG, está localizada bem na comida aqui. E deixe-me mostrar-lhe rapidamente. Esta div com o nome da classe do período FUTA. E então aqui está a tag IMG. Dê a ele uma largura máxima, 100%, e dê uma altura de 130 pixels. Queremos segmentar a forma como ele aparece no iPad Pro. Vamos alinhar os itens. Flexível, final, seguro. Portanto, supondo que não, temos que renderizar esses direitos de componente no gs p app.js. E onde ele está? Agora temos que importar alimentos da barra de contêineres de portfólio, barra de barra doméstica FUTA é tão simples quanto isso. Então, só temos que executar o FUTA com a etiqueta de fechamento suave, ir para o terminal. E então temos que iniciar o MPM do cliente cd. Vamos esperar por isso. E, como você pode ver, ele exibe a arte levantada da tela, diz que não há conexão com a internet. Então, com isso, devemos entender que há algo errado com a imagem toronto VS code, a menos que corrija isso rapidamente. Prossiga para foo tag orelhas e cabelos. É isso? Tudo bem, então essa coisa que eu quero mostrar a você de um, Ei, você pode ver? Agora, sempre que você precisar de uma imagem no React JS, você terá que chegar ao final de um aqui e depois ponto padrão, segurá-la no navegador. E vamos verificar mais uma vez. Você vê que parece que a imagem não está aparecendo simplesmente porque ela cai bem no fundo branco. Dê uma olhada. Você vê aqui está a imagem. Você pode ver? Eu o movo para a direita e depois movo para a esquerda. Eu o movo para a direita e depois movo para a esquerda. Então a imagem está bem aqui, mas você não pode vê-la simplesmente porque ela cai. O fundo branco. Você pode ver que está certo? Portanto, não se preocupe. Na próxima palestra, vamos consertá-lo. E isso geralmente é para esta palestra. Vejo você na próxima palestra. 13. Exibição o rodapé: Vamos ver que a comida seja exibida na tela e faça com que o componente de perfil pareça conforme o esperado. Abra o explorador. Clique com o botão direito em casa Consegues ver esta casa de um Hey? Clique com o botão direito aqui em Novo arquivo. Casa js. Vamos criar o arquivo CSS correspondente. Mais uma vez, clique com o botão direito em casa aqui em Novo Arquivo, Em ponto CSS. Vamos para o js home e seguida, gerar o componente funcional React js. E eu sei que agora você deve saber como fazer isso. Tão rápido. Vamos dar esse nome de classe de defeito. E vamos chamá-lo de contêiner home dash. E aqui, vamos renderizar todos os componentes que compõem a página inicial. Então, vamos importá-lo. Ei, vamos importar o perfil do perfil. E aqui temos que importar o FUTA do FUTA slash foo tag js. Por enquanto, só temos dois componentes. E no futuro, teremos mais componentes na página inicial. Tão rapidamente, vamos ter uma tendência por aqui. Primeiro, temos que renderizar o perfil com a tag de fechamento automático. E o ninho é FUTA. E também a etiqueta de fechamento automático. Essa nota, por exemplo, não troque os componentes. Deixe-me mostrar o que quero dizer com isso. Destaques. Se você mover a comida no topo, você terá um resultado diferente. Certo? Então você tem que renderizar seu componente de acordo com o que você vê na tela, que simplesmente implica que você deve seguir minha liderança. Então eu tenho que movê-lo para baixo. Você pode ver Ok. Salvar. Agora segurou o CSS doméstico. Então aqui temos que estilizar este recipiente, que é o recipiente doméstico. Justifique o conteúdo. espaço entre a altura é 50 vh e a altura média, 670 pixels. E o ninho e a linha devem prosseguir para o CSS do perfil. Aqui está isso? Role até o topo. Tudo bem, no contêiner do perfil, eu disse na palestra anterior que estes ficarão fora deste lugar. Então destaque e, em seguida, o Comando X para cortar. Agora ela para o CSS doméstico listado aqui. Salvar. Prossiga para o G S. acima E aqui temos que limpar o perfil e o alimento é componente porque ele já está renderizado no componente doméstico. Então, tudo o que temos que fazer aqui é alugar o componente da casa certo, no app g, s. Então, estes não servem aqui. Não precisamos disso. Agora só temos que importar casa do portfólio contêiner slash home slash home slash home JS e vir aqui e depois alugar o ITA seguro. Tendo feito isso, temos que vincular o JS inicial com o arquivo CSS. Rapidamente tinha homogêneo e , em seguida, importar o home dot css. E, por favor, tome nota de que estes estão certos. A convenção de nomenclatura de um componente é a convenção de nomenclatura Pascal. Então, não sei como isso surgiu. Limpe-o e, em seguida, o F deve estar em alfarroba. Salve-a no navegador e vamos conferir. Você pode ver isso? Ok, então este é o resultado que obtivemos, mas isso não é agradável aos olhos. Temos que fazer algo aqui no VS Code. Ok, vá para o CSS doméstico. Acho que não precisamos dessa altura aqui. Destaque e depois limpe-o. Salve-a no navegador mais uma vez. Dê uma olhada. Linda. Gosto disso. Você pode ver isso? Também? Isso geralmente é agora para esta palestra. Vejo você na próxima palestra. 14. Manter a estrutura do projeto e limpar o código: Agora temos que limpar o código ou manter a estrutura do nosso projeto. Código VS horizontal, a menos que prossiga. Abra o Explorer. Quero te mostrar algo aqui. Bem no diretório inicial. Temos o perfil CSS e, em seguida, o perfil JS. E esses dois arquivos, eles estão fora do lugar. Ok, então temos que criar um pacote separado para isso. Agora clique com o botão direito do mouse no diretório inicial aqui em Nova pasta. E isso será chamado de perfil. Então, vamos movê-los para o Pacote de perfis. Clique em arrastar e solte-o ali no perfil. E aqui está a caixa de diálogo. Diz, tem certeza de que deseja mover o CSS profundo para o perfil? Para concordar com isso, você precisa pressionar Desfazer, Mover embarque e também pegar o perfil GAS, arrastá-lo e soltá-lo diretamente no pacote de perfil. E, claro, mova-se. Portanto, há alguns problemas aqui no terminal, simplesmente porque agora temos uma importação ausente. Primeiro. Temos que ir para o GAS doméstico. Aqui está o perfil. Agora vou fazer o perfil de barra J S, Salvar. E aqui no terminal diz que os países de vocês veem isso. Temos que voltar para o perfil CSS, não fixo, as importações ausentes. Role para baixo. Então, aqui temos que nos mudar. Outro passo à frente. Salvar. E osso. Problema resolvido. Se você escrever um aplicativo assim, fica muito fácil de ler e entender. Ok, então estou ensinando exatamente como calcular o aplicativo como um profissional. No momento, o navegador, a menos que veja se tudo funciona bem. Tudo está funcionando conforme o esperado. Eu adoro isso. Tudo bem. Tome cuidado. 15. Renderização de componentes: Nesta palestra, vou te ensinar como renderizar componentes uma maneira mais perfeita e organizada para que fique muito fácil obter o nome da tela e o ID da tela quando começarmos a implementar a rolagem suave . Isso implica que vamos ter todas as telas mapeadas em um componente e, em seguida, ter apenas esse componente renderizado no aplicativo. Parece complicado, certo? Certo. Deixe-me mostrar-lhe atualmente ab.js. À medida que prosseguirmos com as palestras, teremos de quatro a cinco componentes diferentes. E esses componentes serão renderizados no app.js, como a maneira como você vê a casa de um feno. Certo. Então, teremos o depoimento, o motivo do contato e o resto deles. Agora, o que vamos fazer é mapear todas as telas em um componente e, em seguida, ter apenas esse componente renderizado no app.js. Tudo bem, então não precisamos codificá-lo assim. Então acredito que, à medida que prosseguimos, Joel, entendê-lo bem o suficiente. Clique com o botão direito no SRC. Aqui, uma nova pasta. E essa pasta seria chamada de utilitários. Estão bem nos utilitários. Vamos criar um módulo em utilitários aqui no Novo arquivo. E vamos criar um módulo chamado ponto js comum t. Então, certo, neste módulo, vamos importar contêiner do portfólio slash home slash home. Agora temos que obter o número total de telas como podcasts. E vamos chamá-lo de sublinhado total. Telas. Defina-o para uma matriz, certo? Nesta matriz, vamos ter o objeto. E então teremos os pares de valores-chave. Coluna de nome de sublinhado de O nome da tela é inicial e o componente está em casa. Então, no futuro, teremos todo o componente armazenado aqui. Tudo bem, então deixe-me mostrar-lhe, por exemplo, vamos supor que temos o componente de currículo e eu vou fazer é duplicar e então a média será retomada. E então o componente será retomado. Então, só temos que importá-lo no canto superior direito ali. Então, quando você fizer isso, você terá é armazenado diretamente neste array. Certo? É um ponto mais simples. Então eu só tenho que desfazer. Agora, temos que realizar uma titulação para obter as telas disponíveis. Então aqui vou fazer um spot const, obter sublinhado, índice de sublinhado. Vamos pegar na tela Nim, nome do sublinhado da tela. E aqui vamos verificar se o nome da tela não existe. Se o nome da tela não existir, temos que retornar menos um, o que significa que não há tais telas ensinadas na matriz. Agora temos que examinar os arrays da tela e obter as telas disponíveis. Para let eu é igual a 0 e tenho menos de 22 telas de comprimento de ponto. E então temos que incrementar eu por um. Então, aqui vamos verificar se as telas totais da tela de pontos Nim, nome da tela, então vamos retornar a tela em si. Certo? Aqui só temos que voltar rindo. Seguro, certo? Portanto, a linha aninhada é criar um componente. o botão direito no contêiner do Aqui está o portfólio Container. Clique com o botão direito do mouse Agora vamos criar um componente chamado Portfolio container dot js. Então aqui vou fazer, vamos importar o total de telas. Deixe-me mostrar-lhe aqui. São telas de sublinhado de utilitários de barra de OTs. São telas de sublinhado Portanto, o próximo na linha é mapear através do total de telas para que ele seja exibido na tela. Ok, então eu vou fazer é total ponto total das telas, configurá-lo para abrir e fechar colchetes. Se o componente de ponto de tela existir, teremos screen.com. Dê a ele um nome de tela. Abra e feche a tela de suporte encaracolado, tela de pontos nomeada. Dê o nome da tela do ponto da tela da tecla. Também temos que dar um ID a ele. Captura de tela, nome de sublinhado na tela Certo? Europa tão próxima era etiqueta de fechamento automático. Um outro se não existir. Então, só temos que devolver uma div vazia de um aqui. Dê uma chave à div. Nome do sublinhado da tela de pontos e feche-o. Linda. E, por fim, temos que invocar esse método. Deixe-me mostrar essa função aqui. Vamos chamá-lo aqui na interface do usuário. Então, vamos dar a essa div um nome de classe, contêiner de portfólio. E bem aqui, pegando o suporte encaracolado n, nossas telas, salve-a no app.js. Nós limpamos isso. Então, temos que importar contêiner de portfólio, certo? Ele fez isso por mim automaticamente novamente. Então eu só tenho que limpá-lo. Na verdade, estou fazendo isso para que todos possam acompanhar. E, hum, teremos que importar contêiner de portfólio do contêiner de portfólio de barra de contêineres. E também temos que limpar a casa. E tudo o que precisamos renderizar aqui é o contêiner do portfólio. Feche-o com uma etiqueta de fechamento automático. Salve-a no navegador e vamos ver o que temos a bordo. Recarregar. Nada é exibido na tela. Certo? Vamos conferir ela no console. E um em funcional não é válido como um gráfico de reator. Certo. Código Toronto VS. Depois, há ela em OTs comuns. Tudo é legal sobre hey, portfólio contém diz função, são caras certos. Esta é uma função, portanto, deve ter parênteses de abertura e fechamento. Então é isso que o torna uma função segura. Mais uma vez, vá para o navegador. Estão certos, lindos. Tudo está funcionando como espectador. Eu adoro isso. Isso geralmente é agora para esta palestra. Vejo você na próxima palestra. Mantenha-se focado e tome cuidado. 16. Introdução a RXJS. Observáveis: Tudo bem, então nesta palestra, vamos trabalhar nas animações e no pergaminho suave. Mas antes de prosseguirmos com esta palestra, é bom saber o que é um observador, observável e está sujeito em nosso USGS. E depois da espécie, eu lhe darei o link para o site oficial do USGS para que você leia mais sobre isso e explore. Observador. Nas setas G é um observador, é consumidor de valor entregue por um observável? E observáveis são coleção push da Lizzy de vários valores. O assunto é assunto em nosso USGS é um tipo especial de observável que permite que valores sejam multicast para diferentes observadores. Tudo bem, então é mais como um evento e nos encontre. Claro, você sabe que o emissor de eventos mantém o registro de pecadores diferentes. Tudo bem, tão rapidamente deixe-me demonstrar para você para que você possa ter uma imagem clara do que estou falando. Então, agora, quando eu rolar para baixo, você perceberá que o componente de pilar se encaixa. Agora vamos descer. Você pode ver que o componente original se encaixa? Agora, a ideia é que esse efeito, que é o observável, será implementado em um módulo. E então teremos componentes diferentes para consumir esse observável, assinando nele. Você pode ver o depoimento, o contato comigo? Você pode ver a forma como ele se encaixa? Portanto, todo esse efeito é criado em um módulo e, em seguida, consumiremos esse efeito assinando nele. Portanto, a ideia em si é a observável e os observadores são o componente que consome esse observável. Então agora podemos dizer que o componente entre em contato comigo é um observador e o módulo de fade in effect é o observável. Parece bom, certo? Lindo. 17. ScrollService: Não compreendi o conceito de USGS na palestra anterior. Nesta palestra, prosseguiremos com a implementação do código. Então Heron para o terminal e vamos instalar um USGS. Temos que cd client, então npm instalar erros GAS. A instalação está em andamento. Então, temos que esperar por isso. Instalado. Bem sucedido. E você só tem que ignorá-los por enquanto. Clique com o botão direito em utilitários aqui em Novo arquivo. Em seguida, vamos criar um arquivo chamado cross service dot js. O primeiro desconhecido que vamos fazer aqui é importar a tela total. Importe telas totais de sublinhado de OTAS comuns. E a linha descendente do NES é importar o assunto do nosso USGS. E se você pode se lembrar na palestra anterior, eu disse que o assunto é um tipo especial de observável que permite que os valores sejam de estado multicast, o que implica esse observável especial que vamos create seria consumido em diferentes empresas e subscrevendo-se para comer. Então, aqui só temos que importar assunto do REXX. Spot, a quarta classe, role os currículos. Agora vamos ter esse objeto de serviço cruzado. Os amigos dela começaram. Ponto-e-vírgula do manipulador A propósito, não acho que isso seja necessário. Agora vamos instanciar o assunto. Portanto, temos que criar o objeto ou referência. E agora vamos chamá-lo de emissora de tela atual. Um novo assunto. E o mesmo aqui vamos fazer o desvanecimento estático, atual da tela, um novo assunto. Agora vamos ter um construtor aqui e adicionar os eventos de rolagem à janela. Ponto da janela, adicione ouvinte de eventos. Este ponto. Bem aqui. Vamos implementar a função call to action boating. E deixe-me mostrar-lhe. Aqui está o cancelamento de chamada à ação. Quando você clica neste botão, ele irá rolar suavemente para o componente entre em contato comigo. E o nome dessa função será escrotal. Contrate-me, defina para nossa função. E aqui vamos fazer. Deixe entrar em contato comigo, ponto do documento da tela, obter elemento por ID. Em seguida, vamos obter o ID da tela entre em contato comigo. Neste caso, espaço de contato. Então amigos aqui, você tem que seguir minha liderança. Então, se você fizer algo assim, pode não funcionar para você simplesmente porque, no futuro, o ID da tela será assim. Espaço de contato. Estão certos. E se a tela não existir, temos que encerrá-la aqui. E se isso acontecer, vamos entrar em contato comigo, tela, DOD, rolar para a exibição. E o comportamento. Vai ser suave. Então é isso que o torna suave. Role para fora K, estamos progredindo e eu gosto disso. O que vou fazer agora é duplicar esse método, esse cara aqui. Então, vamos ter isso para o componente doméstico. Deixe-me mostrar-lhe rapidamente. Você pode ver esse fundo aqui? Então, isso iria rolar para o osso do componente doméstico. Você pode ver isso? Linda. Então, temos que dar um nome a ele. Então isso seria pego. Role para casa. Aqui vai estar em casa. Vamos alterar o nome dessa variável para a tela inicial. Agora, o que vou fazer é pressionar Command e D. Pressione novamente mais uma vez. Você pode ver que a edição multicultural é muito boa. Agora vou limpá-lo. Então, vamos fazer com que a tela inicial pressione a tecla Escape para desativar o multicausal. Bom. Tendo feito isso, vamos verificar se o elemento está em exibição. Isso simplesmente implica se o documento aparecer totalmente na tela ou não. Então saia dessa função. E aqui vamos ter é elemento na vista LM k. Teremos uma variável chamada Req igual a L m ponto. Fique ligado ao cliente rect, desculpe-me, o olho de um cabelo. Corte isso. Este método de I aqui retorna um objeto direto DM fornecendo informações sobre o tamanho de um elemento e sua posição em relação aos poucos e poucos potes. Fase mais simples para a parte do documento que você está visualizando, que atualmente está visível em sua janela. E aqui vamos ter um elemento variável top, elemento top, req dot top. E aqui vamos ter um elemento variável inferior, ponto req, eu acho que você sabe, inferior. Então, vamos ver o que o elemento é parcialmente visível. Vamos parte superior do elemento parcialmente viável. Portanto, quando o elemento superior for menor que o ponto do Windows em uma altura e o elemento inferior for maior ou igual a 0. Isso significa que é parcialmente visível. Tudo bem, então temos que verificar o completamente visível. Deixe completamente visível. A parte superior do elemento é maior ou igual a 0 e o fundo do elemento é menor ou igual ao ponto da janela em uma altura. Agora vamos ter um bom caso. Se o caso for parcial, retornaremos parcialmente visíveis. Esse cara aqui, desculpe-me, isso é Coulomb. E se a caixa estiver completa, retornaremos completamente visíveis. E aqui vamos ter o caso padrão como falso. Há uma flecha aqui, simplesmente porque isso tem que ser ponto e vírgula para fechar este caso. Certo. Agora vamos verificar a tela que está atualmente na janela de exibição, o que significa a tela que é exibida completamente. Então, aqui vamos ter uma função. Verifique o correspondente da porta de exibição. Analisamos um evento para nossa função. Tudo bem, então você só precisa digitar o código comigo , então eu tenho que explicar tudo. Então, deixe-me mostrar-lhe. Este é o caso aqui. E então esse ponto é elemento em exibição. Então temos que mostrar o caso Porsche. Esse cara aqui. Se totalmente visível. Parcialmente visível. Portanto, se a tela estiver parcialmente visível, o que significa que, se não for totalmente renderizada, temos que transmitir o feed em vigor. Agora vou fazer a tela atual do ponto caber em ponto. Em seguida. Aqui está um método e, em seguida, temos que pegar algum objeto vazio e o método do ninho. Com licença. O próximo método é usado para encaixar novos valores no assunto e tê-lo com multicast leito para os observadores registrados para ouvir o assunto. Então, neste caso, ele será de um componente diferente. Isso é bastante explicativo , então E por último, se totalmente visível. Então, o que significa que se o componente for renderizado totalmente na tela, então teremos que transmitir o nome da tela, ponto, ponto. E temos que levar isso em objeto de um cabelo. E vamos fazer tela na exibição coelom, tela, nome da tela. E então temos que sair desse cofre. Dane-se com ela, certo? Nós nos saímos perfeitamente bem aqui. Então, se preocupe quando começamos a consumir esse trabalho observável definitivamente o entenderia bem o suficiente. Tudo bem. Tome cuidado. 18. Módulo de animações: Nesta palestra, prosseguiremos com as animações. Clique com o botão direito em utilitários aqui em Novo arquivo. E então isso será chamado de animações dot js. E então temos que exportar a classe padrão. A animação é aberta e fechada o suporte encaracolado. E aqui temos que instanciar a aula de animação. E a referência do objeto seria chamada de animações. Ponto e vírgula de animações para encerrá-lo. E, a propósito, varia, opcional. Então aqui vamos ter uma função cabida na tela. Portanto, essa função vai pegar o ID da tela, que é o nome do sublinhado da tela, defini-lo para nossa função e vamos para o portfólio GS. Então eu quero mostrar a identidade e o cabelo. Você pode ver? Agora vamos ter uma tela variável. Ponto do documento, obtenha elemento por ID. Temos que ter a ideia da tela. E se eu, ei, temos que verificar se a tela não existe. Então, por acaso, temos que encerrá-lo. E se existir, temos que estilizá-lo. Dê cinco. E então vamos nos transformar. Temos que traduzir Y, que é do eixo y. Um. Fotos. 19. Instalação e tela Atualização para pacotes: Bem-vindo de volta aos carros. Estão certos. Então, nesta palestra, começaremos a implementar o componente de cabeçalho. No final desta palestra, teremos os componentes da casa parecidos com esses. Como exatamente o que você vê exibido na tela. Código Toronto VS. A menos que prossiga. Para prosseguir, temos que seguir a estrutura do projeto. Certo? Então clique com o botão direito do mouse na casa de uma nova pasta herói. E essa pasta será chamada de cabeça. Certo? No pacote de cabeçalho. Temos que criar o componente de cabeçalho. Então aqui no novo arquivo. E isso seria o cabeçalho do cartão. Vamos criar o arquivo CSS correspondente. Ponto de cabeçalho CSS. Js. Gere o componente funcional. Linda. Agora temos que instalar os pacotes necessários. Prossegue para o diretório de materiais, materiais e, em seguida, rola para baixo. Tudo bem, então aqui eu tenho uma fonte que queremos instalar. Agora vou pegar uma cópia de primeira linha Heron para o código VS. Aqui temos que ver o cliente. E então npm instale o comando V para colá-la feita nos materiais e, em seguida, copiar a segunda linha. Estou aqui, npm install paste. Vamos instalá-lo, o MPL instalado. E sei que a maioria de vocês está curiosa por que estou fazendo assim. Para linha de falha, npm install, comando V para colar. E, por último, a instalação do NPM. Terminamos a instalação. Então, se você quiser instalar tudo de uma vez, tudo o que você precisa fazer é copiar assim. E então venha aqui, faça npm instale e depois cole. Então eu fiz isso no meu fim, mas não funcionou bem para mim. Vamos acertar o pacote JSON heavy. Você pode ver? Certo. Agora vamos começar com as importações. Temos que importar telas totais de sublinhado. E também vamos importar , mas obtém tela de sublinhado, índice de sublinhado de Utilitários, lodo, lattes comuns. Então, estamos recebendo todas essas guias aqui do módulo OTs comum. Você deveria saber disso. Vamos importar o serviço de garantia de. Ok, vamos importar Awesome Font, ícone Awesome de. E como tudo o que temos que importar. Agora vamos declarar as variáveis de estados necessárias a serem usadas. E aqui vamos ter const. Selecione essa tela, defina. Tela, configure-o para usar o estado. E o estado inicial será 0. Logo antes de prosseguirmos, temos que importar os EUA di dt. Então, aqui vamos usar o estado. Temos que definir o show, ter uma opção, defini-lo para você, afirmar que o estado inicial será falso. Agora vamos definir uma função para atualizar a tela, configurá-la para nossa função. E aqui vamos escolher na tela atual. Então, aqui vamos ter uma variável. Índice de tela. O índice da tela. Agora vamos fazer a exibição de triagem de pontos rainha coreanos. Se o índice da tela for menor que 0. E, portanto, o próximo na linha é assinar a etapa observável fora dessa função. E então vamos ter uma variável. Assinatura de tela coreana, ponto de serviço de rolagem, podcast pára-brisas Então deixe-me mostrar-lhe. Então temos que definir quatro V's. E aqui está o Casta, o objeto ou amigos da classe de assunto. Deixe-me mostrar-lhe aqui. E onde ele está? Ponto. Temos que assinar o observável. E então vamos pegar a tela atual de atualização da função , esse cara aqui. Tudo bem, então eu não quero que essa palestra demore muito. Na próxima palestra, prosseguiremos com a interface do usuário. 20. Navegação e funcionalidade no cabeçalho: Ok, então vamos prosseguir com o URI. Então o Austin que vamos fazer aqui é exibir os nomes dos componentes como navegação. Então você pode ver o currículo Home About Me e o resto deles. Mas, embora não tenhamos criado todos esses componentes. Então, por enquanto, você verá apenas a casa exibida aqui na parte superior como navegação. Então, queremos fazê-lo dinamicamente. Por aqui. Vamos ter uma função para fazer isso. Obtém as opções Hara, defina-o para uma função de seta como de costume. E aqui vamos retornar colchetes abertos e fechados. Vamos mapear, desenhar as telas totais Command P. E então eu vou levá-los para as comunidades. E aqui está o total de telas. Então, onde quer que os componentes que sejam ensinados aqui, nós o teremos exibido na parte superior como navegação. Então, o que vamos fazer agora é mapear através desse total de telas. Mapa de pontos total de telas. Então, aqui, vamos ter uma div, dar a ela uma chave de nome de tela, sublinhado de tela, nome de tela. Deixe-me mostrar-lhe rapidamente. Contêiner de portfólio Toronto. E aqui está a chave. Perfeito. Eu te disse à medida que prosseguimos, Joel, definitivamente entendo tudo. Então, sim, está chegando. Agora vamos dar a essa div um nome de classe, obtém a classe opcional de cabeçalho. Portanto, temos que especificar o onClick para que ele possa ser clicável. Então, quando você clica em qualquer um dos nomes, ele deve alternar para o componente correspondente. Deixe-me mostrar a você. Então, pegue, por exemplo, Eu quero clicar no Sobre mim. Leva você para baixo para o componente Sobre mero. Então, clique será um núcleo, abrir e fechar colchetes encaracolados. E depois teremos uma função chamada switch screen. Então, no DV, temos que abranger o nome da tela. Tela, nome do sublinhado da tela. Então, eles o exibirão na tela. Na próxima função, teremos um passo para cima das opções de cabeçalho get. E então vamos definir uma função aqui para lidar com as opções de cabeçalho para criar espaços entre a tela e zombar do nome dos componentes selecionados com uma cor diferente. Então isso virá quando começarmos a estilizá-lo. Então aqui vamos obter a classe de opção de cabeçalho, que é o registro funcional aqui. Esta função, se o índice for definido no comprimento total do ponto das telas menos um. E vamos ter aulas mais traço, traço, separador. E se for eleito Índice de registro na tela, as aulas serão iguais. Cabeçalho selecionado opcional. Então, aqui, se houver mais de uma tela exibida na parte superior como navegação, temos que criar espaço entre as navegações. Deixe-me mostrar-lhe aqui que você tem Lar e, em seguida, o espaço entre a casa e o sobre mim e do acima para o currículo deles, para o testemunho e depois para o contato comigo. Então esta peça aqui é o que estamos falando. E a intenção aqui é ter o nome do componente marcado como selecionado quando clicado. Você pode ver agora que o Sobre Mim é selecionado quando eu acerto nosso currículo. Que se estrague. Você pode ver? Certo. Então é exatamente isso que estamos tentando alcançar das faixas 41 a 42. Certo. Então, o próximo na linha é implementar uma alternância entre as telas. E agora vamos ter uma função para isso. E eu já te disse antes, a tela do interruptor, interruptor. Vamos tela componente. Ponto do documento, obtenha elemento por ID. Temos que obter o ID da tela. Captura de tela, nome do sublinhado da tela Os componentes Scream não existem. E se isso acontecer, teremos a rolagem do ponto do componente da tela para a exibição. O comportamento vai ser suave. E você sabe disso. Agora vamos definir a tela selecionada. Tudo bem, agora vamos começar a implementar a interface do usuário. Acho que isso deve ser enrolado no suporte. Feche esta div. Aqui vamos ter um under def, dar a ele um nome de classe de cabeçalho dash. E vamos ter uma div com um nome de classe de dash, hambúrguer e clique em Mostrar opções. Então, o que estamos tentando implementar agora, deixe-me mostrar-lhe aqui. Ele não aparece um iPad Pro, então ele tem que aparecer no iPhone e nas plataformas móveis. Então, isso é exatamente o que estamos tentando implementar. Você vê isso mais humilde aqui no canto superior esquerdo da tela. E espero que você possa ver que o nome da classe, cabeçalho dash 100 barras de traço hambúrguer. E, em seguida, o ícone. Vamos fazer uso desse cara. Deixe-me mostrar isso aqui. Ele tem que vir aqui e colar perto a Europa era a etiqueta de fechamento automático. E vá para fora desta div com o nome da classe do hambúrguer de cabeçalho. Esta é a div aqui, e aqui está a tag de fechamento. Logo após a tag de fechamento, vamos ter uma div, dar a ela um nome de classe de traço de cabeçalho, logotipo. Tudo bem, nesta div, vamos abranger o logotipo. Então, de um Ei, se você tiver um logotipo, você também pode usar o logotipo aqui. Como se você pudesse fazer algo assim. Portanto, se o logotipo estiver em forma de imagem, você pode fazer IMG, SRC, ok e, em seguida, segmentar a localização da imagem. Mas para mim, eu só quero enviar spam o logotipo. Nesse caso, será meu nome. Aqui. Teremos que acho que vamos ficar com isso. Certo, e então este é sinal do Giotto no meu teclado perto da barra. Então, logo após a div de fechamento do nome da classe, cabeçalho, logotipo , céu, teremos outra div com o nome da classe. show tinha uma opção. E desta vez vamos exibi-lo em uma condição. Então, se ele existir, teremos aqui um traço opções. Mostrar opções de traço, traço. Então, aqui vamos chamar a função get header options. Deixe-me mostrar-lhe isso aqui. Economize menos kick-start do aplicativo. O cabeçalho não é exibido na tela. Volte, e então temos que renderizá-lo no JS da casa. Aqui, temos que importar de. E, novamente, certifique-se de que a cabeça esteja na parte superior do perfil. Agora ela para o navegador. Recarregar. Agora, o cabeçalho está na tela. Deixe-me mostrar a você. Você vê isso? No canto superior esquerdo da tela, você verá o logotipo e o nome do componente inicial exibidos como navegação. Então aqui está o componente inicial e aqui está o logotipo. Então, na próxima palestra, quando começarmos a estilizar esse componente, você terá tudo com uma aparência perfeita. 21. Como definir o componente de cabeçalho: Vamos começar a estilizar o componente de cabeçalho. Heroína colocou VS Code. E antes de prosseguirmos, temos que fazer alguma coisa, abrimos o Hadar JS. Então aqui temos que mudar o nome da classe para encabeçar um contêiner de traço seguro. Então, tendo feito isso, vamos prosseguir para o cabeçalho CSS. Nós como ele, ok, ei, é o contêiner de cabeçalho? Vamos ter um display flex. Vamos justificar o conteúdo para o centro. A altura, 140 pixels, a cor da fonte. Vai ser branco. E aqui temos que estilizar a cabeça aqui e opa, isso é suposto ser um ponto. Rapidamente. Vamos exibir espaço flexível entre dar uma altura de 100% de 70%. E a cor da fonte. Também vai ser branco, então eu só tenho que pegar essas pastas. Vamos trabalhar no logotipo. O tamanho do telefone é de 50 pixels. A família telefônica, Poppins, muito ousada. Então, a cor da fonte será branca. Só tenho que pegar essas pastas seguras. E, por favor, você deve se certificar de que seu arquivo CSS já está vinculado ao componente. Fizemos isso na palestra anterior. Nós entramos no navegador e vamos conferir. Você pode ver linda? Está parecendo bom. E então aqui está o hambúrguer Hara. Não se preocupe, teremos tudo alinhado corretamente. Portanto, o MNIST é a opção de cabeçalho. Tinha uma pitada de xisto. Tenha um display flex. Vamos alinhar os itens ao centro. E também temos que estilizar o cabeçalho. Opção. A é dar a ele um tamanho de fonte de pixels do sistema. Então, o custo será de 0,600. Ela no navegador. E deixe-me mostrar que você pode ver o cabeçalho? Vamos fazer alguma coisa. Você vê que aqui está no canto superior esquerdo da tela? Queremos mostrá-los em plataformas móveis. Linha ocidental é a opção de cabeçalho, separe o traço de 0 pontos. Pode pegá-lo daqui. Separador, dê uma margem de 50 pixels. E aqui vamos dar uma cor. Então, a cor também será branca. Vai pegar, depois cole-o aqui. Agora vamos dialisar o cabeçalho selecionado, opção, ponto, traço selecionado, opção traço. E então tudo o que temos que fazer é especificar a cor. Podemos realmente codificar aqui. Então isso é o que é aqui. Você vê? Isso é exatamente o que implementamos agora. Então você não vai aparecer aqui simplesmente porque temos apenas a casa exibida na parte superior como navegação. Então, quando começarmos a adicionar mais componentes, você verá o efeito. Vamos conferir isso em plataformas móveis. Você vê que isso não é responsivo? Você pode ver isso? Então, na próxima palestra, conheceremos que a cabeça é responsiva em plataformas móveis. Vejo você na próxima palestra. Mantenha-se focado. E TK. 22. Responsibilidade: Vamos prosseguir com a capacidade de resposta móvel. Você precisa segurar para contratar um CSS. E então vamos começar com o iPad Pro. Portanto, na tela de mídia e na largura máxima de 1, 1, 1, 0 pixels, que é o tamanho do iPad Pro. Agora, vamos ter a cabeça aqui e dar-lhe uma largura de 80%. Destaque, copie, cole, feche o suporte encaracolado. E aqui temos que mudar o tamanho da tela para 970 fotos. Vamos ter um bloco de exibição. Salve-a no navegador. Recarregar. Você pode ver agora o hambúrguer aparece no canto superior esquerdo da tela ou à direita. Tudo definitivamente vai ser legal. Ainda no tamanho da tela, queremos o cabeçalho pai. Temos 100%. Vamos ter a posição. Absoluto, a esquerda, minha perda, 100%. Os pixels superiores dão uma altura de 100 e uma largura de 100 por cento. Vamos justificar o conteúdo. Espaço ao redor. E então o plano de fundo, que é o próprio controle deslizante. Quando é cena Clyde, queremos que o plano de fundo seja 1, f, 22, 35, o índice z, a opacidade. Vamos fazer 0,5. Seguro. Vamos ter uma transição, apontar. E, em seguida, para a opção de cabeçalho separada ou DOD. Ei, é dar uma margem do cabeçalho selecionado? Ponto, traço, traço, barras. O tamanho da fonte é 30. As imagens devem ser pontuais. E a margem 0 pixels, dez imagens. Aqui só temos que pegar essa cor emprestada a partir daqui. Cole-o aqui. Talvez paguemos mais tarde. Não sei. Aqui. Mostrar traço, hambúrguer, opção. Pessoal. Vamos retirá-lo e ver se tudo está funcionando perfeitamente bem. Recarregar o Qu Gary tudo está funcionando conforme o esperado. Agora. Você pode ver? Perfeito, eu adoro. Você vê? Então, vamos experimentá-lo no iPhone 6, 7 e 8, 2 x find. No iPad Pro. Você vê que temos a navegação e agora a cabeça de um hambúrguer 100 desapareceu. Mas quando você for para o iPad, vamos ter a cabeça, um hambúrguer. Você vê? Então, amigos, tudo está funcionando como esperado. Tudo bem, então terminamos com o componente de cabeçalho obtido no futuro, você verá como vamos exibir os nomes do componente no topo como navegações. Então você vai ter o depoimento acima de mim retomar, entrar em contato comigo e tudo isso. Vejo você na próxima palestra. Fique folclorista e tome cuidado. 23. Componente reutilizável: Nesta palestra, vamos criar o componente razoável. Um componente reutilizável é uma parte da interface do usuário que pode ser reutilizada em uma parte diferente do aplicativo para Butte mais de uma instância. Tudo bem, então deixe-me levá-lo para o projeto de demonstração. Role para baixo. Aqui estão os componentes reutilizáveis, que compreendem o título, o título e o separador, que é essa linha aqui. Você pode ver lindo. Agora, uma coisa que mais gosto no componente reutilizável é a flexibilidade. Então isso é usado aqui no componente Sobre Mim para mostrar o título Sobre Mim e cada subtítulo, que é sobre mim e, em seguida, a facilidade do subtítulo. Por que me escolher? Certo. Agora, quando isso seria reutilizado em um componente diferente, deixe-me mostrar-lhe. Então, neste cenário, temos o currículo. Então, vamos passar esse valor diferente para o componente reutilizável. Agora você pode ver o motivo pelo qual eu disse, componentes reutilizáveis são flexíveis. Além disso, mano a mano Microsoft se encaixa em diferentes componentes, como o depoimento. Temos que alterar o valor que será passado para o componente. Tudo bem? Então, neste caso, aqui está o depoimento como título, e aqui está o subtítulo. Tudo bem, então vamos mergulhar no código e então teremos que entendê-lo bem o suficiente à medida que prosseguirmos. Heroína para VS Code a. Ei, vamos criar um diretório chamado subtítulo. Agora só precisa fazer é clicar com o botão direito do mouse nos utilitários. Aqui está isso. Você pode ver o botão direito do mouse aqui em Nova pasta. Agora vamos criar o componente aqui em Novo Arquivo, cabeçalho da tela dot js. Vamos gerar o componente funcional. Vamos dar a esta div um nome de classe de head in dash container, desculpe-me, escreva diretamente nesta div. Precisamos de outra div com o nome da classe de esquiva de tela. Vá para dentro. E aqui, temos que abranger o título. Abra e feche os suportes encaracolados. E eu vou fazer o título do ponto de adereços. E aqui esta função vai levar as sondas dele. Assim, você pode realmente alterar o nome dos prompts para outra coisa. Mas eu recomendo que você fique com as sondas da convenção simplesmente porque elas são geralmente aceitas. E muitas pessoas, isso é o que ele faz. Então, o que está acontecendo aqui é que estamos apenas recebendo o valor, certo? Então, na próxima palestra, você verá como podemos transmitir valor para esse componente por meio de testes. O mais simples isso. E temos que verificar o subtítulo. E aqui vamos ter o suporte encaracolado. E, em seguida, abra e feche parênteses. Vamos fazer subtítulo de pontos de adereços. Então, como de costume, estamos recebendo um valor que está sendo passado para esses componentes por meio de testes. Portanto, neste caso, se houver algum valor que está sendo passado aqui, temos que exibir esse valor. Então, vamos ter uma div, dar à div um nome de classe de traço de tela, traço cabeçalho. À direita. Nesta div, temos que abranger esse valor, que é o subtítulo. Então, vou fazer adereços, subtítulo de pontos e setas. Se não houver nenhum subtítulo que seja passado para esse componente, teremos que exibir uma div vazia. Então venha aqui, coelom, que são as flechas, vamos ter uma div. Feche-o para baixo. Em resumo, estamos apenas recebendo os dados que serão passados através de adereços para esta empresa e não se preocupe. Nas próximas palestras, você verá como podemos passar valores para essa empresa e quão bonito. Agora ela para o projeto de demonstração. Deixe-me mostrar isso aqui, que é o separador. Então é isso que vamos fazer agora. Esta linha aqui, nós só vamos ter Este é o Blob. Estes são meio que ao norte daqui. Este é o blob. Consegue ver esse cara aqui? Isso é tudo para o componente reutilizável. Na próxima palestra, vamos estilizar esse componente. Certo? Vejo você na próxima palestra. Mantenha-se focado e tome cuidado. 24. Componente reutilizável: Nesta palestra, começaremos a estilizar o componente razoável. No final desta palestra, teremos que pareça assim. Você pode vê-la certo? Então, avance rapidamente para o código VS, a menos que continue. o botão direito no título da tela. Aqui um novo arquivo. E esse arquivo seria chamado Cabeça de tela no ponto css. Antes de prosseguir, temos que vincular o componente com o arquivo CSS. Abra o cabeçalho da tela GAS, role até o topo. Então eu já estou lá no topo. Agora o que vou fazer é importar o cabeçalho da tela dot css. Salve-a na tela aqui em CSS. E aqui vamos começar com o contêiner de cabeçalho. Deixe-me mostrar-lhe rapidamente. Então aqui está o título que contém o cabeçalho da tela, o traço da tela, o cabeçalho do traço e aqui o resto das aulas. Então, vamos seguir em frente. Temos que definir isso para um contêiner flexível. A coluna de direção flexível. Vamos alinhar os itens ao centro. A largura, margem de 100%. E aqui temos um traço de meia tela, direção de traço, subtítulo. Agora vamos ter o espaçamento entre letras de três pixels. Margem. À medida que o leite come. Ele mistura 18 pixels. Tamanho da fonte. Pixels. A cor. Temos que fazer uso do colo que importamos anteriormente na palestra do professor. E espero que possamos lembrar disso. Para um cabeçalho de tela, cabeçalho do traço da tela. Vamos dar o tamanho da fonte de 32 pixels. A cor quando f, 22, 35. E agora você deve estar familiarizado com essa cor. A fonte, família, Poppins, barco, cabeça e separador, direção, traço. Separador. Vamos ter um display flex alinhar itens ao centro. A posição relativa. A largura, 180 pixels, certo? Para a linha separadora, DOD, a linha subtotal, dê uma largura de 100%, dê uma altura de 200 pixels. E a cor de fundo, vamos fazer uso dessa cor. Então eu só tenho que crescer e depois colá-lo aqui. Então deixe-me mostrar exatamente o que fizemos agora. Isso é aqui, esta linha aqui. Não estou falando desse cara. Este é o que estou falando, desta linha de a. Agora, para o ponto de blob separado, agora temos que mudá-lo para explodir aqui. Dê uma altura de 10 pixels, uma largura de 100%. A posição absoluta. Vamos ter uma tela, flexionar, justificar o conteúdo para centralizar, destacar, copiar, colar, fechar o suporte encaracolado. E então temos que estilizar o Div. Deixe-me mostrar-lhe essa div de feno. Tão rapidamente temos que dar a ele uma largura de 35 pixels, raio de borda de 10 pixels. E a cor de fundo. Para esses Heron para o CSS. Temos que fazer uso da cópia laranja escura. Volte para a cabeça da tela em CSS e, em seguida, você só precisa pagar. Ok, então vigie aqui, feche o espaço. Seguro. Agora terminamos com o componente reutilizável. E na próxima palestra, veremos como podemos passar dados para o cabeçalho da tela GAS através de sondas está certo, esse cara aqui. Então, quando renderizarmos o componente reutilizável, você terá os detalhes exibidos na tela. Tudo bem, então isso geralmente é agora para esta palestra e nos vemos na próxima palestra. Tome cuidado. 25. Design de componentes de AboutMe: Bem-vindo de volta à causa. Tudo bem, então agora vamos começar a trabalhar nos componentes Sobre mim. E no final desta palestra, teremos algo tão bonito como esse. Dê uma olhada. Tudo bem, então volte para o código VS. A menos que prossiga. Para prosseguir, temos que fazer as entradas necessárias. Clique com o botão direito nos ativos. Aqui, não é? Clique com o botão direito, clique em nova pasta. E vamos chamá-lo sobre mim. Agora, abra a pasta de materiais. Está bem aqui no meu desktop, então eu só tenho que 0 problemas e, em seguida, abro o portfólio pro client SRC, ativos sobre mim. Então, agora só temos que copiar a imagem relevante para os componentes Sobre mim e colá-lo aqui. E aqui está o botão direito do mouse. Cópia. Colar. Feche-o, continue para baixo, volte para o código VS. O próximo na linha é criar o componente correspondente, um arquivo SCSS. Você só precisa abrir o contêiner do portfólio assim. E, em seguida, clique com o botão direito no Sobre mim Aqui, um novo arquivo. Isso se chamará Sobre Mim. Js cria seu arquivo CSS correspondente. Sobre mim dot css. Voltar para sobre mu j é genérico, os componentes funcionais React js. E se tivermos que importar o efeito dos EUA e aninho é importar o componente reutilizável. Cabeçalho da tela inicial de utilitários, cabeçalho da tela inicial. Vamos importar esses corvos têm 0s. Vamos importar as animações. Lindo. Agora, a linha é adicionar esses componentes à tela. Abra o test.js comum. E aqui, temos que importar os componentes Sobre mim. Vamos armazená-lo nas constantes. Então, eu só tenho que destacar isso. Mantenha pressionado o Alt e Shift e, em seguida, toque na tecla de seta para baixo para duplicar. Lindo. Então, só temos que mudar o nome para sobre mim. O componente é sobre mim. Comando S para salvar. Agora só temos que parar o servidor. Ei, você pode ver que o componente foi adicionado à tela? Volte para o código VS fechado sob lei comum test.js. Então, se esta função vai pegar quaisquer parâmetros, avisos e vir aqui e dar a esta div um nome de classe sobre mim. Container são sobre traço, contêiner traço Vamos ter outra div com o nome da classe de sobre MEU pai. Portanto, o próximo na linha é renderizar componentes reutilizáveis. Título da tela com a etiqueta de fechamento automático. E esse componente tem dois atributos diferentes. Um deles é o título e temos que dar um valor a ele. Então, vou dizer. Sobre mim. E o outro é o subtítulo. E aqui vou fazer por que me escolher? Certo? Portanto, a intenção aqui é ter esses valores passados para o cabeçote de tela nas empresas e exibi-lo na tela quando o componente for renderizado. Tudo bem, então deixe-me mostrar-lhe. Basta clicar na cabeça da tela em G, S. E se eu aqui você puder ver que estamos recebendo os valores aqui, veja prompts dot subtítulo. Portanto, com a ajuda desses prompts, estamos atribuindo um valor a esse título. E sintoma aqui estamos atribuindo um valor ao subtítulo. Portanto, se não houver valor atribuído, nada será exibido na tela. Volte para o About Me, GAS. Salve, execute. Volte para o navegador e vamos conferir. Lindo. Você pode ver isso sobre mim e por que só eu? Tudo está funcionando perfeitamente bem. E acredito que com isso, você pode entender claramente o que é o componente razoável. Portanto, o próximo na linha é assinar os observáveis para permitir um efeito de rolagem suave e desvanecimento. Então aqui eu vou fazer, vamos desaparecer no manipulador de tela, levando a tela aqui. Então, vamos verificar se a tela de desvanecimento do ponto da tela não é igual a prompts dot ID, então vamos encerrá-la aqui. Agora. Temos que implementar para efeito de desvanecimento. Agora vou fazer animações. Animações, tela de desvanecimento de pontos. Então deixe-me mostrar-lhe rapidamente Heron para a animação gs. E aqui está a tela de desvanecimento da função. Volte para o About Me j. Então temos que aceitar o documento de identificação. Lindo. Então, aqui, temos que assinar os observáveis. La e eu vamos fazer const, assinatura adequada. Role os currículos, ponto correspondem aqui nesta cruz F é componente e deixe-me mostrar você cruzar FSGS. Ok, aqui está o desvanecimento da tela atual, que é o objeto ou abstenimentos da classe de assunto. Tudo bem, role para baixo. Deixe-me mostrar-lhe aqui onde o implementamos. Então, aqui está a tela atual que se encaixa no ponto a seguir. E o que fizemos aqui foi transmitir o efeito de desvanecimento. Volte para o VGS acima. Então, vamos fazer pontos. Temos que assinar, assinar. E aqui nós só temos que entrar em desvanecimento no manipulador de primavera. Acabar de ser manipulador. Lindo. Então, para verificar se está funcionando perfeitamente bem, temos que ir até essa div com o nome da classe de contêiner About Me. Então dê um ID a isso. Props dot id comando S para salvar. Volte para o navegador e vamos conferir. Recarregar. Experimente clicando no Sobre mim. Parte inferior. Você pode ver isso? Tudo está funcionando perfeitamente bem? Você vê isso? Quando você clica no Sobre mim, é suave rolar para o componente de pilar, na verdade, é exatamente qual é a intenção. Volte para o código VS. Então, aqui vamos exibir algumas informações estáticas na tela. Para isso, temos que declarar não estáticos e armazená-los em tempos de contras. Então, aqui, vamos ter constante, vamos chamá-lo de tela, sublinhado, abrir e fechar colchetes encaracolados. E aqui vamos ter a coluna de descrição. Volte para o navegador e deixe-me mostrar-lhe. Então este é o site de demonstração e aqui está a descrição. E eu vou fazer agora é copiar, voltar ao código VS e depois colá-lo entre as aspas separadas com uma vírgula antes que o ninho e a linha sejam os destaques, que implica a lista de itens. E aqui a lista de itens retorna. Neste momento, vou fazer destaques. Então, aqui vamos ter uma área de dados a ser exibida na tela. Vamos abrir e fechar colchetes. E também aqui temos que colocar uma coluna aqui. Tudo bem, O primeiro na lista. Vamos tirá-lo. Aqui temos um desenvolvimento web e móvel de pilha completa. Só tenho que copiar. Venha aqui, cole-o. Separado com uma vírgula, volte. Copie, colado entre o tribunal, separadamente para o canto. Para evitar a repetição, só preciso avançar o vídeo. Tudo bem, agora acabei. Preencha a lista. Você também precisa pausar o vídeo no final e finalizá-lo aqui. E agora precisamos ter a cabeça sobre cabeça dele em coulomb. Abra as citações, volte aqui. Copie, cole. É tão simples quanto isso. A linha é definir uma função para mapear através dos dados acima para exibi-los na tela. Então, ei, acho que tenho que fechar o terminal para ter uma pensão completa. Aqui, vamos ter executado os destaques, configurá-lo para nossa função. Portanto, temos que mapear as constantes de tela desses dados, destaques de pontos. Deixe-me mostrar a você. Destaques. Balas, ok. Ponta balas, colchetes de ponto aberto e feche e, em seguida, abra e feche o colchete mais uma vez. Agora temos que entrar em algum argumento se eu defini-lo para nossa função. Então, aqui, vamos ter uma div com o nome da classe dos destaques. E temos que dar a ele uma chave para realmente evitar duplicação de valores. E aqui vamos ter outra div com o nome da classe do blog destacado, destaques, traço, blob, além disso para baixo. E, por fim, temos que abranger o valor. Lindo. Ok, então para uma chave, quando você fizer isso, tudo vai funcionar para você perfeitamente. Então, agora temos que exibir os dados na interface do usuário. Role para baixo até onde temos a interface do usuário aqui. Então logo após o componente razoável, teremos outra div com o nome da classe sobre mim Codd. Dê o nome da classe sobre dash, dash cod. E também precisamos de outra div com o nome da classe do perfil sobre mim. Sobre Dash me, traço perfil. Deixe-me mostrar a você. Aqui está o perfil principal, esta imagem de um feno. E também precisamos de outra div com o nome da classe de sobre traço, detalhes do traço. Por favor, sempre certifique-se de que os nomes das classes estejam bem escritos para que você não tenha problemas quando começamos a estilizá-lo. E aqui temos que exibir a descrição e embaçá-la. Então, vou dar-nos libra no nome da classe sobre traço, descrição do traço. Então aqui temos que exibir o item. Agora vou fazer a descrição do ponto das constantes sublinhadas da tela . Dane-se. Deixe-me mostrar a você. Aqui está a descrição. Precisamos de uma div com um nome de classe de about dash. Destaques do traço, nome da classe div destaca traço, cabeçalho. Bem aqui. Temos que abranger o título. Então, vamos fazer tela nas constantes do escopo, destaque de ponto, cabeçalho, seguro. Então aqui vou para o cliente cd NPS. Pontuação para baixo. Bonito, tudo funcionando como esperado. Então, aqui está a descrição. Mas estou tão surpreso que o título não esteja aparecendo. Volte e vamos conferir. Certo pessoal, há um erro no feitiço aqui. Isso deveria estar indo. Economize mais uma vez, volte. Tudo bem, aqui está o cabeçalho e você vê n. Esta é a descrição. Vamos exibir a lista de itens. Então, aqui mesmo, após a div de fechamento do cabeçalho de destaque className, vamos invocar o realce de renderização do método. Seguro, volte. E aqui está a lista de itens. Lindo. O ninho e a linha é ter as proteínas , Ei, voltar e ter um feno. Logo após a div de encerramento do ClassName sobre mim destaca. Vamos ter uma div com o nome da classe de about dash, dash. Então, agora podemos ter os corpos. O que vou fazer agora é ir para o componente de perfil e copiá-lo do comando P hat para fornecer g, s. Então aqui o corpo é copiar, voltar para o About Me gs e depois cole-o aqui. Comando S para salvar. Volte para o navegador e vamos conferir. Role para baixo. Frase bonita, este é um resultado letal que estamos esperando desta palestra. Percebi que estes não parecem bonitos, mas embora não esteja parecendo IDA, mas não se preocupe. Na próxima palestra, quando começarmos a estilizar esse componente, vamos tê-lo perfeitamente bem. Isso geralmente é para esta palestra. Vejo você na próxima palestra. Mantenha-se focado e tome cuidado. 26. Estilizando o componente sobreme: Isso é exatamente o que recebemos na palestra anterior. E tudo está funcionando perfeitamente como esperado. Foda-se quando você aquecer a bomba embutida About Me leva até aqui. Então isso significa que o Smooth Scroll está perfeitamente bem. Vejamos uma pechincha na região intestinal. E também o botão Obter Resume está funcionando conforme o esperado. Lindo. Então, agora o próximo na linha é estilizar essa aparência habitada de componente. Volte para o código VS, a menos que continue. Abra o CSS Sobre mim. E aqui começaríamos com o contêiner. Deixe-me mostrar a você. Aqui, não é? Então eu só tenho que chamar b dot, colá-lo aqui, abrir e fechar colchetes encaracolados. E vamos fazer com que ele exiba flexão, direção flexível, coluna, justifique o conteúdo para enviar. Alinhe itens para centralizar a margem. Então, vamos ter 50 pixels. Comando S para salvar, voltar para o GS são menos vincular o arquivo CSS com o componente. Que se estrague. E Ei, vamos importar sobre mim, ponto CSS, Salvar. Volte para o navegador, a menos que seja retirado. Você pode ver? Tudo bem, vamos continuar. Volte para o About Me. Estilo Css é a classe pai DOD sobre MEUS pais. E vamos dar a ele uma largura máxima de 100 pixels. E a largura 70%. O Sobre Mim, bacalhau sobre mim. Vamos ter uma exibição de flex. A largura é 100%. Sombra de caixa. Salve, volte para o navegador. Tudo está gradualmente tomando forma. Gosto disso. Então, para o perfil Sobre mim, sobre o perfil traçado me traçado. E aqui vamos dar a ele uma largura de 50% da imagem de fundo. Então temos que fazer uso da imagem que importamos anteriormente na palestra anterior. Url. Temos que acertar os ativos. Clash sobre mim. É me confrontar ponto JPEG. E espero que você se lembre quando importamos nesta imagem o tamanho do plano de fundo. Vamos fazer com que ele se curva. Plano de fundo, repita, não, repita a posição de fundo. Vamos ter seu centro. Salvar. Volte. E aqui está o perfil. Agora volte para o código VS. Temos que estilizar o Sobre mim, detalhes sobre o dash me. E ei, vamos dar uma largura de 48%. Teste alinhado. Vamos justificar isso. Adicionando 30 pixels. Salvar. Confira no navegador. Está parecendo legal. Vamos prosseguir. Então, aqui, temos que estilizar a descrição Sobre mim. Então, só vou fazer sobre me arrojado. Descrição. Aqui chamado o suporte. tamanho da fonte para a descrição é de 12 pixels. Para mim, destaques. Vamos dar uma margem a partir do canto superior direito. Nas fotos aqui, vamos ter Sarah para um destaque odiando Dodd, destaques, traço, direção. Então, aqui vamos ter a família de fontes. Poppins, barco. O tamanho da fonte, 14 pixels, margem. E aqui para o destaque, ponto, destaques. Vamos fazer com que ele exiba flexíveis. Alinhe itens ao centro. A margem. Cinco pixels, 0. Por fim, para um tamanho de telefone, vamos torná-lo seguro. Confira no navegador. Isso parece incrível, eu gosto. Você pode ver isso? Vamos prosseguir. Então o ninho e a linha devem exibir uma bala aqui, que é a bolha de destaque. Então, vou destacar o traço blob. A altura será tópico processa a largura, 12 pixels, a margem, 010 pixels e a cor de fundo. Então, vamos ter 5823. Salvar. Volte. E aqui está a piscina aqui, que é a bolha destacada. Mas eu não gosto da forma como parece um retângulo por enquanto. Temos que mudar. Ainda parece mais um tipo de coisa, certo? Então, vamos fazer isso rapidamente. Portanto, é muito simples fazer isso. Agora, tudo o que temos que fazer é aplicar o raio fronteiriço e, em seguida, torná-lo 50% seguro. Volte. Aqui está isso não é lindo? Incrível. Gostei disso. E se eu souber que você percebeu que as garrafas não estão respirando, então você vê que não há espaço entre os corpos. Volte e conserte isso rapidamente. Aqui vamos fazer sobre as opções Dash me. E então temos que segmentar o BTA destacado. Então, vamos ter que especificar a margem. Então, a partir do canto superior direito, inferior 0 e, a partir da esquerda, temos 30 pixels. Dê uma olhada. Você pode ver isso? Lindo. Tudo está funcionando conforme o esperado. Então, vamos pegar uma plataforma móvel atom e ver se ela é responsiva. Ok, é assim que ele aparece no iPad Pro. Não é responsivo. Você pode ver que o aborto está bem. Vamos tirá-lo no iPhone. Dê uma olhada. Você pode ver que eu não gosto disso assim. Tudo bem, vamos tirá-lo. Boom. Tudo está funcionando conforme o esperado. Mas, para a capacidade de resposta móvel, temos que trabalhar nisso. Então isso é tudo por enquanto, para esta palestra. Tudo bem, tome cuidado. 27. Responsive de componentes de AboutMe: Vamos aperfeiçoar Esta empresa é tornando-a responsiva, volte ao VS Code. E aqui, temos que começar com o iPad Pro como de costume. Então, uma capacidade de resposta do iPad Pro, iPad Pro. Assim, a rainha para iPad Pro é de 11 pixels. Então aqui eu vou fazer DOD sobre Dash me, taxa de pagamento. Temos que dar a ele uma largura ainda por cento. Então isso é tudo para o iPad Pro e para outras plataformas móveis. Agora eu só tenho que copiar esses. Cópia. Venha aqui, cole, feche o suporte encaracolado e venha a este lugar inalterado. Os pixels. Aqui temos a noite oito pixels para sua rainha menor que o iPad Pro. Então, quando estiver pronto, sim, aqui na plataforma móvel, queremos desativar o EMH. Então eu vou fazer isso, jogar, salvar e executar, voltar para o navegador e osso, a imagem se foi. Linda. Então agora temos que fazer os detalhes para ocupar o resto do espaço. Volte para fazer isso. Ei, eu só vou fazer o DOD sobre os detalhes tracejados. Vamos fazer com que a largura seja 100%. Salve e execute. Você pode ver esse núcleo? Volte e vamos continuar. Agora, em um dispositivo muito pequeno, o que significa em uma tela menor. Agora eu só tenho que copiar isso novamente. Feche os colchetes de coluna. E aqui temos que especificar o tamanho da tela, que é quando ele aparece em uma entorse ou com a largura máxima desligada para 66 pixels. Então eu acho que essa deve ser uma tela muito pequena. Sim. Então, a opção Sobre mim é sobre dash. Opções de Dash. Vamos fazer com que ele exiba flex, a coluna de direção flexível. Por fim, temos que posicionar os botões corretamente. Então agora eu só tenho que descer aqui sobre traço, traço, opções, ponto destacado PTA. Então, vamos ter que mesclar 24 pixels da parte superior, depois 0 no resto dos lados. Então aqui vou fazer, ok, linda. Só vou copiar esses listados aqui. Vamos fazer com que a largura seja 100. Esses santos salvam. Você pode ver que tudo aparece como espectador e eu gosto disso. Então, vamos tirá-lo em todas as plataformas. Iphone X, ok, bom iPod, bom. Ipad Pro. Linda. F15. Incrível. E, por último, no Galaxy S5 estão certos. Isto é, como resultado, estamos esperando desta palestra. Agora, o componente está tão bonito. Tudo bem, vejo você na próxima palestra. Mantenha-se focado e tome cuidado. 28. Como criar o componente de Resume e classificar com variável variável para ser usado: Então, agora vamos começar a trabalhar no componente de currículo deles. E no final desta palestra, você terá algo assim. Isso não é lindo? Certo? Então, vamos tirá-lo. Então aqui você tem a história maluca, habilidade de programação, interesses, educação, os projetos. E o resto deles. Volte para o VS Code. E aqui temos que criar o componente correspondente e adicionar o arquivo CSS. Então clique com o botão direito aqui em um novo arquivo. E aqui vamos chamá-lo de currículo dot js. Vamos criar o arquivo CSS correspondente. Clique com o botão direito do mouse Isso será retomado dot css. Volte para o componente original, gere os componentes funcionais React js, RFC e bone precisam ocultar o Explorer. E agora temos que fazer as importações necessárias. Aqui vamos importar utilitários de componentes reutilizáveis, o cabeçalho da tela inicial, o cabeçalho da tela inicial JS. E aqui temos que importar o serviço de garantia de utilitários splash, tela, TVs. E aqui temos que importar as animações. Esta função vai levá-lo adereços como parâmetro. Então, aqui vamos declarar variáveis de estado a serem usadas. Para o estado inicial será 0. E aqui embaixo, vamos ter conjuntos const, carrossel de estilo set. E os estados iniciais. Aqui vamos configurá-lo para objeto vazio. Então, agora temos que implementar o efeito de desvanecimento na rolagem suave. Então, eu só tenho que copiá-los do Comando Componente D ou Controle D no Windows e, em seguida, definir por anos e possuí-lo. Então eu só tenho que copiar tudo aqui assim. Volte para zombarias originais. E aqui eu só tenho que colar. Linda. Vamos executar esse componente reutilizável e atribuí-lo, valores correspondentes a cada atributo. Então aqui para este DFF vai ter um nome de classe de contêiner de traço de currículo, contêiner de traço de tela. Tudo bem, e aqui nesta div, teremos outra div com o nome da classe da região contém uma div, dê a ela um nome de classe de Resume, dash content. E aqui vamos renderizar o componente de cabeçalho da tela da tag de fechamento automático. E aqui o primeiro atributo é o título. E o título deve ser retomado. E o segundo atributo é o subtítulo. E aqui esta deve ser minha forma de detalhes biológicos. E é claro que agora você deve entender corretamente como o componente razoável funciona porque eu expliquei bem o suficiente na palestra anterior. Vamos adicionar esse componente à tela. Volte para o Comando OTUs P. Eu só tenho que configurá-lo aqui. OTs comuns e tem isso. Vamos importar o componente original. Importar. Retomar de contêineres de portfólio, confronto, currículo, confronto, retomar JS. E então aqui temos apenas dois destaques. Duplique esse código ou você também pode copiar e colar. Acho que te ensinei como fazer isso em palestras anteriores. Então, aqui, você deve apenas alterá-lo para o nome da tela, que é um currículo. E aqui o nome do componente deve ser currículo, desculpe. Certo. Mistura de parafina. Aqui está a mesma coisa que, ok, é um satélite o mesmo. Vamos executar o aplicativo para ver o que temos a bordo. Venha aqui para determinar. E então estamos no diretório raiz. Então eu só tenho que cliente cd. E então o NPM começa com crossovers não está definido. Volte para o VS Code. Abra o currículo deles. J está na linha 15. Tudo bem. Há um erro nas grafias de um feno. E acho que isso vem da palestra anterior. Portanto, esse é suposto ser Scroll CVs Command S para economizar mais uma vez. Vamos voltar para o navegador. Então, aqui está a região exibida na parte superior como navegação. Vamos clicar nele. Certo? Desta vez, nada acontece. Volte para o VS Code. E aqui só temos que dar uma identificação a isso. ID do ponto de props é uma string vazia. Salvar. Volte e tire mais uma vez. Então aqueça o abortamento original. Você pode ver que o componente reutilizável já foi renderizado? Então, vamos começar a trabalhar na empresa original e rapidamente. Tudo bem, então antes de prosseguirmos, acho que há necessidade linhas serem cromaticamente EXXAT de um cabelo. Só tem que fazer é voltar para o MEG é aqui. E então aqui importamos currículos de rolagem. Não sei como pronunciá-los de qualquer maneira, mas há um duplo olho de um dia. Agora eu só tenho que tirá-los e depois voltar para onde nós os utilizamos. Tem isso, só temos que limpá-lo. E então aqui está, escrito. Diz na linha 13. Vários novamente, um locatário. Linda. Então, agora volte para o navegador. Nossas gravações, tudo está funcionando conforme o esperado. Então, quando você está escrevendo um aplicativo como um profissional, isso precisa que você seja cromaticamente EXXAT. A linha aninhada é criar um componente menor razoável. Volte para as áreas visuais. E é claro que acabamos com o VGS acima, então eu só tenho que fechá-lo. E também, terminamos com as OTs comuns. Feche-o para baixo. Tudo bem, então aqui teremos algum componente menor razoável. Então aqui vamos ter um dy para o nome da classe do título da região, currículo, título traço. Também precisamos de uma div com o nome da classe de currículo traço, traço de cabeçalho, uma div, dê o nome da classe, traço de cabeçalho, bala. Então, aqui, teremos os cabeçalhos de atributo. Portanto, se um valor for atribuído ao cabeçalho do atributo, exibiremos essas setas de valor. Nada será mostrado na tela. Para isso, teremos uma renderização condicional. Então aqui vamos abranger. Vamos fazer o título de pontos de adereços como um atributo. E se o cabeçalho uma pontuação z, temos que mostrar o cabeçalho e o valor solicita o cabeçalho do ponto else. Nada seria exibido em uma tela, apenas uma string vazia e nada seria exibido na tela. Então, aqui, temos outro atributo de data. Deixe-me mostrar-lhe. Aqui está a data a partir e aqui está a data do dedo do pé. O mais simples isso. Então, se a data de origem e informou que existe, então vamos exibir. A data. Então, aqui vamos ter uma div com o nome da classe de cabeça no traço. Tomou aspas duplas e, em seguida, sublinhado aqui. Ponto de adereços até o momento. Então, setas. Se o devedor não existir, então temos que exibir uma div vazia. Vamos exibir uma div vazia. Linda. Tenho que salvar e formatar esse código com mais força, certo? Então aqui vamos ter outra div com o nome da classe de currículo, traço, traço, cabeçalho. E, por favor, não corresponda aos nomes de classe Java estejam escritos corretamente, então você não tem problemas quando começamos a estilizar o aplicativo. Então aqui, se o subtítulo existir, temos que exibi-lo e nada será mostrado na tela como de costume. Então aqui temos o subtítulo de atributos , subtítulo de pontos props. Se isso for z, então temos que mostrar o subtítulo. E o nosso. Só vamos ter uma string vazia. Tudo o que estamos fazendo aqui é receber a dúvida dos dados que seria passada do componente principal. Tudo bem, então aqui temos o subtítulo de atributos quando executamos que é componente, os atributos de head. E ele vai ter um valor, que esse valor seja especificado, então ele será mostrado aqui. contrário, se não houver valor dado aos atributos do cabeçalho, nada será exibido na tela. É tão simples quanto isso é bem aqui. Após a div de encerramento do nome da classe Iridium Subtítulo. Vamos ter outra div com o nome da classe de um currículo traço, cabeçalho, traço, descrição. Então, a mesma coisa aqui. A mesma coisa aqui. Se a descrição do atributo receber um valor, então teremos que mostrar esse valor. E nada seria mostrado na tela. Certo? Então eu não quero que essa palestra demore muito porque temos muito o que fazer. Isso é tudo por enquanto, para esta palestra, vejo você na próxima palestra. Mantenha-se focado e tome cuidado. 29. Como preparar dados estáticos 1: Vamos começar com os dados estáticos. Mas antes de prosseguirmos, temos que fazer as importações necessárias. Abriu o diretório de materiais, abra o portfólio pro client, ativos SRC. Então, aqui, no diretório de materiais, temos que copiar este pacote de revisão. Deixe-me mostrar-lhe. Isso contém o SVG é que vamos usar neste componente. Então eu só tenho que copiar. Venha aqui, cole, feche-o, feche-o. Volte para o VS Code. Vamos declarados como dados estáticos devem ser usados. Dane-se. Então, aqui vamos ter um Konstanz, chamá-lo de fraldas da região. Essa é a melhor maneira de nomear um array. Tudo bem, então você pode ver balas de currículo simplesmente porque é uma coleção de dados. Então, quando faço balas, não é uma boa prática. E, na verdade, esta é minha própria opinião, mas é boa. Você nomeia uma área com uma palavra plural. Então, aqui, vamos ter o rótulo de fosfato. Coluna. Aqui vai ser educação, logotipo da vírgula, SRC, cólon, ponto de educação SVG. Deixe-me mostrar-lhe rapidamente. Heroína para os ativos. E aqui está o currículo. Então esta é a educação como Vg aqui. Tudo bem, separadamente para o coma. E aqui, vamos ter a história da palavra. Aqui, está. Então, a mesma coisa. Temos que ter uma vírgula de coluna de rótulo e, em seguida, temos o logotipo, coelom SRC. Então vamos ter traço, história, ponto SVG. Esses, de fato, envolverão repetição. Então, eu só tenho que avançar o vídeo. Tudo bem, agora acabei com isso. Também. Você só precisa pausar o vídeo no final e concluído. Tudo é o mesmo. Tudo o que você precisa fazer é mudar o rótulo e o SVG, certo? Portanto, a linha menor do que é declarar dados estáticos para a barra de progresso de habilidades. Então, tudo é o mesmo processo. Aqui vamos ter habilidades de programação, detalhes. A Escala de Outono. Vamos tirar um fora. Temos vírgula JavaScript e, em seguida, damos uma porcentagem de classificação. Então, para mim, minha capacidade em JavaScript é até 85% de taxa gratuita para especificar sua capacidade aqui, separada por uma duplicata de vírgula. E aqui temos que mudar a escala para reagir JS. A taxa e a porcentagem dos meus js React serão. Vamos deixá-lo em 85 também. E também, estes de fato envolverão repetição. Então, eu só tenho que avançar o vídeo. Tudo bem, acabei com isso. Então, tudo o que você precisa fazer é substituir a habilidade e a taxa em porcentagem. Então faça isso por outras habilidades que você pegou e então você vai acertar. Agora de uma linha aninhada é declarar dados estáticos para mostrar que as informações são dados estáticos para mostrar que sobre o trabalho do projeto. Então aqui vou fazer detalhes de protesto const. E como você pode ver, estou usando a palavra pleura para o alpinista. Então, aqui vamos ter um título. Deixe-me mostrar-lhe. Aqui está o projeto e, em seguida, aqui estão os detalhes. Então, vamos ter um título. Então, aqui vamos ter uma coluna de título. Então eu vou passar pelo site do portfólio. Vírgula. Então temos a duração. A duração. Deixe-me mostrar-lhe. Aqui está a duração. Agora temos que fazer uso da empresa fez. Então, vou fazer 2020 a 2021. Com licença, isso deve ser dois pontos aqui, separados por uma vírgula. E então aqui vamos fazer a coluna de descrição. Volte e vamos copiar a descrição. Entre o tribunal separado por vírgula e pelo subtítulo. Então, aqui vamos incluir outro projeto. Você pode ver que temos uma loja, o site de comércio eletrônico. Olá, vou fazer agora, é duplicar esse código duas vezes. Tudo bem, então tudo o que você precisa fazer é consertar no projeto que você trabalhou aqui. Talvez você tenha trabalhado em qualquer projeto. Este deve ser o título do projeto, essa dívida Você iniciou o projeto e seguida, a data de término do projeto. Então aqui você deve falar sobre um projeto que é a descrição e aqui está o subtítulo. E a mesma coisa aplicável a todos esses tipos de eu aqui. Esses, de fato, envolverão repetição. Então, eu só tenho que avançar o vídeo. A mesma coisa que eu fiz aqui. Incluo os projetos em que trabalhei, uma data em que comecei o projeto e a data de término, a descrição e o subtítulo. Isso é exatamente o que eu fiz aqui. E você também pode postar um vídeo no seu final e escrever o meu, se desejar. Os dados estáticos para o resto dos detalhes da região. Então aqui vou fazer const, retomar detalhes. Aqui vamos ter uma div, dar a ela um nome de classe de currículo, painel de tela, contêiner, e temos que dar a chave. Então, se eu ouvir, temos que renderizar os componentes menores razoáveis. Currículo, cabeçalho, mais perto com uma etiqueta de fechamento automático. E aqui tem um atributo chamado cabeçalho. Então, vamos dar a esse atributo um valor. Eu só tenho que copiar estes, colá-lo entre as aspas duplas. E também desse componente tem outro subtítulo de atributo. Como subtítulo, é isso. Logo após a cópia? Disse que isso vai demorar um pouco porque vamos fazer tudo do zero. E temos do atributo ID. Então deixe-me dizer que não posso admissão na universidade em 214. Então eu me tornei graduado em eu digo até o momento para 18. Então você pode fazer qualquer coisa aqui como quiser. Você escreve algo aqui. Só vou copiar esse código aqui, copiar, vir aqui, colar. E então temos que mudar os valores. Então aqui temos sobre a educação. Esta é outra classe de certificado. Aqui temos o Serviço Nacional da Juventude. Então, todas essas são minhas certificações. Então você tem que substituí-lo por heróis. E aqui. E aqui vai ser de 2019 a 2020. Portanto, destaque, duplique-o mais uma vez. E então aqui temos o ensino médio. Então eu acho que todos deveriam ter isso. O ensino médio que você frequentou, o nome do mais alto legal aqui. E também temos que implementá-los para o trabalho como períodos. Então venha aqui. Além de uma vírgula aqui no final deste nome de classe div de fechamento, retome o contêiner de tela. Então aqui vamos ter uma div com o nome da classe. Embora ele tenha o mesmo nome de classe. O nome da classe será o mesmo, tem uma cópia deles daqui, venha aqui e depois cole. Agora, feche a div. E aqui temos que mudar a chave. Que períodos de traço S. Então, provavelmente, será o mesmo. Agora, eu só tenho que copiar esse componente reutilizável. Venha aqui, cole-o aqui, volte para o navegador. História do rock. Então, aqui deve estar o nome da empresa para a qual você está trabalhando atualmente. Cópia. Venha aqui no título e subtítulo. Copie a pasta. Agora, você precisa indicar se você está trabalhando atualmente nessa empresa. Então talvez eu tenha sido contratado no ano de 2020 e depois aqui não corretamente ou trabalhando nessa mesma empresa. Então, vou indicar apresentar um portfólio muito clássico com o qual estamos lidando. Agora vamos ter essa descrição. Então aqui vamos ter uma div, dar o nome da classe da descrição da experiência. E aqui vamos ter uma etiqueta de span, dar o nome da classe espanhola de currículo traço, testes de traço, bem entre essas libras. Venha aqui. Então aqui eu só tenho que copiar a primeira linha colocada. Então, por aqui, vamos ter outra div com o nome da classe de descrição experiente, a ortografia da experiência. Então eu acho que isso não está bem escrito. Então. Tudo bem. Então, aqui, vamos ter uma extensão com o nome da classe do teste de descrição do currículo, retomar traço, traço, teste. E aqui temos que voltar pelos sites, que é a página de demonstração. E então copie essas duas linhas aqui. Cole-o aqui. Tudo bem? E aqui eu só tenho que indicar com um traço. Completamente, isso é opcional. Logo após esta marca de libra. Vamos dar uma pausa. E aqui vamos ter outra guia. Então eu só tenho que copiar isso simplesmente porque é exatamente o mesmo. Linda. Venha para a demonstração do site. Copie essas linhas. Venha aqui, cole-o. Por fim, vamos pensar que devemos usar as tags de fechamento automático para elas. Também precisamos de uma etiqueta de span. Copie isso, venha aqui, cole. Volte. Aqui. Temos que copiar a última linha, assim e osso. Estamos prontos para ir. Vamos fazer uma pausa aqui e continuar na próxima palestra. Tome cuidado. 30. Como preparar dados estáticos 2: Vamos continuar com os dados estáticos logo após essa div de fechamento, nome da classe, descrição experiente. Então coloque uma vírgula aqui. Temos que processar os dados para o programa pois teremos um nome de classe. Vamos dar uma chave. Então, vou chamar as principais habilidades de programação para os detalhes da habilidade de programação. Deixe-me mostrar que você estraga tudo, para cima, aqui em cima. Então eu só tenho que copiar aqui. Vamos fazer programação DDOS dot. Agora vamos ter uma div, dar a ela um nome de classe de pai de habilidade. Esquiva de habilidades. Dê uma chave, dê uma chave. Índice. Feche o dv. Tudo bem, agora vamos ter outra div com o nome da classe da bala de cabeçalho. E também aqui, não temos uma etiqueta de meia extensão aqui para mostrar. Então, vou fazer é habilidade de ponto Q. Precisamos de uma div aqui. Q traço. Por favor, sempre assista às grafias dos nomes das classes. Tão importante. Então, vamos aplicar aqui alguns inlines, toalhas. Vou fazer estrela. Q dot escrito apresentado. Dê a esta div um nome de classe de traço. Line são os projetos. Portanto, temos que mapear o projeto para que ele seja exibido na tela. Coloque uma vírgula aqui logo após a div de fechamento do className. Retoma o contêiner queen. Dê a ele um nome de classe de um contêiner de tela de currículo e dê a ele uma chave. Então aqui temos que mapear os detalhes do projeto. Detalhes do mapa de pontos. Agora temos que alugar esse um componente reutilizável menor. Dê uma chave. Esse componente tem um atributo chamado cabeçalho. Então, vou fazer detalhes ponto, título, detalhes do projeto ponto, ponto, ponto. Então, mais uma vírgula aqui , a menos que o faça por último pelo interesse. Certo? Então, parece que os nomes das classes são os mesmos. Só tenho que copiar, colar. Altere a chave para identificar exclusivamente todas as paradas. Então, temos que alugar o componente reutilizável também. E aqui, deixe-me mostrar-lhe os interesses. Só temos o título e a descrição. E anteriormente, o que fizemos era para os detalhes do projeto. É claro que temos a descrição do subtítulo do título incontável. Deixe-me mostrar-lhe. Você pode ver a descrição do subtítulo do cabeçalho no acumulado? Nossos direitos. Então agora alguém está lutando comigo e eu gosto disso. Então, aqui vamos ter o cabeçalho, atribuir a ele um valor da mesma forma que o temos aqui. Então o ninho é a descrição. Copie esses, cole-os entre a cotação. Lindo. Então agora eu só tenho que destacar os terceiros componentes reutilizáveis. Duplique-o duas vezes ou copie e cole duas vezes. Então, aqui você só precisa mudar o título e a descrição. O cabeçalho e a descrição. Tudo bem, então deixe-me avançar o vídeo e fazê-lo no meu final. Estão certos, lindos, eles não. Portanto, certifique-se de mudar. Aqui, a cabeça e você pode ver música, qualquer música que você ama ouvir. E então, sim. Então, aqui, jogos competitivos podem falar sobre esse jogo. Você ama mais, assim como você o tem aqui. Então também, podemos copiar deles e copiar desses assim. Sim. Tudo bem. Então vejo você na próxima palestra. 31. Como criar o Ui e funções para exibir os dados de currículo na tela: Então, agora vamos finalizar o componente original. Mas antes de prosseguirmos, temos que fazer isso. Tudo bem, então eu percebi que estes vieram na necessidade dos códigos, eu só tenho que retirá-los deste lugar. Venha para o topo de um aqui, cole-o aqui. Certo. Agora, role para baixo. Agora temos que definir uma função para o Caruso. E vou chamá-lo, vamos ter uma variável de altura definida. Vamos novo Kouros deslocar, abrir e fechar colchetes encaracolados. E então temos que dar uma coluna de estilo, abrir e fechar colchetes encaracolados. Aqui, vamos ter uma transformação. Em seguida, traduza Y, que é o que, um eixo y. Agora, abra e feche colchetes. E aqui vamos ter essas aspas duplas. Então, agora vamos fazer compensações de carrossel. Aqui vamos pegar um novo Caruso. E aqui vamos definir o select para o índice de marcadores e, em seguida, escolher o índice diretamente no seu telefone. Salvar. Agora acabamos com a função carrossel. Para que essa função seja chamada, temos que ativar o onclick. Por aqui. Vamos ter uma função. Então, só temos que mapear as balas de currículo. Estou mostrando você no topo aqui em uma região balas vírgula k e aqui os ícones no rótulo. O ícone no rótulo. Então, sim. Tudo bem, então estamos bem aqui é isso. Agora vou fazer balas originais. Mapa de pontos. Claro que agora você deve estar muito familiarizado com o mapa. Defina para nossa função e aqui, abra e feche colchetes. Então, aqui vamos ter uma div e especificar o onclick. E aqui vamos invocar o identificador kairos, nossa função. Agora dê um nome de classe. Agora temos que condicionar o nome da classe para habilitar a estilização da navegação selecionada. Então eu tenho menos tempo o código e deixe-me mostrar-lhe. Agora vou fazer se índice, marcador selecionado, índice. E vamos mostrar esse nome de classe selecionado dash, bullet. E vamos mostrar bala 90. Então, basicamente, deixe-me mostrar, por exemplo, a educação não é clique e, em seguida, não está selecionada. Então, agora, quando eu clico na educação, você verá que a cor da fonte ficará branca. Você pode ver que isso é como resultado da declaração condicional para estilizar os fogões com base na condição. Tudo bem, então agora aqui a condição não é clicar, então você vai vê-lo, nosso histórico de trabalho nele, tipo uma fonte escura. Então, quando eu clico nele, você perceberá que uma fonte realmente se tornou branca. Os dados mais simples. Então, isso significa que quando o índice é igual ao índice de bala selecionado, temos que estilizar essa classe para que os telefones sejam brancos. E a linha é dar uma chave. Então aqui vamos ter uma tag IMG com o nome da classe, traço de balas, logotipo, menos mais perto com uma tag de fechamento automático. Src, abra e feche os suportes encaracolados. E temos que exigir que o E fez todo o ícone digamos exigir espaço, abrir e fechar colchetes. E então temos que segmentar o pacote de ativos. Squash, currículo. Aqui, abra e feche o suporte encaracolado, balas, ponto, logotipo, SRC e a conexão de internet de arte. Portanto, isso significa que se a imagem não for exibida, vamos exibir esse teste. Agora vamos passar para a região T2 é que ela seja exibida na tela. Vamos ter uma função para isso. Bem aqui. Vamos ter uma função obtém telas de currículo, dar a ela um nome de classe de um currículo, traço, detalhes, traço, setas para cima. E aqui temos dois detalhes verdadeiros. Detalhes, salvamento de pontos . Depois do componente de cabeçalho da tela. Vamos ter uma div com o nome da classe do currículo dash. E aqui outro nome de classe div, retomar traço, balas, balas, contêiner, bala, ícone, isso. E vamos ter um IV, dar a ele um nome de classe de balas. Agora não temos informações que obtenham a função de bala de S para salvar, certo? Já que está tudo bem. E, por último, após a div de fechamento, motivo className o bool. Vamos ter outra div com o nome da classe de dodge, balas, detalhes do traço. Temos que invocar que obter a função de telas de currículo S para salvar. Volte para o navegador e vamos conferir. Recarregar. Nada foi devolvido da renderização. Isso geralmente significa que uma instrução de retorno está em ritmo. Vamos verificar qual é o problema. Vamos verificar os dados estáticos. Aqui no componente reutilizável. K caras. Dê uma olhada. Agora aqui está. Não é bem escrito, sinto muito por isso . Isso é correção. Temos que retornar a interface do usuário. E é aí que está o problema. Então agora vou destacar esses cortes extras colados aqui. Você só precisa limpar o ponto e vírgula. Com dias haverá o Command S para salvar. Volte para o navegador e confira. Role para baixo. Este é exatamente o resultado estamos esperando desta palestra. Então, na próxima palestra, começaremos a estilizar este aplicativo. E, de fato, vai ficar extremamente bonito. Vejo você na próxima palestra. Mantenha-se focado e tome cuidado. 32. Estilizando os componentes de currículo: Vamos começar a estilizar seu componente de currículo. E, como você pode ver na tela, não há espaço para diferenciar entre o componente escrito e o componente. Aqui está o componente do meio. Aqui está o componente original. Outra coisa em que quero que você se concentre aqui. Você só precisa dar uma olhada no lado esquerdo da tela. Você pode ver que os ícones não estão aparecendo, que são os SVGs para educação, a história do rock, as habilidades de programação e o resto do dia. Então, temos que consertar todas essas coisas nesta palestra. Harold para código VS, a menos que prossiga. Que se estrague. Aqui, não é? Agora, sempre que você precisar de uma imagem de um pacote, você tem que vir aqui e depois fazer o padrão de ponto. Acho que já lhe disse isso na palestra anterior. Então, para minha opinião, isso pode ser um problema com a versão. E, a propósito, essa é minha própria opinião. Então Heron para ler CSS e menos prosseguir. Começaremos com o contêiner do motivo. Então, vou fazer o contêiner de currículo de ponto. Deixe-me mostrar-lhe rapidamente. Aqui no turismo JS. Role para baixo. E aqui está isso. Tudo bem? Vamos ter um display flex. E realmente temos feito esses fósseis UNC. E acho que agora é bom explicar exatamente o que isso faz. Quando um contêiner é configurado para exibir flex, ele expande os itens para preencher espaço disponível ou reduzi-los para evitar estouro. É tão simples quanto isso. Agora vamos alinhar os itens ao centro. A direção flexível. Coluna. Justifique o centro de conteúdo. A altura média. Vamos fazer com que ele se adapte ao conteúdo. A margem, 120 pixels. Para ver os efeitos na tela, temos que vincular o currículo deles com o arquivo CSS. Então vá para o turismo GAS, estrague a lava aqui temos que importar regime dot css, salvá-la no navegador. As taxas estão gradualmente tomando forma. Motivo CSS. E aqui temos que estilizar o cartão. O cartão servirá como um contêiner onde as informações da prisão ficarão. Vamos ter um display flex. Dê uma altura de física, a largura dos pixels de 10 a 100 pixels. Salve-a no navegador. Você pode ver agora? Então, vamos dar a isso uma cor de fundo que você possa ver o que estou falando. Isso é apenas para maior clareza. Cor de fundo. Vamos fazer tomate. Salvar. Volte para o navegador. Agora, você pode ver, então isso salvará como o contêiner para o resto dos itens. E agora os ícones aqui. Quando eu tiro a cor de fundo, o cabelo no navegador. Você pode ver agora, parece que o ícone não é de certa forma simplesmente porque o fundo é branco e o ícone em si é branco. Vamos prosseguir. A razão pela qual Booleanos, região de pontos, traço, balas. Vamos dar uma altura de 100%. A sombra da caixa, 15 pixels. Há nove pixels por 15 pixels, e a cor da sombra da caixa em f, 2 a 3, cinco, salve-a no navegador. E aqui está a sombra da caixa. Agora vamos especificar a largura e deixar tudo limpo. Com tantas crianças, 30, 20 pixels, salve-a no navegador. E aqui está isso. Você pode ver a mensagem M linha é o motivo dos detalhes das balas. Então eu acho que ele tem dois destaques. Pegue, venha aqui, cole, feche os suportes encaracolados. Tudo o que precisamos fazer é detalhes. E, por favor, sempre corresponder aos nomes de uma classe são soldas, Paltz, o flex grow. Especifique um aqui. A largura. Isso deve ser 100 pixels. Estouro, aquecimento e preenchimento. 0, 0. Seguro. Novamente, vá para o navegador e embaça-o. Agora, para a descrição da experiência, experiência de ponto, traço, descrição. Esteja atento às grafias estão certas. Nós vamos ter a margem. Dez pixels da parte superior. 0 no resto dos lados. Alinhe. Justifique, especifique a largura máxima, 100%. Certo? Então, pela razão, os detalhes do Cairo está nela no navegador e deixe-me mostrar-lhe. Agora, clique em qualquer um dos rótulos. Vai exibir os detalhes do correspondente. Então, vamos experimentá-lo no histórico de trabalho. Você vê isso? Habilidades de programação, projetos, educação? Tudo bem, embora esteja aparecendo bem, mas isso não é o esperado. Aqui para o currículo do ponto VS Code, detalhes do traço. Esquiva. As regras do carro são quando qualquer um dos rótulos é clicado. Queremos que seja rolar para cada detalhe correspondente. Então, vou fazer a transição, transformar. Vamos torná-lo seguro. Heroína para o navegador. E agora temos que recarregar aqui no histórico de trabalho. Você viu que é lindo. Gosto de TI. Projetos de educação. E agora quero mostrar algo com interesse. Você pode ver que há um espaço vazio aqui? Não se preocupe. À medida que avançamos para estilizar esse componente, tudo aparecerá como esperado aqui para o código VS. Role para baixo. E agora, para o contêiner de bala, contêiner de traço de pontos, vamos fazer com que ele exiba flex, alinhe itens ao centro. Vamos dar uma altura, 101%, 100%. O que faz novamente, o parente da posição, salve-a no navegador. Agora, tudo no contêiner de bala é estilo embutido como as balas. balas especificam a largura de 80%, posição também, relativa. E o índice Z. Para a bala em si. Quero dizer, todos esses rótulos, incluindo os economistas pontuam balas. Vamos ter um display flex. Alinhe itens ao centro. A cor de fundo. A cor de fundo está correta. Espero que você esteja familiarizado com essa cor. Dada a altura de 40 pixels. Margem, 15 pixels da parte superior. À direita, pixels Sarah, preenchimento, 0 pixels. Com licença, são oito pixels. Raio fronteiriço. Um raio de borda será de 20 pixels. A largura 30 pixels. Transição. Salve-a no navegador, e aqui estão os resultados. Tudo de bom. Agora, você pode ver o que eu concentrei meu mouse nos rótulos que eu queria mostrar um ponteiro. Então, vou fazer Salvar novamente, vá para o navegador. Agora dê uma olhada. Você vê que isso está certo. Em seguida, estão as balas rotuladas. Bullets dash, rótulo. O tamanho da fonte. 14 pixels. O espaço em branco para cima. A família da fonte, semi-tigela. Confira no navegador. Você vê, você pode ver que tudo está tomando forma trimestral? O ninho é o logotipo das frangas. Vamos dar os 16 pixels altos, margem. 0 pixels mesquinhos, heroína para o navegador. Agora você pode ver que os logotipos estão bem espaçados. Pode ver, você sabe, agora para os ícones de bala, balas de pontos, traço, posso dar-lhe uma largura de 34 pixels. Altura, 100%. Índice Z 1. Vamos dar a ela uma cor de fundo. Como de costume, cor de fundo. Vamos tirá-lo no navegador. Você pode ver agora este bar aqui? Mas queremos que os logotipos dois assentos aqui. Então, para isso, vamos ter uma posição. Vamos torná-lo absoluto. Salve-a no navegador. Lindo, eu gosto aqui no topo do VS Code. E para o ícone de bala. Agora, para as balas selecionadas, deixe-me mostrar que você não tem gás de turismo e aqui em baixo na função. Tudo bem, então aqui está isso. Acabamos de estilizar a bala e vamos estilizar a bala selecionada também. Então deixe-me mostrar quando qualquer um dos rótulos é clicado. Queremos que ele seja destacado. Não surgiu CSS. E ei, vou fazer balas de esquiva selecionadas por pontos. Só precisamos especificar a cor. Vamos torná-lo branco. A largura. 100% seguro. Lindo. Agora clique no Projeto DOC, história do rock, educação. Certo? Vamos prosseguir com o contêiner de tela. Então agora, depois desse interesse oculto, deixe-me mostrar que você pode ver isso? Temos que corrigir esse problema. Dot dash, contêiner traço. Vamos ter um display flex. E a direção flexível. Cólon. Justifique o conteúdo. Espaço uniformemente. Dê uma altura. 360 pixels. Dê a ele uma largura. 100%. Seguro. Ela no navegador. Agora você pode ver que tudo está certo no cartão, como suspeita? Heroína para VS Code. Role para cima. Agora vamos especificar a cor de fundo deste catálogo mais tempo. Nada está saindo do carro. Tudo está certo no cofre. Rolar para baixo até menos de linha é o motivo pelo qual a região da cabeça traço, retomando o cabeçalho. Dash, traço indo. Rapidamente, tão feliz em posicionar o parente. É assim que mostramos flex. Justifique o conteúdo. espaço entre a linha é a cabeça e os booleanos. Cabeçando, traço, bala. Dê uma posição. Absoluto, esquerdo menos 30 pixels. A altura e a largura, 15 pixels. A parte superior é de 50 pixels. Vamos especificar a cor de fundo. E desta vez vamos torná-lo laranja. Salve isso no navegador e vamos destacá-lo. Então, aqui estão as balas retiradas no histórico de trabalho. E aqui a linha sólida é para torná-lo bem simples, então você só precisa fazer o raio de fronteira. Faça isso 50%. Volte para o navegador e ouça que a evidência aparece bem. A linha MSDN é o motivo de decapitação, pontos, traço, cabeçalho. E sempre certifique-se de que os nomes de sua classe estejam bem escritos. Um tamanho de fonte, 14 pixels. O curso font-family que você já deve conhecer, papoulas, semi Boulder, a cor da fonte. Então, vamos dialisar a descrição do cabeçalho do motivo, pontos, traço, descrição. Basta especificar o tamanho estrangeiro de pixels. Alinhe, justifique tomar forma. Tudo bem, então a linha é a data de um aqui, que é a duração. Você pode ver na borda direita da tela? Vamos destacar esse ponto semanal, título, traço, data, certo? Então, hum, vamos especificar a cor de fundo. Claro, vamos fazer com que seja laranja escuro. Copie, cole-o aqui. Dê uma festa. O tamanho do telefone. Deve ter 14 pixels. Vamos dar a ele um raio de borda como 14 pixels. E, por fim, queremos que a cor, que é a cor da fonte, seja branca. Refúgio seguro para o navegador. E aqui a linda cabeça para o código VS. Então, vamos começar a estilizar a seção de habilidade, que é esse ponto q bar, traço de habilidade pai. Vamos fazer com que ele exiba flex. E a coluna de direção flexível. Para nós temos 50%. Agora, para o programa em contêiner de aço, contêiner de habilidade de programação, vamos fazer com que ele exiba flex. E a direção flexível vai estar errada. Alinhe itens ao centro. Justifique o conteúdo. Espaço entre o envoltório flexível. Qual é a porcentagem de habilidades? traço de habilidade de ponto. Então isso mostrará a força de suas habilidades de programação. Agora, vamos fazer posição. Vamos torná-lo relativo. Dê uma altura de 15 pixels, 70%. E, claro, temos que especificar a cor de fundo, então eu só tenho que copiá-la daqui simplesmente porque ela vai ser da mesma cor. Salve heroína no navegador. Certo? Então, temos esse resort estranho, ei, qual poderia ser o problema? Ok, segure no código VS. Qual é o problema? Vamos verificar todos os pais, tudo legal aqui. O contêiner de habilidades de programação. Estes são nossos amigos certos. Vamos fazer esses dois para embrulhar, certo? Então, o flex wrap será que Rob tinha no VS Code. E boom, tudo como esperado para a barra de porcentagem ativa. Então aqui vou copiar esses. Cole, feche o suporte encaracolado. E aqui, dot dash, traço. Vamos fazer isso rapidamente. Claro, a altura será a mesma. Só vou copiar a transição de pasta. E desta vez, a cor de fundo indicará sua habilidade. Então, temos que especificar, ei, é seguro? Lindo. Agora você pode ver que tudo está funcionando conforme o esperado? Eu gosto que tivesse até o VS Code. E, por último, para a tag span, à direita, na classe pai de habilidade. Então, ele precisa copiá-los. Venha aqui. Cole, feche os suportes encaracolados. Vamos ter a tag span, a família da fonte, o tamanho da fonte, 16 pixels. E a cor vai ser laranja escura. A cor da fonte, laranja escuro. Seguro. Tudo bem, então vamos entrar no navegador e ver o resultado final. Lindo. Retire isso na educação. Dentro de Qu, whack, história, programação, habilidade, projeto, interesse. Tudo está funcionando como espectador e eu gosto disso. Então, quando você verificá-lo na plataforma móvel, você perceberá que ele não é responsivo. Consegues ver o Moire? Isso seria corrigido na próxima palestra. Então isso é tudo por enquanto, para esta palestra, vejo você na próxima palestra. Mantenha-se focado e tome cuidado. 33. Receita responsibilidade: Tudo bem, então agora vamos tornar os componentes do currículo responsivos. Heroína, então VS Code. Vamos começar com o iPad Pro. Estilo como cartão de currículo. Retomar o traço. Dê a ele uma largura de 80 pixels. Rindo por isso. Então, desça aqui. Agora temos que estilizar os detalhes originais da bala. Ponto de rádio, balas de esquiva, detalhes do traço. Especifique o preenchimento. Certo, então terminamos. E para o iPad Pro, agora vamos continuar em plataformas móveis de prisão. Como destacar essas garras Baseadas, feche os colchetes encaracolados. E aqui temos que especificar os pixels para telefones celulares. 1023 ponto retomar o conteúdo como exibimos o flex e a coluna de direção flexível. Alinhe itens para enviar ninhos para as balas. Balas. Ok, então temos que colocar um ponto aqui simplesmente porque é um nome de classe. E as balas terão o tecido de 90%. Para o cartão de região. A altura. Vamos fazer com que ele se encaixe no conteúdo. Vamos ter um display flex. E a coluna de direção flexível. A margem, 30 pixels alinha itens. Centro. Claro que a largura será de 90%, então vou pegar colá-la aqui. Agora, para os detalhes das balas do currículo, ponto retomar. Detalhes do traço de bala. Dê uma altura. 360 pixels. Dê a ele uma largura de conteúdo de ajuste. Especifique o preenchimento, 0. O motivo da bala. Claro, isso deve ser lido as balas. Dê uma largura de 100%. Margem, 30 pixels, 0. Por fim, para as balas esquiva selecionadas do ponto de bala selecionado. E vamos dar uma largura de 100%. Então, vou apenas destacar, pegar, vir aqui, colar. Tudo bem, então se você está seguindo minha liderança, você definitivamente obtém o mesmo resultado comigo. Salve-a no navegador. Vamos recarregar. Em seguida, coloque-o em plataformas móveis. Aqui está no iPhone cinco. Pontuação para baixo. Lindo. Agora você pode ver? Excelente. Tudo bem, vamos tirá-lo no iPhone X. Perfect Guys. Vamos gritar. No iPad Pro. Incrível. Adoro isso no iPad. Dê uma olhada. E, por último, menos retirado na cláusula do iPhone 6, 7 e 8. Tudo parece bom como espectado. Então, este é de repente o resultado que estamos esperando desta palestra. Tudo parece bom e eu gosto disso. Tudo bem, então isso é tudo por enquanto, para esta palestra. Vejo você na próxima palestra. Mantenha-se focado e tome cuidado. 34. Componente depoimentos e carrinho Testimonial: Bem-vindo de volta aos carros. Tudo bem. Vamos começar a trabalhar no componente depoimento. E no final, teremos um depoimento muito bonito como este. Dê uma olhada. Você pode ver isso? Isso não é lindo? Tudo bem, então vamos começar rapidamente. Volte para o código VS. o botão direito no depoimento de bolso. Aqui está, clique com o botão direito? E agora vamos criar seu componente correspondente. Então, aqui um novo arquivo. E isso seria chamado de ponto de testemunho js. Vamos criar o arquivo CSS correspondente. Clique com o botão direito no depoimento. Novo arquivo. ponto de testemunho css é lindo. A próxima linha é instalar o OWL Carol é 0. Então ela para o terminal. Bem aqui no terminal, estou no diretório raiz. Então, vamos para o cliente. Para isso. Só vou fazer um cliente de CD. E aqui eu vou fazer npm install, React dash, traço cruzador. Para prosseguir. Aqueça a tecla Enter no teclado. A instalação está em andamento. Instalado, bem-sucedido. O próximo na linha é vincular este projeto ao jQuery. A fábrica poderia ajudar e copiar o script jQuery. Materiais. Poderia ajudar nossa pontuação para baixo. Então aqui temos o script jQuery, destaque, cópia. Volte para o código VS. Agora vou procurar o index.html. Prefiro procurá-lo dessa forma. Então você pode defini-lo no Explorer. Role para baixo além do script jQuery aqui. Salve o projeto. Em seguida, feche o index.html, vá para o depoimento, gere o componente funcional React js. Então aqui importamos o OWL Caruso do React dodge OWL kairos. Volte para o código, como poder mais tempo. E aqui temos que copiar esta Importação. Cópia. Por favor, não copie esses aqui. Este é apenas um título e vários por que eu coloquei esse sinal de comentário aqui. Então, não copie essa linha, certo? Essas são as linhas necessárias. Copie, volte para o código VS e cole. Então, vamos importar o cabeçalho da tela, que é o componente reutilizável. E é claro que agora você deve saber como fazer isso. Cabeçalho da tela inicial de utilitários, cabeçalho da tela inicial GAS também é importar esta mira viz uma visualização confronto de utilitários. E aqui também temos que importar a animação é o próximo na linha é implementar o parafuso suave e o efeito de desvanecimento. Portanto, eu só tenho que copiar isso de mim. Então, vou colá-lo. Lindo. Tendo feito isso aqui no Steve, vamos renderizar o cabeçalho da tela. E tem o título de atributos. Aqui vamos fazer depoimentos. E, claro, tem subtítulo de atributo. Aqui vamos fazer fazer aqui. Vamos ter uma seção com o nome da classe de uma seção de depoimento. Sei que a maioria de vocês esperava que fosse dv, nome da classe da seção de depoimentos. E aqui vamos dar a ele um ID, props dot ID. Portanto, esta função vai escolher melhora a segurança. Agora temos que adicionar esses componentes, mas a tela comum P. E então vou definir botas comuns. E aqui, vamos importar depoimentos do depoimento de barra de contêineres de portfólio. Testemunho. Lindo. E agora vou duplicar esse código. Aqui. Temos que mudar o nome para depoimento. E aqui o componente é depoimento. Volte para o terminal e vou fazer npm, começa. Lindo. Agora temos um depoimento exibido na tela. E aqui está o componente reutilizável. Ferrar a menos que a verificação da ninfa apareça como navegação na parte superior. Aqui está que você pode ver isso quando você clica neste depoimento para os componentes do depoimento. Lindo. Volte para o VS Code. Não precisamos mais das batatas comuns. Feche-o para baixo. E também não precisamos do sobre mim. Feche-o para baixo. Então, agora estamos no testemunho JS. Então, à direita, nesta seção, teremos uma div com o nome da classe do contêiner. E certo, neste contêiner, teremos outra div com o nome da classe de linha e um direito nessa função. Então temos que chamar a OWL Caruso. Então eu vou fazer OWL e ei, é lindo? Então, aqui vamos dar o nome da classe para as setas azuis do traço. E vamos dar uma identificação, testemunho de ARF, traço testemunho, carrossel. E aqui vamos ter outra div com o nome da classe de. Então este é um nome de classe Bootstrap, coluna, traço 12. E aqui vamos ter uma div, dar a ela um nome de classe desses itens T dash e escrever no teste o item. Também teremos uma div com o nome da classe do comentário S T dash. E aqui vamos ter uma tag p. Isso é apenas para o trabalho certo. Tudo bem? Então, nessa tag p, já tenho um write-up. Então eu só tenho que voltar para o código. E aqui você vai ver testemunho. Agora eu só vou copiar essas linhas de hey, venha aqui, cole-as. Certo? Então, vamos formatar esse código com o direito do mouse em Formatar documento com. Você pode ver isso? Incrível. Queremos que isso apareça como uma citação. Então o que vou fazer agora é encerrar esse testemunho com uma etiqueta I. Em seguida, podemos especificar o ícone. E aqui eu prefiro ter a etiqueta de fechamento automático. Então aqui vamos ter um ClassName, uma classe bootstrap de FASFA, traço, traço, esquerda. Então, isso gerará o ícone de aspas à esquerda. Agora eu só tenho que copiar isso. Venha aqui, cole, mude para tribunal logo após a tag p de fechamento. Vamos ter uma etiqueta UL. Certo? Nesta tag UL. Vamos ter a tag LI aqui. Vamos ter uma etiqueta I. Agora só queremos implementar a taxa e os ícones. Deixe-me mostrar-lhe rapidamente. Então eu só tenho que parar esses comandos C para parar o amino. Tudo bem, então é isso que queremos implementar. Os ícones de classificação aqui. E essas são as aspas duplas que acabamos de implementar. Você pode ver, então é exatamente assim que o testemunho aparecerá na tela. Então, aqui, antes de prosseguirmos com outras coisas, temos que manter esta tag UL, um nome de classe, traço. Tudo bem, então agora vamos nos concentrar nas tags I. E aqui vamos dar a isso um nome de classe, FASFA dash. Então eu também prefiro ter a etiqueta de fechamento automático. Agora vamos destacar a tag LI, copiá-la e colá-la. Cole-o de novo e de novo. Então aqui vamos ter FASFA dy dash, sair. Assim, oferecendo tags LI e role para baixo. E aqui vamos ter uma div, dar a ela um nome de classe de clientes traço no outono, certo? Nas informações do cliente. Vamos ter a foto do cliente, o nome e a posição do cliente. Então, para fazer isso, temos que importar as fotos necessárias. Seja o pop-up, o explorador, replicon público aqui na Nova pasta. E isso se chamaria IMG. Volte para a pasta Materiais aberta. E aqui está o testemunho, certo? No pacote de depoimentos, temos todas as imagens desnecessárias que são relevantes para o componente depoimento. E aqui o agora abre o portfólio pro client SRC, certo? Temos que procurar o público. E aqui está o IMG, que foi criado há alguns segundos. E agora eu tenho que voltar, copiar todo esse pacote, que é o testemunho. Cole-o diretamente dentro do IMG. Comum V. Bonito. Feche-o, feche-o. Volte para o código VS e, em seguida, vamos conferir. Aqui está o IMD. Clique para abrir e aqui está o depoimento. E todas essas são as fotos relevantes. Então aqui vamos ter a tag IMG, SRC. Temos que fazer referência à classe de depoimento img slash de bolso . Agora queremos fazer uso desta foto. Tennessee. Então o nome é Lady dot PNG. Agora, dê uma conexão estranha sem internet. As probabilidades seriam exibidas na tela quando houver um problema ao carregar a imagem. Salve, volte para o navegador e odeie. Então, agora vamos especificar o nome do cliente. E o que vamos usar H5 para isso. Então eu vou fazer com que eles vejam dominar. Agora, para a posição. Vamos usar uma tag p para isso. Então, vamos supor que essa senhora é uma CEO. Vou fazer CEO, global. Salve, confira. Então aqui está o nome do cliente. E abaixo está a posição. Lindo. O ninho e a linha devem duplicar esse código três vezes. Ou você pode copiar e colar três vezes é o mesmo. Então, assista-me enquanto eu copio de uma div com o nome da classe de colagem ou 12. Eu tenho que deixar isso tão claro para você para que você não tenha problemas. E esta div, NCAA das linhas 32, linhas 67. Então me veja como eu destaque. Agora, vou manter pressionada a tecla Shift e a seta para baixo no seu teclado. 3 vezes 1, 2, 3. E isso economiza? Volte para o navegador, recarregue. Você pode ver essa pasta? Por enquanto? Não vamos ver em efeito de garantia simplesmente porque não implementamos esse Caruso. Tudo bem, então terminamos com a interface do usuário. E na próxima palestra, implementaremos os kairos. Vejo você na próxima palestra. Mantenha-se focado e tome cuidado. 35. Implementação Testimonial: Tudo bem, então agora vamos trabalhar no testemunho kairos. E no final desta palestra, você terá os depoimentos rolando da borda direita da tela para a esquerda para fora da tela. Vamos começar rapidamente. Ela no código VS. Por aqui. Antes de prosseguirmos, temos que fazer as alterações necessárias. Comando B para abrir o Explorer. E então deixe-me mostrar-lhe aqui o ponto de testemunho CSS. Quando passei pela palestra anterior, percebi que os depoimentos, CSS, não foram escritos corretamente. Então agora só precisa fazer é clicar com o botão direito do mouse no CSS de testemunho e clicar em Renomear. Por aqui. Certifique-se de que o que você vê na tela agora é um nível mesmo com o que você tem no seu código. Então você tem que fazer as correções necessárias. Anteriormente, havia um aqui. Deixe-me mostrar-lhe assim. Então tudo o que você precisa fazer é limpar o OH e depois aquecer a tecla de retorno do teclado. Lindo. Nest, role para baixo. Deixe-me mostrar-lhe. Eu adicionei algumas imagens do cliente. Então aqui está a senhora ponto PNG. E quando você desce para o próximo cliente, eu tenho Mike dot PNG. Então você pode realmente alterar todas essas imagens. E essas imagens estão aqui em um pacote de depoimentos. B, role para a república. Aqui, IMG, e aqui está a senhora ponto PNG. Png e Mike dot PNG. Certo. Feche o testemunho JS. Tenho que trazer o seu próprio de novo. Role para cima. Agora vamos implementar as opções de const do carrossel e, em seguida, defini-las para objetos vazios. E aqui vamos ter o loop para ser verdade. Assim, podemos ter uma repetição constante dos testemunhos. Para margem. Vamos separar 0 com uma vírgula e, em seguida, nervo aqui, você pode torná-lo verdadeiro ou falso. E emita em limites, certo? Ilimitado como Lewis dele, mas para separá-lo com uma vírgula e, em seguida, faz essas operações booleanas. Então, vamos torná-lo verdade. Você pode desativá-lo na sua extremidade definindo-o como falso. Reprodução automática. Queremos isso através de uma velocidade inteligente. Então, quais são as portas de reprodução automática, quando você abre o navegador, que é o site, você não precisa clicar em nenhum botão para o depoimento comece a rolar. Então isso será feito automaticamente. Em comparação com a velocidade para a qual esses depoimentos vão rolar da borda direita da tela para a esquerda para fora da tela. Você pode decidir aumentar a velocidade e também decidir reduzir a velocidade. Agora, é hora de torná-lo responsivo. Esses itens, vai ser um. Então eu só tenho que destacar e depois duplicá-lo duas vezes. Por aqui. Não se preocupe, vou girar todas essas guias para você. E aqui vamos ter 768. E, por fim, vamos ter 100 e monitores que queremos que sejam três. Então, se eu ouvir alguma tela dentro de 0 a 768 pixels, o testemunho aparecerá uma coluna e uma linha, certo? Em. No laptop, desktop e iPad, ele aparecerá em três colunas. E apenas dispositivos menores, como o iPhone ou a Samsung, ele vai aparecer apenas um dois pontos, certo? Sim, então foi exatamente o que fizemos aqui. Salve, role para baixo até onde você tem o OWL Caruso. Agora aqui vou abrir e fechar o suporte encaracolado. Agora temos que levar para as ações op. Salve, volte para o navegador e vamos conferir. Você pode ver que é o quão bonito eu gosto disso. Agora temos o depoimento rolando da borda direita da tela para a esquerda, fora da tela. Tudo bem, então isso geralmente é para esta palestra. E na próxima palestra começaremos a estilizar este continente e então tudo ficará bem. Vejo você na próxima palestra. Mantenha-se focado e tome cuidado. 36. Componente de depoimento com estilo: Tudo bem. Então, vamos começar a estilizar o componente depoimento. Heroína para VS Code. Abra o CSS depoimento. E aqui está isso. Feche o comando Explorer B. Aqui mesmo. Vamos começar com a seção de depoimentos. Seção de depoimentos. E o preenchimento. Vai ser 80 pixels. Existem 80 pixels. O URL da imagem de fundo. E se eu ouvir, temos que importar a imagem que queremos usar para o plano de fundo. Agora, abra a pasta de materiais. Ele precisa ir para uma área de trabalho onde está localizada na minha extremidade. Aqui estão os materiais, n, aqui está o depoimento ou foi aberto o portfólio pro cliente SRC ativos. Então, vou arrastar isso para o lado. Volte. Então, vou fazer é copiar o bolso inteiro. Cópia. Venha aqui bem nos ativos. Vou colar, fechá-lo, fechá-lo depois seguir para o VS Code. duplas aqui. Temos que avançar algum passo à frente para aquecer o SRC. Src slash ativos. Testemunho. N. Aqui está a imagem de fundo. Bitty dash um ponto JPEG. A posição de fundo. Vamos torná-lo centralizado. O anexo em segundo plano. Vamos consertá-lo. E a posição. Vamos fazer com que isso se relacione. Vejo você. E para o índice z, índice de traço Z, vamos torná-lo menos um. Salvar. Volte para o testemunho JS e menos vincule-o ao arquivo CSS. Role até o topo. E aqui eu vou fazer importar ponto de testemunho css, salvá-la no navegador e vamos conferir. Recarregar. Certo? Ok, então aqui está o plano de fundo. Então, quando eu rolar para o topo, você verá o plano de fundo sendo corrigido na tela. Você vê que o plano de fundo não está se movendo. Não está mudando simplesmente porque temos o anexo em segundo plano a ser corrigido. Agora, você vê bem, certo. Estamos no ninho CSS depoimento. Temos que fazer a seção de depoimentos antes. Então, vou apenas copiar esses. Cole, feche os suportes encaracolados. E aqui vamos ter dois dois pontos antes. E aqui vamos ter o conteúdo vazio. E a posição absoluta. A esquerda 0, o topo 0, a largura, 100%, a altura, 100%, o índice Z. Então, vou ter isso copiado porque é exatamente a mesma equipe. A opacidade não terá 0 de Harvard, ele cinco. Agora vamos ter a cor de fundo para ser. Tudo bem, então salve-a no navegador e vamos verificar. Quão bonitas são, certo? Então, quando você olha de perto, você perceberá que a imagem de fundo agora é transparente simplesmente porque colocamos outra barra em cima dela e, em seguida, especificamos a opacidade. Deixe-me mostrar-lhe rapidamente. Tinha no VS Code e aqui está o que o tornou transparente, certo? Então, quando eu reduzir a opacidade para ser 0,5, salve, volte aqui. Você pode ver? Agora ele se torna mais transparente. Então eu acho que nosso ponto zero 85 seria legal para isso. Então você pode especificar em um valor de uma escolha, isso é letal? Você gosta, certo? Agora vamos estilizar são a imagem do ponto FUTA, foo dot, traço. Com 100%. A altura, é claro, vai ser 100%, então eu só tenho que copiá-lo daqui. E o máximo temos 1920 pixels. Estouro, aquecimento. Vamos fazer com que ele exiba flex, justifique o conteúdo. Acho que você sabe, centro. E, em seguida, a margem superior. Queremos que ele Manoj, um pixels diferentes de zero. Salvar. Vamos tirá-lo no navegador. Role para baixo. Agora você pode ver que a curva aqui está realmente aparecendo, mas não como espectador. Portanto, não se preocupe, à medida que avançamos para estilizar esse componente, teremos tudo perfeitamente bem. Tudo bem, então volte aqui. Agora vamos fazer pela imagem IMG. Agora vamos ter a largura máxima, 100%. E a altura para pixels. Volte e vamos conferir mais uma vez. Você pode ver isso? Linda? Gosto disso. Agora temos os resultados esperados do horizonte de tempo integral. Vamos prosseguir com o carrossel. E aqui temos que estilizar que testa o ITA. Então eu só tenho que copiar isso. Volte aqui e, em seguida, cole o item de traço de pontos. Dê a ele uma cor de fundo. Vamos torná-lo branco. Preenchimento, 30 pixels. Salve-a no navegador. Tudo bem, isso parece bom, mas temos que torná-lo beta. Agora volte para o código VS. Agora temos que dar o curso de raio fronteiriço. Queremos que essa borda de um cabelo seja um pouco curvilínea. Então agora vou fazer o raio fronteiriço. 50 pixels da parte superior, 50 pixels da direita, 50 pixels da parte inferior. E então queríamos 0 pixels do canto inferior esquerdo. Salve, volte para o navegador e vamos ver. Tudo bem, então agora aplicamos o raio todos os cantos, exceto no canto inferior esquerdo. E quando você olhar de perto, você perceberá que a borda é muito afiada. E quanto ao resto dos cantos, isso insta nossa própria curva agora para a tag p diretamente dentro de um equipamento de teste. Então, vou destacar essa cópia, descer, colar, fechar os colchetes encaracolados. E então queremos estilizar a tag p. E é claro que você sempre pode referenciar esse JS depoimento se você não tiver certeza dos nomes das classes. Agora, para o tamanho da fonte, 16 pixels, altura da linha, 26 pixels. Os telefones que comemos 100, então isso fará seu carrapato aeróbico. E placa. A margem. Margem, vamos ter esses erros dez pixels. E para a cidade dos telefones, queremos que pareça itálico. Salve-a, certo? Ok, Agora você pode ver agora que a fonte aparece inclinada por causa disso. Tudo bem. Então, o próximo na linha é estilizar a cotação. Agora vou copiar esta coluna aqui. Cole, feche com o suporte encaracolado. E então eu vou fazer ponto, FA, traço, traço, esquerda. Não temos muito o que fazer aqui, apenas a direita marginal. Vamos fazer cinco pixels. E a cor do ícone do olho, que é a citação em si. Então, menos Comodoro do Mickey. E antes de prosseguirmos, isso deveria ser deixado. Sinto muito por isso. Verdadeiramente um erro tipográfico. Salve, venha aqui. Agora, a citação esquerda está em boa forma. Então eu só tenho que destacar taxas e duplicar. Então aqui temos que mudá-lo para citar, certo? Então, a cor permanece a mesma. E aqui vai ser margin-left. K. Agora, a citação está em boa forma. Agora, para a classificação. Então aqui eu vou subir aqui, copiar isso de novo e de novo. Cole, feche os suportes encaracolados. Queremos estilizar os ícones arejados, que são as estrelas. Então, aqui vamos ter testado estrelas de pontos de comentário. Então, depois disso, vou copiar a pasta. E agora queremos estilizar a tag LI. E todas essas aulas estão aqui no depoimento j é. Agora, essas são as tags LI com as quais estamos lidando. Testemunho CSS de Toronto. Então, para as estrelas, deixe-me mostrar-lhe. Você vê da maneira que parece assim. Não gostamos disso. Então, temos que torná-lo exibido, bloco em linha, Salvar, confira. Lindo, eu gosto disso. Tudo está quase pronto. Então, vamos continuar. Vamos especificar os direitos de margem. Tudo o que vou fazer agora é destacar e depois duplicar esse código. Venha aqui, queremos estilizar a etiqueta I. Deixe-me mostrar-lhe de novo. Aqui estão a etiqueta I, certo? Qual é o ícone em si. Você pode ver? Então, vou limpar isso. Vamos dimensionar o ícone. Vá para o tamanho do formulário de 30 pixels. E a cor vai ser tomate. Salvar como verifique novamente. Incrível. Volte para o código VS. O próximo na linha é a informação do cliente, informações de pontos. Então, rapidamente, vamos fazer isso. Posição. Parente. Perdão à esquerda, 80 pixels, preenchimento superior 80 pixels e a altura média é de 60 pixels. Certo? Antes de prosseguirmos, um topo de preenchimento deve ser de cinco pixels. Então você pode acessar o navegador para conferir. Mas para mim, eu só tenho que prosseguir para que possamos terminar rapidamente. Agora temos que estilizar as imagens. Essas imagens aqui. Tudo bem, então vou copiar tudo aqui. Venha aqui, cole, feche os suportes encaracolados. E depois vou fazer o IMG para segmentar as imagens. Então, para altura 70 pixels, a largura 70 pixels. A fronteira. Vamos ter seus dois pixels, sólidos, transparentes. A cor da borda. Vamos torná-lo preto. A partir da esquerda, 0, o top 0. Salve sua reforma. Agora, temos que fazer com que a borda do quadro seja circular, certo? Então volte e vamos fazer isso rapidamente. Então, só temos que lidar com o raio fronteiriço. Faça isso 50%. Salvar. Agora você pode ver, oh, linda. Eu gosto dele aqui no código VS, a menos que continue. E nós vamos ter sua posição. Absoluto. Salve novamente, tudo é como esperado. Linda. Eu gosto disso aqui no VS Code. Então agora temos que estilizar a etiqueta H5 e p. Só vou copiar esses. Cole, feche o suporte encaracolado. E desta vez temos que atingir o hedge cinco. Dê a ele um tamanho de fonte de 16 pixels. A fonte que veremos é 100. Então, isso vai torná-lo grosso. A altura da linha, 26 pixels. Margem. Salvar. Tudo bem, por fim, temos que estilizar a tag p. Deixe-me mostrar a tag p. Este é o hit F5, e então esta é a tag p. Então, o nome do cliente é embrulhado com menos de cinco anos. E o papel do cliente está envolvido em uma etiqueta P, punição do rosto certo é limpa, então todos devem ter uma compreensão adequada do que estamos fazendo aqui. Agora vou copiar isso novamente, a tag p desta vez. Então, vamos ter o tamanho da fonte. Copie daqui, cole e a altura da linha. Também. Copie daqui. Cole o telefone para que copiaríamos daqui. Cole, mas desta vez será 400. E a margem é 0. Salve-a no navegador. Você pode ver isso? Lindo, eu gosto disso. Agora vamos conferir isso em plataformas móveis. Aqui está um iPhone S. Role para baixo. Linda. Então, iPhone seis. Bom. Então, vamos conferir no iPad Pro. E aqui está no iPad Pro? Parece muito bem. Gosto disso. E, por fim, temos que verificar o Galaxy S5. Role para baixo. Então, por exemplo, esse é exatamente o resultado que estamos esperando desta palestra. Vejo você na próxima palestra. Mantenha-se focado e tome cuidado. 37. Como criar o componente ContactMe: Bem-vindo de volta ao curso. Tudo bem, agora vamos trabalhar no componente entre em contato comigo. E o componente é composto por duas seções diferentes. Primeiro é a interface do usuário, que tem a ver com o front-end, e o segundo é o back-end. E, no final, você poderá receber e-mails de um cliente. Resposta a esse e-mail por meio deste site de portfólio. Parece ótimo, certo? Linda. Código Heron para VS, a menos que prossiga. Então, o primeiro que vamos fazer aqui é importar os arquivos necessários, que são as imagens correspondentes. Essa é uma história muito divertida sobre o componente MY. Agora abriu a pasta de materiais. Materiais. Então você vai ver essas imagens no bolso aqui. Agora, abra o portfólio Pro client. Clique em SRC. Em seguida, vamos copiar esta pasta aqui e depois colá-la aqui. Vejamos o que temos. Temos a carga, que é o GIF que vamos usar. Temos a imagem de fundo de correspondência. Então deixe-me mostrar quais são as portas. Só temos que fechar isso e, em seguida, fechar isso. Atualmente navegador mais uma vez. E se eu ouvir quando eu apertar o botão de envio, você vai ver o Senhor em Bob. Você vê isso? Linda. Vamos criar os componentes correspondentes. Contêiner de portfólio Toronto. E aqui está o diretório entre em contato comigo que criamos anteriormente nas palestras anteriores. Então, vou clicar com o botão direito do mouse aqui em Novo arquivo. Então eu vou chamá-lo entre em contato comigo dot js. E rapidamente temos que criar o arquivo CSS correspondente. Entre em contato comigo dot CSS, aqui para entrar em contato comigo js. Vamos esconder o explorador. Gere o componente funcional React js, RFC. Linda. Agora aqui temos que fazer as importações necessárias. Então aqui vamos importar. Estou depurar barra de imagens de barra SRC. Agora vamos conferir o nome Yvonne das imagens de estão lá. Agora temos os machos dot JPEG. Então, vou fazer machos dot JPEG. E aqui temos que importar a parede das barras de carregamento. Então, vou chamá-lo de loop um. Tudo bem, no mesmo diretório. Então, aqui temos que importar os utilitários de componentes reutilizáveis, splash, cabeçalho da tela, cabeçalho da tela. E aqui temos que importar, Importar o serviço de rolagem dos utilitários rolagem. E também temos que importar a animação é utilitários. animação é. E o que é que temos que importar? Certo? Parece ser substantivo. Estes ficarão bem. E, em seguida, a linha aninhada é implementar essa rolagem suave e o efeito de desvanecimento. Então temos que vir aqui, levá-lo adereços aqui. Agora nós os implementamos em vários componentes, então eu só tenho que voltar para mim js e depois. Olá, Ok, Já está destacado, então vou ficar bem, para fins de ensino, só tenho que fazer isso sozinho. Agora. Menos destaques das linhas 92, linhas 15, cópia. Volte para entrar em contato comigo js. E então aqui, só temos que colar. Ok, então antes de prosseguirmos, temos que adicionar esses componentes à tela. Agora, Heroku comum. Tudo bem, então temos que importar. Entre em contato comigo. Você pode ver pessoal, isso irá importar automaticamente para mim quando eu clico aqui e boom, ele é importado. Então eu sei que a maioria de vocês pode achar difícil fazer esses H2 e, portanto, eu tenho que fazer isso manualmente sozinho. Sim. Então deixe-me importá-lo monogâmico fora entre em contato comigo da barra do contêiner do portfólio, entre em contato comigo, entre em contato comigo. E agora acredito que todos estão bem com isso. Então aqui temos que adicioná-lo às constantes aqui. Então agora eu só tenho que destacar isso. Mantenha pressionadas as teclas Alt e Shift e , em seguida, toque na tecla de seta para baixo no teclado. Você pode ver isso? Neste momento, temos que mudar o nome para entrar em contato comigo. E aqui o componente deve estar entrando em contato comigo. Salvar. Volte para entrar em contato comigo JS. E aqui no DV, vamos dar a esta div um nome de classe contêiner de traço médio. Então, vamos dar um ID para que não possamos navegar para esses componentes. Primeiro, o nome da tela é clicado. Então aqui vou fazer adereços. ID do ponto. Agora. Com cuidado. Tão rapidamente menos do que isso, eles são componentes reutilizáveis para ter algo exibido na tela. Agora vou fazer o cabeçalho da tela mais perto com a tag de fechamento automático. E assumindo que não, temos feito isso nas palestras anteriores. Agora, o subtítulo que vou fazer aqui, menos mantenha contato. Tudo bem, então eu acho que quando você faz isso, ok, parece melhor assim. Então, basta fazer o L apenas do jeito que quiser que ele apareça na tela, certo? Então, sim. Certo. E o outro atributo é o título. Agora vou entrar em contato comigo. Lindo, acho que isso está bem. Salvar. Volte para o terminal e, em seguida, ao cliente de CD. E então vamos fazer o npm start. Tudo bem, vamos esperar por isso. Linda. Agora temos o componente entre em contato comigo na tela. Dane-se e vamos ver se o nome foi adicionado. Ficou o suficiente. Os caras Parfit aqui são compatíveis. Então, quando clico em Entre em contato comigo, isso nos leva até aqui. Heroína para código VS, a menos que continue. Amanda B, para esconder o Explorer. Agora, logo após a etiqueta de fechamento do cabeçalho da tela, vamos ter uma div, dar o membro da classe ARF, telefone central traço. E ei, outra div, nome da classe do carvão. Então, agora vamos ter o React típico. Acho que já fizemos isso antes, certo? No componente de perfil. Então, vamos para o componente de perfil. Perfil ab.js. Ele veio aqui? Então, vamos copiar do hedge um. Este título aqui tem que copiar. Volte para entrar em contato comigo GS. Então, antes de termos isso implementado, temos que importar o react típico parafuso. Então, seguindo as melhores práticas, temos que importar um hey, importar do tipo de chamada React dash. Ok, então depois disso, eu tenho que dar um espaço como este. E aqui, só temos que colar. Então, tudo o que temos que alterar é a tag do cabeçalho 1. Então, vou apenas destacar e depois vou pressionar Command e D. Você pode ver esses dois selecionados, a tag de cabeça de abertura e a tag de cabeça de fechamento. Isso é chamado de multicasts estão editando. Faça isso H2 e 1000. E aqui não temos, eu darei isso a um nome de classe de título. Agora, o que vou fazer é destacar estes e esfregar no seu final húmido optar por exibir mais informações. Mas, para mim, só quero que essas informações sejam exibidas. Então deixe-me mostrar as informações de um aqui. Agora vou entrar em contato. Então aqui temos que incluir o MOOG. Acredito que saiba como fazer isso. Então, para aqueles que não estão usando o Mac, tudo o que você precisa fazer é copiar e colar meu código para obter este MODS. Então agora eu preciso desse tipo de símbolo emo aqui. Faz isso por menos de linha são os ícones de mídia social. Deixe-me mostrar-lhe. Aqui estão os ícones de mídia social. E como me lembro que fizemos aileron de todas essas coisas na palestra anterior quando implementamos a empresa de perfil. Então, nesta palestra, o componente de perfil será muito útil. Volte para os componentes do perfil. Dane-se. Tudo bem, então vamos copiar tudo assim. Destaca os direitos de cópia das linhas 122, linhas 26 e, em seguida, volte para entrar em contato comigo ds, logo após a etiqueta de fechamento do HA2. Vou colar e visitar o belo MAN S para salvar. Volte para o navegador e vamos conferir o que fizemos até agora. Tudo bem, você pode ver esses outros ícones no canto inferior esquerdo da tela? E espero que alguém possa ver isso. Então eu tenho que ampliar isso um pouco. E aqui está o que fizemos até agora. Não quero que essa palestra demore muito, então vamos dar uma pausa aqui. E na próxima palestra, continuaremos a criar o formulário de contato. Vejo você na próxima palestra. Mantenha-se focado e tome cuidado. 38. Formulário com e variável ContactMe: Então, agora vamos continuar com o telefone entre em contato comigo Harrington VS Code. Aqui, Austin, vamos fazer é declarar as variáveis de estado necessárias para serem usadas. Então eu acho que devemos fazer isso aqui. Certo, vamos importar o estado dos EUA. Então você só precisa colocar uma câmera no estado dos EUA e, em seguida, rolar para baixo. E aqui vamos ter const. E temos que ter a rixa de nome, mais calma, setName para usar Estados. E o estado inicial ficará vazio. Nada estará no feed pela primeira vez. Então, vou ter que fazer agora é destacar isso e depois duplicá-lo quatro vezes. Shift e toque na tecla de seta para baixo no teclado. Ok, então temos que mudar isso para e-mail. E então aqui vamos definir o e-mail. Nota. Esse é um caso incomum. Então, vamos configurá-lo para uma string vazia, que é o estado inicial. E aqui temos que mudar esse nome para mensagem. E aqui temos o banner. E, por fim, temos o booleano bem aqui. E é claro que você deve saber que esta é uma operação booleana e deve retornar verdadeiro ou falso. Então, aqui os estados iniciais serão antebraços. Agora vamos criar o formulário de contato rapidamente. Então, aqui, logo após essa div de encerramento, vamos ter uma div, dar o nome da classe de dash. E também vamos ter uma div aqui, dar o nome da classe de IMG dash. E aqui vamos ter um hedge para o IMG SRC. Sou depuração. Então, vamos dar a ele um AT. Então eu acho que devemos fechá-lo com a etiqueta de fechamento automático. Tudo bem. Então, o próximo na fila é ter o telefone pontuar para baixo logo após essa div de fechamento aqui do ClassName IMG de volta. Vamos ter o telefone aqui. Vamos ter uma tag p. Não se preocupe com isso por enquanto porque vou te mostrar. Então, aqui vamos ter um rótulo. Vamos dar um nome de classe. E eu vou fazer para que o slogan será nomeado. Vamos fazer com que o tipo de entrada seja teste. E também prefiro a etiqueta de fechamento automático para essas lindas. Então, o que vou fazer a seguir é destacar esses, como esses. Duplique-o duas vezes. Ou você pode copiar e colar duas vezes. O ninho é o e-mail. Então aqui vou mudá-lo para e-mail. Altere para e-mail. O tipo aqui será e-mail. E eles seriam usados para a mensagem. E a mensagem. Salve e execute. Volte para o navegador e deixe-me mostrar-lhe. Aqui está a imagem. Deixe-me mostrar-lhe. Qual é o IMG de volta importamos aileron e mostramos aqui. Agora, aqui está a cobertura para. Então, quando você olhar de perto, você verá os três campos de entrada. Deixe-me ampliar um pouco. Aqui está o nome, o e-mail e a mensagem. Mas não quero que a caixa de mensagem tenha o mesmo tamanho com os outros campos. Então, para isso, temos que usar a área de teste como empalada. Volte para o VS Code. E aqui onde você tem o imput, vamos mudá-lo para a área de teste. Salvar. Volte. Agora você pode ver que está certo, então nós temos nosso pico no resto dos campos como isso. Mas uma coisa que eu quero mostrar é isso, quando você digita qualquer coisa, esses campos de entrada não estão funcionando. Deixe-me mostrar o que quero dizer com isso. Então, vou diminuir um pouco. Vou inspecionar isso. E vamos conferir no console. Você vê quando eu faço uso dos campos de entrada, nada está acontecendo. Nada está acontecendo. Portanto, isso significa que esses campos não estão funcionando. Tudo bem? Então, temos que lidar com a impedância. Agora, volte para o VS Code. E acho que antes de fazermos isso, só temos que implementar o fundo. Então, vamos ter o fundo implementado rapidamente. Logo após a área de teste. Vamos ter outra div, dar o nome da classe ARF, enviar Dash. E aqui vamos ter um Bolton. Então aqui vamos fazer o tipo de entrada do Bolton. Claro que vai ser resolvido meios para que a tag será enviada. Então, queremos exibir um ícone na parte inferior. Temos que pegar a tag I e depois dar a ela um nome de classe de FASFA dash p bar. Desculpe, o papel deve ser apenas um plano P xy. Tudo bem? E também gosto de fechar com a etiqueta de fechamento automático. Certo, acho que tudo é um fenômeno legal. Confira no navegador. E temos dois k. Este é o fundo de um aqui. No canto inferior esquerdo da tela. Você pode ver aqui é o barco. Volte para o código VS. Então agora temos que lidar com a impedância. Então role para cima e vamos definir uma função para isso. Então agora vamos ter uma constante e eu vou chamá-la de nome melada. Defina para nossa função e, em seguida, faça um evento. Linda. Então, aqui vamos fazer eventos setName, pontos, destinos, valor de ponto, destacá-los, duplicá-lo duas vezes. E aqui temos que mudá-lo para e-mail. Estes também serão e-mails. Certo. Sim. E aqui deve ter menos idade. Certo. Tudo mais frio. Role para baixo a menos que implementado no enclave. Então, temos que começar com o nome, que é o campo de nome. E agora temos que ter inalterado. Vamos invocar o nome da função e o valor deve ser nomeado. Barra de rolagem. Vamos testá-lo. Teremos que recarregar. Tudo bem, então aqui no console, vamos ver o efeito de mudança. Então vou digitar N. Vamos tirá-lo no console. Ok, então quando eu fizer isso, posso ver o inalterado aqui. Você vê então isso é exatamente o que as portas onchange. Então, em poucas palavras, o evento onchange no React, detecta o valor de um elemento de entrada muda. Parece bom, certo? Linda. Volte para o código VS, a menos que ele implementado em todos os campos. E a mesma coisa que Lee vamos fazer pelo e-mail. Então, vamos ter em mudança. E lembre-se, isso é no caso de karma. Vamos chamar a função de e-mail do identificador. O valor, é claro, será e-mail. E, por fim, temos que fazer isso pela mensagem. Então eu só tenho que copiar esta câmera aqui. Colar. E, por favor, altere a função para lidar com a mensagem. Portanto, o valor que teremos aqui é da caixa de mensagem. Salve, volte para o navegador. Então, vamos dar um char. Abra o console, role para baixo para o nome que vou fazer. Mike, portanto, é onde posso encontrar para o e-mail que vou fazer. Certo, e para a mensagem. Então eu só tenho que fazer HIV a. Ei, o que está acontecendo? Os pés não estão recebendo o valor. Você vê isso? Ele aparece aqui no console, mas o valor não é, não está pegando o valor. Ok, volte para o código VS e vamos consertá-lo. Dane-se, certo? Amigos. Isso deve ser definido como mensagem e esperança de obter ou ficará bem desta vez. Tudo bem. Certo, volte para o navegador. Temos que recarregar. Agora vamos experimentar a mensagem. Tudo bem, tudo está funcionando perfeitamente bem. Então, frase, isso é tudo por enquanto, para esta palestra e na próxima palestra, começaremos a estilizar esta empresa é, nos vemos na próxima palestra. Mantenha-se focado e tome cuidado. 39. Componente com contato: Então, vamos estilizar as empresas de contato comigo. E no final você terá que parecer que estes estão nesta linda. Volte para o código VS, a menos que prossiga. Abra o CSS entre em contato comigo. Conjunto P comum para entrar em contato comigo CSS. E aqui está isso. Vamos começar com o contêiner principal, ponto significa traço contêiner. Então, vamos dar a ele uma altura média de 100 vh. Para a forma central, ponto central. Diversão. Vamos ter a largura máxima, o preenchimento. Vamos fazer com que ele exiba flex. E o raio fronteiriço dos pixels. Margem 0 out. Muita direção flexível será coelom. Justifique o centro de conteúdo. E para a cor de fundo. Vamos ter aqui. Salvar. Agora temos que vincular o CSS entre em contato comigo com os componentes entre em contato comigo. Abriu o contato comigo. Role até o topo. Então eu acho que devemos fazer isso aqui. Salve, volte para o navegador, a menos que o verifique. Tudo bem, então agora temos o contêiner principal. Conseguem ver. Mas há um problema com essa imagem, que é a bolsa IMG. Definitivamente vamos consertar isso no futuro. Então vá para o VS Code para entrar em contato comigo. E aqui Vamos continuar com a forma central H2. Deixe-me mostrar o histórico certo e tipo efeito. Onde temos o efeito de tipo, acho que está no topo. Aqui. É isso? A página com a cor da fonte definitivamente será branca. O espaçamento entre letras, que é o espaço entre os estilos de cada camada. Então, vamos tê-lo para bater o fundo da margem. Vamos fazer com que sejam 20 pixels. Salve e execute-o. Aqui temos que estilizar para trás queda, volta, traço para a largura máxima, 380 pixels. A margem, 0 auto. Então agora vou copiar esses. Feche o suporte encaracolado e queremos direcionar o traço IMG. Mas é claro, você deve conhecer todas essas aulas aqui. Você deve saber que esta é a espuma, o IMG de volta onde a cobertura e a imagem está localizada. Dê uma largura de 100%. Fundo de margem de 20 pixels. Então agora temos que estilizar o IMD de volta quatro. Então, para isso, eu só tenho que copiar esses. Cole, feche o suporte encaracolado. Então vou fazer H4, que são os telefones. Deixe-me mostrar-lhe. Este é o IMG atingiu quatro maneiras de tudo bem, olhe para ele. Agora ele está sendo exibido na tela simplesmente por causa de uma fonte em si ser preta. Então, aqui está isso. Envie seu e-mail aqui. Agora primeiro, temos que mudar a cor para que possamos vê-la aqui na tela. Vamos fazer com que ele economize. Você pode ver agora que é muito visível. Espaçamento posterior. Ponto zero. Um formulário para trigo. Queremos que seja um pouco pesado, então como parece corporal aqui. Então, vamos fazer 400, salvar, voltar. Você pode ver agora que é mais quadro agora. Então, se você tirar isso agora, você pode ver a diferença? A diferença é argila. Dê a ele um tamanho de telefone de 18 pixels. Agora queremos esconder o palco um pouco em segundo plano. Dê a capacidade 0,5. Salvar. Você vê agora? Então, temos esse tipo de efeito aqui, certo? Linda. Tudo bem, volte para o navegador. E aqui a imagem que é esse IMG aqui, é muito grande, então temos que reduzir o tamanho. Então aqui está a imagem. Vou colar e depois fechar o suporte encaracolado. Agora temos que mirar o braço emit, que é a tag IMG. Então, a largura, vamos torná-lo 100% seguro. Agora, você vê que está gradualmente tomando forma. E o menos do que vamos fazer é realmente esconder a imagem em segundo plano um pouco. Então, aqui, vou fazer opacidade. Um McKee menos, 0,5. Economize mais uma vez. Agora você vê para emit é Heider em segundo plano? Agora vamos passar para os campos. Telefone central. O telefone, é resolver. Então nos disseram que vamos ter uma tela. Flex, a cor. Vamos torná-lo preto. 15 pixels. Justifique o centro de conteúdo. E eles vão flexionar a direção. Coluna. Agora, para margem superior menos 52 pixels. A cor de fundo branca e o raio da borda. 12 pixels. Salvar. Vamos tirá-lo. Certo? As coisas estão gradualmente tomando forma e eu gosto disso. Tudo bem, vamos continuar. Volte para o código VS. Agora temos que estilizar uma tag p diretamente no telefone. Deixe-me mostrar-lhe. Aqui está a tag p. E não se preocupe, quando começarmos a implementar as funcionalidades de e-mail, vou mostrar quais são essas portas, ok, então não se preocupe com isso por enquanto. O que é um telefone e uma tag p? Alinhamento de texto, centro, margem, inferior, dez pixels. E a cor, que é a cor da fonte. A menos que meus filhos, laranja. O espaçamento entre letras ponto zero para chuva. Na verdade, quer que as funcionalidades sejam conjuntos, certo? Então, quando você clica na parte inferior, você verá algum teste no telefone para indicar se a mensagem foi bem-sucedida ou não. Isso é exatamente o que a proibição de portas, que é essa tag p de uma, Ei, a família da fonte. Papoilas ousadas, certo? Portanto, para o rótulo do formulário, a margem inferior será de cinco pixels. A cor, vamos torná-la preta. Em seguida, o espaçamento da rede ponto zero para a RAM. Salvar. Volte aqui. Agora você vê os rótulos vr bem posicionados. Esses são os rótulos. Tudo bem, então vamos começar a estilizar os campos de entrada, que é o nome, os campos de nome, o campo de e-mail e o campo de mensagem. Agora você deve saber que o eu na firma e na firma, temos que atingir o coma imput e aquela área de teste. Vamos com uma largura de 100%. A borda, dois pixels, sólida, RGBA. Agora temos 0, k. Basta fazer isso em quatro vezes. E o contorno, vamos dar a conhecer a cor de fundo. Então, antes de prosseguirmos com isso, tenho que mostrar o que queremos fazer é vir aqui, imitá-lo até o projeto de demonstração. E, como você pode ver a cor padrão das entradas é uma espécie de cinza. Deixe-me ampliar um pouco. Veja uma cor cinza aqui. E quando você focar o mouse nele, ele ficará branco. Pode ver isso com uma espécie de borda azul. Sim. Borda de contorno azul. Sim. Então, agora tenho que definir a cor padrão dos imputos para ser cinza. Então a cor será RGBA para 300, Kolyma para 30 Zara. Zara. Então vamos ter hey, corner, 0.6, salvar, voltar. E por que é isso? Você sabe, vê como escrever o preenchimento? O tamanho da fonte? M? Para margem inferior. Vamos fazer isso 22 pixels. Raio da borda. Queremos que seja curvo um pouco. Vou fazer 10 pixels. Ponto de transição. Ou segredo é seguro e bonito. Tudo está bonito, mas ainda temos algumas coisas certas a serem consertadas. Agora vamos continuar. Para a área de teste, para esta área, 3000 canto a cinco vírgulas dois, vírgula 0, 570, salve. E, por último, o fundo em si. Qual é a cor de fundo deve ser branca. Salvar. Volte. Deixe-me aumentar um pouco. Então, quando você foca o mouse na caixa de mensagem, eu vejo. Você vê isso? Caras perfeitos. Mas, por enquanto, ele não está funcionando para o e-mail e um campo de nome, mas você pode tê-lo e a mensagem que é a área de teste, destacar essas duplicações, Shift e Alt e, em seguida, esmagar a tecla de seta para baixo no teclado. Tudo bem, então agora estes serão alterados para imputar. Acho que vai ter os mesmos estilos. Salve, volte, Ei, você pode ver? Tudo bem, então temos que estilizar a margem inferior, 15 pixels superiores. Preenchimento, cinco pixels. Esboço. Os 160 pixels. Salvar. Parece bom. A fronteira. Vamos dar uma borda de dois pixels, sólida. Laranja. O tamanho da fonte, 12 pixels, raio da borda, 19 pixels. Cor de fundo. Tudo bem, vamos torná-lo seguro. Tudo bem, a fonte não está aparecendo. Temos que dar a ela uma cor de fonte. Portanto, a cor deve ser branca. Salve, volte. Tudo bem, e a fonte em si é muito pequena de um tamanho de fonte, então vamos fazer talvez 18 pixels. Certo, tudo bem. Sim, está tudo bem. Alinhe o centro de itens e justifique o conteúdo ao Papai Noel. Certo, lindo. Mas, por enquanto, a empresa não é do jeito que queremos. E você vê, isso é exatamente o que vamos conseguir. Então, vamos trabalhar para conseguir isso. Mas antes disso, temos que fazer o profano para o aparafusamento, dar a cor de fundo da mesma aqui. Mais suave. Transição. Um é, que é um, digamos Aquino, e a borda, dois pixels. Então sintoma principal, Ei, venha aqui e vamos tentar. Você me vê zoom? Tudo bem. Para a carga inferior. O que está tudo bem por enquanto. Eu não acho que tenhamos que estilizar isso simplesmente porque na verdade não fizemos isso no contato comigo G é então, no futuro, vamos fazer isso. O IMG buck, buck, flex. Vamos torná-lo um. Alinhe itens ao centro. A margem certa? Smith aquece 20 pixels. Tire isso. Isso deve ser alinhado para enviar, salvar. E para o telefone. Então 0,9. Então, vamos tentar corrigir os ícones antes que possamos realmente alinhar essa pasta. Então eu vou fazer pontilhar o que eu marca bem no carvão. Vamos fazer pod em sete pixels. A cor, mais importante, é ampla. Salvar. Agora você pode ver os ícones, certo? Muito visível. Ok, então queremos fazer isso assim. Você vê quando você passa o mouse sobre ele, ele mostra esse efeito legal. Agora eu só tenho que copiar esses. Cole-o aqui. Feche os suportes encaracolados aqui. Nós vamos acabar com isso. E vamos transformar e dar-lhe uma escala de 1,5. Salve, volte. Agora você vê lindo como k, Então temos que corrigir esse problema simplesmente por causa de uma empresa não está bem alinhada. E este é exatamente o resultado final de um aqui o que queremos alcançar. 40. Como corrigir o formulário (Styling) (Styling): Então, queremos que ele fique assim na plataforma móvel, mas queremos isso em um laptop ou tablet. Então, temos que consertar isso rapidamente. Vou fazer anúncios, tela e min-width de e, em seguida, vamos ter a casca da largura máxima. Vamos fazer com que ele exiba flex. Justifique conteúdo, espaço entre a margem, os 30 pixels superiores. Salve, volte e vamos conferir. E você vê isso lindo. Este é de repente o resultado estamos esperando desta palestra. Volte para o código VS, a menos que prossiga. Temos que estilizar o ponto IMDB, traço. E aqui vamos tê-lo flexível. Alinhe-o ao centro. E o módulo certo? 20 pixels para o formulário em si. Flex 0,9. Eu acho. Vaso por enquanto. Salvar. Tudo bem, você pode ver isso? Parece extremamente bonito e eu gosto disso. Então, vamos tirá-lo na plataforma móvel. Certo? Então, isso é exatamente o que temos se eu ouvir que é realmente responsivo em todas as plataformas. Vamos tirá-lo no Galaxy S5 e no iPhone 5. Iphone um iPhone 6. Vamos tirá-lo no iPhone 678. Você vê, tudo parece bom. Vamos retirá-lo no iPad Pro, no tablet. Então, é exatamente assim que ele se parece no tablet. Então, por exemplo, isso é oferecido um URI, e na próxima palestra, iremos para o back-end. Então, por enquanto, isso é exatamente o que temos aqui. Parece tão bom e eu gosto disso. Tudo está funcionando conforme o esperado. Você vê que este é o fim desta palestra. Vejo você na próxima palestra. Mantenha-se focado e tome cuidado. 41. Funcionalidade do formulário: Agora temos o formulário extremamente bonito. Temos que finalizar a funcionalidade de front-end. E, a propósito, quero te mostrar uma coisa. Tudo bem, então agora, quando eu clico no abortamento do Sena, você perceberá que o aplicativo será recarregado. Deixe-me mostrar-lhe rapidamente. Aqui está o mesmo quadro agora eu clico. Dê uma olhada. O aplicativo será carregado. Então você vai ver esse efeito logo abaixo da guia, verifique outra guia aqui. Então, vamos tentar novamente. Quando eu clico no botão de envio, você só precisa prever aqui na guia. Você vê o aplicativo com cargas? Então, este é um dos fogões que vamos consertá-la no código VS. Role até o topo e vamos corrigir esse problema. Certo? Então, aqui vamos definir uma pasta de envio constante de função. E aqui vamos escolher um evento, configurá-lo para nossa função. Agora vou fazer o ponto do evento, prevenir, padrão, parafusado no formulário, a menos que invoque essa função. Aqui está isso. Agora vou enviar, enviar formulário, salvar, ir para o navegador e vamos conferir. Recarregue a rolagem menos suave para o componente entre em contato comigo. Experimente clicando no mesmo barco em DC. Agora, o aplicativo não recarrega animal Parfit, segue-se ao VS sem fundamento continuou. Role até o topo. Aqui, vamos criar um objeto chamado de dados, configurá-lo para objeto vazio. E então vamos pegar o campo de força, que é o nome separado pelo e-mail mais calmo, separado por uma vírgula. E, por último, a mensagem. Tudo bem, então vamos verificar. Agora vou fazer console.log. Vamos registrar dados, salvá-la no navegador, recarregar. Agora, eu tenho que levá-lo ao console para o nome. Vou fazer o Mike pelo e-mail, vou fazê-lo no gmail.com. E para a mensagem, só vou fazer HIV. Ouvi dizer, quando clico no botão Enviar, você verá o objeto no console. Você vê. Deixe-me abri-lo. Aqui vamos nós. Meu nome é Mike para e-mail em gmail.com e, em seguida, a mensagem é alta. Tudo está funcionando como esperado aqui para o continuum VS Columbus. Então, eu só tenho que tirar esse par log y de algumas vezes esses metrô e erros. Então, temos que envolvê-lo em um try-block. Experimente. Então você tem que selecionar aquele com o bloco catch também. Ok, então para o problema aqui, vamos ter que registrar qualquer erro que tenhamos no programa. E aqui, você só precisa destacar das linhas 44 para as linhas 48. Venha aqui no bloco try, cole. Então, ninho, temos que definir o booleano como verdadeiro. Defina como true. À medida que avançarmos, explicarei a vocês quais são as portas booleanas aqui. Então, por enquanto, vamos ter um descanso constante. Eixos, postagem de pontos, mas dados de contato de barra de seleção, que é esse objeto aqui. Então, estamos trazendo aqui para levar tudo nos campos, certo? Então, é tão simples quanto isso. E temos algum aviso no console. Diz que Zeus não está definido. Portanto, temos que instalar o eixo, voltar para o terminal e depois em C para parar o servidor. Agora vou fazer o uso de atos npm install e também temos que instalar embora reagir para justificar. Deixe-me mostrar-lhe rapidamente. Vamos para o projeto de demonstração. Certo, eu só tenho que recarregar. Agora, quando clico no botão Enviar, o brinde aparecerá no canto superior direito da tela mostrando a mensagem de erro ou a mensagem de sexo SOC. Clique em. Dsi diz, por favor, preencha os campos. Então aqui está a mensagem de brinde, e este é o banner. Não tinha código VS e escrevia no terminal. Também temos que instalar o React, traçar, justificar, instalar com sucesso, rolar para o topo e menos importado. Tudo bem, ei, vou importar de. E também temos que importar brinde, React, testemunhar. Role para baixo. E aqui temos que continuar. Estes definitivamente retornariam uma promessa. Então, temos que aguardar. Esse programa está aqui. Só teremos que esperar. Então, sempre que você estiver lidando com o aguardar, você tem que encerrar a função com um mesmo estragamento. Então aqui vou fazer um santo. Tudo bem, então tenha cuidado para não importar o mesmo do nosso USGS. Certo. Role até o topo e vamos conferir. Certo. Vamos continuar. Portanto, temos que verificar se os campos estão vazios. Se o comprimento do ponto do nome for igual a 0. Então, aqui, isso definitivamente envolverá repetição, que é depois de copiar, colar, alterar o nome para o comprimento do ponto do e-mail. E também com base altere esses dois pontos de mensagem. Tudo bem, então se isso estiver vazio, vamos desenhar uma mensagem do back-end. Então aqui vamos fazer dados de pontos de descanso, ponto MSG, que é a mensagem. E também queremos usar o brinde para exibir a mensagem no canto superior direito da tela. Agora, vou fazer esses erros de ponto. Então aqui é exatamente a mesma coisa. Só tenho que copiar. Colar. Então temos que definir o booleano para forçar um outro. Se o formulário estiver preenchido e tudo estiver correto, teremos que retornar a mensagem de sucesso do back-end. Então, faremos mais se o status restaurado for 200. Então, vou copiar tudo daqui assim, dos lays 49 a 51. Cópia. Cole seus caras certos, há um erro de digitação aqui. Isso deveria ser um erro. Não sei por que meu teclado sempre faz essas dobras. Então aqui temos que mudar a seta de torrada para torrar a meia de ponto diz: Perfeito. Tudo bem, seguro. Role para baixo e vamos implementar a carga dele Bob. Então aqui está o Bertin. O nome da classe desta div é st. Portanto, certifique-se que o que você está vendo na tela é exatamente o que você tem no seu código VS. Então, logo após o fechamento de uma etiqueta, teremos um suporte encaracolado. E então, se o booleano for verdadeiro, mostraremos a barra de carregamento. Então, só temos que embrulhá-lo em uma tag b, dar a isso um nome de classe de carga. Bem nesta tag b, vamos ter os sons IMG. Veja, carregue um. Dado um ímpar com as setas de etiqueta de fechamento automático. Se for falso, ele não será exibido no abortamento. Então, apenas uma corda vazia. E, rapidamente, deixe-me mostrar essa imagem novamente. Role até o topo. Ei, é isso? Então, acabamos de importar as cargas de dois pontos GIF e depois armazenamos. Então, quando eu faço o Comando P, t2. Então, aqui está a barra de carregamento. Role para baixo até o terminal npm. Comece. Vamos ver o resultado final. Role para baixo e clique no mesmo quadro. Quando você vê linda, eu gosto disso. Então, eles podem não estar funcionando na sua extremidade simplesmente porque você não o estilizou. Vá para o feroz não conseguiu. Deixe-me mostrar-lhe rapidamente. Agora, vamos abrir, entre em contato comigo CSAs. Role para baixo onde temos a carga. Certo? Então você só precisa estilizar essa classe aqui, que é a carga. Deixe-me mostrar-lhe. Ei, é assim que tudo o que você precisa fazer é dar a ele uma largura de 60 pixels. E então você vai tê-lo assim. E quando você clica na mesma porta em recarga. Agora, o booleano define a força. Quando clico no botão Enviar novamente, o booleano é definido como verdadeiro e o arco de carregamento seria exibido em um quadro quando isso for tudo por enquanto para esta frase de aula. Vejo você na próxima palestra. Mantenha-se focado e tome cuidado. 42. Chamada para ação e animação FadeInScreen: Nesta palestra, implementaremos o call to action Wharton e, também, metade do efeito de desvanecimento. Felizmente, perfeitamente bem. Por enquanto. Quando você acerta o abortamento do alto exército, nada acontece. Você vê? E se eu ouvir, nada acontece. Quando você recarrega o site, o efeito de desvanecimento não está funcionando perfeitamente bem. Tão rapidamente tinha acesso ao código VS, a menos que prosseguisse. Tudo bem, então começaremos com o componente Sobre mim. Há um erro tipográfico aqui. Isso deveria ser tela de desvanecimento. Por favor, certifique-se de fazer as correções necessárias. E isso é a coisa certa. Tendo feito isso, temos que voltar para esta div com o nome da classe sobre mim contêiner. E depois vou desaparecer, Dash. Salve-a no navegador. E vamos ver se o efeito de desvanecimento está sendo aplicado ao componente Sobre mim. Recarregar. Você pode ver? Agora dê uma olhada. Você vê isso? Então, vamos fazer a mesma coisa com todos os componentes. Então você tem que abrir o currículo js. E então acho que também cometemos o erro aqui. Na verdade, cometemos esse erro em torno da empresa simplesmente porque isso foi copiado do componente About Me. Portanto, certifique-se de alterá-los para caber na tela e, em seguida, role para baixo. Bem aqui. Div com o nome da classe do contêiner original. Então eu vou desbotar, traçar, seguro. Também ela no testemunho GS. Pessoal, vocês só precisam fazer isso. Certo. Vamos caber na tela, bem no depoimento. Oh meu Deus. Este é um top. Certo. Então, vamos implementá-lo na tag de seção. Salvar. E, por fim, entre em contato comigo. E, claro, devemos fazer a mesma dor é que LI salvá-la no navegador e depois recarregar. Então, agora, quando eu rolar para baixo, o componente desaparecerá. Doutor, DOC. Perfeito. Agora é hora de implementar a votação de call to action. Não tinha realmente ajudado. Então, aqui, vamos copiar a cópia onclick. Na verdade, isso é tão simples e acredito que alguns de vocês podem fazer isso no seu final mesmo com isso assistindo a esta palestra. Então agora temos que avançar para o perfil J. Dane-se, ok, aqui onde temos a AMI alta Bertin. Então agora coloque o mouse aqui e cole o próprio clique. Então, aqui está o método onClick. Esta cruz F é um manipulador de rolagem de ponto escrotal alta AMI. Vá para o serviço de rolagem. E esta é a função para rolar, para me contratar. Salvar. Volte. Agora, dê um clique. Funciona perfeitamente bem. No canto inferior direito da tela está a votação da ação do CTO para suavizar a rolagem para o componente inicial. E vou deixar isso como uma tarefa para você implementá-lo sozinho. Mas posso garantir que o código-fonte completo está bem ali no GitHub. Então role para baixo, uh, deixe-me mostrar-lhe aqui. Você tem que fazer exatamente a mesma dor que eu fiz aqui. Certo. Você só precisa copiar o método onClick e depois colá-lo, à direita. Então deixe-me fazer isso por você. Não quero que você reclame. Então, vamos para o nosso Sobre Mim. Coloque o mouse aqui e, em seguida, cole, Salvar. Volte. Clique aqui. Tudo está funcionando como esperado e eu gosto disso. Isso geralmente é agora para esta palestra e vejo você na próxima palestra. Tome cuidado. 43. Iniciação de backend: Tudo bem, então vamos mergulhar na parte de trás, final. Ela no código VS. A primeira coisa que vamos fazer aqui é inicializar o arquivo package.json Command B para abrir o Explorer. E então eu só vou clicar no diretório do cliente. E aqui está o diretório raiz. Então, aqui é onde inicializaremos o arquivo package.json para o back-end, ela no terminal e, em seguida, faremos o Comando C para interromper esse servidor em execução atual. E então temos que cd espaço ponto ponto para sair do diretório do cliente. Você pode ver agora que estamos no portfólio do diretório raiz Pro. O que vou fazer aqui é inicializar o gerenciador de pacotes de nós, que é o MPM precisa. E, claro, você precisa aceitar todas as condições. Então, vamos sim, sim. Continue pressionando a tecla Enter. E sim. Agora eu quero olhar para o Explorer. Você vai ver o arquivo JSON de ponto do pacote . E aqui está isso. Doc. Linda, ainda no terminal. Agora temos que instalar os pacotes necessários que serão usados no back-end. Então aqui vamos fazer npm instalar simultaneamente. Também temos que instalar salões e nos preocupar após a instalação. Vou explicar tudo para você. E, claro, precisamos do ponto ENV. Também precisamos de especialistas. Carregue-me lei. E, por fim, precisamos de monitor de carga, que é para o nó. Então, vou pausar o vídeo que você possa dar uma olhada nele. Para a instalação está em andamento e, no final, você a terá diretamente no arquivo package.json para o back-end. Tudo bem, você pode ver que aqui são os perfeitos. Agora vamos começar com simultaneamente. O simultaneamente é um pacote que pode executar vários scripts MPM simultaneamente. E para os carros. Em um Tim muito simples, a causa é um mecanismo ou que permite controlar o acesso a recursos localizados fora dele dado domínio, certo? Então, definitivamente, a causa seria usada para adicionar middleware ao aplicativo. Então Nest é o ponto ENV. Dot ENV permite separar segredos do seu código-fonte. Tudo bem, então, por exemplo, você está recebendo um site de comércio eletrônico e quer compartilhar o código-fonte ou com seus amigos, como em um domínio público, músicas como o GitHub, certo? E você só quer ver em um código-fonte com eles, mas não quer compartilhar sua chave de API para a integração de pagamento e, também talvez, a senha para o banco de dados. Então tudo o que você precisa fazer é ocultar todo o segredo dentro do arquivo ENV e ignorar o arquivo ENV. E quando você quiser implantar o aplicativo no GitHub. Então, a linha aninhada é o raio-x. Na verdade, o Express é um módulo Node.js que permite um roteamento fácil, certo? E denotamos o próprio MLA com um molho de maçã para enviar uma mensagem diretamente para a caixa de e-mail. E, por último, é o nó amônia alto, que é o nó conhecido. Então, o que as portas normandas são para assistir o aplicativo sempre que houver alguma alteração no aplicativo, ele ajudará a reiniciar a aplicação de dramaticamente. Então aqui no package.json, estrague tudo. Então, aqui vamos configurar os scripts. Tudo bem, então, por favor, uma vírgula aqui, acho que diz o problema. E vamos ter uma preocupação. Vou explicar tudo para você. Então, só temos que digitar o código muito rapidamente. Mpm, start, prefixo. Cliente. Lembre-se sempre de adicionar um coma para que você não se mergulhe em problemas. Metade da profundidade. Simultaneamente. Barra invertida. Npm, execute o lado do servidor das aspas duplas e outra barra invertida vem aqui. Também outra barra invertida, MPM, execute a barra invertida de Clyde, aspas duplas. E o ninho é dar acesso ao herói chamado computar nosso aplicativo para implantação. Agora vou apenas fazer o Comando B para ter uma pensão completa. Heroku. Não se preocupe, vou mostrar que tínhamos que copiar e colar esse código para que você não se trave em problemas também. Foi a produção de sublinhado do BWT MPM . Falso? Em seguida, vou para o cliente de prefixo npm install , MPM run visualizado. Certo? Então, não conheço a pasta de materiais. Materiais. Abra o código Hale-Bopp. Então, vou rolar para baixo. Tudo bem, então aqui está o script de back-end. Ele tem que copiar assim. Venha aqui, limpe, cole. Então isso é exatamente o que você deve fazer. Várias unidades para ter muito cuidado aqui porque quando você cometer algum erro, Hey, honestamente, isso vai fazer você, eu não quero dizer isso. Salve este projeto. Na verdade, o que vou explicar o apelo é o simultaneamente, que é a div, certo? Quando fazemos npm run dev, isso ajudará a parar o front-end e o back-end. Tudo bem pessoal, então isso geralmente é agora para esta palestra. Na próxima palestra, criaremos o poupador. Tome cuidado. 44. criar o servidor: Vamos começar a criar um Comando B protetor para abrir o Explorer. Então, aqui vamos criar o módulo do servidor aqui no diretório raiz. Mas vou fazer é mouse sobre este arquivo aqui, esse ícone, espero que você possa ver. Então você só precisa passar o mouse sobre esse arquivo, que é a nova agricultura pode ver. Clique nele e, em seguida, vamos nomeá-lo de server.js. Outro passa o mouse sobre esse ícone, que é o novo arquivo. Clique nele e, em seguida, teremos ponto ENV. Perfeito. Então agora só temos que manter o segredo de um aqui no arquivo ponto ENV, aqui na pasta Materiais. Então, aqui estão os dois principais segredos que queremos esconder neste curso. Eu só tenho que ligar para B, voltar para VS, bom, colado aqui, salvá-la no server.js. Então agora vamos exigir que nossos pacotes sejam executados nosso servidor usando o Express JS, requerem ponto ENV, dot config. E aqui, por acaso, temos uma constante, chame-a expressa exigência. Queremos exigir raios-X. Então, isso simplesmente significa que estamos importando expresso a partir do módulo expresso. Deixe-me mostrar o que fizemos agora. A partir daqui, apenas exigimos que o expresso a partir do módulo extra e, em seguida , armazená-lo nessas constantes aqui. Os dados mais simples. E também temos que fazer o mesmo pela causa. Com licença, estas precisam ser constantes exigem que vamos exigir a causa. Então aqui vou fazer raios-X. Então, deixe-me explicar para você em um GFP, eles chamarão a função express e colocarão um novo aplicativo dentro dessa variável. Você entende o que eu quero dizer? Então, isso está chamando uma nova função express e, em seguida, colocar um novo aplicativo expresso dentro dessa variável. Agora temos que dizer ao aplicativo para usar chamadas como middleware. Up DOT, use chamadas Express, dot, JSON, app.use. Então, tudo isso eu vou fazer aqui, criando o middleware. Agora vamos criar as portas. Processo ponto ENV, gráfico de pontos. Temos que usar a porta 5000. E vou fazer leasing de pontos para, temos que ouvir um console de porta menos, registrar o pote que estamos ouvindo. Digo servidor, ouvindo a porta 5000, salve. Então, no terminal, vou fazer npm run serve. Duc. Profit guys diz que vários ouvem a porta 5000 e o nó 1 está lendo perfeitamente bem. Tudo legal pessoal. Então deixe-me mostrar quais são as portas de um Ele. Agora vamos supor que eu queira fazer vários ouvindo apenas a porta 5000. Então, vou economizar. Quando salvo, quando você verifica o console, você perceberá que ele diz reiniciar devido a alterações e, em seguida, iniciar o nó server.js. Portanto, a mãe NADH ajuda a reiniciar o aplicativo sempre que você fizer alterações em seu código-fonte. Então isso implica que você não precisa mais vir aqui e fazer npm run server. Isso é tudo por enquanto, para esta palestra. Vejo você na próxima palestra. Tome cuidado. 45. ContactRoute: Tendo criado o servidor na palestra anterior, rapidamente, vamos prosseguir com a rota de contato. Aqui mesmo no VS Code. Tudo o que vou fazer agora é navegar até o Explorer. Então, aqui eu só tenho que fechar o cliente. Tudo bem, então agora estamos aqui no diretório raiz. Então, no diretório raiz, vamos criar um pacote chamado route. Clique aqui, onde meu mouse está na nova pasta. Vamos nomear essa rota de pasta. Bem nesta pasta, vamos criar o módulo de rota. Clique com o botão direito nas rotas. Aqui um novo arquivo, dot js. Então aqui vou exigir o roteador Express. E o ninho é o nó Mailer. Constante. Carregue-me lei. Exigir NADH me Le Havre, certo? Portanto, para implementar o nó Mailer, três etapas estão envolvidas. O primeiro passo é que temos que criar esse transporte de nossos objetos. Etapa dois, temos que definir o objeto de opções de correspondência. E a etapa três, temos que entregar a mensagem com o método de envio de e-mail. Então, antes de prosseguirmos com esses passos de braços, só temos que criar a rota. Agora vou fazer postagens de ponto do roteador, contato de barra única. E aqui precisamos levar para a técnica de solicitação e resposta pyramidalis para não trocar os parâmetros, ok, então quando você responder aqui e solicitar aqui, você pode não tê-lo funcionar para você. Defina para a função de seta, Comando B para ter uma placa completa. Então aqui temos que pegar os dados do formulário, que é do corpo. Agora vamos ter um corpo de ponto de solicitação de dados variáveis porque estamos fazendo uma solicitação da empresa que criamos anteriormente nas palestras anteriores. Se os feeds forem MTU, queremos devolver alguma mensagem para o cliente. E acho que implementamos isso. E o contato J é tão comum P, entre em contato comigo. Então, é exatamente a mesma coisa que vamos fazer. O que são poucas mudanças. Copie as linhas 51 e, em seguida, volte para conduzir a rota, colar. Feche o suporte encaracolado. Então, aqui, será o nome do ponto de dados, comprimento do ponto, que são esses dados aqui. Dados variáveis. Então, a mesma coisa aplicável a todos eles. Ponto de dados, comprimento do ponto e em seguida, comprimento do ponto da mensagem data.dat. Linda. Portanto, se eles são iguais a 0, o que significa que se nada estiver nos campos e você clicar em santo barco, temos que retornar ponto de resposta JSON. Peguei um objeto vazio e vou fazer MSG para a mensagem. Então vamos fazer aqui, por favor, sinta, os campos são lindos? Então, vamos continuar com o primeiro passo. Então alguém pode me lembrar, o que é o primeiro passo? Haha, certo, não se preocupe, vou te ajudar. O primeiro passo é criar esse transportador ou objeto. Deixe o transportador SMTP, carregue-me le dot create transporter. Agora vamos levá-lo algum objeto vazio. Bem aqui. Vamos ter o serviço e será o Gmail. E por favor, você tem que colocar uma vírgula aqui. As portas de conexão. Vamos fazer isso por 65 vírgulas. E agora temos que implementar a autenticação. O usuário. Agora você precisa incluir seu e-mail. Tétano. Este é meu e-mail pessoal. Portanto, certifique-se de corrigir em seu e-mail, à direita, na cotação única, vírgula. E aqui você precisa corrigir sua senha também. Então, digamos que minha senha seja ABC para 23. Portanto, verifique se o e-mail e a senha estão corretos. Se você não tiver isso correto, talvez não funcione para você. Semestre on-line é definir os meios de opção de email. Defina o objeto vazio novamente. Então, aqui vamos ter da ferramenta de e-mail de ponto de dados de coluna. Portanto, este é o e-mail do seu cliente, como se estivesse vindo do e-mail do seu cliente para seu próprio e-mail pessoal, que é o e-mail do administrador. Então eu só tenho que copiar esses. Cole a mensagem do sinal de retorno do assunto do cifrão aqui, abra e feche o colchete encaracolado e, em seguida, nome do ponto de dados, vírgula, HTML, tick de volta. Tudo bem, então aqui você não deve ficar confuso. Este carrapato está abrindo aqui e está terminando aqui. Eu só quero fazer isso para maior clareza para que todos possam acompanhar. Agora vamos ter h3. Feche esta história de um aqui. Informações. Fora da história. Vamos ter uma etiqueta UL. E aqui vamos ter uma etiqueta LI. Agora vamos ter o principal vindo de dados, nome do ponto, destaque, duplicá-lo. E vamos ter o e-mail, e-mail ponto de dados agora. Por fim, vamos tê-lo para uma mensagem. Mas para isso, temos que nos mover para fora da etiqueta e das técnicas da UL. Ainda estamos no HTML aqui. Vamos ter um h3. Então, basicamente, o que estamos fazendo é projetar o layout para o qual a mensagem assumirá certo, na sua caixa de entrada, certo? Então, estamos criando o layout para a mensagem. É tão simples quanto isso. Mensagem. H3, tenha uma tag p e, em seguida, feche a tag p. Mesmo entre a tag. Vamos ter um cifrão, abrir e fechar dados de colchetes encaracolados. Me, certo? Então, isso é tudo para as opções de correspondência. Então, logo após isso, nossos objetos de correspondência, temos que enviar a mensagem com o mesmo método de e-mail. Então, tudo o que vou fazer aqui é enviar e-mail de ponto transportador SMTP , as opções de refeição e, em seguida, defini-lo para nossa função. Então, essas vezes podem gerar um erro. Então, temos que embrulhá-lo em um bloco try. Então, aqui devemos aceitar o erro também. Certo? Certo, e um bloco de cartão, vamos retornar o ponto de resposta. Portanto, se o response.status for um JSON principal de 500 pontos, passaremos a mensagem. Aqui. Vamos fazer uma mensagem. O erro do servidor IIS. E também aqui no bloco try. uma vez, mais uma vez. Se response.status for 400, vamos fazer. Por favor, sinta e ouça a resposta. status do ponto é 200. Então isso é um sucesso, que é a mensagem. Então, obrigado por linda, certo? Então, o que temos para exportar este módulo? Exportações de pontos do módulo, roteador. Linda. Tudo bem, então antes de encerrarmos esta palestra, temos que fazer uma coisa aqui. Você pode ver esse colônio-colônia? É isso aqui. Então, isso não deveria ser. Então, tudo o que vamos fazer agora são destaques de estragar. Aqui, não é? Então, ele deve terminar aqui. Comando V para colar. Você pode ver, você sabe, tudo legal. Rapidamente, vamos para as mesmas ideias e importar esse módulo. Vamos fazer isso aqui. Certo? Então isso é tudo por enquanto, para esta palestra. Vejo você na próxima palestra. 46. Configurar o Gmail: Vamos configurar o aplicativo pela metade do e-mail, trabalhando com ela em server.js. Bem aqui. Temos que aquecer a rota. Agora. Vou fazer pontos, usar karma. Rota de contato. Você reforma segura. Agora abra o arquivo package.json diretamente no diretório do cliente para o front-end. Então vou fazer o Command P package.json. E então aqui está, esse cara aqui no front-end, que é o diretório do cliente. Tendo feito essa heroína para. Role para baixo. Aqui está o proxy, destaque. Copie heroína para o código VS e cole-a aqui. Salvar. Tudo bem, então se seu aplicativo ainda não estiver sendo executado, então agora vou fazer o Control C para parar o servidor. Então eu tenho que começar tudo de novo para que todos possam acompanhar. Agora vou fazer npm run dev. Claro que você deve saber que isso iniciará o front-end e Oswald o back-end. Vamos tentar clicando no mesmo comprado no DOC que diz, por favor, sinta que são os campos. Deixe-me mostrar-lhe rapidamente aqui no VS Code e, em seguida, entre em contato comigo EGS. Então aqui é onde tínhamos a condição. Aqui está isso. Portanto, se os campos estiverem vazios, temos que receber essa mensagem do back-end e exibi-la no front-end. Então deixe-me mostrar-lhe no back-end onde realmente jogamos essa mensagem. Abra a rota de contato. E por que é isso? Então, o front-end está recebendo essa mensagem aqui. Então, agora, quando fizermos isso com sucesso, vamos pegar esta mensagem e depois mostrá-la para o front-end também. Agora heroína para o navegador, a menos que finalize o e-mail e a funcionalidade. Então, antes de experimentarmos a funcionalidade continental, temos que fazer algo aqui no poderia ajudar a copiar esses Heron para o navegador e depois colá-lo aqui. Então aqui você só tem que colocá-lo. Agora deixe-me desligá-lo. Você pode ver isso sim, por padrão, será assim se você não tiver feito isso antes. Então, se for assim, você só precisa colocá-lo. E isso é exatamente o que você precisa configurar para o Gmail. Vá para o portfólio. E aqui. Só vou recarregar. Então vamos tentar. Ok, então antes de fazermos isso, tenho que mostrar meu e-mail direito. Para maior clareza. Agora, você pode ver o nosso direito, Harold até o fim aqui eu vou ter um gmail.com. Ok, então vamos tentar clicando no mesmo barco. Espere por isso. Diz obrigado por entrar em contato com uma névoa é que isso significa que, felizmente, está tudo bem como suspeita, heroína para o Gmail. E deixe-me mostrar-lhe. Estão certos. Então, aqui está isso. O nome é um do baba, o e-mail é adobe.com e aqui está a mensagem. Tudo é legal pessoal sempre que a equipe está trabalhando como esperado, mas algo está errado, então eles não deveriam estar lá. Então, talvez tenhamos algum tipo na rota de contato, então verificamos isso mais tarde. Agora deixe-me mostrar-lhe algo. Como você pode ver aqui, você perceberá que a gordura tostada, que é o reagir para justificar, não está aparecendo. Heroína para código VS, a menos que implementado. Vá para o corticobulbar. E aqui temos uma cópia baixa, esta Importação. Copie, reaja ainda mais para justificar o harém ao VS Code comum P e, em seguida, defina para o nosso app.js. E aqui só temos que colar essa importação e, em seguida, embrulhar o pacote com o contêiner de torradas. Qual é a etiqueta de fechamento automático? Salvar. E vamos verificar novamente. Você pode ver isso? Isso não é lindo? Isso é realmente incrível. Gosto disso. Então, vamos tentar mais uma vez agora eu vou clicar na porta Enviar. Espere por isso. Você vê isso aqui como o exagerado para justificar posicionado no canto superior direito da tela. Perfeito. Tudo está funcionando conforme o esperado. Então, vamos para o Gmail. Certo? Temos que ver, ok, aqui está a nova mensagem. O nome é John e, em seguida, o e-mail é D DMU.com. Aqui está a mensagem. Tudo bem, por enquanto, eu só quero que você ignore isso, certo? Definitivamente, ou vamos consertá-lo nas próximas palestras. Tudo isso é da nossa primeira palestra. Vejo você na próxima palestra. Mantenha-se focado e tome cuidado. 47. Como corrigir erros: Tudo bem, então aqui você perceberá que diz mensagem do nome do ponto de dados. Obviamente, há algo errado em onde temos que voltar ao código VS e corrigir isso rapidamente. Heroína para código VS. Certo. Então você só precisa entrar na rota de contato. Com licença, tenho que verificar novamente. Diz mensagem do nome do ponto de dados. Certo. Portanto, isso deve estar nas opções de e-mail. Temos que verificar a mensagem de sais do nome do ponto de dados. Isso deve estar correto. Tudo bem pessoal, eu vejo, agora temos que usar os colchetes encaracolados k. acho que este é o nome certo. Salve-a no navegador, irrealista e fora. Volte para o portfólio, suba, recarregue. Vamos tentar mais uma vez. Mas o nome do cliente é Joe. O e-mail assumimos que é Joe em gmail.com. Joe, só quero dizer, oi, adoro seu projeto de portfólio. Clique na porta de envio, a menos que faça check-out. Linda. Você pode ver isso? Minha caixa de entrada e vamos conferir. Temos que recarregar. Dê uma olhada. Você pode ver a mensagem do Joe? Perfeito, eu adoro. Agora, tudo está funcionando conforme o esperado. Ozônio. Este é, de fato, um portfólio clássico, atualmente em alta. E deixe-me mostrar mais uma coisa. Quando o formulário for enviado com sucesso, queremos limpar os campos, certo? Então, o que significa que queremos definir os campos para seu estado padrão. Então, código Heron para VS, a menos que faça isso semanalmente. Entre em contato comigo VGS. Certo, nesta função aqui em baixo , onde temos o sexo SOC de um feno. Então, aqui vamos definir os campos para seus conjuntos de estados padrão Nim. Temos que definir o nome para uma string vazia, destacar duplicado duas vezes. E então aqui temos que mudá-los para e-mail. E, por fim, temos que fazer isso pela mensagem. Seguro. Vamos tirá-lo mais uma vez. Relu k. Então vamos tentar aproveitar novamente desta vez, Joe. E ele vai ser joe.com. Você pode ver Não. E quando a mensagem for subtextos será atualizada. Então vá para a caixa de entrada. Aqui está a nova mensagem do trabalho. Atualmente em alta. Linda, eu gosto disso. Então amigos. Este é o fim de todo o projeto. Espero que você vai adorar. 48. Limpe o código e prepare o prepare para implementação: A etapa final antes de implantar seu aplicativo no Heroku. Código Heroku VS, a menos que faça as alterações necessárias. Abriu o testemunho, testemunho JS e o tem. Tudo bem, vá para a área de trabalho onde o projeto está localizado. E aqui eu o tenho no canto superior direito da tela, portfolio Pro, que é o diretório raiz ou foi aberto o público cliente. Bem aqui. Vou copiar o pacote, IMG. Copie, volte, prossegue para o SRC e cole-o aqui diretamente no SRC. Volte, abra o público mais uma vez. Sucata heroína para o navegador, e vamos ver se ele é recarregado. Role para baixo até o depoimento n. Aqui está o que você vai ver na tela do que se preocupar, nós vamos ter isso corrigido em uma heroína GP para o código VS. Ok, então estrague tudo e deixe-me mostrar-lhe aqui, vamos importar as imagens. Ok, então eu vou importar, desculpe-me, vamos abri-la como RC IMG. Agora, essas são as várias imagens relevantes para o componente depoimento. Vamos importar é. Vamos conferir os depoimentos. Aqui temos a senhora ponto PNG, chame-o P estragar. E eu vou nomear essa imagem senhora de uma vez que a cabeça, SRC corte IMG. Essa é a amônia slash lady dot PNG. Salvar. Role para baixo até o primeiro depoimento e o odeia. Então, o que vou fazer certo nesta tag SRC, limpá-la e depois abrir e fechar o suporte encaracolado. Temos que tirar a imagem, senhora. Seguro, ok. Heroína para o navegador, recarregue. Você pode ver que este é o primeiro depoimento. Plaza. Pode ver que a imagem apareceu. Volte. Agora temos que fazer isso para o resto dos depoimentos. E aqui temos a imagem para ser myc dot PNG, pegar destaque, duplicado quatro vezes 1234. Ok, então aqui temos que importar Mike dot PNG. Role para baixo primeiro testemunho, o círculo e o Fed. Com licença. Certo, aqui está o Fed. Também senhora ponto-ponto-ponto E tudo bem. E também temos o man dot PNG rolagem para cima. Então, eu só tenho que importar todos os arquivos ou imagens main.py E rolar para baixo pela última vez. Deixe-me mostrar-lhe. Então o FUTA está estragado. Só temos que importar todas as imagens. Limpe isso. Caras legais. Com isso, estamos prontos para ir. Então, aqui, vamos dar um nome a ele. Este deve ser o meu fim. Estes devem ser e isso deve ser forma. Tudo bem pessoal, isso é tudo para a importação. Então, temos que consumir essas entradas. Certo? Isto é o que um microfone, bem no SRC, limpe isso aberto e feche o suporte encaracolado, então pegue-o Mike. É tão simples quanto isso. E também temos que fazer a mesma coisa aqui. E isso é para a senhora de novo. Por fim, para o fundo curvilíneo ao redor do navegador e frio, tudo é reconhecido como espectadores. Isso é tudo por enquanto. Na próxima palestra, implantaremos este projeto em Hiroko. Tome cuidado. 49. Implantar o Heroku: Tudo bem, é hora dos companheiros de brincadeira. E, claro, no final desta palestra, você deve ter seu aplicativo ao vivo na Internet. Parece bom, lindo. Heron para código VS, a menos que prossiga, abra o server.js. E se eu aqui, vamos criar um ativo estático para o heroku colocar nossos arquivos. E vamos fazer isso aqui. Vamos fazer isso com base na condição. Se o processo pontos, ENV, ponto, carregar na pontuação, inveja e eu mostrar-lhe rapidamente como heroína para o arquivo ENV. Então, aqui está isso. De volta ao servidor. Portanto, se isso for igual produção, o que significa se estamos implantando o aplicativo. Agora, isso é o que vamos fazer. Nosso adotivo, temos que criar uma pasta. E vou fazer ABC dot enorme. E, claro, isso vai ser uma função de middleware. ponto expresso começou aqui, bem no cliente, vamos criar a bela ordem. Então, basicamente, o express.static fornece arquivos estáticos, como HTML , CSS e o resto deles. Quando queremos usar o Butte, queremos salvar esses arquivos na bela ordem. Portanto, se um cliente fizer uma solicitação ou queremos enviar o index.html primeiro. E, claro, você deve saber que o index.html é composto por todo o aplicativo. Abc dot, pegue. Certo, canto. Aqui vamos adotar dois parâmetros, solicitações e resposta. E, por favor, novamente, não troque os parâmetros. Deixe do jeito que você vê hoje. Agora vamos fazer ponto de descanso, enviar arquivo, caminho, resolução de pontos, sublinhado, sublinhado, nome DIR, que é o nome do diretório, é o cliente, coma. E então aqui temos o BWT. E agora temos que segmentar o HTML de ponto de índice. É tão simples quanto isso. Salve-a, certo? Tudo é legal. Agora a linha é fazer login no Heroku, heroína no navegador e procurar por heroku.com. Tudo bem, já estou logado, então eu só tenho que sair, então vou começar do zero. Então isso é exatamente o que você vai ver se tiver uma conta na Heroku, tudo o que você precisa fazer é digitar o endereço de e-mail e sua senha. Mas se você não tiver uma conta, você só precisa criar uma para si mesmo. Então, para fazer isso, venha aqui e, em seguida, clique no botão de inscrição. Quando você clicar no botão de inscrição, ele o levará a uma página onde você preencherá os detalhes necessários e, em seguida, você terá sua conta aberta. Então, se você já tiver uma conta aqui, vou ficar na minha conta do Gmail, no Gmail e, em seguida, clicar na ligação de login. Ok, então quando você olhar para a borda esquerda da tela, você verá alguns dos projetos que eu implantei no heroku. Aqui. Você pode ver, não se preocupe, se você é novo na Heroku e ainda não implantou nenhum aplicativo, portanto, a peça ficará vazia. Então, não quero entrar em pânico. E no lado direito da tela há uma breve descrição deste aplicativo. Você vê isso aqui? A descrição dos aplicativos está certa? Então, para criar um novo aplicativo, você só precisa clicar no meio-dia, OK e, em seguida, criar um novo aplicativo. É tão simples quanto isso. E aqui vamos dar um nome a ele. Portfolio Pro. Diz que o portfólio Pro não está disponível. Isso significa que esse nome já foi escolhido por outra pessoa. Então, tudo bem. Então, vamos ter aqui e fazer portfólio. Tudo bem, então esse nome está disponível. Temos que fazer uso desse nome é bom, mas sim, então temos que fazer uso dele. E aqui você tem que escolher onde você está localizado, seja nos Estados Unidos ou na Europa. Então, vou deixá-lo como Estados Unidos. E, em seguida, clique na guia Criar. Role para baixo e deixe-me mostrar vocês dois têm o aplicativo implantado no Heroku. Vamos usar todas essas instruções, heroína para código VS, a menos que prossiga com isso. Aqui no código VS, a primeira vez que vamos fazer é inicializar o comando B. Claro, você sabe, ele deve aparecer o Explorer. Então abra os clientes. Deixe-me mostrar-lhe aqui. Você vai ver esses guids aqui. Você vê isso? Mas para alguns de vocês, talvez não precisem chegar lá. Tudo o que você precisa fazer é vir aqui no canto inferior esquerdo da tela. E você verá o ícone de configurações aqui. Clique aqui em duas configurações. Bem na caixa de areia, vamos procurar por Faust exclua. E esses são os arquivos excluídos. Portanto, se o seu não estiver lá no diretório do cliente, ele deve estar aqui. Ok, então você só precisa procurá-lo e, em seguida, apertar este botão aqui para removê-lo do arquivo SQLite. Então, tudo o que você precisa fazer é clicar neste ícone aqui. Certo? Então, vou fechar o kn dela depois de toda a luta. Sinto muito, não vamos usá-lo e o diretório do cliente. Ok, então aqui estão os guids. Clique com o botão direito, sucata. Feche o diretório do cliente e, em seguida, saia do portfólio do diretório raiz pro. Certifique-se de que você está fora desse cliente de diretório. E aqui estamos no diretório raiz. Pode ser um determinante e depois vir ver. Então, estamos no portfólio do diretório raiz Pro. O que vou fazer agora é inicializar o portão e as colheitas no diretório raiz. Entrou nele. Você pode ver isso? Aquecer na tecla Enter no teclado? E aqui está o bom de um cabelo no diretório raiz. Então, a intenção aqui é adicionar tudo isso cai no portão. Tudo bem, vamos fazer isso rapidamente. Mais uma vez, heroína para o terminal. Agora vamos fazer git, adicionar espaço ponto. Você pode ver o que eu fiz na tela? Obtém espaço, estranho, espaço, não. E isso adicionará todos os arquivos no portão. O ninho e a linha são para confirmar essas alterações. Um Heroku, Heroku. Aqui temos que copiar o git commit. E aqui está isso. Copie-a para o código VS. Cole-o diretamente no terminal. Mais uma vez. Volte para aqui. Temos que copiar esta instrução. Cópia. Venha aqui, cole. Tudo bem, então heroína para Heroku de novo. Agora temos que empurrar o aplicativo para Heroku, copiar este comando, heroína para o código VS, colar diretamente no terminal e, em seguida, pressionar a tecla Enter no seu teclado. Isso vai gravar o aplicativo e implantado no Heroku. E esse Butte vai demorar algum tempo. Então eu só tenho que pausar a gravação. Aplicativo implantado com sucesso. Agora você pode abrir este aplicativo no código VS no Heroku e abrir o aplicativo. Então, se você quiser fazer isso no VSCode, só precisa fazer o Heroku. E isso dará início à vida do projeto no servidor Heroku. Vamos esperar por isso. Até antes. Isso é realmente incrível. Gosto disso. O aplicativo está ao vivo na internet. Certo? Eu adoro isso. Vamos retirá-lo rapidamente sobre MEU currículo. Teste amônia e entre em contato comigo. Linda, eu adoro. Então, vamos experimentar a funcionalidade continental. Pela 41ª vez, você implanta este aplicativo no Heroku e o e-mail não funcionará. Você sabe por quê? Simplesmente porque você tem que dar acesso à máquina Heroku para o Gmail, heroína ao código, como a energia abriu os materiais. Poderia ajudar nossa rolagem para baixo. E aqui está isso. Dê acesso à máquina Heroku ao seu Gmail. Copie este link aqui para o navegador. E ei, eu só tenho que colar. Tudo o que você precisa fazer é clicar no botão Continuar aqui no aplicativo e vamos conferir. Portfólio. Então, o nome da VM será Joe Gmail. Gmail.com. E a alegria só quer dizer oi. Olá. Clique no botão Enviar. Aqui vamos nós. Você pode ver que tudo está funcionando conforme o esperado? Vamos conferir no Gmail. Então Heron para a caixa de entrada. Você pode ver aqui está a nova mensagem de Joe. E Joe diz: oi David. Este é o nome do remetente, o e-mail do remetente. E essa mensagem vem do Joe. Isso não é lindo? Clássico? Vamos pegar um átomo plataformas móveis. Você vê isso? Tudo está funcionando perfeitamente bem? E, claro, isso já está implantado no salva-vidas. Você pode usar seu telefone para abri-lo e conferir. Perfeito. Este é, de fato, um projeto de portfólio clássico. Isso geralmente é agora para esta palestra. E na próxima palestra, enviaremos o código SAAS para o GitHub. Vejo você na próxima palestra. Tome cuidado. 50. Implantar o Git: Tudo bem, então vamos empurrar o projeto, levá-lo para o Heron para o navegador rapidamente. Então aqui você só precisa fazer github.com. Certo, Nice. Portanto, se você não tiver uma conta no GitHub, tudo o que você precisa fazer é clicar em Inscrever-se, preencher os detalhes necessários e configurar sua conta. Então, eu já tenho uma conta. Só tenho que assinar um e aqui vou fornecer meu e-mail. Aqui está meu e-mail e minha senha. Em seguida, assinar o osso aqui é minha conta do GitHub. Quando você olha para o lado esquerdo da tela, você verá os vários projetos que eu implantei no GitHub. E aqui v. Então, para você, se esta é sua primeira vez usando o GitHub, você pode não ter nada lá. Então, para criar um novo projeto, clique neste ícone aqui no canto superior direito da tela. Este ícone plus, certo? Ei, você vê? E, em seguida, novo repositório. Temos que especificar o nome do repositório. Portfolio Pro. Então aqui temos que fornecer a descrição, mas isso é opcional, mas eu aconselho você a sempre dar uma descrição. Legal. Role para baixo. Clique em Criar repositório. Tudo bem, então agora vamos seguir estas instruções para implantar o projeto. Heroína para VS Code. Venha ver e, por favor, certifique-se de que você está no diretório raiz. Tão importante. E tudo bem, vamos fechar isso. Não precisamos mais disso. Então eu só tenho que esfregar novamente. Escriba. Aqui no diretório raiz, temos que inicializar o novo portão. Então aqui eu vou fazer o bem nisso. E ei, é depois de inicializar o portão, o que mais temos que fazer? Alguém pode me dizer? Tudo bem, não se preocupe, eu vou te ajudar. O próximo na linha é adicionar os arquivos no portão. Todos esses arquivos aqui, vamos adicioná-lo ao portão. Então, para fazer isso, ok. Deixe-me deixá-lo para que você possa fazer isso. Experimente. Certo? Você simplesmente tem que fazer obtém espaço, pontos. Retire isso. Não segure Heroku, desculpe, heroína para pegar Rava. E aqui temos que copiar esse comando. E, claro, isso vai ser um commit de fest. Colby. Desça até o terminal, cole novamente. Mas, para obter, também temos que copiar esse comando. Copie esta instrução aqui. Venha para o terminal, cole, pressione a tecla Enter. E, por fim, temos que empurrar o projeto para obter salto, voltar atrás. E agora só temos que copiar isso. Cópia. Então, temos que fazer algumas alterações aqui. Esmagado na chave para conseguir arma de fogo. Ok, então a operação é bem-sucedida. Temos que conferir no GitHub, ir ao GitHub. Tudo o que temos que fazer agora é recarregar. Dê uma olhada. Você pode ver lindo. Agora temos o projeto implantado no GitHub. E espero que você tenha aprendido algo bonito neste curso. Estão certos.