Como criar um projeto em React e Typescript para seu Portfólio? | Hipsters: Portfólio Dev

[Música] boas-vindas a mais uma websérie aqui da lura eu sou Fabrício cararo e essa é a portfólio Dev é uma nova websérie que a gente tá criando aqui na alura para você que tá começando nesse mercado de programação ou então já tá mais avançado Talvez Mas você quer praticar o que você está estudando ou que você já estudou você quer refrescar alguns conceitos e cada mês aqui a gente vai trazer Convidados mais do que especiais para criar um projetinho do zero junto com você e é um projeto que você vai poder usar exatamente como portfólio

no seu github né quando você tiver procurando um emprego novo ou simplesmente para deixar lá como uma atividade que você fez para reforçar E refrescar os seus conhecimentos e nesse primeiro episódio aqui da portfólio Dev eu trouxe uma pessoa muito especial que tá sempre com a gente aqui Mário solto que é líder de Fron lá no nubank como é que você tá máo E aí Fabrício Belezinha tô ansioso aqui para trazer o conteúdo de hoje pra galera que eu tenho certeza que vai fazer Total diferencial quando você for não só mostrar ele no seu portfólio

mas explicar as coisas que você fez nele e as features e outras paradinhas que a gente vai tá trazendo aí também o que que vai ser mais ou menos o projetinho que a gente vai fazer hoje boa a gente vai est construindo um quiz e aí você Fica p mas como assim um quiz é meio Show do Milhão uma par assim é é um pouco nessa Live inclusive se você quiser fazer o seu do Show do Milhão botar o Silvio Santos ali no fundo fica Total aberto aqui a ideia é basicamente aproveitar conceitos básicos de

programação como por exemplo objetos a Reis e a a parte base ali que você que todo mundo deveria ter consolidado JavaScript para construir um projeto que visualmente tem um apelo legal Você Coloca ali no seu currículo e tudo mais mas tem muito valor quando você descreve o porquê das coisas então pô por que que a gente optou por usar essa estrutura de dados como que a gente tá fazendo para e mostrar essa informação não mostrar separar bem a parte do que que é dado da aplicação do que que é a interface da aplicação acho que

um erro muito comum de quem é front não ter essa distinção Clara porque tá muito próximo né o código que cria o elemento do código que Mexe o elemento do Como faz aparecer ou não na tela Então acho que esse esse vídeo aqui em específico é direcionado para você que já até tem base de JavaScript mas não confia tanto tá aquela base ali meio meio té de vidro sabe se pisar um pouquinho com a pedra quebra é muito bom e esse projeto se conecta com outros projetos que a gente tem aqui na lura né como

o Tech Guide e o s Days of code que por acaso o Mário solto participou dos dois né ativamente Criou um desafio lá no s Days of code por exemplo são Desafios que você vai fazer sozinho ou sozinha durante S Dias desafios legais de código e tal aqui você vai fazer junto com o Mário solto os dois você pode colocar no seu repositório lá no github mas eh aqui a gente tá dando mais opções para você colocar no seu portfólio fazer ele crescer cada vez mais e claro tem muita gente que aprende a programar sozinho

ou sozinha em casa mesmo com cursos e é Excelente tudo bem mas tem gente que também quer ter um diploma quer uma carreira acadêmica né ter aquela coisa ali no currículo para colocar mais para isso tem os cursos da FIAP também que é aqui do nosso grupo aura você vai conseguir fazer lá por exemplo uma análise e desenvolvimento de sistemas que você vai conseguir se aprofundar Ainda mais por exemplo né nesse temas aqui de criar sistemas web não só web que que inclusive é o curso que eu fiz Também né na faculdade eu fiz anál

desenvolvimento de sistemas sou formado excelente E tem também as pós né pós Tec outras pós-graduações diferentes então dá uma olhada lá na FIAP também mas sem mais delongas Mário solto o palco é seu Bora pro código Então galera é o seguinte chegou a hora da gente começar a criar aqui o nosso projeto do portfólio Então qual que é a meta a gente vai usar o react para construir o nosso alora Quiz essa aqui é a nossa Meta o que que é o alora quiz Mario alora Quiz é o projeto que vai fazer você ficar mais

motivado na hora de trazer esse projeto do portfólio à vida porque você vai poder trazer algo que você você gosta pro seu portfólio no caso aqui eu peguei a temática de superherois como algo mais padrão Mas você pode pegar novela pode pegar série alguma coisa que você curte mais e tentar trazer aqui ó tem toda a estrutura para fazer a pergunta para Saber o que tá certo o que tá errado que a gente vai construindo aqui ao longo dos próximos passos Belezinha é eu vou até dar algumas dicas para você conseguir bolar as cores do

seu jeito também enfim o máximo de dica que eu puder dar para esse projeto ficar com a sua cara vai rolar aqui e até trazer alguns conceitos como por exemplo a ideia de White table né que é um projeto genérico que você consegue preencher com qualquer conteúdo é mudando algumas Configurações simplesmente conseguindo ter alguns sucessos aqui então essa minha meta com você hoje aqui a gente construir isso aqui juntos belezinha só que aí é a gente precisa começar por algum lugar né então eu recomendo que você venha aqui na documentação do react Lembrando que para

conseguir acompanhar Esse vídeo é importante que você tenha uma base já de html CSS JavaScript que vai ser importante para você conseguir pegar aqui todo o conteúdo que eu tô te Passando então tá aqui o vídeo a thumbnail e tudo mais tudo certinho como coisas do do que são do próprio re então isso aqui é a sintaxe de um componente daqui a pouquinho a gente vai explorar mais isso aqui para valer porque que tem esses parênteses aqui dentro então com calma a gente vai vendo cada uma dessas coisas aqui beleza e o react tem várias

formas de você conseguir trabalhar mas eu vou ir direto com vocês criando uma ferramenta aqui ó seguindo o tutorial do Get started with Framework tá que é o jeito mais fácil de você começar a criar um hoje em dia porque ele Abstrai muita coisa tá tem vários detalhezinhos que você precisa configurar na hora de criar um projeto react e esse aqui já dá bastante coisa pronto pra gente começar que eu vou até explorar e explicando com vocês aqui passo a passo Beleza então Ó você precisa ter o node instalado na sua máquina eu recomendo a

versão LTS porque é mais estável a curente sempre tem Alguns bugs aqui e tudo mais eu vou colocar eu vou pedir para vocês também não rodarem direto só esse comando aqui ou você pode até rodar no seu mas eu vou pedir que antes você acompanhe comigo do jeito que eu vou fazer aqui porque por mais que eu vou usar um Framework eu quero que você tenha noção do processo do porquê das coisas então vamos seguiro o passo a passo que eu vou trazendo aqui com o Next que eu acho que vai ficar mais Fácil então

ó clica aqui no get started vem aqui na parte de instalação dentro de instalação ele já vai sugerir aqui versão do node sistema operacional e tudo mais para você dá o passo a passo e a própria documentação sugere que eu tô te falando aqui ó essa parte de fazer uma instalação manual Então é isso que a gente vai fazer agora então Ó que que eu vou fazer eu vou criar uma nova pasta aqui no meu na minha área de trabalho aura Quiz vou abrir e na verdade eu vou Fechar e vou abrir aqui o meu

vs code e já até abriu aqui dentro da pastinha Mas ó basicamente eu vou até eu vou só arrastar a pasta aqui para dentro vou dar um close folder na atual e vou arrastar a pastinha aqui para dentro só para vocês verem abrindo normal mesmo então vem para cá tananã bonitinho Beleza então Ó eu vi aqui agora e vou fazer o seguinte eu vou fazer um npm nit Men Y pra gente criar um novo projeto JavaScript usando aqui o node tudo mais como que eu sei que eu tenho esse comando roda aí NP Men v

e node Men V sempre que você instala o node o npm vai est disponível para você poder trabalhar e tudo mais eu vou criar aqui também um ridm do nosso projeto tá Quiz o aparece quando você tá criando um projeto seu então se eu pegar aqui por exemplo eu vier no github ou Maro solto aqui né então no caso se você criar um repositório com o seu usuário Do github e você botar um readm nele aqui você consegue ter a descrição do seu perfil do github ou a descrição de um projeto se for um projeto

específico tá então se você for pegar aqui na minha nas coisas que eu já fiz eu tenho por exemplo esse responsive Styles aqui né que é um projetinho que eu fiz em flutter né E aí ele vai mostrando aqui como funciona e tal como você pode trabalhar essa aqui é a ideia Beleza então tá aqui o rme bonitinho E vamos voltar pra prática aqui agora você po você pode botar descrição enfim por hora não vou preencher tanto assim vou botar três pontinhos você usa sua criatividade com os vídeos que eu vou botar aqui na descrição

para te ajudar a complementar tanto essa base de JavaScript quanto aqui algumas dicas extras que eu posso dando desafios para vocês e tudo mais então beleza primeira parte feita volta pro tutorial a gente vai fazer aqui a instalação das Bibliotecas que a gente precisa Então vou colar aqui o comando no terminal de novo essas bibliotecas são base pra gente conseguir rodar né o react com esse Framework que é o Next Então eu vou deixar aqui o setup rodando foi bonitinho uma vez que as coisas foram instaladas elas vão ser mapeadas para esse arquivo aqui de

do package json nessa sessão de dependências tá elas vão tá aqui instaladas vai ser gerado essa pasta node modules e aqui tem uma coisa Super importante eu votar o usando Git nesse projeto aqui é super importante que você Rode aqui o comandinho npx Git Ignore node para is sair de 7.000 arquivos para só salvar esses quatro arquivos que a gente tem esses quatro aqui que são de verdade o que compõe o nosso projeto a pasta node modul sempre pode ser apagada e recriada se você rodar o comando npm install então se você apagar ela e

rodar npm install o node vai ler o se a parte de Dependências desse arquivo aqui e vai baixar tudo de novo da internet para gerar essa pasta com os mais de 7.000 arquivos aqui tranquilo feito isso a gente pode começar a rodar aqui o nosso projeto eu vou criar aqui um comandinho de Dev e vou colocar aqui ó next Dev é o primeiro comando que a gente vai ter aqui do projeto se eu rodar npm Run Dev ele vai quebrar ele vai falar ó por favor crie uma pasta pages ou uma pasta App no seu

projeto no caso eu vou seguir A versão mais nova do Next e vou criar aqui uma pastinha app npm Run dev aí ó em teoria ele rodou tudo certinho vou vir aqui no navegador local R 3000 e falar Putz ó página não encontrada deu not found aqui como é que deu isso vou explicar quando a gente cria o projeto a gente cria aqui o comandinho de Dev para rodar e tal roda ele para conseguir ver o projeto rodando faltou a gente criar alguns diretórios tá então do jeito que o Next funciona Hoje a gente teria

que ter mais dois arquivos aqui não Obrigatoriamente os dois mas precisa ter os dois tá ele vai criar o outro aqui pra gente o primeiro aqui é esse do hello world aqui ó que é é a nossa página de fato então para criar a nossa home do projeto dentro aqui de app eu vou ter que criar o page ptsx e eu vou colar o conteúdo aqui dentro tá ele vai explodir el quebrou aqui deu errado eu vou até colocar JS Primeiro só para vocês verem aqui ó npm Run Dev ó rodou já abriu se eu

mudar paraa tsx continua rodando igual pô Maro mas eu não sei typ script eu vou me perder com as configurações Fica em paz criando o projeto da forma que eu fiz aqui tá criando dessa forma mais mais crua repara aqui ó o typescript na maioria das vezes ele vai servir muito mais como um auto complete do que qualquer outra coisa ess P Como assim ó tá vendo que aqui ele mostra que Children é um react Node se eu tirar isso aqui Children pode ser qualquer coisa o padrão do JavaScript já é esse aqui então por

padrão as coisas são qualquer coisa da forma que eu tô construindo aqui com vocês fica mais fácil da gente conseguir trabalhar as as configurações no geral do projeto você conseguir passar o mouse em cima do componente e saber exatamente o que ele deveria receber e tudo mais pode ser que por agora não esteja Fazendo tanto sentido você não veja tanto valor assim mas eu te garanto que daqui a pouquinho conforme a gente começar a construir os próximos componentes as outras estruturas vai ficar mais claro e vai ficar mais tranquilo Beleza então vamos lá vou fechar

