Mario Souto

Jose Souto

<p>A imersão terminou dia 1/2/2021. Nos vemos no bootcamp!</p>
<p>Olhe os <a href="https://aluraquiz-base.alura-challenges.vercel.app/contribuidores">projetos incríveis</a> que estão sendo criados aqui.</p>
<p>Aqui a descrição do bootcamp de Front-end. Com detalhes por módulos, JAM stack e como trabalharemos para transformar a sua carreira:</p>
<p>TODO: nao funciona esse de baixo:</p>
<p>https://www.youtube.com/watch?v=nmNqz74EOPE</p>
<p>ESSES FUNCIONAM:</p>
<div class="cosmos-elasticMedia-container">
            <iframe src="https://www.youtube.com/embed/nmNqz74EOPE" class="cosmos-elasticMedia" frameborder="0" allow="autoplay; encrypted-media; picture-in-picture" allowfullscreen></iframe>
        </div>
<div class="cosmos-elasticMedia-container">
            <iframe src="https://www.youtube.com/embed/nmNqz74EOPE" class="cosmos-elasticMedia" frameborder="0" allow="autoplay; encrypted-media; picture-in-picture" allowfullscreen></iframe>
        </div>
<h1>Como foi a primeira aula?</h1>
<p>Na primeira aula de <strong>React</strong> vamos criar uma página inicial para você montar seu quiz personalizado e também já vamos colocá-la no ar! O repositório para você acompanhar está aqui:</p>
<p>https://github.com/alura-challenges/aluraquiz-base/</p>
<p>Não se preocupe com o código que tem lá agora, você vai ver tudo durante a aula. Ele está no repositório para te auxiliar.</p>
<p>Vamos usar <strong>styled-components</strong> para criar componentes com estilo (literalmente falando) e diversos recursos do <strong>Next.js</strong> para, entre outras ferramentas que vamos ver nas próximas aulas, dar o código inicial do projeto e gerar os arquivos de <em>build</em>. Enquanto isso, vamos descobrindo como o React funciona e quais suas partes principais.</p>
<h1>Conteúdo detalhado dessa aula</h1>
<ul>
<li>Iniciar um projeto com o <em>boilerplate</em> do React com Next.js e styled-components;</li>
<li>Criar componentes React usando styled-components;</li>
<li>Implementar tema (<em>theme</em>) para a interface;</li>
<li>Fornecer as informações de tema e dados do quiz através de uma base de dados "mockada";</li>
<li>Usaremos o Next.js para criar a tag <code>&#x3C;head></code> e as meta-infos necessárias;</li>
<li>Faremos a publicação (<em>deploy</em>) na Vercel.</li>
</ul>
<p>Lembre de postar o que você desenvolveu durante esta aula com a hashtag <strong>#ImersaoReact</strong> marcando a gente e a Alura! E vale marcar a Vercel também!</p>
<p>Além disso, não deixe de subir seu projeto no <a href="https://github.com/">GitHub</a> e publicá-lo na <a href="https://vercel.com/">Vercel</a> da forma que fizemos no vídeo.</p>
<blockquote>
<p>Após publicar seu projeto na Vercel, adicione no <em>About</em> do GitHub o endereço com o seu nome de user, nos <em>Topics</em> marque <code>imersao-react</code>, <code>alura</code> e <code>aluraquiz</code> e dê uma <strong>star</strong> no repositório do projeto!</p>
</blockquote>
<p>Também entre no <a href="https://discord.com/invite/uSZGtDrBep?utm_source=AluraWebsite&#x26;utm_medium=imersaopage">nosso server</a> no <strong>Discord</strong> para compartilhar seus resultados e tirar suas dúvidas com a comunidade e o time da Alura. Lembre-se que a melhor forma de aprender é ensinando, então não deixe de ajudar a comunidade respondendo as dúvidas e compartilhando seu conhecimento.</p>
<h1>Desafios dessa aula!</h1>
<ul>
<li>Crie seu próprio tema festivo, por exemplo de Halloween;</li>
<li>Utilize o protótipo do Figma (link abaixo) e crie o CSS "do zero";</li>
<li>Desafio do Paulo: Implemente a meta tag <code>og:image</code> utilizando a mesma imagem do background;</li>
<li>Desafio da Ju: Pensar em como passar da página inicial para a página de quiz.</li>
</ul>
<h1>Links importantes para você acompanhar a aula</h1>
<ul>
<li><a href="https://www.figma.com/file/cg1MIzSRRss8ggpypQbmdD/AluraQuiz?node-id=0%3A1">Protótipo da interface no Figma</a></li>
<li><a href="https://github.com/alura-challenges/aluraquiz-base/blob/v1/db.json">Arquivo 'db.json'</a></li>
<li><a href="https://github.com/alura-challenges/aluraquiz-base/tree/v1">Código da Aula</a></li>
<li><a href="https://github.com/alura-challenges/aluraquiz-base/pull/1/files">Gist com o CSS dos componentes usados na aula</a></li>
<li><a href="https://nodejs.org/pt-br/">Instale o NodeJS</a></li>
<li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-styled-components">Exemplo Next.js com styled-components</a></li>
<li><a href="https://nextjs.org/">Next.js</a></li>
<li><a href="https://styled-components.com/">styled-components</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components">VSCode Styled Components - melhora a sintaxe do CSS no JS</a></li>
<li><a href="https://github.com/alura-challenges/aluraquiz-base/tree/v1">Repositório do código final da aula 1</a></li>
</ul>
<h1>Links citados nessa aula</h1>
<ul>
<li><a href="https://www.youtube.com/playlist?list=PLh2Y_pKOa4Uf-cUQOVNGlz_GVHx8QYoE6">Série Git e GitHub para sobrevivência</a></li>
<li><a href="https://youtu.be/QzDjdlF1BQI">DOM e o que estudar antes de aprender React</a></li>
<li><a href="https://www.alura.com.br/artigos/visualstudio-code-instalacao-teclas-de-atalho-plugins-e-integracoes">VisualStudio Code: instalação, teclas de atalho, plugins e integrações</a></li>
<li><a href="https://material-ui.com/customization/color/">Exemplos de paleta de cores com MaterialUI</a></li>
<li><a href="https://color.adobe.com/trends">Exemplos de paleta de cores com Adobe Color</a></li>
<li><a href="https://flexboxfroggy.com/#pt-br">Joguinho para treinar posicionamento com CSS Flexbox</a></li>
<li><a href="https://www.alura.com.br/artigos/tagged-template-literals">O que são tagged functions</a></li>
</ul>
<h1>Conteúdos extras:</h1>
<ul>
<li><a href="https://www.youtube.com/watch?v=pb5yKjCW004">Features que fazem o Next.js valer a pena</a></li>
<li><a href="https://www.youtube.com/watch?v=LMCtGvLJT6c">Como é a infra por trás do build de um projeto React?</a></li>
<li><a href="https://www.youtube.com/watch?v=5MzOCxSWrrc">Como o React funciona? Implemente o seu</a></li>
<li><a href="https://www.youtube.com/watch?v=c8mVlakBESE">Criando uma Pokedex com Next.js</a></li>
<li><a href="https://www.youtube.com/watch?v=QdfjWRc4ySA">Styled Components, por onde começar? Os poderes do CSS in JS</a></li>
<li><a href="https://necolas.github.io/normalize.css/">CSS Reset</a></li>
</ul>
<h1>Como compartilhar seu quiz:</h1>
<p>Você pode, depois do deploy, simplesmente marcar a gente e também usar as hashtags #ImersaoReact e #alura. Quer fazer melhor? Você pode usar <a href="https://chrome.google.com/webstore/detail/screencastify-screen-vide/mmeijimgabbpbgpdklnllpncmdofkcpn">esse plugin do Chrome</a> para gravar o seu site em ação, scrollar e mostrar efeitos especiais e ainda passear pelo seu código se usar o <a href="https://obsproject.com/pt-br/download">OBS</a>.</p>
<p>Poste no seu Instagram, Linkedin, Twitter ou Facebook e  marque #ImersaoReact, @aluraonline e nosso time para que a gente possa comentar. Quem sabe você aparece nos extras das aulas!</p>


