Course 489:
Building Web Applications with React

(3 days)


Course Description

This course provides a hands-on guide to building fast, modern, scalable single page web applications (SPAs) using React. The students develop a React user interface using JSX, and create components leveraging props and state. The principles of Flux and unidirectional dataflow are explained, and then implemented using the Redux library. Students will gain an understanding of how to integrate RESTful AJAX calls React and Redux, as well as using the redux-form and redux-thunk libraries. By the end of the class, students will have walked through the process of building a single page application with React and be ready to apply that knowledge to applications they need to build at work.

Learning Objectives

At the end of this course, the participants will know how to:

  • Jump-start React applications with create-react-app
  • Build React components using JSX
  • Utilize props and state
  • Work with controlled inputs and redux-form
  • Add routes to their SPA using react-router
  • Unit Test React components
  • Implement the Flux design pattern using Redux
  • Make RESTful AJAX calls from React applications
  • Create Higher Order Components

Who Should Attend

This course is designed for web developers who are looking to build single page applications using React.


Attendees must be comfortable working with JavaScript to take this class. Knowledge of ES6 is helpful but not essential.

Course Outline

Chapter 1: Getting Started with React

  • What Are Single Page Applications?
  • Introducing React
  • React vs. Other Frameworks
  • Using create-react-app for Project Configuration
  • Introducing JSX
  • Creating and Composing React Components

Chapter 2: State and Events

  • Passing Data with Props and State
  • Repeating Elements and Unique Keys
  • Controlled vs. Uncontrolled Inputs
  • Leveraging React Events
  • Understanding the Component Lifecycle

Chapter 3: Unit Testing with Jest and Enzyme

  • Principles of Unit Testing
  • Testing React using Facebook’s Jest Framework
  • Using the Enzyme Testing Utilities

Chapter 4: React and REST

  • Introducing REST and AJAX
  • Integrating the isomorphic-rest Module
  • Making GET Requests to Retrieve Data
  • POST Data to the Server for Updates

Chapter 5: Routing

  • Exploring the react-router Module
  • Adding Routes to the Application
  • Creating Parameterized Routes
  • Using Programmatic Navigation

Chapter 6: Introducing Flux and Redux

  • Answering the Question: Why Flux?
  • Working with Unidirectional Data Flow
  • Creating a Redux Store using Reducers
  • Using Actions and Action Creators to Trigger State Modification
  • Handling Asynchronous Actions with Redux-Thunk

Chapter 7: Forms

  • Combining Redux with Forms
  • Using the Redux-Form Module
  • Submitting Forms with Redux-Form
  • Validating Inputs

Chapter 8: Higher Order Components

  • Using Add-ons and Third-Party Tools
  • Building a Wrapper Component
  • Understanding the ref Attribute and DOM Access

Please Contact Your ROI Representative to Discuss Course Tailoring!