Let us help you find the training program you are looking for.

If you can't find what you are looking for, contact us, we'll help you find it. We have over 800 training programs to choose from.

MERN Stack Programming

  • Course Code: Web Development - MERN Stack Programming
  • Course Dates: Contact us to schedule.
  • Course Category: Web Development Duration: 5 Days Audience: Developers and architects who have prior experience in any web app stack other than the MERN stack will find this course useful to learn about this modern stack. Prior knowledge of JavaScript, HTML, and CSS is required.

About this Course: 

Assemble the complete stack required to build a modern web app using React: MongoDB (a NoSQL database) and Express (a framework for web application servers), which runs on Node (JavaScript on the server side), complement React very nicely.  This 5-day training course also covers many other tools that go into building a complete web application: React Router, React-Bootstrap, Redux, Babel, and webpack. 

Though the primary focus of this course is to equip you with all that is required to build a full-fledged web application, a large portion of this course is devoted to React. 

The popular MEAN (MongoDB, Express, AngularJS, Node) stack introduced Single Page Apps (SPAs) and front-end Model-View-Controller (MVC) as new and efficient paradigms. But it has its shortcomings such as lack of support for SEO friendly server-side rendering and being too prescriptive by being a framework.  Facebook’s React is a technology that competes indirectly with AngularJS.  It is not a full-fledged MVC framework.  It is a JavaScript library for building user interfaces (in some sense the View part).  Yet, it is possible to build a web app by replacing AngularJS with React – hence the term MERN stack. 

What you will learn: 

As a result of taking this MERN Stack Programming course, you will: 

  • Discover the details of React, the React Way, and how to get the maximum out of this library 
  • See the basics of MongoDB, Express, and Node, enough to build a web app 
  • Work with other tools complementary to React, including React-Bootstrap and React Router 
  • Use the tools required to build JavaScript based SPAs  
  • Tie all the components together to build a complete web app. 

Target Audience: 

Developers and architects who have prior experience in any web app stack other than the MERN stack will find this course useful to learn about this modern stack.  Prior knowledge of JavaScript, HTML, and CSS is required. 

Course Outline:  

  1. Introduction 
  • What is MERN? 
  • What You Need To Install 
  • MERN Components 
  • Why MERN? 
  1. Hello World 
  • Server-Less Hello World 
  • Server Setup 
  • Build-Time JSX Compilation 
  • ES2015 
  1. React Components 
  • Issue Tracker 
  • React Classes 
  • Composing Components 
  • Passing Data 
  • Dynamic Composition 
  1. React State 
  • Setting State 
  • Async State Initialization 
  • Event Handling 
  • Communicating from Child to Parent 
  • Stateless Components 
  • Designing Components 
  1. Express REST APIs 
  • REST 
  • Express 
  • The List API 
  • The Create API 
  • Using the List API 
  • Using the Create API 
  • Error Handling 
  1. Using MongoDB 
  • MongoDB Basics 
  • Schema Initialization 
  • MongoDB Node.js Driver 
  • Reading from MongoDB 
  • Writing to MongoDB 
  1. Modularization and Webpack 
  • Server-Side Modules 
  • Introduction to Webpack 
  • Using Webpack Manually 
  • Transform and Bundle 
  • Libraries Bundle 
  • Hot Module Replacement 
  • HMR Using Middleware 
  • Debugging 
  • Server-Side ES2015 
  • ESLint 
  1. Routing with React Router 
  • Routing Techniques 
  • Simple Routing 
  • Route Parameters 
  • Route Query String 
  • Programmatic Navigation 
  • Nested Routes 
  • Browser History 
  1. Forms 
  • More Filters in the List API 
  • Filter Form 
  • The Get API 
  • Edit Page 
  • UI Components 
  • Update API 
  • Using Update API 
  • Delete API 
  • Using the Delete API 
  1. React-Bootstrap 
  • Bootstrap Installation 
  • Navigation 
  • Table and Panel 
  • Forms 
  • Alerts 
  • Modals 
  1. Server Rendering 
  • Basic Server Rendering 
  • Handling State 
  • Initial State 
  • Server-Side Bundle 
  • Back-End HMR 
  • Routed Server Rendering 
  • Encapsulated Fetch 
  1. Advanced Features 
  • MongoDB Aggregate 
  • Pagination 
  • Higher Order Components 
  • Search Bar 
  • Google Sign-In 
  • Session Handling 
  1. Looking Ahead 
  • Mongoose 
  • Flux 
  • Deployment 
  • mern.io 
View All Courses

    Course Inquiry

    Fill in the details below and we will get back to you as quickly as we can.

    Interested in any of these related courses?