React Advanced

Expand all

Course Description

Enterprise React Apps, and simply apps that grow as requirements evolve, need to consider how to manage UI and application state. This task grows in complexity with app size. This React Advanced training course explores state management in React apps, and how you can manage that state effectively. We look at two differing (and both popular) approaches, building apps that use each approach as we go. Time permitting, we will explore further concepts in React too, including styling our components, server-side rendering (SSR), and testing components.

 

Objectives

On completion of this course you will:

•     Understand state management issues and how to manage them effectively
•     Know why we use immutability in managing state
•     Understand exactly how Redux works and be able to use it in an application
•     Have built applications using React and Redux
•     Have built custom middleware for Redux
•     Have used one or more approaches in managing asynchronous operations
•     Understand how ES6 generators can be utilized for asynchrony

Course Outline

The Flux Pattern

•     Flux Overview
•     Dispatcher, Action Creators, Actions and Stores
•     Flux Components/Views
•     Flux Implementations

State Management

•     What’s State Management
•     The Problems of Inconsistent State
•     UI State and Application State
•     State Management Approaches – Flux, MobX & Redux

The Flux Pattern

•     Flux Overview
•     Development Setup
•     Dispatchers
•     Flux Action Creators, Actions and Stores
•     Flux Components/Views
•     Flux Implementations
•     A Flux Example

Flux & Redux Overview

•     Single Page Web Apps
•     Where does Redux Fit?
•     Redux
•     Introducing Redux
•     Why Redux?
•     Binding Redux to React

Understanding the Redux Architecture

•     Redux Architecture
•     Redux Concepts
•     Redux compared to Flux
•     A Single Immutable State Tree
•     The Flow of Data in a Redux App

The State

•     What do we put in state?
•     The State Object
•     A State Object
•     A More Complex State Object Example

Actions

•     What’s an Action?
•     What should be an Action?
•     Defining an Action
•     Aside: Using Flux Standard Actions
•     Action Types: Strings or String Constants?
•     Using String Constants
•     Dispatching Actions

Action Creators

•     Actions
•     Action Creators
•     Writing Action Creators

Creating Reducer Functions

•     Reducers
•     Redux Reducers
•     Reducers are Pure Functions
•     Actions vs Reducers

Immutability

•     You’re already using Immutability
•     Immutable Data in JavaScript
•     Why Immutability?
•     Predictability
•     Solving the Predictability Problem
•     Pure Function
•     Immutability in Redux

Immutable Programming

•     Writing Pure Functions to Update State
•     Appending to an Array
•     Other Array Operations
•     ‘Updating’ an Object
•     Other Object Operations

Writing Reducers

•     Another Example
•     Conventions when Writing Reducers
•     Remember — Pure Functions!

The Redux Store

•     The Store
•     Creating the Store
•     Store Methods
•     Redux Store

Integrating with React

•     React’s Needs
•     Recap: Container and Presentational Components
•     Container Components with Redux
•     Data Flow using react-redux
•     Installing React Redux
•     The react-redux API
•     Implementing Container Components
•     Using connect()
•     Defining mapStateToProps()
•     Defining mapDispatchToProps()

Middleware Overview

•     What’s Middleware?
•     Middleware is Composable

Creating Custom Middleware

•     The Middleware Function Signature
•     A Simple Middleware
•     Using Middleware
•     Other Kinds of Actions

React-Thunk and Asynchronous Actions

•     Why Thunk?
•     Redux Thunk
•     Installing Redux Thunk
•     Asynchronous Action Creators
•     Redux Thunk Flow

Asynchrony and Server Communications

•     Redux Thunk Flow to Server and Back
•     Server-related Actions
•     Choosing an HTTP API
•     Contacting a Server
•     A fetch API Example

Asynchrony Alternative: Redux Saga

•     Saga
•     Redux Saga
•     Benefits of Sagas
•     ES6 Generators
•     Generators and Redux Saga
•     Making Server Requests and Writing Async Flows
•     Redux Saga Resources

Further React Concepts

Styling Components and Apps

•     CSS integration options and libraries
•     Using React with Bootstrap

Server-Side Rendering

•     Why render server-side?
•     The server-side component lifecycle
•     Rendering and routing server-side

Testing React Components using Jest and/or Enzyme

•     Setting up a test environment
•     Using Testutils
•     Shallow Rendering, DOM Rendering, and Rendering Static Markup
•     When to choose each approach
•     Testing with Shallow Rendering
•     Testing via Rendering to a DOM

Learning Path

• Please Contact Us for suggestions

Ways to Attend

• Attend a public course, if there is one available. Please check our Schedule, or Register Your Interest in joining a course in your area.
• Private onsite Team training also available, please Contact Us to discuss. We can customise this course to suit your business requirements.