BIS601 | FULLSTACK DEVELOPMENT | SEARCH CREATORS.

s
Visvesvaraya Technological University (VTU)

or
Subject Code: BIS601

at
Subject: FullStack Development

re
Created By:

Hanumanthu
C
h

Dedicated To.
c

All Engineering Students

ar
Se

📺 YouTube: https://www.youtube.com/@searchcreators7348
📸 Instagram : https://www.instagram.com/searchcreators/
📱 Telegram: https://t.me/SearchCreators
💬 WhatsApp:+917348878215

Search Creators... Page 1

 BIS601 | FULLSTACK DEVELOPMENT | SEARCH CREATORS.

Module-03

Introduction to MERN

s
MERN is a full-stack JavaScript solution for developing web applications,

or
meaning both the client-side (React) and server-side (Node.js, Express) are written
in JavaScript, simplifying the development process. The rise of MERN is linked to

at
the trend of building Single Page Applications (SPAs), where data is dynamically
loaded without reloading the entire page. React is a key part of this as it allows for
dynamic updates to the user interface. MongoDB and Express work together to
handle data and server-side logic.
re
The MERN stack is a popular collection of technologies used to build modern web
C
applications. MERN stands for:

1. MongoDB: A NoSQL database that stores data in a flexible, JSON-like

h

format, making it ideal for applications that require scalable and flexible
data storage.
c

2. Express.js: A minimal and flexible Node.js web application framework that

ar

simplifies server-side development by providing essential features like

routing and middleware to handle HTTP requests.
3. React: A JavaScript library for building user interfaces. Unlike full-fledged
Se

frameworks like Angular, React focuses on the "view" part of the MVC
(Model-View-Controller) architecture. It allows developers to create
interactive and dynamic user interfaces by breaking them down into reusable
components.

Search Creators... Page 2

 BIS601 | FULLSTACK DEVELOPMENT | SEARCH CREATORS.

4. Node.js: A JavaScript runtime built on Chrome’s V8 JavaScript engine. It

allows developers to run JavaScript on the server-side, enabling full-stack
JavaScript development (both client and server-side).

MERN Components

s
or
at
re
C
The MERN stack consists of four core components that work together to create
modern web applications. Here are the key components in detail:
h

1. MongoDB (Database)
c

• Type: NoSQL database.

ar

• Role: Stores data in flexible, JSON-like documents (BSON format).

• Why MongoDB?
o It's scalable, fast, and schema-less, allowing dynamic data models.
o Works well with JavaScript and JSON data structures.
Se

o MongoDB is often used in situations where the data doesn't fit neatly
into tables, making it perfect for modern web apps with varied or
complex data.

Search Creators... Page 3

 BIS601 | FULLSTACK DEVELOPMENT | SEARCH CREATORS.

2. Express.js (Backend Framework)

• Type: Web application framework for Node.js.

• Role: Handles HTTP requests, routing, and middleware.

s
• Why Express.js?
o Simplifies the setup and creation of server-side applications.

or
o Manages API endpoints, sessions, cookies, authentication, and other
web server-related functionality.
o It acts as a middleware to interact with databases and the front-end
efficiently.

at
3. React.js (Frontend Library)

•
•

•
re
Type: Frontend JavaScript library for building user interfaces.
Role: Renders dynamic and interactive UIs by breaking down the UI into
reusable components.
Why React?
C
o Component-based structure allows for modular and maintainable
code.
o Virtual DOM for optimized performance and minimal UI updates.
h

o React is declarative, meaning you describe what the UI should look

like, and React takes care of updates when data changes.
o It’s commonly used to build Single Page Applications (SPAs).
c

4. Node.js (JavaScript Runtime)

ar

• Type: JavaScript runtime environment.

• Role: Runs JavaScript code server-side, enabling you to use JavaScript for
Se

both front-end and back-end code.

