Search our courses
Training

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

React Advanced

Course Code

GTIT42

Duration

2 Days

Course Fee

POA

Accreditation

N/A

Target Audience

  • Web Developers

Attendee Requirements

  • Attendees must have experience in developing components and apps using React. The React Fundamentals class provides a suitable background.

We are sorry, there is currently no availability on this course.

contact us for more information

Ways to Attend this Course

  • In the Classroom
  • Private Training

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
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.

Sorry, we are not taking bookings on this course at present

If you would like to contact us for more information on this course, you may do so here:

Contact us

Technical ICT learning & mentoring services

Private Team Training

Our instructors are specialist consultants with vast real world experience and expertise allowing them to design and deliver client-focused courses for your organisation.

Learn more about our Private Team Training

What Our Clients Say

“Very interesting course from an excellent instructor. Highly technical and well delivered”

 

Introduction to Modern Security - GTJ50

Dec '17

“Super experience. The instructor spoke with great knowledge and experience. The materials will be invaluable in the real world”

 

Professional Cloud Service Manager Certification training- GTC13

Dec '17

“Very useful course, making complex topics more approachable and the instructor was very good at getting concepts across and engaging with delegates and our specific needs”

 

Optimising Java - GTJ47

Dec '17

“This was an excellent course and I found it very interesting and enjoyable.  The instructor was a font of knowledge on all aspects of Big Data and Analytics and was enthusiastic about sharing his knowledge”

 

Applied Data Science and Big Data Analytics - GTBD7

Nov '17

“The instructor was fantastic at explaining lessons with applicable work type examples.  He was enthusiastic with what he was teaching which made learning the course more enjoyable”

 

Linux Essentials Certification - GTU2

Oct '17

"Intelligence is the ability to avoid doing work, yet
getting the work done"

Linus Torvalds, creator of Linux and GIT

Technical ICT learning & mentoring services

About GuruTeam

GuruTeam is a high-level ICT Learning, Mentoring and Consultancy services company. We specialise in delivering instructor-led on and off-site training in Blockchain, Linux, Cloud, Big Data, DevOps, Kubernetes, Agile, Software & Web Development technologies. View our Testimonials

Download our eBrochure
Our Accreditation Partners
Upcoming Courses

IoT Certification Training

19-20 Nov

DUBLIN

Business-oriented program that introduces the capabilities of IoT, the business advantages and key terminology as well as monetization models

Learn More

Cloud Technology Associate

21-22 Nov

CORK

Excellent foundation level, enables IT professionals to operate effectively in a cloud environment

Learn More

Cloud Service Manager

16-18 Oct

DUBLIN

ITIL in the Cloud certification training, accredited by the Cloud Credential Council

Learn More

EU GDPR Intensive Workshop

September | October

DUBLIN

Gain a clear understanding of the new law and the practical expectations required for all organisations

Learn More

Newsletter

Stay up to date, receive updates on scheduled dates, new courses, offers, and events.

Subscribe to our Newsletter