O tema escolhido para o quizz foi o de histórias em quadrinhos clássicos como snoopy, garfield, mafalda, etc.
-
Feito:
-
foi montado o layout do quiz:
-
criado diretório components
-
criado principais componentes como os Widgets, GithubCorner
-
-
utilizado um arquivo db.json para centralizar questões, cores e temas do layout
-
-
Visto:
-
O Framework Next.js tem como principal diferencial o Server Side Rendering (SSR) da aplicação. Ou seja, renderiza o HTML inteiro no servidor e entrega ele pronto para o client, diferente do React comum que entrega apenas uma tag div com id root e o client que vai ser o responsável por renderizar o HTML.
-
Com o template do Next com Styled components, já é montado a estrutura de diretórios rapidamente.
-
O arquivo package.json já possui scripts preparados, o que utiliza durante o desenvolvimento é o dev
-
No diretório pages ficam os arquivos principais, na qual o próprio Next vai realizar o processo de build.
-
Diretório pages:
-
Arquivo _app.js:
-
fica o nosso "reset.css" (GlobalStyle).
-
o código que é padrão para todas as páginas que forem criadas (ex: Head do HTML, tema da página, etc).
-
-
Arquivo index.js:
- é montado o layout da primeira página juntando os components criados dentro da pasta components
-
-
-
Feito:
-
Add tags no
<head>do HTML -
Add eslint no projeto e customizado algumas regras no eslint
-
Criado um
<form>para que o usuário passe o nome dele para realizar o quiz -
Criado uma nova página para ter os quizes
-
-
Visto:
-
o eslint define padrões de formatação de código:
-
# inicia o lint npx eslint --init # realiza auto-correção de erros padrões npx eslint caminho_diretorio --fix
-
após realizar o init, é gerado um arquivo
.eslintrc.js, nele pode ser formatado regras (rules) que a pessoa desejar, além disso, nele possui outras configurações que são geradas automaticamente junto com o init. -
para verificar o tipo de um erro é necessário passar o mouse em cima do sublinhado de erro, e clicar no link que aparece na frente da info de erro.
-
-
Para criar uma nova página, basta criar um novo arquivo nome_da_pagina.js no diretório pages, que o Next vai reconhecer automaticamente (na URL fica o nome do arquivo escolhido como página)
-
Roteamento de url utilizando o hook do Next
useRoute, por baixo dos panos ele utiliza o history API que é nativo dos broswers. -
Hook
useStatedo próprio React para armazenar e setar estados.
-
-
Feito:
- Montado o layout da página de quizz
- O componente Widget possui "sub-componentes" ex: Widgets.Header
- Criado componentes para o formulário, Button e Input.
- foi utilizado o PropTypes neles.
-
Visto:
- Ciclo de vida do React - nasce(DidMount), irá atualiza(WillUpdate), irá finalizar(WillUnmount).
- Efeitos Colaterais - é qualquer evento que afeta algo fora do escopo atual onde a função está sendo executada.
- Buscar dados, configurar uma subscription, e mudar o DOM manualmente dentro dos componentes React são exemplos de efeitos colaterais
- PropTypes - realiza uma checagem de tipos nas props do componente (a ideia é semelhante ao TypeScript).
- Para utilizar, é necessário instalar ele com
npm install prop-types -
// Criando componente function Componente({ nome, idade }){ return ( <div> {nome} </div> <div> {idade + idade} </div> ) } // define um valor default para a prop Componente.defaultProps = { nome: 'Tony Tony Chopper', } // define os tipos para cada prop Componente.propTypes = { nome: PropTypes.string, idade: PropTypes.number.isRequired, };
- Para utilizar, é necessário instalar ele com
- Atrinbuto as - Um componente quando utiliza o styled-component pode alterar a tag do componente montado para outro no momento de utilizar esse componente.
-
// definido um componente com a tag a const Option = styled.a` color: blueViolet; ` // Option seria uma tag a, mas o atributo alterou para ser uma label. <Oprion as="label">
-
-
Feito:
- montado a lógica de funcionamento do quizz
- criado o componente de Widget para os resultados
- adicionado o componente AlternativeForms que possui um CSS que adiciona estilos dependendo do valor de data-selected e data-status.
- utilizado useState e useEffect nos componentes da pagina de quizz
-
Visto:
- LambdaServer - com o Next é possível montar uma rota assim como no express. o arquivo pages/api/db.js é um exemplo disso.
-
Feito:
- implementação de uma página dinâmica
- buscado o db.json de outros quizes
- mondato o layout de acordo com o tema e perguntas dos quizes buscados.
- utilizado a lib framer-motion.
-
Visto:
- getServerSideProps - os códigos dentro dessa função serão executados no lado do servidor.
- dentro dessa função, você tem os poderes para manipular rotas, pegar query params, ver o header de requests, entre outras coisas
- Pode ser utilizado um fetch dentro para que os dados que forem retornados da promisse possam ser renderizados junto no HTML.
- Framer-motion - lib para adicionar animações com css.
- getServerSideProps - os códigos dentro dessa função serão executados no lado do servidor.