aqui o layout ó ele gerou esse arquivo TS config Jon aqui também vou só salvar aqui deixar separadinho você vai poder pegar os meus arquivos também depois para consulta e tudo mais E Lembrando que se você fizer igual eu né criar com jav script depois mudar para pon tsx aqui e tudo mais sempre bom desligar e ligar o projeto para garantir que tá tudo certo e evitar possíveis bugs beleza por hora é isso o x aqui no final da extensão ao invés de ser só typ script é porque aqui dentro a gente tá escrevendo o

conteúdo do HTML do react que é o tal do jsx então jsx é igual o HTML do react Ele é igual HTML tem algumas Poucas diferenças mas que na prática a gente vai conseguindo ver junto aqui e trabalhando em cima Então vamos lá fizemos aqui a parte base mas a gente quer construir na prática o nosso alura Quiz aqui né então vamos começar estruturando aqui o que que a gente tem ter no projeto né então a gente tem que ter o nosso logo do L Quiz a gente tem que ter o Card pedindo nome a

gente tem também o nosso footer Então essa aqui é estrutur na prática Essa parte parte aqui é realmente a home do projeto é a parte mais Base aqui mas o que eu vou est focando com vocês na parte de construção no geral mesmo vai ser principalmente a parte das perguntas já E aí algumas coisas eu vou colocando como desafio e tal mas como a casquinha é a mesma dá pra gente usar como inspiração aqui e fazendo se a gente fizer isso essa parte mais casquinha geral serve pr os dois dos dois casos aqui e a

gente vai trabalhando em cima Beleza mas vamos lá primariamente aqui vamos começar a definir essa estrutura de código mesmo né então eu vou tirar esse H1 sozinho e vou botar um parênteses aqui e vou começar a botar tags do HTML Então vou botar aqui uma tag Main eu vou botar aqui também o teste suas habilidades eu vou copiar aqui o textinho também vou botar dentro uma tag p e vou botar aqui o logo então vou botar Aqui uma tag footer aí a gente tem que ter o orgulhosamente criado com o d sotin alura soltinho e

a alura beleza então aqui a gente a gente tem o nosso cabeçalho aqui o textinho e aqui dentro a gente deveria ter né eu vou botar como uma tag P só para indicar aqui mas ter que ter o formulário eu sei que você já fez isso aqui alguma vez na sua vida já de deixar marcado com texto mesmo e o botão beleza Perfeitinho aqui tá então posso pegar aqui os comentários aqui de cima e vamos ver como é que tá o output aqui do outro lado perfeitinho então carreguei aqui a página agora quero só fazer

um testezinho se eu comentar isso aqui ó se eu apertar o Command barra ele tá com Live Reload também Então essa é uma das vantagens a gente tá com node instalado na máquina para rodar porque ele cria esse servidorzinho de desenvolvimento aqui e A gente consegue ver o nosso projeto compilando e rodando aqui pra gente tudo perfeitinho Tranquilo então agora chegou a hora da gente começar a botar um pouquinho de estilo no nosso projeto Né repara se você for Seguindo aqui a documentação do projeto ele vai dando outras dicas também que várias delas eu vou

ir passando com vocês aqui junto aqui agora e tudo mais por hora uma coisa que eu quero é a gente começar a carregar um pouco de CSS Então vou est usando aqui o CSS modul PR gente carregando aqui os arquivos CSS e montando a nossa página eu vou criar aqui um arquiv que vai ser o Card module.css eu caí aqui pela parte deação CSS modules como que isso aqui funciona na prática basicamente eu V criar aqui uma Card vou vir aqui ó pegar o nosso L como referência vou pegar essa corzinha aqui da borda dele

e vou botar essa cor de Borda básica que a gente tem aqui border um PX Solid E aí eu vou fazer o seguinte ó eu vou fazer o Import desse arquivo aqui ó Import Card from Card mod ess Card Styles E aí ó em volta de toda essa estrutur aqui eu vou botar uma div onde essa div recebe aqui o Class name do card Styles pcard que é o nome da classe que a gente botou aqui e todo o resto vai aqui Dentro então carreguei aí ele não conseguiu resolver aqui ó ele falou aqui ó

Faltou um ponto barra então faltou a gente dá o endereço de onde é que tá no nosso esquema de pasta aqui do projeto onde é que tá esse arquivo CSS aqui né então o ponto barra fala ó no diretório atual pega esse arquivo aqui então carreguei belezinha só que tem outras coisas estão meio feinhas ainda aqui né por exemplo tem essa margem aqui em volta tem essas coisinhas então tem mais Ajuste fino pra gente fazer que que eu vou optar por hora eu vou fazer o seguinte com vocês eu vou vir aqui ó e vou

criar um outro arquivo que vai ser o global.css que vai vai ter configurações Gerais de CSS que a gente vai ter aqui do Projeto vai ser como se fosse o nosso reset Então vou botar aqui ó pading zer marg zer e esse arquivo aqui do Global eu vou fazer importe aqui no layout tsx ó Import P bar Global CSS aí resetou aqui todas as coisas pra gente agora tá Tudo mais coladinho mais juntinho aqui daí beleza aí aqui agora vou botar um box sizing Border que é um ajuste do pading né do CSS para ele

conseguir ficar funcionando somando na largura dos elementos e tal para ficar mais encaixadinho bonitinho outro ajusto que eu vou fazer eu vou botar no Body eu vou botar o Font Family sun serif então agora fica uma fonte mais sem serifa mais bonitinha mais próxima Do que a gente tem aqui daí agora é a gente começar a realmente estilizando aqui as coisas né então por exemplo ó o texto aqui do header tem um tamanho de 16 então o que que eu vou fazer eu vou vi começar a definir aqui então no card mod vou fazer aqui

agora ponto Card header então o elemento header filho direto des Card eu quero que o Font size dele seja de 16 PX e eu quero também que esse carinha Aqui ó ele tenha um pading de 33 e um de 17 ou 18 aqui repar que a pessoa de design que fez acabou não ajustando tanto mas eu vou botar aqui o de 18 normalizado de todos os lados e esse é o tipo de caso que se você pegar em consistência no layout você pode pegar e conversar com a pessoa de design aqui então o meu caso

vai ser 33 188 pading então é 33 é 18 de altura e 33 Nos lados aqui carreguei aqui a aplicação vamos Ver ó ele já começou a dar um espaç amen aqui repara que o H1 não pegou o Font size que a gente definiu aqui né então no caso eu vou tentar aqui ó Card header title então eu vou especificar que é o title aqui desse elemento daí aqui no H1 eu posso botar um Class name title normal Lembrando que Class name é o atalho porque seria o Class do próprio browser né ele tá traduzindo

esse H1 aqui Pro Class do browser aqui perfeitinho Então tá aqui beleza o header pegou o estilo do title aqui ele não pegou Então vamos voltar para cá ó então repara aqui o CSS mods ele tá sendo muito mais específico aqui ó ele não tá nem deixando a gente fazer essa seleção por elemento fil aqui né então se eu botar um outro classname aqui ele quer que a gente vá direto nesse caso em específico eu vou preferir então que a Gente Coloque aqui então um subnível específico aqui né do card header aqui e card header

tá title e eu vou até trocar e deixar mais direto por que que eu vou isso aqui se que que a gente pode fazer algum nível de CSS mas tem que ser com as tags do HTML Então dessa forma aqui a gente deixa mais isolado o que que é cada um dos elementos né então a gente tem aqui o Card a gente tem o Card header e a gente vai ter também aqui Embaixo o header title agora já tá mais alinhadinha aqui ó então aqui certinho Card header ele não pegou aqui os Ah falar o

pad e agora cada um tá com seu estilinho aqui bonitinho perfeitinho outra coisa que faltou foi a gente pintar aqui o fundo né Então o fundo tá aqui então background color e aqui entra um do gato legal então já aqui a parte base certo mas que eu quero Fazer com vocês eu gostaria que de alguma forma essa parte do do tema né das cores que a gente tá trabalhando fosse um pouco mais a sua cara também que você possa definir então ó Eu Vou sugerir que você possa vir aqui no colors.co aí você pede para

ele gerar aqui uma paleta e você pode escolher tons que façam mais sentido para você então ó clicando aqui nessa gradinha você consegue escolher algum Tom e vim trabalhando em cima perfeito por que que Eu tô sugerindo isso porque aqui a minha meta agora é dar um pouquinho mais de cara de aplicação White Label que eu comentei então o que eu vou fazer ó eu vou criar aqui um CSS de Rot tá então vou tá criando o CSS da da raiz aqui e eu vou dizer que a cor primária do nosso projeto aqui é essa

aqui então Ó tô criando o CSS de raiz aqui do projeto tô botando a cor primária e eu quero acessar isso aqui com uma variável de CSS da cor Primary aí ele tá colocando aqui ó que dentro do card module você não pode botar essa definição solta assim não s você tem que ser mais específico como eu quero uma definição mais raiz de CSS mesmo eu vou tirar daqui e vou botar no arquivo do global e vou até marcar com comentário aqui ó tema do CSS ou CSS team eu vou até botar antes de tudo

aqui em cima pra gente ter claro o que que é o reset e o que que é o nosso tema aqui no nosso arquivo Global repara que a cor Continua aplicando ó se eu dar inspect aqui a diferença aqui ó no CSS aqui agora ele deixa claro que essa variável Primar aqui el aqui no Rot da aplicação do CSS tem essa definição aqui e vou fazer a mesma coisa para text Então vou definir que o texto padrão é o branco aqui são é o FF são seis FS aí ele fica definid bonitinho aqui pra gente

aí eu vou até botar aqui no body ó o Color tem o var disso aqui porque agora todo o nosso projeto tá com essa Corzinha mais do do jeito certo aqui beleza daí eu vou dizer que o o background do bo aqui ó background color ele cadê a gente pode ter uma cor de fundo aqui né então no meu caso como eu tô trabalhando com o texto Claro o fundo tem que ser escuro Então vou botar aqui o fundo por padrão vai ser um Fundo 2 2 2 2 2 e eu vou dizer que aqui

ó que ée o var BG E aí já deu uma outra cara para Como que o nosso Nossa aplicação tá rodando aqui beleza repara que já já Mudou muita coisa aqui certinho Então beleza pintamos aqui o fundo então fizemos aqui definição geral Voltamos para cá vamos definir que aqui também vai usar o primary e consegui padronizar Beleza agora tem que começar a fazer as definições mais gerais do componente aqui né então Ó a largura máxima dele é de 350 pixels né Então tá aqui ó 350 aqui do figma você pode olhar aqui do lado também

nessa Barrinha então é Max wif de 350 PX opa es tudo junto Aqui então tá aqui só Qual que é o ponto o nosso projeto também tem a versão mobile dele né então o nosso componente ele não é sempre sempre sempre assim né então ele tem tem uma diferença tem uma diferenç zinha aqui não é sempre que ele tá nesse formato como que a gente pode fazer para ter esse controle mais fino da definição aqui do elemento a gente vai ter que usar as media quar CSS então aqui ó CSS media query então Ó vou

pegar aqui na mdn se você não tem o hábito de De pegar as documentações das coisas e tal então ó sempre vai pegando nessa referência aqui então que que eu vou dizer eu vou dizer aqui ó por padrão o elemento ele é 100% ele tá pegando o máximo possível aqui só que eu vou dizer o seguinte eu vou dizer aqui ó quando a tela for de no mínimo 600 pixels aí o nosso Card passa a ter essa largura diferente aqui então vou diminuindo diminuindo ó Então tá aqui o Card Ó tá certinho Quando passou ó

quando passou de no mínimo 600 pixels ele ajusta para ter no máximo 350 de tamanho aqui perfeitinho E aí resolveu tudo certo aqui pra gente tranquilo boa vamos lá então e deixa eu pegar outra definição aqui cadê eu botei o nosso fundo geral como o a cor preta né Para dar o contraste mas eu poderia pegar o do layout e definir esse outro que tem aqui também na página então Ó vou vir aqui no no nosso global de novo E vou botar aqui já ajustei ó parece que tá tudo certo mas o nosso fundo vai

