Voltar para a Home

React, Styled Components e Next.js

Slug: aula01-react-nextjs-aluraquiz

Challenge steps

A imersão terminou dia 1/2/2021. Nos vemos no bootcamp!

Olhe os projetos incríveis que estão sendo criados aqui.

Aqui a descrição do bootcamp de Front-end. Com detalhes por módulos, JAM stack e como trabalharemos para transformar a sua carreira:

TODO: nao funciona esse de baixo:

https://www.youtube.com/watch?v=nmNqz74EOPE

ESSES FUNCIONAM:

Como foi a primeira aula?

Na primeira aula de React 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:

https://github.com/alura-challenges/aluraquiz-base/

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.

Vamos usar styled-components para criar componentes com estilo (literalmente falando) e diversos recursos do Next.js para, entre outras ferramentas que vamos ver nas próximas aulas, dar o código inicial do projeto e gerar os arquivos de build. Enquanto isso, vamos descobrindo como o React funciona e quais suas partes principais.

Conteúdo detalhado dessa aula

  • Iniciar um projeto com o boilerplate do React com Next.js e styled-components;
  • Criar componentes React usando styled-components;
  • Implementar tema (theme) para a interface;
  • Fornecer as informações de tema e dados do quiz através de uma base de dados "mockada";
  • Usaremos o Next.js para criar a tag <head> e as meta-infos necessárias;
  • Faremos a publicação (deploy) na Vercel.

Lembre de postar o que você desenvolveu durante esta aula com a hashtag #ImersaoReact marcando a gente e a Alura! E vale marcar a Vercel também!

Além disso, não deixe de subir seu projeto no GitHub e publicá-lo na Vercel da forma que fizemos no vídeo.

Após publicar seu projeto na Vercel, adicione no About do GitHub o endereço com o seu nome de user, nos Topics marque imersao-react, alura e aluraquiz e dê uma star no repositório do projeto!

Também entre no nosso server no Discord 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.

Desafios dessa aula!

  • Crie seu próprio tema festivo, por exemplo de Halloween;
  • Utilize o protótipo do Figma (link abaixo) e crie o CSS "do zero";
  • Desafio do Paulo: Implemente a meta tag og:image utilizando a mesma imagem do background;
  • Desafio da Ju: Pensar em como passar da página inicial para a página de quiz.

Links importantes para você acompanhar a aula

Links citados nessa aula

Conteúdos extras:

Como compartilhar seu quiz:

Você pode, depois do deploy, simplesmente marcar a gente e também usar as hashtags #ImersaoReact e #alura. Quer fazer melhor? Você pode usar esse plugin do Chrome para gravar o seu site em ação, scrollar e mostrar efeitos especiais e ainda passear pelo seu código se usar o OBS.

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!