Visão Geral

Nesta aula de treinamento de introdução ao React de 3 dias, os alunos aprendem as ideias fundamentais por trás do React e, em seguida, passam rapidamente para a resolução prática de problemas e algumas das técnicas mais avançadas e atualizadas no desenvolvimento do React, incluindo: Redux, Redux thunk, Redux Saga e reação do lado do servidor. O curso ensina apenas o suficiente sobre testes e ferramentas para que os alunos sejam produtivos, mas é focado principalmente em exercícios práticos nos quais os alunos criarão um aplicativo de carrinho de compras de comércio eletrônico do mundo real.

Objetivo

Após a conclusão deste curso, você será capaz de:

• Use Create-React-App para começar rapidamente com o React
• Aprenda / revise conceitos e sintaxe avançados de JavaScript
• Aprenda a escrever testes de unidade para React, usando Jest e Enzyme
• Entenda o que é React e qual problema ele resolve
• Explore a arquitetura básica de um aplicativo React
• Obtenha um profundo conhecimento dos componentes React e JSX
• Aprenda as melhores práticas para usar e compor componentes React
• Construir um aplicativo funcional que usa componentes React
• Use o Redux para manter o estado em um aplicativo React.js
• Usar middleware Redux
• Faça requisições AJAX com React
• Usar renderização do lado do servidor
• Saiba mais sobre a otimização de desempenho do React

Publico Alvo

• Este curso foi desenvolvido para desenvolvedores profissionais experientes (em qualquer idioma) que desejam aprender como se tornar produtivos rapidamente com a versão mais recente do React.
  

Pre-Requisitos

• Experiência em qualquer linguagem de programação.
  

Informações Gerais

Carga Horária: 24h

• Se noturno este curso é ministrado de Segunda-feira à sexta-feira, das 19h às 23h
• Se aos sábados este curso é ministrado das 9h às 18h
• Se in-company por favor fazer contato para mais detalhes.

Formato de entrega: 

• 100% on-line ao vivo, via Microsoft Teams na presença de um instrutor/consultor ativo no mercado.
• Nota: não é curso gravado. 

Lab:

• Laboratório + Exercícios práticos

Materiais

Conteúdo Programatico

Introduction

1. What is React.js?
2. What is React NOT?
3. When can you use React?
4. Who Uses React?
5. React Quick Start
6. What is Create React App
7. Lab: Get Started with Create React App

Introduction to React.js

1. Imperative API vs. Declarative API
2. Imperative vs. Declarative Screen Updates
3. Lab: Your First Component
4. One-way Data Flow
5. Virtual DOM
6. Virtual DOM vs. HTML DOM
7. State Machines
8. React.render()
9. Lab: Create More Components
10. ReactDOM
11. ReactDOM.findDOMNode
12. ReactDOM.unmountComponentAtNode
13. ReactDOM.render
14. Lab: Testing React

React Development Process

1. What is JSX?
2. Using JSX
3. Using React with JSX
4. React.createElement
5. Using React without JSX
6. Expressions in JSX

React Component Best Practices

1. Single Responsibility
2. Pure Functions
3. Benefits of Pure Functions
4. Function Comparison
5. Stateless Functional Components
6. Lab: Static Version
7. Styles in React
8. Lab: Styling React
9. Composition
10. Reusable Components
11. Container Components
12. Presentational Components
13. props
14. Lab 07: Props and Containers
15. Props vs. State
16. Setting Initial State
17. super()
18. Lab: Adding State

Forms

1. Form Events
2. Events
3. Controlled Components
4. Uncontrolled Components
5. Lab: Interactions, Events, Callbacks

Component Life-Cycle

1. Life-Cycle Methods
2. Mount/Unmount Life-Cycle Methods
3. Data Life-Cycle Methods
4. Component Life Cycle
5. Lab: Component Life-Cycle

Testing React Components

1. What to Test in a React Component
2. PropType
3. Using PropTypes
4. Lab: PropTypes
5. Jest
6. Mocking
7. Mock Function
8. Manual Mock
9. Automocking
10. Snapshot Testing
11. TestUtils
12. Enzyme
13. Shallow Rendering
14. Lab: Testing with Jest and Enzyme

Flux and Redux

1. Flux
2. Flux Flow
3. Flux Action
4. Flux Dispatcher
5. Flux Stores
6. EventEmitter
7. Redux
8. Stores & Immutable State Tree
9. Redux Actions
10. Reducers
11. Things You Should Never do in a Reducer
12. Reducer Composition
13. vi. Redux Store
14. vii. Redux Pros and Cons
15. Lab: Implementing Redux
16. Redux Middleware
17. What is Redux Middleware?
18. What is Middleware Good For?
19. React AJAX Best Practices
20. Using React with Other Libraries
21. Redux Thunk
22. Redux Saga
23. Using Sagas

Advanced Topics

1. React Router
2. Server-side React
3. Relay and GraphQL
4. What is Relay?
5. GraphQL
6. GraphQL Example
7. Relay Pros and Cons
8. Performance Optimization
9. Development vs. Production
10. Perf Object
11. Optimization Techniques

Optional Advanced JavaScript Review

1. Variable Scoping with const and let
2. let vs. var
3. Block-scoped Functions
4. Arrow Functions
5. Default Parameter Handling
6. Rest Parameter
7. Spread Operator
8. Template Literals
9. Enhanced Object Properties
10. Array Matching
11. Object Matching
12. Symbol Primitive
13. User-defined Iterators
14. For-Of Operator
15. Creating and Consuming Generator Functions
16. Class Definition
17. Class Declaration
18. Class Expressions
19. Class Inheritance
20. Understanding this
21. What is this?
22. Implicit Binding
23. Explicit Binding
24. new Binding
25. window Binding
26. Array.map()
27. Promises
28. What Are Promises?
29. Promises vs. Event Listeners
30. Why Use Promises?
31. Demo: Callback vs. Promise
32. Using Promises