ter uma imagem aqui né então a gente tem que botar também essa imagem do fundo já para ir garantindo que tudo vai funcionar do jeito que a gente espera então o que que eu vou fazer eu vou criar aqui agora fecha aqui o layout vamos lá tá aqui o nosso page né então vou ter que criar um estilo dessa pgina Específica eu vou criar aqui um home.css eu vou botar aqui ó Home Screen pra gente ter aqui a classe né eu botar um background background que vai ter que apontar para uma imagem uma ur algo

do gên assim eu poderia fazer assim poderia o jeito mais fácil mesmo eu vou vou começar por aqui então daí a gente tem que baixar de alguma forma essa nossa imagem do fundo aqui ó que eu vou Só selecionar esse elemento background que a gente tem aqui e vou fazer um Export dele então ó cliquei aqui no Export aqui do figma vou exportar como JPEG e vou exportar aqui o background aí eu vou abrir a pastinha do sistema que ele tá que eu abri errado aqui volta aqui cliquei para abrir a pastinha beleza daí o

que que eu vou fazer para isso aqui tá disponível no nosso projeto eu vou criar uma pastinha chamada Public dentro da raiz do projeto e vou Arrastar o background para cá pode até de BG aqui se você quiser tá o que que isso aqui faz faz criar esse arquivo aqui dentro então ele vai existir aqui no nosso projeto o meu essa imagem aqui eu gerei no chat GPT você pode pedir para ele gerar a sua customizar também o seu caso aí para não ter problema de de coisa de de imagem de terceira você pode estar

usando direto pedindo para ir gerar para você que aí vai variar o direito de margem de acordo com o país Que você tá mas funciona legal também então feito isso aqui eu vou tentar abrir aqui agora e vou botar aqui ó barra bgj Peg Então quando você bota na pasta Public Você tem o acesso aqui direto eu vou fazer só mais um ajuste de botar dentro num uma pasta images porque aí não vira uma bagunça a nossa pasta Public então a gente escop ó só é públ de imagem tudo que tiver dentro dessa pasta images

Aqui daí aqui dentro a gente pode botar barra images bar BG pjp a gente volta aqui PR home e a gente pega aqui o home screen e a gente faz assim ó CL name No caso vai ser hesty Home Screen então aqui Import home Styles from P bar home layout fechou repara que ó ele já preencheu aqui no fundinho já temos alguma coisa tá já chegou em algum lugar aqui então vamos ter que fazer Alguns ajustes aqui ainda então por exemplo o nosso b não tá ocupando 100% daqui da tela ele podia ficar um pouco

maior aqui né então o que que eu vou fazer aqui agora eu vou vir aqui no nosso global de novo eu vou dizer aqui ó a tega HTML tem o min height de 100% Então beleza e ela também tem display Flex só que o Flex reaction dela É Colon beleza daí eu falo aqui ó o b tem o min height de opa tem o Flex 1 então ele vai ocupar o máximo possível do HTML então HTML tá 100% o body tá 100% a tag M não tá 100% agora então no Body eu vou aplicar um

pouco desse mesmo estilo aqui ó com o Flex e o Flex Direction por qu porque eu posso vir sempre no no primeiro elemento aqui da nossa página e eu posso ou definir estilo ou Só botar aqui ó Style Flex Zoom E aí já define aqui pra gente mais bonitinho Beleza então tá daí eu vou voltar aqui no nosso Main e vou ajustar o background aqui ó background size cover Então eu quero que diminuir ou ajustar a tela que ele se acompanha aqui ó Nessa a gente pega o bugzinho da cor do card aqui ó então

faltou definir a Cor do card também então a gente volta aqui pro Card e a gente pode falar que a cor de fundo do card é o nosso BG então background color var BG beleza tá Então olha só que bacana pouco a pouco a gente tá conseguindo chegar aonde a gente quer queria das definições aqui do nosso layout e tudo mais então o que eu vou fazer aqui agora eu vou fazer um ajuste mais genérico de espaçamento aqui vou Fazer o seguinte ó eu vou dizer que no Home module aqui ele tem um um pading

left de 10% e um pading WR de 10% com isso ó ele já dá uma respirada aqui pra gente só que no nosso projeto a gente tá seg a ideia do mobile first então o que que eu vou fazer eu vou copiar aqui o nosso media query e vou fazer o seguinte por padrão eu vou definir o que é do mobile que é esse de quanto que tá Aqui ó tem 13 pixels 13 ipx beleza no caso eu inverti né É 13px E 10% porque aí começa a ficar variável de acordo com a tela né

então ele começa aqui e ajusta outra coisa que preciso fazer também aqui é background position background position Center agora tá mais bonitinha aqui ó Tudo aqui certinho beleza e ele vai só se reajustando aqui pra gente fechou a imagem aqui vai depender do seu caso ela ela pode ser uma imagem toda de fundo preenchida então você pode pegar uma imagem que ela é toda cheia fundo completaço aqui e Vida que Segue não tem muito o o jeito certo de você botar imagem aqui tá mas você ir refinando o CSS e ajustando Então beleza botei aqui

Já Conseguimos definir aí a gente tá vendo aqui ó o fundo aqui na versão mobile não tá tão legal assim então o que que a gente pode fazer eu posso falar por exemplo que o background Só existe a partir da versão dos 600 pixels né então ó ele só passa a Existir nesse caso aqui e aí é ir ajustando fina aqui agora tá beleza então fizemos aqui os ajustes mais Base outro ajuste que eu vou querer fazer é o ajuste aqui do Topo ó que tem uma distância de 55 Pixels e na versão mobile é

de 40 Então vamos lá vai ser pad top 40 pixels e aqui é 50 PX Olha só como já tá ficando bonitinho aqui o nosso projeto já tá com bem mais cara com a carinha que a gente quer no meu caso aqui por exemplo Talvez o background Seria melhor se eu deixasse ele mais à esquerda mas eu vou botar o Center porque o Center vai funcionar pra Maioria dos casos que vocês forem botar então vou acabar mantendo ele aqui mesmo então aqui agora eu tenho que achar o arredondamento do nosso Card aqui né Então tá

aqui cadê ele tá botando aqui esse mixed por algum motivo aqui o figma deu algum bug muito bizarro Ah aqui ó agora foi ó Então não é 10 a gente tem que botar aqui acho que seria 8 8 e é 00 isso no caso aqui é menos acho que é 4 mesmo isso aqui ó é qu tá então a gente vai botar qu aqui no nosso Card também aqui Card B radius no caso vai ser no header aqui 4x 4400 só que aí no caso como a borda tá em volta tem que ser no card

mesmo aqui então volta tira daqui e bota só o quatro aqui aí ele aplica proporcionalmente para todos os lados aqui pra gente e aí você vê aqui ó já Deu o qu pô quase 40 minutos de vídeo a gente tá mais nessa parte mais básica aqui criando o nosso layout e tudo mais e faz parte né trabalhar com projeto é isso mesmo então eu vou vou voltar aqui pra gente preencher agora internamente aqui ó Então vai ser 24 34 pixels na parte do cardb o pading pading Isso vai ser 24 e 34 PX então venho

para cá vem aqui no card faltou eu botar um section aqui que pega aqui o nosso formular e vem aqui o o cardb Card Styles P cardb Fechou tá aqui certinho o footer sai para fora daqui mas siga aqui embaixo e assim vai então agora eu tenho que pegar aqui o tamanho de 14 pixels Então vou aqui o cardboard eu vou dizer que tudo aqui Dentro tem o Font size de 14 PX ou no caso pode dier só tag P aí vai do quão específico você quer ser Ou não Aqui tranquilinho aqui agora faltou a

gente pegar aqui o logo que eu vou clicar aqui agora com direito vou dar um copy as SV G E aí eu vou colar esse svg aqui cadê ele tem que vir antes do nosso Card então ele vem aqui e aqui a gente começa a cair num problema vou salvar isso Aqui porque saca só visivelmente tá bonito tem um ajuste outro para fazer aqui ainda mas tá bonito só que aqui ó a gente começa a ter o problema de que esse código é muito grande para tá aqui então até agora a gente teve um componente

que era a nossa página faltou a gente quebrar isso aqui então V quebrar isso aqui num componente menor Então vou vir aqui ó eu vou estruturar agora dentro aqui de app eu vou criar Uma pastinha de components e eu vou botar aqui o alura Quiz Logo ptsx e vou começar trabalhar aqui dentro agora Export function alura Quiz logo e eu vou retornar esse Calhamaço de html aqui ó uma vez que eu criei Essa função para poder chamar ela aqui eu só preciso botar aqui o al Quiz Logo daqui eu fiz meio automático Mas ó eu

tô fazendo o Import do arquivo então pon barra components Alis logo e agora já tá mais Redondinho já daí outro caso que você pode cair também és vezes até por conta de hoje em dia a galera tem o CSS em JS outras práticas assim se você quer só centralizar esse elemento aqui você pode vir direto na tag e passar um objeto de estilo aqui por exemplo então no estilo Você pode passar por exemplo um display Flex e um align items Center por exemplo no caso eu usei a propriedade aqui errada cadê cadê Cadê aqui seria

um justify content boa seria justify content Center justify content Center aí a gente tem um outro problema que cair no caso do do card aqui né então Max w 350 PX beleza aqui também a gente tem o espaçamento né então a gente tem aqui tá quanta aqui de 2 pi Então vou até começar a estruturar um pouco mais Aqui tá aqui bonitinho margem Bottom 24 PX então repara que pouco a pouco aqui nosso projeto tá ganhando sua carinha tá ganhando seus estilos Faltou só a gente fechar aqui o nosso foter eu tô fazendo isso aqui

mais para você ver diferentes formas de trabalhar e você pode optar se pro seu projeto a regra é sempre ter o arquivo CSS você vai botar no arquivo CSS senão você pode Flexibilizando num ponto ou outro e fazendo o que eu fiz aqui bora pro footer aqui agora pegar o outro logo aqui agora também cias svg eu já vou criar aqui o aura logo tsx Export function aura logo return vem aqui e aí eu vou botar aqui a lura logo então beleza importei aqui tranquilinho show vou pegar aqui o foter agora e vou criar tudo

isso aqui Como componente só eu quero ter o estilo eu quero ter o texto eu quero ter outas coisas mais juntinhas vou vir aqui dentro da par components e vou criar o footer vai ser o nosso componente footer aqui então vou botar aqui como index.tsx Export function footer faz aqui o retorno trago o Import do logo para Cá repara que o Import sempre relativo à pasta que você tá Tá e repara que aqui eu tô criando uma pasta por que que eu tô criando uma pasta porque aqui eu quero ter o footer pm. CSS junto

quero ter o estilo junto aqui com a gente porque daí eu faço Import footer Styles from e já carrego isso aqui meu CL name belezinha daí eu posso até botar aqui o o espaçamento de 24 que ele tem aqui ó é o Marg top 24px importei aqui o foter o al logo não tá mais aqui em cima posso apagar deixa só lur Quiz Logo e ó já tá com mais carinha do projeto aqui dentro agora a gente pode por exemplo né eu vou até Opa aqui tá desalinhadas do Design para deixar mais centralizados é que

que eu vou fazer cadê cadê cadê Eu vou deixar padroniza cá Olha só fazendo Audácia de mexer no design aqui mas é mais só pra gente conseguir ter um padrão mais consistente aqui então Oros criado com o Dev lura né então venho para cá eu boto uma tag BR para ele fazer aqui a quebra de linha e nesse foter a gente faz aqui um display Flex para Ele ficar com os elementos um do lado do outro aqui no modo de Row né de linha e a gente tem que ver só o espaçamento que tá aqui

que é de 22 pixels que eu vou botar como GAP 22 PX Então fechou beleza ó repara quanta coisa que a gente já fez aqui então tem a divisão dos elementos faltou eu botar o Bold aqui agora então aqui no footer o p é fonte é Weight bold Agora sim tá com a fonte bold tá com o logo da lura aqui tá com a nossa casquinha essencial de construção aqui agora eu vou só ir botando mais alguns ajustes mais Gerais aqui pra gente garantir um que me pegou bastante agora foi essa questão do espaçamento né

que por exemplo a gente botou dentro do Card o maxif mas talvez não seja do card Talvez seja algum contêiner da própria home né então eu vou tirar esse mídia daqui e aí tudo volta a ficar esticado Meio bizarr aqui de novo vou voltar aqui no Home CSS eu vou botar um contêiner aqui ó e aí esse contêiner vai ser o guia para eu ter esse maxif aqui então volto aqui na nossa page daí ó eu posso fazer esse contêiner até envolver mais elementos Então vou botar aqui olha é uma sessão inteira aqui da nossa

