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
  • Use Express
  • Understand full-stack application projects
Course Outline
  • Introduction
    • What is React?
    • One-Way Data Flow
    • JSX
    • The Virtual (Mock) DOM
    • Creating React Projects
    • React Project Structure
    • Project Files
    • React Libraries
  • ECMAScript 2015 in a Nutshell
    • What is ECMAScript 2015?
    • ECMAScript 2015 Features
    • let and const
    • Variable Scope
    • Arrow Functions
    • Template Literals
    • Spread Operator
    • Promises
    • Calling a Promise-based Function
    • ECMAScript 2015 Classes
  • Basic Components and JSX
    • What is JSX?
    • React Components
    • Components vs Elements
    • Elements Are Immutable
    • Properties
    • Spread Attributes
    • Expressions
    • Fragments
  • React Functional Component Concepts
    • Functional Components
    • Nesting JSX Elements
    • Setting CSS Styles Using Classes
    • Setting CSS Styles Directly
    • Working with Lists of Items
    • Keys in Lists
    • Types of State Data
    • State Hierarchy
    • Lifting State Up
    • Props vs. State
    • Pass Down a Function
    • Immutability
    • Virtual DOM and State
    • Passing Props to Components
    • Passing Functions to Components
    • Event Handling
    • Passing Parameters to Event Handlers
    • Component Lifecycle
    • Lifecycle in Functional Components
  • Using React Hooks
    • Hooks Overview
    • Hook Rules
    • Functional Component Props
    • The useState Hook
    • The useEffect Hook
    • Using useEffect Hook to Load Data
    • The useContext Hook
    • Additional Hooks
      • The useReducer Hook
      • The useMemo Hook
      • The useCallback Hook
      • The useRef Hook
      • The useImperativeHandle Hook
      • The useLayoutEffect Hook
  • React Router
    • Routing and Navigation
    • react-router
    • 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
  • State Management for React
    • React State Basics – Props and State
    • Props
    • 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
  • Introduction to MongoDB
    • MongoDB Features
    • MongoDB Data Model
    • MongoDB Use Cases
    • MongoDB Query Language (QL)
    • The CRUD Operations
  • 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
    • Insert
    • Update
    • Delete
    • Limiting Return Data
    • Data Sorting
    • Aggregating Data
  • Introduction to Node.js
    • What Is Node.js?
    • Installing Node.js and NPM
    • Node.js is built on JavaScript: Benefits
    • Traditional Server-Side I/O Model
    • Event-Driven, Non-Blocking I/O
    • Concurrency
    • Using Node Package Manager (NPM)
    • The Express Server Framework
  • Introduction to Express
    • Basic Routing Example
    • Defining Routing Rules
    • Route Path
    • The Response Object
    • Supplying URL Parameters
    • Ordering of Routes
    • Defining Catch-All Route
  • 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
    • Installing The MongoDB Node 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: Setting up a React Development Environment
    • Lab 2: Working with React Components
    • Lab 3: Working with arrays in React Components
    • Lab 4: Working with Hooks
    • Lab 5: Working with React Router
    • Lab 6: Working with Express
    • Lab 7: Working with MongoDB
    • Lab 8: Working with MongoDB and Express
    • Lab 9: Add Pager Functionality to the React App