Duration: 3 days

Overview

This MERN training course gives attendees a solid understanding of MERN's value proposition. They will also gain practical experience working with all the components of the MERN stack. This MERN course is supplemented by hands-on labs that help the students reinforce their theoretical knowledge of the learned material.

Objectives

  • Understand and use the React Framework
  • Learn MongoDB basics
  • Work with Node.js
  • Debug and Unit test  on Node.js
  • Use Express
  • Understand full-stack application projects

Prerequisites

To succeed in this training, participants should have experience with:

  • JavaScript programming (ES6 or higher) at an intermediate level including some exposure to exception handling, promises, and debugging Web applications in the browser environment.
  • Core front end technologies such as HTTP, HTML, CSS, DOM and browser development tools

Conceptual knowledge of data base systems and web application design is assumed.

We offer a 1-2 day subset of our Introduction to JavaScript course to meet this pre-requisite if needed. Please ask your salesperson for details.

Audience

Developers, Technical Leads, and Software Architects.

Outline for 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