Unknown

C [Música] C [Música] [Música] k [Música] C [Música] k [Música] k [Música] k [Música] [Aplausos] [Música] k [Música] k [Música] aí pessoal chegamos salve beleza como que vocês estão estamos começando mais uma live aqui no canal full cycle boa noite para todo mundo sejam todos bem-vindas todos bem-vindas todos bem-vindos e bem-vindas aí Boa noite aí pro Nelson ata Henrique domar Marcos Maciel Humberto Oliveira eger valezim Felipe dcen vctor Henrique Magnatas Mia Isael de Castro É isso aí pessoal cestou né cestou aqui na full cycle o quinto dia do nosso Esquenta da imersão né mas o

evento só está começando na verdade na segunda-feira nós temos aí a imersão ps.com.br na verdade e esse link aqui se deixa eu até ver se ele tá realmente direcionando pro evento que eu acho que ele tá direcionando pro curso full cycle eh dê uma olhada no link da descrição para você poder se inscrever que aí fica bem mais fácil aí você vai de fato saber tudo que está acontecendo na semana que vem nós vamos desenvolver aí nosso projeto de home broker Com todas essas tecnologias que nós estamos utilizando aqui durante a semana n na segunda-feira

nós começamos ali com a Live de docker na terça teve Live de nestjs na quarta de cica com KC DB ontem uma live top demais com usando go e mostrando vários exemplos ali usando co Pilot com inteligência artificial e hoje para encerrar essa Live de Next né então todas essas tecnologias não somente essas vão estar lá no nosso estudo de caso que é criar essa aplicação financeira que nós vamos comprar e vender ações né então não perca a imersão que começa dia 17 logo pela manhã todos os dias nós publicamos os vídeos que eu e

Wesley vamos desenvolvendo ao longo do tempo tá a gente desenvolve tudo do zero explicando o projeto tá muito top é um dos melhores projetos que a gente já fez aqui de todos os eventos que nós já estamos na nossa edição 21 a título de curiosidade né bem legal e já quero deixar aqui o recado que todas as lives ficam no canal então se você não viu as outras lives tá cestando Aproveite final de semana é agora o seu momento para poder estudar coloque em dia não deixe para depois se você deixa para depois aí passa

outra semana etc você acaba esquecendo acaba desanimando a gente tem que pegar firme com os estudos né A gente só tá fazendo Live top e Essas tecnologias são importantes se você quer evoluir na sua carreira conseguir trabalhar com grandes aplicações Então aproveite essa oportunidade né eu já quero aproveitar para poder pedir o seu like isso é muito importante aqui pra gente deixa eu até atualizar aqui a minha página para puxar a orelha de vocês eu tenho cza que vocês não deram o número de likes aqui suficientes vamos ver ó nós temos 102 pessoas ao vivo

e apenas 50 likes deixa o like pessoal nos ajuda demais não cai o dedo tá E também convido vocês para poder se inscrever no canal ativar o sinin das notificações Fora as semanas dos eventos nós temos conteúdo sempre aqui no canal né o canal fsy foi criado para te mostrar como ter um perfil que é buscado por grandes empresas um perfil profissional que consegue liderar grandes equipes trabalhar em grandes projetos né ser um profissional de fato qualificado e ainda mais a fulls é uma instituição de ensino que é especializada em treinar profissionais nós temos MBA

pós-graduação go Expert Tec Lead eh temos o curso full cycle né então nós temos pós-graduações MBA o curso full cycle e contando com outras coisas que a gente quer ir agregando ao longo desse processo né então desejo as boas-vindas aí para quem tá assistindo aqui o primeiro conteúdo quero até aproveitar para poder perguntar aí quem tá vendo aqui a primeira Live no canal quem é novato ou novata coloque aí # novat novata Ó tem aqui mais pessoas dando boa noite ó o José de Neto Boa noite o Lucas O Jordan BR o je aí pessoal

voltei aconteceu uma queda de energia aqui me eh falem se vocês estão me vendo me ouvindo me ouvindo travou de novo agora voltou É porque minha internet deve ter dado um pico Apesar de eu ter um no break meu nobreak não tá conectado nas minhas luzes aqui e também na né então o meu computador não cai mas cai as luzes e a internet e agora tá ok É porque tinha dado um pico aqui também espero que não dê quando a operadora de energia começa com isso pode saber né Espero que a Live continue tranquilamente Então

eu tinha perguntado sobre novatos e vocês podem colocar aí # novat novata e o Humberto ali novato seja bem-vindo Tiago Martins também novato seja muito bem-vindo mas o meu áudio vocês estão me vendo não tá cortando tá sincronizado tá beleza é fazer o o Rafael Pereira falando ali load balance de conexão né aqui no celular aparentemente Tá Ok até coloquei aqui para ver se tá ok ó o Marcelo Sales também nov Lucas Oliveira falou que tá beleza Alex falou também tá tudo ok show de bola Maravilha pessoal então vamos começar o assunto da Live né

Nós vamos falar hoje sobre nextjs focado em aplicações financeiras eu trouxe esse assunto aqui Exatamente porque nós vamos lidar com aplicação financeira ali na imersão Então hoje é dia de frontend porque o nextjs permite que a gente crie aplicações frontend utilizando o react JS que é uma das bibliotecas mais famosas aí que trabalh com componentes a gente consegue criar as nossas aplicações frontends maravilhosas né E como o Eric ma até falou ali ó nós vamos usar websockets hoje Nós aprendemos a base de websockets lá na terça-feira com a Live de nest E hoje nós vamos

usar também com socket io tá e eu quero começar falando sobre eu não quero só mostrar código Eu quero explicar as motivações do nest o que que essa ferramenta faz por que você deveria agregar ou escolher essa tecnologia para poder trabalhar com seus frontends né logo de cara na verdade eu nunca tinha mostrado isso aqui em live tem aqui o site do nextjs ela é mantida pela essa tecnologia mantida pela vercel né que inclusive coincidência tanto socket io quanto o Next foram criados pela mesma pessoa o Guilherme rout que é muito famoso na comunidade node

comunidade JavaScript e etc e aqui nesse showcase a gente consegue ver empresas que estão utilizando o nextjs então nós temos ó a stripe né Eh como como é muito conhecida aqui que mais que a gente tem deixa eu espirrar pessoal pera aí ó nós temos Nike Open ai Spotify então você que tá usando aí Spotify no Browser também é next Netflix Jobs zapier também que é a Solana que é aquela criptomoeda né que muita gente investe que a gente tem mais aqui Ah runway também que é grande a gente tem muitas Empresas Grandes ó LG

tiktok a rulo também que é um sistema concorrente aí da Netflix né o próprio notion a gente usa bastante no aqui na full cycle o HBO Max A então enfim eh o caso do nextt é um caso de sucesso tão grande se você pegar aquela pesquisa de tecnologia que todo ano a stack overflow cria você vai ver se eu não me engano agora eu não sei se eu tô falando errado mas eh das tecnologias de forma geral não considerando somente front Change o Next tá no top C então assim de 2023 para 2024 o crescimento

da tecnologia foi absurdo Porque de fato a gente consegue ter uma aplicação frontend que vai muito mais além de só criar o visual tá Então como que funciona o Next e no final das contas a gente vai ter uma aplicação nodejs Então vai ter aqui um lado server quando você como um usuário acessar essa aplicação né ou melhor você não vai acessar diretamente o servidor você quer Na verdade uma página né você Tá acessando ali um site ou um sistema ou qualquer coisa assim você colocou barra página um Então vai bater num servidor com node

e aqui que vai vir a jogada do Next aí ele vai ter aqui do lado do servidor o react que apesar de ser uma biblioteca do lado Fronte que trabalha no Browser ela consegue trabalhar do lado backend também então nós vamos ter aqui server para renderizar todo o visual necessário e se por algum acaso você precisar consultar um banco de dados ou consultar até alguma api externa como você está aqui do lado servidor não tem problema o seu componente react consegue acessar banco de dados ele consegue acessar apis enfim você consegue fazer qualquer coisa do

lado servidor Então essa página ela é devolvida pro usuário tá usuário vai lá e tem o retorno do HTML a gente pode ter o retorno de 100% do HTML ou eu posso ter parte dessa página já pré renderizada que às vezes ela pode ter alguma interatividade do react da parte react que vai funcionar no próprio browser né então às vezes ela pode somente uma parte que foi renderizada no servidor a outra parte vai funcionar no Browser renderizada Então a partir disso né nós trabalhamos com um conceito chamado de server side rendering que vai eh ao

contrário de um comportamento padrão de um frontend que a gente tende a trabalhar com single page application é que você concentra tudo no Browser todo o JavaScript tudo que você precisa vai ali na primeira página que tá sendo renderizada e tudo a partir disso é do JavaScript que já está ali então a gente tem uma grande responsabilidade no próprio browser né E essa era de ouro do Single p application ela meio que já passou um pouco porque ela surgiu lá atrás em 2008 com o knockout com angular JS Mas as coisas foram crescendo de certo

modo que se gerava aplicações javascripts que rodavam no Browser que eram tão grandes né Você às vezes tinha que fazer o download do arquivo de 10 m 20 m e era algo uma responsabilidade muito grande pro browser pensando que você não vai rodar somente numa máquina legal Às vezes Us usuário não tem um hardware bacana mas também essa página tem que rodar no celular então um single page application acaba trazendo um monte de tranqueira junto né E aí o server Side rendering resolve os o alguns problemas do Single page application e traz outras vantagens também

porque aí a gente minimiza esse tanto de JavaScript que fica sendo renderizado no Browser E também como nós temos a renderização sempre da página do lado servidor aí Aqui nós podemos trabalhar né com mais performance usando Cash por exemplo né se aquela página ali eh eu posso cachar ela durante um tempo então eu só retorno ela que já tá pré gerada pro usuário isso me dá muito mais vazão eu consigo com que o meu servidor atenda muito mais solicitações uma vez que eu não tenho que ficar processando ela totalmente do zero consultar banco api eu

pego ela pré pronta ou totalmente pronta então Eh nós temos uma série de de vantagens muitas vezes você pode criar um sistema inteiro com next né a ideia do Next não veio para substituir o seu Framework o Spring o laravel o nest que a gente viu na terça-feira o intuito Não é esse mas como a gente tem esse lado servidor então muitas vezes a gente pode às vezes criar essa aplicação ali com Next sem que agregue se com outro Framework eh tem que saber dessa possibilidade aí mas também como ele tem esse lado back do

