/imersao-react-nextjs

Projeto criado para a Imersão React Next.JS da Alura, que ocorreu entre 25 e 29 de Janeiro de 2021.

Primary LanguageJavaScript

Imersão React Next.JS

Projeto criado para a Imersão React Next.JS da Alura, que ocorreu entre 25 e 29 de Janeiro de 2021.

Aula 1: React, Styled Components e Next.js

  • npx create-next-app --example with-styled-components: Cria um novo projeto com o template Styled Components.
  • npm run dev ou yarn dev: Inicia a aplicação em modo de desenvolvimento.
  • https://imersao-react-nextjs.guidb.vercel.app

Aula 2: Linter, Rotas e State

  • npm install ou yarn install: Instala/atualiza as dependências do projeto, gerando a famigerada node_modules.
  • npm run eslint:init ou yarn eslint:init: Inicializa a configuração do eslint. Para esse projeto, utilizaremos as configurações: To check syntax, find problems, and enforce code style, JavaScript modules (import/export), React, No, Browser, Use a popular style guide, Airbnb, JavaScript e Yes.
  • npm run lint ou yarn lint: Roda o lint em seu projeto, analisando seu código e corrigindo o que ele consegue.

Visual Studio Code:

  • Ctrl + Shift + P e digite eslint fix all: Corrige seu código automaticamente.

Aula 3: Inputs e página de Quiz

  • npm install prop-types: Biblioteca que realiza validações de tipagem.

Dica:

  • Ótima forma de "debugar"/visualizar os seus dados na página (no meio do JSX):
<pre>
    {JSON.stringify(question, null, 4)}
</pre>

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

  • Se você criar um diretório chamado api/ dentro do diretório pages/ o Next.js configura os arquivos desse diretório em um Lambda Server, que disponibiliza um endpoint que qualquer um poderá consumir.
  • Ex.:
import db from '../../db.json';

export default function (request, response) {
  response.json(db);
}

Aula 5: Páginas dinâmicas, animações e Lottie

  • npm install framer-motion: Biblioteca que facilita a implantação de animações em sua página.
  • npm install @crello/react-lottie: Biblioteca que .

Next.js:

  • A principal função do Next.js é resolver a parte de roteamento da aplicação.
  • Se você exportar uma função assíncrona chamada getServerSideProps de uma página, o Next.js vai pré-renderizar essa página em cada request utilizando os dados retornados pela função.
export async function getServerSideProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}