Masterclass React | Comece sua especialização aqui

Bora então pra nossa masterclass react agora entrando já no conteúdo mais técnico no conteúdo mais prático e a ideia aqui é a gente sair dessa aula já com uma aplicação react pronta para o seu portfólio mesmo que você esteja aprendendo essa tecnologia do total zero a gente vai desde os fundamentos do reactv como que aplicações front end eram construídas até nascerem essas alternativas como reactvil angler para Onde que o front agente está caminhando e claro sair daqui com o nosso primeiro projeto já indo aqui no primeiro ponto né do nosso cronograma de estudos O que

que a gente vai construir juntos durante essa semana a gente não vai deixar barato a gente vai construir uma aplicação completinha como eu falei a gente vai estar desenvolvendo aqui um clone do Twitter a gente vai desenvolver tanto a página de timeline aqui onde a gente pode adicionar novos tweets a Gente vai desenvolver também essa página interna onde o usuário visualiza apenas um Twitch e as suas respostas a gente vai desenvolver também a versão Moble dessa mesma aplicação Ou seja a versão responsiva dessa aplicação e também eu deixei aqui Prontinho para caso você queira utilizar

outras cores ao invés da cor tá tradicional que a gente vai no Twitter eu deixei aqui também um tema Dark caso você queira estar utilizando essas cores Lembrando que esse layout Aqui fui eu que construí eu deixei ele pronto para você instalar e instalar Não na verdade para você copiar duplicar ele para sua conta do figma que é uma conta gratuita você não precisa se preocupar e que você vai ter acesso para utilizar da maneira que você preferir esse layout copiar aqui imagens copiar cores é Conseguir configurar da maneira que você bem preferir até customizar

o layout caso assim seja seja da sua vontade e aí Seguindo aqui Para o nosso conteúdo né para o restante aqui das nossas nosso cronograma De onde viemos e Para onde vamos né falar um pouquinho da história do frontiend como eu comecei quando eu comecei a trabalhar com frontient lá em 2011 na minha primeira oportunidade de estágio eu trabalhei numa agência digital que a gente basicamente desenvolvia blog é comer site né Landing page quero realmente o que que tinha mercado na época né dificilmente é existiam Empresas na época que trabalhavam diretamente com sistemas eram mais

sistemas de ponto de venda é RP Pelo menos é da onde que eu vim que é uma cidade muito pequena na com 60 mil habitantes não tinha muitas oportunidades para trabalhar com programação e na época frontiend era algo que a gente dificilmente distinguia de um back ange né a gente não tinha cargos específicos para a frontiend ebacked como a gente tem hoje ou até Mobile na época nem se falava né a gente não tinha nem Tecnologias para trabalhar especificamente com lobo porque o primeiro iPhone estava sendo lançado e eu lembro que na época até Inclusive

a gente chamava o cargo de web Master a pessoa que lidava com a construção de aplicações de ponta a ponta hoje a gente pode pensar nesse cargo como nosso famoso full steck a pessoa que consegue desenvolver uma aplicação tanto Frontier de back ange por aí vai mas por que que A gente não tinha essa diferenciação E por que que hoje a gente tem porque a maneira que as aplicações eram construídas antigamente é muito diferente da maneira que a aplicar que as aplicações são construídas atualmente porque antigamente a gente tinha lá na nossa aplicação por exemplo

a gente ia desenvolver por exemplo um backing né a gente partia lá para desenvolver o nosso backnde a Vamos mostrar aqui por exemplo a tecnologia que precisava muito na Época era o PHP apesar de hoje quase nem mais utilizar né já quase não né hoje eu não utilizo mais faz um bom tempo mas na época a gente utilizava por exemplo o PHP unido a um WordPress unido a um magento como eu bem falei anteriormente e a gente não conseguia diferenciar a Frontier Candy Porque toda parte visual da nossa aplicação ela ficava junto no nosso backhand

Ou seja quando por exemplo um usuário ele ia acessar alguma página da nossa aplicação Então imagina Que o usuário ia lá e acessava é www.meusite lá o e-commerce que eu tinha.com/produto é que eu queria trazer o produto com o que acontecia é que quando a nossa requisição batia ali no backend o back Angel ele devolvia já para o usuário toda a interface pronta então HTML CSS e já vai script necessário para nossa aplicação funcionar e também o backend era responsável por toda parte que a gente considera mais nível da aplicação então Toda parte de banco

de dados autenticação regras de negócio né que eu vou botar aqui como RN Então tudo isso que o backend fazia já e sempre teve como responsabilidade que é lidar com a parte sensível persistência de dados é autenticação segurança autorização tudo isso sempre fez parte do baquente porém ele tinha também a responsabilidade de construção de interfaces para quem trabalhou aí com tecnologias como laravel Jungle rails né ou até outro Frameworking moderno do desenvolvimento web vai conhecer que a gente tinha vai lembrar né que a gente tinha um conceito lá dentro que se chamava de template endings

né Que nada mais eram do que tecnologias ou bibliotecas né conjuntos de ferramentas que permitiam a gente gerar HTML com o CSS com Java script a partir do nosso Becker utilizando ali uma sintaxe específica para a gente conseguir adicionar código digamos nesse caso PHP dentro do HTML o próprio PHP Mesmo ele tinha essa interação muito próxima do HTML né a gente escrever HTML e PHP muito próximos né Inclusive eu lembro de várias aplicações que eu desenvolvi onde eu tinha diretamente Chris né do mais Kele da vida por exemplo diretamente ali dentro do meu HTML ou

seja para quem começa a desenvolver aplicações hoje em dia e talvez aprende diretamente a desenvolver de uma maneira um pouco mais moderna um pouco mais atual que é o que a gente vai Ver aqui talvez nem entenda isso que eu tô falando nem entenda tudo isso que eu tô é explicando aqui mas quem veio aí de um desenvolvimento frontiense já de uns 10 anos para trás como eu vim talvez nem tanto isso vai lembrar exatamente como que as aplicações eram desenvolvidas E aí o problema disso tudo é o seguinte né como eu falei o back

Angel Ele tem ele teve na verdade né ele tinha responsabilidades demais né então como a gente bem pode ver aqui o nosso back Angel ele tem Eita que que eu fiz aqui ele tem muitas responsabilidades além de lidar com a parte de regra de negócio autenticação o banco de banco de dados e tudo mais ele também acaba lidando com a parte de html CSS java script só que com a vinda aí de novas ferramentas e novos ambientes Como por exemplo o próprio ambiente mobile isso aqui começou a se tornar um pé no saco assim uma

um problema grande Porque pensa que se o meu backing ele tá retornando Quando um Usuário acessa por exemplo o produto barra 1 né a rota aqui ele tá retornando HTML e CSS como que uma aplicação iOS ou uma aplicação Android vai conseguir se comunicar com esse mesmo beckend aqui para buscar por exemplo informações do mesmo produto e então quando a gente tem aplicações como por exemplo IOS android que são aplicações e sistemas que não entendem HTML CSS JavaScript como que essas aplicações aqui vão conseguir se Comunicar com o nosso mesmo backnd para quem a gente

não tenha que criar um backing para cada tipo de interface digamos assim né que não faz nem sentido como que essas aplicações aqui vão conseguir consumir e entender HTML CSS já vai script a gente teria que ter uma outra um outro tipo de porta de entrada para conseguir fazer a comunicação E aí que nasce um dos conceitos que provavelmente você já deve ter ouvido falar que são as nossas apis né ou Traduzindo a sigla aplication aplication programing interface sei lá nome feio pra caramba mas a pi nada mais é então do que um conceito onde

a gente consegue transmitir comunicar duas aplicações seja ela a duas aplicações backnde uma aplicação backing de uma aplicação front-end é tratando aqui que aplicações móveis elas também podem ser conside aplicações front-end né A única diferença é que elas estão rodando no Dispositivo uma boa invés de rodando no Browser do usuário mas Ambos são frontiend aqui nesse caso e show de bola então a gente é entende que a gente tem quando usuário acesso uma rota da nossa aplicação se ele tiver acessando o nosso backing de tradicional o HTML CSS já vai escrito vai ser montado diretamente

pelo backend né usando geralmente um conceito de template end E caso a gente vai ter uma aplicação IOS e Android a gente pode desenvolver dentro do mesmo bachandio um Conceito chamado de api porém como a gente já falou anteriormente como o nosso IOS android não entende HTML e CSS a gente precisa utilizar uma linguagem nova digamos assim para comunicar essas duas pontas E aí que vem um conceito que provavelmente você vai ouvir falar muito daqui pra frente que é o Jason né o Jason que é uma sigla para JavaScript Object é uma estrutura de dados

ou seja a um formato que representa dados e que dados Que podem ser isso pode ser qualquer dado podem ser objetos vetores podem ser streams inteiros a floats né o Jason ele é uma estrutura universal para representação de dados e o nome né porque o Jason ele usa uma sintaxe né uma formatação muito semelhante a um objeto dentro do Java script então o Jason por exemplo se eu quero enviar uma informação do backendi para dentro aqui do nosso IOS android vamos supor que eu quero Enviar uma informação que é os dados de um único usuário

por exemplo nesse caso os dados eles ficariam formatados da seguinte forma a gente teria por exemplo um um objeto e aí o usuário tem o nome que é Diego ele tem uma idade que é 28 E por aí vai então isso aqui é mais ou menos o formato dos dados que são transmitidos Jason né de um backnd para um front-end por exemplo E aí por que que eu tô tratando tudo isso né porque daqui para Frente né depois ali de 2014 com o surgimento do engllardis e também do próprio react ali perto de 2015 o

próprio viest também na mesma época e com mais outras bibliotecas surgiram depois disso se introduziu então uma nova forma da gente trabalhar com aplicações web e mobile no geral qualquer tipo de aplicação que envolva Back And frontiend como eu tô falando aqui agora a diferença então é que com todos esses aprendizados que a gente Teve sim titulou de forma Universal uma nova forma da gente trabalhar com as aplicações como é que funciona essa forma a partir do momento que um usuário acessa algum endereço na nossa aplicação como por exemplo aqui meu site.com/produto/1 diferente dele dessa

requisição bater diretamente em uma aplicação backendi seja ela escrita com PHP pai YouTube Java node ou qualquer coisa assim a diferença é que o usuário vai bater agora diretamente numa Aplicação front-end uma aplicação front-end É nesse caso aqui uma aplicação construída puramente com HTML CSS e java script ou seja dentro dela não vai existir nenhuma outra tecnologia a não ser essas três tecnologias aqui que eu listei ou seja o usuário não bate numa aplicação backendi Mas como ele batia antigamente que era aqui e o que que acontece é dentro desse front end aqui vai ter

todo o código necessário para aplicação conseguir Construir mostrar para o usuário as interfaces que ele quer navegar Porém quando o usuário acessar algum endereço que precisa de informações dinâmicas informações de um banco de dados por exemplo o front-end vai se comunicar com o backnd que a gente tinha antes e dentro desse backinge a gente vai ter toda a lógica que eu tinha falado antes aqui dentro que ele pode ser PHP pode ser qualquer tecnologia vai ter toda a Parte de banco de dados regras de negócio autenticação E por aí vai a diferença disso tudo é

que o back and não vai mais devolver a partir desse momento aqui as informações para o nosso front-end em formato de html CSS e já vai script porque isso já está presente dentro da aplicação duas bases de código diferentes aqui nesse caso duas aplicações construídas do zero o back and vai devolver as informações pro front-end em formato de Jason que foi o Que a gente mostrou agora ali atrás ou seja toda comunicação entre front-end e back and ela é feita em formato de Jason em estrutura de dados Jason ou seja Frontier Candy não se comunicam

mais utilizando linguagens específicas da web como HTML CSS e já E com isso a gente também não precisa mais o conceito de template ending e abordando Jason como a estrutura universal de comunicação entre facilmente a gente pode colocar por exemplo um IOS e Android da vida que se Comunica com o mesmo porém também utilizando o conceito aqui de Jason em si Ou seja a mesma api back Candy pode se comunicar com aplicativos iOS Android e com o aplicativo front-end seja com reaction viu algum qualquer outra biblioteca utilizando a mesma base de dados mesma estrutura de

dados que é o Jason eu não preciso customizar nada de acordo com o cliente que está acessando o tipo de front end que está acessando a minha aplicação então Basicamente isso aqui é o cenário resumido aqui de uma maneira um pouco mais rápida para a gente não investir tanto tempo nessa explicação mais fundamental que é como que evoluiu-se então e surgiu as áreas de frontient e as áreas de beckenz onde hoje a gente tem tanto profissionais que trabalham com as duas áreas que são pessoas foistec tanto profissionais que trabalham só com Frontier porque aqui dentro

entra um universo gigantesco de Possibilidades profissionais que trabalham só com bacquente profissionais que trabalham só com Bubble até às vezes só com IOS só com Android e por aí vai Porém todas essas aplicações elas se comunicam com uma mesma estrutura de dados que é o Jason que é a estrutura universal de dados que a gente vai conhecer também mais para frente aqui nessa aula mas bora lá então agora que a gente já entendeu Da onde a gente veio e para onde que a gente vai Bora entender Um pouquinho o que que é o react antes

de mais nada né quando a essa onda né de novas bibliotecas Lá surgiu com o anglor Jazz lá em 2000 Ah e 2013 quando eu criei a minha primeira aplicação não sei exatamente a data que que foi lançado mas essa essa nova esse novo formato de trabalhar com front-end ele veio para suprir uma grande necessidade que a gente tinha que é o seguinte a partir do momento que a gente começa a trabalhar com o código front-end separado do Código backend Você concorda comigo que o código front-e que passa a ter muito mais responsabilidades que antes

ele não tinha por exemplo se eu tenho vários endereços da minha aplicação Então eu tenho meu site Produto um eu tenho meu site é catálogo eu tenho meu site carrinho eu tenho o meu site é sei lá categorias eu tenho um monte de endereço um monte de rotas como a gente chama que eu possa acessar na minha aplicação e agora quem começa a ter que lidar com Essas diferentes rotas na minha aplicação não é mais só o pé Candy e sim o frontierge porque a aplicação no final das contas que o usuário vai estar interagindo

ali no navegador dele vai ser uma aplicação Frontier escrita puramente com HTML CSS e já vai script no final das contas reactv tudo isso no final das contas é HTML CSS e já era escrito não tem nada além disso então a gente começa a ter mais responsabilidades no frontient E essas Bibliotecas reat englas e todas elas que eu citei E as novas que estão elas são basicamente bibliotecas para facilitar esse trabalho facilitar o trabalho da gente conseguir lidar com uma aplicação front-end separada de uma aplicação bem quente porém o principal ponto que essas ferramentas introduziram

foi um conceito chamado de spa que é uma sigla para single page application E se a gente for pegar a tradução literal disso aqui né é uma aplicação de uma só página o que que Isso aqui quer dizer no final das contas né quando a gente desenvolve uma aplicação onde o back end ele faz também a parte do né as responsabilidades do front Angel ou seja o back Angel é quem também desenvolve retorna HTML CSS Java Script o que acontece é que a gente tem uma multi page application porque multi page application basicamente o github

é uma aplicação hoje desenvolvida com Rubi que ela não usa é ainda em todas as páginas esse conceito aqui que eu Mostrei e frontiene separado do pé quente Então uma das coisas que a gente consegue perceber até abrindo aqui no inspecionar elemento vindo na aba Network é que quando eu acesso uma outra página do githup por exemplo eu venho aqui ó e acesso à página de porcos a gente vai ver que toda a página é carregada do total zero Então veja aqui ó aquele carregou gitta.com/post que é o endereço e depois ele teve que carregar

uma porrada de Arquivos aqui do total Zero Isso quer dizer que cada vez que eu faço uma navegação dentro de uma multi page application que é por exemplo o github que é esse modelo tradicional que a gente tá vendo aqui todo o site ele é basicamente carregado do zero tudo precisa tudo em tela precisa ser recarregado Mas uma coisa que você pode concordar comigo aqui dentro é que quando a gente mudou da página inicial Para a página de porco S por exemplo o cabeçalho ele ficou exatamente o mesmo concorda comigo Por que que então a

gente precisa carregar o cabeçalho do zero ou até em outros casos por exemplo se eu entro aqui num repositório qualquer certo e eu venho aqui e eu troco de code para isso veja que essa parte aqui em cima e o número de whats fortes e Stars Stars ele é o mesmo por que que eu preciso recarregar isso do zero Não faz muito sentido né Eu só mudei o conteúdo só mudei essa parte aqui porque que todo o resto tá carregando do zero Esse é o conceito por trás de single page application a gente conseguir quase

que evitar que partes da nossa página sejam recarregadas quando eu troco de uma página para outra e eu consigo assim trocar apenas o conteúdo principal da página sem trocar coisas que são fixas coisas que não vão mudar é por isso que A gente chama de single page aplication porque no final das contas É como se eu tivesse uma única página na minha aplicação uma única endereço e conforme eu vou clicando nos links ao invés de eu navegar o usuário para outra página na verdade eu só pego e troco alguma coisa que já tá em tela

então eu tiro uma coisa que tava aparecendo antes e coloca outra eu não preciso pegar e recarregar realmente por baixo dos panos trocar o endereço enviar redirecionar o Us para Outra página não se Ele clicou aqui ó em code se ele tava em code e clicou em nichos eu pego removo isso aqui da tela jogo isso aqui para o Limbo e por baixo dos panos mostro outra coisa aqui dentro mas eu não redireciono o usuário para outra página eu só Finjo que eu redirecionei então por isso que isso aqui é o conceito que tá por

trás do react do View e Dongle só que depois que o Igor lá ele surgiu com esse conceito de Spa beleza isso aqui foi um bom estourou Todo mundo começou a utilizar porém o react Ele trouxe além do conceito de spa Ele trouxe um outro conceito que é incrível e que a gente usa até hoje que é o conceito de componentes que logo a gente vai falar um pouquinho mais sobre isso mas componentes nada mais são do que formas da gente reaproveitar pequenos pedaços de interface em vários locais da nossa aplicação isso é muito fácil

da gente ver por exemplo um Twitter da vida né dá até medo de entrar no Twitter porque sempre que eu entro parece cada coisa mas aqui no Twitter por exemplo uma das coisas que a gente pode ver é que eu tenho vários tweets em telas né Então olha só tem um primeiro Twitter aqui um segundo tweet um terceiro tweet uma resposta que também é muito semelhante a um Twitter um quinto um sexto e por aí vai e todos eles eles têm coisas em comuns o layout deles é visualmente Muito parecido muito parecido mesmo então o

que que acontece é que o react ele introduziu essa ideia de componentes que nada mais são do que pedacinhos da aplicação então eu posso considerar que cada tweet aqui por exemplo é um componente Onde eu consigo reaproveitar isso mudando pequenas coisinhas entre eles né porque quando eu vou utilizar um HTML CSS já vai script da vida se eu tenho duas coisas que são muito parecidas na tela Você concorda comigo Que a menos que eu use conceitos mais recentes como web componentes que é algo que está surgindo agora dentro do HTML e do Java script dificilmente

eu consigo reaproveitar aquilo eu tenho que dar você control V né e conseguir utilizar aquilo dentro do react não dentro do react é como se a gente conseguisse criar as nossas próprias tags do HTML que são os componentes no final das contas atribuir comportamento atribuir visual e conseguir Reutilizar aquilo dentro do código várias e várias e várias vezes né Isso é muito legal e claro que eu vou te mostrar na prática como que funciona isso mas basicamente isso aqui é um pouquinho da história de onde viemos para onde é onde estamos e o para onde

estamos indo eu vou deixar um pouquinho mais para o final Até porque eu não quero também encher sua cabeça com conteúdo demais agora e agora a gente vai sem mais delongas nós vamos direto Para o nosso código aqui dentro tá aprofundamentos do react a gente ia pegar e abrir o código e começar a entender um pouquinho como que se parece uma aplicação react antes de mais nada o react ele tem uma única dependência necessária que é o note o note precisa Obrigatoriamente estar instalado na máquina e caso você não tenha ainda o node instalado a

gente deixou aqui também no material complementar dessa masterclass um guia completinho para Você instalar o note seja no Windows Linux ou no Mac caso você nem saiba se o note tá instalado recomendo você abrir o seu terminal ou o seu prompt de comando Caso esteja no Windows e digita note menos V ou traço v e ele deve retornar caso ele esteja instalado a versão do note recomendo altamente que se você tiver com uma versão muito mais antiga a minha que tá aparecendo aqui em tela você instale a versão do node mais atual LTS beleza não

a versão Connect a versão LTS que quer dizer a versão estável do note a versão com longa suporte perfeito Então já com o node instalado a gente pode continuar então com a nossa aula para prosseguir instalando aqui o react e criando a nossa aplicação show de bola agora a gente vai partir para criar o nosso primeiro app com react mas antes de mais nada antes de criar o nosso app com react eu preciso te explicar rapidinho dois conceitos que são muito importantes do mundo do front-ent que São os conceitos de compilers e banners e calma

com esses nomes Porque no final das contas o conceito é muito simples o que que é o que são esses dois conceitos aqui o Java script é uma linguagem que depois de 2015 ela evoluiu muito né a gente é uma linguagem Que ela segue padrões de uma outra linguagem chamada script que é quase uma convenção que determina como que a linguagem vai funcionar e essa convenção o eco mais script determina Como três linguagens principais vão funcionar o JavaScript o Action script que era muito utilizado dentro do Flash e o unit script que é muito utilizada

para game de vela essas três linguagens elas dependem dessas Convenções que são do Eco mais curto só que como o Java script ele avança muito rápido não só o Java script mas o HTML o CSS Tem várias coisas dessas lingua que os navegadores Eles não conseguem digamos se atualizar rápido o suficiente para conseguir Entender então existem muitas coisas novas do Java script conceitos novos recursos novos do JavaScript que o navegador ele ainda não entende ele tá um pouco mais desatualizado digamos assim e por isso a gente precisa utilizar de ferramentas que vão conseguir converter o

nosso código escrito em uma versão que consiga ser executada em todos os navegadores Claro que não em todos os navegadores porque a gente nem mais dá suporte para Internet Explorer da vida mas pelo menos para conseguir rodar no Chrome no Firefox no Edge nos navegadores principais Brave por aí vai então isso são os compilers são basicamente ferramentas que vão pegar um código escrito numa versão mais recente digamos assim como funcionalidades específicas às vezes do próprio react do view do englor que possuem sintaxes muito específicas e vão converter esse código é uma maneira que o navegador

entenda e aí existe o Conceito de bullets o que que são os bundlers aqui dentro o que acontece e dentro de aplicações front-end É principalmente é que a gente provavelmente não vai ter um único arquivo já vai script um único arquivo CSS um único arquivo HTML a gente vai ter muitos arquivos ali dentro que no final das contas a gente quer empacotar todos esses arquivos dentro do mesmo projeto a gente quer enviar apenas um projeto para produção e os banners eles São basicamente ferramentas que fazem isso eles entendem todos os relacionamentos que existem entre arquivos

da nossa aplicação então a esse arquivo já vai script depende deste outro arquivo já vem escrito ou seja um arquivo importa outro arquivo e por aí vai a gente vai ver como é que funciona isso antes esses banners então eles entendem essas importações essas dependências entre arquivos e eles entregam um código ali no final que ele Tá todo pronto digamos assim Para ser jogado em produção para conseguir ser executado e hoje em dia né essas ferramentas elas avançaram muito a gente tinha que fazer configurações gigantescas quando eu comecei a aprender react então a gente tinha

que aprender [Música] um monte de ferramentas ali por trás só que hoje como eu falei isso tá muito mais simples particularmente né hoje em Dia eu gosto muito de utilizar uma biblioteca que é o Viking né o vídeo que é uma ferramenta para construção de projetos front-end onde tudo isso aqui é o que eu expliquei de banders com pilers tudo isso aqui vem abstraído pra gente não precisar se preocupar com nada e o it ele traz várias é funcionalidades que a gente comumente precisa dentro de um front end né então por exemplo a gente tem

a funcionalidade de hot mode que nada mais é do que quando eu altero Qualquer parte de código da minha aplicação eu consigo visualizar isso em tempo real sendo exibido no meu navegador eu não preciso da F5 Reload nem nada disso fora isso o próprio Vip já tem suporte nativo para Type script que é um superset né um conjunto de funcionalidades em cima do JavaScript logo a gente vai falar sobre ele jsx que nada mais é do que uma sintaxe que o react usa para a gente conseguir criar interface que nada mais é do que HTML

