Skip to content

Latest commit

 

History

History
132 lines (118 loc) · 4.92 KB

README.md

File metadata and controls

132 lines (118 loc) · 4.92 KB

Ignite_Trilha_ReactJS

Trilha React - Nextjs @Rocketseat

Desafios

Módulo 01-github-explorer

M1.1 Configurando o ambiente

  • introdução ao módulo
  • ambiente de desenvolvimento
  • criando a estrutura do projeto
  • configurando babel
  • configurando webpack
  • estrutura do reactjs
  • servindo html estático
  • webpack devserver
  • utilizando source maps
  • ambiente de produção
  • importando arquivos css
  • utilizando sass

M1.2 Conceitos importantes

  • primeiro componente React
  • propriedades React
  • estado do componente
  • a imutabilidade no react
  • fast refresh no webpack

M1.3 Chamadas HTTP

  • estilização da listagem
  • utilizando o useEffect
  • listando repositórios

M1.4 Usando TypeScript

  • fundamentos do typescript
  • typescript no reactjs
  • componentes com typescript

M1.5 Finalizando a aplicação

  • utilizando react devtools
  • finalização do módulo

Tela de execução

Desafio 01- Conceitos do react

  • Visualizar repositório - Desafio 01
  • Nesse desafio, você deverá criar uma aplicação para treinar o que aprendeu até agora no ReactJS. Essa será uma aplicação onde o seu principal objetivo é uma pequena aplicação de atividades a fazer, para treinar um pouco mais sobre manipulação do estado no React.

Desafio 02- Componentizando a aplicação

Módulo 02-primeira-aplicacao-com-reactjs

M2.1 Estrutura da aplicação

  • introdução do módulo
  • estrutura com create-react-app
  • exportando assets do figma
  • instalando styled components
  • criando estilos globais
  • fontes do google fonts

M2.2 Componentização

  • componente: Header
  • componente: Summary
  • componente: TransactionTable

M2.3 Consumindo API

  • criando front-end sem back-end
  • configurando MirageJS
  • configurando cliente do axios

M2.4 Modal & Forms

  • configurando modal de criação
  • componente: NewTransactionModal
  • estrutura do formulário
  • estilizando modal
  • criando botões de tipo
  • funcionamento dos botões
  • cores dos botões
  • salvando dados do form
  • inserindo transação na api
  • listando transações e seeds
  • formatando valores

M2.5 Contextos e Hooks

  • introdução à contextos
  • a context api no react
  • carregando transações
  • movendo criação para o context
  • finalizando inserção
  • calculando resumo
  • criando hook

Tela de execução

Desafio 03- Criando um hook de carrinho de compras

Desafio 04- Refactoring de classes e typescript

Módulo 03-Fundamentos do Next.JS

M3.1.1 Estrutura da aplicação

  • introdução ao módulo
  • fluxo da aplicação
  • fundamentos do next.js
  • criando estrutura next.js
  • adicionando typescript
  • estilizando com sass
  • configurando fonte externa
  • title dinâmico por página
  • estilos globais do app

M3.1.1 Componentes e páginas

  • componente: Header
  • componente: SignInButton
  • página Home
  • componente: SubscribeButton

M3.1.1 Integração com API

  • configurando Stripe
  • consumindo API do Stripe (SSR)
  • static site generation (SSG)

Desenvolvido por José Geraldo