React Training: React JavaScript Programming

Chapter 1. React Overview

• 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
• React Libraries
• Summary

Chapter 2. ES6 in a Nutshell

• What is ES6?
• ES6 Features
• Using ES6
• Transpiling
• Major Syntax Changes
• let and const
• Variable Scope
• Shadowing Variables
• Arrow Functions
• Arrow Functions As Parameters
• Using ‘this’ Within Arrow Functions
• Template Literals
• Spread Operator
• ES6 Classes
• Declaring Classes
• Declaring Instance Methods
• Accessor Methods
• Static Methods
• Inheritance With Classes
• Summary

Chapter 3. Babel Command-Line Interface

• Babel Transpiler
• Usage Options
• Presets and Plug-ins
• Babel CLI Installation
• Babel Configuration
• Running Babel Command-Line
• A Basic ES6 Development Setup with Babel
• Test the Babel Development Setup
• Adding React to the Development Setup
• Create a Minimal React App
• Summary

Chapter 4. Basic Components and JSX

• What is JSX?
• JSX Transpilation to React Code Example
• Running the Transpiled Code
• Babel
• Babel Runtime JavaScript Library
• Script Import Skeleton Code
• Playing Around in CodePen
• React Components and Properties (Props)
• Ways to Create UI Components
• Creating a Functional Component Example
• Component Names Must Be Capitalized
• Creating a React- Class-Based Compenent in ES5
• The render Method Object
• Creating a UI Component Using ES6 Class Notation
• Using ES6 Classes with React
• Which UI Component Creation Syntax Should I Use?
• Components vs Elements
• Elements Are Immutable
• Properties
• Property Naming Convention
• Properties Default to ‘True’
• Spread Attributes (an ES6 Feature)
• Expressions
• Summary

Chapter 5. 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
• Event Handling
• Event Handler Example
• Working with Lists of Items
• Keys in Lists
• Example List With Key
• Container vs. Presentational Components
• State
• Types of State Data
• State Hierarchy
• Lift 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 Hander Example
• Event Binding – DOs
• Event Binding – Don’ts
• Passing Parameters to Event Handlers
• App Development Workflow – 1/3
• App Development Workflow – 2/3
• App Development Workflow – 3/3
• Summary

Chapter 6. React Components with ES6 Classes

• Classes in ES6
• Functional Components
• Extending React.Component
• The render() Method
• state
• props
• defaultProps
• propTypes
• The Component Lifecycle
• Component Lifecycle- Overview
• Component Lifecycle- Render Phase
• Component Lifecycle- Commit Phase
• Component Lifecycle- Unmounting
• componentWillMount()
• componentDidMount()
• setState( newStateValue )
• Summary

Chapter 7. React Router

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

Chapter 8. State Mangement 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
• Summary

Chapter 9. Using React Hooks 

• Functional Component Shortcomings
• Hooks Overview
• Functional Component Props
• The useState Hook
• Functional Component using the useState hook
• useState with Multiple Variables
• useState can also be used with Objects
• The Effect Hook
• Effect Hook Example
• Using Effect Hook to Load Data
• Restricting when useEffect is Called
• Hook Rules
• Linter Example
• Custom Hooks
• Custom Hook Function Example
• Using the Custom Hook