Module-3

Form enhancement and validation. Introduction to

MERN: MERN components, Server less Hello world.

React Components: Issue Tracker, React Classes, Composing Components,

Passing Data Using Properties, Passing Data Using Children, Dynamic
Composition.

MERN

INTRODUCTION TO MERN AND MERN COMPONENTS

The MERN stack is a widely adopted full-stack development framework that

simplifies the creation of modern web applications. Using JavaScript for both
the frontend and backend enables developers to efficiently build robust,
scalable, and dynamic applications.

How MERN Works Together?

• Frontend (React.js) sends a request to the backend.

• Backend (Express.js + Node.js) processes the request.

• Database (MongoDB) stores/retrieves the requested data.

• Backend sends the data back to the frontend for display.

Why Use MERN Stack?

• Full-stack JavaScript-based framework.

• Fast development with reusable components.

• Scalable and handles real-time applications.

• Supported by a large developer community.

Mern Components

React (Frontend Component)

 React is an open-source JavaScript library developed by Facebook.

 Used for building user interfaces (UI) rendered in HTML.

 Unlike AngularJS, React is a library, not a full framework.

 Handles the “View” (V) part of MVC architecture.

Real-world Usage:

 Used by companies like Facebook, Airbnb, Atlassian, Bitbucket, Disqus,

Walmart.

 Highly popular – over 120,000 stars on GitHub.

Why Facebook Invented React

 Originally built for Facebook Ads team.

 Traditional MVC with two-way data binding led to complex, hard-to-

maintain code.

 Frequent cascading updates made apps error-prone.

 Solution: Declarative UI – re-render view when data changes, instead of

manipulating DOM manually.
Features of React

1. Declarative Views

 React handles UI updates automatically.

 Programmer defines how UI should look for a given state.

 When data changes, React uses Virtual DOM to determine minimal

updates to real DOM.

2. Virtual DOM

 A lightweight copy of actual DOM stored in memory.

 React compares new Virtual DOM with old Virtual DOM → updates only
what has changed.

 Ensures high performance with minimal DOM manipulation.

3. Component-Based Architecture

 Everything in React is a component:

o Components are independent, reusable, and maintain their own

state.

o Can be combined together to build complex UIs.

 Parent-child communication via:

o Props (read-only) – from parent to child.

o Callbacks – from child to parent.

4. No Templates

 React doesn’t use a separate template language.

 Uses JavaScript and JSX to build UI.

 o JSX = JavaScript XML → similar to HTML but written in JS files.

o JSX simplifies creation of nested HTML elements.

5. Isomorphic Code

 React code can run on both browser and server.

 Useful for Server-Side Rendering (SSR) → better SEO and faster initial
load.

Node.js
 JavaScript runtime environment (outside the browser).

 Built on Chrome's V8 engine.

 Can run full applications in JavaScript (like backend APIs).

 Used by companies like Netflix, Uber, LinkedIn.

Node.js Modules

 Browser JS needs HTML to include multiple files, Node.js doesn't.

 Node.js uses CommonJS module system:

o Split code across files/modules for better organization.

o Use require() to include modules.

 Comes with built-in core modules (File System, Network, etc.).

 Supports third-party modules via npm.

npm (Node Package Manager)

 Default package manager for Node.js.

 Can install:

o Third-party libraries like React, jQuery.

o Dependencies for your project.

 Provides:

o Huge collection of reusable packages.

o Version conflict resolution.

 Tools like Webpack or Browserify bundle all modules for browser use.

 npm is now the largest package ecosystem, even surpassing Maven.

Node.js – Event Driven Architecture

 Uses asynchronous, non-blocking I/O.

 Doesn’t rely on threads – uses callbacks and event loop.

 Example:

o Instead of waiting for a file to open, you pass a callback and move
on.

 Event loop keeps checking for events and executes their callbacks.

 Similar to AJAX style asynchronous code.

 Efficient, but requires learning asynchronous coding patterns.

Express.js – Web Server Framework for Node.js

What is Express?

 A web framework for Node.js – simplifies writing server code.

 Without Express, writing a full web server using pure Node.js is tedious.

 Provides an easy way to define:

o Routes (URL patterns).

o Request handling logic.

Routing

 Routes in Express are defined using regex-like patterns.

 Each route has a handler function:

o Takes in the parsed HTTP request.

o Sends a response based on business logic.

Request/Response Handling

 Express parses:

o URL

o Headers

o Parameters

 Helps you easily:

o Set response codes

o Set cookies

o Send custom headers

