We're offering 20% off September Live Online classes! See which courses are applicable.   |   Details >

  
AccountIcon BigDataIcon BlogIcon default_resource_icon CartIcon checkmark_icon cloud_devops_icon computer_network_admin_icon cyber_security_icon gsa_schedule_icon human_resources_icon location_icon phone_icon plus_icon programming_software_icon project_management_icon redhat_linux_icon search_icon sonography_icon sql_database_icon webinar_icon

Search UMBC Training Centers

Programming

MERN-STACK Training

+ View more dates & times
    
    
    
    
                     
  • Overview

    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. Upon completion of this training course, students will have solid understanding of MERNS’ value proposition; they will also gain practical experience working with all the components of the MERN stack. This high-octane training course is supplemented by hands-on labs that help the students reinforce their theoretical knowledge of the learned material.

    Topics covered include:

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

    AUDIENCE

    Developers, Technical Leads, and Software Architects.

    PREREQUISITES

    Participants should have basic knowledge of JavaScript programming and web development.

  • Schedule
  • Course Outline

    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
    • The Virtual DOM
    • React Libraries
    • Summary

    CHAPTER 2. ES6 IN A NUTSHELL

    • What is ES6?
    • ES6 Features
    • Using ES6
    • Transpiling
    • Major Syntax Changes
    • let and const
    • Variable Scope
    • Shadowing Variables
    • Arrow Functions
    • Arrow Functions As Parameters
    • Using ‘this’ Within Arrow Functions
    • Template Literals
    • Spread Operator
    • ES6 Classes
    • Declaring Classes
    • Declaring Instance Methods
    • Accessor Methods
    • Static Methods
    • Inheritance With Classes
    • Summary

    CHAPTER 3. BABEL COMMAND-LINE INTERFACE

    • Babel Transpiler
    • Usage Options
    • Presets and Plug-ins
    • Babel CLI Installation
    • Installing the Required Presets
    • The .babelrc Configuration File
    • Running Babel Command-Line
    • A Basic ES6 Development Setup with Babel
    • Test the Babel Development Setup
    • Adding React to the Development Setup
    • Adding a Minimal React App
    • Summary

    CHAPTER 4. BASIC COMPONENTS AND JSX

    • What is JSX?
    • JSX Transpilation to React Code Example
    • Running the Transpiled Code
    • Babel
    • Babel JavaScript Library
    • Script Import Skeleton Code
    • React Components and Properties (Props)
    • Ways to Create UI Components
    • Creating a Functional Component Example
    • Component Names Must Be Capitalized
    • Creating a UI Component with React.createClass()
    • The render Method Object
    • Creating a UI Component Using ES6 Class Notation
    • Using ES6 Classes with React
    • Which UI Component Creation Syntax Should I Use?
    • Components vs Elements
    • Elements Are Immutable
    • Properties
    • Property Naming Convention
    • Properties Default to ‘True’
    • Spread Attributes (an ES6 Feature)
    • Expressions
    • Summary

    CHAPTER 5. REACT COMPONENT CONCEPTS

    • Nesting JSX Elements
    • Example of JSX Nesting
    • Comments in JSX Code
    • JSX Escapes Values
    • Event Handling
    • Event Handler Example
    • Working with Lists of Items
    • Keys in Lists
    • Example List with Key
    • Container vs. Presentational Components
    • State
    • Types of State Data
    • State Hierarchy
    • Lift 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 Binding – Dos
    • Event Binding – Don’ts
    • Passing Parameters to Event Handlers
    • App Development Workflow

    CHAPTER 6. REACT COMPONENTS WITH ES6 CLASSES

    • Classes in ES6
    • Functional Components
    • Extending React.Component
    • The render() method
    • state
    • props
    • defaultProps
    • propTypes
    • The Component Lifecycle
    • componentWillMount()
    • componentDidMount()
    • setState()
    • summary

    CHAPTER 7. REACT ROUTER

    • Routing and Navigation
    • react-router
    • Creating a react-router based project
    • A Basic Routed Component
    • Router vs. BrowserRouter
    • The Route Component
    • <Switch>
    • Redirect Route
    • Navigating with <Link>
    • Navigating with <NavLink>
    • Route Parameters
    • Retrieving Route Parameters
    • QueryString Parameters
    • Using Router with Redux
    • Summary

    CHAPTER 8. BUILDING REACT APPS WITH REDUX

    • Redux Terminology
    • Redux Principles
    • Redux: Actions
    • Redux Action Types
    • Action Creators
    • Dispatching Actions
    • Data Flow Basics
    • 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
    • MapDispatchToProps
    • MapStateToProps
    • Using Mapped Properties and Methods
    • Wrapping Components with Connect
    • Configure Store
    • Programming Advice – MultiTab Console
    • Summary

    CHAPTER 9. UNIT TESTING REACT WITH JEST

    • Jest Testing Framework
    • Features
    • Snapshot Testing
    • Code Coverage
    • Interactive Mode
    • Installing Jest
    • create-react-app
    • Run Test
    • Unit Tests
    • Anatomy of a Unit Test
    • Common Matchers
    • Combining Tests
    • Running Tests
    • Testing async code with done
    • Testing promise based async code
    • Setup and Teardown
    • A Simiple Snapshot Test
    • react-test-renderer
    • ReactTestUtils
    • Enzyme
    • Summary

    CHAPTER 10. INTRODUCTION TO MONGODB

    • MongoDB
    • MongoDB Features
    • MongoDB’s Logo
    • Positioning of MongoDB
    • MongoDB Applications
    • MongoDB Data Model
    • MongoDB Limitations
    • MongoDB Use Cases
    • MongoDB Query Language (QL)
    • The CRUD Operations
    • The
    • find
    • Method
    • The
    • findOne
    • Method
    • A MongoDB QL Example
    • Data Inserts
    • MongoDB vs Apache CouchDB
    • Summary

    CHAPTER 11. MONGODB DATA MODEL

    • The BSON Data Format
    • Database Terminology
    • MongoDB Data Model
    • The _id Primary Key Filed Considerations
    • Indexes
    • (Traditional) Data Modeling in RDBMS
    • Data Modeling in MongoDB
    • An Example of a Data Model in MongoDB
    • MongoDB Data Modeling
    • A Sample JSON Document Matching the Schema
    • To Normalize or Denormalize?
    • MongoDB Limitations
    • Data Lifecycle Management
    • Data Lifecycle Management: TTL
    • Data Lifecycle Management: Capped Collections
    • Summary

    CHAPTER 12. MONGODB ARCHITECTURE

    • MongoDB Nexus Architecture
    • Blending the Best of Both Worlds
    • What Makes MongoDB Fast?
    • Pluggable Storage Engines
    • Data Sharding
    • Sharding in MongoDB
    • Data Replication
    • A Sample Sharded Cluster Diagram
    • GridFS
    • Getting a File from GridFS
    • MongoDB Security
    • Authentication
    • Data and Network Encryption
    • Summary

    CHAPTER 13. MONGODB ADMINISTRATION

    • The Admin Shell
    • Getting Help
    • Admin Commands
    • Starting MongoDB
    • The mongod Web UI
    • Running MongoDB .JS Scripts
    • Shell Helper to JavaScript Equivalent Map
    • A MongoDB Script Example
    • Connecting to MongoDB
    • User Authentication
    • Authentication Options
    • Import / Export Operations
    • MongoDB Extended JSON and Strict Mode
    • Examples of Strict Mode Encoding
    • Examples of Data Import / Export
    • The Robomongo Tool
    • Robomongo Features
    • Summary

    CHAPTER 14. 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
    • 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 15. 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

    CHAPTER 16. INTRODUCTION TO NODE.JS

    • What is Node.js?
    • Application of Node.js
    • Installing Node.js and NPM
    • “Hello, Node World!”
    • How it Works
    • 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)
    • Express
    • Summary

    CHAPTER 17. MODULE AND DEPENDENCY MANAGEMENT

    • Nature of a Node.js Project
    • Introduction to Modules
    • A Simple Module
    • Using the Module
    • Directory Based Modules
    • Example Directory Based Module
    • Using the Module
    • Making a Module Executable
    • Core Modules
    • Loading Module from node_modules Folders
    • Dependency Management Using NPM
    • Installing a Package
    • About Global Installation
    • Setting Up Dependency
    • Package Version Numbering Syntax
    • Updating Packages
    • Uninstalling Packages
    • Alternate Dependency Management
    • Summary

    CHAPTER 18. THE FILE SYSTEM MODULE

    • Introduction
    • Basic File Manipulation
    • Getting File/Directory Meta Data
    • Read an Entire File
    • The Buffer Class
    • Writing to a File
    • Reading in Chunks
    • Writing in Chunks
    • The open() Method
    • Stream API
    • The Readable Interface
    • Example Reading Data in Chunks
    • The Writable Interface
    • Summary

    CHAPTER 19. BASIC WEB APPLICATION DEVELOPMENT

    • Introduction to the HTTP Module
    • The Request Handler Callback Function
    • The Server Object
    • Example Use of Server Object
    • The Request Object
    • The Response Object
    • Parsing Request Body
    • Serving Static Files
    • The HTTP Client API
    • Making POST/PUT/etc. Requests
    • Where To go from Here?
    • Summary

    CHAPTER 20. DEBUGGING AND UNIT TESTING

    • Problem Determination Options
    • Using console.log
    • Using the debug Logging Package
    • Configure Logging
    • The Node Inspector Debugger
    • Basic Usage of the Debugger
    • Unit Testing Node.js Applications
    • Getting Setup
    • Writing a Test Script
    • Running Unit Test
    • Testing Asynchronous Code
    • Using the Chai Assert API
    • The Chai Expect API
    • Summary

    CHAPTER 21. 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 22. 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 23. ACCESSING MONGODB FROM NODE.JS

    • Getting Started
    • The Connection URL
    • Obtaining a Collection
    • Inserting Documents
    • Updating a Document
    • Querying for Documents
    • Deleting a Document
    • Connection Pooling
    • Summary

    CHAPTER 24. CLUSTERING AND FAILOVER

    • Process Management
    • Managing the Process Using OS Tools
    • Installing a Service in Window
    • Create an Upstart Script in Ubuntu
    • Process Management Using forever
    • Clustering Basics
    • Example Clustered Application
    • More About Clustering
    • Child Process Failover
    • Summary

    HANDS-ON LAB EXERCISES

    • Lab01 Setting Up a Basic React Development Environment
    • Lab02 Basic React Components
    • Lab03 More React Component Concepts
    • Lab04 ES6 React Components
    • Lab05 React-Router Application
    • Lab06 React-Redux Application
    • Lab07 Learning the MongoDB Lab Environment
    • Lab08 The MongoDB Database Operations
    • Lab09 The MongoDB Admin Shell
    • Lab10 Import / Export Operations in MongoDB
    • Lab11 Working with Data in MongoDB
    • Lab12 Debugging a Node.js Application
    • Lab13 Introduction to Unit Testing
    • Lab14 Web Service Using Express
    • Lab15 Using MongoDB
    • Lab16 Using the Pug Template Engine
    • Lab17 Clustering a Node.js Application
    • Lab 18 MERN Project 1.0 End-to-end app with React
    • Lab 19 MERN Project 2.0 End-to-end app with React and Redux

    HANDS-ON END-TO-END PROJECT DESCRIPTIONS

    PROJECT 1. REACT BOOK WEBSITE

    This programming project implements an end-to-end data based application using the following technologies: React for the front end, node and express for RESTful web services and Mongo for the database layer. The project consists of a fully capable CRUD based single page React application that gets its data from a lightweight web service.

    In building this project students will gain practical experience in creating real-world React components that work with both data and events. JSX is used to create the React components while the babel compiler is used to convert both JSX and ES6 statements into the version of JavaScript most often supported by today’s browsers. The completed project includes code for the RESTful service as well as database interfacing.

    Time to complete: 1-1/2 to 2 hours

    PROJECT 2. REACT-REDUX  BOOK WEBSITE

    This programming project the application introduced in project1 only with a full Redux integration. Like project1 it implements an end-to-end data based application using the following technologies: React for the front end, node and express for RESTful web services and Mongo for the database layer.

    In building this project students will gain practical experience in creating real-world React applications that use Redux to handle actions and state.  The completed project includes code for the RESTful service as well as database interfacing.

    Time to complete: 2 to 3 hours

  • FAQs
    Is there a discount available for current students?

    UMBC students and alumni, as well as students who have previously taken a public training course with UMBC Training Centers are eligible for a 10% discount, capped at $250. Please provide a copy of your UMBC student ID or an unofficial transcript or the name of the UMBC Training Centers course you have completed. Online courses are excluded from this offer.

    What is the cancellation and refund policy?

    Student will receive a refund of paid registration fees only if UMBC Training Centers receives a notice of cancellation at least 10 business days prior to the class start date for classes or the exam date for exams.

Contact Us