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 build an application using function components, Hooks, and standard tooling like create-react-app, the Redux Toolkit, and Formik. Students will gain an understanding of the principles of Flux and unidirectional dataflow, as well as how to call RESTful APIs, build component hierarchies, create custom Hooks and wrapper components, and how to deploy React applications.

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 built-in, third-party, and custom Hooks in functional components
  • Work with controlled inputs and Formik
  • Make RESTful AJAX calls from React applications
  • Add routes to their SPA using react-router
  • Unit Test React components
  • Manage state with Redux using the Redux Toolkit
  • 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.

Prerequisites

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 with the useState Hook
  • Understanding and Using Hooks
  • Leveraging React Events
  • Class Components and the Component Lifecycle

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
  • Reading Route Data with the useParams Hook
  • Navigating Programmatically with useNavigate

Chapter 6: Introducing Flux and Redux

  • Answering the Question: Why Flux?
  • Working with Unidirectional Data Flow
  • Leveraging the Redux Toolkit
  • Managing State Modification with Slices
  • Handling Asynchronous Actions
  • Using the useDispatch and useSelector Hooks

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 Modal Dialog with react-boostrap
  • Creating a Wrapper Component
  • Understanding DOM Access
  • Creating a Custom Hook with useCallback

Chapter 9: Deployment

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

Please Contact Your ROI Representative to Discuss Course Tailoring!