Escrito dentro do Java script Calma que logo eu vou explicar para você como é que funciona isso e também CSS que é o CSS tradicional que você já conhece né então ele traz suporte para que os navegadores consigam entender essa sintaxe de tape script jsx a CSS e tudo nativamente sem a gente precisar fazer qualquer outra configuração Então a gente vai estar utilizando o vídeo daqui pra frente pra criar o nosso projeto react e com isso então como é que a Gente vai fazer dentro do nosso é criminal do nosso prompt de comando já com

o próprio no instalado junto com o note ele instala também outra ferramenta chamada npm isso aqui vem automaticamente ao instalar o note O npm vem da sigla notepacked Manager que ele é basicamente uma forma da gente se conectar a códigos terceiros a gente pode instalar dependências terceiras né dependências Eh de outros projetos bibliotecas no nosso código Mas a gente Pode usar o npm também para conseguir usar ferramentas como o próprio VIP para criar um projeto do zero Então olha só eu vou escrever npm Create vit@latest para que ele utilize a última versão do vídeo vou

dar um entre aqui agora ele vai fazer algumas perguntas Então qual que é o nome do projeto então eu vou chamar aqui de you ai Twitter e aqui ele seleciona qual framer que eu tô utilizando ou qual biblioteca frontiend veja que tem a opção Vanilla que é Basicamente não quero usar nenhuma biblioteca nem viu nem nada ele vai trazer Digamos um template cru sem nada e aí tem viu react e aí a gente pode selecionar o que mais fizer sentido aqui eu vou selecionar o react E aí ele procura ele fala qual variante que eu

quero usar do template ou seja se eu quero usar com o JavaScript se eu quero usar com type script né que é uma como eu já expliquei eu vou explicar mais para frente que é Basicamente um já vai script bufado ali com algumas funcionalidades a mais que é o que a gente vai utilizar e tem duas aqui que não cabe a explicação agora mas são outras formas da gente também utilizar o vídeo tá mas eu vou selecionar a opção Type script Vou acessar aqui a pasta e Uai Twitter e aqui todos os comandos que eu

vou executar são comandos do unick tá então eles vão funcionar caso você esteja no Mac ou no Linux se você tiver no Windows Recomendo que você utilize a o Git best caso você tenha instalado o Git na sua máquina porque daí você vai conseguir escrever os comandos CD MK ir por exemplo é Ou se você já foram usuário um pouquinho mais avançado já está um tempo programando altamente recomendo você dar uma olhadinha sobre wsl que nada mais é do que como você conseguir executar um subsistema Linux dentro do seu Windows Mas isso é assunto para

outro momento já dentro da pasta aqui do you whitewear eu Vou abrir isso aqui no meu editor que é o visual Studio code mas o que que eu fiz aqui para a gente partir do total zero eu baixei uma outra versão aqui do vsco code para que o meu vscold ele fique totalmente Zerado aqui para a gente poder configurar o editor do total zero juntos para trabalhar com react Então olha só baixei aqui ó e olha só esse aqui é o vscold assim que você baixa ele sem qualquer configuração eu vou vir aqui ó dentro

dele e eu vou Abrir a pasta do nosso projeto então eu venho aqui em www.master Classic Twitter que é o projeto que a gente acabou de criar altas Yes perfeito já tá aqui o nosso projeto deixa eu dar um pouquinho de zoom isso aqui então é a nossa interface aqui do vscold e aqui a gente pode ver que o próprio Vit ele já trouxe pra gente algumas pastas criadas aqui dentro Surf e também alguns arquivos aqui dentro Primeira coisa que a gente precisa fazer aqui dentro é abrir o nosso terminal então posso clicar aqui no

vscold terminal New terminal ele vai abrir um terminalzinho aqui embaixo e a gente precisa instalar as dependências né O que que são as dependências Lembra que eu falei que quando a gente instala o node junto com ele vem o npm que é basicamente o projetinho aqui né o pacote que é facilita a gente lidar com códigos terceiros se eu abre aqui o Packet.jay que é o arquivo principal de qualquer aplicação já vai script eu vou ver que aqui dentro ó eu tenho o nome da minha aplicação a versão alguns scripts que são é tarefas que

eu posso automatizar logo a gente vai falar sobre elas e aqui embaixo eu tenho algumas dependências ó eu tenho duas dependências nesse projeto que é o react e o react Don que nada mais é do que a integração do react com a Dom que é o nosso dockment objet Model que no final Das contas é o HTML como o react ele pode ser utilizado para várias frentes né para vários diferentes mo web por aí vai ele tem algumas bibliotecas Como o próprio reactdom que é digamos a integração do react com algum front específico nesse caso

a web nessa eu tivesse utilizando para ambiente Moble ao invés do Dom seria o Native né que é o react para IOS android e aqui ele tem algumas dependências de desenvolvimento ó@tyreat que é coisa do Type Script@tyreatdon que também é do Type script Ah tem o Viking jazz@lugin react o Type script e o vídeo essas dependências de desenvolvimento elas são dependências digamos códigos de terceiros que a gente vai utilizar somente enquanto a gente está desenvolvendo a nossa aplicação Ou seja quando eu coloco essas dependências dentro de deve depenings é uma maneira de eu dizer para

o meu código que essas dependências aqui eu não vou usar Elas Quando o meu código for para a produção quando ele ficar online ou seja eu não quero que essas dependências aqui atrapalhem o tamanho da minha aplicação porque elas não vão ser utilizadas nesse ambiente E aí para eu executar minha aplicação uma primeira vez né eu vou eu vou então instalar as dependências como eu bem falei vou dar um npm install aqui dentro agora pode demorar um pouquinho porque ele vai se você nunca instalou essas Dependências ele vai precisar baixar as dependências fazer a resolução

das dependências e para ir ele criar uma pastinha aqui dentro chamada no outro models que tem todo o código dessas dependências aí que a gente está instalando Então bora aguardar um pouquinho perfeito o meu já terminou aqui já instalou e agora a gente pode ver que ele criou para gente uma pasta no outro models que tem todo o código das Dependências que a gente instalou e agora para a gente executar o nosso projeto basta a gente executar npm Run dando entre aqui agora ele vai mostrar um endereço para a gente acessar se eu dou um

Ctrl e clico aqui nesse endereço Olha só ele já abriu aqui a nossa aplicação isso aqui digamos o template básico que o Vit traz para a gente dar um start numa aplicação Rex ele nada mais traz aqui do que duas imagens né vitolas E aquele traz um botão que cada Vez que eu clico nele ele aumenta o contador que tá ali dentro ou seja mostrando pelo menos algum tipo de interação Que o usuário pode ter com essa aplicação ah perfeito claro que a gente não vai utilizar nada disso né a gente vai deletar esse arquivos

começar um projeto do total zero mas a gente já então criou a nossa primeira aplicação com react com piders já entendeu o conceito de compilars e bandas logo a gente vai conhecer a estrutura aqui do Nosso projeto porém antes disso eu quero junto com você configurar a nossa ideia configurar nosso vs code para que você fique aí com o seu vs code bonitão igual ao meu e também com algumas configurações muito boas e plugins pra gente trabalhar especificamente com react e vão te ajudar ali na hora da escrita do seu código então lá continua então

bora lá primeira coisa que eu vou fazer eu vou começar aqui na esquerda novest code dentro de extensions a gente Vai instalar algumas extensões aqui dentro para facilitar o nosso trabalho com react e a primeira delas é o tema né Eu gosto de mudar o tema aqui eu troco constantemente de temas mas o tema que eu tô utilizando no momento é Rose com acento no epine Então esse carinha aqui ó eu vou instalar ele e eu uso ele na versão Moon se eu não me engano que essa aqui ó então você pode usar o tema

que você preferir tem vários tá tem um homem que É criado aqui por nós da Rocket City para quem gosta de um tema um pouquinho mais escuro aí ele tem bom a gente tem vários e várias opções de temas diferentes além do tema que eu gosto de trocar um pouquinho dos ícones aqui do vscold Então vou instalar duas extensões o fluent icon ou melhor eu tô num lugar errado é aqui nas extensões fluent icons que ele vai trocar esse ícones aqui da esquerda Então a gente vai Instalar e aqui ele vai ajudar a opção para

a gente selecionar Só Dá um enter pronto ó já trocou-se aqui e a gente vai instalar uma outra extensão que é a símbolos que é basicamente os ícones aqui ó dos arquivos que vão mudar olha só vou dar um install aguarda um pouquinho ele vai aparecer aqui uma lista para a gente selecionar também esse aqui tá demorando um pouquinho mais não tem Problema [Música] show já instalou aqui quando eu venho aqui ó e bota o mouse para o teclado para baixo pronto a gente pode ver que o ícones já mudaram ali na esquerda ó tava

assim antes e ficou assim mas bonitinho né show de bola então agora a gente já tá com as extensões visuais e instaladas a gente vai instalar aqui é outras extensões que a gente precisa utilizar para o react Será que tem Deixa eu Mandar uma olhadinha aqui no meu na minha colinha só para eu garantir que não fique nada para trás Olha você sincero para você que a gente não precisa de mais nada tá o que a gente precisa fazer agora são configurações adicionais no Ice code Então a gente vai clicar aqui em cima em code

prefers e a gente vem na opção settings e dentro de settings aqui na direita tem um documentozinho que quando a gente clica ele abre todas as configurações do Editor porém é em formato de Jason para a gente configurar Então a gente vai começar a fazer algumas configurações aqui dentro primeira coisa que eu gosto de fazer a gente vai usar o edtor eu vou usar aqui 16 Eu gosto da fonte bem maior do que o tradicional aqui do vscold Mas você pode configurar como você preferir outra coisa que eu gosto também é das das Linhas um

pouquinho mais espaçadas entre elas então eu tenho Uma configuração aqui que eu gosto bastante de fazer que é o editor.line que eu vou botar a opção 26 Vou salvar e ó ele dá um pouquinho de espaçamento a mais e você também pode configurar aí da maneira que você preferir outra coisa que eu gosto de fazer é trocar a fonte padrão do vscode para uma outra fonte que eu gosto mais eu gosto muito de utilizar a Jet Brains que é uma fonte criada lá pelo pessoal da Jet brands que tem todos aquelas ideias né o Web

Storm Pega Play Storm só que ela é grátis então a gente vem aqui baixa a fonte E aí tem até o guia de como instalar aqui dependendo do seu sistema operacional no Mac você tudo e dá um stal fundo no Windows seleciona todos os arquivos de fonte na pasta clica um botão direito do mouse em qualquer um deles escolha install no menu no Linux descompacte as fontes em pasta do usuário ponto louco ou Sher Fontes ou bom Tem todos os guias aqui depois que você instalar você volta Lá no seu vs code e vai trocar

aqui editor fonte Family Jet Brains com b maiúsculo mono dá um save e pronto a gente pode ver já que as fontes mudaram ali dentro que mais que a gente pode mudar aqui dentro Eu tenho muitas configurações mas a gente vai fazer o seguinte eu vou fazer duas configurações aqui dentro que são sem importantes para a gente é que é o seguinte a primeira delas é o emmet ponto Sintaxe profile e aqui dentro eu vou escrever JavaScript 2 pontos jsx aqui embaixo eu dou uma vírgula e vou escrever mais uma outra opção que é emiti

language dentro eu colocar de script 2 pontos de água script que que isso aqui no final das contas está fazendo e cuidado para não deixar uma vírgula aqui no final sempre o Jason ele não permite que você tenha vírgula sobrando no final tem que ter vírgula Entre cada uma das propriedades aqui tem que cuidar bastante com isso mas que que isso é né o emmet ele é um plugin nativo do vscold que ele permite a gente escrever HTML de uma maneira mais rápida que que é olha só se eu escrevo aqui por exemplo div.test e

dentro dela eu quero um a que tem hf/ contato vem aqui não entra ó ele cria automaticamente o HTML para mim né então eu consigo escrever de uma certa forma um texto mais rápido e no final ele converte para HTML só que Isso por padrão no vs code não funciona dentro de arquivos já vai script só que agora com essas configurações que a gente fez vai funcionar dentro do Java script É porque no react a gente escreve HTML também dentro do Java script tá então isso é importante a gente ter esse essas configurações deixa eu

ver se faltou mais alguma aqui eu acho que assim já tá ótimo para a gente começar a única última configuração que eu vou fazer é o Editors como 2 né Eu uso a Tab com dois espaços qualquer aqui ele ainda não funcionou porque ele configura por arquivo então aqui nesse arquivo tem que voltar aqui embaixo ó spaces selecionou identitys eu gosto e uso o dois aqui onde e pronto agora vem aqui ó seleciono tudo e dá um shift Tab E aí ele bota tudo para trás ali eu gosto de utilizar aqui também e aqui também

eu gosto de usar o tab com dois espaços aqui não gosto de quatro qualquer pessoa que usa Diferente de 2 tá errado brincadeira você pode usar como você preferir mas eu gosto de dois eu acho que já tá bem suficiente só que são as configurações básicas para a gente iniciar Claro todas essas configurações aqui você vai mudando Conforme você mexe no seu editor as únicas que são necessariamente importantes por react são essas duas aqui todo o resto você pode configurar da maneira que for mais legal para você né tema cores tudo isso aí perfeito Agora

com essas configurações vamos voltar aqui para o nosso cronograma a gente já configurou nossa ideia para trabalhar com react e agora a gente vai conhecer um pouquinho a estrutura do nosso projeto antes da gente partir para os principais conceitos do react que a gente vai ver aqui agora que já é trabalhando com o código que são os componentes as propriedades a Type script dentro react como é que a gente trabalha com CSS aqui dentro e aí a Gente já vai partir direto para construção da nossa aplicação ali aí uai do Twitter né o clone do

Twitter aí utilizando react Então bora lá bora então agora conhecer a estrutura aqui do nosso projeto que foi basicamente as pastas aqui os arquivos criados quando a gente criou o projeto aqui convite né Então bora dar uma olhadinha aqui primeira coisa que é importante todo o projeto já vai script moderno vai começar sempre com o arquivo pack de Ponto Jason que é o arquivo que a gente já mostrou antes que a principal responsabilidade desse arquivo aqui é definir meta Dados importantes da aplicação ou seja informações não técnicas não não funcionais digamos assim que não tem

nada a ver com a com o funcionamento da aplicação mais que servem para definir como que o ambiente da nossa aplicação vai ser como que ela como que ela vai executar então por exemplo aqui a gente pode ver que eu Tenho alguns scripts que são formas de automatizar tarefas da minha aplicação então aqui eu tenho a nossa aplicação rodando no terminal deixa eu dar um Ctrl C para cancelar ela e aqui eu tenho os scripts deve build e preview né eu consigo executar cada um deles com npm Run e o nome Então veja que como

eu tô usando Plugin do figue aqui para Mac ele já mostra Dev build e preview né só que eu posso criar mais comandos né então se eu criar por exemplo um comando teste Por exemplo que ele vai executar Eco Oi só que o eco que eu acho que não vai funcionar no Windows tá não lembra exatamente se o Windows tem isso mas se O Executor npm runt test ó ele mostra Oi porque o eco nada mais faz do que um print ali na tela então aqui eu posso digamos é criar Ilhas né atalhos para comandos

que são muito maiores para não precisar ficar decorando aquele comando Além disso eu tenho as dependências que são Dependências de códigos terceiros né que eu tenho na minha aplicação que eu vou precisar utilizar no meu App durante o desenvolvimento e também produção e eu tenho ASF dependentes que são aquelas dependências que eu vou utilizar somente enquanto eu estou construindo o meu projeto ou seja depois que esse projeto for ao ar eu não vou precisar delas a gente pode ver que principalmente coisas como por exemplo do Type script porque Type script é uma coisa que ela

que ele Só existe enquanto eu tô desenvolvendo a minha aplicação porque depois que eu colocar meu projeto online o navegador o Chrome O Firefox eles não entendem o código Type script Então nem adianta eu colocar isso aqui como uma dependência porque vai só aumentar o tamanho da minha aplicação sendo que é algo que o browser nem suporta no final das contas o Vit aqui ó ele vai converter o nosso código de taip script totalmente pra java script então a gente não precisa se Preocupar isso e manter como uma dependência de produção em si e aí

a gente pode ver aqui alguns outros arquivos que fica todos os arquivos realmente das nossas dependências né os arquivos físicos mesmo a gente tem aqui dentro pasta Public a pasta Public são arquivos públicos geralmente a gente vai colocar nessa pasta publica aqui arquivos que eles precisam ficar publicamente visíveis na nossa aplicação algumas Imagens arquivos de fontes essas coisas assim que são essas né da aplicação é Fave com essas coisas assim a gente tem a pasta Surf que é onde vai ficar o código realmente da nossa aplicação logo a gente vai falar sobre ela e aqui

fora são só arquivos de configuração configuração do vídeo que nada mais é do que a gente colocando aqui nele um Plugin do react ou seja o vip ele suporta tanto viu o svelto qualquer outra biblioteca Então a gente tem um Plugin para cada biblioteca a configurações do Type script então tem aqui o TS config Jason e outra TS config no outro ponto Jason também não precisamos nos preocupar com isso agora a pequeslock que é um arquivo gerado automaticamente também não tem porque se preocupar nós temos Gui Knorr que é um arquivo eh de arquivos ignorados

pelo Git né quando a gente for usar um sistema de controle de versão aqui dentro hã e o index HTML que é o Arquivo principal da nossa aplicação se você já aprendeu HTML CSS tive script né provavelmente você já aprendeu você sabe que o index HTML então é aquele arquivo Inicial que a nossa aplicação abre inclusive esse aqui é realmente o arquivo principal da nossa aplicação até se eu vier no meu terminal rodar npm Run deve deixar um pouquinho aqui as minhas a fonte do meu terminal terminar o ponto integrated se eu não me engano

Deixa eu botar um 14 Aqui beleza aumentar um pouquinho porque senão não dá para ver direito mas se eu rodo um npm Run deve aqui e abro essa página aqui que a gente está vendo ela é aquele index HTML tá se eu vier aqui ó eu posso ver por exemplo que aqui está escrito aqui dentro para Twitter olha só já trocou automaticamente lá no título para Twitter e why só que uma das coisas que você pode ver aqui dentro é que dentro do bari aqui na minha Aplicação eu não tenho nada do que eu tô

vendo aqui em tela tá vendo ó 20 mais react não tá aqui em nenhum lugar ó Edite esse count nada não tá aqui no arquivo porque o react ele funciona de uma maneira um pouquinho diferente que eu já vou te explicar mas aqui o que que a gente pode ver dentro do bar e da minha aplicação eu tenho uma única dívida com e DUT e aqui o ID eu posso escolher qual eu quiser tá mas caso o vídeo ele já vem como root que Geralmente é o que a gente usa ela tá vazia veja só

não tem nada dentro dela e abaixo dela eu tenho uma importação de um script externo dentro da pasta Surf o nome do arquivo é man.tsx tsx nada mais é do que Type script daí que vem o TS mais jsx se você lembrar eu falei anteriormente rapidamente o que que era jsx que nada mais é do que já vai script mas XML que nada mais é se eu for traduzir mais facilmente HTML dentro Do Java script sempre que você ouvir a sigla J x isso aqui significa HTML dentro do Java script ou seja se eu tenho

a soma de html dentro do Java script com type script eu tenho arquivos com extensão tsx você pode ver que dentro da pasta Surf todos os arquivos aqui ó tsx ele já ficam com o ícone do react ali do lado em azul se eu abro um desses arquivos como por exemplo é meu arquivo principal aqui ó a gente vai ver que dentro dele vocês ó eu tenho essa Sintaxe que é muito semelhante HTML tá vendo é sinal de menor para abrir a tag sinal de maior para fechar a única diferença é que aqui eu não

tô utilizando tags do próprio HTML porém eu poderia se eu trocar aqui ó tirar esse App e trocar aqui botar H1 e escrever hello world salvar e voltar lá no nosso navegador olha só o que que aparece ali em tela Hello work Ou seja eu consigo escrever HTML dentro do Java script Esse é o poder ali do jsx fechou Só que vamos entender o que que tá acontecendo Então para a gente entender mais a fundo eu vou apagar todos os arquivos aqui para a gente começar do total zero eu vou pagar o app CSS eu

vou apagar o ftsx aqui eu vou botar do not Ask Me Again para ele sempre deletar já e o index CSS e a pasta acetds eu vou deixar somente esses dois arquivos nem ponto tsx evite que esse aqui a gente não mexe ele é gerado automaticamente pelo próprio Vip tá então aqui eu vou Também apagar aqui em cima essas duas importações de arquivos que eu deletei então importa app e o Import index CSS e a gente vai ficar com código bem menor aqui dentro e mais fácil da gente entender Vamos tentar entender o que que

tá acontecendo aqui por baixo veja só aqui dentro do meu index HTML Lembra que eu falei que eu tenho apenas uma dívida com IDR root se eu voltar lá no meu Google Chrome veja que agora eu removi o CSS né então já fica bem diferente se eu Apertar aqui em espectro elemento e e vir aqui na abinha do meu HTML eu vou ver que aqui eu tenho uma div Rude que é exatamente essa divide e de Root que eu tenho aqui dentro só que aqui no HTML ela não tem conteúdo nenhum mas lá no navegador

dentro dela tá aparecendo H1 Hello Word esse H1 hello world se a gente lembrar foi exatamente o que eu coloquei aqui dentro do meu bem.tsx ou seja este H1 hellower aqui ele tá sendo embutido Dentro da nossa dívida com ID Ruth aqui dentro do HTML que que tá acontecendo por baixo dos panos o que que o react está fazendo se a gente for tentar ler esse código veja o que que tá acontecendo aqui dentro Eu tô importando o react eu tô importando o react dom que eu já falei anteriormente que é basicamente a o porte

do react para funcionar na web né a integração do react com a Dom com a web e eu utilizo um método que vende dentro do macdown Chamado Create root esse método a gente vai executar ele apenas uma única vez em toda a nossa aplicação e esse método ele aceita um parâmetro que é qual elemento no HTML vai receber a nossa aplicação react vai receber o código gerado pela nossa aplicação react que no final das contas é HTML CSS e java script e veja que esse parâmetro aqui ó eu estou executando um dockment ponto get Element

but Ou seja eu estou buscando no meu documento um elemento com o ID Rute Ou Seja eu estou buscando exatamente essa dívida e dentro dela eu estou executando um método chamado render que vem do verbo renderizar que nada mais é dentro do react o verbo que a gente usa para mostrar em tela é a mesma coisa que mostrar em tela então se eu for ler isso aqui de uma maneira mais mais a portuguesada eu estou mostrando em tela dentro do meu elemento com o idhot e este conteúdo aqui nada mais é do que Um H1

com hellow World esse react aqui que tem por volta dele não é nada visual inclusive se eu remover ele ó não vai mudar nada salvei volto para lá a gente pode ver ó dá um F5 mudou nada isso aqui a gente só deixa por uma recomendação do react porque esse react mode ele vai avisar para a gente de talvez possíveis erros que a gente possa ter cometido dentro do código aqui entre este elemento né possíveis erros que a gente cometeu ali então a gente não mexe nisso E também não vai atrapalhar a gente e agora

tudo o que que eu colocar aqui dentro eu posso colocar o que eu quiser aqui dentro pode colocar uma Dive com parágrafo dentro escrito teste abaixo dela um botão Oi salve ó apareceu em tela que que acontece toda a interface da nossa aplicação a partir do momento que a gente tá usando um engoler um react um viu um swelt um sólido um Aurélia um leite cara eu posso falar milhões de bibliotecas que a gente tem Disponíveis hoje no mercado mas toda a interface da nossa aplicação ela é construída a partir do JavaScript e por mais

que isso pareça estranho isso abre inúmeras possibilidades Olha só se eu tivesse por exemplo aqui como você já aprendeu né isso e agora a gente vai ver uma das coisas do Poder do react né Se eu tivesse aqui por exemplo no meu index HTML e eu tivesse um botão e aí esse botão o conteúdo dele é criar usuário tá a gente vê ali ó que aparece também veja Que eu consigo colocar um botão aqui no HTML é claro que a gente não vai colocar porque isso aqui eu tô fugindo do react Mas eu quero só

te mostrar um exemplo bem rápido do Porque que o react é tão incrível tá veja que eu tenho um botão criar usuário e é muito comum é às vezes quando eu tô desenvolvendo uma aplicação eu o mesmo elemento eu queria que eles comporte de maneiras diferentes né então por exemplo eu quero que se a variável aqui dentro do Java script por exemplo Se ela for true eu quero que o conteúdo desse botão aqui não seja criar usuário e sim editar o usuário Então se fosse no JavaScript tradicional que a gente não tivesse o poder do

