Introduction to React

This course can be delivered live online, at your offices, or at any other location.

In this 3-day Introduction to React training class, students 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.

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.

  1. Use Create-React-App to get started quickly with React
  2. Learn / review Advanced JavaScript concepts and syntax
  3. Learn to write unit tests for React, using Jest and Enzyme
  4. Understand what React is and what problem it solves
  5. Explore the basic architecture of a React application
  6. Gain a deep knowledge of React components and JSX
  7. Learn best practices for using and composing React components
  8. Build a working application that uses React components
  9. Use Redux for maintaining state in a React.js application
  10. Use Redux middleware
  11. Make AJAX requests with React
  12. Use server-side rendering
  13. Learn about React performance optimization
  1. Introduction
    1. What is React.js?
    2. What is React NOT?
    3. When can you use React?
    4. Who Uses React?
    5. React Quick Start
    6. What is Create React App
    7. Lab: Get Started with Create React App
  2. Introduction to React.js
    1. Imperative API vs. Declarative API
    2. Imperative vs. Declarative Screen Updates
    3. Lab: Your First Component
    4. One-way Data Flow
    5. Virtual DOM
    6. Virtual DOM vs. HTML DOM
    7. State Machines
    8. React.render()
    9. Lab: Create More Components
    10. ReactDOM
    11. ReactDOM.findDOMNode
      1. ReactDOM.unmountComponentAtNode
      2. ReactDOM.render
    12. Lab: Testing React
  3. React Development Process
    1. What is JSX?
    2. Using JSX
    3. Using React with JSX
    4. React.createElement
    5. Using React without JSX
    6. Expressions in JSX
  4. React Component Best Practices
    1. Single Responsibility
    2. Pure Functions
    3. Benefits of Pure Functions
    4. Function Comparison
    5. Stateless Functional Components
    6. Lab: Static Version
    7. Styles in React
    8. Lab: Styling React
    9. Composition
    10. Reusable Components
      1. Container Components
      2. Presentational Components
      3. props
    11. Lab 07: Props and Containers
    12. Props vs. State
    13. Setting Initial State
    14. super()
    15. Lab: Adding State
  5. Forms
    1. Form Events
    2. Events
    3. Controlled Components
    4. Uncontrolled Components
    5. Lab: Interactions, Events, Callbacks
  6. Component Life-Cycle
    1. Life-Cycle Methods
    2. Mount/Unmount Life-Cycle Methods
      1. Data Life-Cycle Methods
      2. Component Life Cycle
      3. Lab: Component Life-Cycle
  7. Testing React Components
    1. What to Test in a React Component
    2. PropType
    3. Using PropTypes
      1. Lab: PropTypes
    4. Jest
    5. Mocking
      1. Mock Function
      2. Manual Mock
      3. Automocking
    6. Snapshot Testing
    7. TestUtils
    8. Enzyme
    9. Shallow Rendering
    10. Lab: Testing with Jest and Enzyme
  8. Flux and Redux
    1. Flux
      1. Flux Flow
      2. Flux Action
      3. Flux Dispatcher
      4. Flux Stores
      5. EventEmitter
    2. Redux
      1. Stores & Immutable State Tree
      2. Redux Actions
      3. Reducers
      4. Things You Should Never do in a Reducer
      5. Reducer Composition
      6. vi. Redux Store
      7. vii. Redux Pros and Cons
    3. Lab: Implementing Redux
    4. Redux Middleware
      1. What is Redux Middleware?
      2. What is Middleware Good For?
      3. React AJAX Best Practices
      4. Using React with Other Libraries
      5. Redux Thunk
        1. How is Thunk Useful?
        2. How does Thunk work?
        3. Lab: Thunk
    5. Redux Saga
      1. Using Sagas
  9. Advanced Topics
    1. React Router
    2. Server-side React
    3. Relay and GraphQL
    4. What is Relay?
      1. GraphQL
      2. GraphQL Example
      3. Relay Pros and Cons
    5. Performance Optimization
    6. Development vs. Production
      1. Perf Object
      2. Optimization Techniques
  10. Optional Advanced JavaScript Review
    1. Variable Scoping with const and let
    2. let vs. var
    3. Block-scoped Functions
    4. Arrow Functions
    5. Default Parameter Handling
    6. Rest Parameter
    7. Spread Operator
    8. Template Literals
    9. Enhanced Object Properties
    10. Array Matching
    11. Object Matching
    12. Symbol Primitive
    13. User-defined Iterators
    14. For-Of Operator
    15. Creating and Consuming Generator Functions
    16. Class Definition
    17. Class Declaration
      1. Class Expressions
      2. Class Inheritance
    18. Understanding this
    19. What is this?
      1. Implicit Binding
      2. Explicit Binding
      3. new Binding
    20. window Binding
    22. Promises
    23. What Are Promises?
      1. Promises vs. Event Listeners
      2. Why Use Promises?
      3. Demo: Callback vs. Promise
    24. Using Promises
Class Materials

Each student in our Live Online and our Onsite classes receives a comprehensive set of materials, including course notes and all the class examples.

Class Prerequisites

Experience in the following is required for this React class:

  • Experience in any programming language.

Training for your Team

Length: 3 Days
  • Private Class for your Team
  • Online or On-location
  • Customizable
  • Expert Instructors

Training for Yourself

$1,725.00 or 3 vouchers

Upcoming Live Online Classes

  • See More Classes

Please select a class.
  • Live Online Training
  • For Individuals
  • Expert Instructors
  • Guaranteed to Run
  • 100% Free Re-take Option
  • 1-minute Video

What people say about our training

The class was fun, well paced, and you can learn from anywhere. The teacher was helpful and cared about your learning.
Sarah Vogel
Clintrax Global Inc.
The instructor was positive, confident, and genuine.
Nick Smith
Class started at the beginner level and went through tips and tricks to use Excel and gradually went to advance concepts. Over all, a great learning opportunity. Highly recommended!
John Neary
U.S. Army - CERDEC
I was a little apprehensive about taking a course online, but once we got into the course I found that the format and presentation was great!
John Lewis
Freddie Mac (MD)

No cancelation for low enrollment

Certified Microsoft Partner

Registered Education Provider (R.E.P.)

GSA schedule pricing


Students who have taken Instructor-led Training


Organizations who trust Webucator for their Instructor-led training needs


Satisfaction guarantee and retake option


Students rated our trainers 9.29 out of 10 based on 29,430 reviews

Contact Us or call 1-877-932-8228