Ignite - ReactJS
Neste Repositório se encontra todos os projetos e anotações desenvolvidos na trilha de ReactJS do Ignite da Rocketseat. Nesse Readme, você pode encontrar a localização de alguns comentários importantes em cada um dos capitulos. E no Readme de cada pasta tem uma descrição sobre o projeto/desafio, um pouco sobre os assuntos abordados e um print do projeto.
Índice
📁 Chapter I
📁 Chapter II
- Primeira Aplicação Web com ReactJS
- Desafio 01: Criando um hook de carrinho de compras
- Desafio 02: Refactoring de classes e typescript
🖊 Anotações
📚 Dt-Money
- src/index.tsx
Algunas anotações sobre a configuração do MirageJs, para mais informações: Construindo APIs com o Mirage JS
📁 Chapter III
- Aplicação web com NextJs
- Desafio 01: Desenvolvendo apicação do zero
- Desafio 02: Adicionado features ao blog
🖊 Anotações
📚 Dev.news
- src/pages/index.tsx
Algunas anotações sobre como o Next funciona, para mais informações : Fundamentos do Next.Js
- src/pages/posts
Anotações sobre como buscar os posts e carregar eles utilizando SSR.
- src/pages/api/webhooks.ts
Sobre como pegar as informações do Stripe.
- src/pages/api/subscribe.ts
Método para conseguir as informações da sessão e utilização do FaunaDB.
- src/pages/api/auth
Toda a lógica de autenticação utlizando o Github e o FaunaDB.
- src/components/ActiveLink
Lógica de como fazer o ActiveLink que verifica a rota em que o usuário está e dá uma resposta visual.
📁 Chapter IV
- Contruindo interfaces do futuro
- Desafio 01: Interface com Chakra UI
- Data fetching e cache local
- Desafio 02: Upload de imagens
🖊 Anotações
📚 Dashgo
- src/pages/index.tsx
Utilização do React-hook-form.
- src/pages/dashboard.ts
Utilizando lazy load.
- src/pages/users/create.tsx
Utilizando o yup para validar o formulário de cadastro de usuário.
- src/services/mirage/index.tsx
Criando dados em massa utilizando faker.
- src/services/mirage/index.tsx
Criando dados em massa utilizando faker.
📁 Chapter V
🖊 Anotações
📚 perfreact
- pages/index.tsx
Fluxo de renderização do React.
- components/ProductItem.tsx
Situações para utilizar o memo.
- components/SearchResults.tsx
Situações para utilizar o useMemo.
- components/ProductItem.tsx
Utilizando o Dynamic Import.
📚 dev.news
- jest.config.js
Configuração inicial do Jest.
- src/components/ActiveLink/ActiveLink.spec.tsx
Fazendo mock de uma função do Next.
- src/components/SingInButton/SingInButton.spec.tsx
Utilizando o test playground.
- src/components/Header/Header.spec.tsx
Fazendo test em funções assíncronas.
- src/components/Async/Async.spec.tsx
Utilizando o jest-mock para definir o retorno de uma função.
- src/test/Home.spec.tsx
Testando o getStaticProps da página Home e fazendo mock de uma função assíncrona.
- src/test/Posts.spec.tsx