próprio Fronte né E se eu me comunico com uma API Ah eu posso fazer com que esse lado back que tá pegando os dados ele organiza essas informações já preparando elas ali pro front end Então faz com que tire muito peso das nossas apis também porque muitas vezes você formata api por causa do frontend por causa do mobile então a gente consegue fazer como se fosse aqui um um whopper né eu consigo fazer um Gateway que tá intermediando a negociação da das informações e formata no de acordo com o que eu preciso então é uma

baita ferramenta nós temos aqui uma série de benefícios por essa parte do lado servidor tá e a gente viu ali que o showcase né vários tipos de aplicações eh a gente pode ver aqui vári vários projetos distintos né a gente tem uma Nike um Open Ai que aí já é eh bem diferente né vou ter um um um painel ali que você vai digitar vai ficar conversando com a i vai ficar pegando as coisas em tempo real que é um pouco parecido com o princípio que a gente tá vai usar ali no no e-commerce né

então a gente pode ver aqui que o Next Ele atende a várias situações então inclusive até hoje quando você vai ali na documentação do react logo de cara você vai ver que o Next é das primeiras opções para você pod criar uma aplicação react também então é opção muito recomendada Se você quer ter uma aplicação do lado front chend com poder de fogo para ela ficar rica e entregar uma grande experiência pro usuário beleza pessoal entenderam essa ideia geral aqui Ah o Pedro perguntou dá uns três exemplos aí sobre situações das quais o Next vai

ser melhor que o go e Justamente não tem essa comparação né Eh goang vai ser para criar uma aplicação do lado backend com gol você não vai criar uma aplicação para renderizar páginas e algo do tipo não é o objetivo dele né Deixa eu só ver uma coisa na minha câmera aqui se ela desaj porque depois que desligou a luz ela desconfigurou aqui agora tá certinho pera [Música] aí acho que tá OK ela tá eu tenho a câmera com ia ela ela desconfigurou aqui pera aí deixa eu só voltar para cá e aqui eu ela

não mantém a configuração ali quando ela replug deixa eu só reconfigurar aqui aí agora posso voltar aqui pra câmera Beleza então e a a gente não tem Ah você quis falar nest né ah depois você pode fazer a pergunta aí que a gente foca exatamente nesse assunto beleza me lembra lá pra frente porque ela não é exatamente direcionada aqui pro assunto da Live por vocês irão misturar dois backends diferentes não poderia ser tudo feito com o nestjs é essa é uma boa pergunta tá em relação à questão do projeto também relacionada aí com as escolhas

tecnológicas a gente poderia desenvolver os dois backs que nós vamos ter porque nós vamos ter dois backs na imersão nós vamos ter ã o nest que não confundir com next né nest com s é a o Framework node lá que nós vimos na terça o Next com X é esse aqui nós vamos ter o nest e o golang eu eu poderia desenvolver tudo apenas com nest ou com go sim mas a questão é que no momento que a gente eh está trabalhando com microsserviços Pode ser que você escolha tecnologias adequadas para eh várias situações e

o que a gente quer na imersão não é exatamente falar assim ó eh Essa é a forma correta de você desenvolver isso mas a gente quer mostrar tecnologias diferentes porque uma vez que você está evoluindo com um profissional você fica promiso com tecnologia você não se apega a ela você usa a tecnologia que melhor vai atender então a gente tá usando JavaScript tá usando go tá usando aqui o Next do lado frontend tem mong DB também porque nós temos que ter uma visão geral então o intuito é justamente esse mas no caso eh Se a

gente fosse trabalhar com eh questão de performance obviamente o go supera o nodejs né porque o go tá uma linguagem muito mais preparada para poder eh lidar com essa paulada né mas por isso que a gente colocou exatamente o Gol para ser a B3 porque imagina ela tá concentrando as informações de todos os Home Brokers o Home Broker em si eu poderia desenvolver com o node né mas a B3 em si tem que ser uma aplicação que vai receber ali milhões de ordens de compra e venda por minuto e ela vai ter que consolidar isso

então a gente vai precisar trabalhar com paralelismo multitrade enfim respondido beleza vamos lá pessoal e eu vou brincar aqui agora eu vou trocar minha tela vocês vão me ver ali em cima e eu vou tirar meu nomezinho também dali para que a gente possa codificar agora tá para você poder usar o nextjs é necessário que você per Deixa Eu Voltar Pra minha tela de novo aqui deixa eu fazer uma ajuste isso aqui para baixo para usar o nextjs você tem que ter o node instalado tá então já tenho aqui uma versão Inclusive acho que minha

versão do node até atual 2361 então vou fazer um npx Create next app na verdade não preciso desse leate esse aqui porque acho que ele vai pegar a versão 15 e eu vou criar o meu front end aqui o nosso intuito é criar aqui uma aplicação eh financeira ele vai fazer aqui algumas perguntas eu quero usar typescript S lint T ind que é a o estilo ali com CSS Quero programar na pasta source app router não quero que tenha ias então ele vai precisar apenas dessas três dependências react react Don e next inclusive se você

tem uma aplicação single page application com react você pode migrar para next a qualquer momento tá Não precisa criar do zero e etc a gente vê que tem pouquíssimas dependências né então agora next frontend pon e vamos aqui pro vest cod tá aqui o nosso projeto Então vou rodar o comando npm Run ele vai rodar aqui pra gente na porta 3 a aplicação então vamos aqui pro browser local host na porta 3000 tem que mostrar uma página de boas-vindas tá aí ó next tem a documentação que é bem legal tem vários exemplos recentemente na verdade

não tão recente assim Acho que tem alguns meses a vercel lançou tem um curso oficial deles também next tem vários templates que você pode usar na verdade é uma empresa que não só provê tecnologia mas ela tem uma Cloud dela também que usa WS por debaixo dos panos Então e se você quiser fazer o Deploy do Next na versel você pode tal eles tem várias ferramentas para poder integrar ali com next Mas você pode plugar o Next colocar ele em qualquer e hospedagem que você quiser deix que tem o nodejs é só esse é o

pré-requisito né Então essa página aqui é esse source App page.ts x que é onde a gente desenvolve aqui ó tá a página no next nada mais é do que um arquivo né tsx que vai ser um componente react no final das contas e aí você vai misturando a programação junto com as tags né que é o modo padrão Aí do react de trabalhar e aqui é o t in que são as classes utilitárias para que você eh veja esse essa ajudinha que eu tô vendo aqui em cima você tem que ter a extensão do tawi

instalada né o tawi trabalha com essas classes utilitárias tem gente que gosta tem gente que não gosta inclusive você pode falar is se você odeia se você tem gente que odeia assim não quer nem ver isso aqui na frente fala que o Class fica muito grande né e de fato acaba ficando um pouquinho grande mas a questão é que é o design patter utilizado com CSS chamado de o ol de escrever errado aqui que justamente são essas classez inhas que elas tem ou uma propriedade ou algumas ali e você não fica usando CSS em Cascata

Que mudanças em Cascata acabam quebrando o design e tal eu na verdade curto e o te Wind eu não sou assim defensor porque tem gente assim que fala que só deveria existir eu não sou esse defensor eu curto eu tô na tô no meio termo né eh e aí a gente vai desenvolvendo então e vai criando as nossas páginas né se eu quiser criar uma nova página aqui é só criar um página um E aí eu coloco aqui um page.on tsx então o Next ele vai identificando determinados arquivos padrões para ver o que que tá

acontecendo Então aqui a gente exporta defo a função página um page pode ser qualquer nome que você quiser e aí você só exporta eh qualquer coisa aqui eh Vamos colocar Olá full cycle n então agora se eu acessar aqui página um ele mostrou aqui o Olá full pych né então o roteamento se dá pelas próprias pastas esse page que tá aqui na raiz é para o Barra ali padrão né a home da do seu site é é tudo isso aqui é reconfigurável tem como fazer várias outras coisas eu posso não ter esse page aqui e

e falar que a página padrão é essa tem como fazer vários tipos de roteamento tá Ah vou fazer uma coisa aqui eu vou tirar esse e nesse globals.css a gente tem algumas configurações de tema ali que ele tá colocando um Dark e aqui a configuração do tewi então agora a minha página vai ficar branquinha como ela tá aqui tá E aí nós vamos eh emular aqui um cenário de dessas aplicações financeiras de home broker para que nós vejamos Como que o Next possa nos ajudar e também quais seriam as formas recomendadas para poder resolver esses

problemas então eu tenho uma pequena aplicação que eu vou copiar uma aplicação que tá construída com Express JS eu vou criar aqui uma pastinha Na verdade acho que dá para copiar a pastinha inteira se eu tirar node mods deixa eu ver aqui é melhor vou copiar ela aqui ó tem um fake api tá então essa aplicação aqui ela vai ter ali uma API com node e também vai ter já websocket então nessa aplicação eu tenho e o Express e o socket io ali do lado do servidor a gente vai criar um servidor de websocket aqui

o arquivo é muito simples então ele tá iniciando aqui o Express aí nós vamos ter ativos e ordens tá E à medida que nós vamos trabalhando com esses ativos eu vou ter um histórico que eu quero colocar um gráfico aqui e fazer algumas coisas bem bacanas então eu tenho ó uma AP para poder pegar os ativos para poder pegar as ordens e aqui eu venho meu servidor posso colocar o meu servidor de websocket junto né quando eu me conectar nesse servidor ele já vai começar emitir mudanças de preços desses ativos vai ser aí que a

gente vai usar um websocket ali connex e ver como que e se faz websocket nele e ver algumas outras questões também tá E então o que que a gente vai fazer aqui agora vou abrir um outro terminal Vou colocar aqui fake api e Simplesmente faço um node fake API index JS depois que eu fizer Claro um npm install né porque não tem mods ali pronto então agora posso fazer aqui o meu aqui pode ser direto né tá aí ó aí se eu quiser brincar um pouquinho só para ver como que tá vamos ver se tá

OK vou criar aqui um api http vou fazer um http do P local post porta 80 acho que 8080 bar assets vamos ver se a gente consegue consultar os ativos ó eu não tô usando banco de dados nem nada tudo na memória para poder ficar bem fácil né tá aí os meus ativos beleza Tá então vamos começar a desenvolver aqui a nossa página eu quero desenvolver um lugar assim que a gente mostre os ativos e que a gente consiga ver também as ordens e um gráfico que seria um padrão Aí de um home broker né

muitos home Brokers vão te dar ali um painel tem um monte de componentes e etc para você poder fazer as suas operações Então vou criar aqui uma pasta home broker e o page P test x tá então vou fazer o export de home broker colocar minúscula F mais fácil page tá agora vem aqui a parte da para ficar bacana eu vou colocar uma div e o que que tá aho esqueci de passar o function Vamos colocar para ele preencher totalmente a tem o h h screen que vai pegar 100% né vai fazer um viewport ali

