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 both class and functional 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 Formik 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
  • Use lifecycle methods in class components
  • Take advantage of hooks in functional components
  • Work with controlled inputs and Formik
  • 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 and custom Hooks

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
  • Managing State in Class and Functional Components
  • Leveraging React Events
  • Understanding the Component Lifecycle
  • Taking Advantage of Hooks in Functional Components

Chapter 3: Unit Testing with React

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

Chapter 4: React and REST

  • Introducing REST and AJAX
  • 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

  • Simplifying Forms with the Formik Library
  • Validating Inputs
  • Integrating Formik with Redux

Chapter 8: Higher-Order Components

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

Chapter 9: Deployment

  • Building for Deployment
  • Creating Environment Variables and Files
  • Using React.lazy

Please Contact Your ROI Representative to Discuss Course Tailoring!