Visão Geral

Curso React JavaScript Programming, ornecerá uma introdução aos benefícios do framework React JavaScript, para que os participantes do curso possam começar a desenvolver aplicativos rapidamente usando o framework.

Objetivo

Após realizar este Curso React JavaScript Programming, você será capaz de:

• Entenda o modelo de programação fornecido pelo framework React
• Definir componentes do React
• Use a estrutura React para lidar com eventos e dados com estado

Pre-Requisitos

• Os participantes deste treinamento ReactJS devem ter algum conhecimento prévio de desenvolvimento web, HTML, AJAX, JavaScript e ES6 ou superior.
  

Materiais

Conteúdo Programatico

React Overview

1. What is React?
2. What's in a Name?
3. React Component Model
4. What React Is Not
5. What You Will Not Find in React
6. Motivation for Creating React
7. A React JavaScript Example
8. One-Way Data Flow
9. JSX
10. A JSX Example
11. The Virtual (Mock) DOM
12. Only Sub-components that Actually Change are Re-Rendered
13. create-react-app

Basic Components and JSX

1. What is JSX?
2. JSX Transpilation to React Code Example
3. Running the Transpiled Code
4. Babel
5. Playing Around in CodePen
6. React Components
7. Creating a Functional Component Example
8. Component Names Must Be Capitalized
9. Components vs Elements
10. Elements Are Immutable
11. Properties
12. Property Naming Convention
13. Properties Default to 'True'
14. Spread Attributes (an ES6 Feature)
15. Expressions
16. Fragments

React Functional Component Concepts

1. Functional Components
2. Nesting JSX Elements
3. Example of JSX Nesting
4. Comments in JSX Code
5. Setting CSS Styles Using Classes
6. Setting CSS Styles Directly
7. JSX Escapes Values
8. Working with Lists of Items
9. Keys in Lists
10. Example List With Key
11. State
12. Types of State Data
13. State Hierarchy
14. Lifting State Up
15. Props vs. State
16. Pass Down a Function
17. Immutability
18. Immutability – Why?
19. Virtual DOM and State
20. Setting state
21. Updating Input fields
22. Passing Props to Components
23. Passing Functions to Components
24. Event Handling
25. Event Handler Example
26. Event Binding - DOs
27. Event Binding – Don'ts
28. Passing Parameters to Event Handlers
29. Component Life-cycle
30. Life-cycle in Functional Components
31. App Development Workflow – 1/3
32. App Development Workflow – 2/3
33. App Development Workflow – 3/3

React Router

1. Routing and Navigation
2. react-router
3. Creating a react-router based project
4. A Basic Routed Component
5. Router vs. BrowserRouter
6. The Route component
7.  Redirect Route
8. Navigating with
9. Navigating with
10. Route Parameters
11. Retrieving Route Parameters
12. QueryString Parameters
13. Using Router with Redux

State Management for React

1. React State Basics – Props and State
2. Props
3. State in Class Based Components
4. Managing State with Hooks in Functional Components
5. The Problem with Props and State
6. Redux State Library
7. Redux Advantages
8. Redux Disadvantages
9. Basic Rules for State Management
10. Types of State
11. Data State
12. Communication State
13. Control State
14. Session State
15. Location State
16. Location State Side Effects

Building React Apps with Redux

1. Redux
2. Redux Terminology
3. Redux Principles
4. Redux: Actions
5. Redux Action Types
6. Action Creators
7. Dispatching Actions
8. Data Flow Basics
9. Redux Reducers
10. Pure Functions
11. Reducer Example
12. Returning Default State
13. Creating a Development Environment with create-react-app
14. Using Redux with React
15. Initializing the Store
16. Immutability
17. Benefits of Immutable State
18. Mutability of Standard types
19. Copying Objects in JavaScript
20. Copying Arrays in JavaScript
21. One Store - Multiple Reducers
22. Combining Reducers
23. Components and Redux
24. The React-Redux Package
25. Wrapping App with Provider
26. mapStateToProps
27. mapDispatchToProps
28. Using Mapped Properties and Methods
29. Wrapping Components with Connect
30. Configure Store
31. Programming Advice - MultiTab Console

