Visão Geral

Curso React and Redux Advanced Overview

Objetivo

Após realizar este Curso React and Redux Advanced Overview, você e capaz de:

• Use ganchos personalizados
• Compreender a gestão do estado, incluindo quando é necessário e as várias alternativas
• Utilize o Redux para gerenciar o estado do aplicativo
• Use React e Redux juntos
• Implemente as melhores práticas de React e Redux
• Escreva testes de unidade para React usando Jest e React Testing Library

Publico Alvo

• Todos os participantes devem ter feito o curso de Introdução ao React e Redux ou ter a experiência equivalente

Requisitos de software:

• Google Chrome e/ou Firefox
• Outros navegadores modernos conforme desejado
• IDE/ambiente de desenvolvimento de sua escolha

Materiais

Conteúdo Programatico

Introduction

1. Custom Hooks
2. Background
3. Definition
4. Reuse of stateful logic

Context

1. When to use Context
2. useContext Hook

State Management

1. What is State?
2. When do you need Redux?
3. Alternatives to Redux
4. Using Context for Shared State
5. Server State: React Query, SWR, or GraphQL client

Redux

1. What is Redux?
2. What is State?
3. Benefits Checklist
4. Principles of Redux
5. Core Concepts (Store, State, Reducers, Actions, Action Creators)
6. Complementary Packages
7. When do you need Redux?
8. Basic Redux Example (includes time traveling)
9. Gotchas/Tips

Using Redux with React (React Redux Library)

1. The connect function
2. Writing mapState functions
3. Writing mapDispatch Functions
4. Provider
5. Inside React Redux
6. Example

Asynchronous Actions (Redux Thunk)

1. Overview
2. Async Actions (Thunks)
3. Installation
4. Your First Thunk
5. Full CRUD Example

Putting It All Together (React & Redux & Thunk)

1. Testing
2. Tools (Jest, React Testing Library or Enzyme)
3. Syntax
4. Testing Vanilla JavaScript with Jest
5. Mocking
6. Mocking Modules
7. Mocking Functions
8. Debugging Tests
9. Component Tests with React Testing Library
10. Component Tests with Enzyme
11. Shallow
12. Full
13. Snapshot
14. Testing Redux Actions & Thunks, Reducers, HTTP

Optional Topics/FAQ (if time permits)

1. Styling
2. Using Classes
3. Using Styles
4. CSS in JS Overview

Performance

1. What causes a component to render?
2. Wasted Renders
3. Memoization
4. React.memo
5. Pure Components

Advanced Components

1. Higher-Order Components
2. Render Props