Crie um quiz com seu tema preferido, utilizando as implementações mais recentes do React e bibliotecas modernas

React, Styled Components e Next.js

<p>Agora vamos ver como lidar com os estados (<em>states</em>) do React através dos <em>React hooks</em>, entender o que é uma SPA(Single Page Application), criar rotas dentro da nossa aplicação e evoluir nossos componentes.</p>
<p>Continuando a explorar as possibilidades do Next.js, vamos criar novas páginas dentro da nossa SPA e utilizar a ferramenta <code>next/router</code> para fazer o gerenciamento das rotas entre elas e também organizar e separar os componentes que estamos criando.</p>
<h1>Conteúdo detalhado dessa aula</h1>
<ul>
<li>Instalar e rodar o Eslint, biblioteca de <em>linting</em> para JS;</li>
<li>Entender o que é uma SPA;</li>
<li>Criar componentes complexos com styled-components;</li>
<li>Utilizar <em>props</em> com os componentes;</li>
<li>Capturar de eventos em formulários (como clique);</li>
<li>Gerenciar estado (<em>state</em>) de componentes com <em>hooks</em>;</li>
<li>Passar dados em URLs através de <code>query params</code>;</li>
<li>Utilizar <code>next/router</code> para implementação de rotas;</li>
</ul>
<p>Lembre de postar o que você desenvolveu durante esta aula com a hashtag <strong>#ImersaoReact</strong> marcando o <a href="https://twitter.com/omariosouto">Soutinho</a>, a <a href="https://twitter.com/aquijuz">Ju</a> e o <a href="https://twitter.com/paulo_caelum">Paulo</a>!  No Linkedin fica incrível como portfolio.</p>
<p>Além disso, não deixe de atualizar seu projeto no <a href="https://github.com/">GitHub</a> e publicar a atualização na <a href="https://vercel.com/">Vercel</a> da forma que fizemos no vídeo.</p>
<p>O <a href="https://discord.gg/gEGKZQze">nosso server</a> no <strong>Discord</strong> está super movimentado. Se você ainda não faz parte é só entrar, compartilhe seus resultados e tire suas dúvidas com a comunidade e o time da Alura!</p>
<h1>Desafios dessa aula!</h1>
<ul>
<li>Configurar as regras de linting no arquivo <code>.eslintrc</code></li>
<li>Implementar o input e o botão com styled-components, como no protótipo do Figma</li>
<li>Pegar o nome passado no <code>query param</code> da URL e exibir na tela</li>
<li>Reutilizar o componente <code>Widget</code> para fazer a tela <code>/quiz</code></li>
<li>Investigar os imports com <code>{ }</code> e a estrutura de tupla (<code>[ , ]</code>)</li>
</ul>
<h1>Links importantes para você acompanhar a aula</h1>
<ul>
<li><a href="https://fonts.google.com/specimen/Lato?query=lato">fonte Lato no Google Fonts</a></li>
<li><a href="https://github.com/alura-challenges/aluraquiz-base/pull/64/files">Arquivos que foram alterados nessa aula</a></li>
<li><a href="https://github.com/alura-challenges/aluraquiz-base/tree/v2">Código completo da Aula 02</a> não esqueça de clicar na estrela do repo!</li>
</ul>
<h1>Links citados nessa aula</h1>
<ul>
<li><a href="https://babeljs.io/">Babel</a></li>
<li><a href="https://youtu.be/4Tb8dp5GYqI">Vídeo sobre React Router</a></li>
<li><a href="https://eslint.org/">ESLint</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint">Plugin do ESLint para Visual Studio Code</a></li>
</ul>
<h1>Conteúdos extras</h1>
<ul>
<li><a href="https://youtu.be/f8a-qwKC5yk">Destructuring em JavaScript</a></li>
<li><a href="https://www.youtube.com/watch?v=dZH9aDX8T-0&#x26;list=PLTcmLKdIkOWnB8M6jEtg22yiTl3xSZHtZ">Colocando animações nas suas apps com Lottie</a></li>
<li><a href="https://www.youtube.com/watch?v=4cEMgap9wpk&#x26;t=1s">Efeito de desenhar com CSS</a></li>
<li><a href="https://www.youtube.com/watch?v=6KS4t97yMlI">Konami Code com JavaScript</a></li>
<li><a href="https://www.youtube.com/watch?v=mGXPon0H-Ks">Dicas para validar ideias com JavaScript</a></li>
</ul>
<h1>Veja o que seus colegas já fizeram!</h1>
<p>Há muita gente usando a hashtag do #aluraquiz para mostrar seus repositórios:</p>
<p>https://github.com/topics/aluraquiz</p>
<p>E o seu? Deploie, marque a gente e conte o que está aprendendo. No Discord está ocorrendo lives e streaming o tempo todo. Esperamos você!</p>


