React JavaScript Programming

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.