Using React Hooks

1. Functional Component Shortcomings
2. Hooks Overview
3. Hook Rules
4. React Linter Example
5. Functional Component Props
6. The useState Hook
7. Functional Component using the useState hook
8. useState with Multiple Variables
9. useState can also be used with Objects
10. The useEffect Hook
11. useEffect Hook Example
12. Using useEffect Hook to Load Data
13. Restricting when useEffect is Called
14. The useContext Hook
15. Additional Hooks
16. The useReducer Hook
17. An Example Reducer Function
18. Calling and Using useReducer
19. The useMemo Hook
20. useMemo Example
21. The useCallback Hook
22. useCallback Example
23. The useRef Hook
24. Using useRef to Hold Values
25. The useImperativeHandle Hook
26. useImperativeHandle Hook Example
27. The useLayoutEffect Hook

Creating Custom React Hooks

1. Custom Hooks
2. Custom Message Hook
3. Using the Custom Message Hook
4. A Custom useList Hook
5. Using the useList Custom Hook
6. The built-in useDebugValue Hook
7. Viewing the Effect of the useDebugValue Hook

Unit Testing React with React Testing Library

1. React Testing Framework
2. Features
3. Snapshot Testing
4. Code Coverage
5. Interactive Mode
6. Projects created with create-react-app
7. Default App Component Test
8. Unit Tests
9. Anatomy of a Unit Test
10. Common Matchers
11. Combining Tests
12. Running Tests
13. Testing Promise based async code with 'done'
14. Setup and Teardown
15. react-testing-library
16. A Simple Component Test
17. A Simple Snapshot Test
18. Running and Updating SnapShot Tests
19. Building Component Tests
20. Calling Render
21. Render Properties
22. Simulating Events
23. Testing Results
24. Using Query Functions
25. Text Matching
26. Counter Component
27. counter-test.js

OPTIONAL Exception Handling in JavaScript

1. Exception Handling
2. Try Syntax
3. The Finally Block
4. The Nested Try Blocks
5. Exceptions Types in JavaScript
6. The Throw Statement
7. Using the Error Object

OPTIONAL Web Storage, Web SQL, and IndexedDB

1. Data Storage
2. Data Storage Options
3. Web Storage
4. Web Storage Programming Interface
5. Web Storage Examples
6. Storing JavaScript Objects
7. IndexedDB
8. IndexedDB Terminology
9. Getting indexedDB Objects
10. Opening a Database
11. Creating an Object Store
12. Inserting a Record
13. Retrieving a Record

OPTIONAL  Asynchronous Programming with Promises

1. The Problems with Callbacks
2. Introduction to Promises
3. Requirements for Using Promises
4. Creating Promises Manually
5. Calling the Promise-based Function
6. Making APIs that support both callbacks and promises
7. Using APIs that support both callbacks and promises
8. Chaining then Method / Returning a Value or a Promise from then Method
9. Promisifying Callbacks with Bluebird
10. Using Bluebird
11. Bluebird – List of Useful Functions
12. Benefit of using Bluebird over ES6 for Promisification
13. Error Handling in Promise-based asynchronous functions

Lab Exercises

Lab 1. Setting Up a React Development Environment

Lab 2. Basic React Components

Lab 3. More React Component Concepts

Lab 4. React Router Application

Lab 5. React Redux Application

Lab 6. React Hooks Application

Lab 7. React Custom Hooks

Lab 8. Unit Testing with Jest

Lab 9. Course Project - React App Using Hooks

Lab 10. [OPTIONAL] Exception Handling in JavaScript

Lab 11. [OPTIONAL] Asynchronous Programming with Promises