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