react em si a gente teria que botar um ID aqui nele sei lá Button E aí eu teria que fazer algo como if Edith igual a true Dock [Música] Button que é o ID que a gente colocou lá Dentro text igual editar usuário só e aquele tá dando erro porque ele diz que ele pode ser que ele não encontrou esse botão aqui dentro do nosso do nosso HTML Mas não tem problema vou só trocar aqui por um pontinho de exclamação só para a gente não se preocupar com isso aqui agora salve isso aqui agora e

voltando agora no meu olha lá ele já trocou para editar usuário Então olha só todo o código que eu tive Que escrever para fazer isso se for com react Olha que interessante isso aqui a gente vai tirar esse botão daqui vamos aproveitar este botão que eu já tenho aqui embaixo e dentro do react olha só a gente consegue misturar código java script com o HTML diretamente então se eu coloco Chaves aqui dentro do meu botão eu posso escrever uma operação java script Então se Edite e user então eu escrevo uma string aqui dentro editar o

usuário senão criar usuário e agora eu Salvo isso aqui tá aparecendo editar o usuário se eu volto aqui e troco para falso salvo volto criar o usuário veja que diferente né abordagem que eu tenho do react para o HTML com o JavaScript tradicional e você acabou de aprender aqui sobre algo que a gente chama dentro da programação de programação imperativa que foi o primeiro exemplo que eu mostrei aqui onde a gente teve que ditar para o código exatamente o que que precisa ser feito versus programação Declarativa onde a gente acaba tendo uma sintaxe muito menor

e bom a gente vai entrar nisso aqui mais a fundo depois não é o ponto da gente entrar aqui mas pelo menos quando alguém falar sobre programação imperativo E declarativa você já ouviu falar sobre Então essa é a grande magia por trás do react se eu tenho o meu HTML sendo gerado por dentro do JavaScript fica muito mais fácil eu manipular visualmente o que que vai aparecer em tela de que forma vai Aparecer em tela porque eu tenho acesso total a colocar JavaScript aqui no meio eu poderia simplesmente não colocar o botão inteiro se eu

não quisesse Só usando um if aqui dentro ou seja a gente tem muito mais flexibilidade show de bola a gente viu a base aqui ainda a gente vai muito mais a fundo você vai entender isso aqui com muito mais propriedade mas a gente já conheceu então a estrutura do nosso projeto aqui e agora a gente vai aprender a coisa Mais importante do react que são componentes e componentes é uma coisa que a gente já falou o que que era lá na primeiro momento que eu tava te explicando o que que é e se você lembrar

componentes nada mais são do que pequenas partes de interface reutilizáveis [Música] ou seja se eu tenho e esse é o melhor caso de uso para um componente se eu tenho alguma coisa na minha interface Que eu consigo visualizar que aquilo tá se repetindo em vários locais da aplicação com nenhuma ou poucas mudanças geralmente Isso vai ser um componente no react se a gente for traduzir isso aqui para aplicação que a gente está desenvolvendo eu posso ver por exemplo Switch que eu tenho aqui dentro a gente vai ver que cada Twitch ele é extremamente semelhante o

que muda é o texto quem publicou o Twitter porém a interface o visual disso aqui e o Funcionamento é igual para todos todos os tweets podem receber likes todos os tweets podem receber retweets todos os tweets podem receber comentário todos os tweets eu clicar nele eu quero ser redirecionado para uma página específica daquele Twitch Ou seja todos eles têm um comportamento extremamente semelhante nesse caso é o melhor momento para a gente criar um componente e o componente ele funciona assim como tags no HTML a gente pode fazer a analogia direto a Tags no HTML por

exemplo se a gente for pensar na tag Button ela representa um botão dentro do nosso HTML Porém esse botão ele pode ter comportamentos diferentes baseado em atributos que a gente passa para esse botão por exemplo se eu passar um Type summith para o meu botão eu espero eu sei que quando eu clicar nesse botão ele vai fazer um formulário Ou seja eu consigo manipular o comportamento de um botão através de atributos e a gente consegue ter esse Mesmo funcionamento dentro de componentes no react Então bora entender como é que funciona isso eu vou começar aqui

na minha pasta criando uma pasta chamada componentes e dentro eu vou criar um arquivo chamado e veja que a primeira letra sempre caixa alta quando é um componente porque é a única forma da gente conseguir diferenciar componentes de tags HTML porque as tags HTML a primeira letra aqui ó sempre é Caixa Baixa componente Veja que ele sempre tem a primeira letra caixa alta Fechou então Twitch e a extensão ponto tsx que é o que a gente está utilizando porque nós estamos usando Type script e que que é um componente lembra que eu falei são pequenas

partes de interface porém em código o que que isso é o que que isso significa um componente nada mais é do que uma função onde o nome precisa ser o mesmo nome do componente Twitch que retorna HTML retorna o código que a Gente quer reaproveitar por exemplo uma dívida um enter escrito Twitch dentro dela e agora para eu conseguir importar esse componente em outros arquivos eu preciso exportar ele daqui de dentro Então eu exporto é a única forma de eu deixar esse componente visível para que outros arquivos possam importar ele vem aqui no man por

exemplo importo com Chaves e agora eu posso aqui por exemplo deixa Eu remover o restante aqui posso dentro da minha dívida escrever como se fosse uma tag HTML Twitter deixa eu até tirar essa constante de teaser que eu não tô mais usando se eu salvo isso aqui agora olha lá apareceu Twitch em tela para que é exatamente o que está escrito aqui dentro agora o mais legal se eu tenho isso aqui várias vezes em tela veja copio e vários control vs interno em cada linha olha só que interessante salvo Olha só eu tenho vários tweets

em Tela que é o que eu tenho aqui dentro só que agora como isso aqui é um componente Olha que interessante sim em algum momento eu precisar modificar o texto modificar visualmente todos eles ao mesmo tempo basta eu vir aqui no componente Twitter porque ele está sendo reaproveitado e eu mudo o que eu quiser aqui dentro por exemplo quero botar abaixo do texto um botão de like Então escreva aqui dentro e olha que assim que eu salvar olha só já colocou o botão de Like em todos porque como eu criei um componente eu tô reaproveitando

a mesma estrutura de código várias vezes sempre que eu quiser mudar como que um tweet aparece na minha interface eu vou mudar em um único local eu não preciso me preocupar em código repetido em vários locais na minha aplicação com redundância de código em vários locais da minha aplicação Esse é o Core do componente agora como eu falei antes assim como o tags no HTML por exemplo Onde eu tenho um input ele pode ser o tipo texto que aparece o input normal posso botar um input do tipo slide não input do tipo time sei lá

ele vai abrir aqui você clica no reloginho cada atributo que eu passo para o input aqui ele pode modificar visualmente como que esse componente aparece e tudo mais noriete não é diferente a gente também pode enviar atributos Porém Aqui a gente HD propriedades sempre que eu envio um atributo para um componente a gente Chama de propriedade então propriedade é tudo que que muda visualmente ou comportamentalmente um componente então se eu for ver aqui no Twitch o que que é diferente o que que pode ser diferente de um Twitch para o outro tem o usuário por

exemplo que é quem postou o Twitch Então vamos passar uma propriedade que chamada usuário mandar aqui por exemplo Diego ele vai dar erro que não tem problema isso aqui é só por causa do Type script logo a gente resolve tá e o Conteúdo do Twitch pode ser diferente também vou começar por isso né então o conteúdo é meu primeiro Twitter veja que são dois atributos como a gente pode ter em tags HTML vou deixar apenas um Twitter aqui em tela Tá salvo isso aqui agora vou voltar aqui no meu Twitter e agora Por enquanto né

ainda continua igual a Twitch e like não tô conseguindo não tô mostrando aqui o nome do usuário e o conteúdo em nenhum local aqui na Minha aplicação agora Como que eu faço para acessar essas propriedades aqui dentro do meu componente a gente vai ver aqui em Twitch e é basicamente receber parâmetros na função basta eu receber aqui as minhas propriedades que eu chamo de props se eu der um Consul log aqui dentro do componente nessas propriedades eu vou ver que aqui no Consul já vai aparecer e user e contento que foi exatamente o que eu

mandei ele dentro então se eu quero mostrar o usuário em Tela basta Será que se eu escrever propis ponto user já vai dar certo Ixi não deu lá escrever ficou pros ponto e user não ficou o nome do usuário porque sempre que eu quero usar uma variável java script dentro do HTML eu preciso colocar ela por volta de Chaves e agora sem salvo e olha lá já mostrou Diego eu volto lá no MEI e troca o Diego por só Rodrigo salvo olha lá Rodrigo já tá ali e agora posso botar o conteúdo do Twitch também

então vou botar o nome dentro de uma tag strong e vou botar um parágrafo e dentro dela propis ponto contente que é o conteúdo do Twitter vou tirar o consolog aqui dentro salvo e olha lá Rodrigo meu primeiro Twitch e like e agora posso replicar esse Twitch mais duas vezes trocando aqui por exemplo para Diego sou a Carla vou trocar o conteúdo aqui para testando e esse aqui vai ser Hello Word salvo e olha só a gente tem três tweets Em tela agora um do Rodrigo Diego e Carla cada um com um conteúdo diferente porém

a estrutura visual deles e o funcionamento deles é igual né Isso é extremamente legal do react isso aqui é a base do react react ele se resume né Se a gente for pegar [Música] na ponta do lápis se resume a isso criar componentes né criar componentes de uma forma saudável que logo a gente vai entender e Tudo mais quando que a gente faz a criação de um componente e conseguir enviar informações entre eles existe uma propriedade aqui especial que é a propriedade Children que eu quero te falar antes da gente continuar a propriedade Children é

tudo o que que a gente passa como filho de um componente então por exemplo se dentro desse Twitch aqui ó olha só é que nesse caso aqui não tem tantas é não faz tanto sentido mas eu quero te mostrar mesmo assim mas se Dentro desse Twitch eu pudesse ó a tag tá vendo que antes eu fechava nela mesma que é o Twitch fecha nela mesmo por exemplo tags do HTML índia por exemplo elas fecham nela mesmo elas não têm conteúdo diferente de um botão por exemplo que eu posso botar o texto do botão dentro dele

então imagina que o Twitch por exemplo ao invés de passar o conteúdo do Twitch numa propriedade conta aqui eu passasse ele dentro da tag assim ó eu boto um sinal de menor fecho A tag aqui embaixo e passasse o conteúdo aqui dentro então testando deixa eu remover o conteúdo daqui e deixa eu fazer isso com os outros dois aqui também então copio o conteúdo deles tiro o contente daqui jogo para cá Que papo show perfeito agora eu salvo isso aqui agora quando eu volto lá no Twitch Claro que não vai estar mais mostrando o meu

conteúdo porque não existe mais próprio ponto porém o react ele tem essa Propriedade Nativa chamada Children que ela retorna automaticamente dentro de próprios sempre vai retornar Qual que é o conteúdo dentro da tag né então dentro do Twitter tudo que que eu passo até até que fechar aqui embaixo beleza assim a gente conheceu os conceitos mais importantes do react esses conceitos aqui você vai levar eles ao longo de todas as aplicações que você for desenvolver com daqui para frente que é Componentes propriedades e dentro de propriedades que a propriedade especial aí Nativa a única propriedade

Nativa aí a única não mas vai a principal propriedade Nativa do reak que a gente tem e agora os últimos dois conceitos antes da gente partir para construção da nossa aplicação e codar muito são os conceitos do Type script a gente vai entender para que que ele serve e como que a gente trabalha com CSS aqui dentro do react também que na Verdade essa parte aqui vai ser muito simples Porque da mesma forma que você trabalha com o CSS dentro do HTML vai mudar pouquíssimas coisas aqui dentro Então bora lá com pepscript primeira coisa que

você pode ver aqui dentro da nossa aplicação tá que que acontece imagina que você tá numa aplicação gigantesca gigantesca mesmo tá E aí daqui a pouco você tem um componente Twitch Ele não recebe só mais uma propriedade ele recebe dezenas de Propriedades e se você acha que eu tô é exagerando não tô tá existem componentes hoje que você vai pegar às vezes usar códigos de terceiros que vão receber 30 propriedades você vai ter que ficar procurando na documentação qual a propriedade você tem que enviar para aquele componente para eles comportar de uma forma diferente e

por aí vai isso acontece muito tá quando a gente não usa Type a gente vai que quando a gente faz o uso de um desses componentes por Exemplo o próprio Twitch eu escrevo aqui ó Twitch em tela e eu venho aqui e tento dar um Ctrl espaço aqui dentro ele não vai me sugerir nada né ele tá tentando sugerir umas coisas bem estranhas aqui baseado no texto aqui do meu do meu componente mas olha não sugere que eu insira a propriedade user ele não fala que existe essa propriedade user aqui no Twitter isso é porque

a gente não tá usando o Type o Type script ele é basicamente uma ferramenta de tipagem Estática para o JavaScript se você já veio de outras tecnologias como Java você já tá cansado disso Pega até nas versões mais recentes tem isso também mas você já tá cansado disso que página estática nada mais é do que um mecanismo para evitar erros enquanto a gente está desenvolvendo o nosso App digo como assim evitar erros detectar erros olha só o que que aconteceria se eu pegasse aqui o Twitch por exemplo e Não enviasse um usuário enviasse só o

conteúdo por exemplo conteúdo 4 e salvasse aqui a minha aplicação tá ali conteúdo 4 só que não tem usuário eu deveria permitir o usuário escrever um Twitter sem passar Qual que é o usuário que tu Na minha opinião não faz sentido porque quem intuitou deveria ser uma propriedade obrigatória ou seja isso aqui é um erro só que nenhum momento no vscold tá apontando erro concorda Para comigo não tem erro nenhum Tá lindo tá funcionando só que agora vem a mágica do Type script se aqui no Twitter eu falar exatamente quais propriedades eu tô esperando aqui

Quais delas são obrigatórias e quais não são o meu vs code a minha ideia aqui fica muito mais esperta por causa do Type script Então olha só aqui em cima eu vou criar uma interface chamada ou seja as propriedades do meu componente Twitch e eu vou falar que o Meu Twitter Obrigatoriamente precisa receber um user esse user precisa ser um texto ou seja uma string e eu preciso receber também a propriedade que também precisa ser uma string salvo venho aqui agora do lado nas minhas próprias e boto dois pontos tweetprops Ou seja eu tô falando

que as propriedades que eu passar para esse Twitch precisam seguir Obrigatoriamente este formato aqui em cima ou seja um objeto com duas propriedades user e Children ambas obrigatórias sendo Strings se alguma delas não fosse obrigatórias eu teria que colocar o ponto de interrogação aqui antes do dois pontos mas já te mostro isso salvando aqui agora e voltando lá para o bem olha só já deu erro já começou dar erro porque ele fala que a propriedade user está faltando Mas ela é obrigatória nas minhas Twitch props ou seja veja que eu evitei um erro antes de

colocar o meu projeto em produção Sabendo desse erro eu posso vir aqui e botar olha e user é Diego e aí ele já para automaticamente de dar erro então o script ele é isso ele não é uma ferramenta que vai vai mudar muito o seu código mas ele vai evitar que você Cometa erros bobos enquanto você tá desenvolvendo a sua aplicação principalmente Esses errinhos de cara esqueci de enviar uma informação que era obrigatória ou enviei uma informação que era para ser um texto Enviei Sei lá eu enviei aqui eu consegui enviar números no react botando

Chaves também olha só enviei um número no lugar e ele já avisa aqui olha só Type Number que foi o que a gente enviou o número não é ao tipo string ou seja não é não é a mesma coisa número Sting não é a mesma coisa então Ele pede para eu arrumar Olha só e volto e agora já deu certo se eu esqueço de enviar o conteúdo do Twitch que eu falei que é obrigatório só o tiller eu falei que é obrigatório o Senhor vem aqui tentando fazer isso aqui ó dá erro também ele não

deixa ele fala Children está faltando mas é obrigatório Olha só show de bola né mas eu consigo criar o propriedades opcionais também Então imagina que eu receba o número de likes aqui que é um número e aí eu mostro esse número de likes aqui no botão depois do like boto Chaves é proppis se eu salvar isso aqui agora ele não vai mostrar nada lá dentro porque nenhum Tweet aqui tá enviando ó e todos eles estão dando erro porque eu não falei que isso aqui era opcional se eu boto ponto de interrogação opcional já não dá

mais erro Só que ainda não tem nada mostrando E aí eu posso fazer o seguinte aqui dentro se props.likes não existir eu posso mostrar Zero no lugar salvo e olha lá já mostrou zero porém se eu volto aqui no Men e agora em algum desses Twitch aqui eu passo o número de likes 10 por exemplo Como é o número Precisa ter Chaves por volta salvo ele mostra 10 nos outros que eu não informei ele continua mostrando zero Então cara a gente viu as coisas mais importantes aqui do react já entendemos como que o Type script

funciona dentro do react e agora a gente vai para nossa última parte fundamental de fundamentos aqui importantes do react antes da gente continuar para o desenvolvimento da nossa aplicação que é como que a gente trabalha com CSS dentro do react e Praticamente não muda nada a gente pode criar um arquivo CSS por exemplo a global.cs eu vou criar aqui dentro e aqui eu venho por exemplo no baile da minha aplicação falo que a cor de fundo é 12 12 14 e que a cor do texto é E1 E1 é 6 tá isso aqui eu decorei

já essas cores porque a gente usa muito na Rocket essas cores para a cor de fundo e cor de texto respectivamente se eu salvo isso aqui agora e eu venho dentro do meu bem.tsx e importo o arquivo CSS daqui de Dentro veja que automaticamente já deu certo o fundo da minha aplicação já tá quase preto e o texto ali tá um cinza bem clarinho Ou seja no react eu sempre vou fazer as importações de arquivos CSS por dentro do próprio arquivo já vai script E aí se você lembrar dos ensinamentos que a gente teve aqui

existe uma ferramenta que vai converter esse CSS vai jogar esse CSS para dentro do meu HTML que é o nosso os nossos aqui ó Compailers e banners eles vão fazer o papel de entender que eu importei um arquivo que não é um java script e vai converter isso aqui para uma importação do CSS a gente pode ver que no final das contas ao Senhor inspecionar o código aqui lá dentro do meu head vai estar o meu Style aqui dentro Olha só o bário background então no final das contas ele só pega e joga esse conteúdo

que tem aqui para dentro do Head da minha aplicação né então ele faz isso de forma Automática e a gente não precisa se preocupar né então CSS é basicamente isso o que que vai mudar de CSS dentro do react primeira coisa muda a forma que a gente coloca classes ao invés da gente simplesmente botar classe Twitch a gente não escreve classe veja que ele até dá erro a gente usa Class name porque classe como a gente está escrevendo HTML dentro do Java script Class é uma palavra reservada do Java Script usada na pra gente criar

classes né classes aí da orientação a objeto Então nesse caso a gente usa classe name que é a mesma coisa que uma classe no CSS salvando esse aqui agora eu posso voltar no Globo botar o Twitch por exemplo botar aqui só pede de 16 pixels e uma borda um pixel sódio Olha só vou salvar Pronto ele já criou ali Vou botar aqui uma margem de 12 pixels também ó ele já criou ali a estilização para cada um dos meus tweets que eu tenho ali em Tela outra coisa que muda também é quando eu vou querer

adicionar algum estilo que seja então no HTML a gente pode vir aqui por exemplo e escrever Style boto aspas duplas e escreva aqui algum estilo sei lá border radios 8 pixels no react a gente não faz isso olha até da erro como que a gente faz no react no react eu preciso vou criar por exemplo aqui uma variável chamada a tweet Styles ela vai ser um objeto e eu escrevo os Meus estilos num formato de objeto java script então por exemplo se eu quero escrever isso aqui ó border radios 8 pixels eu vou escrever borders

Com r maiúsculo e sem hífen ou seja sempre que tiver um hífen a gente troca pela próxima letra com maiúscula dois pontos e aqui eu posso ao invés de botar oito PX apenas 8 ele vai entender e aqui no meu Style eu venho boto sinal as chaves né porque eu quero incluir uma variável já vem escrito aqui dentro e Jogo os meus estilos ali dentro salvo volto lá e a gente vai ver que os tweets agora já estão com a bordinha arredondada por que que eu criei uma variável separada aqui não escrevi diretamente aqui dentro

porque isso é uma das coisas que confunde muita gente que está iniciando no react que é o seguinte a chave que eu coloquei aqui ó essas chaves que eu coloquei aqui é porque eu quero colocar um código já vai escrito Aqui dentro e esse código de Java escrito pode ser qualquer coisa eu posso colocar aqui um IFF né se eu quiser posso botar nulo posso botar underfire posso botar true é claro que aqui nesse caso não faz sentido né Se eu pegar e jogar um objeto aqui dentro da Chaves Olha só eu copiei aqui é

o valor do Twitter Styles e vou jogar aqui dentro control V e tiro aqui a declaração da variável veja que não dá erro funciona normal Tudo funcionando porém muita gente se perde porque agora ficou duas Chaves tá vendo ó duas Chaves na abertura e duas na saída mas é porque se a gente for lembrar a primeira vez que eu abri e fechei Chaves é para indicar que eu quero jogar um código de Java script aqui dentro a segunda chave que eu tenho aqui dentro é porque isso aqui é um objeto e todo objeto no JavaScript

ele é ele tem um prefixo e um sufixo de uma chave né ele começa e termina com chave Então aqui eu posso até deixar tudo na mesma linha para facilitar Então sempre que a gente for que a gente vê isso é porque eu tô declarando um objeto aqui dentro né e a gente pode ver que tá tudo funcional e o mais legal da gente colocar o objeto aqui diretamente é que tem também um Telecine aqui dentro ó se eu dou um contra o espaço ele mostra todas as propriedades que eu posso colocar do CSS olha

só que interessante Então a gente não precisa ter medo de Errar se eu escrever aqui ó border com vários erres olha só ele já deu erro ele fala que isso aqui não existe né então se eu arrumar aqui ó Pronto já para de dar erro show de bola a gente aprendeu toda a parte fundamental né de fundamentos é importantes do react e agora a gente vai partir para a parte de código mesmo mão na massa para a gente fazer a construção na nossa aplicação daqui para frente então a gente vai botar mão na massa em

Construir esta aplicação aqui com todos os conceitos que a gente aprendeu até agora e claro alguns conceitos novos que a gente ainda precisa aprender dentro do react para fazer essa interface também ter vida né Para ela não ser apenas visual e não ter qualquer tipo de interação com usuário Então bora acordar bora então continuar nossa aplicação e a primeira coisa que a gente vai fazer aqui na nossa aplicação é a estrutura visual da home page Então até dando uma Olhada aqui no figma o que a gente vai construir então é basicamente esta primeira página aqui

que é a nossa Roma a gente não vai se preocupar em nada da segunda página ainda a gente vai simplesmente escrever o HTML e CSS necessário para construir esta página aqui e assim que ela tiver construída a gente vai entender como que a gente vai separar cada partezinha aqui dessa aplicação em Componentes menores para depois a gente ir para as próximas Partes Então bora lá deixa eu abrir meu Houve aqui agora o componente a gente pode deixar ele ali mais para frente ele vai existir mas por enquanto eu não vou mexer nele aqui no Man

então teste isso o que que eu vou fazer eu vou tirar todos os comentários vou tirar também o que existe aqui que a gente tinha colocado dentro do Street mode vou basicamente deixar Nossa aplicação é dessa forma tirar importação aqui do Componente Twitter e aqui no global CSS vou tirar também essa estilização aqui no Twitter para a gente começar do total zero aqui no Globo eu vou começar da maneira que eu mais gosto que é resetando o CSS então tirando margem perdem e colocando também Box sizen Box é em todos os elementos para que o

pedem não altere ao elemento aqui no Bari eu vou colocar a cor de texto por padrão sendo 0f 1419 e também vou colocar uma opção aqui Dentro chamada de traço é web kit traço Font traço Smurf Isso aqui é uma opção basicamente para navegadores baseados no Chrome como Brave ou o próprio Chrome ou Ed também onde ele deixa a fonte mais detalhada mais nítida eu gosto de usar essa opção vou também aqui pegar em todos os botões vou colocar curso e todos as âncoras eu vou colocar basicamente isso que eu vou colocar Além disso vou

criar aqui um dois pontos Rute Para eu declarar uma variável CSS que é a traço traço Twitter Blue então eu vou criar uma variável aqui dentro que é a cor que a gente vai usar do azul do Twitter então um D A1 F2 ele vai ter esse azulzinho aqui do Twitter e a única cor que eu vou usar em variável se você quiser criar mais variáveis depois fica à vontade outra coisa que eu vou usar nessa aplicação é que eu vou usar uma fonte customizada até se a gente achar entrar Aqui no Fontes Google a