página tá e eu falo que tem o Class name home Styles Container daí a gente pode tirar o 350 daqui e aí já tá crescendo conforme a gente se ajusta aqui a página belezinha então aqui a gente já tem a primeira parte aqui do nosso projeto praticamente rodando bonitinho aqui ó a Só pô mar mas falta o espaçamento aqui falta o campo de formulário Calma a gente volta aqui ó falta 32 PX aqui ó a gente vem aqui ó e bota Style Margin Bottom PX Eu queria construir com vocês bem essa base aqui para vocês

verem como que eu vou fazer a Tomada de decisões como que eu vou organizando tem até algumas coisas que a gente pode corrigir agora que é por exemplo ó botar todos esses essas partes aqui dentro de pastinhas né então se o alura logo e vai ter o index tsx o alura Quiz Logo index PSX e a gente começa a criar padrões tá a parte mais importante de você Você tá criando uma estrutura como a gente tá fazendo aqui é você conseguir garantir a padronização das estruturas então por exemplo até o nosso Card agora vai ser

o próximo alvo de virar um componente então o Card também vai ter que ser um componente nosso aqui que eu vou criar inclusive agora então vai ser assim ó Card ptsx Opa index o nosso Card mod o CSS vai mover aqui para dentro no meu editor quando eu movo ó ele já faz Às vezes o ajuste do CSS ele não fez tanto que ele quebrou tudo aqui agora mas eu tem tudo bem O importante é Que eu possa remover aqui do page e dentro do componente Card importar agora então Export function Card a gente faz

aqui o return de uma div eu vou tirar tudo daqui e vou botar o Card aí vem eu vou até fazer um Import manual aqui com vocês agora from barcon bar Card Lembrando que aqui ó começa assistência já tá surgindo aqui no nosso Projeto né então ó a gente tem o padrão de importar os componentes vindo da pasta components importar o nosso arquivo de módulo do CSS tem um módulo por componente basicamente aqui e estamos seguindo nessa ordem ae não conseguiu ler o alura logo porque tá lá no card aqui agora tá no card não

tá no footer ih Nossa agora eu quebrei tudo aqui vamos por pares vamos debugar aqui ó Falhou e Lei um recurso alura logo tsx Ah claro como a gente mudou as coisas de lugar ele quebrou aqui ó Então vou desligar ligar de novo cadê ó só ele tinha dado um errinho e ainda tá dando algum erro aqui ó vamos tentar entender ah ele tá reclamando aqui ó Isso foi de lá atrás tá vendo na hora que eu só copiei e colei os Logos ó ele tá reclamando que tudo que tem tracinho deveria ser de outra

forma Então ó eu vou selecionar todos os Fi Rule aqui usando Command d ou cont contrl D do teclado e vou botar tudo junto aqui ó clip Rule a mesma coisa no lur Quiz Logo mesma coisa ó clipe todos os clip PF pef F Rule Com r maiúsculo clip Rule também se ele parou ó não ele ainda pegou mais algum aqui stroke aqui ó stroke With stroke with carreguei salvei várias vezes deu erro de novo e a gente vai procurando aqui aos pouquinhos Ó tem outro stroke deix aqui eu acho aqui stroke salvei carreguei a

página agora tá tudo certo ó vou desligar e ligar de novo não tem que ter nada no console aqui inclusive uma outra dica que eu dou PR Vocês evitem passar muito tempo do projeto com essas coisas acum ladas aqui né acho que isso é uma dica super importante assim de dar então beleza A gente fez aqui o nosso a nossa estrutur inha base aqui do projeto fechou temos aqui o Card só que aí tem um ponto que é o seguinte e eu vou pegar esse Card aqui e eu vou botar como se fosse um link

pra gente jogar só pra gente começar a simular aqui os cenários né então eu vou vir Aqui ó eu vou botar aqui um a HF Barra ou barra game aqui só pra gente padronizar então eu quero ir pra página game aqui né E a gente tem que ter aqui o jogar fechou quando eu clicar aqui eu vou para uma página que não existe beleza mas você concorda comigo que do jeito que tá aqui a nossa estrutura O componente Card ele só funciona PR home Então a gente tem que ajustar esse componente Aqui para ele ficar

mais redondinho mais bonitinho para fazer esse ajuste para ele funcionar mais genericamente aqui eu vou pegar aqui o Card começar a quebrar ele aqui então eu preciso tirar de alguma forma essa parte aqui do Miolo por exemplo né todo esse esse meio Aqui só faz sentido na home então preciso de alguma forma tirar isso aqui daqui e fazer renderizar dentro do Card como se o Card virasse uma tag Então a gente tem que fazer isso aqui ó Pá botei isso aqui o Card deveria conseguir funcionar para fazer isso o Card tem que ter um valor

que ele recebe aqui e eu vou até dizer que ele vai receber uma propia específica chamada de props Children tá que é própria de filho aqui pô marrio Como assim foi muito rápido não consegui ver Calma Vamos lá ó se eu comentar isso Aqui não veio nada se eu descomentar a aparece o Children então aqui já tá funcionando já agora tudo que você passa dentro do componente vai pra essa função do componente como se fosse uma um objeto aqui tá qualquer valor que você passa no caso o conteúdo que vai no meio entra como Children

aqui dentro então é aqui é assim que a gente recebe esse valor aqui dentro então aqui a gente recebeu o nosso Children e consegue ter esse poder De teleportar então posso ter por exemplo dois cards em um eu tenho blá e no outro eu tenho alguma coisa aqui aí a gente pode passar por exemplo aqui também ó o header title que na home é o teste suas habilidades por exemplo aqui e a eu posso vir aqui e dizer que esse valor vai ser o props p Header title então além do props que vai aqui no

meio a gente tem uma prop normal como se fosse um atributo do HTML que a gente também recebe junto nesse props aqui e usando typescript você pode declarar aqui ó as props do meu Card são Children que é react react node e também tem header title que é uma string o lado do typescript não muda nada a gente só tá dando a dica quando você passar o mouse aqui em cima do card Ó você apertar control barra ele Auto completa e sugere para você que você pode passar aqui um heer title por exemplo Então acho

que é mais nessa intenção que a gente acaba preenchendo aqui então beleza temos aqui o teste das habilidades temos aqui a estrutura faltou fazer nossa página do game né então vamos lá que que a gente tem aqui até agora a gente tem o Global CSS tem os estilos da home aqui a gente pode até tentar manter um Padrão por exemplo então eu vou bot invés de home eu vou botar page que é o estilo da página e aqui também PR page eu vou botar aqui page Styles e meio que já resolveu aqui pra gente mais

genericamente um um estilo de página aqui né Eu posso até trocar aqui talvez de home screen só para screen né então a gente vem aqui consegue fazer todos esses ajustes mais genéricos muda aqui de home Screen só PR screen e de novo né Tá vendo que fazer um projeto é uma parte contínua a gente nunca vai de primeira fazendo a gente sempre vai lapidando melhorando ajustando e tudo mais o importante é você planejar e de novo seguir aqui os padrões então agora muito mais padronizados e organizados eu vou dar um page load aqui na página

fechou E aí de agora em diante eu vou tentar focar com vocês bastante nas funcionalidades em si Então é na gente conseguir trocar de página é na gente conseguir fazer a base do formulário funcionar para No final a gente tem um pacotão de desafios adici estilos e outras coisas assim belezinha então para comear já que a gente já já ajustou o geral vamos criar a próxima página aqui para criar a próxima página basta a gente criar aqui uma página de game que vai ser que é o link que a gente botou aqui né então se

eu clicar aqui é a parte do game e dentro do game A estrutura se repete então vou ter que ter um page.on tsx aqui dentro fazer um Export function game screen vou fazer aqui um return e vou botar aqui div página do jogo Opa faltou fazer um Export defa aqui e aí só lembrando tá o Export default é porque o react especificamente do Next né definiu que para criar uma nova página tem que ser assim então é meio é meio que o que a gente tá seguindo aqui um ajuste Zinho que eu Queria fazer com

vocês é tá vendo que agora parece que components é uma página parece Tá tudo meio junto aqui uma boa prática que a gente poderia tentar seguir aqui no projeto seria botar com underline tudo que não for uma página por exemplo né ou a gente mover para fora para uma pasta sorce é uma possibilidade também eu vou manter tudo junto aqui mas só para trazer esses questionamentos aqui para vocês então vou voltar aqui no page ó o próprio vs Code viu a mudança que eu fiz então ele ajustou todos os imports aqui mas pode ser que

no seu caso ele não veja então é importante definir aí no seu caso também então beleza fiz aqui o componente fiz aqui o o page mod CSS certinho Tá então vamos lá na nossa tela do jogo basicamente o CSS é quase o mesmo né a gente pode dizer que é praticamente o mesmo CSS aqui dá pra gente reusar dá então eu vou vir aqui e vou fazer Import Cadê como é que a gente fez aqui tá como page Styles daí agora a gente tem que botar o Card aqui dentro com a pergunta e a gente

tem que ter o nosso header title que vai ser o título da pergunta tá como título da pergunta aqui ah não é só o cabeçalho né pergunta um di sim tá aqui tranquilinho beleza então em linhas Gerais a estrutura tá aqui faltou a gente botar o Contêiner e nesse momento você pode estar falando pô Maro Mas não seria legal a gente criar um componente para essa parte do contêiner aqui poderia ser eu tô optando por duplicar manter estutura separada aqui porque pode ser que a home tenha mais coisas ou não acaba S uma decisão muito

pessoal tá o quanto que você componenti o quanto que não no meu caso est optando mesmo por deixar aqui tá aqui cer certinho faltou ter o logo também e repara aqui ó quando Começa a chegar no logo realmente dá uma carinha de que Putz podia ser uma uma estrutura mais mais mais geral aqui né E aí ó se até agora não tava optando talvez agora faça sentido por enquanto eu vou viver com essa cópia aqui mas ó é um viver sabendo que eu poderia estar Reus isso aqui já tá então Ó daqui eu tô deliberadamente

mantendo mesmo eu até desafio você a pegar e fazer essa refaturar muito aqui eu não Quero também te deixar toda hora preocupado de tá mudando o código todo eu vou tentar seguir um pouco mais direto aqui mas deixa o desafio para você mudar então Ó vou até botar aqui marcada aqui ó desafio é criar um componente genérico que representa Nossa tela beleza Tá então ten que carregar aqui o footer depois do Card fechou daí aqui ó eu posso até me basear aqui no textinho né então tem eu Considere somente os novos filmes da Marvel e

tem a pergunta por si só que é um título um pouquinho maior aqui ó um 16 ó quando foi lançado o primeiro fil de Ferro do primeiro filme do Homem de Ferro Então vem cá eu falei que mexer tanto assim nos estilos mas eu tô muito tentado pelo menos isso aqui deixar no jeitinho aqui então deixa eu tentar pegar aqui o Do o Card tá aqui tem aqui o Card Body Opa eu vou botar que o H1 um tem 16 PX e o Font weight bold ele tem oito de de espaçamento aqui então margem Bottom

8 PX aí vamos Só checar aqui ó então deu aqui dizer o 16 o de baixo faltou botar na tag P deixa eu ver aqui ah background Position eu botei eu botei Só um só né background position é Center Center e background repeat no repeat background attachment é não tá certo será que ele não tá pegando meus estilos deixa eu pegar aqui ó ã background page module Ah que eu tô botando como background aqui ó eu tenho que botar background image isso com background image ele vai Mais mais certinho aqui beleza e aí é Center

Center fechou show então agora a gente tem aqui o nosso game que que eu vou fazer eu vou botar aqui se a gente clicar no Quiz a gente volta pra nossa home aqui agora então vamos trabalhar funcionalidades aqui agora então além de ter aqui o logo eu quero botar um link aqui HF então cliquei vim para cá cliquei em jogar tô indo então ó já tá tendo aqui a navegação pra gente tá funcionando o único ponto que eu quero ajustar agora é garantir que a gente não tem esse refresh ó tá vendo que a página

