React JavaScript Programming Classroom Live Eagan, MN April 01, 2019

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 ReactJS training should have some prior understanding of web development, HTML, AJAX, JavaScript and ES6 or higher.