vou usar o Flex layout e quero que ele tenha um background de sem cinza Então a gente tem aqui uma escala de cores com te Wind é bem bacana tá e vou usar a tag Aide com um H2 dentro aí vamos colocar ativos aí embaixo eu vou listar esses ativos né então a gente vai ter aqui um l com li para poder fazer essas listagens e vou ter a área principal que vai ter o gráfico e também vai ter a a listagem de ordens tá aqui eu já vou colocar um Class Flex um de Flex

1 eu tenho Flex um para Já poder ocupar o restante do palco e um pading nível seis que aí ele faz ali um pading 1.5 R eu consigo um pading de todos os lados certo então Eh vamos ver como que ficou isso aqui eu tô rodando aqui a minha aplicação estou né Beleza então vamos colocar aqui um home broker eu coloquei na verdade junto separado eu não prestei atenção me broker tá separado então aqui vai ser home broker tá aí ó temos aqui os nossos sim a aula vai ficar disponível tá temos aqui os nossos

ativos aí nesse M eu poderia colocar aqui uma div com backg background White com pedem de quatro para poder ter um espaço e um Shadow aqui vai ficar o gráfico e Shadow medium arredondado arredondado LG mais um margem para borum que vai ter as ordens embaixo de nível quro e aqui eu vou colocar a dívida do nosso colocar aqui shart tá bom né tá de bom tamanho aqui vou mudar isso aqui para home broker porque home broker a lava tem que ficar separada tá beleza eu vou usar um gráfico pra gente poder brincar chamado de

light que não sei se vocês acompanham aí ativos ou algo do tipo eh tem um site que se não é o mais famoso um dos mais famosos do mundo né que é o trading View a gente consegue acompanhar aqui vários ativos pelo mundo afora por exemplo eu tenho e o Bitcoin aqui agora em tempo real esse Light a sharts é uma versão gratuita desse gráfico aqui tá mas tipo assim a gente tem condição de fazer tudo isso aqui de forma free né É bem legal tá olha para você olha como que a gente consegue né

ó ele vai pegando aqui os dados antigos Tem como fazer assim eu não sou especialista nisso aqui tem gente aí do mercado financeiro que sabe eh selecionar áreas e fazer zoom com outras coisas fazer plotar enfim eu sou apenas um um mero espectador e um investidor bem amador na verdade tá eh então com esse Light a charts O que que a gente vai acabar fazendo aqui nós vamos criar a Instância desse shart assim ó shart he vai ser igual a use aí eu posso passar para ele um nul e vou falar que o tipo do

gráfico é um iart api esse use ref é um Hook do próprio react ó que ele importou aqui que é uma referência porque um componente do react mesmo que essa página tá sendo renderizada do lado do servidor ela vai pro front end e a gente vai precisar guardar a Instância do gráfico porque depois eu vou precisar Atualizar OS valores né então eu inicio essa referência aqui com n essa referência ela mantém o valor fixo independente das renderizações que acontecem no react então a gente inicia ela sempre com um nul da vida Beleza então o que

que vai acontecer agora se eu chegar aqui e atualizar o meu site Inclusive eu acho que eu parei né tem que rodar de novo aqui npm Run Dev já deu um errinho ali mas vamos aqui pro browser né Olha só você está importando um componente que precisa do US hef ele apenas funciona como um client component então Aqui nós temos uma separação entre dois tipos de componentes que nós podemos criar eh hoje com a versão né 19 do react aí e também aqui com Next O componente servidor é um componente que é renderizado 100% do

lado do servidor ele já vem Prontinho para ser mostrado no Browser mas quando a gente precisa de interatividade que vai pro browser então ele não pode ser um componente server quando eu não tenho aqui em cima um use client ele é considerado um componente server pelo next então ele dá aquele aviso ali ó agora ele já vai vai voltar a renderizar novamente a gente tem ali os ativos e vai ter aqui a área do gráfico né então eh a gente já fez agora uma mudança que olhando aqui o código fonte que vem lá do Next

a gente vai ver que vem já algumas coisas ó tem aqui O H2 com ativos e etc né mas a gente vê que vem mais código JS que é o react que vai reagir aqui do lado do browser Beleza então vamos continuar o nosso desenvolvimento né Tá então coloquei isso aqui então pensando em como que eu vou pegar os dados dos ativos como a gente tem a nossa api que tá rodando aqui com os ativos né Eu poderia usar fat api axios etc mas a própria vercel tem a biblioteca que é o swr que permite

que a gente capture informações jpi de uma forma bem melhor tá então aqui em cima a gente vai fazer assim ó euse swr e aí eu vou passar aqui http 2 p bar Barra local host na porta 8080 bar assets aí eu recebo esses assets aqui no objeto Dea que eu já estou desconstruindo e eu vou falar que é os assets que eu estou pegando né o fchat aí esse US swr ele apenas organiza como que a chamada é feita Mas ele não faz a chamada Aqui você pode colocar um axus pode colocar um fat

api pode colocar o que você quiser aí aqui em cima eu vou criar um cara que é o fetcher para que eu passe uma url e eu passe aqui pro fet do fet eu tenho o den que é o promessa da Promessa eu converto o Jon como resposta Para justamente que a gente consiga pegar essa resposta diretamente e ela vai vir aqui para essa variável né Eu posso até colocar aqui ó conso log na verdade o assets fetched para a gente ver vamos ver se ele vai dar certo Então na verdade toda hora eu esqueço

de rodar novamente o servidor né npm rev ele já compilou ali ó vou dar um na verdade não aqui deixa eu dar dois zooms aqui e aqui tá vendo que eu tive undefined dois undefined depois que eu vi eu vim a ter os assets né eu tenho cada um deles e o valor o preço que ele está então eu tô eh como eu fui forçado né Por causa de usar o gráfico em transformar o componente totalmente em client essa questão de fazer a chamada ela é feita no Browser vem a base do componente pro browser

E aí o react Age lá e aqui é a chamada que tá sendo feita né Beleza então fizemos mais um passo aqui então uma vez que eu tenho esses na mão a gente pode fazer a listagem deles né eu vou colocar nesse ass Side aqui um uma largura de 1/4 ele vai ficar ali com 25% que mais que eu poderia colocar o background White com peden de 4 mais um Shadow MD tem Wind é legal porque você vai montando aqui vai usando as classes vai ficando bem útil né aqui nesse carinha também eu posso colocar

um Class Vou colocar aqui o texto para ser um Tex l faz ali um Font size 125 mais um fonte bold para ele ficar em e marg bor 4 ele ficar colado com os ativos já que na lista vou usar um Space Y2 traço do porque ele vai ter um espaço topo e bottom para cada elemento então ó para cada asset que eu tiver eu vou fazer um map pegando cada ativo aqui eu já vou aproveitar para poder pegar a aqui eu tenho que entregar aqui um li que vai receber aqui porque cada elemento tem

que ser diferente né iso é uma recomendação da própria documentação vou passar aqui uma classe de um pedem nível do com background gre 200 Tá bom só um R ficar mais bonitinho e quando passar o mouse em cima eu já tenho ali um cursor Pointer n ent para mim essa classe e aí posso colocar aqui o asset ponto o símbolo dele mais o preço então asset pon toda hora ele fica tentando fazer o aut complete me quebra aqui Fix do para ele cá apenas com duas casas decimais tá eh aqui vai ter um outro problema

porque essa primeira chamada porque o componente ele vai renderizando a gente tem um undefined aqui que eu tenho que resolver né Eh eu posso colocar aqui na verdade uma interrogação que aí eu resolvo que quando ainda ele não tiver um valor ele não vai executar esse map aqui Vamos ver aí ó como que já ficou bacana Por que que esse esse valor tá mudando porque eu criei um código apenas para fazer um role Play aqui e ele tá rolando com eu tinha falado isso quando eu tinha mostrado o websocket né Eh ele vai mudando o

preço da do ativo só pra gente poder vê que depois está sendo capturado e tudo mais a gente pode ver que toda hora que faz uma chamada ali ele tá com um valor diferente tá beleza então fizemos a a nossa primeira parte aqui agora vamos fazer a parte do gráfico né eh deixa eu ver como que eu posso fazer o gráfico o gráfico vou precisar porque o lance do gráfico eu tenho que col eu tenho que plotar ele primeiro para depois me preocupar em colocar os dados então eu vou usar mais um Hook do react

vai ser o use effect tão famoso use effect que vai rodar na primeira rend do lado do browser quando a gente coloca ess Array vazio aqui aí eu vou falar assim ó shart Cent vai ser ig a Create chart aí eu passo aqui a referência da div que eu quero plotar o meu gráfico que é essa aqui ó eu poderia Na verdade eu coloquei errado né aqui eu queria colocar é um ID então primeira coisa eh document Carry selector aí eu passo um chart aqui e agora vem a vírgula para ele não chiar vou falar

que ele é um HTML Element senão ele vai falar aqui isso aqui pode ser no e tudo mais e eu passo outras configurações Como que eu posso passar aqui e tema do gráfico e tudo mais né aqui eu vou passar só o IDF height igual a zero porque aí o gráfico se eh ele se autor renderiza né ele na verdade se auto alinha ao restante ali do espaço disponível vamos ver se o gráfico agora pegou acho que também é porque eu não coloquei nada aqui ó eu tenho que melhorar essa parte então tá aqui o

meu chart eu coloquei Flex um no Main background e tá aqui era para ele ter pelo menos ah no caso como eu não tenho nada deixa eu colocar pelo menos 300 de altura aqui vamos ver aí ó o gráfico tá nessa região zinha aqui aqui ó onde tá essa porque e eu poderia pegar e colocar um 100% Se eu quisesse para essa esse palco aqui ele preencher tudo aí eu poderia colocar ele mas eu não quero tantos refinamentos assim então tem aqui o símbolo né do Light ha sharts ali da que a trading view acaba

provendo beleza então uma vez que eu tenho esse camaradinha agora vem o próximo passo a gente vai ter que trabalhar com o eixo dos dados e deixa eu pensar como que a gente pode pegar toda vez que eu clicar na verdade a história o seguinte ó para eu poder mostrar alguma coisa aqui do gráfico eu tenho que clicar em algum dos ativos eu cliquei aqui no ativo aí ele começa a mostrar aqui as então trabalhando-se com react a gente vai criar aqui um US state vou criar ele aqui em cima vai ser vou guardar qual

