FULLSTACK DEVLOPMENT

FULL STACK DEVELOPMENT

MODULE-3

Form enhancement: DOM nodes for form controls have different properties, methods, and events
than some of the other elements you have met so far. Here are some you should note for the element.

Form Controls:
Form control uses a different combination of the properties, methods, and events shown below

ANOOP N PRASAD,ASST. PROFESSOR,BGSCET Page 1

FULLSTACK DEVLOPMENT

Submitting forms:

Showing a password:

ANOOP N PRASAD,ASST. PROFESSOR,BGSCET Page 2

FULLSTACK DEVLOPMENT

Showing a password:

Disable Submit buttons:

ANOOP N PRASAD,ASST. PROFESSOR,BGSCET Page 3

FULLSTACK DEVLOPMENT

Select all checkboxes:

ANOOP N PRASAD,ASST. PROFESSOR,BGSCET Page 4

FULLSTACK DEVLOPMENT

Radio buttons:

Select boxes

ANOOP N PRASAD,ASST. PROFESSOR,BGSCET Page 5

FULLSTACK DEVLOPMENT

FORM VALIDATION: Validation is the process of checking whether a value meets certain rules (for
example, that a password has a minimum number of characters).
Required form elements:
The HTML5 required attribute indicates a field must have a value. Our validateRequired() function will
first check for the attribute. If present, it then checks whether or not it has a value.
it calls upon three other named functions
i) isRequ ired() checks for the requiredattribute.
ii) isEmpty() can check if the element has a value.
iii) setErrorMessage() sets error messages if there are problems.

isRequired():
 The isRequired() function takes an element as a parameter and checks if the required attribute is
present on that element. It returns a Boolean.

isEmpty():The isEmpty() function (below) takes an element as a parameter and checks to see if it has a
value. As with isRequired(), two checks are used to handle both new and older browsers.

Creating error messages: The validation code processes elements one by one; any error messages are
stored using jQuery's . data() method.

ANOOP N PRASAD,ASST. PROFESSOR,BGSCET Page 6

FULLSTACK DEVLOPMENT

Whenever an error is found, you will see calls to a function called setErrorMessage(), which takes two
parameters:
i) e1: the element that the error message is for
ii) message: the text the error message will display
Each error message is going to be stored with the element node that it relates to using the [Link]()
method.
The .data() method has two parameters:
i) The key, which is always going to be errorMessage.
ii) The value, which is the text that the error message will display.
Example:

Displaying error messages: After each element has been checked, if one or more were not valid,
showErrorMessage() will display the error messages on the page.

Creating an object to validate data types:

The validate Type object (outlined below) has three methods:

Regular expressions:
 Regular expressions search for characters that form a pattern. They can also replace those
characters with new ones.
 Regular expressions do not just search for matching letters; they can check for sequences of
upper/lowercase characters, numbers, punctuation, and other symbols.

ANOOP N PRASAD,ASST. PROFESSOR,BGSCET Page 7

FULLSTACK DEVLOPMENT

COMMON REGULAR EXPRESSIONS:

MERN:
 Stack is a JavaScript Stack that is used for easier and faster deployment of full-stack web
applications.
 MERN Stack comprises of 4 technologies namely: MongoDB, Express, React and [Link].
 It is designed to make the development process smoother and easier:
1. MongoDB: Non-Relational Database
2. Express: [Link] web server
3. React: JavaScript Frontend Framework
4. Node: JavaScript Web Server

ANOOP N PRASAD,ASST. PROFESSOR,BGSCET Page 8

FULLSTACK DEVLOPMENT

MERN Components:

React:
 This is the defining component of the MERN stack.
 React is an open-source JavaScript library maintained by Facebook that can be used for creating