tá carregando toda vez que eu clico aqui então Ó tá tendo um ajuste Zinho ó o resto tá se mantendo intacto Mas tá tendo essa mexidinha para corrigir isso aqui com vocês que que eu vou fazer eu vou ao Invés de só usar a tag a direto aqui eu vou usar o componente link do Next Import link from next bar link que que esse link aqui faz esse link traz pra gente a capacidade de spa do react então se eu clicar aqui ó sem refresh Clic aqui com refresh sem refresh com refresh então aqui a

gente tá conseguindo fazer é essa troca toda vou voltar aqui no card cadê cadê na verdade é na home né tá aqui então eu vou botar aqui o link Também importei aqui o link do Next então ó Tô clicando aqui para jogar e resolvido perfeitinho 100% pra gente trabalhar então ó repara só Demorou bastante tempo só que agora a gente já tem uma estrutura reusável pra gente conseguir fazer basicamente o que a gente quiser Tanto que por exemplo aqui agora o que eu gostaria de fazer era que de alguma forma o fundo mudasse quando tivesse

na página da pergunta essa imagem aqui no caso né então o que que Dá pra gente fazer nesse caso em específico aqui para deixar 100% mais Redondo a gente ver essa diferença e fechar aqui a parte do template pra gente ir pra funcionalidade 100% agora se que isso aqui já é uma funcionalidade do sistema né eu vou fazer o seguinte eu peguei essa esse site aqui de imagem placeholder e eu vou pegar uma aqui ó de preferência que ela tem o tamanho da nossa tela que é de 1000 1 1 366 por 768 Então vou

vir aqui no nossos estilos vou Comentar esse aqui eu vou botar aqui background image URL aqui ó agora trocou por uma imagem de fundo eu vou pegar aqui agora e vou botar esse tamanho 1 366 por 768 agora tá a imagem maior mas problema é se eu voltar PR home tá o antigo ainda pra gente poder ter os dois eu tenho uma ideia que pode ser que ela funcione saa só eu vou definir aqui ó uma variável de CSS com o BG e esse é o BG image saca só eu vou pegar isso aqui e

vou botar aqui direto vou comentar essa nova vou voltar na antiga e vou pegar esse nosso BG image e fazer assim ó var BG image Opa cadê cadê cadê ele não tá deixando a gente conseguir botar aqui não tá deixando a gente conseguir botar aqui olha só deu um bugzinho aqui do CSS modules E aí a minha ideia foi por algo abaixo Putz não consegi e fazer o jeito Que eu queria né Eu queria fazer um jeito espertinho aqui usando a variável de CSS e realmente esse jeito aqui não tá pegando ó mesmo se eu

tentar tirar aqui o ponto b se deixa só Image é ele ele realmente não não tá deixando aqui pra gente mas tudo bem a gente pode ainda assim ó eu vou só copiar o nominho aqui do URL Vou deixar do jeito que tava aqui certo sem nenhum problema aqui gente tava antes o Que eu vou mudar na prática vai ser que quando eu tiver nessa tela específica do game aqui ó nessa página aqui eu vou dizer que além do Flex um o background image vai ser esse aqui então Ó segui aqui cliquei para jogar trocou

voltei carregou então repara que aqui ó eu tô conseguindo ter as duas definições e a estrutura do quiz já redondinha fechadinha aqui certo então agora eu vou dar foco total em a gente conseguir Fazer carregar nossas perguntas ir avançando entre elas e jogar uns desafios para você conseguir terminar esse projeto para você poder botar no seu [Música] portfólio Vamos mandar bala agora fazer a interação do nosso jogo fazer a funcionalidade dele de fato Então bora lá lá seguinte qual que é o primeiro passo aqui que eu quero organizar com vocês né o o nosso jogo

ele basicamente Vai ter aqui a Game screen né que é a tela do jogo em si e eu vou ter que ter de alguma forma aqui a lista das perguntas que a gente vai ter então eu vou criar literalmente um arrei aqui no nosso código aqui então V ter aqui ó const questions e as perguntas vai ser um arrei Tá mas do que que vai ser esse arrei aqui nesse arrei eu vou colocar um objeto e e dentro desse objeto eu vou colocar as informações que a gente tem de uma pergunta então por exemplo eu

Quero botar aqui o título então B ter aqui ó title que no caso aqui é quando foi lançado o primeiro dom de ferro que tá até aqui embaixo eu vou ter também uma description que é isso aqui e a gente tem que ter as alternativas né que é 2020 19 15 8 e eu vou ter aqui ó as alternatives que eu vou botar basicamente só como um outro arrei porque a gente vai só fazer uma listagem de cada um dos elementos aqui Eu vou ter 2020 2019 2015 e 2008 perfeito tá então a nossa tela

ela começa com uma pergunta ativa Então vou colocar aqui con current question e como a gente tá trabalhando com a rei a gente pode vir aqui e botar que ela é igual a zero eu boto aqui que a gente tem uma question que é questions na corrent Question isso me permite pegar aqui o question e aqui embaixo já começar a ficar tudo mais dinâmico né então aqui eu pego question pon title e question pon description vindo para cá tá tudo certo a gente pode ter também a imagem da pergunta né então então a gente vem

aqui eu posso pegar por exemplo aqui question image e a imagem no caso vai ser essa aqui você pode pegar um GIF da internet daquele site do do gify e tudo mais vai funcionar também então pego [Música] aqui beleza então questions question pimage tá aqui também beleza é meio que a gente só fez o base que a gente já tinha então agora a gente tem que ir avançando aqui ó então Ó tem aqui essa parte do title né então eu vou colocar aqui ó const question Number vai ser o current question mais 1 que é

o número que a gente mostra aqui desse de um a c Por Exemplo né Então vem aqui e boto Esse string tem que ser uma template string e isso aqui tem que ter em volta do simbolozinho da interpolação do do bigodinhos aqui do do react tá sempre que eu tivesse a sintaxe é é a interpolação a gente qu pegar um valor JavaScript e renderizar aqui no meio e aqui do lado a gente pode pegar basicamente o questions P Len que é o total de perguntas que a gente tem então é pergunta um de um Beleza

se eu tivesse duas perguntas aqui agora eu vem aqui Vou botar duas botar uma outra aí já aparece pergunta um de dois então pode ver que com pouca coisa a gente já conseguiu fazer o nosso código ficar extremamente mais dinâmico aqui certo e eu não paro por aqui tá eu quero ir num ponto que as perguntas não vão só tá do nosso código aqui eu quero deixar elas até numa parte de configuração Então vou criar aqui um arquivo de setup do nosso projeto então vou ter aqui o config Jon Então como a gente tem o

package Jason Dos pacotes Eu quero ter um que vai ter as nossas perguntas aqui vai ter as nossas questions e esses dados vão vir de lá e não só daqui então vou tirar dar um cont control x aqui tirar daqui também deixa só um arzinho vazio aqui e eu V botar aqui dentro ti esse vrgula Tira daqu Tira aqui o IM o title description alternatives Fechou então aqui certinho beleza então montei aqui esse noss config agora a gente precisar ess Nossa Configura Então o que eu V fazer eu aqui na nossa partezinha do game e

vou fazer Import config pon P barra barra config con questions iG config P questions E aí tudo volta a funcionar certinho repara que se eu passar um ar vazio aqui e vai quebrar se eu voltar aqui o questions ele passa a funcionar certinho então tudo que eu fiz aqui foi só uma uma Adaptação um ajuste agora vamos fazer de fato as alternativas e o nosso botão de confirmar aqui então vou criar uma tag form vou criar aqui um buton que vai ser a confirmação né então o buton vai ter que rodar Nossa lógica aqui no

front end de fazer a confirmação na prática então ele tá aqui não é o botão mais bonito do mundo mas ele tá aparecendo eu vou Minimizar aqui o o explorador aqui do lado para ficar mais fácil daí além de confirmar tem as alternativas então eu Vou ter aqui uma Label a gente vai ter um input type Radio e o testinho que eu vou botar aqui dentro vai ser o valor da alternativa no caso sei lá vai ser 2020 por exemplo porque se eu clicar aqui ele Marca essa alternativa se eu botar duas 2019 eu deveria

poder marcar um ou o outro o radio tem a ideia daqueles botão de rádio antigo literalmente que você apertava ele subia os outros apertava um e subir os outros para poder ter esse comportamento na prática a gente tem que Vir aqui e botar um name que é alternative zero por exemplo né ou alternative um eu tô começando do zero Porque como a gente tem as alternativas no arrei vai ser 0 1 2 3 por exemplo se tiverem quatro aí eu carreguei tem um page load aqui agora agora se eu clico opa ele ainda tá marcando

aqui ah no caso é alternative aqui e aí o que identifica cada um é o diferente né então alternative Zero isso aqui Ó me atrapalhei na explicação mas a realidade é essa aqui ó agora certinho então alternative Zero Só que todos os radios representam a mesma coisa que é uma alternativa e alternativa um agora cliquei foi aqui ó Chegamos no comportamento que a gente queria perfeito só que aí eu não vou fazer você ficar assistindo montar Cada um na mão aqui né então já vou vim pra ação aqui pegando da nossa question as alternatives e

a gente precisa fazer Elas aparecerem na tela agora vou botar aqui um ponto map vou botar Label aqui dentro e aí a gente vai ser muito SF que a gente vai fazer o seguinte ó eu vou tirar aqui o Label e vou pegar alternative e index então Ó eu já sei que o que é o identificador unitário de cada uma eu vou botar aqui índex bonitinho Então vai ser 0 1 2 3 a alternativa de fato vai aqui então agora a gente já tem as quatro aqui agora Certinho só que aí eu quero que isso

aqui seja um componente nosso né O que a gente consiga reaproveitar e tal então o que que eu vou fazer eu vou criar aqui um componente de alternativa Então vou criar aqui alternative um outro ponto que é importante de colocar aqui também que eu acabei não botando ó se eu inspecionar elemento aqui deixa eu dar um console deixa eu ver se ele tá mostrando algum errinho aqui pra Gente tá ele não tá mostrando todos os Eros certinho H aqui ó ele tá reclamando aqui no console ó cada elemento filho numa lista deveria ter uma chave

única de k Então esse Label aqui também tem que ter um ke pelo fato da gente estar usando aqui o map né E aí no caso eu vou fazer uma combinação da Alternativa mais o index o react não gosto que você use só o index Porque isso pode acabar Isso aqui é uma forma dele cachear para evitar muitas renderizações conseguir Separar cada gente tem tem estados e outras coisinhas assim né então eu vou manter separado aqui então carreguei Beleza eu vou até botar alternativa depois tô me perdendo visualmente aqui perfeito tá então vou criar aqui

o componente da Alternativa index.tsx Export function alternative return tá aí eu vou dar um control x aqui traz para cá esse que volta pra cá porque quando a gente chama alternativa A gente tem que passar aqui o qu a gente passa a Label e acho que é isso é é só Label só eu volto pra alternativa interface alternative props Pego aqui o nosso Label defino que é uma string deixo claro que é obrigatório não bota uma interrogação para dizer que é opcional receba aqui o props alternative props props P Label e olha só eu vou

ter que pegar o index também só que eu vou ter que pegar aqui O Number talvez e vou dizer que é um número props ou Order pode ser a ordem específica eu eu evito tentar botar coisas que são nomes reservados da linguagem né então acho aqui ó a ordem dela faz sentido aqui né posição zero então venho aqui e boto também o Order como o index parece que não mudou nada mas mudou tudo aqui agora já tá separadinho componenti zado se eu vi aqui alter agora a gente pode criar o estilo dela Então vou vir

aqui e vou criar o Style PM pcss a a gente consegue até padronizar mais né então alternative ou botar component por exemplo Qual que é o meu ponto aqui se eu vier e botar Class name Styles component port sty dessa forma a gente pode até quem sabe automatizar a criação de arquivo Meio padronizado tá vendo ó a gente sabe que sempre no estilo vai ter vai ter um Styles vai ter esse valor de componente aqui quando for renderizar no Browser Ele sempre vai est traduzindo para um nome de classe aleatório que não gera conflito com