ativo que eu selecionei e um set selected asset para eu poder mudar o estado dessa primeira variável ali então usate começa com no tá então quando eu clicar aqui ó fazer um on Click eu faço um set selected asset passando o asset esse aqui é o estilo tradicional aí do próprio react né vou até fazer aqui um colocar um select asset selected asset né na verdade vamos ver aqui conso log se eu cliquei Ó lá a gente vê que mesmo que quando eu clico ele não renderiza somente uma vez né é o próprio react que

determina quantas vezes ele precisa ficar renderizando aqui no browser para poder deixar o componente atualizado então ele renderiza vez TR vezes e teve mais uma aqui então foram qu enfim não importa a questão é que nós temos o valor aqui da nossa variável n eu consigo acompanhar o valor através aqui da do source map né que eu consigo apontar lá typescript então consegui selecionar o meu valor uma vez que eu selecionei isso aí agora eu posso trabalhar com a plotagem do gráfico então ter que criar mais uma effect que o use effect lida com os

efeitos do componente então eu quero vigiar para ver quando o meu selected asset mudar então eu quero que ele Execute aqui um código se eu ver que não tem nada no selected asset retorne não faça nada agora caso contrário a gente vai fazer aqui um fat para é http 2 p bar Barra local host na porta 8080 bar assets aí aqui eu vou precisar passar o ID do ativo vou até pegar aquele index JS que eu tenho da minha api ele tá aqui ó então a rota lá no express que se eu passar o ID

do ativo eu consigo pegar o histórico dele então eu vou pegar esses dados para poder jogar no gráfico né então vamos passar isso aqui para template string aí eu vou colocar aqui e selected asset pid bar histories né e o use effect eu não posso colocar e syn né infelizmente inclusive já pediram isso aqui pra comunidade do react seria legal infelizmente a gente não consegue na verdade aqui é só fet n não é o fet lá de cima então aqui eu vou colocar recebo do eu pego o Jon de resposta aí uso mais um e

aqui a gente vai fazer a plotagem dos dados tá para fazer uma plotagem dos dados eu posso lidar com a Instância dos dados no gráfico de forma separada Vou Colocar assim ó Line usar mais um ref para poder colocar isso E aí eu vou colocar ele como nulo tá é a referência dos meus dados aí eh eu tenho que plugar ele com o gráfico né eu tenho que fazer essa plotagem aqui embaixo ó a gente vai ver assim ó se Line series he P current que é a Instância que guarda ali para que ela não

sofra mudanças né que a gente Preserve apesar das renderizações do react se ela não existir eu vou falar que line series. curent vai ser igual a shart he que é Instância do gráfico current he AD series Line series que é um tipo do Light shart tá então ela tá importada aqui porque eu tenho eh várias formas jogar essas informações vários tipos de gráficos né a gente vai mostrar um gráfico tradicional que é tipo aquele que a gente viu anteriormente ali então aqui eu crio essa Instância jogo nesse camaradinha se ele não existir Mas de qualquer

forma aqui eu posso ficar clicando né no ativo e toda hora ele vai buscar o históri vai plotar no gráfico então aqui eu chamo o l series current seta passando os dados tá os dados vamos dar uma olhada aqui com htp se tá certinho os dados que estão vindo de lá se jogar assim asss histories á como que vem ó esse aqui é o formato quando eu tô trabalhando com os dados do gráfico eu tenho que colocar o time que pode ser essa data aqui num ISO 8601 pela metade né ou pode ser um time

stamp e o valor que ele vai jogando longo do tempo enfim isso aqui são os valores mais básicos que a gente joga pro gráfico né então eu já coloquei para que a IPI devolva para mim exatamente o formato que eu quero Esses errinhos que estão acontecendo aqui porque ele tá falando aqui para mim que eh esse current ele pode ser nul porque a gente inicializou ele com nul aqui em cima né então eu coloco um assertion n para poder evitar problemas e aqui também eu coloco um assertion n e eh só que aqui ele tá

falando que o tipo não existe né isso aqui não tem problema nenhum eu trabalhar sem tipagem agora eu só não lembro de cabeça Qual que é o mas dá pra gente poder pegar aqui ó eh I series api Eu só não só não lembro se ele tem generic deixa eu jogar um n aqui né o n é a solução para muitos problemas ã é apenas read only então não era para ser read only essas tipagens aqui são maluquinhas só para não a gente não ter um erro aqui eu vou colocar esse descarte com typescript tá

eh aqui também eu vou fazer a mesma coisa is que são só erros de tipagem beleza então fizemos ali agora vamos ver se a gente tem aqui o gráfico aí ó só que o gráfico pera aí o gráfico ficou todo que o gráfico ficou zoado dessa forma ele rendiz o gráfico duas vezes tem dois gráficos aqui pera aí deixa eu fazer uma coisa aqui eu vou mudar o nome dessa variável aqui para asset chart aí aqui em cima Vou passar ela para cá ó acho que tá tendo alguma colisão de ID ou alguma coisa assim

tá realmente estranho ou não é é não era para ele renderizar isso ah eu não dupliquei passei o elemento na primeira posição deixa eu dar uma olhada exatamente aqui no código fonte eh exibir código fonte dos elementos É de fato ele tá É pode ser que seja o strict mode mas deixa eu dar uma olhada aqui porque Pode ser que eu comi bola eh de alguma forma porque apesar que eu coloquei aqui para ele criar o chart ó ele vai criar o chart somente na primeira renderização porque esse Array vazio aqui faz isso deixa eu

descartar porque às vezes eu tô por caso do line series ali que é o problema então não é inclusive deixa até ver qual versão do Next que eu tô usando tá usando 14 né pode ser até que seja um bug deixa eu pegar aqui uma versão que eu tenho vou jogar aqui e 15 1 aqui eu vou jogar 19 00 zer Até que a gente usa a última versão a também e porque eu devo ter aqui o meu Create next App ele deve est focado por isso que eu tinha até na memória aqui um @

latest que ele pega a última versão que é 15 então tô mudando aqui na mão ah swr não tem problema aqui mudou Light sharts Ok então eu faço aqui um RM no RM no package Lock e npm install Deixa eu fazer aqui um RM menos RF no node mods e um NP install É pode ser que eu esteja culpando aqui a questão mas o esse use effect ele roda apenas ele deve rodar apenas uma vez porque quando ele fica com o segundo que é o arre de dependências né se ele tivesse dependências aqui ele poderia

correr o risco de renderizar mais de uma vez Beleza então de qualquer forma eu queria usar a versão 15 eu não tinha olhado isso né vamos dar uma olhada aqui agora aí ó tá vendo viu eu já passei por isso inclusive depois eu tenho que pegar esse npx meu e arrancar essa versão 14 arrancar essa versão 14 fora porque ela fica toda vez que eu fico fazendo ali o npx Create next app né ela fica pegando versão 14 né versão 14 tá até atual ainda mas eu quero pegar a última versão 15 e tudo mais

ah aí Pois é isso aí é outra questão então Eh voltando para cá vamos pegar o o US effect de novo aí agora se eu clicar lá tá vendo o gráfico cada um tem os seus devidos valores enfim né conseguimos fazer a pilotagem então toda vez que eu clico ele muda ali os valores ó ele tá mudando não sei se tá nítido aí para vocês deixa eu até tentar aumentar um pouquinho aqui acho que se aumentar muito Vai ficar ruim é aqui eu acho que é o máximo eu consigo sem ficar ruim maravilha então toda

vez que eu clico pois é tá vendo resolvi o bug depois que eu bebi a não na verdade foi antes que eu bebi a água né a água foi só porque eh eu tava querendo hidratar a garganta toda vez que eu clico ele faz a chamada lá pro histories né Beleza show de bola na verdade vocês sabem que eu não curto beber café assim eu bebo café só duas vezes no dia talvez uma dependendo do dia uma Só que é no café da manhã eu sou do tipo do desenvolvedor que não sou bitolado em café

eu eu sempre às vezes eh eh tô trabalhando com os colegas ou às vezes vão em evento o pessoal tá toda hora Tomando café eu sou dos únicos ali que nem vejo café mas enfim agora que que a gente pode fazer aqui né já fizemos essa parte da que que é basicamente a o o básico aqui de uma tela que teria ali a listagem dos ativos e o gráfico eu quero me conectar no servidor de websocket agora tá o próximo passo vai ser esse Então vamos pensar assim ó [Música] eh como eu tô colocando tá

vendo que eu tô colocando todo o comportamento dentro do use effect então para eu poder me conectar tá com o servidor de websocket vai mais use effect eu não posso deixar ele na raiz porque o componente fica renderizando um milhão de vezes conforme ele achar necessário então Eh vamos pensar assim ó se eu pegar os ativos capturados p leng e não tiver nada retorne então se eu se eu estou dependendo dessa variável aqui sim ó preciso colocar os ativos que foram consultados beleza aí eu posso fazer aqui na verdade deixa eu pensar em relação ao

eu posso criar na verdade a conexão com websocket fora aqui vou colocar assim ó socket vai ser igual a io jogando PR http 2 local host na porta 808 meu servidor de websocket tá rodando nessa porta tá aí eu tenho que instalar aqui o socket.io client que é a parte client do socket io que é a Lib que tá ajudando a gente a organizar esse websocket então aqui eu faço Import io from socket I Cent tá então beleza eu já tenho a Instância do socket aqui ele já vai conectar no servidor então ã o que

eu vou fazer aqui é criar um socket ponto aí eu tenho eu tenho que olhar o evento que eu não lembro de cabeça eu criei aqui ó o evento que vai sendo disparado exatamente dessa forma eu emito eventos lá pro front end que é o asset traço ID do ativo Price então aqui eu passo esse cara e recebo os dados E aí decido o que eu fazer com eles agora qual é o o dado o ID do ativo eu tenho vários né Por enquanto só pra gente poder ver se tá ok vamos passar aqui um

de forma fixa né porque aí a gente consegue capturar as informações vamos fazer aqui um conso log deira então agora voltando para cá eh eu acho que eu parei o de novo Tem que rodar aqui npm Run Dash E aí aqui eu posso não ter a eu posso ter un defined aqui eu tenho que colocar na verdade uma interrogação Pronto Olha só tenho aqui o meu web socket funcionando se eu atualizo aqui a minha aplicação eu posso ver que nas mensagens ó tá vendo que eu vou recebendo as mensagens essa parte vermelhinha que tá para

baixo significa que a mensagem que tá chegando se tiver verdinha para cima é a mensagem que eu tô enviando então eu já recebo o meu objeto né E no caso do socket io ele já organiza aqui eu já pego o objeto já Prontinho para uso então eu tô recebendo o ativo os dados dele e o time para poder brincar com gráfico a história justamente assim né que o gráfico vá avançando ao longo do tempo que seria um comportamento padrão que eu teria numa aplicação como essa aqui de um frontend de um home broker né então

