651-905-3729 Microsoft Silver Learning Partner EC Counsel Reseller compTIA Authorized Partner

React JavaScript Programming Virtual Classroom Live June 16, 2025

Price: $2,000

This course runs for a duration of 3 days.

The class will run daily from 10 AM Et to 6 PM ET.

Class Location: Virtual LIVE Instructor Led - Virtual Live Classroom.

Enroll today to reserve your spot!

Space is limited. Enroll today.

Enroll Now

Description

This ReactJS Training class will provide an introduction to the benefits of the React JavaScript framework, so course participants can start to develop applications quickly using the framework.

Target Audience

Existing programmers preparing to develop and - or support front-end web applications written in React.

Skills Gained

  • Understand the programming model provided by the React framework
  • Define React components
  • Use the React framework to handle events and stateful data

Course Overview

Introduction

  • What is React?
  • What's in a Name?
  • React Component Model
  • What React Is Not
  • What You Will Not Find in React
  • Motivation for Creating React
  • A React JavaScript Example
  • One-Way Data Flow
  • JSX
  • A JSX Example
  • The Virtual (Mock) DOM
  • Only Sub-components that Actually Change are Re-Rendered
  • create-react-app

Basic Components and JSX

  • What is JSX?
  • JSX Transpilation to React Code Example
  • Running the Transpiled Code
  • Babel
  • Playing Around in CodePen
  • React Components
  • Creating a Functional Component Example
  • Component Names Must Be Capitalized
  • Components vs Elements
  • Elements Are Immutable
  • Properties
  • Property Naming Convention
  • Properties Default to 'True'
  • Spread Attributes (an ES6 Feature)
  • Expressions
  • Fragments

React Functional Component Concepts

  • Functional Components
  • Nesting JSX Elements
  • Example of JSX Nesting
  • Comments in JSX Code
  • Setting CSS Styles Using Classes
  • Setting CSS Styles Directly
  • JSX Escapes Values
  • Working with Lists of Items
  • Keys in Lists
  • Example List With Key
  • State
  • Types of State Data
  • State Hierarchy
  • Lifting State Up
  • Props vs. State
  • Pass Down a Function
  • Immutability
  • Immutability – Why?
  • Virtual DOM and State
  • Setting state
  • Updating Input fields
  • Passing Props to Components
  • Passing Functions to Components
  • Event Handling
  • Event Handler Example
  • Event Binding - DOs
  • Event Binding – Don'ts
  • Passing Parameters to Event Handlers
  • Component Life-cycle
  • Life-cycle in Functional Components
  • App Development Workflow

React Router

  • Routing and Navigation
  • react-router
  • Creating a react-router based project
  • A Basic Routed Component
  • Router vs. BrowserRouter
  • The Route component
  • Redirect Route
  • Navigating with
  • Navigating with
  • Route Parameters
  • Retrieving Route Parameters
  • QueryString Parameters
  • Using Router with Redux

State Management for React

  • React State Basics – Props and State
  • Props
  • State in Class Based Components
  • Managing State with Hooks in Functional Components
  • The Problem with Props and State
  • Redux State Library
  • Redux Advantages
  • Redux Disadvantages
  • Basic Rules for State Management
  • Types of State
  • Data State
  • Communication State
  • Control State
  • Session State
  • Location State
  • Location State Side Effects

Building React Apps with Redux

  • Redux
  • Redux Terminology
  • Redux Principles
  • Redux: Actions
  • Redux Action Types
  • Action Creators
  • Dispatching Actions
  • Data Flow Basics
  • Redux Reducers
  • Pure Functions
  • Reducer Example
  • Returning Default State
  • Creating a Development Environment with create-react-app
  • Using Redux with React
  • Initializing the Store
  • Immutability
  • Benefits of Immutable State
  • Mutability of Standard types
  • Copying Objects in JavaScript
  • Copying Arrays in JavaScript
  • One Store - Multiple Reducers
  • Combining Reducers
  • Components and Redux
  • The React-Redux Package
  • Wrapping App with Provider
  • mapStateToProps
  • mapDispatchToProps
  • Using Mapped Properties and Methods
  • Wrapping Components with Connect
  • Configure Store
  • Programming Advice - MultiTab Console

