MERN Training

• 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
  • Creating React Projects
  • React Project Structure
  • Project Files
  • React Libraries
  • Summary
• Chapter 2 - ECMAScript 2015 in a Nutshell
  • What is ECMAScript 2015?
  • ECMAScript 2015 Features
  • Using ECMAScript 2015
  • Transpiling
  • Major Syntax Changes
  • let and const
  • Variable Scope
  • Variable Scope
  • Shadowing Variables
  • Arrow Functions
  • Arrow Functions As Parameters
  • Using 'this' Within Arrow Functions
  • Template Literals
  • Spread Operator
  • Promises
  • Calling a Promise-based Function
  • Some functions support both callbacks and promises
  • ECMAScript 2015 Classes
  • Inheritance With Classes
  • Summary
• Chapter 3 - Basic Components and JSX
  • What is JSX?
  • JSX Transpilation to React Code Example
  • Rendering a React Component
  • React Components
  • Creating a Functional Component Example
  • Component Names Must Be Capitalized
  • Creating Class Based Components
  • The render Method
  • When to use Class vs. Functional Components
  • Components vs Elements
  • Elements Are Immutable
  • Properties
  • Property Naming Convention
  • Properties Default to 'True'
  • Spread Attributes
  • Expressions
  • Fragments
  • Summary
• Chapter 4 - 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
  • 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 – 1/3
  • App Development Workflow – 2/3
  • App Development Workflow – 3/3
  • Summary
• Chapter 5 - 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
  • Summary
  • Chapter 6 - React Router
  • Routing and Navigation
  • react-router
  • Creating a react-router based project
  • A Basic Routed Component
  • A Basic Routed Component
  • Router vs. BrowserRouter
  • The Route component
  • <Switch>
  • Redirect Route
  • Navigating with <Link>
  • Navigating with <NavLink>
  • Route Parameters
  • Retrieving Route Parameters
  • Retrieving Route Parameters Using Hooks
  • QueryString Parameters
  • Retrieving Query Parameters using Hooks
  • Using Router with Redux
  • Summary
• Chapter 7 - 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
  • Summary
• Chapter 8 - 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
  • Summary
• Chapter 9 - Introduction to MongoDB
  • MongoDB
  • MongoDB Features
  • MongoDB on the Web
  • Positioning of MongoDB
  • MongoDB Data Model
  • MongoDB Limitations
  • MongoDB Use Cases
  • MongoDB Query Language (QL)
  • The CRUD Operations
  • The find Method
  • The findOne Method
  • A MongoDB Query Language (QL) Example
  • Inserts
  • Summary
• Chapter 10 - Working with Data in MongoDB
  • Reading Data in MongoDB
  • The Query Interface
  • Query Syntax is Driver-Specific
  • Projections
  • Query and Projection Operators
  • MongoDB Query to SQL Select Comparison
  • Cursors
  • Cursor Expiration
  • Writing Data in MongoDB
  • An Insert Operation Example
  • The Update Operation
  • Update Operation Options
  • An Update Operation Example
  • A Remove Operation Example
  • Limiting Return Data
  • Data Sorting
  • Aggregating Data
  • Aggregation Stages
  • Accumulators
  • An Example of an Aggregation Pipe-line
  • Map-Reduce
  • Summary
• Chapter 11 - Introduction to Node.js
  • What Is Node.js?
  • Applications of Node.js
  • Installing Node.js and NPM
  • "Hello, Node World!"
  • How It Works
  • Node.js is built on JavaScript: Benefits
  • Traditional Server-Side I/O Model
  • Disadvantages of the Traditional Approach
  • Event-Driven, Non-Blocking I/O
  • Concurrency
  • Using Node Package Manager (NPM)
  • The Express Server Framework
  • Summary
• Chapter 12 - Introduction to Express
  • Introduction to Express
  • Basic Routing Example
  • Defining Routing Rules
  • Route Path
  • The Response Object
  • Supplying URL Parameters
  • Ordering of Routes
  • Defining Catch-All Route
  • Full Example Web Service
  • Summary