gente vai ver que o Google Ele oferece gratuitamente várias fontes para a gente utilizar aqui eu vou utilizar aqui a mais famosa delas é a robô então clicando aqui em robô a gente vai ver que ela tem vários tamanhos a gente não precisa carregar todos porque senão Nossa aplicação fica mais pesada você pode vir aqui clicando em select nos tamanhos 400 o meu já tá selecionado aqui 500 e com ele para não pegar o Itálico tá tem que ser o tamanho o regular mesmo não Itálico então regular 400 mídia 500 bold 700 e Black 900

já vai ficar os quatro selecionados aqui na direita e aí você vai copiar este link aqui vai no seu indexponto HTML e vai simplesmente jogar a importação aqui dentro arruma só aqui ó Tab certinho e aí uma dica só pegar esses dois links pré-conectar aqui ó e Bota eles antes de tudo Tá menos do meta sharsete aqui porque o quanto ele antes eles forem Chamados antes vai se criando uma pré-conexão com servidor da Google para que a fonte seja carregada mais rapidamente aqui também eu vou remover esse link do favicon e vou deletar na pasta

publica também o 20.svg que é o nosso fávicon show de bola e pronto aqui agora o que que eu vou fazer também eu vou pegar meu Body o meu input o meu text área e o meu botão e eu vou definir que a fonte deles por padrão Vai usar o tamanho 400 que é o regoler tamanho um Rem robô se a fonte robô tu não for carregada aí ele usa qualquer fonte sem serifa eu apliquei isso nesses quatro elementos porque por padrão inputy e acha até que outros elementos também eles não herdam a fonte para

o padrão do bar então aplica em todos eles ao mesmo tempo e aqui eu tô usando uma medida relativa caso você não conheça né O Reino ele é basicamente a representação é do food Size da tela Então por padrão o tamanho de fonte da nossa da nossa aplicação sempre vai ser 16 pixels esse aqui é o padrão dos browsers e um ham então equivale sempre a 16 pixels porém usando o tamanho relativo e não o tamanho fixo diretamente né se eu poderia botar aqui 16 pixels mas usar ham permite que o usuário consiga nas configurações

de acessibilidade do sistema aumentar e diminuir o texto e isso vai refletir também nos lugares que A gente está utilizando a medida renda se a gente botar 16 pixels Não interessa se o usuário mental de meio texto nas configurações de acessibilidade do sistema não vai refletir no nosso site O que é extremamente ruim né Então sempre que possível usa um usa unidades em renda e aqui a gente vai entender então que um Hand sempre é 16 pixels se eu quiser chegar no valor por exemplo de quatro pixels eu boto 0.25 renda né que vai chegar

em 4 pixels se eu quero 32 eu Boto dois Remo que vai chegar entre 32 pixels por aí vai eu sempre vou fazendo essa conversão na cabeça mesmo só dividir por quatro ali sempre ele vai ficar da gente entender [Música] show de bola com o arquivo Global CSS já configurado a gente vai começar agora a colocar em tela aqui a parte visual da nossa aplicação Tá eu vou começar criando aqui uma É e vou botar nela um Class name aqui por volta de tudo chamado de layout que ela vai fazer exatamente essa vai ter essa

responsabilidade de construir o layout da aplicação né de ficar por volta de toda a nossa aplicação E aí dentro dela eu vou ter a minha sidebar que eu vou usar aqui um Side né que a tag do HTML que representa sidebar botar o nome nela de uma classe de sidebar mesmo então que vai ser a dica que fica por volta dessa parte aqui e agora aqui É a parte do conteúdo em sim então vou criar uma dívida conta veja que ele já usou Eu usei o m ali né então escrevo contente e dou um enter

ele já cria automaticamente para mim caso você tenha colocado essas configurações aqui ó senão ele não vai criar Tá mas beleza e aqui dentro eu vou ter aí o restante do meu conteúdo por enquanto eu vou deixar essa divcomte aqui sem nada vou trabalhar mais na minha sidebar por enquanto e depois No restante Mas vamos já começar a estilizar aqui o nosso layout então aqui no Globo eu vou colocar aqui só um comentáriozinho para ficar separado vou escrever aqui page editando botar aqui timeline para ficar mais fácil timeline primeira página da minha aplicação então ali

dentro Eu tenho layout e sai de bar e contente né são as três containers que eu tenho até agora dentro Da minha aplicação no layout aqui que que eu vou fazer Tá eu vou botar nele aqui que ele tem margem zero alto porque porque eu quero que conforme a minha tela cresça muito o layout sempre fica Centralizado E aí vou colocar um maxwelt de mil pixels né então tudo que eu botar ali dentro da minha aplicação deixa eu até botar Um textinho aqui dentro ó sai de bar e aqui contente para a gente já começar

a visualizar isso aqui né então se eu Volto aqui ó na minha aplicação a gente vai ver que ela tá Centralizado né então ó ela fica já com mil Pixel de largura no máximo Além disso vou botar aqui nela um display Grid e o meu template vai ser o seguinte 300 pixels porque a sidebar eu quero que tenha 300 pixels E o restante quero que tenha um tamanho flexível então prontinho já dá para ver ele agora na nossa na nossa deixa eu ver dá uma olhadinha aqui rapidinho que eu não quero me Perder aqui tá

no nosso conteúdo aqui eu vou colocar nele um border left um pixel Solid com a cor EB e ef0 e vou botar também border right porque se a gente for ver lá na nossa aplicação ela tem essa aqui quase não deu para ver ele mas tem a bordinha aqui deixa dar um zoom do lado content e uma que fecha lá no final tá a gente vai fazer ele ocupar a tela toda aqui já vai dar para entender como é que vai ficar isso aqui mas é basicamente Essa bordinha que fica aqui ó aqui ela vai

tendo outro lado também caso a tela seja maior né Beleza vamos lá continuando aqui com o nosso layout na nossa sidebar eu vou começar colocando nela aqui um pele de 1.5 que vai ser em cima embaixo de 24 pixels e um ponto 25 nas laterais que é 20 pixels então é basicamente Como se eu tivesse botando 24 e 20 pixels porém usando medidas relativas nela que também Vou botar um display Flex flexion por que que eu coloquei isso porque aqui na minha sidebar todos os elementos eles estão um abaixo do outro e eu tenho o

meu logo que ele vai ser aqui a parte do Topo né do da minha série bar eu tenho o meu menu abaixo que eu posso ver que a distância entre eles é de 32 pixels e abaixo do meu menu tem o botão que também tem a distância de 32 pixels por isso o GAP de dois Remo que significa 32 Pixels lá dentro da nossa sidebar então como eu bem falei eu vou ter a minha imagem que vai ser o logo né que eu vou deixar um Outlook por enquanto a gente ainda não tem a imagem

abaixo dela eu vou ter o meu menu e abaixo do menu eu vou ter um botão chamado Twitch né com o texto Twitter se eu volto aqui no Chrome a gente já pode começar né já dá para quase visualizar o layout ali dentro porém vamos lá a gente precisa do nosso logo né então aqui Dentro do Sigma no layout que você duplicou você pode vir aqui ó clica na sidebar agora aqui na esquerda você procura pela opção dar o primeiro primeira primeiro item que vem aqui dentro da sidebar que é o nosso logo na direita

ou melhor nem precisar na direita clica o botão direito em cima dele copy e vem em copy SBD eu quero copiar ele como um vetor para eu botar dentro do meu navegador então agora aqui dentro de Surf a gente vai criar uma pastinha chamada acets dentro eu vou criar a logo traço Twitter svg e vou colocar o svg que eu copiei lá de dentro do firma e agora outra coisa interessante além da gente importar os arquivos CSS por dentro do Java script a gente importa também as imagens por dentro do Java script Então vou importar

vou chamar aqui de Twitter logo from ponto barra ETs twitter.svg que é o nome da Imagem e Agora para eu usar essa variável Twitter logo ali no source da minha imagem basta eu utilizar Chaves porque ela é uma variável java script certo salvo volto lá para o navegador e a gente vai ver que a logo já tá lá dentro Claro Ainda temos que ajustar um pouquinho o CSS ali dela para ficar bem maneiro Então agora que que eu vou fazer aqui na nossa imagem vou botar nela uma classe name chamada logo e aqui no meu

Globo eu vou utilizar sidebar 32 pixels de altura e largura salvo Pronto já ficou certinho lá eu tô com um pouquinho de zoom aqui para ser mais fácil você visualizar mas a aplicação na verdade ela tá ficando assim show agora a gente vai colocar algumas coisas aqui dentro ou bora fazer esse botão aqui já de tuitar que é mais fácil então vou colocar também uma classe nele vou chamar de New Twitch Vou colocar aqui nele o HTML ficar um pouquinho mais bonito e Vamos lá a gente vai pegar aqui sidebar este carinha aí e aqui

a gente vai basicamente colocar todo CSS do botão Então vou botar nele um background usando uma variável Twitter Blue que foi a variável que a gente declarou aqui em cima então a cor azul do Twitter ali de fundo Vamos colocar também um borders 999 Pixel fica claro que ele fique sempre arredondado um pé de um ré um display Flex Just Fighter Center para que o texto sempre fique alinhado ao centro do botão verticalmente horizontalmente na verdade 100% para ele ocupar sempre a largura máxima ali a cor do texto Dentro do botão Branca então Color o

tamanho do texto do botão é 20 pixels 900 porque eu quero que ele tenha aquele bem mesmo é o black e border zero para tirar a borda que vem automaticamente em todos os botões ali do HTML salvo voltamos lá ao Chrome e Olha só o nosso botão de Twitter já tá ali dentro caso eu queira dar um efeito de Hover nele né então eu posso começar a botar aqui over eu boto por exemplo eu posso ou trocar a cor de fundo ou usando aí um Hack que eu gosto muito no CSS aplicar um filtro e

aí eu boto por exemplo briteness diminuindo aí a luminosidade do botão em 5%, então vai ficar com 95% do luminosidade o que faz com que ele Diminua ó bem pouquinho diminuir mais 0.9 diminui a luminosidade todo o botão né então tanto texto quando quanto o fundo fica um efeito de Hover bem legal né Acho que já tá ótimo para a gente continuar e agora vamos para o nosso menu aqui na nossa sidebar então aqui dentro do o que eu vou fazer é vou colocar uma classe name nisso aqui eu vou chamar de Man navigation e

dentro eu vou ter vários links que vão ser vários âncoras né E aqui dentro desses links eu Vou ter cada um daqueles textos que eu tenho ali home Explorer Messenger Então vamos lá home deixa eu replicar isso aqui várias vezes e vamos colocando aí ó Explorer notifications s profile e more seu salve isso aqui agora e volto ainda não ficou tão legal né mas a gente já vai começar a adicionar alguns CSS aqui para começar a melhorar isso aqui Então abaixo aqui do sidebar a gente vai começar estilizar o nosso bem navigation aqui eu não

vou preciso botar Side barman navigation como a gente tem a classe direto no meio navigation vou direto estilizar o Man navigation colum né porque os itens do menu tão um abaixo do outro e GAP de dois ham porque os itens do menu também estão distanciados em 32 pixels Além disso eu vou pegar cada Âncora que tá ali dentro do nosso Man navigation vou botar nela Um display flaks Center por que que eu botei esses dois Porque a gente vai ter aqui dentro um ícone e o texto por enquanto não tenho ícone né mas eu quero

que esteja um ao lado do outro Centralizado verticalmente por isso Center e eu quero que haja um espaçamento entre eles de 20 pixels por isso GAP também de 1.25 renda Vou colocar aqui agora Fontes size um ponto 25 também Opa Também não né também que vai ser 20 pixels de tamanho de fonte o Front White aqui vai ser 700 e vou colocar um Tex declaration nono que pro padrão todas as âncoras possuem aquele sublinhado né Vou salvar e a gente já vai ver que tá ficando ó bem legal porém falta os nossos ícones para ícones

né Eu claro que eu posso exportar cada svg separadamente ali cada ícone e tal mas geralmente nas aplicações Frontier de mais modernas a gente costuma utilizar bibliotecas de ícones e Existem várias tá desculpa Desculpa Existem várias tá só que a Biblioteca que eu tô gostando muito de utilizar recentemente é o fosfore icans o fósforo é uma biblioteca com uma que mais de 6.000 ícones para você utilizar então aqui você pode explorar todos eles eles têm ele também tem vários tamanhos de peso né Então olha só eu consigo um pouquinho maior fio que é basicamente preenchido

do Outono que são dois tons de cores Então olha só muita coisa legal Pra gente trabalhar e o mais massa dessa biblioteca é se eu clicar aqui em github ela tem integração Nativa digamos assim tanto com o código HTML CSS é puro sem qualquer tipo de biblioteca framer qualquer coisa assim mas aqui embaixo Ó tem o react basta eu instalar aqui eu vou dividir meu terminal em dois ó veja basta eu instalar fosfour traço Se não me engano é esse aqui o nome não escrevi errado Ah faltou um hóspero aqui tem um h também Agora

sim traz [Música] e agora eu posso importar todos os ícones dessa biblioteca como componentes então se eu dou um controle espaço aqui ó não importa olha só ele traz todos os ícones porém aqui dentro eles vão ser como se fossem componentes no react então por exemplo eu posso importar o ícone House na verdade que é a casinha E aí aqui dentro no Home vou dar um enter e vou colocar aqui ó como se fosse um componente react Olha só house se eu volto lá no Chrome Olha que interessante já mostrou uma casinha ali e agora

claro eu preciso estilizar preciso fazer tudo isso mas é muito massa porque aqui eu dou um espelho elemento ele vai ser mais feijão no final das contas Olha só então a gente não perde nada de performance né fica super legal então aqui no meu CSS No meio navegation Tá eu vou utilizar o svg e vou botar William Então olha só a casinha agora já tá maiorzinha ali só que se a gente pode ver no layout aqui ó eu quero que ela esteja preenchida e com a corzinha azul né então o que que eu vou fazer

nesse aqui na nossa na nossa tava dando uma olhadinha na minha cola aqui mas aqui nesse primeiro aqui nesse House ele tem uma propriedade chamada Wait que eu posso passar vários tamanhos aqui ó bold para ele ficar mais do Outono eu vou selecionar a opção seu que basicamente a casinha vai ficar preenchida ali agora e agora se eu for aqui nesse primeiro link colocar nele uma classe name por exemplo Active porque eu quero diferenciar somente esse né para falar que ele tá ativo digamos assim e aqui é hostilizar a classe Active falando que agora a

cor vai ser var Twitter Blue se eu salvar isso aqui Voltar lá no Chrome Olha só já tá lá o home agora tá azulzinho e agora falta a gente colocar os demais ícones aqui dentro da nossa aplicação e aqui o vscol é muito legal porque ele como ele tem essa integração muito próxima com o ambiente do JavaScript Type script react ele consegue fazer importações de forma automática Então olha só por exemplo eu sei que dentro do pacote fosfour ikons existe um ícone que se chama hash que ele vai fazer aquela Hashtag se eu começar a

escrever aqui ó menor e escrever hash ele já diz que existe ó o hash dentro da biblioteca fosfour se eu clico em cima lá em cima ele já colocou a importação para mim e agora basta eu vir aqui ó e fechar a tag eu vou fazer isso com os demais aqui então deixa eu selecionar todos contra o d aqui vou selecionando todos eles vou dar um enter seguro option aqui do Mac no Windows É acho que tem que ser contra Também não sei então que enter shift Tab pronto e agora eu vou colocando em cada

um deles esse aqui o ícone vai ser Bel então entra aqui ó ele faz a importação aqui esse aqui vai ser envelope Dom enter sempre para ele fazer importação esse aqui vai ser book Mark aqui no leste vai ser filete nesse aqui vai ser no profile todos vindo do Foster vai ser dotz que ele fez todas as importações para Gente automaticamente lá em cima se eu salvo isso aqui e volto para o Chrome Olha lá Nossa sidebar já tá pronta com todos os ícones ali dentro então dando uma aqui no nosso Road map né a

gente criou o layout da aplicação a gente criou a nossa sidepar e agora a gente precisa ir para timeline onde a gente vai ter a parte do nosso novo Twitch e também a listagem de Twitch aqui do figa né então a gente vai para essa parte aqui agora construir a parte da direita Aqui do nosso layout Então bora lá continuar que ainda tem bastante coisa pela frente bora então para nossa timeline aqui né Vamos começar eu vou aqui ó dar um folder nessa parte da sidebar para não atrapalhar a gente e aqui dentro de conta

é onde eu vou colocar a nossa timeline eu vou começar colocando aqui uma tag Man e com uma classe nela chamada timeline Dentro dela eu vou ter aquele meu cabeçalho que é aquela parte lá em cima aqui onde está escrito home e tem esse íconezinho Então vou começar com ele este cabeçalho ele vai ser basicamente uma de Class name time reder dentro eu vou escrever home e vou ter um ícone que eu vou chamar que vai ser o ícone chamado sparkle veja que ele já dá até a opção de importar aqui do Foster abaixo dessa

dívida aqui que é a nossa Aquele nosso cabeçalho lá em cima eu vou ter o nosso formulário para criar um novo Twitch então aqui eu vou tirar essa Action por enquanto e a classe name dele vai ser new aqui dentro do forme eu vou ter uma Label e veja que aqui outro ponto Lembra que eu falei que não estava escrito a gente não usa Classe A gente usa classe nem existem Só existe mais um outro caso onde isso acontece onde um nome é de um atributo no HTML muda que é Na Label a gente não

usa na Label o for a gente usa o HTML fora porque for também é uma palavra reservada script né pra gente fazer laço de repetição então aqui a gente usa HTML for tá E aqui eu vou dar o nome do meu campo seria a Twitter só dentro da leibol eu vou colocar a nossa imagens aqui que precisa aqui ó do Avatar do usuário que tá logado E aí eu vou usar um hackzinho aqui que eu não sei se você conhecia se você já tiver Conta no githubs se não tiver altamente recomendo que crie mas se

você já tiver se você escrever que tiver ponto com barra o nome do seu usuário lá no meu caso é Diego 3G tá vendo ó esse aqui é o meu usuário nunca tive se eu botar ponto png no final olha só ele retorna a minha imagem de perfil então aqui ó eu vou colocar a nossa imagem e dentro de surf eu vou botar [Música] https://guithub.com/dgo 3g.png você pode Usar o seu usuário Aí caso prefira se você não tiver Diego 3G também que é o meu usuário aqui no texto alternativo Diego Fernandes e aqui eu vou

ter a nossa a Tex posso fechar a tag nela mesmo aqui ó e aqui nela vou passar alguns Campos ID Twitch o ID aqui tem que ser o mesmo que o Label como ela está dentro da Label nem precisaria Tá mas vou deixar aí não tem problema a place holder Vou colocar aqui whats O que que tá acontecendo eu vou estar em inglês mesmo você pode colocar em português caso prefira e é isso essa aqui e abaixo da Label eu vou botar um botão do tipo summith fechou Cuidado para os elementos aqui HTML ficarem certinhos

né a Label abaixo dela o botão dentro dela e meditex area E aí por último aqui abaixo do forme depois a gente vai ter o restante da timeline Mas vamos por partes para a gente também não acelerar demais vamos Voltar aqui no nosso Global CSS lá embaixo a gente tinha o contente e vamos seguir aqui para o CSS da nossa timeline tá então eu vou começar deixa eu ver certinho aqui eu vou começar eu vou começar com [Música] o CSS daquele nosso cabeçalho lá eu até criei aqui uma Men com uma classe timeline mas ela

não vai precisar nenhuma estilização por isso eu vou direto prestar aqui que a gente tem tá Então vou criar aqui ó é ponto timeline a gente vai começar colocando aqui uma estilização vai ser bem simples tá pedem 1.5 han em cima embaixo né 24 pixels dá um ponto 25 nas laterais display flaks Center Space Betim porque eu quero que um é o texto home fica totalmente para a esquerda e o ícone totalmente para direita a fonte size um ponto 2500 e border botom um pixel sódico e b E f0 e aqui eu vou também estilizar

o svg que é o ícone que tá dentro desse timeline 24 pixels High um ponto 5 Remo também e a cor do ícone eu quero que seja vor traço Twitter Blue que é aquele azul que a gente vai usar em vários locais e voltando aqui no nosso Chrome Já podemos ver que o nosso a home já tá lá em cima Heather Zinho certinho o formulário que ainda tá uma bagunça que só que a gente vai começar a resolver isso aí agora Então bora para o formulário agora New Twitter Vou botar aqui nele também novamente pede

um ponto 5 a gente vai ver que isso aqui eu vou colocar quase em todos tá display flaks Direction porque o formulário aqui ó ele tem essa parte ele tem essa parte aqui de cima e o botão tá embaixo Por isso que o Colón né então ele vai botar uma baixo aqui do Outro e aqui também eu vou botar um GAP de 0.5 que é 8 pixels para ele distanciar o botão um pouquinho ali da parte de cima que é onde está textureia e o nosso o nosso Avatar Então vou pegar essa Label lembra o

que tá por fora da Imagem e do Tex vou botar nela também um display Flex e vou botar um GAP de 0.75 que dá 12 pixels para distanciar um pouquinho os dois e agora eu vou estilizar A nossa imagem que está dentro da Label e vou colocar na imagem de trade de três Rem e um border radios de 999 pixels que é basicamente para ela ficar totalmente arredondada a gente pode voltar lá no navegador e a gente vai ver Opa já deu para dar uma melhorada aqui né ah vamos continuar né a gente tem agora

aqui também dentro da nossa Label a nossa Tex area que a gente vai usar nela um Flex 1 porque eu quero aquela ocupe o Todo o espaço é disponível poderia trocar aqui Por também se caso não queira botar um Flex 1 poderia ter trocado aqui para um display grade por exemplo mas eu acho que não tem problema tá ótimo assim um border zero pra tirar a borda que vem por padrão na text área fonte size um ponto 25 hem front wait 500 aqui eu preciso dele um pouquinho maior Então a gente tem tamanho 400 500

7900 vou botar 500 que é um pouquinho mais que o que o recolor e aqui eu vou dar uma margem top 0.75 só para não ficar tão colada no topo se a gente for ver no Twitter Ela não fica colada no topo ali e aqui eu vou dar um size não para que não seja possível redimensionar e que não bote aquele íconezinho ali no canto da Tex mostrando que ela é redimensioável né salvar show já tá ali só que se eu clico nela ela fica com esse foco por volta aqui que não é tão legal

então eu vou fazer o seguinte quando ela tiver em focos eu Vou tirar o outline que vem pro padrão do navegador Pronto agora clico nela já não tá mais ali show para finalizar aqui eu vou também estilizar da nossa tect area a cor do Place holder então bota aqui ó dois pontos dois pontos Play holder e a cor vai ser hashtag 5b 70 83 show já tá ali a cor é um cinza puxado para o azul digamos assim por último dentro do nosso New Twitter form faltou o nosso botão só tenho um botão lá dentro

mas caso eu quisesse Selecionar o botão de posso botar aqui colchetes por exemplo não precisaria botar uma classe nele né então eu quero estilizar somente o botão que o tipo for summith e aqui tem um hackzinho no CSS quando eu boto margem em alguma das laterais como sendo alto ele vai automaticamente jogar é toda a margem possível para a esquerda desse elemento e automaticamente o elemento vai pra direita Então olha só se não tivesse isso olha ocupa tudo se eu boto margenet Alto ele vai totalmente lá pra direita né ele bota uma margem left digamos

o máximo possível Vou botar aqui nele um background vai Twitter a border radios 9999 pixels Vou botar aqui um Perin 0.75 [Música] nas laterais a cor do texto FF fontes e border 0 para tirar aquela borda que vem por padrão no input vou também Aproveitar duplicar isso aqui e fazer um estilo aqui para o Hover do botão que vai ser o mesmo daquele outro botão eu vou basicamente aplicar um filtro britness 0.9 aqui nele salve olha só que legal nosso botão de Twitter já tá ali dentro passa o mouse ele já fica escurinho posso digitar

aqui dentro já tá bem legal a nossa interface ainda falta uma parte da interface aqui embaixo primeira coisa que eu vou fazer é esse separadorzinho aqui ó também Nessa dívida aqui que ela serve só para separar o fone do restante dos tweets aqui dentro então eu vou basicamente criar aqui ó na nossa timeline abaixo do formulário vou criar uma dívida com uma classe chamada e ela pode fechar nela mesmo ela nem vai ter conteúdo vai ser só isso aqui mesmo Vem aqui no meu Globo CSS criou aqui uns que vai ser a nossa essa de