nada da nossa aplicação e aía que segue Então tá recebendo aqui o nosso componente recebi aqui o ST component belezinha por hora aqui eu quero só ter um display Block porque aí aparece um embaixo do Outro então a gente consegue selecionar e clicar no confirmar por enquanto aqui a gente tá só renderizando não tem nada só que na hora que a gente clica nesse botão de confirmar a gente tem que rodar as validações que a gente precisa aqui na aplicação né então o que que eu vou fazer a gente fez o ajuste do Spa do

link para ele não ficar dando refresh mas quando eu clico no confirmar Ele sempre tá recarregando aqui tá vendo ó Tô clicando tá triando aqui a bolinha Aqui em cima a gente tem que prevenir o comportamento de submit desse formulário para que isso não aconteça Então vou botar aqui aqui no on submit eu quero quero pegar o evento que tá acontecendo no Browser e prevenir o default quero prevenir esse carregamento da página e eu vou dar até um console.log aqui pra gente testar e ele reclamou aqui ó event Hand be passed to client component props

interactivity convert Part of Cent Component Qual que é o ponto Hoje em dia o react ele tá fazendo toda parte de montar os componentes tudo no servidor ele só manda o o HTML pra página quando você quer trabalhar com as interações do usuário você precisa vir aqui no topo do arquivo usando next né e botar um use client seja num componente específico ou numa página inteira Como é o nosso caso aqui essa página inteira eu quero poder usar coisas que estão rodando no lado do client aqui daí eu vou salvar carreguei Ele parou de dar

o page load e ele mostra no console log o nosso testando aqui do lado beleza é uma coisa das versões mais novas do react projetos mais antigos não tem isso projetos que não usam essa parte do server como nex remix também não vão ter isso tá então é é para você saber que algo específico dessa transição que o react tá tendo para rodar mais no server é do momento atual Talvez o futuro não precise mas um momento na história Precisou se o seu Projeto precisar no futuro Olha aí tô te ajudando também Beleza então vamos

lá então compilou aqui certinho que que a gente precisa saber agora né a gente precisa saber de alguma forma Qual foi a alternativa selecionada pela pessoa então Ó eu posso clicar aqui no confirmar e eu não tô tendo essa informação né Eu não sei o que que a pessoa escolheu que que a gente pode fazer PR chegar nesse ponto de saber o que a pessoa escolheu ou não né a gente Pode tentar olhar o formulário que a gente tá trabalhando então a gente pode aqui Ness testando Assim event target eu quero pegar elemento alvo da

ação que tá acontecendo aqui que é o formulário Aí eu tipo fico Tipo pô mas como é que eu vou pegar os valores desse formulário bom vamos mandar na prática aqui ó mdn How to get form values ó aí ele tem aqui algumas especificações deixa eu ver aqui tá aqui tem o HTML o CSS tem bastante coisa na Spec mesmo aqui né de como que a gente pode trabalhar Cadê US informe data objects aqui ó acho que esse exemplo aqui encaixa Bem que eu queria mostrar PR vocês ó então repara que aqui eu tô usando

JavaScript puro e esse é um ponto que eu quero trabalhar com vocês mesmo trabalhando com react você vai usar coisas JavaScript puro então é importante você ter uma base de JavaScript puro tá E esse prent default não é do react é do browser então agora O que eu vou tentar fazer é tentar pegar esse form data aqui e ver como que a gente consegue trabalhar com isso então vou vir aqui vou dar um con form data e vou colocar aqui question info Então vou vir aqui vou colocar numa variável esse nosso event tar aqui eu

tenho hábito de sempre que eu pego um elemento do HTML de fato eu boto o cifrão antes da variável aqui pra gente pegar aqui esse question info Ele reclama ele fala aqui ó event target n assignable HTML form Element então ó eu vou dizer ó eu sei que o alvo aqui é um HTML form Element então typescript confia que eu sei o tipo desse elemento aqui caso você não soubesse a gente teria que fazer uma seleção do elemento direto e tal ter que fazer outras coisas mas nesse caso aqui acaba resolvendo P form data console

pon log Vamos tentar ver aqui agora confirmar E aí ó o Farm data veio vazio pô Como assim vamos tentar pegar esse ponto Vales dele aqui ó Carreguei confirmar aí Ele trouxe aqui um interor tipo Putz não tô sabendo o que que é isso aqui como que a gente consegue fazer bom vamos seguir o processo de debugando junto aqui ó vamos lá how to debug form data values JavaScript how to inspect form date a agora tá colocando aqui tal Ó tem aqui o append E aí ele diz que tem aqui ó esse tem o ponto

entries aqui ó ou esse Object P from ent aqui vamos tentar então vamos vir aqui Agora o Não foi ponto entes seguiu com vários nada aqui aí tinha um Object aqui né Object from entries Vamos tentar pegar aqui será que esse pon aqui já resolve vamos lá bugou confirmar olha só ele apareceu aqui agora hein conseguimos ó cliquei aqui veio o alternativo veio como valor de aqui I rapaz carreguei cliquei aqui tá vazio preenchi on o que tá faltando aqui é a gente preencher o Valor da Alternativa aqui então além da gente definir aqui o

Label a gente tem que ter também o default value desse elemento aqui também porque aí quando a gente clicar aqui agora ó ele tá mostrando aqui ó 2020 2019 2015 2018 E aí a gente consegue ir trabalhando certinho funciona isso aqui resolve a vida porém eu vou só sugerir um ajuste Zinho que é o seguinte no caso da Alternativa o valor eu vou colocar como a ordem você fala pô mas por que a Ordem saca só aí o 2020 passa a ser o 0 1 15 8 tá 0 1 2 3 por quê Porque na

hora que a gente define aqui o nosso objeto de config a gente pode dizer também qual que é a resposta correta então a gente pode dizer aqui que a resposta é 0 1 2 3 você vê que o chat GPT acertou e ele nem viu o filme momentos assustadores aqui ao vivo na aula vamos lá então A resposta é a três por que isso aqui porque agora na hora que a gente faz aqui essa confirmação a Gente consegue pegar aqui const alternative Então a gente vai ter alternativa daqui eu tô extraindo do objeto de debug

lá que a gente tem a gente consegue ver a alternativa aqui e agora a gente consegue ver tanto a alternativa quanto a resposta pans então ó cliquei no zer alternativa zer a resposta é 3que 2008 alternativa 3 resposta é 3 então agora a gente consegue indicar pra pessoa se ela acertou ou Não daí vem para cá posso tirar esse console log de debug daqui conste is correct answer se alternativa for igual igual question pans E aí ó o próprio código aqui olha só que legal o tpt ajudando a gente aqui ó essa comparação parece unilateral

por quando a gente define aqui a gente tá botando como um número Só que quando a gente tá pegando a alternativa do browser Ela tá vindo como um string então ó eu vou só mostrar PR vocês vocês ver o bug acontecendo na mente aqui e a gente tentar ver uma forma de de corrigir isso aqui então Ó zero false false e false porque os valores estão sendo coisas diferentes aqui que que a gente pode fazer a gente pode só normalizar que aqui a resposta vai ser três como string tá pode ser uma alternativa também E

aí se a gente cargar aqui agora e clicar ele dá que a resposta correta daí a gente já conseguiu validar o nosso fluxo Mostrar a resposta correta e ir controlando aqui as coisas tranquilo tá Maro Mas você ainda fez só uma pergunta né Se eu tiver mais perguntas como que eu passo pra próxima como que a gente faz as coisas aqui né basicamente então o que que eu vou fazer aqui agora eu vou duplicar essa pergunta aqui tá então colei aqui em baixo e tal então ó qual editor de código Tony Stark usa eu vou

colocar aqui vs code intelij ou ele usa o holograma mágico Que ele tem lá na série e vou deixar aqui a mesma descrição os 10 somente filmes da Marvel salvei aqui a resposta vai ser a do né 0 1 2 carreguei então agora a gente tem duas perguntas se concorda que a gente já sabe que acertou então a gente precisa avisar o usuário e de alguma forma mudar esse número aqui para mudar esse número a gente precisa de alguma forma mudar esse valor aqui ó da corrente question só que esse valor é uma constante não

dá para mudar a única Forma no react de você ter um valor que é uma constante e que você pode mudar seria converter ele para l então vou vir aqui ó e vou fazer assim ó vou vir aqui e vou colocar ó corrente question mais um então vou clicar aqui confirmei tô confirmando ó eu tô sempre incrementando tá se a gente olhar aqui no console pon log o valor tá subindo porém o react não sabe que esse valor mudou então a gente tem que avisar o react que mudou para avisar o react que mudou a

gente faz o Seguinte ao invés de só mudar PR l a gente deixa como question e a gente traz o react p use state o US state é como se ele fosse um gancho do reaction Hook que a gente chama e ele retorna pra gente um arrei com dois valores onde o primeiro é o valor atual e o segundo é um é uma função que permite a gente mudar esse valor que chama aqui carinhosamente de sete corrente question fiz aqui o Import do react bonitinho beleza e aí em invés de mudar o valor direto que

o react não Sabe que esse valor mudou Tem uma função agora que a gente consegue avisar pro react ó esse valor mudou hein então ele vai ser o corrent question mais um então ó carreguei aqui confirmar agora ele mudou repara ó confirmar mudou então a gente já tá conseguindo passar aqui de tela e conseguir salvar o o que aconteceu né Então até aqui tá tranquilo beleza aí ó eu vou fazer só uma graça aqui que no seu você pode mostrar direto Na tela ou ou algo do gênero assim mas no caso eu vou botar aqui

né if is correct answer eu quero mostrar um emojinho de que deu certo aqui eu quero mostrar pra pessoa alguma coisa que indica que deu certo então eu quero vir aqui ó e botar algo nessa linha daqui de baixo aqui ó ele vai tirar o botão de confirmar e mostrar que deu certo então vou carregar aqui agora e aí como eu quero mudar algo da tela de novo a gente vai precisar ter um novo Estado então Vou ter aqui ó const answer state set state que é o estado da resposta então por padrão ela vai

comear como uma string vazia eu quero literalmente começar como um string vazia aqui aí que que eu vou fazer eu vou olar aqui se o state for igual a vazio most o botão for igual a error tá então aconteceu algum erro aqui a gente vai mostrar aqui pra pessoa um emojinho de X isso foi igual a Success a gente bota o cheque Zinho eu posso até botar por exemplo um default para não ficar vazio que eu botaria aqui ó default Só que tem um problema sempre que você começa a espalhar Strings pelo seu código começa

a ficar meio bagunça a gente não consegue saber qual que é qual e tal então que normalmente o pesso vai fazer vai ser o seguinte criar um aqui state criar um objeto onde a gente vai ter o Def o error e o Success boto Def aqui e aqui embaixo ó state Def error a po dear constante valor que não vai mudar não vou mexer nele se eu tentar sobrescrever aqui ó ele não vai deixar ele falou aqui ó o default é um read property não pode mudar o JavaScript deixa mas o typescript previne que a

gente tem esse erro aqui então vou salvar aqui agora aí tá reclamando aqui Docer state agora né Tá então Ó aqui embaixo ele tá dando esse conflito que ele não tá conseguindo ele tá dando uns overlaps aqui ele não tá conseguindo validar direito né que que eu vou corrigir aqui ó eu vou deixar tudo isso aqui maiúsculo default error E success então V deixar tudo tudo normalizado aqui beleza daí ó eu vou dizer que esse US state ele tem um tipo eu vou dizer que pode ser default ou error ou success e ele para de

reclamar Aqui embaixo ele deixou a gente poder fazer isso aqui só que como a gente vai escrever esses valores aqui em cima a gente pode fazer assim ó Key of Type of answer States então eu posso substituir ó disso para isso aqui e aí fica dinâmico se a gente adicionar novos estados o estado vem para cá também então agora tá certinho aqui cliquei no confirmar e foi pro próximo Qual que é o ponto agora antes de pro próximo a gente tem que mudar o Estado então a gente vem Aqui se a resposta for correta ou

se ela não for a correta então se for a resposta correta a gente pega aqui o answer States P success Opa set answer state se for incorreta vai ser o de error então ó cliquei aqui confirmar aí ó já deu dir aqui cliquei em 2008 deu sucesso aqui a gente pode botar uma tag P por exemplo e fazer um text Aline Center text Aline Center então carreguei aqui então Ó cliquei aqui confirmar errado cliquei aqui 2019 2008 deu certo então você vê que com ajustes pequenos aqui no código que a gente tá fazendo as coisas