agora que eu consigo fazer essa captura a gente pode atualizar o gráfico né Poderia já jogar aqui pro meu Line meu Line series he essa informação agora vamos pensar assim ó eu tenho vários ativos né eu tenho vários ativos eu poderia quando eu clicasse no ativo criar poderia mudar isso aqui pro selected asset e aqui também porque aí eu posso passar ele aqui ó selected asset pid para começar a capturar aqueles eventos ali aí aqui ele tá é só porque eu não coloquei a tipagem né mas aí ele vai criar o evento para poder capturar

as informações e aqui seria bom que eu colocasse o return da do use effect porque ele tem um retorno quando o componente tá sendo destruído e isso aqui é um erro muito comum quando você tá criando um listener pro evento do websocket é importante que quando o componente esteja sendo destruído que você se desinscrever dele né então eu posso fazer aqui um off passando Justamente a esse trecho aqui ou se eu quiser fazer um off n também mais fácil que aí eu me desinscrever de tudo tá então agora olha só eh eu vou começar a

ouvir as posições no momento que eu selecionar o ativo Então vamos ver por enquanto aqui eu não tenho nada se eu clicar no ativo Aí sim ó ele vai criar e o listener ele começa a ouvir agora Beleza então no momento que ele começar a ouvir eu posso atualizar a informação no gráfico agora seria interessante quando eu eu clicasse que o gráfico fosse resetado né Apesar que quando eu clico a gente pega as informações de novo e o gráfico faço um set deira né Ah não então tá certo então aqui não preciso mexer com isso

então aqui aqui eu poderia simplesmente fazer e um Line series hef p current ponto o método é o update quando eu quero adicionar uma nova informação Então eu tenho que adicionar o time e Tenho que adicionar o value tá o value vai ser data asset Price já o timing como a gente recebe como a gente recebe ele na verdade não é esse aqui não é é o evento que a gente viu né o evento eu não vou fazer o console log que ele tá vindo no ISO 8601 então aqui eu preciso fazer uma conversão vou

fazer um New date time melhor date time é eu tô me veio PHP a cabeça aqui acredito eh data P time não sei de onde eu tirei date time com JavaScript get time que eu pego o time stamp dele tá mas me veio muito um date time aqui tem outras linguagens também que tem né então ele vai atualizando o gráfico beleza agora vamos ver o que que vai acontecer aqui eu vou clicar e olha só é tá vindo números eu coloquei para vir números aleatórios né só pra gente poder fazer essa brincadeira aqui E aí

se eu clicar aí ele vai eh vir num outro formato eu coloquei aleatório né compra que tá barato né Aqui tá parecendo não sei se vocês eh já trabalharam com seno de x né isso aqui que tá acontecendo esse ziguezague aqui se você pegar Como que é o seno de x ele sobe e desce sobe e desce sobe desce sobe desce 10 exatamente dessa forma maravilha né Agora vamos fazer uma outra coisa porque e a gente tem o preço vindo pro gráfico mas o preço não tá sendo atualizado aqui do lado esquerdo né o preço

tá ficando fixo is seria interessante que a gente atualizasse também agora porque eu fiquei clicando aqui com os atalhos para poder desenhar na tela aquele swr tá essas atualizações que às vezes acontecem é o swr que ele cria uns eventos ali na página por exemplo quando eu eu perco o foco da página e coloco de volta ele força a chamada http Mas a gente não tem uma atualização em tempo real aqui do preço dos ativos então o que que a gente vai ter que fazer aqui né vão pensar como que eu tenho que ã atualizar

os preços dos ativos eu tenho essa linha que mostra o símbolo e o preço mas esse asset que tá vindo daqui é o que vem lá da chamada http né eu vou ter que guardar uma Instância desses ativos como eu fiz aqui com o selected asset para poder ir propagando a mudança neles né vai ser isso que eu vou fazer então vamos criar aqui ó ã Deixa eu pensar como que eu vou criar ess state vou criar ele aqui em cima vou chamar assim ó de assets v7 assets que vai ser um use state que

vai iniciar com Array vazio e eu vou colocando todos os os meus assets aqui dentro tá aí deixa eu pensar aqui eh eu tenho os meus ativos eu vou ter que tô pensando como que eu vou de uma forma mais fácil eu vou ter que fazer um use effect também mas effect eu vou colocar que quando aqueles assets que vem da minha api quando eles eh chegarem aqui e se eles forem se o ponto lent não tiver nada retorne Caso contrário eu faço um set assets passando esses assets que chegaram então Criei um estado no

meu componente para poder guardar essas informações porque eu posso fazer essa informação aqui do state mudar eagar a renderização do lado esquerdo para poder mostrar o preço né então aqui agora na hora de mostrar os meus ativos não vai ser mais a variável que eu já pego direto da a que vem da chamada que eu tô fazendo para ap vai ser da variável do de assets direto tá E aqui eu não preciso mais da interrogação Porque inicialmente o assets vem como um Array vazio ele só vai ter alguma coisa se eu tiver consultado alguma coisa

da minha api beleza vamos ver se a gente não quebrou o comportamento né E nós quebramos o comportamento Ah aqui ah eu tenho esqueci de acrescentar o interrogação interrogação ele é undefined né Aí pronto aí agora ele tá quebrando por algum motivo depois a gente vai olhar mas eh o gráfico tá funcionando ah ser alguma atualização que tinha quebrado aqui aí ó beleza né então agora olha só chegando aqui quando a gente cadê o socket io aqui ó quando a gente tá recebendo né Essa nova informação aqui eu vou ter que atualizar o meu state

de assets ou seja usar um set States para poder fazer essa atualização a ideia vai ser justamente essa então vai ficar assim ó eu vou fazer um set set state sete assets aí eu tenho aqui é tem duas formas da gente fazer a atualização dos valores eu passo o valor direto mas como é um Array a gente tende a passar uma função para poder fazer a transformação que é mais seguro então eu tenho o estado antigo dos asset aí eu posso simplesmente fazer aqui eu vou ter que pegar ver se eu tenho esse ativo né

então e prev assets PF eh prev asset prev asset ponto ID tem que ser igual ao o ID do asset selecionado aí aqui eu vou encontrar aí eu posso pegar eh não é bom a gente mexer diretamente nesse isso aqui é um conceito de imutabilidade né do próprio react eu vou gerar um novo Array que vai ser o o novo Array de assets então Eu apenas pego as posições novamente ó Isso aqui é muito importante tá para não mexer não vou chegar aqui fazer assim e prev assets na posição asset index que eu estaria mudando

o estado existente então aqui eu gerei um novo estado eu posso mudar ele agora tranquilamente então eu faço um New assets na posição asset index aí eu vou colocar aqui também eu evito mudar posso vou gerar um novo objeto eu pego os valores que eu já tinha do meu ativo e pego e acrescento o novo preço que veio via websocket certo e aqui eu retorno então meu novo estado minha nova coleção só mexo naquela posição Zinha ali então isso aqui vai propagar uma nova atualização no react eh find index isso é find index isso eu

tinha porque o find ele retorna Muito obrigado ao Tarcisio Andrade Ainda bem que eu não tinha testado né find index aqui ele vai procurar o índice daquela ele varre cada posição ali ele me devolve o índice do que satisfaz esse condicional aqui né se caso ele não encontrar ele acaba devolvendo menos um eu poderia até fazer essa validação aqui mas não tem necessidade né pro Nosso propósito didático aqui beleza então vamos lá vou clicar Ó lá tá vendo o nosso ativo um mudando legal né tanto o gráfico muda quanto o valor do ativo muda se

eu quisesse por exemplo ã Se eu quisesse não só pegar desse ativo selecionado aqui pegar de todos eu posso né se eu quiser fazer por exemplo um assets p for each para cada asset que eu tiver eu posso criar um socket on passando o ID do evento para poder capturar então poderia ter abrir vários listeners para poder capturar as informações né curtiram isso aqui pessoal aí o gráfico continua rolando e o preço ali do ativo que a gente selecionou né coloquei somente essa parte que que vocês acharam deixa eu ver como decidir entre web Hook

e websocket no next Igor no caso web Hook vou dar um exemplo para você Eh vamos supor que a gente pegue aqui uma plataforma como a pagarme né pagarme que é bem fosa tem a stripe ou qualquer coisa assim e você vai lá e gera o pagamento o Web Hook vai ser uma chamada que o pagarme vai fazer paraa sua aplicação para notificar de um evento que aconteceu né então isso tá sendo feito via http nesse caso eh você não vai ter um websocket porque não surtiria efeito primeiro porque não valeria a pena eu abrir

um websocket do lado backend para fazer essa notificação em tempo real porque no caso do Web Hook ele vai fazer a chamada somente quando o pagamento foi eh feito né vamos supor que você pagou o boleto hoje E aí ele vai fazer a chamada desse web Hook daí dois dias ou Amanhã sei lá o boleto hoje compensa mais rápido né então é só mesmo um disparo de uma chamada não tem necessidade de você manter um websocket para isso Pessoal esse aqui era o exemplo mas aqui tá Pegadinha do Malandro aqui tá Pegadinha do Malandro react

é muito bom a gente usou aqui eh muito do do próprio react em si né client criamos um componente Cent é uma página client no final das contas mas tem um problema que muito programador react Não se preocupa não se preocupa que é o quanto que essa aplicação aqui tá consumindo do browser de recursos tanto de processamento quanto de memória e sabe qual um dos principais problemas envolvendo o react que acaba em qualquer aplicação react é o número de renderizações é o número de renderizações tá eh eu quero terminar aqui o exemplo eu vou fazer

aqui uma outra parte só pra gente poder pegar as ordens e eu vou falar sobre isso e vocês vão entender exatamente a gravidade do do que a gente fez apesar de estar funcionando mas complicado eh eu tenho aqui a parte de listagem de orders deixa eu pegar ela aqui aí vou jogar ela aqui para baixo dentro do Main e aqui dá paraa gente poder pegar as orders ó só para poder mostrar as orders que estão vindo Então vamos ver aqui aí ó aqui estão as orders né era só para poder adiantar o exemplo e agora

vamos ver um problema disso tem uma opção que você pode chegar nos seu navegador isso pro caso dos navegadores aí que derivam do Chrome você vem aqui se eu não me engano em more Tools é more Tools E aí tem o rendering tá esse rendering vai habilitar essa aba e nós vamos ter algumas opções para poder entender como que as renderizações estão acontecendo eh também se você quiser usar eh a extensão do react extension ela ela tá instalada aqui ó ela tá instalada e ela serve para você poder fazer debug na sua aplicação react que