views rendered in HTML.
 React to render a MVC (MODEL VIEW CONTROLLER).
 It is Declarative (views are declarative), Component-Based(that maintains its own state and
renders itself), No Template(templates to automate the task of creating repetitive HTML),
Isomorphic(the same code can run on the server and the browser).
[Link]:
 [Link] is JavaScript outside of a browser.
 The [Link] runtime runs JavaScript programs.
 [Link] robust and scalable environment to run the back-end of any application.

[Link] Modules:
 [Link] uses its own module system based on Common JS to put together multiple JavaScript
files.
 Modules are like libraries. You can include the functionality of another JavaScript file.
 These modules provide access to the operating system elements such as the file system,
networking, input/output, etc
 They also provide some utility functions that are commonly required by most programs.

[Link] and npm:

 npm is the default package manager for [Link].
 It quickly transformed into a package manager for delivering other JavaScript based modules.
 The most popular client-side JavaScript library(JQUERY), is available as an npm module.
[Link] is Event Driven:
 [Link] has an asynchronous, event driven, non-blocking input/output (I/O) model, as opposed to
using threads to achieve multi-tasking.
 An event-based approach makes [Link] applications fast.
 [Link] achieves multi-tasking using an event loop.
Express:
 Express is a framework that simplifies the task of writing the server code.
 The Express framework lets you define routes, specifications of what to do when an HTTP
request matching a certain pattern arrives
 Express parses the request URL, headers, and parameters for you.
 Express does not have a template engine built in, but it supports any template engine of your
choice such as pug, mustache, etc
 Express is a web server framework meant for [Link]

ANOOP N PRASAD,ASST. PROFESSOR,BGSCET Page 9

FULLSTACK DEVLOPMENT

MongoDB:
 MongoDB is the database used in the MERN stack
 It is a NoSQL document-oriented database, with a flexible schema and a JSON-based query
language.
 Document-Oriented Means Compared to relational databases where data is stored in the form
of relations, or tables, MongoDB is a document-oriented database(The unit of storage
(comparable to a row) is a document).
 Schema-Less: Storing an object in a MongoDB database does not have to follow a prescribed
schema. All documents in a collection need not have the same set of fields
 JavaScript Based: Data is also interchanged in JSON format.
Other tools:
React-Router:
 This capability of managing URLs and history is called routing.
 It is similar to server-side routing that Express does
 React-Router not only does this, but also manages the browser’s Back button functionality.
React-Bootstrap:
 Bootstrap, the most popular CSS framework, has been adapted to React and the project is called
React-Bootstrap.
 There are other component/CSS libraries built for React (such as Material-UI, MUI, Elemental UI,
etc.) and also individual components (such as react-select, react-treeview, and react-date- picker).
Webpack:
 This tool is indispensable when it comes to modularizing code.
 Webpack is easier to use and does not require another tool (like gulp or grunt) to manage the
build process.
Server-Less Hello World:
 write a simple piece of code in a single HTML file that uses React to display a simple page on the
browser. No installations, downloads, or server.

 Create [Link] program and add These two scripts can be included in the section using:

<script src="[Link]
<script src="[Link]

ANOOP N PRASAD,ASST. PROFESSOR,BGSCET Page 10

FULLSTACK DEVLOPMENT

Example:

React components:
React components are independent, reusable building blocks in a React application that define what gets
displayed on the UI. They accept inputs called props and return React elements describing the UI.
 Components can be reused across different parts of the application to maintain consistency and
reduce code duplication.
 Components manage how their output is rendered in the DOM based on their state and props.
 React loads only the necessary components, ensuring optimized performance.
 Only the specific Component updates instead of the whole page.

There are two primary types of React components:

1. Class Components: Class components are ES6 classes that extend [Link]. They
include additional features like state management and lifecycle methods.
State Management: State is managed using the [Link] property.
LifecycleMethods: Includesmethods like componentDidMount,componentDidUpdate,etc.

ANOOP N PRASAD,ASST. PROFESSOR,BGSCET Page 11

FULLSTACK DEVLOPMENT

