MERN Stack Guide

JS Basics
• To get started with the Basics of JS, syntax, data types and more
• https://javascript.info
• Cover Part 1 “The JavaScript Language” and get your hands on JS
Day 1
• An Introduction
• An Introduction to JavaScript
• Manuals and specifications
• Code editors
• Developer console
Day 1
• JavaScript Fundamentals
• Hello, world!
• Code structure
• The modern mode, "use strict"
• Variables
• Data types
• Interaction: alert, prompt, confirm
• Type Conversions
• Basic operators, maths
Day 2
• Comparisons
• Conditional branching: if, '?'
• Logical operators
• Nullish coalescing operator '??'
• Loops: while and for
• The "switch" statement
• Functions
• Function expressions
• Arrow functions, the basics
• JavaScript specials
Day 2
• Code quality
• Debugging in the browser
• Coding Style
• Comments
• Ninja code
• Automated testing with Mocha
• Polyfills and transpilers
Day 2
• Objects: the basics
• Objects
• Object references and copying
• Garbage collection
• Object methods, "this"
• Constructor, operator "new"
• Optional chaining '?.'
• Symbol type
• Object to primitive conversion
Day 3
• Data types
• Methods of primitives
• Numbers
• Strings
• Arrays
• Array methods
• Iterables
• Map and Set
• WeakMap and WeakSet
• Object.keys, values, entries
• Destructuring assignment
• Date and time
• JSON methods, toJSON
Day 3
• Advanced working with functions
• Recursion and stack
• Rest parameters and spread syntax
• Variable scope, closure
• The old "var"
• Global object
• Function object, NFE
• The "new Function" syntax
• Scheduling: setTimeout and setInterval
• Decorators and forwarding, call/apply
• Function binding
• Arrow functions revisited
Day 4
• Object properties configuration
• Property flags and descriptors
• Property getters and setters
Day 4
• Prototypes, inheritance
• Prototypal inheritance
• F.prototype
• Native prototypes
• Prototype methods, objects without __proto__
Day 4
• Classes
• Class basic syntax
• Class inheritance
• Static properties and methods
• Private and protected properties and methods
• Extending built-in classes
• Class checking: "instanceof"
• Mixins
Day 5
• Error handling
• Error handling, "try...catch"
• Custom errors, extending Error
Day 5
• Promises, async/await
• Introduction: callbacks
• Promise
• Promises chaining
• Error handling with promises
• Promise API
• Promisification
• Microtasks
• Async/await
Day 5
• Generators, advanced iteration
• Generators
• Async iteration and generators
Day 5
• Modules
• Modules, introduction
• Export and Import
• Dynamic imports
Setup
• Download the relevant installer from here:
• https://nodejs.org/en
• Verify the installation by typing “node –v” and “npm –v” in CLI
Hello World
• Create a file “index.js”
• Write “console.log(”Hello World");”
• In CLI, run “node index.js”
• It should print “Hello World”
• You’re done with basic setup and installation, let move forward
Create your first Node.js server
• In your index.js file, write following code:
• var http = require('http');

http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/html'});
  res.end('Hello World!');
}).listen(3000);
• Now go back to CLI, and run node index.js again, you’ve started your node server
• Open the browser, type http://localhost:3000/, you’ll see your server returns Hello World!
Node.js Modules
• Node.js has a set of built-in modules which you can use without any
further installation.
• To include a module, use the require() function with the name of the
module, for example in our previous lesson we did require(‘http’)
• The HTTP module can create a server that listens to server ports and
gives a response back to the client.
Create Your Own Modules
• Create a file called “myFirstModule.js”
• Write following code in this file:
• exports. currentDateTime = function () {
  return Date();
};
• exports keyword is used to make properties and methods available outside the
module file.
• Go back to index.js file and do the following:
• Add this line at the top:
• var dt = require('./myFirstModule’);
• change res.end('Hello World!’); to res.end('Hello World!’ + dt.currentDateTime());
Create Your Own Modules
• Your code should look like this:
• var http = require('http’);
var dt = require('./myFirstModule');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/html'});
res.end('Hello World! ' + dt.currentDateTime());
}).listen(3000);
Create Your Own Modules
• Go back to CLI and run node index.js again
• Go back to browser and refresh the page
• Now you know how to create your own modules and require in
another file (or module)
Package Manager (NPM)
• NPM is the package module which helps javascript developers load
dependencies effectively. To load dependencies we just have to run a
command in command prompt
• It requires a json file named as package.json in root directory to install
all dependencies defined in the file.
• npm install – installs all dependencies defined in package.json file
• npm install <package name> - installs a specific package
• For example: npm install express --save installs express module ( --save flag
adds it in package.json file)
Understanding package.json
• A sample package.json
• The most important things in your package.json
are name and version. Those are actually
required, and your package won't install without
them. The name and version together form an
identifier that is assumed to be completely
unique.
• Repository
• Specify the place where your code lives.
• Scripts:
• If there is a index.js file in the root of your
package, then npm will default the start
command to node server.js.
• That means running npm start in CLI now
will actually run node server.js
Understanding package.json
• Dependencies:
• Dependencies are specified in a simple object that
maps a package name to a version range. Version
Name must be Version exactly.
• If you want to install the latest version of a file, you
just have to put latest in place of the version name.
• Tilde(~) is used to tell "Approximately equivalent to
version".
Events in Node.js
• Node.js has a built-in module, called "Events", where you can create-,
fire-, and listen for- your own events.
• To include the built-in Events module use the require() method. In
addition, all event properties and methods are an instance of an
EventEmitter object. To be able to access these properties and
methods, create an EventEmitter object:
• var events = require('events');
var eventEmitter = new events.EventEmitter();
The EventEmitter Object
• You can assign event handlers to
your own events with the
EventEmitter object.
• In the example below we have
created a function that will be
executed when a "scream" event
is fired.
• To fire an event, use
the emit() method.
• var events = require('events');
var eventEmitter = new events.EventEmitter();
//Create an event handler:
var myEventHandler = function () {
  console.log('I hear a scream!');
}
//Assign the event handler to an event:
eventEmitter.on('scream', myEventHandler);
//Fire the 'scream' event:
eventEmitter.emit('scream');
Node.js File System Module
• The Node.js file system module allows you to work with the file system
on your computer.
• To include the File System module, use the require() method
• var fs = require('fs');
• Common use for the File System module:
• Read files
• Create files
• Update files
• Delete files
• Rename files
Understanding Callbacks and Promises
• Callbacks
• We can pass functions as parameters to other functions and call them inside
the outer functions. So callback is a function that is passed to another
function. When the target function has done it’s job, it will call the second
function (the callback function we passed as parameter earlier).
• A simple Example: setTimeout(function() { console.log(”Hello"); }, 300);
• There is a built-in method in JavaScript called “setTimeout”, which calls a
function or evaluates an expression after a given period of time (in
milliseconds). In the example above it will call the function we passed as 1st
parameter to setTimeout function and will print Hello after 300 ms
Understanding Callbacks and Promises
• Promises
• A promise is used to handle the
asynchronous result of an operation.
JavaScript is designed to not wait for an
asynchronous block of code to completely
execute before other synchronous parts of
the code can run. With Promises, we can
defer the execution of a code block until
an async request is completed. This way,
other operations can keep running
without interruption.
• States of Promises:
• First of all, a Promise is an object. There are
3 states of the Promise object:
• Pending: Initial State, before the Promise
succeeds or fails.
• Resolved: Completed Promise
• Rejected: Failed Promise, throw an error
• For example, when we request data from
the server by using a Promise, it will be in
pending mode until we receive our data.
• If we achieve to get the information from
the server, the Promise will be resolved
successfully. But if we don’t get the
information, then the Promise will be in the
rejected state.
Promises
• Firstly, we use a constructor to create a
Promise object. The promise has two
parameters, one for success (resolve)
and one for fail (reject)
• In this Promise If Condition is true,
resolve the promise returning the
“Promise is resolved ”, else return an
error “Promise is rejected”. Now we
have created our first Promise, Now
let's use it.
Promises
• Using Promise:
• To use the above create Promise
we use then() for resolve
and catch() for reject.
• There can be multiple
asynchronous requests, one
depending on other, how would
be do that? This is where
chaining comes in
What is Chaining?
• Sometimes we need to call multiple
asynchronous requests, then after the
first Promise is resolved (or rejected), a
new process will start to which we can
attach it directly by a method called
chaining.
• So we create another promise called
helloPromise
• We chain this promise to our earlier
“myFirstPromise” operation like so:
Async/Await
• Let’s do something even prettier than
Promises
• Await is basically syntactic sugar for Promises.
It makes your asynchronous code look more
like synchronous/procedural code, which is
easier for humans to understand.
• You can see that we use the “async” keyword
for the wrapper function printMyAsync. This
lets JavaScript know that we are using
async/await syntax, and is necessary if you
want to use Await. This means you can’t use
Await at the global level. It always needs a
wrapper function. Or we can say await is only
used with an async function.
Async/Await
• The await keyword is used in an async
function to ensure that all promises
returned in the async function are
synchronized, ie. they wait for each other.
Await eliminates the use of callbacks
in .then() and .catch(). In using async and
await, async is prepended when returning a
promise, await is prepended when calling a
promise. try and catch are also used to get
the rejection value of an async function.
• Let's take an example to understand the
Async and Await with our demoPromise:
Get Started with Express
• Lets learn express, the de facto standard server const express = require('express')
framework for Node.js.
const app = express()
• First create a directory named myapp, change to
it and run npm init. Then install express as a const port = 3000
dependency.
(https://expressjs.com/en/starter/installing.html)
app.get('/', (req, res) => {
• Since we already know Nodejs now, lets start a
server using express res.send('Hello World!')
• This app starts a server and listens on port 3000 })
for connections. The app responds with “Hello
World!” for requests to the root URL (/) or route.
For every other path, it will respond with a 404 app.listen(port, () => {
Not Found.
console.log(`Example app listening at
• We have written a Hello World app rightaway. http://localhost:${port}`)
})
Express application generator
• Use the application generator tool, express-generator, to quickly
create an application skeleton.
• npm install -g express-generator
• For example, the following creates an Express app named myapp. The
app will be created in a folder named myapp in the current working
directory and the view engine will be set to pug
• Then install dependencies, (cd myapp && npm install)
Basic routing
• Routing refers to determining how an application responds to a client
request to a particular endpoint, which is a URI (or path) and a specific
HTTP request method (GET, POST, PUT, DELETE etc.).
• Let’s understand a simple route:
• app.get(‘/user', function (req, res) { res.send('Hello World!') })
• It is defined in following structure: app.METHOD(PATH, HANDLER)
• METHOD refers to http method (GET, POST etc.), in above case it’s “get”
• PATH refers to the API route, in above case it’s “rootURL/user” OR
http://loaclhost:3000/user in particular
• HANDLER is the function invoked when this API url is called, in above case
function (req, res) { res.send('Hello World!’) } , a simple function which will
response with Hello World
Serving static files in Express
• To serve static files such as images, CSS files, and JavaScript files, use
the express.static built-in middleware function in Express, the function
signature is:
• express.static(root, [options])
• The root argument specifies the root directory from which to serve static
assets. For more information on the options argument, see express.static.
• For in detail understanding how it works, see:
• https://expressjs.com/en/starter/static-files.html 
Let’s get started with mongoose
• Mongoose is an elegant MongoDB object modelling for Node.js. It
provides an Object Data Modeling (ODM) environment that wraps the
Node.js native driver. It makes it easier to use MongoDB with Nodejs.
• To setup mongoDB on your local machine, follow this guide:
• Windows:
https://docs.mongodb.com/manual/tutorial/install-mongodb-on-windows/
• Linux (Ubuntu):
https://docs.mongodb.com/manual/tutorial/install-mongodb-on-ubuntu/
Let’s connect the mongodb with our server
• Install mongoose in your project
using:
• npm i mongoose –save
• Import mongoose, create DB
connection, create your schema,
intiailize new model with the defined
schema
• For more on schemas and models:
• https://mongoosejs.com/docs/guide.h
tml
• https://mongoosejs.com/docs/
models.html
const mongoose = require("mongoose"); //import
mongoose
mongoose.connect(“mongodb://localhost:27017/mydb”,
{useNewUrlParser: true}); //create DB connection
//initialize schema
const Schema = mongoose.Schema;
const UserSchema = new Schema({
name: String,
email: String
}); //created a new schema
//create your model
const UserModel = mongoose.model(”User", UserSchema);
Let’s create REST APIs now
• Lets create REST APIs now, and app.get("/users", async (req, res) => {
interact with database try {
• Here is a simple GET API, const users = await UserModel.find();
http://localhost:3000/users
• It will interact with db, and return all res.status(200).json({
records from Users collection users: users
});
} catch (error) {
return error;
}
});
Continue with REST APIs
• Lets add some record to our Users collection
• For this we have to create a POST API, that accepts a json body and
create a record based on given parameters.
• To do this we have add a middleware to parse request body into a
JSON format, like this:
• app.use(express.json());
Continue with REST APIs
• Lets write some code to insert new app.post("/user", async (req, res) => {
record now try {
• A POST API with URL const user = await UserModel.create(req.body);
http://localhost:3000/user res.status(201).json({
• Run a cURL request to test this: user
curl --location --request POST });
'http://localhost:3000/user' \ } catch (error) {
--header 'Content-Type: application/json' \ return error;
--data-raw '{ }
"email":”test@test.com", });
”name":”test"
}'
You’re Done
• You’ve created a two APIs, 1 POST and 1 GET
• Records you insert using POST api, should be returned when you call
GET API
Authorization
• Authorization is an essential part when working with APIs, you have to
protect your APIs so only authorized users can make the call and get
only data that they need.
• There are several ways to do this, we’ll jump right into JWT (JSON Web
Tokens).
• It’s a very simple yet effective method of auhorizing the API calls
Express JWT
• Lets learn about express-jwt module, it provides Express middleware
for validating JWTs.
• All you need to define is a secret key and an algorithm (from a pre-
defined list)
• Lets go through the readme file of express-jwt for further information
and code samples:
• https://github.com/auth0/express-jwt/blob/master/README.md
Great, We are done with Node.js!
Let’s think about frontend
Get Started With ReactJS
Getting Started with ReactJS
• JSX is the first thing we need to know before
we can start
• JSX is a syntax extension of JavaScript. It’s used
to create DOM elements which are then
rendered in the React DOM.
• A JavaScript file containing JSX will have to be
compiled before it reaches a web browser. The
code block shows some example JavaScript
code that will need to be compiled.
JSX
• Nested JSX elements
• In order for the code to compile,
a JSX expression must have
exactly one outermost element.
In the below block of code
the <a> tag is the outermost
element.
JSX
• In the block of code we see the
similarities between JSX syntax
and HTML: they both use the
angle bracket opening and
closing tags (<h1> and </h1>).
• When used in a React
component, JSX will be rendered
as HTML in the browser.
JSX
• JSX Attributes
• The syntax of JSX attributes
closely resembles that of HTML
attributes. In the block of code,
inside of the opening tag of
the <h1> JSX element, we see
an id attribute with the
value "example"
ReactDOM JavaScript library
• The JavaScript library react-dom,
sometimes called ReactDOM, renders
JSX elements to the DOM by taking a
JSX expression, creating a
corresponding tree of DOM nodes, and
adding that tree to the DOM.
• The code example begins
with ReactDOM.render(). The first
argument is the JSX expression to be
compiled and rendered and the second
argument is the HTML element we
want to append it to.
Embedding JavaScript in JSX
• JavaScript expressions may be embedded
within JSX expressions. The embedded
JavaScript expression must be wrapped in
curly braces.
• In the provided example, we are
embedding the JavaScript expression 10 *
10 within the <h1> tag. When this JSX
expression is rendered to the DOM, the
embedded JavaScript expression is
evaluated and rendered as 100 as the
content of the <h1> tag.
The Virtual Dom
• React uses Virtual DOM, which can be thought of as a blueprint of the
DOM. When any changes are made to React elements, the Virtual
DOM is updated. The Virtual DOM finds the differences between it and
the DOM and re-renders only the elements in the DOM that changed.
This makes the Virtual DOM faster and more efficient than updating
the entire DOM.
React Components
• A React component is a reusable
piece of code used to define the
appearance, behaviour, and state of a
portion of a web app’s interface.
Components are defined as functions
or as classes. Using the component as
a factory, an infinite number of
component instances can be created.
• Class components are not used now,
functional components have taken
the place instead, we’ll learn why in
upcoming topics
React Components
• React requires that the first letter
of components be capitalized. JSX
will use this capitalization to tell
the difference between an HTML
tag and a component instance. If
the first letter of a name is
capitalized, then JSX knows it’s a
component instance; if not, then
it’s an HTML element.
Composing Components
• Components can refer to other
components in their output. This
lets us use the same component
abstraction for any level of detail.
A button, a form, a dialog, a
screen: in React apps, all those
are commonly expressed as
components.
• For example, we can create
an App component that
renders Welcome many times:
React Props
• React Props are like function
arguments in
JavaScript and attributes in
HTML.
• To send props into a component,
use the same syntax as HTML
attributes:
• The Car component receives the
argument as a props object:
React Events
• Just like HTML DOM events,
React can perform actions based
on user events.
• React has the same events as
HTML: click, change, mouseover
etc.
• React events are written in
camelCase syntax:
• E.g: onClick instead of onclick
React Events
• Example
• Put the shoot function inside
the Football component:
React Conditional Rendering
• In React, you can conditionally
render components.
• There are several ways to do this.
• if Statement
• We can use the if JavaScript
operator to decide which
component to render.
React Conditional Rendering
• Logical && Operator
• Another way to conditionally
render a React component is by
using the && operator.
• We can embed JavaScript
expressions in JSX by using curly
braces
React Lists
• In React, you will render lists with
some type of loop.
• The JavaScript map() array
method is generally the preferred
method.
• Let's render all of the cars from
our garage
React Router
• Create React App doesn't include page routing.
• React Router is the most popular solution.
• To add React Router in your application, run this in the terminal from
the root directory of the application:
• npm i -D react-router-dom
Routing - Folder Structure
• To create an application with multiple page routes, let's first start with
the file structure.
• Within the src folder, we'll create a folder named pages with several files:
• src\pages\
• Layout.js
• Home.js
• Blogs.js
• Contact.js
• NoPage.js
• Each file will contain a very basic React component.
Routing - Folder Structure
• Now we will use our Router in
our index.js file
• Explanation on next slide
index.js explained
• We wrap our content first with <BrowserRouter>.
• Then we define our <Routes>. An application can have multiple <Routes>. Our basic
example only uses one.
• <Routes> can be nested. The first <Route> has a path of / and renders
the Layout component.
• The nested <Routes> inherit and add to the parent route. So the blogs path is
combined with the parent and becomes /blogs.
• The Home component route does not have a path but has an index attribute. That
specifies this route as the default route for the parent route, which is /.
• Setting the path to * will act as a catch-all for any undefined URLs. This is great for a
404 error page.
Pages / Components
• The Layout component has <Outlet> and <Link> elements.
• The <Outlet> renders the current route selected.
• <Link> is used to set the URL and keep track of browsing history.
• Anytime we link to an internal path, we will use <Link> instead of <a
href="">.
• The "layout route" is a shared component that inserts common
content on all pages, such as a navigation menu.
Layout.js
Home.js:
Blogs.js:
Contact.js:
NoPage.js:
React Memo
• Using memo will cause React to skip rendering a component if its
props have not changed.
• This can improve performance.
React Memo
• Use memo to keep
the Todos component from
needlessly re-rendering.
• Wrap the Todos component
export in memo
React Hooks
• Hooks allow us to "hook" into
React features such as state and
lifecycle methods.
• There are 3 rules for hooks:
• Hooks can only be called inside
React function components.
• Hooks can only be called at the top
level of a component.
• Hooks cannot be conditional
React useState Hook
• The React useState Hook allows
us to track state in a function
component.
• State generally refers to data or
properites that need to be
tracking in an application.
• To use the useState Hook, we
first need to import it into our
component.
React useState Hook
• We initialize our state by
calling useState in our function
component.
• useState accepts an initial state
and returns two values:
• The current state.
• A function that updates the state.
React useState Hook
• We initialize our state by
calling useState in our function
component.
• useState accepts an initial state
and returns two values:
• The current state.
• A function that updates the state.
React useState Hook
• Read State
• We can now include our state
anywhere in our component.
React useState Hook
• Update State
• To update our state, we use our
state updater function.
React useEffect Hooks
• The useEffect Hook allows you to
perform side effects in your
components.
• Some examples of side effects are:
fetching data, directly updating the
DOM, and timers.
• useEffect accepts two arguments. The
second argument is optional.
• useEffect(<function>, <dependency>)
React useEffect Hooks
• But wait!! I keeps counting even though it
should only count once!
• useEffect runs on every render. That means
that when the count changes, a render
happens, which then triggers another
effect.
• This is not what we want. There are several
ways to control when side effects run.
• We should always include the second
parameter which accepts an array. We can
optionally pass dependencies
to useEffect in this array.
React useEffect Hooks
• So, to fix this issue, let's only run
this effect on the initial render.
React useEffect Hooks
• Here is an example of
a useEffect Hook that is
dependent on a variable. If
the count variable updates, the
effect will run again
React useContext Hook
• React Context is a way to manage
state globally.
• It can be used together with
the useState Hook to share state
between deeply nested
components more easily than
with useState alone.
• To create context, you must
Import createContext and
initialize it
React useContext Hook
• Context Provider
• Wrap child components in the
Context Provider and supply the
state value.
• Now, all components in this tree
will have access to the user
Context.
React useContext Hook
• In order to use the Context in a
child component, we need to
access it using
the useContext Hook.
• First, include the useContext in
the import statement
React useRef Hook
• The useRef Hook allows you to persist values between renders.
• It can be used to store a mutable value that does not cause a re-
render when updated.
• It can be used to access a DOM element directly.
React useRef Hook
• If we tried to count how many
times our application renders
using the useState Hook, we
would be caught in an infinite
loop since this Hook itself causes
a re-render.
• To avoid this, we can use
the useRef Hook.
React useRef Hook
• useRef() only returns one item. It returns
an Object called current.
• When we initialize useRef we set the initial
value: useRef(0)
• .
React useRef Hook
• In general, we want to let React handle all
DOM manipulation.
• But there are some instances
where useRef can be used without causing
issues.
• In React, we can add a ref attribute to an
element to access it directly in the DOM
React useReducer Hook
• The useReducer Hook is similar to the useState Hook.
• It allows for custom state logic.
• If you find yourself keeping track of multiple pieces of state that rely on complex
logic, useReducer may be useful.
• The useReducer Hook accepts two arguments.
• useReducer(<reducer>, <initialState>)
React useReducer Hook
• The reducer function contains your
custom state logic and
the initialStatecan be a simple value
but generally will contain an object.
• The useReducer Hook returns the
current stateand a dispatchmethod.
• Here is an example of useReducer in a
counter app: (the example is broken on
two pages, see next slide for more
code)
React useReducer Hook
• This is just the logic to keep track
of the todo complete status.
• All of the logic to add, delete, and
complete a todo could be
contained within a
single useReducer Hook by
adding more actions.
React useCallback Hook
• The React useCallback Hook returns a memoized callback function.
• Think of memoization as caching a value so that it does not need to be
recalculated.
• This allows us to isolate resource intensive functions so that they will
not automatically run on every render.
• The useCallback Hook only runs when one of its dependencies update.
• This can improve performance.
React useCallback Hook
•  We can use the useCallback hook
to prevent the function from being
recreated unless necessary.
• Use the useCallback Hook to
prevent the Todos component from
re-rendering needlessly
React useMemo Hook
• The React useMemo Hook returns a memoized value.
• The useMemo and useCallback Hooks are similar. The main difference is
that useMemo returns a memoized value and useCallback returns a memoized
function.
• The useMemo Hook can be used to keep expensive, resource intensive functions
from needlessly running.
• In this example, we have an expensive function that runs on every render.
• When changing the count or adding a todo, you will notice a delay in execution.
React useMemo Hook
• Example:
• A poor performing function.
The expensiveCalculation function
runs on every render
• To fix this performance issue, we can
use the useMemo Hook to memorize
the expensiveCalculation function.
This will cause the function to only run
when needed.
React useMemo Hook
• We can wrap the expensive function
call with useMemo.
• The useMemoHook accepts a second
parameter to declare dependencies.
The expensive function will only run
when its dependencies have changed.
• In the following example, the
expensive function will only run
when count is changed and not when
todo's are added.
 We’re done!
You now know Mongo, Express, React & Node ..
Welcome to the MERN Stack ☺