laptop, apple, macbook

Web App Programming with React & Redux

5-Day Course Taught Live, In-Person or Online

Course Description

Training 4 Developers’ Web App Programming with React & Redux training course teaches students how to use React and Redux to build modern web applications. In the course, the principles, concepts, and ideas of React and Redux will be explained, demonstrated, and practiced by the students. Students will learn how to connect React components to a Redux store. Also, React Router will be covered both with React and Redux. Students will explore how to connect React and Redux to REST services using a Redux asynchronous middleware. The course can be taught with either Thunk, Saga, or Observable middleware.

Course ObjectivesObjectives

  • Understand what React is and what problem it solves
  • Explore the basic architecture of a React component
  • Gain deeper knowledge of React.js components and JSX
  • Utilize React Hooks
  • Learn React.js best practices and common patterns
  • Employ React Routing to build Larger Apps
  • Employ the principles of Redux to build easier to understand more maintainable applications
  • Correctly incorporate Redux into React Component Trees
  • Integrate Server-Side Data Sources into a Redux Application

Course PrerequisitesPrerequisites

Attendees must have 3-6 months of recent HTML/CSS/Javascript web programming experience or have completed Training 4 Developers’  Introduction to Web Programming course.

We offer three alternatives for programming asynchronous operations with Redux. If Redux Thunk is selected, then students should have experience with JavaScript promises. If Redux Sagas is selected, then students should have JavaScript generator experience. If Redux Observable is selected, then students should have some RxJS experience. Coverage of JavaScript asynchronous programming, promises, generators and/or RxJS can be added to customized classes.

If you are unsure which Redux asynchronous library to use, we recommend Redux Sagas for most teams.

Course RequirementsRequirements

We teach all classes online. Students will need to be able to join an online session using a popular online meeting service such as Zoom, Microsoft Teams, GotoTraining, etc… If the client has no preference, Zoom will be used.

We recommend that each student have two displays. One display to view the instructor presentation and one display to use for note-taking and programming along with the instructor. The second display can be a tablet connect to the session if the meeting software provides an app for the student’s tablet.

All course materials are distributed via GitHub and Google Drive. Access to those services is needed for the class, please ensure your firewall and network policies will allow students to access those resources. If students cannot access GitHub or Google Drive, alternatives will be discussed.

Course OutlineOutline

The course can be taught in either the JavaScript or the TypeScript languages. Knowledge of JavaScript is needed for both language versions of the course. Knowledge of TypeScript is NOT needed for the TypeScript version.

  1. Overview
    1. What is React?
    2. What problem does React solve?
    3. Development Ecosystem
    4. React versus other frameworks
    5. What is Redux?
    6. Redux compared to Flux
    7. Three Principles of Redux
    8. Immutable Programming
  2. Development Tools
    1. Create React App project generator
    2. React Developer Tools
    3. Running and Debugging a React Application
    4. Role of Node.js
    5. Purpose of React and ReactDOM
  3. Functional Components
    1. What are Components?
    2. Create Element and JSX
    3. Benefits of JSX
    4. Fragments
    5. JavaScript Arrow Functions
    6. ES2015 Modules
    7. JSX and Expressions
    8. Displaying Collections of Data
    9. JavaScript Array Maps and React Keys
    10. Passing Data with Props
    11. Validating Props with PropTypes
    12. Default Props
    13. Using Memo
  4. Class-Based Components
    1. JavaScript Classes and Extends
    2. Configuring State
    3. Lifecycle Methods
    4. Context of Event Handlers
    5. Class Properties and Class Arrow Functions
    6. PropTypes and Default Props on Classes
  5. Hooks
    1. Overview of Hooks
    2. State Hook
    3. Effect Hook
    4. Ref Hook
    5. Callback Hook
  6. Advanced React Topics
    1. Composition vs. Inheritance
    2. Patterns: Specialization, Containment, and Higher Order Components
    3. Lifting State Up
    4. Forwarding Refs
    5. Context
    6. Error Boundaries
  7. React Router
    1. What is routing?
    2. Understanding the URL as state
    3. Benefits of routing
    4. Route Element and Matching URLs
    5. Single and Multiple Matches
    6. Nesting Routes
    7. Passing Data via the URL Path
    8. Passing Data via the URL Query String
    9. Passing Data via JavaScript
  8. Redux Principles
    1. What is Application State?
    2. Three Principles of Redux
    3. Immutable Programming
    4. Pure Functions
    5. Unidirectional Flow
  9. Essential Redux Elements
    1. Actions
    2. Reducers
    3. Store
  10. React + Redux
    1. Container and Presentation Components
    2. Connecting Redux to a React Component
    3. React-Redux to Connect Redux to React
    4. Provider and React Context
    5. Migrate an Existing React Application to Redux
    6. Debugging with the Redux Chrome Extension
    7. Using React Redux Hooks
  11. Advanced Redux
    1. Working with Multiple Reducers
    2. Combine Reducers
    3. Lazy Loading Reducers with Code Splitting
    4. Redux Middleware and Creating Custom Middleware
    5. Functional Approaches to Reducers
    6. Best Practices for Managing State
  12. Redux and Asynchronous Tasks
    1. Working with Asynchronous Actions
    2. Working with REST using the Fetch API
    3. Orchestrating Side Effects with Thunk/Saga/Observable
  13. Redux and Routing
    1. Integrating React Router with React/Redux
    2. Using Connected Router
    3. Configuring Paths
    4. Working with URL Parameters
    5. Using React Router Hooks
  14. Unit Testing
    1. JavaScript Unit Testing
    2. Jest and Enzyme
    3. Organize Tests and Test Suites
    4. Setup and Teardown of Tests
    5. Assertions with Expect
    6. Testing Components: Snapshot, Shallow, DOM Testing
    7. Testing Action Creators
    8. Testing Reducers
    9. Asynchronous Unit Testing
    10. Testing Thunk/Saga/Observable
Scroll to Top