tá no Browser então a gente consegue ter acesso aqui a árvore de componentes eh eu consigo saber o quanto que esses componentes estão consumindo de informações as informações que estão neles fazer um profiler né Eu faço algumas manipulações e ten uma série de dados para poder ver como que a minha aplicação está se comportando então aqui também a partir desse componentes eu consigo ah marcar por exemplo esse Highlight updates o components render que faz com que a gente consiga ver as as renderizações isso depende do do da velocidade dessas renderizações aqui por a gente estar

renderizando muito isso aqui não funciona mas o rendering funciona Então olha só eu vou marcar aqui ó Paint flashing e até tem uma coisa que eu Pera tem uma coisa que eu esqueci de fazer porque ele tá marcando somente esses dois aqui Vamos fazer uma mudança pera aí pro nosso exemplo ficar um pouco melhor ao invés de só pegar o os ativos o ativo selecionado vamos pegar todos os ativos aqui aí para cada ativo que eu tiver fazer um F aí eu pego esse trecho aqui para dentro aí aqui agora vai ser asset ID aí

agora eu tenho que fazer aqui um if para atualizar o gráfico somente oo selecionado for iG ao do for aqui então ter que fazer assim se eu tiver select asset que eu vou ter que passar el para cá também agora eu vou ter atualização dos assets Independente se o gráfico tá ativo né com o asset selecionado se eu tiver o selected asset e o selected asset ID é igual ao asset ID aí a gente vai fazer esse update aqui então muda isso então agora eu vou assistir todos os canais para poder pegar as atualizações aí

aqui na hora de fazer atualização aqui vai ser asset que não é o sel asset agora serve só para poder se eu tiver clicado ali naquele ativo eu tiver recebendo o evento daquele ativo então ele vai atualizar o gráfico Então vamos lá aqui eu posso marcar pronto eh aí a gente marca que é o Painting Flash e o componente Highlight ao mesmo tempo tá o que que tá acontecendo aqui pessoal que que que tá piscando né Tá parecendo farol isso aí né só que farol amarelo à noite pisca Amarelo aqui tá piscando verde que que

tá acontecendo eu joguei a a para poder pegar de todos os ativos né porque esse comportamento Seria normal e é para mais é poder fazer o impacto eu poderia ter feito sem isso poderia deixar o exemplo como tava antes que iria funcionar marcando aqui os dois tá só para deixar claro renderizações né Pois é e esse isso aqui é um dos principais problemas para programadores next e react você vai usando de forma inocente você vai usando de forma inocente os hooks acaba fazendo o teste ali Ah funcionou Poxa mas eh você não fez um profiler

eh você não fez um debug não vi o quanto que a sua aplicação tá consumindo eu vou até pegar aqui Ah será que a gente consegue ver um gerenciador de ferramentas gerador de ferramentas eu tenho olha só a guia ela tá usando 4% de CPU esse 180 de memória aqui daria pra gente poder relevar eh porque tem a a versão de desenvolvimento né mas poxa 4% de CPU a gente tem que entender que toda vez que você tem um US state ou outros hooks correlacionados e eles fazem uma mudança como esse o principal problema tá

sendo aqui ó tá sendo esse aqui né que ele tava Independente se tem esse for it aqui ou não tanto faz questão é que quando eu propago uma mudança num ativo só na verdade eu propago a mudança no componente inteiro Então dependendo da forma como você constrói a sua aplicação você para poder mudar renderizar um lugarzinho você renderizo o componente inteiro e nesse caso a página inteira e se eu tivesse ainda Nav Bar ou outras coisas assim então isso tem custo tá essa renderização vai propagar mudanças no Dom vai usar CPU vai usar memória vai

usar recursos da do usuário e ainda mais se ele tiver num celular né Então esse é o problema esse é o problema então cuidado na hora que você trabalha assim ó então vamos fazer o seguinte como que eu poderia melhorar logo de cara essa situação né como que eu poderia evitar que que isso acontecesse eu vou deixar esse exemplo aqui como um exemplo perigoso né isso aqui seria um exemplo mal construído Então agora eu vou colocar assim ó exemplo eh muito consumo e vou criar um home broker duplicando o page que agora a gente pode

mexer nele tá show de bola o principal problema tá sendo esse set asss porque a gente ah eu quero manter o estado ali porque o estado vai propagar a renderização eu consigo ter o novo valor aqui mas fato eu preciso disso na verdade não tá eu não preciso desse estado aqui para poder trabalhar não tenho necessidade dele eu posso voltar a trabalhar somente com o que eu peguei lá da EPI diretamente e eu vou voltar para cá ó aquela outra variável vou tirar o set state daqui Arranquei ele totalmente fora então aqui é eu vou

ter dependência agora da variável das informações que eu peguei direto do banco ó Então tira esse US effect Tira aqui vai ficar essa variável aqui vai ficar ela e que não muda e aqui pode ser simplesmente o seguinte eu crio um ID colocando por exemplo um asset mais o ID do ativo aí eu posso fazer um document Carry selector pegando justamente o elemento específico fazendo que daria para colocar um Inner HTML né que seria eu tenho que pegar aqui embaixo para não que seria esse valor aqui então faço aqui igual e passo essa galerinha aqui

para dentro aí que ele vai chiar falar que eu não posso não ter o valor e tal não tem problema aqui eu tiro esse asss fora eh que ele tá chando aqui comigo por conta de quê Ah tá tá faltando esse aqui também como dependência show de bola e os outros erros aqui é questão de tipagem e tal não não é questão que a gente Deva se preocupar nesse momento agora e agora vamos ver a diferença que que ele tá chiando comigo Eh pera aí Ah mas ele tá chiando justamente aqui que não devia chiar

left tal deixa eu colocar a se no que ele vai parar de me pentelhar a agora aqui ah preciso colocar a aqui vem a interrogação ele tá dando um erro Inner HTML Ah esqueci de colocar o que vem o hashtag antes né ou o famoso ido né olha a diferença Olha que interessante Agora ele só tá mudando exatamente no lugar específico que ele deve mudar nos na verdade nos dois nas duas regiões Aonde estão os ativos e aonde tá o gráfico a parte aqui das orders né Poderia ter outras coisas até Talvez um formulário aqui

embaixo para poder negociar né vai encontrar várias plataformas desse tipo deveria ser assim né vamos até olhar para ver a diferença em relação à CPU a gente estava em 4.3 de CPU já para dois 2 e 3 2 e 4 2,5 o máximo que chegou né Então olha a diferença né como que um frontend ele tem um total impacto na experiência do usuário e daquela forma que tava antes lá se eu tivesse mais ativos vamos supor que eu tivesse 10 ativos recebendo modificações ao mesmo tempo ia causar mais problemas ainda porque eh você fica chamando

sete assets lá eh sucessivamente o react vai empilhando e vai Mudando mudando Mudando mudando ele não para mais e vai consumindo mais recursos né então agora a gente vê que ele só pisca nos lugares que ele tem que renderizar então tá aqui é uma grande falha inclusive eh eu costumo conversar com muitos alunos e entrevisto também pessoas para frontend ou pessoas que falam que sabem react Eu normalmente pergunto né como resolver esses problemas ou qual o principal problema do react e os programadores não sabem eles estão mais focados em eh como usar os hooks Ah

pera aí né Eu sei usar o o US effect Eu sei usar o US state o US hef etc mas ele não tá preocupado com com otimização com performance não sabe as consequências né não sabe o principal problema é quanto mais a sua aplicação renderiza mais recursos ela consome e aqui tá um cenário em Que Eu Não Preciso desses guardar esses ativos em lugar nenhum para poder fazer alguma outra coisa mas pode ser que eu tenha que guardá-los né Eh em alguma variável E aí eu teria que acabar mudando o estado Mas aí o que

que eu posso acabar fazendo eu posso dividir os componentes se eu tenho aqui uma árvore de componentes por exemplo ten um componente root aí aqui na minha página do Home Broker tenho a página do Home Broker eu tiver dentro dela o componente de assets separado do gráfico né Se eu tiver somente a a listagem de ativos aqui e eu tenho lá um set assets somente nesse componente então eu disparo uma mudança somente nele então a divisão de componentes também ela ajuda a segmentar essa renderização o que a gente deve sempre fazer é evitar ao máximo

que todo o projeto fique renderizando para poder ter mais performance né e é se lado a todo momento quando você tá usando um outro recurso chamado de context api ele também normalmente você coloca esses caras na raiz da sua aplicação por exemplo em layouts né aqui a gente tem um layout que poderia ter um context aqui aí context api tende a a renderizar tudo a gente vai usando um monte de context e quando você vai ver a sua aplicação react acaba se transformando num trambolho pesado demais né E aí você fica sem saber ir o

que fazer e etc e são essas informações que estão faltando para que você construa boas aplicações agora vamos pensar no seguinte Ceno Olha só pode ter uma situação que a gente tem aqui por exemplo nessa página do Home Broker que eu tenho um componente Eu tenho um componente para listagem dos ativos e tem o gráfico como que eu iria organizar a captura das informações com websocket Olha só vamos fazer aqui uma simulação home broker eh como é que eu poderia colocar o nome eh separado sei lá tô com nome não tô com nome na cabeça

vou colocar separado então Ó eu poderia ter eh não no caso não é server functions eu eu quero só criar uma separação de do dos componentes Então vou colocar aqui ó home broker separado aí a ideia seria assim ó eu tenho a minha div que é o elemento root aí eu poderia ter o asset list e o asset chart aí aquilo que a gente estava falando né se você mantém os componentes separados e tem um US state aqui dentro o US state só vai propagar a renderização nesse componente e não no chart ou eu poderia

ter também aqui o orders list né que é o que a gente tem ali então essa aqui seria uma separação Para poder melhorar mas o ponto é separando dessa forma eu vou ter que centralizar a captura do então eu tenho uma opção eu posso simplesmente fazer aqui um use effect e colocar um socket P aí eu vou ouvindo aqui os ativos melhor tem aqui O evento tem o aqui né eu vou ouvindo aqui os ativos como que eu faço para poder pegar essas novas informações e mandar para cá né se eu criar mais uma vez

aqui um assets com sete assets e o US state novamente mesmo fazendo essa separação aí aqui eu faço né aquele set assets que a gente tinha feito antes lá e tal a gente às vezes pode cair fazer a separação e cair no mesmo erro de novo aí aqui eu faço a mudança Quando eu fizer essa mudança E aí provavelmente eu vou passar né aqui a vou ter um uma propriedade assets para cá e aqui eu passaria um novo dado né poderia colocar novo deira para poder passar mesmo assim vai fazer com que tudo renderize de

