Curso-de-React.Js-Next.Js-

repositorio feito para acompanhar a minha evolução durante o curso de React.Js + Next.Js completo do básico ao avançado

Diario de bordo

Diario com o intuito de catalogar o meu progesso no curso

Dia 20/07/21

• Sessao 1 Introdução

  • ambiente configurado

• Sessao 2 React(Basico)

  • Introdução à seção
  • Ambiente de desenvolvimento no windos
  • npx create-react-app 1 e 2 (criando a aplicação e entendendo seus arquivos)
  • Exemplo de npm run build e do que se trata
  • React single page
  • Componentes funcionais e componentes de classe
  • Componentes de classe com estado(stateful)

Dia 21/07/21

• Sessao 2 React(Basico)

  • State com arrays e objetos
  • Licecyle methods(metodos de ciclo de vida) - parte 1
  • Licecyle methods(metodos de ciclo de vida) - parte 2
  • Buscando dados externos com fetch(Data fetching)
  • Props e organização dos componentes - Parte 1
  • Props e organização dos componentes - Parte 2
  • Props e organização dos componentes - Parte 3

  Ilustração:

  

Dia 22/07/2021

obs: hoje eu explorei um pouco mais a biblioteca do react e adicionei uma função de voltar a paginação

• Sessao 2 React(Basico)

  • Trabalho com inputs de texto

  • Fluxo de dados, componentes e state bs props

  • Decidir onde o estado vivo é importante (React Developer Tools)

  • Eventos Sinteticos do React (SyntheticEvent)

  • Configurando o Git e SSh Keys no Windos

  • Deploy do nosso projeto na Netlify obs: tive muitos problemas para conseguir fazer esse deploy, pois demorei para perceber que no curso ele transforma a pasta do projeto em um repositorio do git, enquanto eu estava tendando da deploy nesse reposiorio que eu já tinha feito antes que por conta do git ignore não tinha a pasta build.

  • Deploy https://gallant-leavitt-cb42a0.netlify.app/ :

  

Dia 23/07/2021

• Sessao 2 React(Basico)
  • Migrando para React Hooks
  • Mais sobre this.setState em classes

Dia 26/07/2021

• Sessao 2 React(Basico)

  • Indrodução à testes com jest e Testing Library - parte 1
  • Indrodução à testes com jest e Testing Library - parte 2
  • Indrodução à testes com jest e Testing Library - parte 3
  • Indrodução à testes com jest e Testing Library - parte 4
    • realizei os testes nos components (menos na home, pois é o conteudo da proxima sessão), e criei uma snapshot para cada teste de componente

  Ilustração:

Dia 27/07/2021

• Sessao 2 React(Basico)

  • Eslint, prettier, editorconfig e props-types

    • comando: npx eslint --init
    • comando: npx eslint src/**/*.jsx --fix
    • comando: npm test -- --watchAll="false" "--coverage"
    • comando: npm i -D prettier eslint-config-prettier eslint-plugin-prettier

  • ERRATA : defaultProps e destructuring

obs(Hoje tive muita dificuldade com as configurações, queria ter começado a outra sessão ainda hoje, mas por conta dos erros que tive que corrigir não consegui, porem consegui terminar a segunda seção 2 (React o básico))

Dia 02/08/2021

• Inicio da seção 20: JavaScript Essencial - Bônus;
  • Arrays Arrays - Atribuição via desestruturação (destructuring assignment)
  • Objetos - Atribuição via desestruturação (destructuring assignment)
  • Funções
  • Array filter
  • Arry Map
  • Array Reduce

Dia 03/08/2021

• seção 20: JavaScript Essencial - Bônus
  • Filter + map + reduce
  • Foreach
  • Classes
  • Metodos estáticos
  • Promises

Dia 04/08/2021

• seção 20: JavaScript Essencial - Bônus
  • Async / Await
  • Fetch API
  • Fetch API e Axios

Dia 06/08/2021

• seção 3: Mock Service Worker e testes para Home
  • Configurando Mock Service Worker para iniciar os teste
  • Testando os componentes renderizados pelo template
  • Testando a busca por posts
  • Testando o botão "Load more posts"

Dia 09/08/2021

• Seção 4: Reack Hooks e Padrões (Teoria)

  • Configuração do projeto (eslint, prettier, editorconfig e prop-types)
    • comando: npm i -D prettier eslint-config-prettier eslint-plugin-prettier
    • comando: npx eslint src/**/*.jsx --fix
    • comando: npm i prop-types
  • useState - React Hook (Parte 1)

  

#Dia 10/08/2021

• Seção 4: Reack Hooks e Padrões (Teoria)

  • useStae - React Hook(Parte2)
  • useEffect - React Hook
  • Regras dos hooks
  • useCallback - React Hook

  

#Dia 12/08/2021

• Seção 4: Reack Hooks e Padrões (Teoria)

  • useMemo - React Hook
  • useRef - React Hook

  

#Dia 14/08/2021

• Seção 4: Reack Hooks e Padrões (Teoria)

  • useContext Parte 1 - React Hook
  • useContext Parte 2 - React Hook

  

#Dia 17/08/2021

• Seção 4: Reack Hooks e Padrões (Teoria)

  • useReducer - React Hook

  

#Dia 18/08/2021

• Seção 4: Reack Hooks e Padrões (Teoria)

  • useReducer+useContext - React Hook

  

#Dia 23/08/21

• Seção 4: Reack Hooks e Padrões (Teoria)

  • Criando meu próprio Hook - React Hook