vizinha e ela vai ter Simplesmente um background f7f9fa border top0 já encontrou aqui do outro lugar que eu usei mesma coisa para o border botton e aqui eu vou dar um right de 0.75 nela que é 12 pixels de altura veja que eu volto agora no Chrome já tá ali pronto separadorzinho e agora a gente tem os nossos tweets aqui embaixo para a gente continuar criando na nossa timeline e agora a gente tá investindo Bastante tempo aqui na parte de CSS HTML mas Calma que logo tudo isso vai fazer sentido e lembrando se você quer

se especializar em react nada mais é do que frontiend você vai ter que sim dominar HTML CSS boa parte do seu dia vai ser isso vai ser criando interfaces com HTML CSS E claro também script depois mas se você não curte htm o INSS eu já tenho uma má notícia para você desde o primeiro momento é front-andy é HTML CSS acima de tudo e depois claro também o JavaScript para trazer vida para isso que é o que a gente vai usar também aí nas próximas nos próximos minutos horas de aula que a gente tem pela

frente tá mas vamos terminar a última parte e depois que a gente terminar essa última parte basicamente o CSS da outra página que é igual né porque isso aqui é um Twitch tá essa parte de adicionar uma resposta é praticamente igual ao formulário de Itu e tá e as respostas em si elas também são twitters de certa Forma se a gente for pensar no Twitter em si quando você responde alguém né um Twitch de alguém a sua resposta ela também é um Twitch A única diferença é que ela tá referenciada como resposta de um tweet

né de um de um outro tweet já postado anteriormente Então essa é a grande diferença mas é o CSS aqui no nosso caso vai estar pronto por isso que a gente vai para o último digamos elemento que vai dar um pouquinho mais de trabalho que é a parte aqui dos Tweets em cima da listagem de tweets é mas mas tá tranquilo vamos continuar aqui tá massa para caramba se a gente lembrar a gente já tinha criado Antes previamente aqui na pastinha componentes um componente de Twitter Então bora aproveitar esse componente para ficar mais fácil eu

vou remover toda essa parte que a interface tá vou remover também aqui as próprias que ele recebe vou deixar somente uma div mesmo tirar o Style dele aqui ó tá E aqui no nosso bem Agora abaixo do saporator eu vou pegar e vou colocar vários twitters Então olha só vou escrever aqui o nome do componente veja que ele já coloca vai fazer a importação automática então entra Pronto já importou aqui o componente de Twitter Olha que legal então aqui agora vou fechar ele aqui e vou colocar aqui alguns tweets em tela botar quatro tweets em

tela tudo que eu botar aqui dentro agora vai ser repetido automaticamente quatro vezes em tela Olha só que interessante e agora então o que que a gente vai fazer como a gente separou o componente de Twitter né em outro arquivo Vale também a gente Sepa o CSS desse Twitch em outro arquivo Então vou criar aqui um Twitch eu posso importar esse CSS dentro desse arquivo aqui do Twitter e agora eu posso escrever CSS aqui normalmente e eu vou conseguir utilizar o meu Twitter em 20 pixels aqui ele já automaticamente ó vai colocar o pedem aqui

dentro então agora A gente vai começar criando a estrutura do nosso Twitter Eu sempre gosto de criar o HTML antes e depois eu vou para o CSS então a gente já tem a dívida aqui por volta de tudo Lembrando que isso aqui vai é o Twitter ele vai ser clicável né então vou trocar aqui por uma Âncora com HF nulo Por enquanto com só uma hashtag né para ele não redirecionar para nenhum lugar e aqui eu vou começar colocando então uma imagem novamente eu vou usar a minha imagem de Perfil lá do github você pode

usar aqui o link da sua imagem do Twitter de qualquer lugar ou do seu kit também e aqui eu vou colocar uma outra dívida com a classe Twitch Então vai ser a imagem depois o Twitter em si ele vai ser este carinha aqui ou seja a imagem tá aqui o twitchcoin vai ser tudo que que vem aqui ao lado da imagem então eu tenho um cabeçalho aqui que tem o nome e usuário o conteúdo e Aqui um rodapé de ações assim né então é o que a gente vai fazer começar aqui em cima com o

Twitch contente vai ser o meu cabeçalho dentro dele eu vou ter o strong que é o nome do usuário e botar um spam aqui que vai ser o username então botar aqui @ Diego SF que é o meu Twitter abaixo dessa dívida que que é o cabeçalho eu vou ter um parágrafo com o conteúdo do Twitter Então deixa eu fazer o seguinte eu vou Copiar aqui eu não control c no texto enter aqui só arrumar aqui e cuidar para nós quebras de linha mais um Tab aqui na quebra de linha aqui ó eu botar um

BR do HTML para ele quebrar também se não ele não vai quebrar né então no final de cada linha e nas linhas em branco também na última não precisa abaixo deste parágrafo eu vou colocar mais uma dívida que vai ter os nossos botões de like e Light e que mais comentário Então dentro do primeiro botão eu vou botar o ícone chat cercool veja que ele também já dá a opção de importar automaticamente aqui do Foster já importou e vai ter o número de likes logo depois botar aqui 20 vou copiar esse botão aqui mais duas

vezes tá no segundo o ícone vai ser o Eros já importou automaticamente e no último Heart simplesmente coração então ele já fez as importações aqui dos ícones ó se o seu não importou é só fazer Manualmente né botar ali o nome certinho salve isso aqui agora voltamos e pronto já tá lá os tweets na nossa tela claro que ainda sem CSS Bora para o Twitter CSS para finalizar esse aqui com chave de ouro no nosso Twitter a gente vai começar colocando padrinho 1.5 ham a gente coloca isso em todos a display great template botar três

e o restante que é o conteúdo do Twitch RR para ele ocupar o espaço o restante GAP 0.75 renda para Distanciar a imagem ali do conteúdo do Twitter e aqui border botton um pixel sódio ebee0 que é aquele cinza um pouquinho mais claro e text decoration nono Porque como o Twitch ele é uma Âncora todo o texto dele vai ficar com sublinhado ali né salvando vamos no Chrome show já eu ia falar já ficou melhor mas não ficou muito legal não porque a gente ainda Precisa estilizar nossa imagem que está aqui dentro do Twitter vamos

começar Dando aqui nela um High borders 999 e agora sim nossa mudou drasticamente com uma instrução CSS bora continuar aqui então a gente tem o Twitter que é a parte que fica por volta tanto do cabeçalho do conteúdo e do rodapé a gente vai botar aqui um display Flex Direction Colon e GAP 0.5 ham para distanciar um pouquinho cada um deles né agora a gente vai Para o nosso Twitter nosso cabeçalho tá a gente vai botar também um display flaks Center Gap 0.25 para distanciar ali um pouquinho ambos e a gente vai estilizar o spam

que tá dentro do header colocando nele um fondi um pouquinho menor eu quero que seja 14 pixels então 14 pixels equivale a 16 pixels então 14 vai ser 0.875 Eu vou usar 89 A2 B8 isso aqui eu tenho uma cola tá é claro que não tô tirando isso da cabeça faço a menor ideia das coisas show já ficou ali agora certinho agora a gente vai estilizar o nosso P ele está fora do header na verdade está direto dentro o nosso P nós vamos botar nele online um pouquinho maior um ponto 25 que é 125% e

a gente vai também por enquanto tu achou assim vamos estilizar o nosso futuro agora então para finalizar Footter botar nele um display Flex Center GAP os botões vão ficar bem distanciados um do outro mesmo tá e vou adicionar um pouquinho mais de Margem top para eles distanciar um pouquinho mais do conteúdo ali show e agora eu vou estilizar os meus botões que vem aqui dentro com display Flex novamente itens Center Eu uso o display Flex praticamente quase tudo tá GAP 0.5 para distanciar o ícone do texto aqui do botão Deixa eu tirar esse estilo padrão

Que ele tem Então já background transparente e border zero já para tirar esse Pronto já ficou melhor agora vou botar nele fonte size 0.875 que é 14 pixels Tá beleza vou botar nele a cor 89 A2 B8 também que a cor que a gente usado ali para ficar um cinzinha mais clarinho Tá e agora que que eu vou fazer eu vou estilizar o ícone que tá aqui dentro deste botão com o 1.25 Que dá 20 pixels Então tá show esse aqui é a nossa timeline que eu posso melhorar aqui é botar um Hover nesse botão

vai ficar um pouquinho melhor color vá Twitter Blue então quando a pessoa passa mal por cima vai ficar azul mas já tá show de bola o nosso a parte visual e beleza já chegou uma barra de rolagem a nossa página já tá 100% a gente pode voltar aqui no notion e a gente já pode marcar a listagem do Twitter como pronto na estrutura visual Da nossa home page e agora a gente vai para uma parte muito importante aqui dentro que é a parte de separação de componentes como a gente bem pode ver a gente aqui

no componente de Twitch Nós criamos essa parte de Twitter separado né então num componente twitch.tsx porque porque se eu não criasse isso aqui num componente eu teria que ficar repetindo esse HTML em tela para eu mostrar vários tweets dessa forma se eu mostro dois ou se eu mostro quatro Basta Eu ficar replicando isso aqui quantas vezes eu quiser Mas será que é só nesse momento que eu separo que eu coloco um código num componente quando eu percebo que existe uma repetição e não não necessariamente eu posso separar o código em um componente quando eu consigo

identificar partes da minha interface que elas podem existir umas sem as outras né que que eu quero dizer para você você acha que talvez faça sentido né Pensa que não Pensa no Twitter hoje mas pensa em interface especificação mesmo de interface faz sentido eu poder ter em algum momento a Time Line mostrar uma lista de tweets sem mostrar aqui na esquerda o meu menu a minha sidebar eu acho que faz até porque um e outro não necessariamente tão conectados não tem uma informação que está mostrando aqui na sidebar que necessariamente está conectado direto com alguma

informação que tá mostrando aqui na nossa timeline Por isso eu posso sim separar por exemplo a nossa sidebar num arquivo num componente porque eu consigo abstrair o código dela não fica o código aqui atrapalhando o restante do meu do meu código Então olha só eu posso pegar sidebar toda aqui ó todo a Side não control x tira ele daqui aqui em Componentes criou sidebar.tsxml dela Olha só jogo aqui ó ele vai dar alguns erros de importação não tem problema volta lá no meio vamos Arrumar os erros de importação copio a importação do Twitter logo o

que muda é que agora como a sidebar O componente foi parar dentro de uma pastinha ao invés de ser ponto barra porque antes o mei ele tava no mesmo diretório que o West precisa ser ponto ponto barra agora e também precisa importar os ícones então deixa aqui ó são todos ícones menos o sparkle tá então copia o importe inteiro jogo lá tiro o sparco Pronto já resolveu todos os erros aqui dentro volto lá no meio tiro todos os impostos aqui que não é o sparco perfeito e agora que que eu posso fazer também que é

legal todo CSS aqui no global CSS que tem a ver com a sidebar Então olha só vamos lá ver nós temos aqui ó bem navigation sidebar tudo isso aqui ó até o layout tudo que tava entre layout e o contente a gente pode criar um sidebar.ss joga Tudo aqui dentro vem no sidebar.tsx importa o CSS específico da sidebar aqui dentro salvo salvo todos os arquivos volto na aplicação deu erro por quê Porque faltou agora a gente botar aqui dentro ao nosso componente de sidebar que a gente acabou de separar em outro então dentro do nosso

layout salvo e pronto nosso site bar já tá ali o que que muda agora veja que o nosso componente aqui o bem né ele ficou muito mais fácil de entender Porque olha só o código ficou muito menor se eu quiser dar manutenção agora no código da minha sidebar da minha barra lateral ali eu vou lá no arquivo e mexo só lá porque agora eu sei que tudo que tá aqui é só da sidebar não é um monte de código de outros locais da minha aplicação no CSS da sidebar só tem coisa da sidebar Eu não

tenho medo de mexer aqui e atrapalhar em outra coisa da aplicação sabe então isso é muito importante de componentes componentes no React não é quando a gente percebe que alguma coisa tá repetindo muitas vezes como é o caso mais comum da gente ter um componente mas sim quando a gente percebe que a gente pode separar as coisas em coisas menores sem quebrar o código tornando mais fácil a manutenção do nosso código porque tudo fica menor é fácil o usuário entra no Arquivo ele tem poucas linhas de código para olhar Então o que mais que a

gente poderia separar aqui né esse header aqui Também eu posso separar ele num componente por que que eu posso separar ele no componente porque se a gente for ver no figama as duas páginas aqui elas têm um Heather só que difere esta aqui está escrito home essa aqui tá escrito Twitter né então que que a gente pode fazer posso criar aqui um vou chamar de chamar de Helder mesmo Ponto tsx Vou criar já o CSS vou pegar aqui o nosso código do header aqui ó Vou botar dentro Exportation header importo o ícone sparkle Posso ver

aqui em cima dele ou dar um contra o ponto ou clica na lâmpada aqui ó Ed imports [Música] pego o CSS do timeline CSS volto no header tsx importa header.ss salvo venho no Men aqui ó e boto Heather no lugar onde estava o nosso timeline hatter salvo volto lá e show de bola tá lá o Roma só como eu Falei vai ser diferente nas duas páginas um vai estar escrito home e outro vai estar escrito a Twitter então o que que a gente pode fazer eu posso usar uma propriedade então aqui no meu header vou

criar aqui uma interface e vou falar que Obrigatoriamente esse componente de cabeçalho precisa receber uma propriedade chamada tá então que é um texto vem aqui props fala que é do tipo Heather props e aqui no lugar de home eu vou mostrar propis ponto title agora lá no meio já vai dar erro porque porque a gente não tá enviando a propriedade Titan se eu dou espaço e dou um contra o espaço aqui dentro olha só ele já disse para eu enviar a propriedade Titan e agora eu envio ela como gosto de usar aspas duplas aqui tá

então salve volto lá no Chrome e pronto se eu trocar aqui para Twitter Já troca lá em cima também legal né então a gente criou um componente que ele é variável via propriedade que mais que eu poderia separar aqui o nosso formulário faz sentido separar nesse caso não tá nesse caso eu não vou separar ele poderia também mas a gente tem que cuidar com outro problema que é muito comum em Quem começa a trabalhar com react que é um problema que eu vejo todo mundo passar em algum momento que é o vício da otimização que

é beleza Diego Tu me falou que eu posso separar o código em vários componentes menores assim fica tudo com três linhas de código e fica muito mais fácil da manutenção certo errado Não é porque a gente pode separar o nosso código em vários e vários componentes moleculares cada um menorzinho que o outro que a gente tem que fazer isso em todas as situações a gente tem que fazer isso desde que isso melhore a legibilidade e o entendimento do código se não for com Esse propósito não tem problema o teu código o teu componente daqui a

pouco t50 linhas 60 70 80 linhas desde que todo o conteúdo que tá ali dentro seja de fácil entendimento seja de fácil manutenção então na minha visão aqui colocar esse formulário aqui em outro componente cara não faz sentido porque quando eu querer mexer nesse formulário aqui provavelmente eu vou estar mexendo muito próximo da minha listagem de tweets aqui não faz sentido para mim Isso aqui tá num componente separado se para você fizer sentido beleza Lembrando que não existe respostas corretas né para tudo para todas as os padrões de código cada pessoa segue um padrão próprio

de codificação Eu particularmente não separaria isso num componente esse nosso give aqui separater isso aqui eu já separaria tá porque porque ele é um negócio tão é tolo aqui que dificilmente a gente vai dar manutenção nisso aqui né então eu Vou criar aqui um componente separator ponto tsx só para o CSS dele Pelo menos está em outro arquivo tá se separater.css quando é uma coisa assim que não vamos dar muita manutenção facilmente aí eu gosto de separar no componente porque dele fica perdido lá dificilmente alguém vai mexer nisso aqui em algum momento da vida importa

e agora aqui no meu Globo CSS eu procuro Serpa aqui é o último jogo no meu Separator CSS já fiz a importação aqui do seproator CSS e agora aqui também eu só tira essa dívida e escreva no lugar dela show de bola salvo voltamos e pronto Nossa interface continua totalmente funcional vamos lá no notion então agora a gente já separou os nossos componentes e agora eu queria antes da gente continuar porque a gente ainda tem duas coisas aqui que estão bem importantes na nossa aplicação para a Gente fazer tá a primeira delas é a gente

precisa construir essa outra página aqui que a página de um único Twitter só que para construir outra página a gente vai ter que começar a trabalhar com algo na nossa aplicação que é muito comum em aplicações front também né que é roteamento que que é roteamento eu poder clicar num link por exemplo clicar num Twitch e mudar o conteúdo da página por enquanto a nossa página não permite isso a gente só tem Digamos uma página que a timeline e outra coisa que tá muito importante aí na nossa aplicação é a gente fazer ela funcionar então

o usuário poder digitar aqui o Twitch clicar em Twitter e aparecer aqui embaixo Mas entretanto antes da gente continuar eu queria te mostrar uma coisa que é muito legal a gente já viu um pouquinho disso lá quando eu tava te explicando é os primórdios dos fundamentos do react que é como que a gente faz para utilizar Variáveis do JavaScript para modificar comportamento modificar visual aqui dentro do react que que eu quero dizer hoje eu tô colocando vários tweets aqui né um abaixo do outro porém E se eu quisesse que esses tweets que estão sendo exibidos

aqui em tela eles viessem de um Arreio de tweets um vetor com vários tweets Então imagina que eu tenha um vetor então por exemplo consta Twitch que eu busquei lá sei lá de uma p.i busquei de um arquivo busquei De qualquer lugar né Depois a gente vai sobre isso e dentro aqui desse vetor eu tenho vários tweets por exemplo meu primeiro Twitch tem um outro aqui que se chama teste e tem um terceiro aqui que é deu certo Twittar só criei três tweets né eu criei com um texto mesmo só pra gente pra gente pensar

aqui no Twitch Agora eu preciso que recebeu uma propriedade com o conteúdo do Twitter como sendo uma String e aqui no lugar do parágrafo aqui ó deixa eu tirar tudo que tem aqui eu vou colocar o nosso proppis o nosso conteúdo do Twitter e agora deixa eu fechar um pouco de arquivo aqui que eu tenho arquivo aberto para caramba Close ao editors tem um arquivo que eu não salvei Então pode salvar aqui dentro bem agora o Twitch já começou dar erro por quê Porque eu Preciso enviar para ele uma propriedade com o conteúdo do Twitter

por exemplo Twitter 2 né exatamente o conceito de propriedade que a gente viu agora e se eu quisesse dentro do meu HTML aqui percorrer este Rei e para cada posição no Rei mostrar um desses carinhas aqui um desses Twitter Como é que a gente faz isso no react Olha só vou remover daqui e agora eu preciso começar colocando Chaves porque eu quero escrever um Código já vai script aqui dentro Qual o código eu posso pegar Twitter e aqui quando eu dou um ponto eu tenho vários métodos que eu posso executar numa rei né geralmente quando

uma pessoa começa a aprender a react o primeiro método que vem na cabeça dela é o Ford it Ou seja eu quero percorrer cada um dos tweets e quero fazer alguma coisa com eles Beleza se eu dar um consolog aqui ó no meu Twitter Chaves aqui por volta vai funcionar salva volta aqui no Chrome abre espessuramento só que não adianta eu tentar colocar aqui o componente ó Tweet content Twitch a variável que está vindo aqui ó salvar isso aqui não vai funcionar não tá aparecendo aqui por quê Porque o react ele não vai entender código

que eu coloque aqui dentro é do meu Ford como você não código que eu quero anexar ao meu HTML ele não ele não vai interpretar isso aqui tá que que eu Preciso mudar aqui a gente tem que entender por isso é muito importante a parte de fundamentos do Java script né enquanto a gente vai aprendendo react a gente precisa entender a diferença dos métodos de interação dentro do JavaScript eu vou comparar especialmente o Ford it com o método map Qual que é a diferença desses dois métodos você sabe do Ford e do Map ambos percorrem

uma Rei ambos eu posso pegar o Arreio de tweets por exemplo Fazer um map tá veja que se aqui embaixo eu trocar for it por map resultado é o mesmo salvo o consolog vai continuar dando mas é que eu tirei o consolog né vai continuar aparecendo Mas qual que é a diferença do Map para o fortnite Você sabe a diferença é que o Ford it ele não tem retorno o que que isso quer dizer é que sempre que o executar Ford eu não consigo retornar nada desta operação Ou seja não interessa se eu faço um

return de dentro de um Ford it eu não consigo assinar o valor digamos imagina que eu queira somar Sei lá eu quero todos os tweets em caixa alta então Twitter imagina né então se eu tentar percorrer os tweets fazer um forit e para cada Twitch retornar ao Twitch em caixa alta então botar aqui ó essa variável que tweet upcakes ela vai ter os meus tweets Não vai esses lotes que estão dando é por causa desse outro código aqui embaixo porque porque o forete ele não tem retorno não adianta eu fazer um retorno de dentro dele

não tem retorno ele só percorre e pronto o map por sua vez Tem retorno ou seja tudo que eu retorno de dentro do Map é assinado a variável que está por volta dele então Olha só tudo encaixa alto ou seja por que que eu expliquei tudo isso porque dentro do React se eu utilizar o map e de dentro dele eu retornar o que que eu quero exibir em tela que no caso é o meu Twitter onde o conteúdo dele é o meu Twitter e salvar Olha lá já tá em tela meu primeiro Twitter teste e

deu certo e tá que cada um dos tweets que eu tenho porque porque o map Tem retorno tudo que eu retorno daqui de dentro é repassado para o componente superior porque que chamou o ponto map né então isso aqui é super interessante da gente entender só Que se a gente for aqui no cão do navegador a gente vai ver que tá dando erro Olha só e a gente tem uma propriedade Nativa que é o Children e só tem uma outra propriedade Nativa que é o que chave que que é esse que aqui sempre que a

gente faz uma interação por exemplo um map dentro do react Obrigatoriamente dentro do primeiro componente que aparece dentro né o primeiro elemento que aparecer por exemplo se tiver uma Dívida se tiver parentes aqui por volta uma dívida entre eu tenho P dentro do P tem um spam somente na Disney somente no primeiro tanto faz qual seja o primeiro você é um HTML se é um componente qualquer coisa assim o primeiro elemento precisa ter uma propriedade que sempre que eu faço um map que e para essa aqui eu preciso passar uma informação única que existe dentro

de cada item da lista neste caso cada tweet aqui é o único então a gente pode usar o próprio tweet Porque eu sei que ele é único geralmente quando a gente vai trabalhar com aplicações mais grande porte geralmente a gente tem um ID para cada coisa né então o id1 e D2 e D3 né dependendo da estratégia de D que você vai utilizar então a gente geralmente tem uma informação única que a gente pode utilizar ali dentro e a gente nesse caso usa esta informação única mas para que que serve isso no final das contas

é claro que a explicação é que ela poderia Ir muito mais profundamente mas de uma maneira mais Rasa para quem está no seu momento aprendendo react a informação mais Rasa é o seguinte o react ele tem esse esquema né de conseguir ter como performance uma das coisas mais importantes para essa biblioteca quando eu informo aqui o que né o react meio que entende por baixo dos panos que a qual Twitter que no caso é aqui que eu tô passando pertence cada componente por quê para se um dia Imagine que eu tenho essa lá 2000 twitters

componentes aqui a pessoa foi lá no Twitter ficou rolando lá até ficar 2 mil componentes em tela imagina que eu remova um tweet dessa lista de 2.000 Como que o react vai saber exatamente qual Twitch eu removi bom eu posso ele vai identificar pelo id desde que eu passei aqui se eu não passei aqui ele vai meio que apagar a lista inteira e recriar ela do total zero com 1999 Itens ou seja com o único item que eu deletei ou seja aqui ela serve exatamente para o react saber exatamente qual o Twitch é qual e

ele vai saber pela aqui que eu passei para ele que precisa ser única e um dia seu deletar o reordenar essa lista ele vai conseguir fazer isso de uma maneira muito mais performática então o que tem tudo a ver com performance sempre a gente precisa passar o cão só vai dar erro caso a gente esqueça então não precisa se Preocupar show de bola a gente aprendeu agora uma das coisas mais importantes no react que são interações a gente conseguir pegar dados de uma rei né de marreia que por exemplo de tweets e mostrar em tela