Middleware

 Middleware = custom reusable functions used in request/response flow.

 Use cases: logging, authentication, error handling, etc.

Template Engine Support

 Express doesn't have a built-in template engine.

 Supports third-party engines like:

o pug

o mustache

 Note: For SPAs (Single Page Applications), template engines are usually
unnecessary as the dynamic rendering happens on the client-side using
React.

MongoDB – NoSQL Database for MERN Stack

What is MongoDB?

 A NoSQL, document-oriented database.

 Used for storing data in JSON-like documents.

 Schema is flexible, making it ideal for rapidly evolving applications.

Who uses it?

 Big companies: Facebook, Google, SAP, Royal Bank of Scotland.

NoSQL Basics

 NoSQL = non-relational (no tables, rows, strict relations).

 Key benefits:

1. Horizontal scalability (distributes load across servers).

 Sacrifices strong consistency (refer CAP theorem).

2. Object-document mapping aligns with how data is used in

applications.

Object vs Relational Mismatch

 Traditional RDBMS requires mapping objects to rows/columns.

 This mismatch requires ORMs (e.g., Hibernate).

 MongoDB stores data as-is (in object/document format), removing the

need for complex mappings.

Document-Oriented Storage

 Data stored as documents (JSON-like).

 Documents grouped into collections (similar to tables).

 Each document has a unique identifier, automatically indexed.

Example:

Invoice with multiple items

 In RDBMS:

o Two tables: invoice, invoice_items (linked via foreign key).

 In MongoDB:
 o One document with all invoice details and item list as nested fields.

Downsides

 Data is de-normalized (can be duplicated).

 Storage usage increases.

 Operations like renaming a master entry require updating multiple

documents.

 But storage is cheap, and such updates are rare.

Schema-Less

 No fixed schema required for documents.

 Fields can vary between documents in the same collection.

 Quick development without database migrations.

 Downside: Data consistency must be ensured in code.

 Solution: Use ODMs like Mongoose (adds structure and validation).

JavaScript-Based Query Language

 Uses JSON syntax instead of SQL.

 Queries are built using JavaScript-style JSON objects.

 Easier for developers working with JS (like in MERN).

JSON vs BSON

 Internally, MongoDB uses BSON (Binary JSON) for efficiency.

 Communication and operations use JSON format.

Mongo Shell

 Comes with a shell interface powered by JavaScript (like Node.js).

 You can:

o Interact with DB using JS.

o Write stored procedures (JS snippets run on server).

Tools and Libraries in MERN Stack Development

🔹 React-Router

React handles rendering and user interactions in components.

Routing enables transition between views and syncs URLs.

React-Router:

 Parses URLs and maps them to components.

 Handles browser history (e.g., Back button).
 Mimics page transitions without full reloads.
 React-Router simplifies navigation in SPAs.
🔹 React-Bootstrap

React adaptation of Bootstrap, a popular CSS framework.

Provides pre-built, customizable UI components.

Useful for:

Fast UI development.

Learning to design custom components.

Alternative UI libraries:

Material-UI (MUI)

Elemental UI

🔹 Webpack

Bundles and modularizes client-side code.

Converts JSX to JavaScript (compilation step).

Competing tools: Bower, Browserify, Gulp, Grunt

Simplifies delivery of client-side code to browsers.

🔹 Other Libraries

Server-side:

body-parser: Parses JSON/form data in POST requests.

ESLint: Ensures code quality and consistency.

Client-side:

react-select and other useful component libraries.

🔹 Other Popular Libraries

Redux: State management for complex apps.

Mongoose: ODM (Object Document Mapper) for MongoDB.

Jest: Testing library for React apps.

Server Less Hello World

Introduction

• What is Serverless?
Serverless computing allows developers to run applications without
managing servers. Cloud providers handle infrastructure, scaling, and
maintenance.

• Why Serverless?

• No need to manage servers

• Auto-scaling and cost-effective

 • Faster deployment

• Ideal for event-driven applications

• Popular Serverless Providers

• AWS Lambda

• Azure Functions

• Google Cloud Functions

• Netlify Functions

• Vercel Serverless

Objective:

To create a minimal React app without using Node.js, Express, or any

installations—just a browser and a single HTML file.

Tools Used:

React: JavaScript library for building UI.

ReactDOM: Converts React components to actual DOM elements.

CDN: Libraries are loaded via CDN using <script> tags.

React: https://unpkg.com/react@16/umd/react.development.js

ReactDOM: https://unpkg.com/react-dom@16/umd/react-dom.development.js
Step-by-Step Explanation:

Create an HTML file

Save it as index.html.

