MERN Training

MERN Training Courseware (WA2656)

MERN [MongoDB, Express, React, and Node.JS] represents a new breed of software platforms that creatively leverage a stack of production-ready technologies centered on JavaScript. This intensive training course introduces the students to the essential concepts, design principles, idioms, and techniques behind the efficient use of the MERN JavaScript Technology Stack. 

Publisher: Web Age Solutions

Benefits

  • The React Framework
  • Essential MongoDB
  • Node.js
  • Debugging and Unit testing on Node.js
  • Express
  • Full-stack application projects

Outline

  1. React Overview
    1. What is React?
    2. What's in a Name?
    3. React Component Model
    4. What React Is Not
    5. What You Will Not Find in React
    6. Motivation for Creating React
    7. A React JavaScript Example
    8. One-Way Data Flow
    9. JSX
    10. A JSX Example
    11. The Virtual (Mock) DOM
    12. Only Sub-components that Actually Change are Re-Rendered
    13. Creating React Projects
    14. React Project Structure
    15. Project Files
    16. React Libraries
  2. ECMAScript 2015 in a Nutshell
    1. What is ECMAScript 2015?
    2. ECMAScript 2015 Features
    3. Using ECMAScript 2015
    4. Transpiling
    5. Major Syntax Changes
    6. let and const
    7. Variable Scope
    8. Variable Scope
    9. Shadowing Variables
    10. Arrow Functions
    11. Arrow Functions As Parameters
    12. Using 'this' Within Arrow Functions
    13. Template Literals
    14. Spread Operator
    15. Promises
    16. Calling a Promise-based Function
    17. Some functions support both callbacks and promises
    18. ECMAScript 2015 Classes
    19. Inheritance With Classes
  3. Basic Components and JSX
    1. What is JSX?
    2. JSX Transpilation to React Code Example
    3. Rendering a React Component
    4. React Components
    5. Creating a Functional Component Example
    6. Component Names Must Be Capitalized
    7. Creating Class Based Components
    8. The render Method
    9. When to use Class vs. Functional Components
    10. Components vs Elements
    11. Elements Are Immutable
    12. Properties
    13. Property Naming Convention
    14. Properties Default to 'True'
    15. Spread Attributes
    16. Expressions
    17. Fragments
  4. React Functional Component Concepts
    1. Functional Components
    2. Nesting JSX Elements
    3. Example of JSX Nesting
    4. Comments in JSX Code
    5. Setting CSS Styles Using Classes
    6. Setting CSS Styles Directly
    7. JSX Escapes Values
    8. Working with Lists of Items
    9. Keys in Lists
    10. Example List With Key
    11. Types of State Data
    12. State Hierarchy
    13. Lifting State Up
    14. Props vs. State
    15. Pass Down a Function
    16. Immutability
    17. Immutability — Why?
    18. Virtual DOM and State
    19. Setting state
    20. Updating Input fields
    21. Passing Props to Components
    22. Passing Functions to Components
    23. Event Handling
    24. Event Handler Example
    25. Event Binding - DOs
    26. Event Binding — Don'ts
    27. Passing Parameters to Event Handlers
    28. Component Life-cycle
    29. Life-cycle in Functional Components
    30. App Development Workflow — 1/3
    31. App Development Workflow — 2/3
    32. App Development Workflow — 3/3
  5. Using React Hooks
    1. Functional Component Shortcomings
    2. Hooks Overview
    3. Hook Rules
    4. React Linter Example
    5. Functional Component Props
    6. The useState Hook
    7. Functional Component using the useState hook
    8. useState with Multiple Variables
    9. useState can also be used with Objects
    10. The useEffect Hook
    11. useEffect Hook Example
    12. Using useEffect Hook to Load Data
    13. Restricting when useEffect is Called
    14. The useContext Hook
    15. Additional Hooks
    16. The useReducer Hook
    17. An Example Reducer Function
    18. Calling and Using useReducer
    19. The useMemo Hook
    20. useMemo Example
    21. The useCallback Hook
    22. useCallback Example
    23. The useRef Hook
    24. Using useRef to Hold Values
    25. The useImperativeHandle Hook
    26. useImperativeHandle Hook Example
    27. The useLayoutEffect Hook
  6. React Router
    1. Routing and Navigation
    2. react-router
    3. Creating a react-router based project
    4. A Basic Routed Component
    5. A Basic Routed Component
    6. Router vs. BrowserRouter
    7. The Route component
    8. <Switch>
    9. Redirect Route
      1. Navigating with <Link>
    10. Navigating with <NavLink>
    11. Route Parameters
    12. Retrieving Route Parameters
    13. Retrieving Route Parameters Using Hooks
    14. QueryString Parameters
    15. Retrieving Query Parameters using Hooks
    16. Using Router with Redux
  7. State Management for React
    1. React State Basics — Props and State
    2. Props
    3. State in Class Based Components
    4. Managing State with Hooks in Functional Components
    5. The Problem with Props and State
    6. Redux State Library
    7. Redux Advantages
    8. Redux Disadvantages
    9. Basic Rules for State Management
  8. Unit Testing React with React Testing Library
    1. React Testing Framework
    2. Features
    3. Snapshot Testing
    4. Code Coverage
    5. Interactive Mode
    6. Projects created with create-react-app
    7. Default App Component Test
    8. Unit Tests
    9. Anatomy of a Unit Test
    10. Common Matchers
    11. Combining Tests
    12. Running Tests
    13. Testing Promise based async code with 'done'
    14. Setup and Teardown
    15. react-testing-library
    16. A Simple Component Test
    17. A Simple Snapshot Test
    18. Running and Updating SnapShot Tests
    19. Building Component Tests
    20. Calling Render
    21. Render Properties
    22. Simulating Events
    23. Testing Results
    24. Using Query Functions
    25. Text Matching
    26. Counter Component
    27. counter-test.js
  9. Introduction to MongoDB
    1. MongoDB
    2. MongoDB Features
    3. MongoDB on the Web
    4. Positioning of MongoDB
    5. MongoDB Data Model
    6. MongoDB Limitations
    7. MongoDB Use Cases
    8. MongoDB Query Language (QL)
    9. The CRUD Operations
    10. The find Method
    11. The findOne Method
    12. A MongoDB Query Language (QL) Example
    13. Inserts
  10. Working with Data in MongoDB
    1. Reading Data in MongoDB
    2. The Query Interface
    3. Query Syntax is Driver-Specific
    4. Projections
    5. Query and Projection Operators
    6. MongoDB Query to SQL Select Comparison
    7. Cursors
    8. Cursor Expiration
    9. Writing Data in MongoDB
    10. An Insert Operation Example
    11. The Update Operation
    12. Update Operation Options
    13. An Update Operation Example
    14. A Remove Operation Example
    15. Limiting Return Data
    16. Data Sorting
    17. Aggregating Data
    18. Aggregation Stages
    19. Accumulators
    20. An Example of an Aggregation Pipe-line
    21. Map-Reduce
  11. Introduction to Node.js
    1. What Is Node.js?
    2. Applications of Node.js
    3. Installing Node.js and NPM
    4. "Hello, Node World!"
    5. How It Works
    6. Node.js is built on JavaScript: Benefits
    7. Traditional Server-Side I/O Model
    8. Disadvantages of the Traditional Approach
    9. Event-Driven, Non-Blocking I/O
    10. Concurrency
    11. Using Node Package Manager (NPM)
    12. The Express Server Framework
  12. Introduction to Express
    1. Introduction to Express
    2. Basic Routing Example
    3. Defining Routing Rules
    4. Route Path
    5. The Response Object
    6. Supplying URL Parameters
    7. Ordering of Routes
    8. Defining Catch-All Route
    9. Full Example Web Service
  13. Express Middleware
    1. Introduction to Express Middleware
    2. Writing a Middleware Function
    3. Binding to a Path
    4. Order of Execution
    5. Raising Error
    6. Handling Error
    7. Serving Static Files
    8. Handling POST Request Body
    9. Enable Response Compression
  14. Accessing MongoDB from Node.js
    1. Programmatic Access to MongoDB
    2. Create a Node Project
    3. Installing The MongoDB Node Driver
    4. Setup your Code to Use the Driver
    5. The Connection URL
    6. Connecting to the Mongo Server
    7. Performing Database Operations
    8. Retrieving a Collection
    9. Retrieving Specific Document(s)
    10. Inserting Documents
    11. Updating Documents
    12. Deleting a Document
  15. Appendix A - React Class Based Components
    1. Classes in JavaScript
    2. Functional Components
    3. Extending React.Component
    4. The render() Method
    5. state
    6. props
    7. defaultProps
    8. propTypes
    9. Component Lifecycle
    10. Component Life-cycle: Overview
    11. Component Life-cycle — Render Phase
    12. Component Life cycle — Commit Phase
    13. Component Life-cycle — Unmounting
    14. constructor() example
    15. componentDidMount() example
    16. setState( newStateValue )
    17. Updating Input Fields
  16. Appendix B - Types of State
    1. Types of State
    2. Data State
    3. Communication State
    4. Control State
    5. Session State
    6. Location State
    7. Location State Side Effects
  17. Appendix C - Building React Apps with Redux
    1. Redux
    2. Redux Terminology
    3. Redux Principles
    4. Redux: Actions
    5. Redux Action Types
    6. Action Creators
    7. Dispatching Actions
    8. Data Flow Basics
    9. Redux Reducers
    10. Redux Reducers
    11. Pure Functions
    12. Reducer Example
    13. Returning Default State
    14. Creating a Development Environment with create-react-app
    15. Using Redux with React
    16. Initializing the Store
    17. Immutability
    18. Benefits of Immutable State
    19. Mutability of Standard types
    20. Copying Objects in JavaScript
    21. Copying Arrays in JavaScript
    22. One Store - Multiple Reducers
    23. Combining Reducers
    24. Components and Redux
    25. The React-Redux Package
    26. Wrapping App with Provider
    27. mapStateToProps
    28. mapDispatchToProps
    29. Using Mapped Properties and Methods
    30. Wrapping Components with Connect
    31. Configure Store
    32. Programming Advice - MultiTab Console
  18. Appendix D - Indexes in MongoDB
    1. Indexes in MongoDB
    2. Creating an Index
    3. Listing Existing Indexes
    4. The Sort Order
    5. Using the Explain() Method
    6. Main Index Types
    7. The _id Field
    8. Single and Compound Indexes
    9. Multikey Indexes
    10. Other Index Types
    11. Index Properties
    12. Examples of Creating Indexes with Index Properties
  19. Appendix E - Events in Node JS
    1. Event Driven Programming
    2. Event Emitter
    3. EventEmitter Class
    4. EventEmitter Class — Inheritance
    5. The Event Loop and Event Handler
    6. Phases Overview
    7. Event Handlers
    8. Example (Using EventEmitter as an Object)
    9. Example (Inheriting from EventEmitter)
    10. EventEmitter Functions
    11. Issue with 'this' Keyword in Callback Functions
    12. Issue with 'this' Keyword in Callback Functions (cont.)
    13. Handling this Problem
    14. Controlling Event Callbacks in the Event Loop
  20. Appendix F - Asynchronous Programming with Callbacks
    1. Synchronous and Asynchronous
    2. Callbacks
    3. Creating a Callback Function
    4. Calling The Callback Function
    5. Callback - Another Example
    6. Issue with 'this' Keyword in Callback Functions
    7. Handling this Problem
    8. Handling this Problem — Method 1 (Storing in Another Variable)
    9. Handling this Problem — Method 2 (Using Bind Function)
    10. Handling this Problem — Method 3 (Using ES6 Arrow Functions)
    11. Error Handling without Callback
    12. Error Handling with Callback
    13. Asynchronous Callback
    14. setImmediate() and nextTick()
    15. API Example
  21. Appendix G - Asynchronous Programming with Promises
    1. The Problems with Callbacks
    2. Introduction to Promises
    3. Requirements for Using Promises
    4. Creating Promises Manually
    5. Calling the Promise-based Function
    6. Making APIs that support both callbacks and promises
    7. Using APIs that support both callbacks and promises
    8. Chaining then Method / Returning a Value or a Promise from then Method
    9. Promisifying Callbacks with Bluebird
    10. Using Bluebird
    11. Bluebird — List of Useful Functions
    12. Benefit of using Bluebird over ES6 for Promisification
    13. Error Handling in Promise-based asynchronous functions
  22. Lab Exercises
    1. Using create-react-app
    2. Basic React Components
    3. More React Component Concepts
    4. React Hooks Application
    5. React Router Application
    6. Learning the MongoDB Lab Environment
    7. The MongoDB Database Operations
    8. Working with Data in MongoDB
    9. Web Service Using Express
    10. Using MongoDB from Node
    11. Book Project - REST Server
    12. Book Project - React App Using Hooks
    13. React Class Based Components
    14. Events in Node.js
    15. Asynchronous Programming with Callbacks
    16. Asynchronous Programming with Promises

Required 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
License

Length: 3 days | $195.00 per copy

LicenseRequest More InformationRequest Trainer Evaluation Copy