Overview of Mern Stack
- This workshop aims at equipping the participants as a MERN stack developer with the necessary knowledge and skills required to build applications with cutting edge technologies, frameworks and tools.
- By the end of this workshop participants will build a single page application that can perform many CRUD operations and call REST API’s by following best design principles which make the application easy to test and maintain.
- Case Study based approach where participants can able to build applications that will make use all the technologies together
Duration
5 Days
Prerequisite for Mern Stack
A good understanding of Javascript is required to attend this training program.
Course Outline for Mern Stack
ES6 Javascript
- Introduction to Javascript
- Introduction to ES6
- New in ES6
- Classes
- let and const
- Arrow functions
- Enhanced Object Literals
- Destructuring
- Spread Operator
- Rest operator
React
- Need for React
- Overview
- What are Components in React
- Single Page Applications
- Language used to build React App
- Setting up React with Node
- Installing node and npm
- Installing React
- Document Structure
- Main entry file
- package.json and node modules
- npm commands to create and run React Application
- Creating and Running first react app in node
- Advantages of Virtual DOM
- Finding how JS modifies the Real DOM
- Finding Virtual DOM modifies the Real DOM
- JSX
- JSX Syntax
- View components using JSX
- Using JSX to create view classes
- Creating views without using JSX
- JSX Precompilation
- Using JSX in the server
- Components, Props and States
- Component Life-Cycle
- Extracting Components
- Component Events
- Using States and Properties
- Initializing States & Properties
- Updating states
- Passing Arguments to Event Handlers
- Conditional Rendering
- Elements Variables
- Inline If
- Preventing components from rendering
- Lists and Keys
- Basic List
- Extracting components with Keys
- Embedding map()
- Forms and Controlled Components
- Text
- Text Area
- Select
- Multiple Inputs
- Accessing DOM nodes using refs
- Fragments
- Principle of One-Way and Two-Way Data Binding
- Best Practices
- React with jQuery
- Calling Webservices from React with Axios
- Building React App for production
Mongo DB
- Overview
- NoSQL
- What is MongoDB?
- JSON primer
- When / why should you use MongoDB?
- Installation and Administration
- Java Environment
- Installing MongoDB
- Starting and stopping MongoDB server
- The JavaScript console
- MongoDB Basics
- Servers
- Databases
- Collections
- Documents / Objects
- CRUD
- Different set of MongoDB commands
- insertOne
- insertMany
- updateOne
- updateMany
- forEach
- remove
Node JS and Express
- Introduction to NodeJS
- NodeJS background
- History
- How it works
- HTTP Module
- Making a request and response mechanism
- Build a web server step by step
- Serving to files
- Serving to Json Data
- Collection post data from web pages
- Package Manager – NPMS
- Installing npms locally and globally on mac
- Installing npms locally and globally on windows
- Working with npms
- File servers with httpsters
Express JS
- Working with Web servers
- The package.json file
- Intro to Express JS
- Express routing and CORS
- Express Post bodies and params
- Performing operations using HTTP methods
- POST
- PUT
- GET
- DELETE
- Extracting path parameters
- Extracting request parameters
- Sending and Receiving JSON data
- Calling the services with React Applications