mais para frente Isso aqui vai ficar ainda mais interessante e a gente vai agora para nossa começar a parte que você vai começar da vida para aplicação que é a parte de roteamento Então a gente vai começar a configurar agora Dentro da nossa aplicação a parte de rotas ou seja links entre páginas eu poder Navegar clicar no Twitch e para outra página e por aí vai voltar e para outro Twitch por aí vai a gente vai aprender tudo isso como é que funciona então bora lá bora então começar a falar sobre roteamento aqui dentro do

react quando a gente fala sobre roteamento sobre essa parte de você ter várias páginas dentro de uma aplicação só que falando de uma aplicação frontiend isso É diferente de uma aplicação quando a gente fala de roteamento dentro de uma aplicação Back And por exemplo desenvolvida com PHP Java pytton ou até nojo por exemplo se a gente lembrar lá das nossas anotações uma das coisas que um dos conceitos que a gente aprendeu logo no final é sobre o conceito de single page application Então qual uma grande diferença do roteamento quando a gente trabalha com diferentes páginas

dentro de uma aplicação front-end né Front-end construída aqui com essas bibliotecas como react anglovil e por aí vai quando a gente trabalha com roteamento nesse tipo de estratégia a gente não necessariamente vai precisar recarregar toda a página toda a interface do total zero para trocar de uma página para outra até se a gente for ver aqui no nosso layout por exemplo eu preciso de alguma forma quando eu clico para acessar algum tweet eu preciso mudar o conteúdo desta parte Aqui desta sessão só que a sidebar ela fica igual se você concordar comigo olha só aqui

na direita eu tenho a rota do Twitter que é a rota do status né que quando a pessoa entra em um único tweet eu chamo essa rota de status porque é o endereço que fica lá na URL do próprio Twitter do Twitter original quando a gente clica em algum Twitter fica status e o ID do Twitter aqui nesse caso eu quero que quando a gente clica no Twitter ele recarregue Esta parte aqui somente a parte aqui da timeline mostrando o novo conteúdo desta página aqui que é a página daquele Twitch específico só que a sidebar

ela não precisa ser recarregada do zero por isso a gente chama isso aqui de single page application porque no final das contas o usuário não foi redirecionado para outra página o conteúdo mudou por baixo dos panos mas para o usuário final aquela página para o navegador digamos assim não houve um recarregamento da Página não houve um redirecionamento só o conteúdo mudou então a gente geralmente cada uma das tecnologias né no reak por exemplo E por aí vai a gente tem bibliotecas específicas para trabalhar com essa funcionalidade com formas de eu mudar o conteúdo da página

baseado no endereço que o usuário Está acessando então baseado no endereço que está aqui em cima na URL eu mudar alguma coisa na página é basicamente isso que essas Bibliotecas fazem elas não têm um intuito de fazer realmente um redirecionamento uma troca de rotas aqui na nossa aplicação mas a gente vai ver como que isso funciona a biblioteca mais famosa não ecossistema do react para lidar com o roteamento Com certeza é o react halter essa biblioteca que é desenvolvida lá pela galera do remix que é um Framework no react mais para frente a gente fala

sobre isso é a biblioteca perfeita pra gente trabalhar com rotas Aqui dentro e ela tem uma pi né uma sintaxe muito simples da gente integrar para isso eu já vou vir aqui direto em tutorial né dentro do guia do Gang start caso você queira dar uma lida aqui dentro tem toda a explicação como que ela funciona mas assim não tem tanto foco não tem porque a gente dá tanto foco nisso aquele mostra a sessão de setup né então ele mostra como que a gente faz a criação de um projeto a gente já criou né o

projeto com o Vit Tudo certinho nós vamos agora instalar essas três dependências aqui quatro dependências na verdade ó npm instalto aqui deixa eu dar um pouquinho de zoom nós vamos instalar o react halter Don locau forte match software e sorte by essas três dependências aqui provavelmente né o local Ford sortear e sorte by são Pearl dependentes que a gente chama ou seja dependências da própria reactton que a gente precisa instalar juntos né mas a única Biblioteca que a gente vai usar mesmo api é a reactdown então aqui no nosso projeto eu vou no terminal executar

esse npm install instalar essas quatro dependências e mais para baixo é que a gente já pode ir pra nossa primeira parte do guia que é como que a gente cria o nosso primeiro roteador digamos assim geralmente a gente vai único roteador né uma única Instância dessa variável na nossa aplicação a menos que a gente esteja desenvolvendo uma Aplicação que ela é multitelas né que que eu tô querendo dizer a gente pode desenvolver por exemplo uma aplicação usando election não sei se você já conhece mas o electron é uma plataforma que permite a gente desenvolver aplicativos

desktop para Windows Linux Mac né aplicativos mesmo assim qualquer aplicação né que a gente usaria nativamente que não precisa do browser digamos assim só que com tecnologias da web e eu consigo Inclusive usar o react dentro do Eletro e uma das coisas que é comum a gente tem aplicações é aplicações desktop é a gente ter múltiplas telas né Nem sempre a aplicação ela tem uma tela só e nesse caso a gente poderia ter mais roteadores ali dentro mas em aplicações web geralmente a gente vai ter um único roteador que digamos é uma única estrutura que

determina Quais são os endereços das rotas que a gente vai ter Na nossa aplicação né mas bom a gente não precisa entrar tão afundo nesse nesse ponto aqui que que a gente vai fazer aqui na nossa aplicação agora tá eu vou começar criando aqui dentro da pasta source um arquivo chamado roads.tsx lembra que no react é tudo componente e aqui não vai ser diferente as nossas rotas elas também vão se comportar de certa forma como componente aqui dentro o que que eu vou fazer eu vou começar criando uma constante Chamada holter eu vou até já

deixar ela exportada daqui de dentro e eu vou utilizar uma função chamada Create browser que vem de dentro do react Down essa função aqui ó como a gente bem pode ver aqui embaixo ela recebe um array então eu passo para ela uma Rei aqui dentro e aqui eu tenho que mandar vários objetos para ela onde cada objeto desse representa uma página da nossa aplicação e esse objeto ele tem duas propriedades obrigatórias o pass que é o caminho ou Seja o que que deve aparecer após local host É 5173 acho que a porta que a gente

tá usando né assim com isso 5173/o que que deve aparecer aqui depois para que esta página aqui seja a página mostrada em tela digamos assim então aqui ó Nesse caso a home a gente bota apenas barra então usuário não precisa digitar nada só digitar logo o arroz assim com 73 ele vai cair nesta primeira rota aqui e aí eu passo para ela até assim da documentação eu passo para ela Aqui ó o elemento que é qual elemento vai aparecer em tela Qual componente o react vai aparecer em tela assim que essa rota for chamada e

aqui eu posso passar por exemplo só para a gente testar um H1 ó eu vou escrever home tá E aqui eu vou escrever vou criar mais uma página chamada por exemplo a Twitch quando a pessoa acessar esse endereço vai mostrar Twitch em tela Então agora eu vou salvar isso aqui as configurações elas estão Praticamente prontas e o que que a gente vai fazer agora é em algum lugar da nossa aplicação onde eu queira que apareça que apareça esse conteúdo aqui eu preciso colocar este componente que vem também do reactor dom chamado holter pro Finder é

dentro desse componente aqui que vai aparecer o conteúdo da Rota então por exemplo se eu for aqui embaixo Vamos botar fazer o seguinte em cima aqui do nosso formulário onde a gente tem o formulário de novo Twitch aqui ó Nossa aplicação aqui é o formulário de novo Twitter em cima dele eu vou botar esse componente ali ó holter aí que que eu faço eu venho aqui em cima dele ó posso clicar na lâmpada aqui na esquerda ou dá um contra o ponto ele deve abrir isso aqui e eu boto é importante e aqui no holter

a mesma coisa contra o ponto Ed imports Pronto já fez os dois imports aqui em cima se o seu não fez você pode vir aqui e fazer essas importações manualmente Salvo volto para o navegador e olha só agora aqui em cima veja que tá aparecendo home que que é esse home é exatamente o que aqui dentro da Rota a gente falou que vai ser mostrado em tela quando o usuário tiver na rota root na rota raiz aqui da nossa aplicação porém se eu venho aqui e digito barra Twitch que é a nossa outra rota veja

que vai mudar o home para Twitter Ou seja eu consigo ter uma parte do conteúdo da minha página Variável de acordo com a Rota que a pessoa Tá acessando E aí o que que eu vou fazer aqui dentro eu vou criar uma pasta aqui dentro chamada pages tem gente que chama isso aqui de screens tem gente que chama o nome das coisas não é o mais importante tá nesse caso aqui específico e aqui eu vou criar alguma página chamada timeline que seria a nossa home na verdade né a gente não vai ter uma página home

na verdade a home do Twitter que vai ser a própria timeline Dentro desta timeline aqui que vai ser um componente eu vou colocar toda a parte da nossa aplicação que hoje tá aqui no Men que é específica da timeline então eu vou basicamente pegar todo essa esse meme aqui que eu tenho essa esse container que tá aqui por volta Deixa eu só tirar o roter Pro Rider daqui tá na verdade eu nem vou tirar vou botar ele aqui ó no lugar do bem e aí todo o meme aqui ó que é específico da nossa timeline

eu vou tirar daqui e vou voltar Dentro da timeline e aqui ele vai dar erros normal tá e a gente vai trazendo aqui no header vou dar um control ponto em ponto reder no CPP é a mesma coisa contra o ponto importa no Twitter mesma coisa importa o Twitter no lugar aqui do a rede twitz isso aqui eu preciso buscar lá de dentro do meu bem que é o nosso rede Twitch que eu tenho aqui ó vou lá ele aqui em cima para a gente não perder parou de dar erro outra coisa que a gente

precisa trazer aqui para dentro é O CSS Então vou criar o timeline.css venho no meu globo.s e tudo que que é específico da timeline como New Twitter for aqui ó na verdade é só o new Twitch for mesmo eu vou tirar daqui e vou jogar aqui esse layout esse contente aqui ó eu posso deixar aqui porque porque eu consigo reaproveitar esses dois aqui ó é para outra página também então isso aqui eu vou deixar aqui tá mas o resto eu vou mover lá para o timeline CSS então movo tudo para cá e No timeline Agora

tsx eu preciso importar esse arquivo de CSS senão ele nunca vai ser carregado né Acabei de criar ele perfeito agora que a gente já fez a separação lá no meu arquivo de rotas ao invés de mostrar H1 home aqui eu vou mostrar o nosso componente de timeline Olha que interessante Então agora quando eu salvar todos os arquivos Deixa eu tirar as importações que eu não tô mais usando aqui em cima quando eu salvar Todos os arquivos e voltar para minha aplicação veja que quando eu acesso a home tá aqui minha timeline certinho quando eu acesso

a página Twitter ele tira todo o conteúdo aqui da direita mostra apenas Twitch porém a sidebar ela ficou fixa porque porque lá no meu bem a gente pode ver que a sidebar aqui ó ela tá fora do nosso roter por Viber somente o conteúdo deste carinha aqui desse router Pro Rider é o conteúdo que vai ser substituído com base na rota que o Usuário Está acessando com base na página no endereço que o usuário Está acessando então a sidebar ela fica fixa show de bola a gente já progrediu bastante Vamos abrir aqui o nosso tudo

a gente já trabalhou com roteamento já entendemos como que a gente reaproveitou aqui a sidebar entre as duas páginas perfeito a sidebar ela se Manteve intacta entre as duas páginas agora o que a gente vai fazer é a estrutura visual da página de status que nada mais É do que a página do Twitter quando o usuário clica no Twitter a gente vai então ter essa estrutura diferente então o que que eu vou fazer aqui em cima no nosso navegador eu vou manter na página Twitch pra gente modificando este código aqui e aqui dentro de pades

eu vou criar mais uma página chamada status veja que eu não chamei ela de Twitch porque a gente já tem um outro componente chamado Twitch então poderia confundir tá então Vou chamar ela de status mesmo é status ponto CSS então sempre criou os dois juntos né aqui componentes simples e pronto e Don retard aqui dentro vai ter alguma coisa para aproveitar até se a gente for olhar o figma aqui a página de status ela não é muito diferente da página de timeline então o que que eu vou fazer vou copiar todo o conteúdo que eu

tenho dentro da timeline aqui dentro novo aqui para status vou trocar apenas essa classe aqui também para status ao Invés de timeline tá aqui no Heather vou fazer importação troco aqui o título de home para Twitch e aqui embaixo no seppolator importa também aqui eu tenho esse Twitch map eu vou deixar comentários aqui por enquanto então seleciona tudo e dá um control Barra no caso do Windows acho no Mac é coma de barra para ele comentar só esse código para a gente não mostrar ali em tela ainda tá E aqui eu tenho o new Twitter

só que aqui na verdade ele vai Ser um de resposta né então vou chamar ele de enter aqui vai ter algumas modificações né o Place holder dela vai ser Twitch e o nome do botão aqui o conteúdo do botão vai ser enter e aqui embaixo a gente vai ter algumas respostas na verdade que também de certa forma vão ser Twitch né então eu vou criar aqui uma rei de answers olha faz sentido só para a gente depois a gente vai Melhorar isso aqui bastante tá a gente vai criar aqui o mais um parabéns pelo progresso

e aqui embaixo ao invés de fazer um twitch.map então eu vou fazer um ensart map e para cada resposta eu vou mostrar o componente Twitch em tela Porque o Twitter ele pode servir para a resposta também e eu só vou substituir aqui os locais onde eu uso a variável Twitch que agora eu troquei para enter Então por enter Salve isso aqui agora vamos voltar lá na página de status na F5 aqui não deu certo porque aqui na minha Roots Eu ainda tô usando H1 Twitter aqui eu tenho que usar agora status e aqui a rota

eu vou trocar também para Barra status tá então aqui ó status e perfeito aqui tá a nossa página por enquanto o que a gente pode ver que tem de diferente aqui é que o formulário aqui ó ele tá abaixo de um Twitch principal que é o Twitch que eu cliquei Então acima do formulário a gente vai precisar ter um Twitch aqui ó que seria o Twitch original então o que que a gente vai fazer deixa eu abrir aqui meu versus code novo em cima do formulário eu preciso de um tweet também que é o Twitter

a Qual é tá sendo exibida as respostas então aqui eu vou mostrar um Twitter e preciso colocar um conteúdo nele aqui dentro a nuvem code se eu não me engano a gente pode estar lorem aqui ó e ele gera um texto Só que tem que escrever ele fora da tag aqui ó escrevi ele em qualquer lugar daí gera o texto e eu boto aqui no conteúdo só pra gente ter um texto fictício né volta aqui pronto já tá lá o texto fictício e agora a gente precisa estilizar esse nosso formulário mas também uma outra coisa

que a gente pode perceber é que esse separadorzinho aqui ó cinzinha ele tá antes do formulário e aqui a gente botou ele embaixo então eu vou pegar ele e vou botar ele para antes Do formulário voltamos aqui no Chrome tá lá o separador e agora falta basicamente a gente utilizar o forme que vai ser bem tranquilo né Deixa eu já fazer a importação do status CSS aqui dentro e eu vou copiar do meu timeline CSS todo o CSS do Farm para a gente só ir alterando vou pegar todo lugar que está escrito New aqui ó

seleciona a palavra New junto com o tracinho possa apertar acho que é ctrl shift L olha seleciona todos os com A mesma com ao mesmo texto ou você seleciona e vai dando contra o deo ou como de ideia e pronto e troca a palavra New Por andriel que é o nome do nó a classe do nosso formulário salva aqui agora voltamos a gente já pode ver que o formulário tá ali só que o formulário neste caso aqui da resposta ele é um carinho diferente tá o botão por exemplo aquele tá na direita não tá embaixo

né então a gente vai ajustar algumas coisinhas ali então aqui no endsorte A gente tava com display com Flex reaction Colon a gente vai tirar isso aqui eu acho que o botão já vai para a direita show já tá o botão lá talvez um online itens Center para que o botão não fique esticado né veja que antes ele estava esticado porque o padrão do Alien itens é Stretch é esticar todos os elementos para que ele ocupem né Todo o espaço disponível nesse caso não aqui a gente vai também botar um border botam um pixel solidge

com aquela cor que a Gente tava usando aqui no Globo aqui ó EB essa mesmo botar aqui beleza ó já ficou com uma bordinha ali embaixo e eu acho que cara é basicamente isso aqui no nosso botão de saber a gente tem também um margem Se não me engano a gente tinha deixado aqui a margem top no Tex não não é isso não [Música] Border color deixa eu ver se tá tudo certo eu acho que é isso mesmo Flex tudo certo Beleza aqui a gente consegue botar Nossa só que aqui ele tá com espacinho um

pouquinho mais deixa eu dar uma espessionar aqui para ver certinho que ele tá com um pouco de espaço a mais embaixo me parece ali ó porque não tá Centralizado Agora sim aqui no andurt falta online ela não tá centralizada aqui com o nosso elemento Eu acho que o que eu posso fazer aqui nela é botar com que A altura dela seja do mesmo tamanho que a fonte um ponto 25 talvez tirando margem top ou melhor eu acho que eu vou aumentar um pouquinho mais top um Remo um ponto 25 Ram acho que tá bom né

assim já tá Centralizado a linha tela é eu não queria ser tal altura porque senão quando eu quebrasse a linha ele ia cortar aqui também olha acaba não Cortando porque aqui vamos lá primeiro ponto que a gente tem que melhorar aqui dentro o nosso Label ele não tá ocupando espaço todo disponível então a gente pode vir aqui nele e jogar um Flex 1 pronto uma coisa resolvida já o layo tá ocupando text area também tá ocupando o máximo de espaço quando quebra a linha aqui ó ele tá vindo para baixo só que se eu vou

quebrando mais e mais ali ó ele cria ali a barra de rolagem que não é um problema tá tudo bem só que o mais Correto seria isso aqui ir aumentando conforme eu digito só que não existe um comportamento padrão no HTML para eu fazer uma Tex are aquela seja aquela cresça automaticamente eu teria que resolver isso com o Java script né então não quero colocar muita coisa caso você queira ir mais a fundo e fazer isso procura alto grow text área você vai achar várias coisas se você botar ainda realmente vai achar ó algum componente

pronto para fazer isso eu não vou Utilizar porque às vezes tem esses componentes eles não duram muito tempo no ar e tal então não vou utilizar aqui na nossa aplicação Mas beleza nossa página de status ela tá finalizada o que falta a gente fazer é o link porque olha só quando eu clico aqui na Roma ele não envia a gente para nenhum lugar e quando eu tô aqui na minha na home e clico em algum Twitch também não envia a gente para nenhum lugar e aí se a gente voltar aqui na Nossa aplicação vamos lá

aqui dentro de Pages a timeline aqui nos tweets eu vou clicar no componente de Twitter perfeito E aqui onde tem a HF se eu trocar aqui a nossa o nosso hashtag por barra status que é a página que mostra os dados daquele Twitch que que vai acontecer quando eu volto aqui no Chrome e clico em algum Twitter veja só ele mandou a gente para página do Twitter Porém Aqui Aconteceu algo que não sei se você percebeu mas eu vou até Abrir um espelho elemento aqui e aba Network porque eu quero te mostrar isso aqui do

total zero deixou até botar do ladinho aqui para atrapalhar a gente menos Olha só quando eu clico no Twitter ele recarregou tudo do zero e eu consigo ver isso porque ele carregou este primeiro aqui ó que tem um símbolo de documento tá vendo isso aqui significa que a nossa página ela teve um redirecionamento só que lembra que eu falei que justamente Fazer uma aplicação Spa uma aplicação com react é a gente evitar esses redirecionamentos completos como acontece em aplicações que a gente não tinha Spa que que eu quero fazer na verdade quando eu clicar no

Twitch eu quero que somente o conteúdo aqui ó da nossa timeline seja substituído pelo conteúdo da página status e não que haja todo esse redirecionamento a gente pode até ver que houve redirecionamento porque ele vai dar um sinalzinho de Carregamento aqui em cima olha lá se for bem olha lá isso aqui é ruim né no caso não é que é ruim mas só que a gente consegue ter muito mais performance nisso como é que a gente pode resolver isso no lugar do a nós podemos usar um componente que vem de dentro do reactton chamado link

e o link ele é um igual mantra então a gente pode só tirar aqui A Âncora e bota o link no lugar vem aqui troca aqui também por link no final e o HF a gente troca por simplesmente assim não precisa mudar mais nada o que que o link faz é ele consegue automaticamente identificar Quais mudanças precisam acontecer na página entre uma rota e outra e mudar apenas aquele conteúdo Então olha só quando eu clicar no Twitter agora Você viu como foi muito mais rápido e não houve qualquer tipo de Reload aqui na página olha

só vou te mostrar de novo eu vou limpar aqui a aba Network que Lista tudo que que foi carregado certo vou ver aqui ó Limpo ela quando eu clicar no Twitter olha só ele não carregou praticamente mais nada a única coisa que ele carregou foi a imagem porque é uma imagem que está aparecendo nesta página aqui na verdade duas imagens né uma delas houve um redirecionamento que é Diego 3G e redirecionou pelo endereço original da imagem Mas ele carregou só a imagem do usuário que é um elemento que tá Aparecendo aqui nessa tela que precisa

ser carregado ou seja todo o restante se Manteve o react não precisou ele reaproveitou tudo não precisou ser recarregado nada do Zero Isso é sensacional tá E agora quando eu clicar na home eu quero fazer a mesma coisa então o que que eu posso fazer eu vou abrir aqui a minha sidebar e aqui dentro Eu também vou trocar aqui o a que está por volta aqui da romper link e aqui link veja que ele já importou Ah Não importou do Foster tá errado Tá tira tira tira tira contra o ponto aqui em cima eu quero

importado react halter Don show de bola aqui não é agarraft é tu e aqui eu vou botar a barra né que é a rota original volto na F5 aqui do erro certo já sei o que que aconteceu aqui dentro tá o que que acontece tá aqui na nossa aplicação e até importante que isso aconteceu porque a gente consegue ver Mais um conceito importante aqui do nosso app com o reactton o que acontece no react a gente tem um conceito que mais para frente Conforme você for estudar mais e mais que se chama de contexto tá

dando uma abordagem Mais Raça sobre o que que é contexto basicamente significa que existem locais onde eu consigo ter acesso a algumas informações e locais onde eu não consigo ter acesso a essas informações O que eu quero dizer com isso no final das contas é que aqui dentro do mei quando a gente usa esse roter por Viber eu basicamente tô dando acesso a todas as funcionalidades do reactton para todos os elementos que estão dentro do Hater pro fider ou seja todas as minhas páginas que são as páginas que eu botei aqui no roter como a

timeline status Elas podem fazer navegação eu posso ter link dentro delas eu posso usar qualquer funcionalidade do reactredom dentro Delas porque o reactton ele provê um contexto ele prover variáveis que funções e variáveis globais digamos assim para todos os elementos que estão dentro das rotas agora a minha sidebar ela tá fora do contexto do Walter provisória olha só a sidebar ela tá aqui e o meu holter Pro Rider está abaixo ou seja ele não tá por volta da sidebar ou seja não existe contexto ameara ela não conhece ainda o meu holter por Viber porque ela

tá aqui e o Outro tipo Rider tá aqui ela não tem como botar um link dentro da sidebar que é dom sendo que ela tá fora do contexto das minhas rotas e calma que esse assunto de contexto ele vai muito mais a fundo mas o ponto que eu quero te explicar aqui é que no react halter quando a gente quer ter esse funcionamento de layout né que por exemplo é o que a gente viu aqui que eu quero por exemplo manter a sai de bar intacta enquanto o restante dos Elementos em tela mudem eu preciso

também usar de um conceito do reactton chamado de layouts e como é que a gente vai fazer isso tá é super super simples aqui embaixo na própria documentação deles se eu não me engano Tem uma parte que eles falam sobre isso se não a gente constrói do zero mas eu tenho quase certeza que tem uma parte aqui ó exatamente essa parte aqui ó nesta que é exatamente o que que eu tô querendo te Mostrar de layout olha só ele fala que basicamente nessa parte da documentação que eu quero ele quer manter né na documentação aqui

nessa aplicação essa sidebar aqui na esquerda que tem a busca e uma listagem e na direita ele quer mudar apenas esse conteúdo exatamente o que que a gente quer fazer então o que que ele precisa fazer é criar algo que a gente chama dentro do reactton de Nester Roots que nada mais são do que rotas é encadeadas rotas em Cascata né mas a Gente vai entender como é que isso funciona o que que a gente vai fazer aqui agora tá a gente vai basicamente criar uma pastinha chamada layouts dentro dela vou criar aqui um default