já estão ficando bem mais legais né Faltou só ele quando a gente erra depois de um tempo ele vai pra próxima então o que que a gente pode fazer aqui agora alternativa beleza tranquilo show eu fazer assim ó eu vou colocar um um time Out para aqui depois de um tempo que a gente selecionou a gente vai pra próxima Pergunta que é fazer o mais um aqui então vou falar aqui ó depois de um segundo sei lá por exemplo então depois ou eu acho que um segundo é pouco depois de 2 segundos duas vezes 1000

porque são milisegundos aqui então Ó eh 2020 confirmar foi pro próximo só que quando vai pro próximo ele tem que voltar o estado padrão E aí começa a ficar meio complexo aqui né agora a gente tem que fazer uma coisa e depois fazer a outra tá então além de ir pro próximo o Estado Tem que voltar pro default Então tá vendo como começa a ter regr de negócio aqui da gente ter aqui define está certo e se está errado muda a questão Tem várias coisas de estado que estão acontecendo aqui então Ó 2020 e confirmar

holograma mágico confirmar E aí chega no último ele também não pode ir né então aqui ó a gente tem que ver se já tá na última questão eu vou até botar aqui em cima ó const is last question Então vou pegar o Número da questão e vou ver se ele é igual ao total de questões questions P quer ver igual total E aí eu sei que é a última E aí se for a última a gente não pode mostrar isso aqui a gente tem que fazer alguma outra coisa então if Slash question e cadê cadê

cadê tá tem que semear o timeout isso if se for a última questão eu faço um um return aqui e eu Vou mostrar um Alert pra pessoa você concluiu o desafio então ó 2008 deu certo aqui confirmar você concluiu o desafio aqui a gente poderia por exemplo botar uma tela que mostra pra pessoa pela voltar e tudo mais ou algo do gênero assim então tem tem alternativas que a gente pode tratar pra pessoa conseguir jogar e tudo mais ou de de jogabilidade mesmo né no caso aqui o que eu vou fazer vai ser Simplesmente voltar

a pessoa pra home então eu quero fazer ela voltar para Inicial Depois que a gente vê isso aqui eu deixo como desafio para você criar uma tela que mostra toda a pontuação da pessoa que não é tão complicada assim de fazer ó só para você dar uma pegada só a gente sempre sabe quando deu certo Ou quando deu erro certo a gente pode vir aqui e colocar user answers set user answers que eu tô definindo as Respostas do usuário aqui então react use state vai ser um arrei então saca só que legal aqui basicamente O

que eu preciso fazer é eu tenho todas as respostas do usuário certo então uma vez que eu tenho todas as respostas dele a gente pode pegar aqui no final e fazer assim ó eu vou até simular aqui eu tenho uma extensão no meu vs code que é o Coca que ele gente visualizar algumas coisas então vamos dizer que eu tenho aqui ó uma resposta Certa uma falsa uma certa beleza que que a gente pode fazer aqui const Total points você pode só pegar isso aqui e fazer assim ó user answers pon reduce no caso começa

com zero pro padrão retorna zero é não pro padrão retorna o total points e a gente faz assim ó os pontos Total com current answer E aí if current answer se for true a gente faz o total Points mais igual ó o P te D spoiler aqui um por exemplo eu quero só somar um ponto aqui né acho que assim fica mais fica mais bonitinho né pro padrão retorna senão a gente vem aqui se eu der um console pon log do total points ele é dois se eu botar aqui true vira três então de novo

usando JavaScript você consegue resolver esse problema aqui mais elaborado então eu vou pegar aqui agora essa lógica Vou botar aqui Tá lembrando se você quiser O plugin é o Coca JS que me permite fazer esse debug ali que eu fiz agora com vocês e eu boto aqui e acertou aqui você pode até deixar com menos linhas aqui botar assim ó tem tem várias formas a gente conseguir trabalhar aqui então aqui Total answers a resposta vai ser de novo e trabalhando em cima do US state Então sempre que for sucesso aqui set user answers aí a

gente vai pegar aqui Ó tudo que já tinha e vai botar um true ou no caso aqui vai botar um false Então vamos lá 2020 confirmar errei errei você acertou zero agora vamos acertar as duas acertei a primeira melor vou errar a segunda errei a segunda e acertou um Então você v que com pouca coisa a gente já conseguiu fazer muita coisa perfeito conseguimos estruturar aqui o nosso projetinho tem bastante coisa já tá com estilão base Aqui crii o desafio de fazer o componente genérico vou colocar o desafio desafio criar a tela de resultados quando

tiverem acabado as questões Você pode até criar uma nova página e mandar enfim eu vou deixar seu critério você definir como que você vai tocar isso aqui mas na prática agora então eu fiz aqui o a parte do V cod intj falta ftou fazer a parte de voltar PR voltar como é o react que tá fazendo a navegação pra gente tem o link do Next Lá e tudo mais eu vou ter que fazer o seguinte eu vou fazer assim ó eu vou fazer aqui em cima o Import from next router tal como tem o US

state tem o use router que dá pra gente um sistema de roteamento aqui e eu faço o seguinte ó quando chega no útimo e passo Alert eu faço router push pra home Então vou salvar aqui agora cadê Opa aí a gente tomou um rrin aqui do Next vamos ver aqui o que Aconteceu Ah aqui ó é from navigation é aqui foi uma confusão minha porque tem as duas versões do Next né com diretório pages é com diretório App no caso como a gente tá usando diretório app vai ser de navigation aqui né mas enfim peculiaridades

do Next aqui carreguei então ó 2020 vou acertar aqui agora deu um e voltou pra home então repara que pô em Coisa de duas horas aqui a gente conseguiu fazer muito mas Muita coisa mesmo assim do projeto sabe então acho que de desafio para você que tá aqui me acompanhando tem bastante coisa o projeto por si só tem a sua versão responsiva tem algum ajuste ou outro que a gente precisa corrigir na versão mobile aqui por exemplo pegar essa imagem de fundo e fazer ela ficar só em cima quando for na versão mobile que eu

acho que ficaria mais interessante aqui tal como tá tendo a própria proposta aqui do layout né mas Enfim o que eu quero fazer com vocês aqui agora eu vou voltar aqui pra aplicação Então tá aqui ó voltar fazer um teste final aqui acertando tudo defini confirmar acertou um e voltei que que eu vou fazer eu vou só estruturar essa parte finalzinho aqui com vocês na parte de estilo aqui mesmo e aí fechar para passar os desafios finais que eu quero ver você marcando a lour no Linkedin marcando no Twitter porque a ideia não é só

você copiar é Você aprender e conseguir expandir em cima daqui então vamos só fazer o fechamento de estruturas que faltaram Como foi o caso do nosso formulário aqui né por exemplo Então deixa eu dar um zoomzin aqui beleza vamos lá então ó volta para cá Fecha aqui então Ó cadê cadê VM aqui no app na nossa page então tá então aqui no lugar desse IP vai ser um form daí a gente vai ter aqui um input e Um buton Fechou tá aqui name Player name e aqui vai ser o jogar perfeito show volta PR cá

beleza Tá daí eu vou botar aqui uma div em volta repara aqui ó esse botão ele vai ser usado em vários lugares aqui né e repara que aqui por exemplo ele tem a regrinha de tá desabilitado por exemplo Então são coisas que eu vou jogando nos desafios para você aqui no final então ó vamos lá aqui o in o player input eu vou eu vou fazer uma definição mais genérica aqui ao invés de tiar componente e junto já bota aqui o desafio converter para os componentes então que que eu vou fazer aqui eu vou pegar

aqui o buton vou dizer aqui o buton por padrão vamos ver no Dev M aqui do Figma que esse botão tem ele tem aqui ó o que seria um drop Shadow que na verdade é um box Shadow tem essa corzinha dele aqui tá que é uma cor de contraste que o pessoal chama de asent color que eu vou botar aqui ó background color isso aqui eu vou dizer que o buton no Rover e no focus ele tem uma opacidade de 0.7 eu vou dizer que ele tem um transition na opacidade de P 2 segundos eu

vou dizer também que tem o tex Transform capitalize para deixar o texto em maiúsculo que ele é o 100% que o Color dele é a cor de texto que a gente tem que ele não tem borda cadê Aqui ó tem o drop shadowz inho tá então aqui agora eu vou colocar aqui Box Shadow é 02 Preto 12% 0 0 1 3 4 são quatro valores é aí o que tem aqui é o Blur então é x y é o valor 3 tem dois aqui 2px rgba 00 P 12 e eu vou botar outra borda aqui

que é a mesma coisa só que no Y tem dois também então a mesma coisa aqui x y boa tá aqui já ó bonitinho aí eu vou botar aqui o cursor Pointer para indicar que a gente pode clicar nele aqui o meu text Transform não pegou deixa eu tentar entender o que aconteceu aqui ah é upper Case aqui é uper case text Transform upper Case aí o textinho dele tem umas peculiaridades aqui né ó ó ele tem um l spacing de 1.25 aqui que as letras são mais afastadas tá vendo daí a gente tem 10

10 16 então pad é 10 de altura e 16 n nas pontas tem o border Radi também de 4 seguindo o padrão que a gente tem e ó Já tá com muito mais carin de aplicação a gente pode até tirar esse botão esse link de jogar na verdade né deixar só o nosso botão beleza daí eu vou pegar aqui pro nosso input e vou basicamente fazer aqui a mesma coisa então vou vir aqui ó default form components Então vou botar até uma separação zinha Aqui perfeito aí pegar aqui o input vou dizer que ele vai

ter a bordinha essa mais clara aqui border um PX Solid essa cor aqui em específico você vê que ela tá mais próxima da nossa cor base aqui né normalmente você v galera definindo escala de cor né então por exemplo você vai ter o primary 100 então isso aqui é o nosso primary 100 tal como quando a gente viu aqui no Colors tem várias escalas de cor então você pode números dá mais clara para mais escura e aí fica mais fácil padronizar quando está montando a aplicação E então tá aqui beleza bonitinho no caso aqui o

background color vai ser não vai ser transparente vai ser o do BG o radius é o mesmo o pading tá como aqui tá 16 por D quase a mesma coisa do Outro aqui vou até pegar o do pad aqui como referência e botar o do input aqui faltou mexer na color eu vou tirar o outline aqui mas o ideal é que você defina né uma uma coisa que deixa claro que o elemento tá selecionado então eu não vou nem tirar porque não tá tão especificado no layout Mas você pode trabalhar para ele ficar mais bonitinho

mais mais alinhado com a interface como um todo daí aqui cadê 24px aí aqui eu vou botar aqui Style margem botom 24px e vou dizer também que o input é o 100% daí a gente tem que botar um Place holder que é o textinho que tá aqui que é aí seu nome para jogar aí ó a cor dele é uma cor um pouquinho mais clara aqui ó esse essa outra cor aqui então o que que eu vou fazer eu vou vir aqui ó CSS define Place holder ó tem um pel do seletor aqui que A

gente bota então dois pontos Place holder color ó agora já tá mais a carinha aqui do nosso layout essa cor é uma cor ainda mais clara aqui então se essa aqui é o 100 eu vou botar essa aqui como 050 é o mesmo não é o mesmo boa seca só já deu outra cara a gente nem fez muitos estilos assim Claro tem umas coisas pra gente melhorar aqui E tudo mais mas na Essência tá aqui por hora eu só vou garantir que a gente tem o fluxo de navegação então a gente poder clicar em Navegar

pra próxima página aqui então a gente volta agora ó const router igual a use router que vai vir de navigation eu tô tentando organizar e separar os imports dos nossos componentes dos CSS das coisas que são libs e aqui a gente faz um submit router P Push barra Game e aí você pode passar por exemplo Player e botar o nome por exemplo const name Mário aí explodiu faltou a gente botar o usic client aqui US client carreguei Beleza então ó apaguei jogar não foi será que faltou Ó formulário tá aqui vamos olhar Nossa outra página

game page Esse é o erro mais comum de pegar ó faltou prevenir o default que por padrão a tag form do browser tenta fazer o Envio dos dados para um servidor aqui né no caso a gente não tem então ó cliquei para jogar a gente já tem o nome da pessoa aqui em cima e aí repara que deu um bugzinho meio estranho aqui no nosso select Zinho né então ó se eu clicar para confirmar ele tá navegando mas o select tá meio estranho então de final eu vou fazer aqui os nossos selects E aí fechar

