Unit 1 – Javascript and
Basics of MERN stack
V. Lathika
AP/CSE
U19CS602 / U19CSD603 - Full Stack Development
VI Sem 2024 - 2025
Unit 1 – Javascript and Basics of
MERN Stack
JavaScript Fundamentals – Objects – Generators,
advanced iteration – modules – DOM tree – Node
properties – browser events – Event delegation – UI
Events – Forms, controls – Document and resource
loading – Mutation observer – Event loop: micro-tasks
and macro-tasks – MERN Components – React – Node.js –
Express – MongoDB – Need for MERN – Server – Less
Hello World – Server Setup – nvm – Node.js - npm
Full Stack Web development
• Full stack web development encompasses the entire process
of building a web application, from the user interface (UI) that
users interact with to the server-side logic that powers the
application behind the scenes.
• Unlike front-end developers who focus solely on the user
experience and back-end developers who concentrate on the
server-side functionality, a full-stack developer possesses a
versatile skillset that bridges both worlds.
• Here’s a breakdown of the two key components full-stack web
development
• Front-End Development
• Back-End Development
Front End Development
• This refers to everything a user sees and interacts with
on a website or application. It involves:
• HTML: The building blocks of web pages, defining the
structure and content.
• CSS: Responsible for styling the visual elements of a web
page, controlling layout, colors, fonts, and animations.
• JavaScript: Adds interactivity and dynamic behaviour to web
pages, making them more engaging for users.
• Front-End Frameworks: Libraries like React, Angular, or Vue.js
can streamline front-end development by providing reusable
components and pre-written code.
Back-End Development
• The back-end is the engine that powers the application,
handling tasks unseen by the user. These skills ensure
everything runs smoothly behind the scenes:
• Server-Side Programming Languages: Languages like Node.js,
Python, Java, or PHP are used to write the code that executes on
the server. This code handles tasks like user authentication, data
processing, and business logic.
• APIs (Application Programming Interfaces): APIs allow different
parts of an application or external services to communicate with
each other. Understanding APIs is crucial for integrating various
functionalities.
• Web Frameworks: Back-end frameworks like Django (Python) or
Spring (Java) can accelerate development by providing pre-built
structures and functionalities.
Types of Full stack
• MERN Stack (MongoDB, Express.js, React, Node.js)
• MEAN Stack (MongoDB, Express.js, Angular, Node.js)
• LAMP Stack (Linux, Apache, MySQL, PHP/Python/Perl)
• MEVN Stack (MongoDB, Express.js, Vue.js, Node.js)
Ref : https://medium.com/design-bootcamp/understanding-different-full-
stack-stacks-a-comprehensive-guide-b43d3c91b29b
MERN Stack (MongoDB, Express.js,
React, Node.js)
• The MERN stack represents a dynamic quartet of
technologies — MongoDB, Express.js, React, and
Node.js — that together drive the creation of modern,
responsive, and feature-rich web applications.
• Each component of the MERN stack contributes a
distinct role in the development process, harmonizing to
deliver seamless user experiences.
MERN components
MongoDB
• MongoDB is a NoSQL database where each record is a document
comprising of key-value pairs that are similar to JSON (JavaScript
Object Notation) objects.
• MongoDB is flexible and allows its users to create schema,
databases, tables, etc.
• Documents that are identifiable by a primary key make up the
basic unit of MongoDB.
• Once MongoDB is installed, users can make use of Mongo shell as
well.
• Mongo shell provides a JavaScript interface through which the
users can interact and carry out operations (eg: querying,
updating records, deleting records).
What is JSON?
JSON file
• JSON (JavaScript Object Notation) is a text-
based format for storing and exchanging
data.
• It's a standard data interchange format
that's easy to read and write for both
humans and machines.
• JSON is built from one or more keys and
values.
• Keys are any string.
• Values can be strings, numbers, arrays,
additional objects, or the literals, false, true,
and null.
• JSON is compact and easy to parse in web
browsers.
Express.js and Node.js server tier
• Express.js is a lightweight backend framework for
Node.js, simplifying the creation of robust APIs and
server-side applications.
• It provides essential tools to manage routes, handle
middleware, and interact with databases.
• Express.js offers common middleware used by HTTP
servers for tasks such as caching, content negotiation,
cookie handling, handling cross-origin requests,
redirecting, and much more.
Express: Back-End Framework
• Express is a Node.js framework.
• Rather than writing the code using Node.js and creating
loads of Node modules, Express makes it simpler and
easier to write the back-end code.
• Express helps in designing great web applications and
APIs.
• Express supports many middlewares which makes the
code shorter and easier to write.
React: Front-End Library
• React is a JavaScript library that is used for building user
interfaces.
• React is used for the development of single-page
applications and mobile applications because of its
ability to handle rapidly changing data.
• React allows users to code in JavaScript and create UI
components.
• React lets you build complex interfaces through simple
components, connect them to data on your back-end
server, and render them as HTML.
React: Front-End Library
• It is just a JavaScript library developed by Facebook to solve
problems we could not solve earlier using other libraries while
building web and mobile applications.
• React is also used for making a grip over the view layer for mobile
and web applications.
• It allows us to create reusable UI ( User Interface ) components.
• It was first created by software engineer Jordan Walke, who works
for Facebook.
• React was first deployed in the Facebook news feed.
• It allows developers to create large web applications that can easily
change the data of the page even without reloading the page.
• The main objective of reacting is that it only works on user
interfaces in the application, whether mobile or web.
Node.js
• Node.js is a server-side runtime environment that allows
developers to execute JavaScript code outside of a browser.
• It’s highly efficient for building scalable network applications
and APIs.
• A Node.js app runs in a single process, without creating a
new thread for every request.
• Node.js provides a set of asynchronous I/O primitives in its
standard library that prevent JavaScript code from blocking
and generally, libraries in Node.js are written using non-
blocking paradigms, making blocking behavior the exception
rather than the norm.
How MERN stack works?
• When working with MERN
stack, developers create
implement
• View layer using React,
• Express and Node to
implement the application
layer of the website then
• MongoDB is used to
implement the database
layer.
How they work together?
• Backend Development: Express.js, running on Node.js, forms the
backbone of the application’s server-side logic. It handles requests,
routes, middleware, and interacts with the MongoDB database.
• Frontend Development: React takes the lead in crafting the user
interface. It creates reusable components that manage their state
and efficiently update the UI via the virtual DOM.
• Data Management: MongoDB serves as the data repository, with
Express.js facilitating communication between the database and
frontend. Data flows seamlessly between components.
• Seamless Integration: Node.js orchestrates the backend and
frontend, enabling a unified, full-stack application experience.
Need for MERN Stack
• This stack provides an end-to-end framework for the
developers to work in and each of these technologies
play a big part in the development of web applications.
• It is ideally suited for web applications that have a large
amount of interactivity built into the front-end.
Unit 1 – Javascript and Basics of
MERN Stack
JavaScript Fundamentals – Objects – Generators,
advanced iteration – modules – DOM tree – Node
properties – browser events – Event delegation – UI
Events – Forms, controls – Document and resource
loading – Mutation observer – Event loop: micro-tasks
and macro-tasks – MERN Components – React – Node.js –
Express – MongoDB – Need for MERN – Server – Less
Hello World – Server Setup – nvm – Node.js - npm
Server – Less Hello World
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Pro MERN Stack</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-
dom.development.js"></script>
</head>
<body>
<div id="contents"></div>
<script>
const element = React.createElement('div', { title: 'Outer div' },
React.createElement('h1', null, 'Hello World!')
);
ReactDOM.render(element, document.getElementById('contents'));
</script>
</body>
</html>
React library
• The React library is available as a JavaScript file that we can include
in the HTML file using the <script> tag.
• It comes in two parts:
• The first is the React core module, the one that is responsible for
dealing with React components, their state manipulation, etc.
React: https://unpkg.com/react@16/umd/react.development.js
• The second is the ReactDOM module, which deals with converting
React components to a DOM that a browser can understand.
ReactDOM: https://unpkg.com/react-dom@16/umd/react-
dom.development.js
React element
• To create the React element, the createElement()
function of the React module needs to be called.
• This is quite similar to the JavaScript
document.createElement() function but has an
additional feature that allows nesting of elements. The
function takes up to three arguments and its prototype
is as follows:
React.createElement(type, [props], [...children])
• Example
const element = React.createElement('div', {title:
'Outer div'},
Rendering react element
• React.createElement() resides in the JavaScript engine’s
memory as a deeply nested set of React elements, also
JavaScript objects.
• A React element contains not just the details of what DOM
elements need to be created, but also some additional
information about the tree that helps in optimization.
• Each of these React elements needs to be transferred to the real
DOM for the user interface to be constructed on screen.
• The ReactDOM does this when the ReactDOM.render() function
is called. This function takes in as arguments the element that
needs to be rendered and the DOM element that it needs to be
placed under.
ReactDOM.render(element,
document.getElementById('content'));
What is JSX?
JSX
• JSX stands for JavaScript XML, and it's a syntax extension for
JavaScript that allows users to write HTML-like markup in JavaScript
files.
• It's used in the React JavaScript library.
const element = <h1>Hello, world!</h1>;
• To render a React element, first pass the DOM element to
ReactDOM.createRoot(), then pass the React element to root.render()
const root = ReactDOM.createRoot(
document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);
function Video({ video }) {
jsx - extension of return (
javascript <div>
<Thumbnail
• React lets you build video={video} />
user interfaces out of <a href={video.url}>
individual pieces <h3>{video.title}</h3>
called components.
• Create your own <p>{video.description}</p>
React components </a>
like Thumbnail, <LikeButton
LikeButton, and Video.
Then combine them video={video} />
into entire screens, </div>
pages, and apps. );
}
Unit 1 – Javascript and Basics of
MERN Stack
JavaScript Fundamentals – Objects – Generators,
advanced iteration – modules – DOM tree – Node
properties – browser events – Event delegation – UI
Events – Forms, controls – Document and resource
loading – Mutation observer – Event loop: micro-tasks
and macro-tasks – MERN Components – React – Node.js –
Express – MongoDB – Need for MERN – Server – Less
Hello World – Server Setup – nvm – Node.js - npm
Server setup
Setup JavaScript Environment for
Web development
• Requirements
• Visual Studio Code (may use any editor)
• Node.js
• NPM (it’s a package manager which
comes with Node.js)
Install Node.js
1. https://nodejs.org/en/download/
2. According to your platform (Windows, Mac, or Linux) and bit
(32 or 64), you can download node.js installer.
3. After download of the installer is completed, install Node.js on
your computer.
4. Verify Installation of Node.js and NPM
5. Go to command prompt.
1. Type node -v command and press Enter. You should get a node.js
version.
2. Type npm -v command and press Enter. You should get a NPM version.
6. Install VS code https://code.visualstudio.com/
nvm
• Node Version Manager - tool makes installation and
switching between multiple versions of Node.js easy.
• Different projects on your device may be using different
versions of Node.
• Using only one version (the one installed by npm) for
these different projects may not give you accurate
execution results.
npm
• npm stands for Node Package Manager.
• npm is installed with Node.js
• It's a library and registry for JavaScript software
packages.
• npm also has command-line tools to help you install the
different packages and manage their dependencies.
• Node.js is a runtime environment that allows you to run
JavaScript on the backend.
• A runtime environment is like a small operating system.
It provides all the functionality needed for a program to
run Ref :
https://careerfoundry.com/en/blog/web-development/what-is-npm/#:~:text=npm
%20stands%20for%20Node%20Package,packages%20and%20manage%20their
%20dependencies.
package.json
• A package.json file is created by your package
manager (in this case npm) and exists at the
root of a project in JavaScript/Node.
• To generate a package.json file you can run
npm init.
• You’ll then be asked to fill out some metadata
for your project such as:
• Name – your project’s name
• Version – current version in major.minor.patch
format (1.0.0, 1.2.3, etc.)
• Description – description of the project
• License – the license your project is under, so
people know how they are allowed to use it. Full
list of licenses on the Software License Data
Exchange site.
npm scripts
• In the package.json file there is also a scripts property.
• This can be used to run command line tools that are
installed within the project’s local context.
• Common scripts you might use are things like:
• npm test—to run your tests
• npm build—to build your project
• npm start—to run your project locally