novo porque mudou S assets vai renderizar a div e vai renderizar asset list vai renderizar ass chart e vai renderizar Order list aí nesse caso aqui nós podemos eh trabalhar por exemplo com estados mais personalizados né aí que entraria assuntos como rux zant inclusive eh eu tô falando disso aqui porque nós vamos usar o isso aqui para poder resolver esse tipo de problema para poder ficar bem otimizado isso vai fazer parte do material da imersão então vocês já estão sabendo sobre isso isso aqui são todos eles são gerenciadores de estado que não servem somente para

react você pode usar com Outras aplicações front Change também mas eles conseguem ao invés da gente ficar usando esse US state eh a gente consegue delegar essas informações que mudam para eles e usá-los de forma descentralizada fazendo com que a gente aplique a mudança a renderização somente nos lugares que tem que mudar então por exemplo aqui eu poderia é fazer uma mudança por exemplo eu criaria algo assim ó ah Change asset é igual a use asset Store aí aqui eu passo um Change asset passando o ativo e aí dentro aqui por exemplo do list dentro

do componente lá eu só faria um e use asset Store onde o estado é o estado de assets e tal aí que eu pegaria os ativos e pegaria o valor dele e jogaria ali com um for tudo mais poder mostrar né e aqui eu poderia lá dentro desse asset chart também capturar a nova informação que eu acabei de capturar a medida que eu passe um asset específico então aqui asset Store onde state vai ser state assets find asset asset ID é igual ao asset da propriedade do react tá então eh uma vez que eu tenho

esse Hook aqui que vai por exemplo usar o pode usar um Redux ou qualquer um deles eh quando eu faço um Change asset ele só vai mudar e ainda aqui nesse asset list ainda vamos supor que mudou somente o mudou o preço somente de um ativo eu poderia ainda ter aqui dentro um asset Show em que eu pegaria apenas Tipo isso aqui ó a mesma coisa aqui de baixo então Eh quando eu uso esse estado aqui que ele é mais eficiente ele só mudaria ali aquele componente do asset show não mudaria o list inteiro somente

aquele pedaço e mudaria o chart e não mudaria os outros então eu posso delegar a ferramentas como essa quando eu quero otimizar a renderização das coisas Esse é o principal problema desses eh libs né como todas elas sofrem desse problema angular View eh react sempre o problema é renderização quanto mais você ficar renderizando as coisas de forma ineficiente mais recursos você vai gastar então a gente pode ter um uma organização dessa quando é necessário você tem propagações muitas mudanças o tempo inteiro então aplicação como home broker é mudança para tudo é quelado é gráfico são

os ativos e etc isso mata a sua aplicação tá e a gente vai ver isso na imersão Então já tô adiantando então Eh aqui fica uma dica de como que a gente resolveria isso eh se eu não precisasse H guardar esses ativos numa situação como essa aqui a gente tá guardando ele no Store porque a gente quer ficar reprop agando quando o asset mudar eh eu posso reusar ele em vários outros componentes né então eu posso ter vários componentes filhos aqui que eu capturo aqueles ativos e etc enfim ã outra dica também que eu não

vou passar que fica aqui também como dever de casa para vocês poderem estudar inclusive já tem Live muita Live eu já fiz muita Live de nextt aqui no canal já falei muito disso eh Nós temos dois tipos de componentes componente server que é aquela página inicial que a gente quando criou o projeto com react a página inicial component server versus client component componente server ele é renderizado 100% no servidor ele não tem eventos não usa hooks por exemplo você não pode colocar nem um on Click num elemento já um componente client você pode fazer tudo

isso aqui que a gente fez mas o segredo de você ter uma boa aplicação usando esse paradigma no next é você não ser tão apressado em sempre colocar um US client já na sua página você Tente começar com um server component aqui a gente não vai conseguir pelo modo que a gente fez mas daria para poder pegar parte dessa página por exemplo a a na verdade a página em si daria para poder comear com server com Point e as partes que precisam de client a gente cria um subcomponente que vai ser usado nessa página E

aí quando o Next vai entregar a página pro browser ela vai renderizar tudo que é possível renderizar lá e vai mandar somente o JavaScript que é necessário para dar aquela interatividade dos seus componentes filhos de client dessa forma você acaba reduzindo o tanto de JavaScript que vai pro browser lembre-se quanto mais você reduzir o JavaScript que vem para cá quanto mais você reduzir mais leve vai estar a sua aplicação e mais fácil vai lidar com as coisas então o segredo é fazer esse balanceamento você acaba tendo uma mistura né Eh a sua sua server com

o ideal seria esse porque muitas vezes não vale a pena mas o ideal seria você ter a server que é o server component server page que é o server component aí dentro dela você pode ter um outro server component tem quantos você quiser e tal não tem problema nenum aproveitar c e você pode ter aqui C component então tem o centon component 2 deixa eu até desativar uma coisa aqui que ele tá fazendo o negócio ficar lento ah Cadê o components daqui components deixa eu tirar isso aqui e daqui tirar daqui também então num cenário

como esse somente esses dois aqui que gerariam JavaScript para ir pro Browser ou seja eh muitas vezes você coloca coisas que poderiam ser renderizadas 100% do lado server e tirar JavaScript tirar até elementos E você tá aumentando o número de coisas então e esse tá o segredo de você criar boas aplicações Tá show de bola pessoal ó o Carlos Ferreira Carlos Ferreira está em Portugal já vai dar z0 horas olha só que legal o Alex Cordeiro perguntou ele não fica rodando do lado do servidor não você tem que lembrar que uma vez que o seu

a sua página veio aqui pro pro browser aí ela é renderizado agora só no Browser né É só o a eu pego aqui o código fonte ó tá vendo o que veio lá do Servidor essa página aqui é uma página inteiramente client veio algumas coisas ó o ativo veio o orders mas os ativos e as orders vão ser capturadas no momento que essa página for renderizada Então ela acaba gerando uma série de JavaScript que veio para cá ó se a gente clicar aqui ó olha o tanto de JavaScript que veio claro que isso aqui tá

codificado né tá ele adiciona algumas compressões por isso que tem essas ess tantos de letrinhas aí mas o ponto é que você tem que pegar ah essa parte aqui que eu preciso de interatividade então não torne a sua página inteira um server um um client component só pegue aquele pedacinho e torne ele um client component o Igor perguntou se o use callback funciona para corrigir essas renderizações não sei muito como lidar com isso é Eh esses hooks nós temos algumas formas de lidar com esses componentes clients né para eles terem mais performance Você tem os

hooks e use callback e o US memo que o US callback serve para funções o memo serve para variáveis e tem o react memo que inclusive eu tava olhando tem uma página que a comunidade do react abre para que você que as pessoas falem Quais as principis quais as principais dores né do react o memo ele tá entre elas porque e quando você faz um react memo ali você tem que ficar passando um uma função que recebe o parâmetro anterior e o parâmetro atual para comparar para ver se ele vai render se o componente mudou

ou não então isso aqui provavelmente vai mudar mas uma coisa outra coisa também que era muito chata e agora na versão 19 mudou é o Bem dito do forward he né por exemplo a gente tem essas referências aqui né vamos supor que eu criasse um Export eh function chart e colocasse um chart Genérico e eu quisesse que componentes que me usassem pegassem API de atualizar o gráfico e tudo mais então Eh eu teria que fazer aqui um um F de ref aí eu vou ter que passar o meu componente aqui para dentro e aí com

typescript fica Às vezes a tipagem um pouquinho estranha então agora o f have foi depreciado ele existe mas então algumas coisas do react às vezes são complicadinho mas de um modo geral eh essas três aqui são eh eh três partes muito importantes para quem eh quer trabalhar com react para que você de fato eh evite renderização né então por exemplo essa fun a gente não tem função aqui mas vou dar um exemplo que eu tenha um formulário tem um formulário aí eu vou criar aqui um submit aí a gente acaba criando o On submit aqui

certo inocentemente eu vou lá e crio o on submit princípio tá tudo OK mas o que acontece é que se esse componente aqui essa página né que é o componente client ela ficar louquinha igual ela tava lá antes de ficar renderizando e o que que o react vai fazer ele vai gerar uma nova função on submit para cada nova renderização a gente tem que pensar que toda vez que tá se chamando criando uma nova função na linguagem você invoca mais memória ou seja se você tiver quatro funções aqui e não tiver usando o use callback

Você tá criando novas funções toda hora então o que que a gente acaba fazendo submit use callback é parecido com use Effect E aí você passa a função e o Array de dependências Então vamos supor que que eu não preciso usar nada eh de state dentro desse on submit Então se o meu componente for renderizado 1000 vezes por eu ter usado o US callback ele vai apenas pegar o on submit que ele já tinha criado antes Poxa então eu otimizei eu não tô consumindo mais recursos né então a mesma coisa serve pro US memo só

que o US memo você memoriza valores né você acaba memorizando valores vamos supor que isso aqui vai retornar um um resultado qualquer n você tem ali um resultado qualquer no Array de dependências pode ter você pode não ter vamos supor que você tem aqui dep 1 dep 2 se caso as suas dependências não mudarem então a gente teria que ter o mesmo valor aí que entra o conceito de imutabilidade aí nós temos dois tipos de funções funções puras e funç IMP uma função pura é uma função que ela recebendo os mesmos parâmetros ela sempre devolve

o mesmo resultado vamos pegar um exemplo se eu tiver uma função de soma eu recebo parâmetro 1 parâmetro 2 é óbvio né se eu passar soma 1 com 2 se eu chamar isso aqui 1 vezes vai ser Seme 3 agora uma função pura é justamente o efeito contrário eu passo aqui os dois parâmetros mas eh eu não tenho confiança eu não sei exatamente qual o valor que vai ser retornado vamos pegar um exemplo de algo que é impuro a promise do JavaScript se eu tiver uma função assíncrona que faz um request por exemplo né se

eu tiver uma função assíncrona que faz um request eu faço lá o request com den ou await requ eu não tenho garantia que eu vou fazer uma chamada para uma API eu vou ter o mesmo resultado por quê Porque eu posso fazer a chamada para api eu posso tá sem internet pode dar um erro de internet ai pode dar um erro eu não tenho eh garantias essa promessa pode ser resolvida com eh Vários valores diferentes então eh a gente considera o conceito de imutabilidade de algumas formas no react E aí eh se eu trabalho com