os desafios então é importante esse estilo que a gente fez aqui ele não fica input ele fic no input que tem o Type text aí já não usa tanto ó já fica um pouquinho mais fácil da gente conseguir trabalhar aqui na prática né daí eu vou voltar aqui na home eu mudei o Type text mas não botei lá então volta pra home Type text Agora sim então se eu clicar PR jogar tá certinho carregou a imagem agora é só a gente ajustar aqui então fechou vamos lá 2020 tá aqui beleza tá pegando 20% dessa cor

é tá Pegando primary com 20% esse aqui vai dar um trabalhinho da gente fazer mas não é coisa de outro mundo também aqui player game name vamos fazer aqui no glal Nesse caso nem preca ser no global né a gente pode fazer direto aqui isso é verdade a gente já tem o alternative aqui Fechou então alternative então aqui a cor ó essa cor é mais específica ó ela é o azul com uma sumidinha aqui né então eu fazer assim ó eu vou botar background color vai ser Isso aqui então Ó já tá aqui bonitinho só

que aí ó eu vou ter que deixar ele em 20% Então o que eu faço normalmente é isso aqui ó ó eu pego de RGB eu deixo com 20 e meio que eu boto de novo aqui ó ou você pode tiar como RGB mesmo sabe quando tem o valor quebradinho assim realmente Dá mais trabalho de lhe dar então não vai dar pra gente só puramente pegar do nosso tema aqui tem forma de conseguir trabalhar isso tem forma de Conseguir trabalhar isso mas aí eu vou deixar para você dar uma misturada tentar usar recursos novos do

CSS que tem pra gente conseguir calcular cor dinamicamente e tudo mais eu só vou trocar aqui de RGB pra rgba Ah não já já tá certinho tá tá certo daí entre perguntas tem 8 pixels aí Aqui tem até um detalhe interessante ó como esse aqui é o componente mesmo né O ideal seria aqui Na página do game a gente vi aqui e botar a div por exemplo ó e nessa div botar aqui ó marg Style marg Bottom 20 PX quando tá quando componente que ele é reutilizável Opa 8 PX é interessante que as margens dele

não fiquem nele se que quem quem Chame o componente possa posicionar e definir o p margem acaba ficando mais fácil de trabalhar daí isso aqui tem que ter 14 Pixs e aqui tem 15 por 10 aqui então o pading do Lab a gente seta então ele tem 10 PX e 15 PX beleza ó já tá ficando uma carinha bonita já aí aqui agora faltou a gente botar o cursor Pointer então agora a gente tá clicando aqui faltou a gente botar que esse carinha component no Rover e no focos tem aquele opacity de ponto se e

o transition no Opacity de ponto 2 segundos então agora já tá mais clarinho aqui só que ó quando eu dou foco quando eu tô passando aqui o mouse ó ele nunca tá trocando foco nos elementos aqui faltou uma paradinha que é no Label a gente botar um Tab index zero que ele passa a ser considerado aqui tá vendo ó só que ainda assim ele tá Considerando o input interno aqui você pode vir aqui botar um Tab index men1 que ele passa a focar só no Elemento principal e alguns ajustes mais finos que a gente pode

fazer aqui por exemplo são de você por exemplo botar aqui um HTML for para indicar para quem que esse Lab tá apontando Então vou dizer aqui que o ID é isso isso aqui Opa carreguei ó então agora tá aqui consigo clicar só que a gente não deveria estar vendo o o input aqui na prática né então uma alternativa aqui no caso pode ser a Gente botar um input antes e aí saca só o que eu vou fazer então tô botando input fora aqui do agora mas se eu clicar ele continua checando Eu só preciso saber

se o elo tá ativo ou não pra gente poder dar como marcado aqui tá vendo ó poder deixar cor preenchida aqui aí que vou fazer eu vou botar aqui que o CL name vai ser Styles P Input no input eu vou por padrão botar display non aíe para de aparecer mas a gente ainda consegue selecionar aqui ó só não tá de fato marcadinho aí que vou fazer eu V botar aqui o input checked se ele tiver na sequência dele o component esse cara aqui vai ter um background color red só PR gente testar aqui daí

você CONSEG ver que a sobrescrever os estilos das coisas então a partir desse Elemento tá selecionado a gente consegue interferir no próximo uma vez que ISO aqui tá feito a gente vai deixar o background dele a nossa cor purinha aqui que é o primary mesmo aqui deixa a opacidade em um então ó quando marcou ele fica separadinho aqui faltou o border radius de 4 PX também E aí galera olha só com pouquíssimas linhas de código tá Nem realmente tipo pouca coisa que a gente adicionou aqui já deu uma outra cara faltou só ajustar o espaçamento

aqui então ven aqui e no card eu tenho form eu tenho essa div eu vou dizer que o form tem o pading top aqui vamos ver Style margem top4 PX perfeitinho Olha que juzinho tá isso aqui gente então ó cliquei marquei deu errado cliquei marquei deu certo você Conclui o desafio e acertou zero ih rapaz aqui deu um bug hein Deixa eu voltar aqui vamos lá ó deu algum er també cada deveria ter um o vem PR cá agora o é sempre o primeiro elemento depois do Map né Beleza perfeito cliquei no confirmar errei eu

quero vir aqui e dar um console P log no user an Aqui ó carreguei repara aqui ó quando ele monta a página tá vazio no servidor quando chega no Browser tá vazio também então cliquei e confirmei tem o fals cliquei aqui preenchi false true você concluiu o desafio e acertou zero estranho isso aqui né P era só os ajustes finais er só dos estilos a gente pegou um bug novo aqui vamos tentar entender o que tá acontecendo aqui agora ó se eu jogar e eu acertar a primeira deu Certo quando pega a segunda eu confirmo

ele mostra que a gente só acertou um mas o arrei tem dois por que isso aqui na hora que a gente faz o submit a gente define o estado certo então a gente definiu aqui New answer state definiu as respostas do usuário também perfeito só que aí ó quando a gente faz esse set timeout o valor de Total points ainda não mudou de fato então a gente não sabe de fato que chegou na última questão então aqui a Gente tá indo num a gente tá num meio no Limbo né Tipo esse valor do user answers

ele tá desatualizado aqui ó console.log valor desatualizado ó tananã tananã valores atualizado como que a gente pode fazer para ter o valor mais recente acho que o o ideal que a gente pode pegar e trabalhar aqui é o seguinte ó a gente pode colocar aqui e tentar fazer alguma coisa em cima do score Answerer que também não resolveria muito a vida né porém tem um recurso do react que pode ajudar a gente que é o seguinte a gente quer saber sempre quando o user ancers mudou se é a última pergunta para daí totalizar esse valor

e mudar aqui e fazer todo o processo certo então o que que eu vou fazer eu vou aqui em cima passar a monitorar esse valor eu falar assim ó react me dá um outro Hook aí que você tem que é o use effect que que o US effect vai fazer ele vai monitorar Sempre que o user answers mudar não só ele tá ele vai est aqui como base bonitinho daí eu quero saber Ó se já tá na última questão is Slash question e trazer para cá carreguei jogar não é a última questão não é a

última agora é a última questão ó mas ele só ativa quando a gente clica ali quer ver ó ó jogar false cliquei aí ativou dado isso aqui a gente pode fazer o seguinte a gente tira toda essa lógica Daqui mas ainda mantém n ele não tentar ir PR próxima vai PR próxim aqui poré a gente pode jogar isso aqui aqui é uma forma de li aí em teoria aqui O valor vai correto e vamos testar Vamos jogar 2020 confirmar vou acertar só essa você acertou um false true e voltou a gente para cá agora tá

tudo certo beleza então eu mostrei essa última dica Aqui mas para fechar mesmo o nosso ciclo Aqui você vê esses recursos mais comuns do do react é claro eu super recomendo que você Tente por exemplo quebrar esse código aqui em funções menores por exemplo você criar uma função que seta a resposta então ele sabe se deu certo Ou se deu errado e você tentar criar uma função menor disso aqui tá então aqui ó eu vou até sugerir quebrar o submit em funções menores outro desafio que eu vou botar Para vocês também eu já citei anteriormente

né É você criar os componentes de fato do input e do botão T aqui o do input e do botão criar o componente certinho é tentar reusar as variáveis outro desafio que eu vou botar também aqui para vocês é permitir que o usuário possa setar essas variáveis via o arquivo de config Então você vai ter que de alguma forma carregar o arquivo de config aqui no root layout e definir esses valores de variáveis de CSS aqui No meio sabe eu quero que você explore as possibilidades porque minimamente no tempo que a gente teve já deu

para pegar bastante coisa aprender conteúdo de react Ah tem um desafio também de você conseguir pegar o nome né então vou até botar aqui ó page aqui no Game eu vou aqui botar como desafio pegar o nome do usuário definido na tela anterior e mostrar na tela final e você pode também fazer uma tela final com você enfim eu deixei aqui minhas dicas Espero que você tenha aproveitado esse conteúdo que ele tenha sido um conteúdo Rico para você a gente conseguiu abordar bastante coisa você pode investir em padronizar mais como a gente fez aqui na

parte das alternativas né padronizando Qual que é o componente padrão e tudo mais teve alguns ajustes que a gente viu por exemplo do Tab index um ajuste exra que você pode fazer é quando a gente der enter ou clicar no espaço a pessoa conseguir clicar no checkbox eu até Colocaria aqui ó desafio fazer com que ao clicar no apertar enter ou espaço a alternativa seja selecionada então tem várias coisas que você pode fazer junto com isso também eu colocaria para você tentar fazer o Deploy desse projeto aqui numa ferramenta com a vercel por exemplo porque

que você consegue compartilhar com outras pessoas você consegue subir também o seu projeto lá no github adicionar no seus repositórios pinados Que são coisas que fazem diferença e agora eu vou volar com Fabrício pra gente se despedir e fechar com chave de ouro aqui esse desafio para você ah Lembrando que eu convido você também a seguir as dicas do próprio Fabrício né que fala bastante de a e tudo mais tem até o livro dele na casa do código que se eu não me engano é esse aqui ó de Inteligência Artificial você pode aproveitar para tentar

plugar essas ferramenta incrementar o seu projeto Usar o chat PT plugar aqui enfim o seu é limite o projeto é seu e vai tá tudo linkado aqui na descrição o link do meu repositório do github o link do figma para você praticar e tudo mais então bora aí Fabrício vamos voltar ficou animal Mário parabéns cara Acho que você conseguiu transmitir muito bem pô Fabrício gostaria de agradecer acho que é isso assim cara é os pontos que eu trouxe aqui eu considero que são é daquela listinha de coisas de que todo Mundo deveria saber saca acho

que se todo mundo soubesse isso e fosse natural é fic mais fácil de conseguir trabalhar no dia a dia de conseguir trocar até de projeto sabe que eu acho que independente do tipo da da especialidade que você vai trabalhar é um conhecimento fundamental assim e que eu free a importância que não é só de frontend isso aqui te ajuda se você quiser mexer com com backend depois e tudo mais claro a parte do react em si não tanto se que Hoje em dia tá até com server components enfim temano para manga aí mas na prática

mesmo assim eu acho que vale dizer que é um conhecimento super reaproveitável assim eu tenho certeza que que daqui uns 2 TR anos você vai pegar um desafio que você fala hum o soltinho lá o pessoal da lura me ajudou nisso aqui exatamente e não deixe de se inscrever aqui no canal da lura para você ter acesso Todo mês a gente vai ter um novo episódio dessa websérie Portfólio Dev da outra também que a gente gravou com o Mário solto já tá no ar você pode dar uma olhada lá na entrevista de emprego Tec todas

para tentar te ajudar a mudar de carreira ou a crescer ainda mais na sua carreira e se inscreve dá o like deixa aqui nos comentários também se você criou o projeto Tinho junto com o Mário deixa o link do seu github lá pra gente dar uma olhada ou talvez a página né se fez os desafios é exato se você publicou a Página numa versel da vida github pages publica aqui pra gente dar uma olhada também nos comentários a gente vai curtir bastante e a gente se vê aqui no mês que vem na próxima websérie hipsters

portfólio Dev até mais pessoal tchau tchau n