ponto tsx eu vou exportar daqui de dentro um componente chamado default e este componente aqui ele vai basicamente ter todo o conteúdo aqui do meu meia vou pegar tudo isso aqui botar aqui dentro tá Vou importar aqui Opa cuidado importado local correto tá Então importa dentro de componentes/s o holter pro Viber aqui ó eu não vou colocar ele aqui então calma vamos salvar esse The fold aqui e aqui dentro do man.tsx eu vou deixar apenas o nosso roter provider vou tirar a sidebar vou tirar todo o resto que a gente tinha aqui tá E agora

lá dentro do meu roads.tsx eu vou fazer esse esquema de rotas em cadeadas que que é rotas em cadeadas é uma forma de eu conseguir Reaproveitar partes de interface layouts da minha interface Entre várias páginas então aqui por exemplo a gente quer reaproveitar a sidebar entre duas páginas Mas se a gente for pensar bem se eu tivesse mais páginas nessa aplicação do Twitter como por exemplo uma página de login na página de login eu não vou ter sidebar então não faz eu reaproveitar a sidebar para todas as telas concorda comigo ou seja o Master Roads

ele é uma forma da gente conseguir reaproveitar essas partes da nossa interface somente nas páginas que a gente quiser e como é que a gente faz isso eu vou criar aqui dentro vou até comentar essas duas aqui tá eu vou criar aqui dentro uma primeira rota vou botar a barra nela não tem problema a gente pode deixar isso aqui é vazio ela vai ter apenas um elemento que é o nosso que é o nosso layout Então agora que que acontece se eu salvar isso aqui e voltar Na minha aplicação quando eu entrar na página home

Olha só ele mostrou apenas a sai do bar concorda comigo aqui dentro do meu default dentro da divcomten se eu botar qualquer coisa é o que vai aparecer aqui na direita só que aqui na direita eu quero que apareça o conteúdo específico da página que o usuário Está acessando timeline ou status então aqui no Road que que eu tenho que fazer aqui dentro eu vou definir Children que são as rotas que vão ser contidas dentro deste layout ou seja quais rotas da minha aplicação vão ter a sidebar na esquerda e aqui eu venho e coloco

as duas rotas que eu tinha aqui em cima então eu boto as duas rodas a home e a status se eu salvo isso aqui agora e volto não deu certo ele não mostrou a home em nenhum lugar seu acesso barra status ele até Tá acessando mas não mostrou nada por quê Porque Dentro do meu layout eu preciso indicar aqui dentro Qual que é o local onde vai aparecer o conteúdo específico de cada página e eu quero que o conteúdo específico de cada página Apareça aqui ó no lugar desse ácido aqui então aqui dentro Eu preciso

colocar um componente específico do reactton chamado de outlet então eu vou importar outlet de dentro do reactordon Simples assim salvo voltamos lá e pronto agora o link na minha sidebar tá funcionando Olha só vou Clicar aqui fui para home e o link nos tweet também funciona porque tanto a sidebar quanto as minhas páginas específicas elas estão dentro do meu contexto de rotas porque a sidebar ela tá dentro desse componente the fold aqui ó Então ela tem desculpa ela consegue acessar informações aqui do link e tudo mais outra coisa que é interessante é que imagina que

eu gostaria de deixar essa esse link Azul somente quando o usuário Estiver na home com o reactton é muito simples tá vendo que eu botei essa classe Active ele tem um outro componente eu vou até tirar ela daqui ele tem um outro componente chama na link que eu posso usar no lugar do link vou até tirar o link daqui e vou usar apenas o nave link o que muda do nave link para o link ambos vão receber o true ambos vão fazer a navegação tudo corretamente o que muda é que o nave link ele vai

Adicionar uma classe automaticamente nesse link chamada Active quando o link for o atual a página atual Então olha só quando eu tô na home ele fica azul quando eu clico no Twitter ó ele fica preto ele perde aquela aquela estilização né ele perde aquela classe Active cara muito massa a gente já progrediu bastante aqui na nossa aplicação a gente criou a estrutura visual da página de status a nova resposta E agora a gente vai para uma parte mais é interessante né Um pouquinho mais avançada Mas não tem problema a gente vai pro partes bem devagarzinho

a gente vai entender como que a gente faz agora para começar a permitir o usuário fazer interações na nossa aplicação então o que que a gente quer fazer agora né A que é permitir poder capturar os dados do formulário então quando o usuário vem aqui na home por exemplo digita alguma coisa e clica em Twitch né Hoje tá Fazendo nada eu quero conseguir pegar o que que ele digitou aqui e aparecer aqui na tela como um novo Twitch que ele colocou na nossa aplicação Então é isso que a gente vai começar a fazer a partir

de agora e aí a gente vai conhecer um monte de conceitos interessantes aqui do react a gente vai entender sobre Estados do react sobre fluxo de renderizações logo vou falar sobre isso como que a gente lida com eventos né do usuário então o usuário clicou o usuário Fez submet usuário é deu enter e no final a gente faz o layout irresponsivo para então eu te falar um pouquinho sobre os próximos passos nos estudos O que que você deve continuar estudando aí não é ecossistema do react para continuar evoluindo Então bora lá continuar nossa aplicação bora

então continuar nossa aplicação o que a gente vai fazer agora é aqui no nosso formulário de timeline onde a gente tem o nosso formulário para Escrever um novo Twitch a gente quer então que quando o usuário faça um submith nesse formulário aqui a gente consiga capturar o texto aquele dito dentro da text área aqui do Twitter para conseguir adicionar esse item né esse novo Twitter aqui no nosso arrai de twitz Para que assim depois eu posso então mostrar esses tweets em tela vamos lá dentro do forme aqui dentro do react no geral sempre que a

gente quer lidar com eventos a partir de interações Do usuário a gente sempre vai utilizar os métodos on que a gente tem aqui que são atributos de cada tag que a gente tem no HTML por exemplo o forn a gente tem um método aqui dentro um atributo que se chama que ele basicamente vai disparar uma função assim que se forme for enviado recebeu seu limite Então se aqui dentro do meu componente eu crio uma função e não tem problema nenhum eu criar uma função dentro de outra tá e eu chamo ela De creat New e

eu chamo essa função assim que esse formulário for submitado e aqui lembrando utilizando essa a chave porque eu tô passando aqui uma variável né Mesmo sendo uma função ela continua sendo uma variável que é uma variável script ou seja se eu tô passando para ela que eu preciso sempre de Chaves para referenciar um valor do Java script dentro do HTML se eu coloco um cão sou log aqui dentro escrito teste volto para Minha aplicação escreva alguma coisa aqui fica de olho no cônsul aqui e aqui no Consul eu vou inclusive selecionar uma opção aqui chamada

Preserve Love que ele não limpa os lobs quando eu faço um redirecionamento de tela agora olha só quando eu clico em Twitch veja aquele mostrou teste porém mesmo assim ele navegou a gente para mesma tela né que com pontinho de interrogação porque ele acha que eu tô enviando um fome que por padrão no HTML ele usa o método get né Mas tudo bem não é o ponto aqui agora o que aconteceu aqui e eu gostaria de evitar é que houve um redirecionamento Olha só quando Eu preencho fórmula e clico em Twitter fica olhando lá a

bolinha lá em cima ele redirecionou ou seja ele fez o comportamento padrão de um formulário no HTML que é redirecionar o usuário para algum lugar no caso como eu não coloquei esse lugar que é o Action ele mandou para a mesma tela só que como eu tô se me tratando novamente De uma aplicação Spa Eu quero evitar redirecionamentos sempre que possível Ou seja eu quero conseguir colocar o novo Twitch na tela sem precisar recarregar a página do zero por isso aqui dentro do nosso Cray New Twitch como ele é uma função que vem disparada através

de um evento do HTML né todo ontis on Change cara todas essas opções elas são eventos e a função que eu passo para ela como parâmetro vai receber todos os parâmetros enviados Por esse evento ou seja todas essas funções eu consigo ter acesso ao evento Se eu der um consolog nesse evento aqui olha que interessante quando eu venho aqui digito Don Twitter olha só ele mostrou aqui sintético né E aqui ele tem várias informações que é basicamente o evento de submith tava aqui ó Native dentro desse evento eu tenho uma função chamada Revenge quem já

vem aí do Java script sabe que o presidente de fogo nada mais é do que uma forma da gente Prevenir o comportamento padrão de algum evento dentro do Java script ou seja o comportamento padrão de um forno no react ou no htm geral é redirecionar o usuário para outra tela quando eu uso eventff eu estou prevenindo o comportamento padrão agora se eu venho aqui digita e clica em Twitter Olha só cliquei e não rolou nada não rolou o direcionamento o redirecionamento se eu venho aqui e dou um consolo logo teste salvo e Don Twitter aparece

o teste Porém não houve a navegação depois disso show vou até tirar a opção de preserv log aqui para que ele limpe o consolo lá quando do F5 e beleza digito clico apareceu o teste só que ao invés de teste aqui eu quero na verdade obter o valor digitado dentro dessa Dexter E aí para quem já trabalhou com JavaScript provavelmente vai falar bom o valor a forma de eu pegar o valor da Tex eu posso usar um dockment bid por exemplo Twitch ali que é o meu ID e Pego aqui o velho certo aquele não

consegue nem entender exatamente qual que é esse elemento ele não sabe que é o input por isso ele não deixa nem eu procurar o velho porque o JavaScript aqui ele não sabe que isso aqui é um input né então eu teria que fazer uma gambiarrazinha mas o ponto aqui é que não dessa forma a gente não faz no react porque se você lembrar lá do começo da nossa Master Class aqui eu falei muito sobre programação imperativa Muito não mas a gente conversou um pouquinho sobre programação imperativa versus declarativa dessa forma eu estou buscando o valor

do Twitter diretamente de dentro da minha interface só que a gente vai seguir um outro modelo aqui dentro do react que é o seguinte ao invés de eu buscar o valor da Tex area no momento que eu precisar desse valor eu vou anotar este valor numa quando este valor mudar Então olha só se eu criar uma variável aqui fora da Função timeline e já é logo te explico porque que ela tá fora da função timeline Tá eu vou chamar essa variável de New Twitch e vou começar ela com valor vazio e aqui no Tex area

eu vou utilizar o on Change que basicamente vai disparar um evento toda vez que o usuário digitar ou trocar o valor dessa Tex area e aqui novamente como eu criei uma função separada aqui antes que recebe o evento se eu quiser não criar uma função separada aqui para lidar com Este evento e escrever a função já aqui dentro não tem problema eu posso escrever ela no formato de Arrow numa função anônima Então posso escrever ela no formato aqui do Java script que é abre e fecha aparências flechinha abre e fecha a Chaves e aqui eu

recebo o evento novamente que é o nosso evento e aqui dentro eu posso buscar o valor digitado através de even para acessar o elemento que disparou o evento no caso a Tex Ariel que é o valor Dessa Tech Cherry veja que conforme eu digito agora na olha ali ele já dá o consolog com o texto que eu digitei se eu apago tudo ó ele já tira tudo e por aí vai ou seja agora ao invés de fazer o consolog eu vou assinar aqui nesta variável New Twitch o valor de evento target e agora aqui dentro

do Crate New Twitch salvo volto aqui quando eu clico em Twitch veja tá exatamente o que eu digitei lá dentro do nosso Tex Aren ou Seja dentro do react a gente não usa geralmente para formulários é claro que existem várias abordagens E conforme como você vai estudando react mais a fundo você vai conhecendo essas abordagens mas a gente evita buscar o valor das coisas da digamos do estado da aplicação somente no momento que o usuário faz o submet a gente já anota este valor enquanto o usuário preenche esse comportamento a gente chama dentro do react

Calma que não é algo para a Gente estudar agora mas a gente chama de controlled companys que é basicamente essa esse conceito da gente anotar o valor enquanto o usuário digita e logo te explico o porquê que isso É vantajoso Tá Mas vamos lá agora que a gente já tem o valor do novo Twitch a gente quer adicionar esse novo Twitter aqui na nossa lista então poderia fazer tweets ponto push né do Java skate adicionando o nosso novo Twitch que tá dentro de New Twitter antes da gente continuar só a Gente pode ver que o

even aqui ó ele tá dando errinho por quê como eu declarei essa função aqui né fora do escopo do HTML ela não sabe o que que é esse evento Então aqui ó eu vou simplesmente dar um dois pontos do Type Squad falando que esse evento aqui o tipo dele o formato dele é form advent que vem de dentro do react tá isso é claro que é algo que eu já decorei mas tem formas da gente descobrir caso você não saiba isso mas o react geralmente aqui é o dando um Contra o espaço escrevendo eventual ele

traz pra gente ó todos os possíveis eventos que a gente tem no HTML Então olha só tem drag forma que é o que eu usei aqui que geralmente são eventos que vem do formulário Focus maus que vem para o mouse Down Mouse up quando passa o mouse touch Change invaled tem vários eventos nesse caso aqui eu vou usar o Farming que são eventos disparados do formulário geralmente mesmo né se eu adiciono agora como eu falei né se eu Dou um push aqui na minha variável de tweets com o meu novo Twitter vamos ver o que

que vai acontecer Olha só vou dar um F5 novo Twitter vou dar um Twitch Não apareceu nada só que se eu der um consolog nessa variável Twitch vamos ver se está funcionando novo Twitch Twitch tá lá novo Twitch no final por que que não aparece em tela assim que eu adiciono o novo Twitch na minha lista porque o react até por questões de performance Ele não vai automaticamente ficar monitorando toda vez que eu altero alguma variável no java script para então ele ir lá e adicionar as novas coisas em tela ou tirar de tela ele

não faz isso porque isso seria imagina extremamente não performático ficar observando todas as variáveis do HTML todas as variáveis do JavaScript possíveis para ele reagir digamos de forma automatizada as alterações que a gente faz nessas variáveis por isso no React a gente tem um tipo especial de variável que a gente chama de estado que nada mais são do que variáveis como qualquer outra porém que o react monitora sempre que a gente alterar o valor dessas variáveis ou react vai reagir e daí vem o nome ele vai agir a esta alteração Então como que eu crio

essas variáveis mesma coisa const Twitch aqui dentro do componente desta vez tá igual e aqui eu vou usar uma função que vem de dentro do react que se chama US State Ou seja eu quero criar um novo estado e para ela eu passo como parâmetro qual que vai ser o valor inicial deste estado Então vou pegar aqui ó valor que a gente tá começando os meus tweets vem aqui e jogo no lugar dentro do parâmetro aqui do iOS state Deixa eu tirar a variável daqui de cima perfeito a gente criou a nossa primeira variável porém

aqui muda um pouquinho porque o state agora ele não retorna somente A variável Twitch ele retorna mais informações e essas informações até se a gente apertar com o com passa mal por cima aqui ó elas são retornadas aqui ó de dentro do you state elas são retornadas aqui ó como um Away Tá vendo Depois de dois pontos aqui ó é um colchete né que significa um Away elas são retornadas em um Array ou seja dentro do you state ele vai retornar duas informações cada uma delas numa posição do Ray Sempre duas por isso eu Posso

usar a lógica do JavaScript de desestruturação para pegar essas duas informações a informação um e a informação 2 dessa forma a informação um é a minha variável de Twitter então perfeito twitters mesma coisa que a gente tinha lá tá tweets se eu não console nessa variável essa lista aqui da mesma forma que a gente tinha lá na variável essa informação dois aqui é uma função para a gente atualizar o valor da variável Twitch Porque que a Gente tem essa função porque a única forma do react saber que a gente está fazendo uma alteração na variável

Twitch é porque a gente sempre vai alterar a variável Twitch chamando a função setweets Então sempre que eu chamar a função set twitz react sabe que além de eu querer atualizar o valor da tarefa Twitch eu quero recalcular a minha interface com a nova lista de tweets se eu não usasse uma função para atualizar lista de tweets né E eu quisesse usar diretamente o ponto push seria muito mais complicado por react saber quando que a gente mudou a variável de twitters porque ele teria que usar bom funcionamento de proxy aqui interno do JavaScript provavelmente menos

performático então a gente sempre vai seguir para usar o set Twitch toda vez que eu quero manipular a variável de twitters Então se aqui embaixo ao invés de usar o Twitch eu chamo a função set Twitch e passo para ela um arreio com o Meu novo Twitch dentro dela o new Twitch Olha o que que vai acontecer agora salvo aqui dentro novo Twitch clico em Twitch Olha o que que aconteceu a interface reagiu ao meu novo Twitter tá ali porém colocou em tela apenas o meu novo Twitch porque porque Como o próprio nome da função

já diz eu estou setando o valor da variável Twitch eu estou substituindo o valor da variável Twitch ou seja se eu quero apenas adicionar um novo Twitter no fim eu preciso pegar o meu arreio Original copiar todos os itens que eu já tenho lá dentro e adicionar o meu Twitter no final então isso ficaria da seguinte forma eu posso usar o spreads vírgula e o meu novo Twitch no final Isso aqui vai copiar todos os itens que eu já tenho no Rei e aqui eu tô colocando um novo item no fim no F5 Olha só

novo Twitch do botão e olha lá apareceu já no final ou seja eu copiei todos os itens que já tinha e adicionei No final isso aqui é super importante da gente entender no react e por trás disso aqui tem um conceito que daria pra gente muito mais a fundo que se chama de imutabilidade e tem tudo a ver com performance aqui dentro no react esse conceito nada mais é do que no final das contas né de maneira prática a gente nunca altera informações no react Você viu que eu não alterei diretamente a variável Twitch eu

nem mexi nela eu criei um novo arrai de tweets Veja que eu tô criando uma rei do total zero que eu não tô editando o Array original eu tô criando um novo Rei copiando as informações que eu já tinha no Rei e adicionando um novo Twitter no final inclusive posso adicionar ele no começo dentro do colchão dessa forma aqui então agora quando eu boto um novo Twitter ele vem para o começo então no react sempre que a gente for criar um estado a gente sempre tem que lembrar disso a gente não Altera as informações a

gente sempre cria novas versões daquela informação show de bola a gente aprendeu então a capturar dados do formulário a gente conheceu o conceito de estados a gente salvou novos tweets dentro da nossa lista e agora a gente precisa também salvar novas respostas antes da gente ir para o ponto de salvar novas respostas eu queria te mostrar algo bem legal aqui do react que é importante veja que quando escreva que novo Twitch e eu Venho aqui e dou um tweet novamente ele botou um novo Twitter aqui dentro só que a nossa Tex area ela continua com

o texto novo Twitch como é que eu conseguiria fazer pelo código para apagar esse texto de forma automática o que que acontece né Vamos tentar entender aqui na nossa técnica toda vez que a gente muda o valor do texto aqui dentro a gente tá salvando o valor desse texto Dentro da variável Será que eu posso vir aqui no Create New Twitch e fazer algo como por exemplo document.gat Element by the Twitch e fazer um ponto velho igual vazio para tirar o valor do Twitter funcionaria funcionaria a gente faz isso no react não a gente não

faz isso porque a gente chama isso de maneira imperativa de fazer as coisas e como que a gente resolve isso dentro do react dentro do react O que que a gente vai fazer eu vou dizer que essa Tex area aqui o valor dela é New Twitch por que que eu fiz Isso porque agora se a nossa variável New Twitch ela começar com teste salva aqui e do F5 Olha só esse aqui é o nosso valor perfeito só que o que que acontece eu não consigo mais digitar aqui dentro Por que que eu não consigo digitar

aqui dentro porque o valor agora da minha textia ele tá fixo mesmo que eu mude eu tento mudar este valor aqui como essa variável aqui é uma variável Tradicional do Java script e não um estado o react não consegue identificar que essa variável tá mudando ou seja como eu passei o velho New Twitch aqui para ele e esse valor não é um estado react nunca vai identificar que o new Twitch tá mudando tá tendo o seu valor alterado lembra que a gente falou o porquê que a diferença do estado para uma variável tradicional nesse caso

como ela é uma variável tradicional não é um estado o react não vai ficar monitorando As alterações para ele essa variável tem o mesmo valor do começo ao fim por isso se eu quero que a minha reaja as alterações que eu faço na variável New Twitch essa variável precisa ser um Estado então eu criou e os state e agora eu vou começar ela com valor vazio né que seria o valor para eu começar tiro daqui de dentro agora aqui embaixo ao invés de eu fazer New Twitch igual avent.org eu vou usar a nossa função 7

New Twitter setando o Valor para o que o valor para o que o usuário digitar ali na Tex area né então sempre usar essa função aqui que manipula o valor do Estado volto para lá e olha só agora que eu digito novo Twitter tá funcionando seu dom Twitter se eu quero agora apagar o valor É simples é só eu alterar o valor da variável 7 New Twitter por um valor vazio de volta Então olha só quando Eu preencho agora e dá um Twitch ó o react né ele reage as alterações que eu fiz na Variável

no YouTube Então isso é legal Sempre que você quiser que alguma parte da interface mude seja um valor de um input seja algo apareça na tela ou não esta variável precisa ser o estado é a única forma do react saber do react monitorar mudanças em valores de variáveis perfeito vamos continuar então aqui dentro da nossa lista a gente vai agora para parte de salvar novas respostas que vai ser muito parecida com essa então vou até copiar essas Primeiras linhas aqui que eu crio o estado crio Create e vou botar lá dentro do status também tá

então tá aqui dentro a gente vai importar a função e os state dando um control [Música] também importa do react e Prontinho a gente vai trocar o nome das variáveis aqui para entes aqui 7 News [Música] Todos os lugares e aqui 7 então todos os lugares que tinha Twitter aqui as respostas vão ser essas aqui então vou trocar aqui no começo no valor aqui do nosso Estado né do valor inicial dele tira uma variável daqui de cima e agora a gente vai lá para baixo vamos quebrar aqui só para ficar mais fácil visualizar e novamente

recebo o evento e don't set New Andre comotor O resto pode continuar tudo igual apenas aqui no nosso forma também eu preciso passar One Smith volto lá para o nosso Chrome clico aqui em algum dos tweets para cair na página do status vou digitar nova resposta quando eu dar um enter veja já apareceu aqui nova resposta que foi o que eu respondi aqui para o Twitter show de bola então a gente já completou aqui a etapa de salvar novas respostas e agora eu queria antes da gente finalizar aqui Com chave de ouro nossa nossa aula

eu queria te mostrar um pouquinho sobre alguns cuidados que a gente tem que ter dentro do react a partir do momento que a gente começa a trabalhar com Estados aqui dentro perfeito e também queria te falar um pouquinho sobre como que a gente pode lidar com mais eventos no react ali é queria fazer basicamente o seguinte quando usar digita aqui ele dá um Ctrl enter Eu Queria que fizesse o summith automaticamente então a gente Vou te mostrar como é que dá para fazer isso também mas antes vamos entender um pouquinho como é que funciona eh

esse fluxo de renderizações do react que é uma das coisas mais importantes para aprender para quem está começando a trabalhar com essa tecnologia bora então falar um pouquinho sobre o fluxo de renderizações aqui dentro do react se você lembrar bem Uma das coisas que eu falei há um tempo atrás é que a palavra renderização Ou melhor render que vai para renderização no inglês aportuguesado que nada mais é do que um verbo para mostrar em tela se fosse para resumir muito bem e aí quando eu falo de fluxo de renderização eu quero te explicar mais ou

menos como que funciona para o react dedicar ou melhor entender que alguma coisa mudou nessas variáveis de estado que a gente criou ou seja aqui quando eu tô chamando esse método 7 por exemplo Como que o react vai Conseguir mostrar a nova resposta né o novo Twitter aqui em tela o que que acontece por baixo dos panos E aí uma das coisas que é muito importante aqui e o porquê que eu vou te explicar aqui dentro é os cuidados que a gente tem que tomar por causa desse funcionamento do reactio porque olha só aqui dentro

da nossa página de status eu vou colocar um consolog dentro aqui do nosso componente tanto faz o local que ele esteja tá e Dentro desse consolog eu vou escrever renderizou vou salvar isso aqui agora volta aqui dentro salva e veja que ele mostrou renderizou aqui uma vez e aqui embaixo ele mostra até em cinza um pouquinho mais apagado um pouquinho mais opaco não se preocupa com isso várias vezes aqui no react enquanto a gente está desenvolvimento ele vai mostrar as coisas duas vezes mas tudo isso é por causa desse react que não vai Rodar em

produção caso por enquanto você queira só desabilitar isso aqui só para não se incomodar com isso durante essa explicação eu vou desabilitar só para te mostrar tá Vou salvar volto ó mostrou uma vez só tá então o que que acontece tá quando um componente é exibido em tela a primeira vez deixa eu abrir aqui a nossa tela de status tudo o que que tá dentro do código desse componente é executado beleza esse Consolog aqui executou só que um componente no react ele não renderiza apenas uma única vez ou seja esse processo todo o código que