• Chapter 13 - Express Middleware
  • Introduction to Express Middleware
  • Writing a Middleware Function
  • Binding to a Path
  • Order of Execution
  • Raising Error
  • Handling Error
  • Serving Static Files
  • Handling POST Request Body
  • Enable Response Compression
  • Summary
• Chapter 14 - Accessing MongoDB from Node.js
  • Programmatic Access to MongoDB
  • Create a Node Project
  • Installing The MongoDB Node Driver
  • Setup your Code to Use the Driver
  • The Connection URL
  • Connecting to the Mongo Server
  • Performing Database Operations
  • Retrieving a Collection
  • Retrieving Specific Document(s)
  • Inserting Documents
  • Updating Documents
  • Deleting a Document
  • Summary
• Appendix A - React Class Based Components
  • Classes in JavaScript
  • Functional Components
  • Extending React.Component
  • The render() Method
  • state
  • props
  • defaultProps
  • propTypes
  • Component Lifecycle
  • Component Life-cycle: Overview
  • Component Life-cycle – Render Phase
  • Component Life cycle – Commit Phase
  • Component Life-cycle – Unmounting
  • constructor() example
  • componentDidMount() example
  • setState( newStateValue )
  • Updating Input Fields
  • Summary
• Appendix B - Types of State
  • Types of State
  • Data State
  • Communication State
  • Control State
  • Session State
  • Location State
  • Location State Side Effects
  • Summary
• Appendix C - Building React Apps with Redux
  • Redux
  • Redux Terminology
  • Redux Principles
  • Redux: Actions
  • Redux Action Types
  • Action Creators
  • Dispatching Actions
  • Data Flow Basics
  • Redux Reducers
  • 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
  • Summary
• Appendix D - Indexes in MongoDB
  • Indexes in MongoDB
  • Creating an Index
  • Listing Existing Indexes
  • The Sort Order
  • Using the Explain() Method
  • Main Index Types
  • The _id Field
  • Single and Compound Indexes
  • Multikey Indexes
  • Other Index Types
  • Index Properties
  • Examples of Creating Indexes with Index Properties
  • Summary
• Appendix E - Events in Node JS
  • Event Driven Programming
  • Event Emitter
  • EventEmitter Class
  • EventEmitter Class – Inheritance
  • The Event Loop and Event Handler
  • Phases Overview
  • Event Handlers
  • Example (Using EventEmitter as an Object)
  • Example (Inheriting from EventEmitter)
  • EventEmitter Functions
  • Issue with 'this' Keyword in Callback Functions
  • Issue with 'this' Keyword in Callback Functions (cont.)
  • Handling this Problem
  • Controlling Event Callbacks in the Event Loop
  • Summary
• Appendix F - Asynchronous Programming with Callbacks
  • Synchronous and Asynchronous
  • Callbacks
  • Creating a Callback Function
  • Calling The Callback Function
  • Callback - Another Example
  • Issue with 'this' Keyword in Callback Functions
  • Handling this Problem
  • Handling this Problem – Method 1 (Storing in Another Variable)
  • Handling this Problem – Method 2 (Using Bind Function)
  • Handling this Problem – Method 3 (Using ES6 Arrow Functions)
  • Error Handling without Callback
  • Error Handling with Callback
  • Asynchronous Callback
  • setImmediate() and nextTick()
  • API Example
  • Summary
• Appendix G - Asynchronous Programming with Promises
  • 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
  • Summary

Lab Exercises

• Lab 1. Using create-react-app
• Lab 2. Basic React Components
• Lab 3. More React Component Concepts
• Lab 4. React Hooks Application
• Lab 5. React Router Application
• Lab 6. Learning the MongoDB Lab Environment
• Lab 7. The MongoDB Database Operations
• Lab 8. Working with Data in MongoDB
• Lab 9. Web Service Using Express
• Lab 10. Using MongoDB from Node
• Lab 11. Book Project - REST Server
• Lab 12. Book Project - React App Using Hooks
• Lab 13. React Class Based Components
• Lab 14. Events in Node.js
• Lab 15. Asynchronous Programming with Callbacks
• Lab 16. Asynchronous Programming with Promises