• Why Node.js?
o Asynchronous, non-blocking, and event-driven, making it well-suited
for real-time applications and high-performance tasks.
o Runs JavaScript code outside the browser, which helps unify
development for both front-end and back-end teams.

Search Creators... Page 4

 BIS601 | FULLSTACK DEVELOPMENT | SEARCH CREATORS.

o The npm package manager makes it easy to integrate third-party

libraries.

Server-Less Hello World

s
or
The Server-less Hello World is a simple example of how to use React and
ReactDOM in a single HTML file to render a "Hello World!" message, all without
the need for a server or complex setup.

at
Here’s the process:

1. HTML Structure:

re
You begin with a basic HTML file that includes the essential tags like
<html>, <head>, and <body>.
C
2. Including React Libraries:
In the <head> section, you include React and ReactDOM using <script> tags
pointing to CDN URLs:
h

o React: Manages the creation and handling of components and their

c

states.
o ReactDOM: Converts React components into actual DOM elements
ar

that can be rendered in the browser.

3. Creating the React Element:
Se

o Inside the <body>, you create a div element with an id="content",

which will later hold your React components.
o Using React.createElement(), you define a React element. In this case,
a div with a title attribute containing an h1 heading with the text
"Hello World!".

Search Creators... Page 5

 BIS601 | FULLSTACK DEVELOPMENT | SEARCH CREATORS.

4. Rendering the Element:

o Finally, you use ReactDOM.render() to render the React element
inside the div with the ID content in the HTML page.
5. Result:

s
When opened in a modern browser, this file will display the message "Hello
World!" inside a div element, and you can hover over the div to see the

or
tooltip showing its title.

at
Listing 2-1. index.html: Server-less Hello World

re
C
c h
ar
Se

Search Creators... Page 6

 BIS601 | FULLSTACK DEVELOPMENT | SEARCH CREATORS.

You can test this file by opening it in a browser. It may take a few seconds to load
the React libraries, but soon enough, you should see the browser displaying the
caption, as seen in Figure 2-1. You should also be able to hover over the text or
anywhere to its right side within the boundaries of the outer div, and you should be

s
able to see the tooltip “Outer div” pop up

or
at
re
C
c h

React Components :
ar

Issue Tracker

I’m sure that most of you are familiar with GitHub Issues or Jira. These
Se

applications help you create a bunch of issues or bugs, assign them to people, and
track their statuses. These are essentially CRUD applications (Create, Read,
Update, and Delete a record in a database) that manage a list of objects or entities.
The CRUD pattern is so useful because pretty much all enterprise applications are
built around the CRUD pattern on different entities or objects. In the case of the

Search Creators... Page 7

 BIS601 | FULLSTACK DEVELOPMENT | SEARCH CREATORS.

Issue Tracker, we’ll only deal with a single object or record, because that’s good
enough to depict the pattern. Once you grasp the fundamentals of how to
implement the CRUD pattern in MERN, you’ll be able to replicate the pattern and
create a real-life application.

s
Here’s the requirement list for the Issue Tracker application, a simplified or toned-

or
down version of GitHub Issues or Jira

• The user should be able to view a list of issues, with an ability to filter the

at
list by various parameters.
• The user should be able to add new issues, by supplying the initial values of
the issue’s fields

re
• The user should be able to edit and update an issue by changing its field
values.
C
• The user should be able delete an issue.

An issue should have following attributes:

• A title that summarizes the issue (freeform long text)

h

• An owner to whom the issue is assigned (freeform short text)

c

• A status indicator (a list of possible status values)

ar

• Creation date (a date, automatically assigned)

• Effort required to address the issue (number of days, a number)
• Estimated completion date or due date (a date, optional)
Se

React Classes

Search Creators... Page 8

 BIS601 | FULLSTACK DEVELOPMENT | SEARCH CREATORS.

In React, class components are a fundamental way to create reusable UI elements.

These classes are built by extending React. Component, which provides essential
functionality such as state management and lifecycle methods.

Key Features of React Classes

