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)
- 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
- 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
- primeiro componente React
- propriedades React
- estado do componente
- a imutabilidade no react
- fast refresh no webpack
- estilização da listagem
- utilizando o useEffect
- listando repositórios
- fundamentos do typescript
- typescript no reactjs
- componentes com typescript
- utilizando react devtools
- finalização do módulo
- 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.
- 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.
- introdução do módulo
- estrutura com create-react-app
- exportando assets do figma
- instalando styled components
- criando estilos globais
- fontes do google fonts
- componente: Header
- componente: Summary
- componente: TransactionTable
- criando front-end sem back-end
- configurando MirageJS
- configurando cliente do axios
- 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
- introdução à contextos
- a context api no react
- carregando transações
- movendo criação para o context
- finalizando inserção
- calculando resumo
- criando hook
- Visualizar repositório - Desafio 03
- Nesse desafio, você deverá criar um hook para gerenciar um carrinho de compras.
- Visualizar repositório - Desafio 04
- Nesse desafio, você deverá migrar uma aplicação de Javascript e Class Components para Typescript e Function Components
- 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
- componente: Header
- componente: SignInButton
- página Home
- componente: SubscribeButton
- configurando Stripe
- consumindo API do Stripe (SSR)
- static site generation (SSG)
Desenvolvido por José Geraldo