Resumo da Aula - Criando um Portal de Notícias com Next.js

Bem-vindo a mais uma aula, nosso curso, para criar um portal de notícias com o Next.js Semantic, UI React, Express e Postgres. Vamos continuar, estamos focando no frontend agora, criamos o aplicativo de Next, vamos começar a trabalhar um pouco mais esse frontend, então vamos lá. Então vou começar adicionando o comando para poder iniciar o app para a gente não precisar toda vez npx Next Dev, vamos abstrair esse comando em outro comando mais simples, vamos aqui no terminal, se você se lembra npx Next, espaço dev é o comando para rodar um servidor de desenvolvimento e eu coloquei na, antes disso gostaria de falar que eu criei um novo diretório para poder conter o projeto Gazeta Mundutech Client Web e vai ter outros diretórios para o servidor back-end API, por isso que eu criei isso, aí então você dê para o Gazeta Mundutech Client Web que era aquele app que a gente já tinha gerado e vou digitar npx Next Dev. Então para eu não poder ter que digitar o npx eu vou no arquivo package.json na parte de propriedades de npx, vou adicionar uma propriedade desse objeto e depois as chaves vou digitar abrir aspas, duplas, dev e vou digitar o comando que é Next Dev e assim a gente vai poder rodar npm run dev e ele vai dar mais comando do Next Dev. Então abdestraímos o comando de desenvolvimento aqui, obviamente a gente não vai mudar de Next, mas se fosse mudar para outro framework, o comando seria mantido mesmo enquanto você mudaria só apenas o valor aqui automaticamente, quando você rodar npm run dev ele rodaria esse novo comando. Qualquer maneira agora eu posso dizer npm run dev em vez de npx Next Dev e ele vai rodar o comando Next Dev, do node module, local. Tá bom essa primeira coisa. Agora vamos ver. Ah, eu queria falar de layouts também. Ah, olhando o nosso código fonte na pages, artigos, temos o índice de artigos e temos o artigo específico. Note que ambos contém o mesmo título do website, né? Então eu escrevi duas vezes. E claro que em produção no mundo real, normalmente nós criamos layouts que serão reutilizados em cada página. Então cada página normalmente vai ter a mesma estrutura de header e o conteúdo principal que é dinâmico, que muda, seguido de um footer que é a parte lá do canto inferior do website. Então como criar esse layout no Next Dev para a gente só escrever uma vez as partes que realmente não mudam no site, né? Então para fazer isso eu vou criar um arquivo na pasta pages chamado underline app.js. Nesse arquivo vamos definir um componente e exportar o default. Então vou falar export default function app, abre os parênteses, abre as chaves dentro de chave, você retorna, abre parênteses, abre os layouts, né? Você poderia criar um componente layout separado e incluí-lo aqui ou você pode diretamente escrever já o layout aqui, tanto faz. Então nesse conteúdo aqui eu vou colocar um fragmento, né? Que é o menor que, maior que, que é uma tarde para escrever react.fragment, tá? Mesma coisa. Então dentro disso poderia fazer uma div, se quiser criar uma diva, eu não vou criar diva. Então vou colocar um header aqui, tag de header, vou colocar um tag de main, é o conteúdo principal e um tag footer, tá bom? Então é um estrutura bem básica, temos o header que é a parte de cima do site, main que vai ser o conteúdo principal e o footer que é o conteúdo lá, lá debaixo do site do cantifério. Normalmente tem a mensagem de copyright, né? E aí, vamos ver os outros coisas sobre a companhia e tal e tal. Ok, então vamos ver aqui. Ah, desse componente no header eu vou cortar aquela parte do título do website, né? Que tinha no site do arquivo, artigos index.js, vou pegar ele e vou colocar dentro do header, do app, dessa maneira aqui. Vamos rodar o nosso site para ver no que dá. Eu vou para localhost 3000. Você já aparece aqui. Nesse futebol é barra artigos. Aparece a mesma coisa, né? Então não aparece mais a página de artigos, só aparece o layout. Por que a gente definiu o underscore app.js que vai ser o layout, mas o layout precisa saber qual é o conteúdo principal. Nesse caso será veradas props do app, definir props como o argumento aqui do app, parâmetro props e na parte de main, né, entre as tags de main, eu posso falar props.children que são os filhos, né? E na verdade é será essa página artigos index, caso, se eu salvar e... Ah, desculpa, eu errei aqui. Não é o children, é o componente. Eu tenho que ser o componente. Vou ver aqui. Props component assim. Pronto. Então não era o children, desculpa. É o props.component, component English. Uma primeira letra maiúscula. Agora esse component também vai ter suas próprias propriedades, então você pode passar para o componente três pontos props.page props. Então não vai passar propriedades lá para o componente que é renderizado na parte de main. Então os três pontos é para poder você se ver um objeto. Todas as propriedades do objeto serão incluídas como props para esse component. Então vamos dar uma olhada aqui do navegador do lado esquerdo da tela para ver qual foi o HTML gerado. Eu vou expandir a div, um id underscore underscore next. Você note que temos o header, o main e o fura como definimos no componente app. No header temos o h1 como definimos. No main agora tem um componente div que vem lá do index.js do artigo, que é a mesma coisa que definimos lá. É injetado aqui na parte do props.component que passa os page props. Noto que agora temos dois títulos de websites porque no index.js do artigo eu ainda tenho o h1, vou remover. Tem essa div aqui do main e tem um div, se você não quiser essa div intermediária, como eu disse já fiz antes no app, você pode torná-la um fragment, react.pragment que ele vai remover a div e ter só as divs internas. Está certo? Vamos dar uma olhada no page específico do artigo, mesma coisa aconteceu lá, temos que atualizar no artigo slug.js e vamos remover o h1. Se quiser remover a div intermediária é só remover a div e torná-la um fragment. Linha 16 também não se esqueça de fechar. Agora temos o main com a div do título, do artigo e o conteúdo com os pês. Muito bem, então esse é o layout que você pode e ele vai ser para cada página do next.js vai ter esse mesmo layout. O arquivo é underscoreapp.js na no direitório pages. Se quiser colocar alguma coisa no footer, sei lá, copyright, copy, gazeta do mundo tech, mesma coisa do título, do website. O ampersand, copy e pontivígula é só o símbolo do C dentro de um círculo, que é o símbolo de copyright. Esse é o html entity, que corresponde a aquele símbolo. Vamos ver o que fazer agora. Que tal a gente dar um retoc nesse estilo? Nesse curso eu vou usar como um sistema de design do interface usuário, o semantic, oe react, em inglês semantic, oe react. Pode ser qualquer um que você quiser, a gente não tem aqui perder tempo escrevendo CSS manualmente do zero. Esse aqui já tem os elementos já criados, os botões, input, listas, todos esses negócios aqui já criados. Note aqui no exemplo que eles dão o lado direito ao html que é gerado e no lado esquerdo é o equivalente que a gente vai escrever em jsx. Nesse caso o componente rating corresponde a prendes a um andive com a classe ue, eu passo outra classe rating e tem um atributo de data aqui e ele cria aquele componente. Deixa eu ver rating, por exemplo. Rating é como se fosse uma estrela, pelas corações. A avaliação de um test-service foi boa ou não? Interessante esse aqui tem um negócio para mudar. As estrelas podem ser escritas com o componente rating. Então de volta ao design aqui, um design bem simples, eu não queria ver muito design mais esse curso é mais para funcionalidade, então se você quiser dar um retalk melhor no design desse curso, tenta-se a vontade, eu vou fazer o mínimo mesmo só para ter alguma coisa que não seja bem grossa. Nesse design aqui tem uma caixa de retango que encobre os títulos de cada artigo. Para fazer essa caixa no Semantic UI React, nós precisamos encontrar um componente equivalente ou parecido com essa caixa. Eu poderia usar o List, por exemplo. Você mostra esse tipo de List, tem outros com Z-Iconies, tem outros com esses separadores, isso aqui seria legal com uma linha entre cada item da lista, tem esses aqui listas de sistema de arquivo e assim por diante. Mas eu não vou usar esse aqui, acho que não tem nenhum com retângulo. Eu vou dar uma olhada em outros, tem as coleções, mensagem, esse aqui parece um pouco mais para mensagem, poderia usar ele mais views, card, vamos dar uma olhada em views, card. Parece que esse é o mais parecido, se eu remover o Fuller e a imagem e esses títulos aqui, poderia... Deixa eu clicar aqui em Try it, se você clicar em Try it, você pode modificar o código e ver o que acontece na mesma hora. Então tem um card, tem uma imagem, vou remover essa imagem, tirei a imagem, dentro de card tem o componente card.content, tem esse card header, vou remover, tem esse card meta, remover, isso só sobrou a card para description que seria o equivalente do título do artigo. Tem também card content extra, que é a parte lá de baixo, eu posso remover. Acho que essa lista é bem simples com card, card content, card description e o conteúdo seria o equivalente desse design simples. Então vamos instalar o symmetric react UI, se eu colocar aqui introdução, clicar Get Started, tem as instruções, então tem que instalar, primeiro tem que ter o CSS a folha de estilos deles e tem que ter o pacote com os componentes de react, então a folha de estilos seria do semantic traço UI traço CSS e os componentes de react seria o pacote semantic traço UI traço react, deixa eu dizer S, E, M, A, N, T, I, C, traço UI, traço R, E, A, C, T. E na hora é para importar, só importar no semantic que vai ser CSS para ter folhas de estilos, as que quiser minify barra semantic.min.css. É uma das maneiras, opção 1, pelo generador de pacotes, opção 2, você pode também, é só no cdn do bundle, pode copiar a tag de link e copiar o script com o JavaScript. Eu vou escolher a opção 1, então vamos lá no terminal, vou matar o servidor, vou falar NPM, espaço install, espaço semantic, espaço UI, CSS, espaço semantic UI, traço react, então semantic traço, opa, clica o desceio, semantic UI CSS, semantic UI React. Não pode resolver dependência. Deixa eu ver o Canton. Não, como é que temos em Wehrmacht no taxinal, adicionar o deve que o e-gente funcionou. Vamos ler o erro. Encontrou o react na versão 18 que acabou de ser lançada. No modules react, from the root. Não deu para resolver a dependência do semantic wire act, que depende de react 16 ou 17. Acho que é um problema de usar o react que acabou de ser lançado, que é a versão 18. Para corrigir isso, posso dar um downgrade enquanto o semantic wire ainda vai ser atualizado. Só para esse curso vou fazer um downgrade aqui. Essa versão acabou de ser lançada, então vai dar um tempo para o react semantic wire para atualizar suas dependências. Então, deixa eu dar o npm aqui. Install react, arroba 17. React down também, vou modificar react, traço dom, install at 17. Pronto, então vamos dar o grande para o react 17 para poder ser compatível com semantic wire act. Vou dar npm install semantic wire CSS, semantic wire act de novo. Tá bom, então agora funcionou. Temos aqui o CSS e o react. Agora chega aquela parte de... Como é que a gente vai adicionar com os estilos para o next.js? Onde é que a gente vai dar aquele import? Vamos ver aqui. A gente vai dar um import lá no underscoreapp.js. Se você tiver CSS global, que é o caso aqui, vai lá no underscoreapp.js e fala que ele import. Nesse caso import, semantic, traço UI, traço CSS. Vou dar minify, o barro semantic.min.css. Vamos dar npm run dev. De volta aqui. Já mudou o estilo do site no navegador no lado esquerdo da tela. Isso significa que funcionou o import. Então se você tiver imports globais, coloque aqui no underscoreapp.js lá em cima. Vamos prosseguir para usar aquele card para index artigos, barraindex.js. Vamos lá. Vamos usar o card. Como a gente está usando o card? Lá em cima vai import. Abre chave, card, from, eu acho que é semantic, UI react. Vou confirmar no lado esquerdo do navegador. Vou expandir a tela porque deu um navo para ver direito. Então import chaves, card, from, abre aspas, semantic, traço UI, traço react. Tá correto. Vamos lá no conteúdo linha 6, continuar. Mesma coisa que está escrito, já experimentado aqui, vai ser a mesma estrutura, card, dentro de um card, tem um card.content, dentro de card.content, tem um card.description, e dentro do card.description, finalmente a gente pode mover o título do artigo. E eu posso pegar esse aqui e copiar três vezes, duplicar, três vezes, vai ter a mesma coisa. Salvei, de volta ao navegador, atualizar. Será que deu eu? O que aconteceu? Undefined, undefined. Undefined, undefined. Port card. Ah, porque eu estou na pareda errada. Pira a parte dos artigos, é só barra artigos. Então parece aqui, né? As caixas com o título do artigo. Ok. O que a gente pode fazer? Na página, vamos fazer aqui, vamos falar de... Vamos falar de link. Vamos ver a gente vai linkar para a outra página, em vez de a gente ficar digitando manualmente. Então vamos falar de link. Então como é que a gente cria um link para a outra página? A gente vai usar o link do next, tá? Então vamos lá olhar o documentação, na página next.docs procura link. Então está aqui next.link. Transições do lado cliente entre as rotas, usando link. Um exemplo aqui, é só você digitar link com a garra F, da mesma maneira que a A, né? E o local. E nesse caso é interessante que ele ainda tem que digitar o A, né? O anchor. Tá, então vamos lá. Eu vou linkar esse... No lado direito da tela aqui, no editor de texto, vou falar link. Agora vamos importar o link lá em cima, import link from asples next, barra link. Nesse caso não tem a chave cobrindo o link. Agora de volta a linha 10, a garra F, vai ser o slug do link, nesse caso não tem ainda nada. Então vou dizer só a barra artigos, barra loren traço y. A fecha é o link, abre o link, dentro do link vou colocar, vou mover esse título e vou colocar um tag de A, dessa maneira aqui. Voltando ao negador, salvo o arquivo e valo o negador, agora tem um link. Eu clicar, ele vai para a página, né? Nesse caso, na transição de lado do cliente, não vai fazer uma nova requisição ser o do para a página inteira. Tá certo, nós só fazer a mesma coisa para os outros. Na linha 19, colei a mesma coisa, na linha 28, colei a mesma coisa. Com isso vai para outra página. Na outra página, se quiser a gente colocar mais um retângulo cobrindo o conteúdo, nós podemos usar a mesma coisa, o mesmo card cartão. Então vamos lá. No arquivo artigos, barra artigos slug, na parte dos pês, vou substituir a dev aqui, e dentro do card, tem o card, o card content, content, content, content, content description, da indicação duas vezes. Fechar o card contents. Meu editor de texto automaticamente adicionou import na linha 2, tá? Então import, chaves, card, prão, aspas, semântec, traço UI, traço react. Calvar no lado esquerdo ele atualizou com o conteúdo. Até o título aqui, se quiser dar mais prominência, a gente pode achar uma... uma... sei lá, modificar o texto, a tipografia, ou pode até usar o título do cartão mesmo. Eu não coloquei no design, que é bem simples, mas a gente pode mudar se quiser para se adaptar a esse cartão. Poderíamos usar o card, cadê? Vamos atualizar isso para ter o exemplo de novo. Try it para ver o código. Card.header. Se eu colocar esse dentro do card, criar card.header. Card.header e colocar o título aqui. Vamos ver como fica. Fica assim, eu não sei se você gosta. Por que que esse aqui tá... inegrito e o outro não tá? Card, card content... ah, porque ele tá dentro do card content, ok. Então card.header tem que estar dentro do card content. Ah, agora melhorou, né? Agora tá inegrito. Certo. Interessante que não tá pegando a comprimento de toda a janela, porque... Vamos ver description... content... UI card... max width 100%. Width 2.9, ok, por causa desse... que o cartão tem width 2.9, é o peixe, por isso que ele limita. Então teríamos que remover isso, né? Ficar melhor. Variations. Fluid card. Fluid card pega... ocupa toda a largura do container. Try it. Card.group... Certo, isso seria o que a gente queria, né? Pra enlargar. Ah, só adicionar a propriedade fluid ao card, parece. Você coloca card, espaço, fluid. Ah, agora foi, né? Deixa eu atualizar aqui. Ele torna o cartão... faz o cartão ocupar toda width, tá aqui width 100%. Uma classe.UI, Fluid, CARD, certo. Três classes. Se quiser fazer a mesma coisa lá, voltando pros artigos... Vou colocar... Voltando aqui card, linha 7, Fluid. Ele é ocupar toda a linha, mesma coisa pros outros. Linha 16, 25. Card, espaço, Fluid. Certo. Então a gente pode clicar no link e ir pra lá. Mas como voltar, né? Seria legal ter um breadcrumb. Então deixa eu te mostrar um breadcrumb. Voltando na documentação do Semantic UI. Na sessão Collections, Breadcrumb. Breadcrumb é essa parte aqui, olha aqui. E mostra onde você tá no site, nesse caso Home, Barra, Store, Barra, T-Shirt. A gente pode usar a mesma coisa. Vamos ver como se cria isso. Importa o breadcrumb com as chaves do Semantic UI React. Fala breadcrumb e ad breadcrumb. Section link. E tem um divider. Section link, divider. Ok, legal. Então a gente pode fazer isso. Eu tô pensando aqui... Eu poderia fazer isso em cada página, ou colocar como parte do layout. Mas o problema de colocar parte do layout é como é que eu vou adicionar mais sessões. É um problema pra resolver. Se você quiser fazer isso, como exercício, descobrir como fazer, adicionar as breadcrumbs de não-inicalmente do layout. Mas por enquanto eu vou deixar aqui mesmo dentro da própria página específica. Então vamos lá. No lado direito da tela, no editor de texto, eu vou falar menor que breadcrumb brradcrumrumb. Abre e fecha. Vamos importar aqui na linha 1, adiciona breadcrumb, vírgula, já tem o card. E dentro de breadcrumb, vou colocar breadcrumb.section. Passo link pra retornar um link. Ainda não temos, não sei como é que vai fazer o href aqui, mas depois a gente vê. Então, sei lá, inicial. E pra botar barra, breadcrumb.divider.fecha com barra maior que. E coloca mais outro breadcrumb.section. Nesse caso seria... Se eu considerar inicial seu barra sem artigos, teria que ter os artigos aqui. Então eu vou considerar isso. Ainda não temos a página inicial mesmo, mas deixa assim mesmo. Link, teria artigos. Adiciona outro divider, menor que breadcrumb.divider. Espaço, barra maior que. E finalmente, adiciona o último breadcrumb.section. Nesse caso será o Active, propriedade Active, né? Pra dizer que é o Ativa, o Presente, estamos nessa página. Nesse caso seria... Realmente o título do artigo seria legal aqui, ou número, sei lá. Não sei o que pô aqui. O ID, mas não seria legal, você decide aí. O que você acha? A gente pode pôr a mesma coisa do slug, ou o título, sei lá, vamos colocar aqui. Vê como é que fica a mesma coisa do título. Ah, eu coloquei na página errada, desculpa. Está no index, era no artigo slug. Eu vou cortar linha 7, linha 13. Embora que a gente vá usar aqui também, vou deixar aqui mesmo, vou colocar o copy. Vai no artigo slug. Antes do card flui, colar o breadcrumb. Import breadcrumb aqui na linha 2. Pronto, apareceu o que inicial. Artigos e o título. Por enquanto. Como linkar esses caras, vamos ver aqui. Acho que é só puhref, não? Vamos olhar... Link... Variations... Ah, clica aqui para olhar as props. Ele mostra as elementas. Elemento types renderer. Children primary content. O breadcrumb se acha o que a gente quer. Link, está aqui. Link render as aí. Se o link for passado, ele renderiza com uma tag de A. E leva a H. Mas nesse caso a gente está usando o next link. Então não vai ser bem assim. Elemento type render as. Acho que aqui dá para funcionar essa maneira aqui. Deixa eu tentar aqui. Vamos importar lá em cima, em part. Link from next. E na parte do link, por exemplo, inicial, eu posso dizer as. Nesse caso eu coloco link. Aí... Vamos ver o que acontece. Valeu, hf expects a string. Vou ter que pôr hf. Barra. A vez que funcionou... Emspecionar. Então tem o A, a âncora com href.barra. Um... Um... Um... Um... Um... Um... Um... Deixa eu olhar na network. E ver realmente se funcionou. Vou colocar lá embaixo. Quero expandir isso, que eu não vai. Ok. Network. Deixa eu dar uma olhada no... Então a primeira... Document. Primeira vez ao website inteiro. Eu só quero confirmar se realmente ele fez a transição do cliente. Vê se baixar a página toda. Você fala, ah vamos voltar para o artigo. Baixa a página toda, claro. Diz que eu clico aqui. Não baixar a página toda. Correto, mas se eu clicar inicial. Parece que funcionou, né? Normalmente se eu tivesse dúvida, eu só colocaria... Em vez dessas coisas todas. Eu faria da seguinte maneira. Pego breadcrumb sections. Faz a mesma coisa que tinha antes, né? Link. Href.barra.artigos. E coloco o bar... o A. E coloco o artigo dentro aqui. Em vez de confirmar se está certo essa maneira de usar o CementCreator ou não. Está listado. Barra.artigos. Vou para um, vou para outro. Vou para um, vou para outro. Deixa eu dar o XHR aqui. Para um, para outro. O P. Para um, para outro. Parece que... Opa, o que é isso? Deixa eu colocar um link aqui do... da página principal. Que algo está estranho. Link.href.barra.artigos. A. Artigos. Lá em cima, import. Link.hrom.next.barralink. Ah, vou colocar isso da tua div. Um, dois... Ok, estamos aqui. Clicquem Artigos. Artigos.js. Ok. Parece que está certo. Fica aqui. Artigos Slug. De volta inicial. Artigos. Nada. Ok, parece que está certo, né? Eu não vi nada sendo baixado novamente. Ajo na inteira, então... Acho que está correto lá naquela primeira maneira que eu deduzi de usar o GradCraftSection com o link do Next. Então vou deixar as duas maneiras aqui para você... ver qualquer um que você escolhe, tá? Então temos aqui Artigos. Inicial, a página inicial. Oh, por que que não foi? No barra Artigos. Ah, porque o barra Artigo está fora de... Sincronia. Por isso que eu queria colocar no app, né? E arranjar uma maneira de... Injetá-lo. Ah, como posso fazer aqui? Vamos voltar o Index do Artigos Index e corrigir isso. Eu vou só copiar o que tinha aqui mesmo. Vamos voltar o arquivo. Nesse caso, não tem... O Artigo específico, que esse aqui seria o... O Actor. Pronto, então o Inicial... Artigos... O Artigo específico, de volta ao artigo, de volta ao inicial. Então está funcionando, né? O GradCraftSection aqui. Legal. Então acho que por essa... Tá boa, vamos avisar o que a gente fez. Deixa eu dar aqui o... Iniciei um repositório de Git, aqui. Então posso dar o Git, para ver as coisas que mudaram. E esse dá o script. Fizemos o Downgrade do React 18x17 para poder funcionar com o Semantic Y React. Ele ainda não está ali, os senadores. Então, vamos ver o que a gente fez. E a gente acabou de ser lançada. Ah... A gente passa do Lockfile, com muita coisa. Ok. Deixa eu aumentar aqui para o zoom melhor. Então, adicionamos a propriedade scripts do Package.Json. Dev, para poder a gente rodar NPM Run.Dev. Em vez de falar Npx, next.Dev. E agora, vamos ver o que제로, um pouco mais. a gente rodar npm run dev em vez de falar npx, next dev. Então o dev todo vai falar npm run dev vai rodar o next dev comando do seu próprio node underscore mod local. Installamos semântic traço ui traço css pra poder obter folha de estilos do semântico i. Também instalamos os componentes de react do semântico i com pacote semântico traço ui traço react. Atualizamos a página do artigo específico, adicionamos um breadcrumb pra poder nos situar na página e poder acessar links pras páginas anteriores. Usamos o breadcrumb do semântico i breadcrumb.section que é o link. Essas propriedades aqui são as maneiras de linkar com o link do next next barra link. Adicionar bar que é o breadcrumb divider e mais outro link pros artigos e mais outro divider e finalmente o a página presente que tem a propriedade active passada ao breadcrumb.sections e não é o link nesse caso, mas poderia ser se você quiser. Qualquer maneira, cobrimos o artigo dentro de um componente de card e pra ele ocupar a largura inteira da tela, adicionamos a propriedade fluid ao componente card. Dentro de card temos card.content e dentro de card.content temos card.header nesse caso pra poder ter o título do artigo. E dentro do card.content também temos card.description que é o conteúdo próprio do arquivo. Usamos a mesma coisa anteriormente na lista de artigos no artigos.index.js, adicionamos o breadcrumb e adicionamos o card fluid. Nesse caso seria uma lista de cartões que somente usamos a propriedade card.description com um link para o artigo específico. Usamos o link do next.link, é só botar o link e a propriedade href com o caminho para essa página. E não se esqueça do ar dentro do próprio link, eu sei que é meio esquisito, mas assim que eles querem. Nesse caso seria a transição do lado do cliente não vai baixar a página inteira. Usando o link do next.js ele apenas baixe as partes necessárias pra poder transicionar a propriedade.se. E se já tiver baixado não vai baixar novamente, por isso que eu tava vendo as coisas no dev2s, a aba de network com a atividade. E é só isso que a gente fez. Muito obrigado por assistir, por essa aula é só. Por favor, deixe o seu like. Não se esqueça de se inscrever se você ainda não é inscrito. Deixe comentários, dúvidas, agradecimentos, fico feliz por ter te ajudado a aprender mais coisas. E por fim, se quiser ter notificações, clique naquele sininho pra você saber qual a próxima quando a próxima aula vai chegar. Então por essa só e até a próxima. Tchau.