Using React Hooks

  • Functional Component Shortcomings
  • Hooks Overview
  • Hook Rules
  • React Linter Example
  • Functional Component Props
  • The useState Hook
  • Functional Component using the useState hook
  • useState with Multiple Variables
  • useState can also be used with Objects
  • The useEffect Hook
  • useEffect Hook Example
  • Using useEffect Hook to Load Data
  • Restricting when useEffect is Called
  • The useContext Hook
  • Additional Hooks
  • The useReducer Hook
  • An Example Reducer Function
  • Calling and Using useReducer
  • The useMemo Hook
  • useMemo Example
  • The useCallback Hook
  • useCallback Example
  • The useRef Hook
  • Using useRef to Hold Values
  • The useImperativeHandle Hook
  • useImperativeHandle Hook Example
  • The useLayoutEffect Hook

Creating Custom React Hooks

  • Custom Hooks
  • Custom Message Hook
  • Using the Custom Message Hook
  • A Custom useList Hook
  • Using the useList Custom Hook
  • The built-in useDebugValue Hook
  • Viewing the Effect of the useDebugValue Hook

Unit Testing React with React Testing Library

  • React Testing Framework
  • Features
  • Snapshot Testing
  • Code Coverage
  • Interactive Mode
  • Projects created with create-react-app
  • Default App Component Test
  • Unit Tests
  • Anatomy of a Unit Test
  • Common Matchers
  • Combining Tests
  • Running Tests
  • Testing Promise based async code with 'done'
  • Setup and Teardown
  • react-testing-library
  • A Simple Component Test
  • A Simple Snapshot Test
  • Running and Updating SnapShot Tests
  • Building Component Tests
  • Calling Render
  • Render Properties
  • Simulating Events
  • Testing Results
  • Using Query Functions
  • Text Matching
  • Counter Component
  • counter-test.js

Exception Handling in JavaScript [OPTIONAL]

  • Exception Handling
  • Try Syntax
  • The Finally Block
  • The Nested Try Blocks
  • Exceptions Types in JavaScript
  • The Throw Statement
  • Using the Error Object

Web Storage, Web SQL, and IndexedDB [OPTIONAL]

  • Data Storage
  • Data Storage Options
  • Web Storage
  • Web Storage Programming Interface
  • Web Storage Examples
  • Storing JavaScript Objects
  • IndexedDB
  • IndexedDB Terminology
  • Getting indexedDB Objects
  • Opening a Database
  • Creating an Object Store
  • Inserting a Record
  • Retrieving a Record

Asynchronous Programming with Promises [OPTIONAL]

  • The Problems with Callbacks
  • Introduction to Promises
  • Requirements for Using Promises
  • Creating Promises Manually
  • Calling the Promise-based Function
  • Making APIs that support both callbacks and promises
  • Using APIs that support both callbacks and promises
  • Chaining then Method / Returning a Value or a Promise from then Method
  • Promisifying Callbacks with Bluebird
  • Using Bluebird
  • Bluebird – List of Useful Functions
  • Benefit of using Bluebird over ES6 for Promisification
  • Error Handling in Promise-based asynchronous functions

Lab Exercises

  • Lab 1. Setting Up a React Development Environment
  • Lab 2. Basic React Components
  • Lab 3. More React Component Concepts
  • Lab 4. React Router Application
  • Lab 5. React Redux Application
  • Lab 6. React Hooks Application
  • Lab 7. React Custom Hooks
  • Lab 8. Unit Testing with Jest
  • Lab 9. Course Project - React App Using Hooks
  • Lab 10. Exception Handling in JavaScript [OPTIONAL]
  • Lab 11. Asynchronous Programming with Promises [OPTIONAL]

Prerequisites

Attendees for this React training must be proficient developers in modern JavaScript and have some understanding of HTML, CSS, and Ajax.

 

Other Available Dates for this Course

Virtual Classroom Live
January 06, 2025

$2,000.00
3 days    10 AM Et - 6 PM ET
view class details and enroll
Virtual Classroom Live
February 10, 2025

$2,000.00
3 days    10 AM ET - 6 PM ET
view class details and enroll
Virtual Classroom Live
March 24, 2025

$2,000.00
3 days    10 AM ET - 6 PM ET
view class details and enroll
Virtual Classroom Live
May 05, 2025

$2,000.00
3 days    10 AM ET - 6 PM ET
view class details and enroll