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

Price €995.00

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.

Ways to Attend this Course

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.

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

“Given the breadth of the course, I think it was very well structured and organised, I got a lot
out of it.”     

 

JVM Tuning - Bespoke Course

Live Online - May 2020

 

“This was an excellent course and was lots of fun to attend. Instructor started with basic intro to
containerization, then explained Kubernetes and the different components (Container
engine, orchestrator, control plane) which all made sense because of the containerization
intro. The parts of the course layered on top of one another to give a good understanding of
Kubernetes.”

 

Kubernetes for App Developers - GTLFKAD

Live Online - Nov 2020

 

“Really enjoyed the course, it has been an eye opener on opportunities to steer how we approach the cloud from a IT Service Management perspective.”

 

Professional Cloud Service Manager - GTC13

Live Online May 2020

 

''Fantastic course, looking forward to applying this in my work and home life. Excellent, practical approach, very motivational. I think the entire company should attend training.''

 

Being Agile in Business - GTBAB

Sept 2019

“The instructor was great! I didn't expect such a good level of teaching with what some may
consider a dry subject. This was simply great!”  

 

Linux LPIC-1 - GTU8

Live Online - August 2020

 

"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

Kubernetes Administration

31 May - 4 June 2021

Live Online

This Kubernetes Administration Certification training course is suitable for anyone who wants to learn the skills necessary to build and administer a Kubernetes cluster

Learn More

LPIC-1 PART 1

22 - 25 June 2021 

Live Online

This Linux certification training course teaches in-depth skills in the basics of Linux Administration.
 

Learn More

DEVOPS FOUNDATION TRAINING

14 - 15 June 2021

Live Online

The purpose of the certification and its associated course is to impart, test and validate knowledge of DevOps basic vocabulary, principles and practices.

Learn More

 INTRO TO PYTHON 3

May 18 – 20 2021

Live Online        

A comprehensive introduction to the core syntax and functions provided by Python, including coverage of its object-oriented and functional programming features.

Learn More

Newsletter

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

Subscribe to our Newsletter