Uma das partes mais importantes do React é o gerenciamento de estado. Vamos ver como fazer isso com *hooks* e também como usar o Next.js como ferramenta de roteamento em uma SPA.

Linter, Rotas e State

<p>Vamos colocar a página de Quiz no ar! E temos live o <a href="https://www.youtube.com/devsoutinho">canal de Front-end do DevSoutinho</a>.</p>
<p>Nesta aula vamos reforçar um dos temas principais do React: o gerenciamento de estados e do ciclo de vida dos componentes. Alterando estados e identificando para momento deste ciclo, é possível atualizar cada componente, alterar os componentes da tela e adicionar efeitos.</p>
<p>Para isso, vamos associar as ferramentas do React (<em>hooks</em>, componentes e JSX) à lógica do JavaScript moderno para carregar as questões e alternativas do nosso quiz.</p>
<h1>Conteúdo detalhado dessa aula</h1>
<ul>
<li>Criar o componente <code>&#x3C;Input></code></li>
<li>Trabalhar com as propriedades (<code>props</code>) dos componentes</li>
<li>Garantir a tipagem das propriedades com a biblioteca <code>prop-types</code></li>
<li>Criar a página de quiz e seus componentes</li>
<li>Criar componente <code>&#x3C;LoadingWidget></code> a partir do <code>&#x3C;Widget></code></li>
<li>Exibir as perguntas e alternativas na tela a partir do arquivo <code>db.json</code></li>
<li>Criar formulários para gerenciar as alternativas</li>
<li>Trabalhar com os estados (<em>states</em>) da página de quiz para alternar carregamento, questões e resultado</li>
<li>Entender o ciclo de vida dos componentes do React</li>
<li>utilizar <code>useEffects()</code> para adicionar ações ao componente da tela de quiz</li>
</ul>
<p>Lembre de postar o que você desenvolveu durante esta aula com a hashtag <strong>#ImersaoReact</strong> marcando o <a href="https://twitter.com/omariosouto">Soutinho</a>, a <a href="https://twitter.com/aquijuz">Ju</a> e o <a href="https://twitter.com/paulo_caelum">Paulo</a>!</p>
<p>Se você ainda não entrou no <a href="https://discord.com/invite/uSZGtDrBep?utm_source=AluraWebsite&#x26;utm_medium=imersaopage">nosso server</a> no <strong>Discord</strong>, aproveita!</p>
<h1>Desafios dessa aula!</h1>
<ul>
<li>Desafio do Mario: Fazer a seleção das alternativas funcionar (no modo easy com <code>alert()</code> ou no modo hard com mudança de <code>state</code>)</li>
<li>Desafio do Paulo: Traga suas questões de JavaScript, de Java, de PHP ou do que mais quiser e vamos trocar conhecimento!</li>
<li>Desafio da Ju: Comece a pensar na lógica por trás do quiz. Contagem de pontos? Como e quando finalizar o jogo? Quem ganha ou perde?</li>
</ul>
<h1>Links importantes para você acompanhar a aula</h1>
<ul>
<li><a href="https://github.com/alura-challenges/aluraquiz-base/pull/103/files">Gist com o CSS dos componentes usados na aula</a></li>
<li><a href="https://github.com/alura-challenges/aluraquiz-base/tree/v3">Repositório do código final da aula 3</a></li>
</ul>
<h1>Links citados nessa aula</h1>
<ul>
<li><a href="https://pt-br.reactjs.org/docs/typechecking-with-proptypes.html">Documentação do React sobre checagem de tipos - em português!</a></li>
<li><a href="https://www.npmjs.com/package/prop-types">Link da biblioteca prop-types no NPM</a></li>
</ul>
<h1>Conteúdos extras</h1>
<ul>
<li><a href="https://youtu.be/DbEpBeZ6yic">Desmistificando o Redux</a></li>
</ul>
<h1>Como compartilhar seu quiz:</h1>
<p>Você pode, depois do deploy, simplesmente marcar a gente e também usar as hashtags #ImersaoReact e #alura. Mas quer fazer melhor? Você pode usar <a href="https://chrome.google.com/webstore/detail/screencastify-screen-vide/mmeijimgabbpbgpdklnllpncmdofkcpn">esse plugin do Chrome</a> para gravar o seu site em ação!</p>
<p>Poste no seu Instagram, Linkedin e Facebook! Marque a gente :)</p>