2. Functional Components:
Functional components are simpler and preferred for most use cases. They are JavaScript functions that
return React elements. With the introduction of React Hooks, functional components can also manage
state and lifecycle events.
 Stateless or Stateful: Can manage state using React Hooks.
 Simpler Syntax: Ideal for small and reusable components.
 Performance: Generally faster since they don’t require a ‘this’ keyword.

Issue Tracker: GitHub Issues or Jira applications help you create a bunch of issues or bugs, assign
them to people, and track their statuses.
These 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 requirement list for the Issue Tracker application of GitHub Issues or Jira:
 The user should be able to view a list of issues, with an ability to filter the list by various
parameters.
• The user should be able to add new issues, by supplying the initial values of the issue’s fields.
• The user should be able to edit and update an issue by changing its field values.
• The user should be able delete an issue.
An issue should have following attributes:
• A title that summarizes the issue (freeform long text)
• An owner to whom the issue is assigned (freeform short text)
• A status indicator (a list of possible status values)
• 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).
Example: Refer Program No.5(Build a React application to track issues. Display a list of issues
(use static data). Each issue should have a title, description, and status (e.g., Open/Closed).
Render the list using a functional component.)

React Classes:
 React classes are used to create real components.
 These classes can then be reused within other components, handle events, and so much more.
 React classes are created by extending [Link], the base class from which all custom
classes must be derived.
 Within the class definition, at the minimum, a render() method is needed.

ANOOP N PRASAD,ASST. PROFESSOR,BGSCET Page 12

FULLSTACK DEVLOPMENT

Hello World example from a simple element to use a React class called HelloWorld, extended from
[Link]:
EXAMPLE:

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

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 than polluting the global namespace.

Just as an instance of a div element was created using JSX of the form , an instance of the HelloWorld
class can be created like this:

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

ANOOP N PRASAD,ASST. PROFESSOR,BGSCET Page 13

FULLSTACK DEVLOPMENT

Example: react class and instances

Composing Components:
 Component composition is one of the most powerful features of React.
 A component takes inputs (called properties) and its output is the rendered UI of the component.
 use inputs but put together fine-grained components to build a larger UI.
 This way, the UI can be split into smaller independent pieces so that each piece can be coded and
reasoned in isolation, making it easier to build and understand a complex UI.
when composing components:
• Larger components should be split into fine-grained components when there is a logical separation
possible between the fine-grained components.
 When there is an opportunity for reuse, components can be built which take in different inputs
from different callers
 React’s philosophy prefers component composition in preference to inheritance.
Let’s design the main page of the application to show a list of issues, with an ability to filter the issues
and create a new issue.
It will have three parts:
 a filter to select which issues to display,
 the list of issues,
 and finally, an entry form for adding an issue.
The structure and hierarchy of the user interface is shown in Figure,

ANOOP N PRASAD,ASST. PROFESSOR,BGSCET Page 14

FULLSTACK DEVLOPMENT

Let’s define three placeholder classes—IssueFilter, IssueTable, and IssueAdd—with just a placeholder
text within a in each.
The IssueFilter component will look like this:

The other two classes—IssueTable and IssueAdd—will be similar, with a different placeholder message
each:

To put these together, let’s remove the Hello World class and add a class called IssueList.

Now let’s add a render() method. Within this method, let’s add an instance of each of the new placeholder
classes separated by a <hr>or horizontal [Link] elements have to be enclosed within a <div> or a
React Fragment component.
Let’s use a Fragment component like this in the IssueList’s render() method:

Finally, instead of instantiating a HelloWorld class, let’s instantiate the IssueList class, which we will
place under the contents div.

ANOOP N PRASAD,ASST. PROFESSOR,BGSCET Page 15

FULLSTACK DEVLOPMENT

EXAMPLE: shows the new contents of the [Link] file with all the component classes.

ANOOP N PRASAD,ASST. PROFESSOR,BGSCET Page 16