s
1. Extends React.Component – Every class component must extend

or
React.Component to inherit its capabilities.
2. Render Method – The render() function is mandatory and must return a

at
JSX element that React will display in the UI.
3. State Management – Class components can hold and update state using
this.state.

re
4. Lifecycle Methods – Special methods like componentDidMount(),
componentDidUpdate(), and componentWillUnmount() allow control over
C
different stages of the component’s existence.
h

Let’s change the Hello World example from a simple element to use a React class
called HelloWorld, extended from React.Component:
c
ar
Se

Now, within this class, a render() method is needed, which should return an
element. We’ll use the same JSX with the message as the returned element.

Search Creators... Page 9

 BIS601 | FULLSTACK DEVELOPMENT | SEARCH CREATORS.

s
or
Let’s also move all the code for message construction to within the render()
function so that it remains encapsulated within the scope where it is needed rather

at
than polluting the global namespace

re
C
h

In essence, the JSX element is now returned from the render() method of the
component class called Hello World. The brackets around the JSX representation
c

of the Hello World element are not necessary, but it is a convention that is
normally used to make the code more readable, especially when the JSX spans
multiple lines. Just as an instance of a div element was created using JSX of the
ar

form
, an instance of the HelloWorld class can be created like this:
Se

Now, this element can be used in place of the

element to render inside the node called contents, as before. It’s worth noting here
that div and h1 are built-in internal React components or elements that could be

Search Creators... Page 10

 BIS601 | FULLSTACK DEVELOPMENT | SEARCH CREATORS.

directly instantiated. Whereas HelloWorld is something that we defined and later

instantiated. And within HelloWorld, we used React’s built-in div component. The
new, changed App.jsx is shown in Listing 3-1. In the future, I may use component
and component class interchangeably, like sometimes we tend to do with classes
and objects. But it should be obvious by now that HelloWorld and div are actually
React component classes, whereas and

s
are tangible components or instances of the component class. Needless to say,
there is only one HelloWorld class, but many HelloWorld components can be

or
instantiated based on this class

at
re
C
c h
ar

Composing Components
Se

React allows building UI using both built-in and user-defined components.

Component composition helps break the UI into smaller, independent pieces,
making it easier to develop, understand, and maintain.A component takes inputs
(called properties) and its output is the rendered UI of the component. In this

Search Creators... Page 11

 BIS601 | FULLSTACK DEVELOPMENT | SEARCH CREATORS.

section, we will not use inputs, but put together fine-grained components to build a
larger UI. Here are a few things to remember when composing components:

s
• Larger components should be split into fine-grained components when there
is a logical separation possible between the fine-grained components. In this

or
section we’ll create logically separated components.
• When there is an opportunity for reuse, components can be built which take

at
in different inputs from different callers. When we build specialized widgets
for user inputs in Chapter 10, we will be creating reusable components.
• React’s philosophy prefers component composition in preference to

re
inheritance. For example, a specialization of an existing component can be
done by passing properties to the generic component rather than inheriting
C
from it. You can read more about this at
https://reactjs.org/docs/composition-vs-inheritance.html.
• In general, remember to keep coupling between components to a minimum
h

(coupling is where one component needs to know about the details of

another component, including parameters or properties passed between
c

them)
ar

Passing Data Using Properties:

Composing components without any variables is not so interesting. It should
Se

be possible to pass different input data from a parent component to a child

component and make it render differently on different instances. In the Issue
Tracker application, one such component that can be instantiated with
different inputs is a table-row showing an individual issue. Depending on the

Search Creators... Page 12

 BIS601 | FULLSTACK DEVELOPMENT | SEARCH CREATORS.

inputs (an issue), the row can display different data. The new structure of the
UI is shown in Figure 3-3

s
or
at
re
C
c h
ar
Se

Search Creators... Page 13

 BIS601 | FULLSTACK DEVELOPMENT | SEARCH CREATORS.

