Choose your language:

France
Germany
Hong Kong
India
Ireland
Japan
Malaysia
Netherlands
New Zealand
Singapore
Sweden
United Kingdom
United States

MERN JavaScript Technology Stack

Course Code

IN1628

Duration

3 Days

Participants should have basic knowledge of JavaScript programming and web development.
This is an intensive and fast-paced course.
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 participants 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, participants 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 participants reinforce their theoretical knowledge of the learned material.
This course is designed for Developers, Technical Leads, and Software Architects.

In this course, participants will:

  • Work with all the components of the MERN Stack
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 participants 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 participants 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
Send Us a Message
Choose one