Course Overview

In this 3-day class, attendees learn the fundamental ideas behind React and then quickly move on to hands-on problem solving and some of the most advanced and up-to-date techniques in React development, including: Redux, Redux thunk, Redux Saga, and server-side react. The course teaches just enough about testing and tools for students to be productive, but is primarily focused on hands-on exercises in which students will build a real-world ecommerce shopping cart application.

An optional introduction to modern JavaScript syntax (ES6+) and best practices is included and can be used for self-study or in-class lecture and demonstrations.

Key Learning Areas

  • Use Create-React-App to get started quickly with React
  • Learn / review Advanced JavaScript concepts and syntax
  • Learn to write unit tests for React, using Jest and Enzyme
  • Understand what React is and what problem it solves
  • Explore the basic architecture of a React application
  • Gain a deep knowledge of React components and JSX
  • Learn best practices for using and composing React components
  • Build a working application that uses React components
  • Use Redux for maintaining state in a React.js application
  • Use Redux middleware
  • Make AJAX requests with React
  • Use server-side rendering
  • Learn about React performance optimization

Course Outline


  • What is React.js?
  • What is React NOT?
  • When can you use React?
  • Who Uses React?
  • React Quick Start
  • What is Create React App
  • Lab: Get Started with Create React App

Introduction to React.js

  • Imperative API vs. Declarative API
  • Imperative vs. Declarative Screen Updates
  • Lab: Your First Component
  • One-way Data Flow
  • Virtual DOM
  • Virtual DOM vs. HTML DOM
  • State Machines
  • render()
  • Lab: Create More Components
  • ReactDOM
  • findDOMNode
  • unmountComponentAtNode
  • render
  • Lab: Testing React

React Development Process

  • What is JSX?
  • Using JSX
  • Using React with JSX
  • createElement
  • Using React without JSX
  • Expressions in JSX

React Component Best Practices

  • Single Responsibility
  • Pure Functions
  • Benefits of Pure Functions
  • Function Comparison
  • Stateless Functional Components
  • Lab: Static Version
  • Styles in React
  • Lab: Styling React
  • Composition
  • Reusable Components
  • Container Components
  • Presentational Components
  • Props
  • Lab: Props and Containers
  • Props vs. State
  • Setting Initial State
  • super()
  • Lab: Adding State


  • Form Events
  • Events
  • Controlled Components
  • Uncontrolled Components
  • Lab: Interactions, Events, Callbacks

Component Life-Cycle

  • Life-Cycle Methods
  • Mount/Unmount Life-Cycle Methods
  • Data Life-Cycle Methods
  • Component Life Cycle
  • Lab: Component Life-Cycle

Testing React Components

  • What to Test in a React Component
  • PropType
  • Using PropTypes
  • Lab: PropTypes
  • Jest
  • Mocking
  • Mock Function
  • Manual Mock
  • Automocking
  • Snapshot Testing
  • TestUtils
  • Enzyme
  • Shallow Rendering
  • Lab: Testing with Jest and Enzyme

Flux and Redux

  • Flux
  • Flux Flow
  • Flux Action
  • Flux Dispatcher
  • Flux Stores
  • EventEmitter
  • Redux
  • Stores & Immutable State Tree
  • Redux Actions
  • Reducers
  • Things You Should Never do in a Reducer
  • Reducer Composition
  • Redux Store
  • Redux Pros and Cons
  • Lab: Implementing Redux
  • Redux Middleware
  • What is Redux Middleware?
  • What is Middleware Good For?
  • React AJAX Best Practices
  • Using React with Other Libraries
  • Redux Thunk
  • How is Thunk Useful?
  • How does Thunk work?
  • Lab: Thunk
  • Redux Saga
  • Using Sagas

Advanced Topics

  • React Router
  • Server-side React
  • Relay and GraphQL
  • What is Relay?
  • GraphQL
  • GraphQL Example
  • Relay Pros and Cons
  • Performance Optimization
  • Development vs. Production
  • Perf Object
  • Optimization Techniques

Optional Advanced JavaScript Review

  • Variable Scoping with const and let
  • let vs. var
  • Block-scoped Functions
  • Arrow Functions
  • Default Parameter Handling
  • Rest Parameter
  • Spread Operator
  • Template Literals
  • Enhanced Object Properties
  • Array Matching
  • Object Matching
  • Symbol Primitive
  • User-defined Iterators
  • For-Of Operator
  • Creating and Consuming Generator Functions
  • Class Definition
  • Class Declaration
  • Class Expressions
  • Class Inheritance
  • Understanding this
  • What is this?
  • Implicit Binding
  • Explicit Binding
  • new Binding
  • window Binding
  • map()
  • Promises
  • What Are Promises?
  • Promises vs. Event Listeners
  • Why Use Promises?
  • Demo: Callback vs. Promise
  • Using Promises

Who Benefits

This course is designed for experienced professional developers (in any language) who want to learn how to quickly become productive with the latest version of React.


Attendees should have at least a beginning to intermediate level of knowledge with JavaScript. Specifically, they should be comfortable working with JavaScript functions and objects.

The courseware includes slides, notes, assignments, a pre/post assessment test, and complete source code for all assignments.