funções puras ou tento trabalhar com funções puras eu sei que se elas estão recebendo os mesmos valores como dependência ela vai ser a mesma então no caso aqui mais específico do US memo se eu recebo as mesmas dependências o o componente tá renderizando de novo veio as mesmas dependências de anteriormente então eu não preciso recalcular o valor eu já pego o valor que eu tava guardado antes e obviamente estou consumindo menos recursos entendeu então esse conceito de imutabilidade que é muito utilizado aí em Paradigma funcional ele é aplicado no react e e nesses frameworks eh

como angular como View para que a gente Organize muito bem e saiba quando e eu tenho que renderizar e quando eu não tenho que renderizar tá eu acabei inclusive falando de outras coisas aqui né que não tem nada a ver é se bem que tem um pouco de assunto de performance tem tudo a ver com aplicações financeiras Mas é isso pessoal é isso é isso eu gosto demais de falar desses assuntos e tal curto demais react e e pegar aplicações fazer otimizações saber exatamente os problemas que estão acontecendo né Eh Inclusive a gente tem a

nossa nosso a plataforma da full cycle ela é feita com react e a gente já fez várias para que ela fique mais leve e a gente passa por muitos problemas porque a gente tem um monolito que é uma aplicação PHP que disponibiliza ali todas as aulas e tudo mais pros alunos né mas essa aplicação monolítica ela tem várias questões né então você tem que tomar várias decisões no react Como que você vai fazer as coisas o perguntou funciona bem na verdade aqui pulou Cadê a pergunta do Geovani Giovani perguntou se se o Next funciona bem

com seo sim né ao contrário de single page application com react que não rola muito bem com seo o Next já Porque toda página você renderiza do lado do servidor então e todas as ferramentas aí os buscadores e etc consideram uma nova página ao contrário de um spa o Alex Cordeiro Perguntou mas o react não rodam no server eles rodam uma parte no server é isso que você tem que entender o react ele tem um recurso chamado de virtual é você tem o Don JavaScript né que é o document Object Model que é justamente aquele

document que a gente faz ali para poder fazer get Element by ID Carry select para poder manipular os elementos HTML né Eh como que o react consegue renderizar uma página do lado do servidor ele tem um dom virtual dele então ele consegue pegar eh elementos HTML lá do lado do servidor e fazer a geração de tudo que é necessário então o react ele começa do lado do servidor Mas ele também tá no Browser entendeu ele tá no Browser se se você tem componentes client se você tiver componentes vamos supor que você tem uma aplicação next

que tem apenas componentes servers 100% Então você não tem o react no Browser Você só tem react no server uma pergunta aqui do Mister Senas quando eu uso use client eu tenho a você precisa entender isso aqui ó Vocês precisam entender quando eu tô falando que el US client eu não estou falando que o componente ele é renderizado apenas no Browser quando é US client ele é um client component ele é renderizado par server par browser é isso tá o que o server não consegue organizar ele manda pro react no Browser poder terminar o trabalho

tá é somente o server component que é renderizado 100% do lado do servidor eu estou utilizando US client Exatamente porque lá no começo da Live a gente viu que no momento que eh nós começamos a utilizar esses hooks ó esses hooks US he eh use effect tudo isso aqui não não rola no server tá porque precisa de browser quando eu coloco on Click então eu tive que mudar Exatamente porque eu estou utilizando essas coisas que dependem do browser Exatamente tudo que você precisar ó eh eventos como on Click qualquer coisa de Botão eh websocket não

tem como fazer no do lado do servidor ali websocket é browser eh API de geolocalização geolocalização eh API de voz enfim qualquer coisa que for nativo ali do browser vai obrigar você ou criar um componente client ou fazer sua página inteira virar um client porque o o lado do server não tem nada o que fazer não consegue processar Isso é só com o browser nativo mesmo Tá show de bola pessoal Deixa eu fazer aqui então comite [Música] Eh vocês podem pegar a aplicação depois Git ignor deixa eu jogar um ponto History aqui aí e deixa

eu fazer aqui Live mão 21 next eu vou websocket Na verdade acho que a primeira Live específica assim de websocket Connect que eu fiz aqui no canal eu tinha usado em outras coisas assim mas o assunto era outro e Git pon Git comit Men M Git push orang M Eu acho que eu fiz coisa errada aqui pera aí eu fiz coisa errada que que eu acrescentei node mods no Git Tem que perder minha carteirinha de de de Senior por ter feito isso né podia ter feito ó fiz os comit da node mods agora lascou-se né

Deixa eu fazer aqui copiar esse endereço aí eit Men RN m mais fácil criar um Git de novo Git ponto Git comit menos M aí eu faço Git remote AD Orange adiciona endereço Git aí ele vai dar um erro faç com menos F né nunca faça Nunca faça isso em casa que eu fiz né Git menos F na Main isso aqui é open to work no Linkedin no dia seguinte né tô fazendo aqui porque obviamente é é só para fins didáticos né não é recomendado não faça ISO em casa aí tá aqui o projeto e

agora tá sem a no mods lá perdi minha carteirinha agora vou ter que ir para como é que fala quando você ultrapassa os pontos lá da CNH você vai para o curso de reciclagem preciso de curso de reciclagem de Git para poder continuar operando no mercado senão perder perdi minha OAB mas show de bola pessoal é acabo esquecendo né o agora tá aqui deixa eu pegar o link aí para vocês compartilhar aqui ó tá aí o que a gente construiu Então é isso que eu tinha para passar para vocês foi uma live bem legal né

a gente falou bastante sobre performance eu gosto muito dessas lives de performance com react e tal se eu pudesse aqui eu ficava até 6 horas da manhã construindo coisas e testando e tal brincando aí mas show de bola enquanto eu vou encerrando aqui vocês podem mandando mais dúvidas que eu vou respondendo mas a gente está chegando aqui ao fim do nosso esquenta né lembrando segunda-feira dia 17 começa a imersão a gente vai usar aí o Next a gente vai desenvol ver eh parecido com isso porém muito melhor e a gente vai criar componentes servers também

então não perca se inscreva e tem o link na descrição você já pode se inscrever agora coloca ali seu e-mail e nome rapidinho você não vai perder nada do que vai acontecer na semana que vem né então terminamos aí as nossas cinco lives que é para poder esquentar que são todas essas tecnologias que nós vamos usar na semana que vem né então tem as aulas que são publicadas logo pela manhã a gente publica ali no intervalo de 8 às 10 e tem sempre Live à noite também eh Se não me engano acho que são 17

horas Eh segunda-feira abre com o mercado livre e tem outras presenças também que eu não lembro agora de cabeça né mas sempre a gente traz uma referência do mercado de tecnologia para poder codificar para poder apresentar um assunto novo Pode ser às vezes até correlacionado com a imersão então não deixa de se inscrever porque aí você não perde nada Inclusive tem tem grupo no discord que a gente vai divulgando ali o Wesley vamos desenvolvendo a aplicação e a gente vai ajudando o pessoal com a nossa equipe ali no grupo do discord então todo mundo recebe

essas notificações aí tá eh O que mais que mais por que vocês ainda não têm curso para iniciar desenvolvimento então eh a gente tem agora um full cycle para Juniors tá a gente tem um Full psycle para Juniors que é um curso focado para quem tá começando mas ainda eh a gente não tem um curso tipo que vai te ensinar a ah um curso de Java a gente tem a scof net mas a gente tá organizando algumas coisas a scnet figurou durante muito tempo a gente tinha esses cursos básicos assim colocava trilhas de estudo e

etc a gente decidiu fazer um reposicionamento de mercado Se não me engano acho que a scof net a gente não tá nem liberando mais deixa eu só dar uma olhada aqui a gente tá liberando assinaturas Mas eu acredito que não a gente não tá liberando mais assinatura só só para quem e se mantém né mas a gente vigorou por muito tempo formando para quem tava começando e agora a gente tá com esse foque aí da da full pycon com profissionais que já TM experiência mas agora tem esse full cycle Juniors aí que a gente lançou

agora no início do ano na verdade foi em dezembro e a gente já tem vários alunos provavelmente deve abrir de novo turmas aí mas se vocês quiserem entrar em tá tirar dúvidas ali também acho que na página da se você for aqui ó na imersão full cycle cai na página do curso full cycle você consegue entrar em contato com especialistas lá de vendas e tirar essas dúvidas também sobre eh se tá disponível ou não enfim o link do do discord vai para quem se inscreve tá a gente manda para todo mundo e também fica na

página da do evento show de bola pessoal então eh acho que não tem mais nenhuma dúvida né Fica aí o meu contato também deixa eu jogar o meu nome na tela de volta aqui se vocês quiserem agora eh entrar em contato comigo @ argentinalove Instagram tudo é Argentina Luiz provavelmente estarei na eu estarei na imersão porque eu estarei nos vídeos do desenvolvimento Mas provavelmente eu estarei em alguma das lives à noite também mas agradeço a presença de todo mundo mais uma vez mais uma semana de esquenta entregue né Foi muito legal mas lives que a

gente faz aqui porque assim imagine que essas lives não é a gente já tá tarimbado de falar dessas coisas né sobre doc nest next e etc mas na hora que a gente começa a para esse evento a gente senta pensa no assunto da Live com carinho desenvolve ela cria toda uma pauta porque não é simplesmente eh a gente Domina a tecnologia mas senão a gente dispersa na hora de passar então eh a gente cria toda uma pauta tudo isso dá muito trabalho né e é muito bom chegar ao final ali e ver que pessoal tá

curtindo que tá aprendendo Tá acessando o código fonte manda mensagem e etc então fico bem feliz quando chega a esse final que vai ter o começo lá na segunda-feira né então Agradeço ao contato de todo mundo a presença de vocês aí numa sexta-feira às 9:30 ainda tem 124 pessoas e não deixem de ver essas lives porque todas ficam disponíveis no canal aproveite o final de semana para colocar tudo em dia pega o código fonte pratique né vê o que a gente tá fazendo ali mas vá além esses 15 dias que a gente tá fazendo de

evento é o momento agora para você poder expandir aí a sua cabeça expandir o seu conhecimento tá a gente já teve muitos feedbacks de pessoas que só participaram e se dedicaram para valer nesse evento e conseguiram até emprego uma vez eu lembro de uma menina que ela participou desse bootcamp que a gente tá fazendo né que é um bootcamp e ela conseguiu entrar no nubank tá lembro disso até tipo assim tive outros eh eh feedbacks mas eu lembro desse né ela mandou mensagem e tal tô o noben tava eh eh pedindo Justamente que vocês estão

passando aí e tal eu fiz e consegui passar ela mandou mensagem agradecendo e etc Então é isso tá então boa noite para todo mundo grande abraço né se vocês quiserem contato est nas redes sociais na semana que vem a gente está aí de novo até mais pessoal tchau e deem um like no vídeo não esqueça