s
or
at
re
C
The easiest way to pass data to child components is using an attribute when
instantiating a component. We used the title attribute in the previous chapter, but
h

that was an attribute that affected the DOM element in the end. Any custom
attribute can also be passed in a similar manner like this from IssueTable:
c
ar

We used the name issue_title rather than simply title to avoid a confusion between
Se

this custom attribute and the HTML title attribute. Now, within the render()
method of the child, the attribute’s value can be accessed via a special object
variable called props, which is available via the this accessor. For example, this is

Search Creators... Page 14

 BIS601 | FULLSTACK DEVELOPMENT | SEARCH CREATORS.

how the value of issue_title can be displayed within a cell in the IssueRow
component:

s
or
In this case, we passed across a simple string. Other data types and even JavaScript
objects can be passed this way. Any JavaScript expression can be passed along, by

at
using curly braces ({}) instead of quotes, because the curly braces switches into the
JavaScript world. let’s pass the issue’s title (as a string), its ID (as a number), and
the row style (as an object) from IssueTable to IssueRow. Within the IssueRow

re
class, we’ll use these passed-in properties to display the ID and title and set the
style of the row, by accessing these properties through this.props. The code for the
C
complete IssueRow class is shown in Listing 3-3
c h
ar
Se

Search Creators... Page 15

 BIS601 | FULLSTACK DEVELOPMENT | SEARCH CREATORS.

A complete list of DOM elements and how attributes for these need to be specified

s
can be found in the React Documentation at https://reactjs.org/docs/dom-
elements.html. Now that we have an IssueRow component receiving the properties,

or
let’s pass them from the parent, IssueTable. The ID and the title are
straightforward, but the style we need to pass on has a special convention of

at
specification in React and JSX.

Let’s give the rows a silver border of one pixel and some padding, say four pixels.

re
The style object that would encapsulate this specification would be as follows:
C
h

This can be passed on to the IssueRow component using rowStyle={rowStyle}

c

when instantiating it. This, and the other variables, can be passed to IssueRow
ar

while instantiating it like this:

Se

Now, let’s construct the IssueTable component, which is essentially a

Search Creators... Page 16

 BIS601 | FULLSTACK DEVELOPMENT | SEARCH CREATORS.

, with a header row and two columns (ID and title), and two hard-coded IssueRow
components.
Let’s also specify an inline style for the table to indicate a collapsed border and
use the same rowStyle variable to specify the header row styles, to make it look
uniform. Listing 3-4 shows the modified IssueTable component class

s
or
at
re
C
c h
ar
Se

Search Creators... Page 17

 BIS601 | FULLSTACK DEVELOPMENT | SEARCH CREATORS.

s
or
at
re
C
c h

Passing Data Using Children

ar

• There is another way to pass data to other components, using the contents of
Se

the HTML-like node of the component.

• In the child component, this can be accessed using a special field of
this.props called this. props.children.
• Just like in regular HTML, React components can be nested.

Search Creators... Page 18

 BIS601 | FULLSTACK DEVELOPMENT | SEARCH CREATORS.

when the parent React component renders, the children are not automatically under
it because the structure of the parent React component needs to determine where
exactly the children will appear. So, React lets the parent component access the
children element using this.props.children and lets the parent component determine
where it needs to be displayed. This works great when one needs to wrap other

s
components within a parent component.

or
at
re
C
c h
ar
Se

Thus, instead of passing the issue title as a property to IssueRow, this technique
could be used to embed it as the child contents of like this:

Search Creators... Page 19

 BIS601 | FULLSTACK DEVELOPMENT | SEARCH CREATORS.

Now, within the render() method of IssueRow, instead of referring to

this.props.issue_title, it will need to be referred to as this.props.children, like this:

s
or
at
Let’s modify the application to use this method of passing data from IssueTable to
IssueRow. Let’s also pass in a nested title element as children, one that is a

