Course Catalog  > Web and Mobile Development  > JavaScript  > React
WA2656

MERN Training

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 MERN training course introduces the students to the essential concepts, design principles, idioms, and techniques behind the efficient use of the MERN JavaScript Technology Stack.
Request Information
Request On-Site or Customized Course Info
Course Details

Duration

3 days

Prerequisites

  • 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

Target Audience

  • Developers
  • Technical Leads
  • Software Architects

Skills Gained

  • 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
Course Outline
  • Introduction
    • 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
  • 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
  • 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
  • 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
  • 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
      • <
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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 Framewo
  • 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
  • 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
  • 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
  • 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