React & Friends: Introduction to React and Redux

4 Days

Learn React and become productive immediately in a high-performance component framework.

Jump to Sign-Up Form

Many development teams have shifted from working in legacy frameworks such as Ember or AngularJS, building their architectures using React and a coterie of other APIS such as Redux, React Router, Axios, fetch and others. We’ll show you how to get your job done using a mix React and some of the more popular and useful APIs.

Prerequisites: Some background in JavaScript development is required. Some experience working with ES2015+ is helpful, though we’ll get developers up to speed in the basics at the start of the course.

Topics

Key Topic Areas

In this four-day course, you’ll be exposed to the constellation of middleware and integration libraries, and you’ll learn how to work with key lifecycle events to improve your application’s performance. We’ll focus on mastery of key features of the React ecosystem, including:

01

How to Design and Create Components

02

How to Work with Props and State

03

When to Use Pure and Functional Components

04

How to Deal with Form Data

05

How to Use the Redux Library to Simplify State Design

06

How to Configure async and Long-running Side Effects to Redux Data

07

How to configure and use the React Router

 
What You’ll Learn

Course Outline

A selected list of topics from the course by chapter. As the training evolves over time, additional topics will be added to the training, and deprecated topics will be removed. Check with our Training Director if you have questions about a specific topic.

  • ReactJS Fundamentals
  • What is React?
  • Key React Concepts
  • React History
  • Constellation of APIs
  • React -vs- Angular 1 -vs- Angular and other SPAs
  • React and JavaScript versions, Flow and TypeScript discussion
  • Course Goals
  • ECMAScript 5, 2015, 2016 and beyond
  • The let and const keywords
  • Backtick strings
  • Modules
  • Flattening, spread operations using ... with arrays, objects
  • Classes and Constructors
  • Arrow functions
  • Dealing with the `this` keyword
  • Promises
  • Short introduction to Typescript
  • React as an ecosystem
  • Common React APIs
  • Redux – a functional implementation of Flux
  • MobX, an alternative to Redux
  • Flow – Data Types in JavaScript
  • GraphQL clients / servers
  • React-Router
  • Testing APIs (Jest, Sinon, etc)
  • Integrating Libraries
  • React Native
  • create-react-app
  • Developer build tools and starter
  • What are Components?
  • A Minimal Component (JavaScript)
  • Mounting a Component (JavaScript)
  • Specifying Properties (JavaScript)
  • Specifying Inline Styles (JavaScript)
  • Non-DOM Attributes
  • Non-DOM Attributes Cont’d
  • Mounting Children with Iterators
  • The Case for JSX
  • JSX Basics
  • Passing Props
  • Validating Props
  • Working with component state
  • The Virtual Dom and change detection
  • Synthetic Events
  • Passing events via props
  • Events and "this"
  • Container and Presentational Components
  • Higher order Components
  • Validating component props with PropTypes
  • React context API
  • React lifecycle methods
  • Error handling
  • PureComponents
  • Functional Components
  • What is Routing in a Single Page App?
  • Building your own Routing with the History API
  • The React Router API
  • Configuring the Router
  • Routing instructions
  • Props available to a routed component
  • Defining Route links
  • Using the history API programmatically
  • Code splitting / lazy loading
  • Forms and React State
  • Defining controlled form components
  • Processing controlled form data with submit
  • Uncontrolled form components and refs
  • Validation techniques
  • Guarding dirty form data with Prompt
  • Third party forms library example: Formik
  • What is Redux?
  • How to install
  • Reducers
  • Dispatching Actions
  • Subscribing to state changes
  • Redux State management rules
  • Introduction to middleware
  • Redux with React
  • Connecting components with 'react-redux', mapStateToProps, mapDispatchToProps, etc.
  • Async actions
  • Redux itself is synchronous
  • The need for middleware
  • The Thunk middleware and dispatching from Async action creators
  • Redux API Middleware and the Flux pattern
  • Redux Sagas for long-running processes
  • Discussion of Ajax APIs
  • Review differences in API payloads and call semantics
  • An example with Axios
  • Where to call Ajax methods (componentDidMount, async reducers?)

Kind Words from Our Students

Just wanted to thank you for your excellent instruction these past few days. Your ability to explain such a complicated framework in an intuitive way has been immensely helpful in filling in my gaps of AngularJS knowledge.

Course Alumni

Angular Training
2018-12-26T18:03:21+00:00

Course Alumni

Just wanted to thank you for your excellent instruction these past few days. Your ability to explain such a complicated framework in an intuitive way has been immensely helpful in filling in my gaps of AngularJS knowledge.

I still use your materials to learn about AngularJS. One of my co-workers just found one of your blog articles on Jasmine testing and it worked perfectly. Thank you.

Course Alumni

Angular Training
2018-12-26T18:06:49+00:00

Course Alumni

I still use your materials to learn about AngularJS. One of my co-workers just found one of your blog articles on Jasmine testing and it worked perfectly. Thank you.

The instructional design and delivery were excellent.

Jason W., student of Fortune 100 Repeat Client

Angular Training
2018-12-26T18:07:15+00:00

Jason W., student of Fortune 100 Repeat Client

The instructional design and delivery were excellent.

Know that your efforts are greatly appreciated and have greatly impacted my daily work life.

Alex S.

Angular Training
2018-12-26T18:07:39+00:00

Alex S.

Know that your efforts are greatly appreciated and have greatly impacted my daily work life.
Get Started

Interested in training at Chariot?

Use the contact form below to get in touch with us, and a member of our team will reach back out shortly.


* These fields are required.