tá aqui dentro não é executado uma só vez na nossa aplicação todo o código que está dentro do componente é executado automaticamente toda vez que eu altero qualquer informação no estado ou seja como quando a gente digita um valor na Tex area eu tô chamando uma função de alteração no Estado todo o código do componente que eu alterei o estado é executado de novo Então olha só se eu venho aqui na resposta e digito qualquer coisa olha só vou apertar só a tecla ó o renderizou se eu for digitando cada vez que eu digito qualquer

coisa aqui dentro ele mostra o renderizou se eu clicar no botão de resposta onde ele também altera o estado ele mostra renderizou de Novo ou seja por que que eu tô te mostrando Isso porque a gente tem que tomar muito cuidado com o que que a gente vai colocar aqui dentro do componente porque se eu criar uma variável aqui dentro seja ló para Que motivo eu criar essa variável e ao longo do tempo de execução da minha aplicação eu mudar o valor dessa variável e depois eu alterar qualquer estado aqui do nosso componente o valor

dessa variável vai ser Zerado porque ele vai executar esse código aqui do zero toda vez que o qualquer Alteração de estado acontecer dentro desse componente ou seja dentro do fluxo de renderização uma das primeiras coisas que a gente precisa entender é que toda vez que alteramos o estado de um componente todo componente é recalculado recalculado ponto ou seja todo o código que tá aqui dentro é executado novamente digo isso não torna o processo lento não torna o react menos performático porque Toda vez que eu digito no input toda vez que eu altero um estado eu

tô recriando tudo isso aqui do zero certo mais ou menos tudo isso que tá aqui antes do return é criado do zero ou seja essa função aqui é criada do zero em memória essa variável que vai ser criada do zero os estados aqui eles até vão ser criados do zero porém reaproveitando O Valor anterior deles né Isso é a funcionalidade que o state traz pra gente diferente de uma variável Tradicional só que o que tá aqui dentro do return que seria o nosso jsx né o nosso HTML isso aqui não é criado do Zero Isso

aqui é importante que a gente entenda que por baixo dos panos o react ele executa algo que a gente chama de algoritmo de reconciliação o algoritmo de reconciliação nada mais é do que um algoritmo de três etapas sempre que acontecer uma nova renderização no componente ou seja alterou o estado seja lá por qual motivo Seja né E esse componente precisa renderizar novamente né executar ele de novo o algoritmo de reconciliação é um conjunto de três etapas que o react faz para detectar o que que ele precisa criar do zero aqui dentro do nosso HTML ele

faz basicamente o seguinte ele cria a nova versão do HTML do componente ou seja houve uma nova renderização ele cria em memória não na tela nem memória a nova versão do HTML do componente Ou seja a nova versão Do que que a gente colocou aqui dentro do return porém com as alterações que a gente fez no estado né as alterações que a gente fez para provocar uma nova renderização segundo ele compara essa nova versão com a versão anterior do HTML ou seja com a versão anterior a alteração do estado que eu realizei como por exemplo

a versão anterior por exemplo do input antes de eu escrever então por exemplo se eu apertei é a ele vai comparar o HTML com o a dentro do Input e o HTML 100 o a dentro do input depois comparado essas duas versões Isso aqui vai retornar algo que a gente chama de defe né que é a diferença como se fosse uma comparação entre os dois HTML ele vai aplicar as operações já vai script para alterar somente o necessário no HTML ou seja se ele percebeu que cara toda HTML tá igual a única coisa que mudou

foi o valor aqui da Tex area que antes não tinha nada e Agora tem a Tecla tecla a com a nova alteração que a gente fez então ele vai executar as instruções por baixo dos panos no JavaScript para trocar isso seja lá sei lá um DOC mente ponto get ele que vai criar essas instruções por baixo dos panos então isso aqui a gente chama de algoritmo de reconciliação é claro que tudo isso que eu tô explicando é coisa um pouquinho talvez mais avançado do react mas é super importante você entender porque se você pretende Trabalhar

com react isso aqui é uma baita perguntinha legal que pode acontecer quem sabe quando você tiver num teste aí para uma oportunidade no processo seletivo isso aqui é muito legal a gente entender o que que acontece por baixo dos panos ainda dentro do fluxo de renderização existem mais dois momentos onde um componente renderiza do total zero renderiza que eu digo é neste processo aqui ó de fazer todo o Processo de comparação o segundo momento em que um componente é recriado é renderizado do zero é quando o botar aqui do mesma forma que eu escrevi o

primeiro é toda vez que o seu componente pai renderizar que que isso quer dizer nós temos o componente status dentro dele eu tenho por exemplo o componente header concorda comigo se dentro do header eu colocar um consolo Heather e salvo e volto lá para o Chrome olha só ele mostrou reder uma primeira vez só que como o componente header tá dentro do componente status que é o componente o qual eu posso fazer alterações no estado toda vez que eu fizer uma alteração no estado do componente status O componente header também entra no fluxo de renderização

olha só ele também mostra os logs ali dentro ou seja ele também cai no algoritmo de reconciliação para ver se Houve alguma alteração dentro do header e existe um terceiro momento onde um componente é renderizado que é toda vez que alguma das suas propriedades mudarem então por exemplo o nosso Twitch aqui ele recebe uma propriedade chamada contente se essa propriedade mudar Seja lá qual o motivo seja o porquê que ela mudou o componente Twitch também vai entrar no fluxo de renderização vai executar todo esse processo do algoritmo de reconciliação para ver se ele então Precisa

ter alterações no seu HTML show de bola isso aqui que a gente aprendeu Cara isso aqui já é assim se você começou do react você começou no react nessa masterclass assim você já tá vendo coisas bem avançadas a gente saiu do total zero para aprender coisas que eu conheço muita gente que programa um ano com react e nem sabe que isso aqui existe então isso aqui é muito interessante super importante é claro nem tudo vai Ficar totalmente claro na sua cabeça desde a primeira vez desde o primeiro contato mas é super importante que você entender

que isso aqui existe por baixo dos planos para Conforme você tiver programando não se deparar com o comportamentos estranhos do reax e é importante entender todo esse fluxo de renderização aqui que eu passei para você e agora para a gente finalizar a parte funcional eu queria te mostrar como que a gente pode lidar com mais um Evento aqui dentro do react que é onde que acontece aqui na nossa resposta no nosso forme Ele só tá enviando a resposta quando eu clico no botão Ender Mas e se eu quisesse enviar o Twitch né a resposta quando

eu não entra não é legal porque como é uma tecla eu gosto que ele possa quebrar a linha mas talvez no Ctrl né Então olha só que interessante tá aqui dentro eu vou criar um carinha chamado on que Down e aqui eu vou chamar uma função Talvez handle rock por um atalho vou criar aqui Randall hotke lembrando como ela é um evento do HTML onde ela também recebe o evento só que aqui o tipo do evento é diferente ele vai ser um keyboard even cuidado aqui no keyboard even que é Global do browser olha só

só que o que a gente quer usar É esse aqui de baixo então Dá um enter para baixo uma setinha para baixo não enter e lá em Cima ele tem que ter importado do react olha aqui ó tem que ter importado reta volta aqui embaixo agora a gente tem acesso a todas as propriedades do evento só que aqui o que que eu vou fazer if ou seja se a tecla que o usuário apertou é enter e também evantry ou seja se ele apertou control + o enter aí sim eu quero fazer o summith do formulário

só que no Mac a gente não usa o control a gente usa o Command e Nesse caso o Command aqui dentro a gente chama de meta aqui então o que que eu vou fazer eu quero que ou o ctrl ou o meta aqui que é o Command Então vou botar isso aqui entre parênteses control ou meta aqui dessa forma Então se o usuário apertou enter e daí apertou junto ou o control ou o Command aí eu quero fazer o summith na verdade é basicamente a mesma coisa que eu tenho aqui em cima são essas duas

instruções salve isso aqui agora voltamos lá e Agora vou testar vou dar um Command enter foi perfeito show de bola já temos isso aqui funcionando e tranquilo a gente pode fazer esse mesmo funcionamento aqui na nossa página de timeline Então bora colocar aqui aqui o que muda é vamos copiar essas duas linhas e jogar aqui dentro e renda ao Hot Kids Global mas precisa ser o kiboard então apaga uma letra digital para não ficar atrapalhando e show de Bola finalizamos mais uma parte super interessante aqui da nossa aplicação por último para a gente não deixar

essa aplicação pela metade vou também junto com você deixar essa aplicação responsiva então o que que eu vou fazer eu vou inspecionar aqui a aplicação vou ligar o modo responsivo aqui na esquerda e vou trocar aqui por um tamanho por exemplo 450 acho que tá um tamanho legal posso pegar aqui um dispositivo também caso eu Quero um iPhone XR por exemplo para a gente tentar ver como é que ficaria e aqui deixa eu botar 100% pouquinho mais talvez 150 perfeito para gente começar a visualizar primeira coisa pode ver uma tela menor né a sidebar ela

acaba ocupando bastante espaço então eu vou começar trabalhando lá no nosso lá no nosso globo.css aqui dentro a gente tem esse layout e esse content aqui só que esses dois CSS aqui na verdade eu vou tirar Eles aqui eu vou dar um Ctrl x vou deixar aqui apenas CSS que Global mesmo isso aqui eu vou botar lá dentro de layouts aqui ó e vou criar o default CSS colocar aqui dentro e importar isso aqui dentro para a gente separar bem o CSS porque as classes elas estão sendo usadas aqui ó legal e contente Então é

bom que o CSS fique próximo aonde as classes são utilizadas e aqui dentro a primeira coisa que eu vou fazer eu vou começar colocando uma mídia Cury Quando a largura do elemento for menor que 780 aqui eu vou botar eu quero que o nosso layout aqui dentro mude a gripe template Collins para sidebar ocupar apenas 80 pixels ao invés de 300 E aí o resto do conteúdo ocupa normalmente o tamanho flexível aqui salvo Voltamos ao Chrome e beleza já dá para ver uma diferença Só que essa saibara e ainda ficou um pouco estranho né Então

bora lá para o nosso sidebar aqui dentro e aí o Que que eu vou fazer aqui na nossa sidebar tá quando o usuário diminuir a sair do bar quando ele diminui a tela eu quero na sidebar e deixar apenas os ícones e tirar o texto como eu quero tirar o texto e vai ser por CSS a melhor maneira que é o englobar cada cada um dos textos com spam então vou fazer o seguinte ó pegar aqui vou botar um spam porque daí depois é só dar um display None nisso aqui né então vamos botando spam

aqui ó os próximos dá para a gente Copiar aqui a tag de fechamento do haue dá um controle de controle de controle de controle de controle de controle de sobe vai para o final vai para o começo e spam copia o fechamento de tag control x a final e pronto então é bom conhecer os atalhos do editor para ser um pouquinho mais produtivo aí na hora de trabalhar com HTML e aí a gente vai fazer o seguinte lá no nosso sidebar CSS eu gosto de aplicar toda parte de mídia curries sempre no fim então Mídia

Max Swift vou botar a mesma 780 para não ficar quebrando em vários em vários Passos o layout aqui eu vou pegar a nossa sidebar e primeira coisa que eu vou fazer nela é diminuir um pouquinho o Perim Então vou usar 1.5 han em cima e embaixo porém nas laterais eu vou diminuir bastante para 0.75 Além disso eu vou pegar o nosso Main navigation a que é o link spam que é o texto e vou dar um display certo então se eu salvar Aqui agora e voltar lá no Chrome Olha só o ícones já estão ali

eles ainda não estão centralizados né então a gente vai fazer o seguinte na sidebar vou dar um itens Center ó já centralizou aqui o nosso o nosso menu e agora que que eu vou fazer aqui também eu vou aqui embaixo é que eu não tô conseguindo mostrar deixa eu diminuir um pouquinho a tela aqui ó 125 olha ali o Twitch tá vendo ó Ele ficou escrito Twitch no meio Só que não fica muito legal né então lá na nossa sidebar eu vou fazer mais ou menos o que a gente fez aqui no nosso menu eu

vou fazer o seguinte eu vou botar o Twitter por volta de um spam e fora dele vou botar um ícone chamado pendril que também vem do Foster Olha só botei o ícone dentro se a gente voltar lá não aparece ainda o lapisinho porque tá ocupando mas se eu tirar o modo responsivo ele vai aparecer lá aquele lápis ali só que eu não quero que o Lápis apareça quando a tela for maior que 780 ou seja o padrão e na tela menor apareça apenas o lápis então que que eu vou fazer aqui dentro aqui no nosso

sidebar CSS antes do Mídia aqui onde a gente tem o Man navigation eu vou deixa eu ver onde é que tá aqui ó sidebar New Twitch Na verdade vou fazer pertinho do botão aqui eu vou fazer ponto sidebar ponto New Twitch svg que é o ícone que eu tenho ali dentro você tá nele uma largura e altura de 1.5 que dá 25 24 pixels porém ou seja na tela no tamanho tradicional ele não vai ser exibido E aí aqui embaixo eu vou fazer o seguinte ponto sai de bar New Twitch display Block certo e sidebar

opa sidebar New Twitch spam que é o texto que está dentro do botão Então volta aqui no Chrome Olha só agora fica só o ícone ali e olha eu clico já consigo navegar na nossa aplicação tranquilo aqui se eu for aqui dentro na Página de responder ficou um pouquinho ruim né porque o botão de responder o Twitch ele acaba também ficando ali um pouquinho escondido né então aqui o correto seria também a gente dar uma uma trabalhada nisso aqui então vamos ver como é que a gente pode melhorar isso tá aqui dentro da página de

status nós temos Label Button aqui eu vou fazer o seguinte eu também vou fazer a mesma coisa tá vou Botar um spam aqui por volta do enter aqui eu vou colocar um ícone vou botar um ícone de acho que tem um ícone que é tipo um aviãozinho Deixa eu lembrar lá do Foster icans lembra qual que é o nome do ícone aqui ó vou botar esse paperplane right pode ser volta aqui no status CSS aqui vou pegar o CSS do nosso botão svg Max 780 pixels vou pegar o mesmo svg display Block e aqui vou

pegar o nosso spam display não que é o texto salvo voltamos lá dá uma olhadinha Beleza já ficou melhor porém ainda dá para melhorar vou diminuir um pouquinho quando ele tiver nesse tamanho aqui eu vou diminuir um pouquinho para o dele então vou botar a pele 0.75 em todos os lados Beleza já ficou melhor só que o text area aqui ainda tá um pouquinho grande aqui dentro da nossa aplicação Isso se deve eu acho que nem é por causa tem algum elemento que tá Por volta aqui que ele já tá fazendo aplicação ocupar mais espaço

né deixa eu tentar diminuir a largura do Tex Air forçado para ver se é isso Ah não é o tex mesmo diminuir aqui ó e já Coube tudo certinho então o que que eu vou fazer aqui tá eu vou no nosso teste arian deixa eu ver aqui ele tá com Flex 1 Label também Flex 1 o nosso forme aqui Alto talvez não aqui não tá colocando deixa eu ver como é que eu consigo dar uma diminuidinha nesses o que eu vou fazer aqui na verdade eu vou pegar aqui o nosso ensor Twitter e vou diminuir

um pouquinho fonte size dele botar um Remo ao invés de 1.5 que eu tava usando voltamos lá e pronto já tá um pouquinho menor também não fica desconfortável no mobile e pronto a tela já tá ok a home Aqui também tá ok Aqui não tem problema o texto ficar maior Porque o botão de Twitter tá embaixo Então é isso O que a gente pode ver aqui é que a nossa aplicação quando ela não tem Twitter suficiente a Barrinha que a bordinha ela não fica até o final então uma das coisas que eu posso fazer é

aqui no nosso default CSS o nosso layo layout aqui eu acho que eu posso botar nele um High salvo e pronto olha só então agora a altura mínima do nosso layout que é o que está por volta de toda aplicação é 100% da tela né aqui a gente tem que usar o viewport High Não por cento porque senão por cento não funciona então show de bola agora sim a gente finalizou a nossa aplicação com chave de ouro aí totalmente funcional é claro que essa aplicação ainda tem bastante coisa aonde a gente poderia melhorar ela né

até porque hoje ela não tá conectada com o backchand ou seja sempre do F5 eu perco todos os dados a gente ainda não entrou afundo na parte de conexão com a Pi claro que o react vai muito mais a fundo mas aqui com certeza você dominou os principais fundamentos Por volta do react Então vamos dar uma olhadinha de tudo o que que a gente aprendeu aqui a gente construiu um projeto do total zero para o teu portfólio Vale super a pena subir isso aqui pro github né a gente conheceu toda a história do front-endi de

como que a gente partiu de desenvolver aplicações onde o back Angel responsável tanto pela parte de Interface quanto pela parte sensível de banco de dados autenticação regras de negócio a gente entendeu o que que é o react a gente instalou o node a gente aprendeu como que Nós criamos aplicações com react entendemos o conceito de compailers utilizamos o Vit a gente configurou o vscold para trabalhar com react a gente conheceu a estrutura do projeto Vit o que que são componentes o que que são propriedades propriedades do tipo tildan trabalhar com types de Dentro do react

a gente entender como trabalhar com CSS dentro do react criamos toda a estrutura visual da nossa aplicação tanto a home page entendemos Quando que a gente deve separar componentes dentro do react quando mantendo o mesmo componente a gente entendeu também como fazer interações que são os laços de repetição dentro do react a diferença do map pro foreigitte a gente entendeu o que que é a propriedade que que a gente utiliza para Performance dentro do react quando a gente está fazendo interações aprendeu Como trabalhar com rotas no react como que a gente cria layouts reaproveitáveis a

gente criou a estrutura página de status entendeu Como capturar dados do formulário na inputs do usuário o que que são estados no react conceitos de imutabilidade fluxo de renderizações entendeu um pouco quando que um componente renderiza o que que é o algoritmo de reconciliação aprendeu a Trabalhar com eventos do usuário aprendeu a deixar Nossa aplicação responsiva cara é muita coisa que a gente aprendeu aqui nessa masterclass e agora claro não podia ser diferente eu quero deixar um pouquinho também os próximos passos aqui para você no estudo coisas que eu acho que são interessantes você estudar

caso você queira continuar aprendendo react daqui para frente então bora lá Ufa e sim parabéns por ter chega até o final dessa aula comigo e a essa Altura depois de 4 horas aqui de muito código eu tenho certeza que tu já percebeu O Poder do react né eu sou meio suspeito para falar mas o react é uma das minhas tags queridinhas aí já faz sete anos mais ou menos além de ser uma das bibliotecas mais usadas no mundo desde pra de sites até apps extremamente robustos ainda é muito versátil produtiva e performatica e além dessa

masterclass aqui eu tenho uma oportunidade única para te apresentar Aqui uma maneira de te conectar com todo o conhecimento que eu tenho nessa ferramenta ao longo desses anos mas antes deixa eu te falar o porquê dessa empolgação por volta do react que Definitivamente não é um Hype temporário o react ele dominou o mercado Frontier e praticamente todas as empresas grandes de tecnologia hoje usam react eu poderia ficar aqui listando várias mais na Netflix Apple Spotify figma discord notion Microsoft por aí vai se você Fizer uma pesquisa rápida filtrando só vagas disponíveis nessa semana no Linkedin

vai ver que são mais de 54 mil oportunidades disponíveis envolvendo react e de acordo com o site de vagas como o Glass Thor contabilizei e cu Dash a média salarial inicial de um Dev react é de 3.645 por mês podendo chegar a mais de 8 reais no nível Senior o melhor disso tudo é que você nem precisa sair de casa para ganhar isso porque grande parte das vagas são remotas E você ainda Tem a possibilidade de trabalhar para empresas de qualquer lugar do mundo poder até mesmo receber em dólar já imaginou o número de profissionais

que vivem no Brasil mas trabalham para o exterior aumentou em 491% entre 2020 e 2022 e desenvolvedores são os profissionais mais requisitados nesse sentido ou seja é uma ótima oportunidade de carreira no momento atual do mercado mas Além disso Tem outros critérios que provam que react é Uma escolha inteligente para você se especializar hoje ela é mantida pelos engenheiros do meta dona do Facebook Instagram WhatsApp ou seja existe um time de Engenheiros de alto nível por trás dessa tecnologia outro critério é a comunidade o ecossistema Por volta do react que é gigantesco Ainda mais por

ser uma biblioteca do ecossistema já vai script que é atualmente a linguagem com a maior comunidade do mundo aproveitando popularidade o react Ganhou muito espaço No mercado e trouxe uma abordagem totalmente nova também para o desenvolvimento mobile com react Native ou seja com os mesmos conhecimentos você desenvolve aplicações para web IOS e Android além do universo web e Mobo você ainda pode reaproveitar grande parte dos conhecimentos no universo backend usando que vem tomando cada vez mais espaço de linguagens tradicionais de backendi principalmente pela simplicidade performance e arquitetura Ou seja java script é a melhor opção

para você se especializar dominar essa linguagem e também o react te abre muitas oportunidades para acessar as melhores vagas do mercado Isso porque é muito difícil encontrar programadores que sejam qualificados para lidar com desafios reais com Essas tecnologias Resumindo tudo não existem Limites Pra onde você é capaz de chegar dominando essas ferramentas e esse é só o começo e eu sempre falo que na programação o Aprendizado é contínuo e sempre vai existir um próximo nível Então se dominar react e toda stack já vai script que eu te apresente aqui e se tornar um profissional completo

faz sentido e tá alinhado com o teu momento eu quero te apresentar o Ignite brevemente o Midnight é um bootcamp intensivo 100% online e mão na massa para você dominar java script e acelerar a sua etapa especialização é um treinamento para quem já domina fundamentos da Programação totalmente baseado nos pilares da nossa metodologia aqui na Rocket foco prática e grupo direto ao ponto em bibliotecas e frameworks para você dominar do zero o front end web com react com note e Mobilete além Claro de todo o ecossistema por volta dessas ferramentas e também você tem acesso

assim que você assina o programa é imediato as trilhas de react react Nate renote mais de 36 projetos práticos para você codar e ampliar o seu portfólio se Liga em algum deles aí e metodologia completa e avançada para você dominar profundamente o Java script uma trilha completa de soft Skills habilidades comportamentais para você se destacar no mercado suporte contato integral com todo o time da Rocket City encontre Vivo mentorias e muito networking com defics que trabalham em gigantes do mercado comunidade exclusiva do Ignite com milhares devs para você potencializar o seu Network evoluir além do

código fórum Exclusivo para dúvidas crises e vários desafios para você fixar o conhecimento e Claro no fim certificado de conclusão reconhecido pelo mercado com Midnight você não precisa mais perder tempo procurando vários cursos vídeos e artigos pela internet para se manter em dia nessas tecnologias em um só lugar você tem acesso ao conteúdo mais atualizado do mercado e conectado com que as empresas estão buscando e quando eu digo que é o mais atualizado Eu não Falo da boca para fora é porque nos últimos meses a gente adicionou mais de 10 novos projetos totalizando mais de

400 aulas com que há de mais atual nessas tecnologias teve conteúdo novo na construção de design Systems projetos utilizando next Yes vários módulos novos de react Native atualização de conteúdos na trilha de node E por aí vai mas tem muito por vir e o melhor é que assinando agora tu ainda tem acesso a todas essas atualizações inclusas e aos novos Conteúdos que vão sendo liberados todos os meses daqui para frente você tem um ano de acesso a uma plataforma completa de evolução com acesso imediato a todo o conteúdo para estudar a tecnologia que fizer mais

sentido para você e assim você pode assistir às aulas no teu ritmo quando quiser quantas vezes quiser o Ignite se encaixa na tua rotina para você consumir o conteúdo conforme e conseguir consultar tirar dúvidas e tá ali sempre que você passar por algum Desafio Essa é a forma mais veloz eficaz e sólida para você se especializar nas tecnologias mais modernas e se preparar para os desafios do mundo real então se você tem interesse em saber mais Dog night eu tenho uma notícia bem massa para ti eu tô te liberando agora sete dias para você testar

o Ignite de graça sério não tem pegadinha você vai receber acesso como aluno sem precisar colocar cartão nada disso e simplesmente pode acessar todo o conteúdo disponível para Ver se ele faz sentido para ti nesse momento Esse é um presente pra você e que aí que quer se especializar em react em todo esse aqui é o sistema do Java script seguir estudando e quem sabe se tornar um aluno ou aluna do Ignite em breve Então toca no botão aí próximo a esse vídeo para se cadastrar e começar a estudar agora mesmo com esse seu teste

e gratuito e a gente se vê lá nas aulas tchau tchau [Música]