- Instalar yarn e verificar versão
npm install --global yarn yarn --version
- Criar projeto
npx create-next-app --example with-styled-components alurakut (ao perguntar nome do projeto)
- Rodar projeto
yarn dev http://localhost:3000/ (visitar url)
-
Escolher aqueles que mais se repetem
-
GlobalStyle: componente de estilos globais, como o reset, o que vai no body, etc
-
usar styled components para criar a estrutura básica da Home
src (código fonte do projeto) components (elementos que irão formar pages) MainGrid
index.js
> Box
index.js
pages (tudo o que vira página)
index.js
_document.js
_app.js
- Os componentes devem ser exportados (export default nome-do-componente)
- E depois importados no arquivo de page a ser usado (Home, por exemplo)
- Import sem "{}" é default
- Import com "{}" importa componentes individualmente
- {} sempre abrir e fechar chaves para inserir js
- map pega cada item do nosso array e o modifica, retornando um novo array
- vai alterar da forma que pedirmos no retorno
- ele sempre vai retornar a mesma quantidade de itens
- o map sempre devolve / retorna a array
- o forEach não, por isso não o usamos
- pois queremos uma função que devolva um array transformado
- no lugar de colocar styled.tag do html
- colocar entre () o componente já criado que vc quer herdar e modificar
- escrever entre o `` apenas o código que deseja modificar deste pai
- Pegar os dados da API do GitHub e listar seus seguidores
- Adicionar quão confiável, legal e sexy você é
- Separar e organizar o seu código
- Publicar o seu projeto
- Deixar o seu projeto com a sua cara
- é necessário porque não estamos usando server side
- não queremos que a página dê refresh após o form seja enviado
- pois senão nossos dados somem
- queremos guardar isso no estado da página
- ela só acontece enquanto o usuário está fazendo
- a alteração em js
- Fazer aparecer foto e nome do usuário no menu mobile
- Componentização (comunidades, form)
- Criar comunidades extras
- Modificar o fundo, personalizado, img
- cms é um gerenciador de conteúdo
- vamos usar para persistir as comunidades
- consumir dados de api com fetch
- recebe uma promise
- then é das promises => quando está promise for resolvida, faça x
- json() converte para objeto js (json)
- isso também retorna uma promessa
- e daí começamos a trabalhar com encadeamento de promises .then() e ...
- usar o catch() para erros
fetch('url que queremos acessar').then() .json()
- interceptador de qualquer evento que está acontecendo na página, pelo React
- colocando a fetch aí dentro, ela fica executando toda vez que ocorre alguma atualização
- e queremos que ele não faça isso
- e sim só carregue uma vez, quando a página for inicialmente carregada
- array de dependência [] no final do hook
- se deixar vazio, ele atualiza apenas uma vez
- ou pode colocar algo que vc quer interceptar, para assim atualizar
- criar conta e projeto
- models: definir os esqueletos dos conteúdos que você quer gerenciar
- vai prover backend padronizado
- Componentização
- Terminar de listar seus seguidores através da api do Github;
- Adicionar suas comunidades no DatoCMS;
- Entenderemos o que é XML e AJAX;
- Usaremos queries GraphQL para consumir os dados do DatoCMS;
- Fazer um BFF (Back-end For Front-end) para proteger nossos dados ao enviar dados para o servidor;
- Criar nossas comunidades pela interface do nosso Alurakut.
- Aba APIExplorer (playground)
- GraphQL
- diferente do REST (que traz todo o conteúdo)
- especifica o que vc quer buscar
- trabalha com buscas em cima do protocolo HTTP
- Como acessar a nossa API
- Tutorial
- BFF: backend for front-end
- criar com o próprio Next.js
- pasta "api" dentro de "pages"
- servidorzinho que roda as requisições que são solicitadas e depois desliga
- vamos fazer por motivos de segurança dos dados
- Refatorar código api.js
- Fazer os scraps
- Criar a nossa página de Login
- Roteamento automático com Next.js (dentro da pasta pages, já colocar o arquivo com nome da rota; ex: login.js)
- Dá para fazer isso sem Next.js com React Router DOM
- useRouter é um hook do Next.js, segue conceito de single page application, dando redirecionamento sem recarregar a página do usuário (o que acontece com o window.locate.href)
- URL de login que faremos fetch: https://alurakut.vercel.app/api/login
- token respeita um padrão de compressão de informações, padrão do JWT (jason web token), uma especificação para a comunicação entre serviços de backend e front
- trabalhar com cookies no Netx.js = nookies
yarn add nookies
- Next.js -> getServerSideProps: permite que, enquanto sua página está sendo montada, você decide se quer montar a página ou redirecionar o usuário
- inserir no final da Home Page a função getServerSideProps
- tudo o que eu passar de props nesta função vou poder acessar nos meus componentes
- usamos destructuring no props; ele já entende que o nome da variável é o nome da chave, então no props só coloco "githubUser" e nada mais
yarn add jsonwebtoken
- Implementar logout da aplicação
- Puxar dados API GitHub a partir do usuário que está logado
- Acrescentar dados do githubUser: local e bio
- Criar páginas que listam todas as comunidades e todos os amigos
- "Ver todos": direcionar para as páginas acima
- Criar página de perfil do usuário (usar rotas Next.js com id)
- Adicionar favicon e novo logo/nome (devkut)
- Refatorar código e pastas
- [] Puxar "comunidades" e "recados" do usuário logado
- [] Puxar todos os followers do GitHub (+ de 30)
- [] Criar página de comunidade (usar rotas Next.js com id)
- [] Fazer sistema de membros das comunidades
- [] Adicionar nomes das rotas no Head ('home', 'recados'...)
- [] Tema claro e tema escuro
- [] Deixar o README.md bonitão