FULLSTACK DEVLOPMENT

OUTPUT:

Passing Data Using Properties:

 It should 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 inputs (an issue), the row can
display different data.
 Depending on the inputs (an issue), the row can display different data.
The new structure of the UI is shown in the fig below.

So, let’s create a component called IssueRow, and then use this multiple times within IssueTable,
passing in different data to show different issues, like this:

ANOOP N PRASAD,ASST. PROFESSOR,BGSCET Page 17

FULLSTACK DEVLOPMENT

The easiest way to pass data to child components is using an attribute when instantiating a component. 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:

We used the name issue_title rather than simply title to avoid a confusion between 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.
example, this is how the value of issue_title can be displayed within a cell in the IssueRow component:

Within the IssueRow 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 [Link].

The code for the complete IssueRow class is:

Let’s give the rows a silver border of one pixel and some padding, say four pixels. The style object that
would encapsulate this specification would be as follows:

This can be passed on to the IssueRow component using rowStyle={rowStyle} when instantiating it.
This, and the other variables, can be passed to IssueRow while instantiating it like this

ANOOP N PRASAD,ASST. PROFESSOR,BGSCET Page 18

FULLSTACK DEVLOPMENT

Example :IssueTable Passing Data to IssueRow

Output:

Passing Data Using Children:

 There is another way to pass data to other components, using the contents of the HTML-like node
of the component.
 In the child component, this can be accessed using a special field of [Link] called this.
[Link].
 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.
 React lets the parent component access the children element using [Link] and lets
the parent component determine where it needs to be displayed.
 This works great when one needs to wrap other components within a parent component. For
example, a wrapper that adds a border and a padding can be defined like this:

ANOOP N PRASAD,ASST. PROFESSOR,BGSCET Page 19

FULLSTACK DEVLOPMENT

Then, during the rendering, any component could be wrapped with a padded border like this:

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:

Now, within the render() method of IssueRow, instead of referring to [Link].issue_title, it will need to
be referred to as [Link], like this:

Let’s also pass in a nested title element as children, one that is aand includes an emphasized piece of text

ANOOP N PRASAD,ASST. PROFESSOR,BGSCET Page 20

 FULLSTACK DEVLOPMENT

Output :

Dynamic Composition:
 set of IssueRow components with a programmatically generated set of components from an array
of issues.
 The map() method of Array comes in handy for doing this, as we can map an issue object to an
IssueRow instance.

ANOOP N PRASAD,ASST. PROFESSOR,BGSCET Page 21

FULLSTACK DEVLOPMENT

 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 as many fields of an issue.
 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.

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. Within
the IssueTable class’ render() method.
Now, let’s modify the IssueTable class to use this array of issues rather than the hard-coded list. Within
the IssueTable class’ render() method.

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 JavaScript expressions within the curly braces. We’ll
have to create a variable in the render() method and use that in the JSX.
Let’s create that variable for the set of issue rows like that anyway for readability:

Now, we can replace the two hard-coded issue components inside IssueTable with this variable within the
element like this:

let’s create a class for the table, name it table-bordered, and use CSS to style the table and each table-cell
[Link] style will need to be part of [Link].

ANOOP N PRASAD,ASST. PROFESSOR,BGSCET Page 22

FULLSTACK DEVLOPMENT

 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 attribute called key.
 The value of this key can be anything, but it has to uniquely identify a row.
 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.

The toString() method results in a long string, so let’s use toDateString() instead.

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:

The ternary operator is handy because it is a JavaScript expression, and it can be used directly in place of
the display string.
The new IssueRow class is shown below:

ANOOP N PRASAD,ASST. PROFESSOR,BGSCET Page 23

FULLSTACK DEVLOPMENT

New IssueRow Class Using Issue Object Property:

Output:

ANOOP N PRASAD,ASST. PROFESSOR,BGSCET Page 24