Vamos ver com mais detalhes o ciclo de vida dos componentes, como usamos o React para gerenciar cada fase deste ciclo e como usar este ciclo na página de quiz

Inputs e página de Quiz

<p>Hora de finalizar a página de quiz, com todos os passos necessários para jogar: selecionar a alternativa, receber feedback na tela em caso de erro ou acerto, contagem de pontos e exibição da tela de resultados.</p>
<p>Durante o desenvolvimento, vamos ver mais sobre o funcionamento das <code>props</code>, como trabalhar com mais de uma instância do mesmo componente na tela, pensar na lógica para capturar cliques, tratar os resultados e engatilhar mudanças de estado a cada ação do usuário.</p>
<p>Para que você possa publicar seu quiz e divulgar outros quizzes na tela, vamos começar com as ferramentas do Next.js para criação de <em>endpoints</em> e manejo de requisições e respostas.</p>
<h1>Conteúdo detalhado dessa aula</h1>
<ul>
<li>Criar o componente <code>&#x3C;Input></code></li>
<li>Desenvolver o algoritmo de seleção de alternativa para cada pergunta</li>
<li>Statements x expressões no React</li>
<li>Ver mais sobre <code>props</code> do React e a prop <code>key</code></li>
<li>Manejo de estados com a renderização de várias instâncias de um mesmo componente</li>
<li>Lógica da seleção de alternativas, habilitação do botão e troca de pergunta (utilizando estados, atributos do HTML e índices da array)</li>
<li>Lógica da contagem de pontos com alteração de estado</li>
<li>Atualização dos pontos com o ciclo de atualização do React</li>
<li>Exibir a tela de resultados com a soma dos pontos e as alternativas escolhidas ao final das perguntas</li>
<li>Usar atributo <code>data-[]</code> para passar informações de estilo para o componente das alternativas</li>
<li>Criar <em>lambda servers</em> com Next.js para retornar <em>endpoints</em></li>
<li>Passar configurações de <code>CORS</code> para poder acessar quizes externos</li>
</ul>
<p>Se você ainda não fez o <em>deploy</em> do seu projeto na <a href="https://vercel.com/">Vercel</a>, agora é a hora! Compartilhe no <strong>Discord</strong> e também nas redes sociais. Não esquece de marcar a gente!</p>
<h1>Desafios dessa aula!</h1>
<ul>
<li>Desafio do Paulo: Resolver a contagem de pontos utilizando um <em>bitset</em> (ou <em>bitmap</em>)!</li>
<li>Mais um desafio do Paulo: Publique seu quiz na Vercel e faça barulho nas redes, tageando o @rauchg!</li>
<li>Desafio da Ju: Pegue o <em>query param</em> <code>name</code> e exiba o nome da pessoa que está jogando na tela de resultados. <strong>Dica: o Next.js tem uma lib pra te ajudar nisso!</strong></li>
</ul>
<h1>Dica para resolver o desafio dos quizes da galera</h1>
<p>Vamos deixar aqui um trecho de código para te ajudar a resolver este desafio:</p>
<pre><code class="language-js">&#x3C;ExternalQuizList hasName={hasName}>
	{db.external.map((url) => {
		const prepareUrl = url
			.replace(/\//g, '')
			.replace('https:', '')
			.replace('.vercel.app', '');

		const [repoName, user] = prepareUrl.split('.');
		return (
			&#x3C;li key={url}>
				&#x3C;Widget.Topic href={`/quiz/${user}__${repoName}?name=${name}`}>
					{`${user}/${repoName}`}
				&#x3C;/Widget.Topic>
			&#x3C;/li>
		);
	})}
&#x3C;/ExternalQuizList>
</code></pre>
<p>A implementação por enquanto fica com você! A resposta deste desafio vem com a próxima (e última) aula!</p>
<h1>Links importantes para você acompanhar a aula</h1>
<ul>
<li><a href="https://github.com/alura-challenges/aluraquiz-base/pull/177/files">Gist com o CSS dos componentes usados na aula</a></li>
<li><a href="https://github.com/alura-challenges/aluraquiz-base/tree/v4">Repositório do código final da aula 4</a></li>
<li><a href="https://github.com/alura-challenges/aluraquiz-base/blob/aula04/pages/api/db.js">Código que usamos para criar o endpoint <code>api/db</code></a></li>
</ul>
<h1>Links citados nessa aula</h1>
<ul>
<li><a href="https://medium.com/@omariosouto/entendendo-como-fazer-ajax-com-a-fetchapi-977ff20da3c6">Post do Soutinho sobre Fetch API</a></li>
<li><a href="https://youtu.be/O_bSjsLga48">Vídeo do Soutinho sobre array.reduce()</a></li>
</ul>
<h1>Como compartilhar seu quiz:</h1>
<p>Você pode, depois do deploy, simplesmente marcar a gente e também usar as hashtags #ImersaoReact e #alura. Mas quer fazer melhor? Você pode usar <a href="https://chrome.google.com/webstore/detail/screencastify-screen-vide/mmeijimgabbpbgpdklnllpncmdofkcpn">esse plugin do Chrome</a> para gravar o seu site em ação, scrollar e mostrar efeitos especiais e ainda passear pelo seu código quando ele estiver interessante.</p>
<p>Poste no seu Instagram, Linkedin, Twitter ou Facebook e não esqueça de marcar #ImersaoReact, @aluraonline e nosso time para que a gente deixe um comentário e, quem sabe, você apareça nos extras das aulas!</p>


Hora de finalizar o quiz e colocar tudo no ar!

Quiz, Pontuação e Integrações com Next.js

<p>Bootcamp Front-end JAM Stack vem aí! 6 módulos para usar a JAM com React, Next e muito mais. Estamos animados! Um pouco de info no fim dessa aula e lançamento na segunda feira.</p>
<p>Chegamos ao final desta Imersão! Para fechar, vamos usar os poderes do Next.js para criar conteúdos dinâmicos a partir de templates e fazer o gerenciamento destas páginas. Para arrematar, as animações com Framer Motion vão dar movimento para a montagem dos componentes.</p>
<h1>Conteúdo detalhado dessa aula</h1>
<ul>
<li>Listar endereços dos quizes da galera na página principal, a partir do arquivo db.json</li>
<li>Reaproveitar o componente de Widget</li>
<li>Acrescentar botões para os quizes da galera</li>
<li>Criar rotas com parâmetros dinâmicos com Next.js</li>
<li>Usar métodos de otimização por SSR para criar páginas dinâmicas</li>
<li>Trabalhar com promessas utilizando a <a href="https://developer.mozilla.org/pt-BR/docs/Web/API/Fetch_API">Fetch API</a> e Promises</li>
<li>Organizar o projeto com a pasta <code>screens</code> para definir leiautes de páginas</li>
<li>Passar para a página de quiz as <code>props</code> dos quizes externos</li>
<li>Usar o componente <code>&#x3C;Link></code> do Next.js para fazer a navegação no formato SPA</li>
<li>Usar o <a href="https://www.framer.com/motion/">Framer Motion</a> para criar animações de entrada para os widgets</li>
</ul>
<h1>Desafios dessa aula!</h1>
<ul>
<li>Desafio do Paulo: Refatorar a expressão regular que usamos para customizar os links dos quizes externos nos botões, para que funcionem em todos os <em>corner cases</em>.</li>
<li>Desafio do Soltinho: Reaproveitar os componentes da página de quiz para montar a página do quiz externo.</li>
<li>Desafio de Ju: Deixar os botões para os quizes da galera desabilitados enquanto o usuário não preencher o nome no input.</li>
</ul>
<h1>Links importantes para você acompanhar a aula</h1>
<ul>
<li><a href="https://github.com/alura-challenges/aluraquiz-base/pull/270/files">Gist com o CSS dos componentes usados na aula</a></li>
<li><a href="https://github.com/alura-challenges/aluraquiz-base/tree/v5">Repositório do código final da aula 5</a></li>
<li><a href="https://www.framer.com/motion/">Framer Motion</a></li>
</ul>
<h1>Os quizes que a Alura e o DevSoutinho fizeram pra você se inspirar &#x3C;3</h1>
<ul>
<li>
<p>https://aluraquiz-base.alura-challenges.vercel.app/</p>
</li>
<li>
<p>https://aluraquiz-css.omariosouto.vercel.app/</p>
</li>
<li>
<p>https://aluraquiz-devsoutinho.omariosouto.vercel.app/</p>
</li>
<li>
<p>PS: Eles já estão usando o Lottie! Confere os códigos fonte</p>
<ul>
<li>https://github.com/crello/react-lottie/blob/master/example/src/LottieBasic.tsx</li>
<li>https://github.com/alura-challenges/aluraquiz-base/blob/main/src/screens/Quiz/index.js#L63</li>
</ul>
</li>
</ul>
<h1>Links citados nessa aula</h1>
<ul>
<li><a href="https://youtu.be/9E2xlG-m9Gs">Live sobre JAM Stack na Hipsters.Talks #35</a></li>
<li><a href="https://www.alura.com.br/artigos/javascript-replace-manipulando-strings-e-regex">JavaScript replace: manipulando Strings e regex</a></li>
<li><a href="LINKAQUI">Post/vídeo sobre Node/threads ou algo assim 39:10</a></li>
<li><a href="https://youtu.be/dZH9aDX8T-0">Vídeo: animações com Lottie</a></li>
</ul>
<h1>Aulas e Discord no ar só até a sexta-feira que vem!</h1>
<p>Teremos um encerramento na segunda-feira às 18h. Depois a imersão se acaba e te esperamos aqui na Alura com a gente, seja na plataforma ou em futuras imersões.</p>
<h1>Mostre seu próprio quiz e desafie a galera!</h1>
<p>Lembre de usar <a href="https://chrome.google.com/webstore/detail/screencastify-screen-vide/mmeijimgabbpbgpdklnllpncmdofkcpn">esse plugin do Chrome</a> para gravar o seu site em ação, scrollar e mostrar efeitos especiais.</p>
<p>Poste no seu Instagram e Linkedin e não esqueça de marcar #ImersaoReact e @aluraonline para que a gente deixe um comentário e, quem sabe, você apareça nos extras das aulas!</p>


Finalizando em grande estilo, integrando APIs e animando componentes no Next.js!

Inputs e página de Quiz

Challenge steps

Conteúdo detalhado dessa aula

Desafios dessa aula!

Links importantes para você acompanhar a aula

Links citados nessa aula

Conteúdos extras

Como compartilhar seu quiz: