IMERSÃO REACT AULA 01: A WEB, OS COMPONENTES E O DEPLOY!

AULA 01: A WEB, OS COMPONENTES E O DEPLOY!

Links, dicas e notas de aula

Boas-vindas! Chegou a hora de desenvolver um projeto inédito durante a Imersão React!

Essa é a primeira aula do projeto, onde você vai aprender como usar as estruturas de dados que temos no JavaScript para apresentar informações do lado do React. Mas no final eu garanto que você já vai ter algo incrível para mostrar para todo mundo e com uma URL dedicada utilizando a Vercel!

Resumo da aula

• Criamos o projeto inicial com NextJS;

• Vimos NPM scripts;

• Entendemos como checar a versão do Node e que o NPM vem junto com o projeto;

• Utilizamos o npx gitignore node para gerar o gitignore do projeto;

• Vimos a criação de um componente com React;

• Vimos como trabalhar com estilos no React;

• Como trabalhar com StyledComponents;

• Vimos como usar Props no React;

• Vimos sobre o children do React;

• Ao final pegamos o CSS já pré-criado pelo DevSoutinho, adicionamos no nosso projeto e seguimos com os desafios.

Código da Aula

• Nosso repositório do projeto com todas as aulas ficam aqui

• Clique aqui para acessar o código completo da aula. Basta ir navegando nos arquivos através da interface do GitHub.

• Clique aqui para ter acesso ao Gist usado na aula, a "colinha" do DevSoutinho.

Links citados

Preparação do seu ambiente:

• NodeJS a versão LTS do momento

• Visual Studio Code

Links gerais da aula:

• Material Design.

• Documentação do ReactJS.

• Documentação do NextJS.

• Documentação do Styled Components.

• Conta da Vercel no GitHub.

• Exemplo OFICIAL usando Styled Components na Vercel.

• Arquivo next.config.js dentro dos exemplos de Styled Components.

• Projeto do Flappy Bird do DevSoutinho para usar de referência na documentação.
  Desafios desta aula

• Adicionar o Banner! Sim, o banner que mostramos ao longo do vídeo! E você deve fazer isso utlizando Styled Components.

  • Use o Unsplash para pegar uma imagem legal.

  • Dica do Paulo: Use Props para receber o link da imagem, praticando a tag e o Styled Components.

• Criar a área de "Aluratubes Favoritos".

  • A parte do Figma está neste link.

  • Você também pode colocar no config.json e criar uma entrada de favorites com um array e fazer funcionar igual fizemos até agora.

• Arrumar o seu readme do GitHub.

  • Use o vídeo do canal do DevSoutinho como referência para melhorar seus READMEs com coisas que todos os projetos deveriam ter.

Material complementar

• Como trabalhar como Dev? FLUXO de TRABALHO DEV para INICIANTES.

• Styled Components, por onde começar? Os poderes do CSS in JS.

• Como começar a estruturar um projeto React? com NextJS, Styled Components.

• Do Zero ao React | Como fazer o React e aprender a ideia do Virtual DOM na prática.

• O que estudar antes de tentar aprender um Framework JavaScript? (React, Angular, Vue).