Ignite_Trilha_ReactJS

Trilha React - Nextjs @Rocketseat

• Módulo 01-fundamentos-do-reactjs (github-explorer)
• Módulo 02-primeira-aplicacao-com-reactjs (dtmoney)
• Módulo 03-fundamentos-do-nextjs (ignews)

Desafios

• Desafio 01- Conceitos do react
• Desafio 02- Componentizando a aplicação
• Desafio 03- Criando um hook de carrinho de compras
• Desafio 04- Refactoring de classes e typescript

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

• Visualizar repositório - Desafio 02
• Nesse desafio iremos dividir uma aplicação em componentes afim de isolar as responsabilidades e facilitar a manutenção do código.

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

• Visualizar repositório - Desafio 03
• Nesse desafio, você deverá criar um hook para gerenciar um carrinho de compras.

Desafio 04- Refactoring de classes e typescript

• Visualizar repositório - Desafio 04
• Nesse desafio, você deverá migrar uma aplicação de Javascript e Class Components para Typescript e Function Components

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