re
and includes an emphasized piece of text. This change is shown in Listing 3-5
C
Listing 3-5. App.jsx: Using Children Instead of Prop
c h
ar
Se

Search Creators... Page 20

 BIS601 | FULLSTACK DEVELOPMENT | SEARCH CREATORS.

s
or
at
re
C
c h
ar
Se

Search Creators... Page 21

 BIS601 | FULLSTACK DEVELOPMENT | SEARCH CREATORS.

Dynamic Composition

• In this section, we’ll replace our hard-coded set of Issue Row components
with a programmatically generated set of components from an array of

s
issues.
• In later chapters we’ll get more sophisticated by fetching the list of issues

or
from a database, but for the moment, we’ll use a simple in-memory
JavaScript array to store a list of issues.
• Let’s also expand the scope of the issue from just an ID and a title to include

at
as many fields of an issue as we can. Listing 3-6 shows this in-memory
array, declared globally at the beginning of the file App.jsx.

re
• It has just two issues. The field due is left undefined in the first record, to
ensure that we handle the fact that this is an optional field.
C
c h
ar
Se

You can add more example issues, but two issues are enough to demonstrate
dynamic composition. Now, let’s modify the IssueTable class to use this array of
issues rather than the hard-coded list.

Search Creators... Page 22

 BIS601 | FULLSTACK DEVELOPMENT | SEARCH CREATORS.

Within the IssueTable class’ render() method, let’s iterate over the array of issues
and generate an array of IssueRows from it. The map() method of Array comes in
handy for doing this, as we can map an issue object to an IssueRow instance.

Also, instead of passing each field as a property, let’s pass the issue object itself

s
because there are many fields as part of the object.

or
This is one way to do it, in-place within the table’s body:

at
re
If you wanted to use a for loop instead of the map() method, you can’t do that
within the JSX, as JSX is not really a templating language. It only can allow
C
JavaScript expressions within the curly braces.

We’ll have to create a variable in the render() method and use that in the JSX.
h

Let’s create that variable for the set of issue rows like that anyway for readability:
c
ar
Se

Search Creators... Page 23

 BIS601 | FULLSTACK DEVELOPMENT | SEARCH CREATORS.

In other frameworks and templating languages, creating multiple elements using a

template would have required a special for loop construct (e.g., ng-repeat in
AngularJS) within that templating language.

The header row in the IssueTable class will now need to have one column for each

s
of the issue fields, so let’s do that as well.

or
But by now, specifying the style for each cell is becoming tedious, so let’s create a
class for the table, name it table-bordered, and use CSS to style the table and each

at
table-cell instead. This style will need to be part of index.html, and Listing 3-7
shows the changes to that file.

re
C
c h
ar

Now, we can remove rowStyle from all the table-cells and table-headers. One last
thing that needs to be done is to identify each instance of IssueRow with an
Se

attribute called key. The value of this key can be anything, but it has to uniquely
identify a row. React needs this key so that it can optimize the calculation of
differences when things change, for example, when a new row is inserted. We can
use the ID of the issue as the key, as it uniquely identifies the row.

Search Creators... Page 24

 BIS601 | FULLSTACK DEVELOPMENT | SEARCH CREATORS.

The final IssueTable class with a dynamically generated set of IssueRow

components and the modified header is shown in Listing 3-8.

s
or
at
re
C
c h

The changes in IssueRow are quite simple. The inline styles have to be removed,
ar

and a few more columns need to be added, one for each of the added fields. Since
React does not automatically call toString() on objects that are to be displayed, the
Se

dates have to be explicitly converted to strings. The toString() method results in a

long string, so let’s use toDateString() instead. Since the field due is optional, we
need to also check for its presence before calling toDateString() on it. An easy way
to do this is to use the ternary ? - : operator in an expression like this:

Search Creators... Page 25

 BIS601 | FULLSTACK DEVELOPMENT | SEARCH CREATORS.

s
or
at
re
C
c h
ar
Se

Search Creators... Page 26