Add React and ReactDOM libraries

Place these in the <head> section:

<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>

Create a target <div> in <body>

This is where your React component will render.

<div id="content"></div>

Create a React element using React.createElement()

const element = React.createElement('div', {title: 'Outer div'},

React.createElement('h1', null, 'Hello World!')

);

This creates a nested element:

Outer <div> with a title attribute.

Inner <h1> element with text "Hello World!".

Render it using ReactDOM.render()

ReactDOM.render(element, document.getElementById('content'));

Complete Code (index.html)

<!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="content"></div>

<script>

const element = React.createElement('div', {title: 'Outer div'},

React.createElement('h1', null, 'Hello World!')

 );

ReactDOM.render(element, document.getElementById('content'));

</script>

</body>

</html>

 No installations required: runs directly in browser.

 Uses CDN links to load React libraries.
 React.createElement() is used instead of JSX (we’ll explore JSX later).
 React elements are JavaScript objects (virtual DOM).
 ReactDOM.render() injects the virtual DOM into the real DOM.

Output:

Displays “Hello World!” on the browser.

Hovering over the text shows a tooltip "Outer div".

Creating the Express Project

1. Installing Node.js Using nvm

What is Node.js?

Node.js lets us run JavaScript outside a browser (on the server).

Why use nvm (Node Version Manager)?

Helps us install and switch between multiple Node.js versions.

Useful when projects need different Node versions.

Steps:

1. Open Terminal (Command Line).

Install nvm

nvm install --lts

Check installed version:

node -v

Now Node.js and npm are ready to use!

2. Initializing a Project with npm

What is npm?

 Stands for Node Package Manager.

 Manages packages (libraries) for Node.js.

To start a new project:

Create a project folder:

mkdir issuetracker

cd issuetracker
Initialize with npm:

npm init -y

🔹 Creates a package.json file with default values.

3. Installing Express Framework

What is Express?

 A web framework for Node.js.

 Helps create server-side applications easily.

To install Express:

npm install express

This adds Express as a dependency in package.json.

4. Understanding package.json

What is package.json?

 A file that stores info about the project and dependencies.

Key Fields:

name: Project name.

version: Project version.

scripts: Commands you can run (like npm start).

dependencies: List of installed packages (like Express).

5. Serving Static Files Using Express

Static files = HTML, CSS, JS, images

We serve them to the client (browser).

Steps in code:

Create a folder public/ and put your static files there.

In your server.js file:

const express = require('express');

const app = express();

app.use(express.static('public'));

const PORT = 3000;

app.listen(PORT, () => {

console.log(`Server is running on http://localhost:${PORT}`);

});

Now, if public/index.html exists, open in browser:

Output

http://localhost:3000/ (follow this link)

Summary
Concept Purpose

nvm Manage Node.js versions

npm init Start a new Node.js project

express Framework to build servers

package.json Project config and dependencies

express.static() Serve HTML/CSS/JS files

React Components
🔹 Why Use React Components?

 JSX alone is limited—real-world apps need interactivity, data handling,

and reusability.

 Components:

o Can be composed of other components and HTML elements.

o React to user input, manage state, and interact with each other.

o Make the app modular, maintainable, and scalable.

Application: Issue Tracker

This app mimics basic GitHub Issues/Jira functionality.

🔸 Features:

 View a list of issues (with filters).

 Add new issues.

 Edit/update issues.

 Delete issues.

🔸 Attributes of an Issue:

 title: summary (text)

 owner: assigned user (text)

 status: open/assigned/resolved etc. (list)

 created: auto-set date

 effort: estimated days (number)

 due: optional due date (date)

React Classes
Purpose:

To move from simple JSX to structured, reusable React components.

syntax:

class HelloWorld extends React.Component {

render() {

const continents = ['Africa','America','Asia','Australia','Europe'];

const helloContinents = Array.from(continents, c => `Hello ${c}!`);

const message = helloContinents.join(' ');

return (

<div title="Outer div">

<h1>{message}</h1>

</div>

);

Instantiate a component:

const element = <HelloWorld />;

ReactDOM.render(element, document.getElementById('contents'));

Important Notes:

 React class components extend React.Component.

 The render() method is mandatory and must return an element.

 JSX must return a single root element.

 <HelloWorld /> is an instance of the component, like <div />.

  Use es2015 classes with class and extends.

Creating a React Class Component

 A class component is created by extending React.Component.

 It must include a render() method, which returns JSX (React’s syntax

similar to HTML).

Example

class HelloWorld extends React.Component {

render() {

return <h1>Hello, World!</h1>;

Understanding the render() Method

 The render() method must be present in a class component.

 It returns JSX, which defines what should be displayed in the UI.

 Example of render() with data processing inside:

render() {

const continents = ['Africa', 'America', 'Asia', 'Australia', 'Europe'];

const helloContinents = continents.map(c => `Hello ${c}!`);

const message = helloContinents.join(' ');

 return <h1>{message}</h1>;

Why Use React Classes?

 They allow more structured and reusable components.

 They support lifecycle methods (to manage component behavior).

 They help in handling state and complex UI logic.

Creating a React Component

 You can define a React class component using class ComponentName

extends React.Component {}.

 Example:

class HelloWorld extends React.Component {

render() {

return <h1>Hello, World!</h1>;

 This can be used like <HelloWorld /> in JSX.

Rendering a Component

 Use ReactDOM.render() to display the component in the DOM.

 Example:

const element = <HelloWorld />;

ReactDOM.render(element, document.getElementById('contents'));

Component Composition in React

Component composition is a concept in React where large UI elements are

split into smaller, reusable components. Instead of building a monolithic UI
(everything in one big file), we break it down into independent parts.

For example, imagine a page where users can:

✔ Filter issues

✔ See a table of issues

✔ Add a new issue

Instead of writing all this logic in one component, we create three smaller
components:

 IssueFilter → Handles filtering issues

 IssueTable → Displays a list of issues

 IssueAdd → Allows users to add a new issue

This makes the code modular, readable, and easy to manage.

Step-by-Step Implementation

1. Creating Placeholder Components

Open App.jsx and define three components:

import React from "react";

class IssueFilter extends React.Component {

render() {

return <div>This is a placeholder for the issue filter.</div>;

class IssueTable extends React.Component {

render() {

return <div>This is a placeholder for the issue table.</div>;

class IssueAdd extends React.Component {

render() {

return <div>This is a placeholder for adding an issue.</div>;

export { IssueFilter, IssueTable, IssueAdd };

Composing the Components into One Parent (IssueList)

Now, create another component IssueList that groups these three:

import React from "react";

import { IssueFilter, IssueTable, IssueAdd } from "./App";

class IssueList extends React.Component {

render() {

return (

<>

<h1>Issue Tracker</h1>

<IssueFilter />

<hr />

<IssueTable />

<hr />

<IssueAdd />

</>

);

export default IssueList;

Rendering IssueList in main.jsx

Modify main.jsx to display the IssueList component:

import React from "react";

import ReactDOM from "react-dom/client";

import IssueList from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(

<IssueList />

);

What Happens Here?

issueList is the main parent component

It composes IssueFilter, IssueTable, and IssueAdd inside it
Everything is displayed in the browser in a structured and reusable way
Passing Data Using Properties
Objective:

To make components reusable by passing different data (props) from parent to

child components.

Key Concept: Props

 Props (short for properties) allow you to pass data from a parent
component to a child component.
 In JSX, you pass props just like HTML attributes.
 In the child component, they’re accessed using this.props.

🔸 Example Use Case: IssueRow Component

We want to render each issue (from the issue tracker) as a row in a table using a
reusable IssueRow component.

IssueTable Structure:

class IssueTable extends React.Component {

render() {

const rowStyle = { border: "1px solid silver", padding: 4 };

return (

<table style={{ borderCollapse: "collapse" }}>

<thead>

<tr>
 <th style={rowStyle}>ID</th>

<th style={rowStyle}>Title</th>

</tr>

</thead>

<tbody>

<IssueRow

rowStyle={rowStyle}

issue_id={1}

issue_title="Error in console when clicking Add"

/>

<IssueRow

rowStyle={rowStyle}

issue_id={2}

issue_title="Missing bottom border on panel"

/>

</tbody>

</table>

);

}
IssueRow Component:

class IssueRow extends React.Component {

render() {

const style = this.props.rowStyle;

return (

<tr>

<td style={style}>{this.props.issue_id}</td>

<td style={style}>{this.props.issue_title}</td>

</tr>

);

Notes on JSX:

JSX does not support HTML-style comments (<!-- -->). Use JavaScript-style
comments inside {}:

{/* This is a JSX comment */}

Props can be strings, numbers, objects, etc.

Use {} for JS expressions (numbers, objects).

Use "" for strings.

React Style Prop

React requires style to be an object, not a string:

const rowStyle = { border: "1px solid silver", padding: 4 };

Inline style needs double braces:

<table style={{ borderCollapse: "collapse" }}>

Passing Data Using children in React

Concept Overview

In addition to using props (custom attributes) to pass data to components, React

also allows passing data using the component's children, much like nesting
elements in HTML.

This allows more flexibility, especially when the data you pass is:

 Rich content (like JSX)

 Multiple nested components
 Varying structures (not just strings or numbers)
Accessing Children

Any data/content placed between the opening and closing tags of a component
is accessible via this.props.children.

<CustomComponent>

<p>This is child content</p>

</CustomComponent>

Inside CustomComponent:

render() {

return <div>{this.props.children}</div>;

Example: BorderWrap Component

class BorderWrap extends React.Component {

render() {

const borderedStyle = { border: "1px solid silver", padding: 6 };

return (

<div style={borderedStyle}>

{this.props.children}

</div>

);

}
Usage:

<BorderWrap>

<ExampleComponent />

</BorderWrap>

Updating IssueRow to Use Children

You can embed JSX or plain text within an IssueRow, like this:

<IssueRow issue_id={1}>Error in console when clicking Add</IssueRow>

<IssueRow issue_id={2}>

<div>Missing <b>bottom</b> border on panel</div>

</IssueRow>

Update the IssueRow to use both props and children:

class IssueRow extends React.Component {

render() {

const style = this.props.rowStyle;

return (

<tr>

<td style={style}>{this.props.issue_id}</td>

<td style={style}>{this.props.issue_title}</td>
 <td style={style}>{this.props.children}</td>

</tr>

);

Dynamic Composition (React Components)

What is Dynamic Composition?

Dynamic composition refers to the practice of programmatically generating

React components (like <IssueRow />) from a JavaScript array, instead of
hardcoding them manually. This approach is scalable and maintainable,
especially when dealing with large or dynamic data sets.

Step-by-Step Breakdown

1. Create an In-Memory Array of Issues

We store a few issue objects in a globally declared array called issues. Each
object includes various fields such as id, status, owner, effort, created, due, and
title.
const issues = [

id: 1, status: 'New', owner: 'Ravan', effort: 5,

created: new Date('2018-08-15'), due: undefined,

title: 'Error in console when clicking Add',

},

id: 2, status: 'Assigned', owner: 'Eddie', effort: 14,

created: new Date('2018-08-16'), due: new Date('2018-08-30'),

title: 'Missing bottom border on panel',

},

];

Note: We left the due field undefined in one object to test optional field
rendering.

2. Modify the IssueTable to Generate Rows Dynamically

Instead of hardcoding each row, use Array.map() to transform each issue object
into an <IssueRow /> component.

const issueRows = issues.map(issue =>

<IssueRow key={issue.id} issue={issue} />

);
And render it inside the table like this:

<tbody>

{issueRows}

</tbody>

You can also directly write the map expression inside JSX:

<tbody>

{issues.map(issue => <IssueRow key={issue.id} issue={issue} />)}

</tbody>

This shows that JSX allows any valid JavaScript expression inside {}.

3. Add Table Header and Styling

Define a <thead> section and assign a className to the table for CSS styling.

<table className="bordered-table">

Include the following CSS in index.html to style the table:

<style>

table.bordered-table th, td {

border: 1px solid silver;

padding: 4px;

table.bordered-table {
 border-collapse: collapse;

</style>

4. Update IssueRow to Use Full Object

Instead of passing each field as a prop, the entire issue object is passed:

<IssueRow issue={issue} />

Inside IssueRow, we extract the data and display it in <td> elements:

class IssueRow extends React.Component {

render() {

const issue = this.props.issue;

return (

<tr>

<td>{issue.id}</td>

<td>{issue.status}</td>

<td>{issue.owner}</td>

<td>{issue.created.toDateString()}</td>

<td>{issue.effort}</td>

<td>{issue.due ? issue.due.toDateString() : ''}</td>

<td>{issue.title}</td>

</tr>

);
 }

Important Concepts

Concept Explanation

Required in a list of components to uniquely identify each

key Prop
item for React's rendering optimization. Here, issue.id is used.

Dynamic JSX supports JavaScript expressions, so map() can be used

Rendering inside JSX to render multiple components.

Object Prop Passing the entire issue object is cleaner and reduces
Passing boilerplate compared to passing each property individually.

Optional Use the ternary operator (? :) to safely render optional fields

Fields like due.

Summary

 We dynamically composed components (<IssueRow />) using the map()

function.
 We styled our table using CSS classes.
 We used props to pass an entire object to a component.
 We handled optional fields safely using conditional rendering.
 We learned how JSX enables JavaScript expressions directly in markup.