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

"Absolutely fantastic training. Thoroughly enjoyed it thanks to our highly enthusiastic tutor.  It wouldn't be an understatement to say that it was the best professional training that I have ever received."

 

Customised Linux with Networking

Live Online -  February 2022

 

"The course content was very good. When needed, the Instructor was extending the content of the course with hints and tips to help us understand different topics that were covered in the course."

 

Kubernetes Administration Certification - GTLFK

Live Online June 2021

 

 

 

“The course was held at the highest possible standards, the instructor was excellent, well prepared, well informed, and clearly an SME. Top marks.”

 

Professional Cloud Service Manager - GTC13

Live Online December 2021

 

“Very engaging and practical course so hope to be able to put the learning into practice.”

 

Being Agile in Business - GTBAB

Live Online September 2021

 

“Great instructor, who encouraged active participation. The breakout groups and exercises kept the group engaged and the content relevant to our own products”.

 

Site Reliability Engineering Foundation - GTDSRE

Live Online January 2022

 

 

 

"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

20th - 23rd Sept 2022

4th - 7th October 2022

18th - 21st October 2022

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

27th - 30th Sept SOLD OUT

24th -27th October

 Live Online

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

Learn More

PROFESSIONAL CLOUD SERVICE MANAGER

27th - 28th September with 2 hours exam prep on 29th September

 

Live Online

The Cloud Service Manager course enables participants to design and deliver cloud services. Exam prep on day 3.

Learn More

 INTRO TO PYTHON 3

11th - 13th October

13th - 15th December

 

 

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