23PCSCS26 Object Oriented Programming through Java,

UNIT1 HTML Basics

REACTJS - INTRODUCTION
ReactJS is a free and open-source front-end JavaScript library which is used to develop various
interactive user-interfaces.

It is a simple, feature rich and component based UI library.

When we say component based, we mean that React develops applications by creating various
reusable and independent codes.

This UI library is, thus, widely used in web development.

ReactJS can be used to develop small applications as well as big, complex applications.

ReactJS provides minimal and solid feature set to kick-start a web application.

React community compliments React library by providing large set of ready-made components
to develop web application in a record time.

React community also provides advanced concept like state management, routing, etc., on top of
the React library.

REACT VERSIONS
Reactjs library was founded by Jordan Walke, a software engineer at Facebook in 2011.

Then the initial version, 0.3.0 of React is released on May, 2013 and the latest version, 17.0.1 is
released on October, 2020.

The major version introduces breaking changes and the minor version introduces new feature
without breaking the existing functionality.

Bug fixes are released as and when necessary. React follows the Semantic Versioning
(semver) principle.

NEED FOR REACTJS

Even though there are various libraries that provide a medium to develop user-interfaces,
ReactJS still stands tall in terms of popularity. Here's why −

 Component Based − ReactJS makes use of multiple components to build an application.

These components are independent and have their own logic which makes them reusable
throughout the development process. This will drastically reduce the application's
development time.
 Better and Faster Performance − ReactJS uses Virtual DOM. Virtual DOM compares
the previous states of components of an application with the current states and only
 updates the changes in Real DOM. Whereas, conventional web applications update all
components again. This helps ReactJS in creating web applications faster.
 Extremely Flexible − React allows developers and teams to set their own conventions
that they deem are best suited and implement it however they see fit, as there are no strict
rules for code conventions in React.
 Creates dynamic applications easily − Dynamic web applications require less coding
while offering more functionality. Thus, ReactJS can create them easily.
 Develops Mobile Applications as well − Not only web applications, React can also
develop mobile applications using React Native. React Native is an open-source UI
software framework that is derived from React itself. It uses React Framework to develop
applications for Android, macOS, Web, Windows etc.
 Debugging is Easy − The data flow in React is unidirectional, i.e., while designing an
app using React, child components are nested within parent components. As the data
flows is in a single direction, it gets easier to debug errors and spot the bugs.

APPLICATIONS
Few popular websites powered by React library are listed below −

 Facebook, popular social media application − React was originally developed at

Facebook (or Meta), so its only natural that they use it to run their application. As for
their mobile application, it uses React Native to display Android and iOS components,
instead of DOM. Facebook's codebase now includes over 20,000 components and uses
the React version that is public.
 Instagram, popular photo sharing application − Instagram is also completely based on
React, as it is powered by Meta as well. The main features to show its usage include Geo-
locations, Hashtags, Google Maps APIs etc.
 Netflix, popular media streaming application − Netflix switched to React in 2015. The
factors that mainly influenced this decision are the 1) startup speed to reduce the
processing time to render the homepage and enabling dynamic elements in the UI, 2)
modularity to allow various features that must coexist with the control experience and 3)
runtime performance for efficient UI rendering.
 Code Academy, popular online training application − Code Academy uses React as the
"script is battle-tested, easy to think about, makes SEO easy and is compatible with
legacy code and flexible enough for the future".
 Reddit, popular content sharing application − Reddit is also developed using React from
the scratch.

REACTJS - INSTALLATION
React provides CLI tools for the developer to fast forward the creation, development and
deployment of the React based web application. React CLI tools depends on the Node.js and
must be installed in your system. Hopefully, you have installed Node.js on your machine. We
can check it using the below command −

node --version

You could see the version of Nodejs you might have installed. It is shown as below for me,

v14.2.0
If Nodejs is not installed, you can download and install by
visiting https://nodejs.org/en/download/.

REACT TOOLCHAIN

To develop lightweight features such as form validation, model dialog, etc., React library can be
directly included into the web application through content delivery network (CDN).

It is similar to using jQuery library in a web application. For moderate to big application, it is
advised to write the application as multiple files and then use bundler such as webpack, parcel,
rollup, etc., to compile and bundle the application before deploying the code.

React toolchain helps to create, build, run and deploy the React application. React toolchain
basically provides a starter project template with all necessary code to bootstrap the application.

Some of the popular toolchain to develop React applications are −

 Create React App − SPA oriented toolchain

 Next.js − server-side rendering oriented toolchain
 Gatsby − Static content oriented toolchain

Tools required to develop a React application are −

1. The serve, a static server to serve our application during development

2. Babel compiler
3. Create React App CLI

The serve static server

The serve is a lightweight web server. It serves static site and single page application. It loads
fast and consume minimum memory. It can be used to serve a React application. Let us install
the tool using npm package manager in our system.

npm install serve -g

Let us create a simple static site and serve the application using serve app.

Open a command prompt and go to your workspace.

cd /go/to/your/workspace

Create a new folder, static_site and change directory to newly created folder.

mkdir static_site
cd static_site

Next, create a simple webpage inside the folder using your favorite html editor.

<!DOCTYPE html>
<html>
 <head>
<meta charset="UTF-8" />
<title>Static website</title>
</head>
<body>
<div><h1>Hello!</h1></div>
</body>
</html>

Next, run the serve command.

serve .

We can also serve single file, index.html instead of the whole folder.

serve ./index.html

Next, open the browser and enter http://localhost:5000 in the address bar and press enter. serve
application will serve our webpage as shown below.

The serve will serve the application using default port, 5000. If it is not available, it will pick up
a random port and specify it.

│ Serving! │
│ │
│ - Local: http://localhost:57311 │
│ - On Your Network: http://192.168.56.1:57311 │
│ │
│ This port was picked because 5000 is in use. │
│ │
│ Copied local address to clipboard!

Babel compiler
Babel is a JavaScript compiler which compiles many variant (es2015, es6, etc.,) of JavaScript
into standard JavaScript code supported by all browsers.

React uses JSX, an extension of JavaScript to design the user interface code. Babel is used to
compile the JSX code into JavaScript code.
To install Babel and it's React companion, run the below command −

npm install babel-cli@6 babel-preset-react-app@3 -g

...
...
+ babel-cli@6.26.0
+ babel-preset-react-app@3.1.2
updated 2 packages in 8.685s

Babel helps us to write our application in next generation of advanced JavaScript syntax.

REACTJS - FEATURES
ReactJS slowly becoming one of the best JavaScript framework among web developers. It is
playing an essential role in the front-end ecosystem. Following are the important features of
ReactJS

 Virtual DOM
 Components
 JSX
 One way data binding
 Scalable
 Flexible
 Modular
Virtual DOM

Virtual DOM is a special DOM created by React.

Virtual DOM represents the real DOM of the current HTML document. Whenever there is a
change in the HTML document, React checks the updated virtual DOM with the previous state
of the Virtual DOM and update only the different in th actual / real DOM. This improves the
performance of the rendering of the HTML document.

For example, if we create a React component to show the current time by periodically updating
the time through setInterval() method, then React will update only the current time instead of
updating the whole content of the component.

Components

React is build upon the concept of components. All modern front end framework relies on the
component architecture.

Component architecture enables the developer to break down the large application into smaller
components, which can be further break down into even smaller component.

Breaking down the application into smaller component simplifies the application and make it
more understandable and manageable.
JSX

JSX is a JavaScript extension to create arbitrary HTML element using syntax similar to HTML.

This will simplify the HTML document creation as well as easy to understand the document.
React will convert the JSX into JavaScript object consisting of React's createElement() function
call before executing it. It improves the performance of the application.

Also, React allows the HTML document creation using pure createElement() function without
JSX as well. This enables the developer to directly create HTML document in a situation where
JSX does not fit well.

One way data binding

One way data binding prevents the data in a component to flow backward. A component can
pass the data to its child component only. The data cannot be passed by a component to its parent
component in any situation. This will simplify the data handling and reduce the complexity. Two
way data binding may seems mandatory at first but a closer look suggests that the application can
be done with one way data binding only and this simplifies the application concept as well.

Scalable

React can be used to create application of any size. React component architecture, Virtual DOM
and one way data binding properly handle large application in a reasonable time frame required
for a front end application. These features make React a scalable solution.

Flexible

React only provides only few basic concept to create truly scalable application. React does not
restrict the developer in any way to follow a rigid process. This enables the developer to apply
their own architecture on top the basic concept and makes it flexible.

Modular

React component can be created in a separate JavaScript file and can be made exportable. This
enables the developer to categories and group certain components into a module so that it can be
imported and used wherever needed.

REACTJS - ADVANTAGES & DISADVANTAGES

React is a library for building composable user interfaces. It encourages the creation of reusable
UI components, which present data that changes over time.

Lots of people use React as the V in MVC.

React abstracts away the DOM from you, offering a simpler programming model and better
performance. React can also render on the server using Node, and it can power native apps using
React Native. React implements one-way reactive data flow, which reduces the boilerplate and is
easier to reason about than traditional data binding.
ADVANTAGES OF REACTJS
Following are the main advantages of ReactJS −

 Performance
 Easy to learn
 Huge collection of third party components
 Large community
 SEO Friendliness
 Easy kick-starting of the React project
 Rich set of developer tools
 Handle large application
Performance

React uses Virtual DOM concept to check and update the HTML document. Virtual DOM is a
special DOM created by React. Virtual DOM represents the real DOM of the current document.
Whenever there is a change in the document, React checks the updated virtual DOM with the
previous state of the Virtual DOM and update only the different in th actual / real DOM. This
improves the performance of the rendering of the HTML document.

For example, if we create a React component to show the current time by periodically updating
the time through setInterval() method, then React will update only the current time instead of
updating the whole content of the component.

Easy to learn

The core concept of React can be learned in less than a day. React can be coded in either Plain
Javascript (ES6) or Typescript. To start with React, the basic knowledge of the JavaScript is
enough. For advanced developer, Typescript provides type safety and rich language feature. A
react component can be created by a developer in few hours by learning JSX (similar to HTML)
and properties (props). Learning React state management will enable the developer to create
dynamic component, which updates the content whenever the state changes. React provides
simple lifecycle for its component, which can be used to properly setup and destroy the
component.

Huge collection of third party components

In addition to core react library (which is only a few KB in size), React community provides a
large number of component for a wide range of application from simple UI component to full
fledged PDF Viewer component. React provides multiple option in each category. For example,
the advanced state management can be done using either Redux or MobX library. Redux and
Mobx are just two popular library to do state management. React has more than 10 library to
archive the same functionality. Similarly, React community provides lot of third party library in
each category like routing, data grid, calendar, form programming, etc.,
Large community

React developer community is a huge community with lot of activities. React community is very
active that you can get answer for any react related question / doubts in a few minutes through
google, stackoverflow, etc.,

SEO friendliness

React is one of the few JavaScript library to support SEO features. Since React components and
JSX are similar to HTML elements, SEO can be easily achieved without much code / setup.

Easy kickstart of React project

React provides a CLI application, create-react-app to create a new react application. create-react-
app application not only create a new application, it also build and run the application in the local
environment without any other dependencies. create-react-app allows the developer to choose a
template, which allows the application to include more boilerplate code during initial setup itself.
This allows the developer to kickstart small application to large application in few clicks.

In addition to create-react-app, React community additional tools such as nextjs, gatsby, etc.,
which allows developer to create advanced application in a short period of time.

Rich set of developer tools

React community provides essential developer tools to enhance the developer

productivity. React developer tool for chrome, edge and firefox browser enables developer to
select a react component and see the current state of the component. Also, it enables the
developer to has clear picture of the view of the component hierarchy by show it as a tree of
component in the Developer Tab of the browser.

Handle large application

React uses composition to merge multiple component into one bigger component, which in turn
allows to create much more larger component. React component can be created in a single
JavaScript file and can be set as exportable. This feature allows multiple component to be
grouped under a common category as module and can be reused in other places.

Composable and modular features of the React library allows developer to create large
application, which is relatively easy to maintain when compared to other front end framework.

DISADVANTAGES OF REACT

Even through React library has lot of positives, it has some of the drawbacks as well. Some of
the drawbacks are as follows −

 Lack of quality documentation

 No standard / recommended way to develop application
 Fast development pace
 Advanced use of JavaScript
 JavaScript extension
 Just a UI library
Lack of quality documentation

React library has a decent documentation in its primary website. It covers the basic concept with
few examples. Even though, it is a good start to understand the basic of React concept, it does
not provides a deep and detailed explanation with multiple examples. React community steps in
and provides lot of articles with varying level of complexity and quality. But, they are not
organized under one place, where the developer can easily learn.

No or Less standard way to develop application

React is just a UI library with few concept and standard recommendation. Even through React
can be use to create large / complex application, there is no standard or recommended way to
create a application. As there is no standard way, React community uses multiple architecture to
build their application. Developer are free to choose a methodology for their application. A
wrong choice at the beginning of the application development complicates the application as
well as delay the development of the application.

Fast development pace

React releases new version of the library few times in a year. Each release has few addition
feature and few breaking changes. Developer need to learn fast and apply the new concept to
stabilize the application.

Advanced use of JavaScript

Even through the core concept of the React library is quite simple and easy to learn, the
advanced concept are quite complex as it exploits advanced features of JavaScript. Also, React
has lot of advanced concept to address many of the complex scenarios of the HTML / Form
programming. The shear number of advanced concept is really quite a challenge for the
developer to learn and master it.

JavaScript Extension

JSX is an extension of JavaScript language. JSX is similar to HTML and simplifies the
component development. JSX also has few differences with the HTML Programming and need
to be careful to apply it correctly. Additionally, JSX needs to be complied to JavaScript before
executed in the browser which is addition step / burden for the application.

Just a UI library

As we learned earlier, React is just a UI library and not a framework. Creating a React
application with good architecture needs careful selection and application of additional third
party react library. A bad design may affect the application in the later / final stage of the
application development.

REACTJS - ARCHITECTURE
React library is built on a solid foundation. It is simple, flexible and extensible. As we learned
earlier, React is a library to create user interface in a web application.

React's primary purpose is to enable the developer to create user interface using pure JavaScript.
Normally, every user interface library introduces a new template language (which we need to
learn) to design the user interface and provides an option to write logic, either inside the template
or separately.

Instead of introducing new template language, React introduces three simple concepts as given
below −

React elements

JavaScript representation of HTML DOM. React provides an

API, React.createElement to create React Element.

JSX

A JavaScript extension to design user interface. JSX is an XML based, extensible language
supporting HTML syntax with little modification. JSX can be compiled to React Elements and
used to create user interface.

React component

React component is the primary building block of the React application. It uses React elements

and JSX to design its user interface. React component is basically a JavaScript class (extends
the React.component class) or pure JavaScript function. React component has properties, state
management, life cycle and event handler. React component can be able to do simple as well as
advanced logic.

ARCHITECTURE OF THE REACT APPLICATION

React library is just UI library and it does not enforce any particular pattern to write a complex
application.

Developers are free to choose the design pattern of their choice. React community advocates
certain design pattern.

One of the patterns is Flux pattern. React library also provides lot of concepts like Higher Order
component, Context, Render props, Refs etc., to write better code.

React Hooks is evolving concept to do state management in big projects. Let us try to understand
the high level architecture of a React application.
  React app starts with a single root component.
 Root component is build using one or more component.
 Each component can be nested with other component to any level.
 Composition is one of the core concepts of React library. So, each component is build by
composing smaller components instead of inheriting one component from another
component.
 Most of the components are user interface components.
 React app can include third party component for specific purpose such as routing,
animation, state management, etc.

Workflow of a React application

Let us understand the workflow of a React application in this chapter by creating and analyzing a
simple React application.

Open a command prompt and go to your workspace.

cd /go/to/your/workspace

Next, create a folder, static_site and change directory to newly created folder.

mkdir static_site
cd static_site
Example

Next, create a file, hello.html and write a simple React application.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React Application</title>
</head>
<body>
<div id="react-app"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
crossorigin></script>
<script language="JavaScript">
element = React.createElement('h1', {}, 'Hello React!')
ReactDOM.render(element, document.getElementById('react-app'));
</script>
</body>
</html>

Next, serve the application using serve web server.

serve ./hello.html
Output

Next, open your favorite browser. Enter http://localhost:5000 in the address bar and then press
enter.

Let us analyse the code and do little modification to better understand the React application.

Here, we are using two API provided by the React library.

React.createElement

Used to create React elements. It expects three parameters −

 Element tag
 Element attributes as object
 Element content - It can contain nested React element as well
ReactDOM.render

Used to render the element into the container. It expects two parameters −

 React Element OR JSX

 Root element of the webpage
Use JSX

Next, let us remove the React element entirely and introduce JSX syntax as shown below −

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React Application</title>
</head>
<body>
<div id="react-app"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
ReactDOM.render(
<div><h1>Hello React!</h1></div>,
document.getElementById('react-app')
);
</script>
</body>
</html>

Here, we have included babel to convert JSX into JavaScript and added type="text/babel" in the
script tag.

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
...
 ...
</script>

Next, run the application and open the browser. The output of the application is as follows −

By analyzing the application, we can visualize the workflow of the React application as shown in
the below diagram.

React app calls ReactDOM.render method by passing the user interface created using React
component (coded in either JSX or React element format) and the container to render the user
interface.

ReactDOM.render processes the JSX or React element and emits Virtual DOM

Virtual DOM will be merged and rendered into the container.

 REACTJS - CREATING A REACT APPLICATION
As we learned earlier, React library can be used in both simple and complex application.

Simple application normally includes the React library in its script section. In complex
application, developers have to split the code into multiple files and organize the code into a
standard structure.

Here, React toolchain provides pre-defined structure to bootstrap the application. Also,
developers are free to use their own project structure to organize the code.

Let us see how to create simple as well as complex React APPLICATION −

 SIMPLE APPLICATION USING CDN

 COMPLEX APPLICATION USING REACT CREATE APP CLI
 COMPLEX APPLICATION USING CUSTOMIZED METHOD

Using Rollup bundler

Rollup is one of the small and fast JavaScript bundlers. Let us learn how to use rollup bundler in
this chapter.

Following are the steps to creating an application using Rollup bundler −

Step 1 − Open a terminal and go to your workspace.

cd /go/to/your/workspace

Step 2 − Next, create a folder, expense-manager-rollup and move to newly created folder. Also,
open the folder in your favorite editor or IDE.

mkdir expense-manager-rollup
cd expense-manager-rollup

Then, create and initialize the project.

npm init -y

Step 3 − To install React libraries (react and react-dom), follow the command below.

npm install react@^17.0.0 react-dom@^17.0.0 --save

Then install babel and its preset libraries as development dependency using the following
commands.

npm install @babel/preset-env @babel/preset-react

@babel/core @babel/plugin-proposal-class-properties -D
Next, install rollup and its plugin libraries as development dependency.

npm i -D rollup postcss@8.1 @rollup/plugin-babel

@rollup/plugin-commonjs @rollup/plugin-node-resolve
@rollup/plugin-replace rollup-plugin-livereload
rollup-plugin-postcss rollup-plugin-serve postcss@8.1
postcss-modules@4 rollup-plugin-postcss

Next, install corejs and regenerator runtime for async programming.

npm i regenerator-runtime core-js

Step 4 − Later, create a babel configuration file, .babelrc under the root folder to configure the
babel compiler.

{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": 3,
"targets": "> 0.25%, not dead"
}
],
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}
rollup.config.js:

Next, create a rollup.config.js file in the root folder to configure the rollup bundler.

import babel from '@rollup/plugin-babel';

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';
import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload';
import postcss from 'rollup-plugin-postcss'
export default {
input: 'src/index.js',
output: {
file: 'public/index.js',
format: 'iife',
},
plugins: [
commonjs({
include: [
'node_modules/**',
],
exclude: [
'node_modules/process-es6/**',
],
}),
resolve(),
babel({
exclude: 'node_modules/**'
}),
replace({
'process.env.NODE_ENV': JSON.stringify('production'),
}),
postcss({
autoModules: true
}),
livereload('public'),
serve({
contentBase: 'public',
port: 3000,
open: true,
}), // index.html should be in root of project
]
}

package.json

Next, update the package.json and include our entry point (public/index.js and
public/styles.css) and command to build and run the application.

...
"main": "public/index.js",
"style": "public/styles.css",
"files": [
"public"
],
"scripts": {
"start": "rollup -c -w",
"build": "rollup"
},
...

Step 5 − Next, create a src folder in the root directory of the application, which will hold all the
source code of the application.

Next, create a folder, components under src to include our React components. The idea is to
create two files, <component>.js to write the component logic and <component.css> to include
the component specific styles.

The final structure of the application will be as follows −

|-- package-lock.json
|-- package.json
|-- rollup.config.js
|-- .babelrc
`-- public
|-- index.html
`-- src
|-- index.js
`-- components
| |-- mycom.js
| |-- mycom.css

Now, let us create a new component, HelloWorld to confirm our

setup is working fine.

HelloWorld.js

Create a file, HelloWorld.js under components folder and write a simple component to
emit Hello World message.

import React from "react";

class HelloWorld extends React.Component {

render() {
 return (
<div>
<h1>Hello World!</h1>
</div>
);
}
}
export default HelloWorld;

index.js

Next, create our main file, index.js under src folder and call our newly created component.

import React from 'react';

import ReactDOM from 'react-dom';
import HelloWorld from './components/HelloWorld';

ReactDOM.render(
<React.StrictMode>
<HelloWorld />
</React.StrictMode>,
document.getElementById('root')
);

Create a public folder in the root directory.

index.html

Next, create a html file, index.html (under public folder*), which will be our entry point of the
application.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Expense Manager :: Rollup version</title>
</head>
<body>
<div id="root"></div>
<script type="text/JavaScript" src="./index.js"></script>
</body>
</html>

Lastly, build and run the application.

npm start

The npm build command will execute the rollup and bundle our application into a single
file, dist/index.js file and start serving the application. The dev command will recompile the code
whenever the source code is changed and also reload the changes in the browser.

> expense-manager-rollup@1.0.0 build /path/to/your/workspace/expense-manager-rollup

> rollup -c
rollup v2.36.1
bundles src/index.js → dist\index.js...
LiveReload enabled
http://localhost:10001 -> /path/to/your/workspace/expense-manager-rollup/dist
created dist\index.js in 4.7s

waiting for changes...

Open the browser and enter http://localhost:3000 in the address

bar and press enter. serve application will serve our webpage as shown below.

Using Parcel bundler

Parcel is fast bundler with zero configuration. It expects just the entry point of the application
and it will resolve the dependency itself and bundle the application. Let us learn how to use
parcel bundler in this chapter.

Step 1 − First, install the parcel bundler.

npm install -g parcel-bundler

Then, open a terminal and go to your workspace.

cd /go/to/your/workspace

Step 2 − Next, create a folder, expense-manager-parcel and move to newly created folder. Also,
open the folder in your favorite editor or IDE.

mkdir expense-manager-parcel
cd expense-manager-parcel

Create and initialize the project using the following command.

npm init -y

Step 3 − Install React libraries (react and react-dom).

npm install react@^17.0.0 react-dom@^17.0.0 --save

Install babel and its preset libraries as development dependency.

npm install @babel/preset-env @babel/preset-react @babel/core @babel/plugin-proposal-class-

properties -D

Then, you create a babel configuration file, .babelrc under the root folder to configure the babel
compiler.

{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}

Step 4 − Update the package.json and include our entry point (src/index.js) and commands to
build and run the application.

...
"main": "src/index.js",
"scripts": {
"start": "parcel public/index.html",
"build": "parcel build public/index.html --out-dir dist"
},
...

Step 5 − Create a src folder in the root directory of the application, which will hold all the source
code of the application.

Next, create a folder, components under src to include our React components. The idea is to
create two files, <component>.js to write the component logic and <component.css> to include
the component specific styles.

The final structure of the application will be as follows −

|-- package-lock.json
|-- package.json
|-- .babelrc
`-- public
|-- index.html
`-- src
|-- index.js
`-- components
| |-- mycom.js
| |-- mycom.css

Let us create a new component, HelloWorld to confirm our setup is working fine. Create a
file, HelloWorld.js under components folder and write a simple component to emit Hello
World message.

HelloWorld.js

import React from "react";

class HelloWorld extends React.Component {

render() {
return (
<div>
<h1>Hello World!</h1>
</div>
);
}
}
export default HelloWorld;

index.js

Now, create our main file, index.js under src folder and call our newly created component.

import React from 'react';

import ReactDOM from 'react-dom';
import HelloWorld from './components/HelloWorld';

ReactDOM.render(
<React.StrictMode>
<HelloWorld />
</React.StrictMode>,
document.getElementById('root')
);
Next, create a public folder in the root directory.

index.html

Create a html file, index.html (in the public folder), which will be our entry point of the
application.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Expense Manager :: Parcel version</title>
</head>
<body>
<div id="root"></div>
<script type="text/JavaScript" src="../src/index.js"></script>
</body>
</html>

Lastly, build and run the application.

npm start

The npm build command will execute the parcel command. It will bundle and serve the
application on the fly. It recompiles whenever the source code is changed and also reload the
changes in the browser.

> expense-manager-parcel@1.0.0 dev /go/to/your/workspace/expense-manager-parcel

> parcel index.html Server running at http://localhost:1234
√ Built in 10.41s.

Open the browser and enter http://localhost:1234 in the address bar and press enter.

To create the production bundle of the application to deploy it in production server,

use build command. It will generate a index.js file with all the bundled source code under di

st folder.

npm run build

> expense-manager-parcel@1.0.0 build /go/to/your/workspace/expense-manager-parcel
> parcel build index.html --out-dir dist

&sqrt; Built in 6.42s.

dist\src.80621d09.js.map 270.23 KB 79ms

dist\src.80621d09.js 131.49 KB 4.67s
dist\index.html 221 B 1.63s

REACTJS - FEATURES
ReactJS slowly becoming one of the best JavaScript framework among web developers. It is
playing an essential role in the front-end ecosystem. Following are the important features of
ReactJS

 Virtual DOM
 Components
 JSX
 One way data binding
 Scalable
 Flexible
 Modular
Virtual DOM

Virtual DOM is a special DOM created by React. Virtual DOM represents the real DOM of the
current HTML document. Whenever there is a change in the HTML document, React checks the
updated virtual DOM with the previous state of the Virtual DOM and update only the different in
th actual / real DOM. This improves the performance of the rendering of the HTML document.

For example, if we create a React component to show the current time by periodically updating
the time through setInterval() method, then React will update only the current time instead of
updating the whole content of the component.

Components

React is build upon the concept of components. All modern front end framework relies on the
component architecture. Component architecture enables the developer to break down the large
application into smaller components, which can be further break down into even smaller
component. Breaking down the application into smaller component simplifies the application and
make it more understandable and manageable.

JSX

JSX is a JavaScript extension to create arbitrary HTML element using syntax similar to HTML.
This will simplify the HTML document creation as well as easy to understand the document.
React will convert the JSX into JavaScript object consisting of React's createElement() function
call before executing it. It improves the performance of the application. Also, React allows the
HTML document creation using pure createElement() function without JSX as well. This
enables the developer to directly create HTML document in a situation where JSX does not fit
well.

One way data binding

One way data binding prevents the data in a component to flow backward. A component can
pass the data to its child component only. The data cannot be passed by a component to its parent
component in any situation. This will simplify the data handling and reduce the complexity. Two
way data binding may seems mandatory at first but a closer look suggests that the application can
be done with one way data binding only and this simplifies the application concept as well.

Scalable

React can be used to create application of any size. React component architecture, Virtual DOM
and one way data binding properly handle large application in a reasonable time frame required
for a front end application. These features make React a scalable solution.

Flexible

React only provides only few basic concept to create truly scalable application. React does not
restrict the developer in any way to follow a rigid process. This enables the developer to apply
their own architecture on top the basic concept and makes it flexible.

Modular

React component can be created in a separate JavaScript file and can be made exportable. This
enables the developer to categories and group certain components into a module so that it can be
imported and used wherever needed.

ReactJS Vs React Native

 DIFFERENCE BETWEEN ANGULARJS AND REACTJS
AngularJS
AngularJS is an open-source JavaScript framework used to build a dynamic web application.
Misko Hevery and Adam Abrons developed AngularJS in 2009, and now Google maintained it.
The latest version of Angular is 1.7.8 on March 11, 2019. It is based on HTML and JavaScript
and mostly used for building a Single Page Application. It can be included to an HTML page
with a <script> tag. It extends HTML by adding built-in attributes with the directive and binds
data to HTML with Expressions.

Features of AngularJS
1. Data-binding: AngularJS follows the two-way data binding. It is the automatic
synchronization of data between model and view components.
2. POJO Model: AngularJS uses POJO (Plain Old JavaScript) model, which provides
spontaneous and well-planned objects. The POJO model makes AngularJS self-sufficient
and easy to use.
3. Model View Controller(MVC) Framework: MVC is a software design pattern used for
developing web applications. The working model of AngularJS is based on MVC
patterns. The MVC Architecture in AngularJS is easy, versatile, and dynamic. MVC
makes it easier to build a separate client-side application.
4. Services: AngularJS has several built-in services such as $http to make an
XMLHttpRequest.
 5. User interface with HTML: In AngularJS, User interfaces are built on HTML. It is a
declarative language which has shorter tags and easy to comprehend. It provides an
organized, smooth, and structured interface.
6. Dependency Injection: AngularJS has a built-in dependency injection subsystem that
helps the developer to create, understand, and test the applications easily.
7. Active community on Google: AngularJS provides excellent community support. It is
Because Google maintains AngularJS. So, if you have any maintenance issues, there are
many forums available where you can get your queries solved.
8. Routing: Routing is the transition from one view to another view. Routing is the key
aspect of single page applications where everything comes in a single page. Here,
developers do not want to redirect the users to a new page every time they click the
menu. The developers want the content load on the same page with the URL changing.

ReactJS
ReactJS is an open-source JavaScript library used to build a user interface for Single Page
Application. It is responsible only for the view layer of the application. It provides developers to
compose complex UIs from a small and isolated piece of code called "components." ReactJS
made of two parts first is components, that are the pieces that contain HTML code and what you
want to see in the user interface, and the second one is HTML document where all your
components will be rendered.

Jordan Walke, who was a software engineer at Facebook, develops it. Initially, it was developed
and maintained by Facebook and was later used in its products like WhatsApp & Instagram.
Facebook developed ReactJS in 2011 for the newsfeed section, but it was released to the public
in May 2013.

Features of ReactJS
1. JSX: JSX is a JavaScript syntax extension. The JSX syntax is processed into JavaScript
calls of React Framework. It extends the ES6 so that HTML like text can co-exist with
JavaScript React code.
2. Components: ReactJS is all about components. ReactJS application is made up of
multiple components, and each component has its logic and controls. These components
can be reusable, which help you to maintain the code when working on larger scale
projects.
3. One-way Data Binding: ReactJS follows unidirectional data flow or one-way data
binding. The one-way data binding gives you better control throughout the application. If
the data flow is in another direction, then it requires additional features. It is because
components are supposed to be immutable, and the data within them cannot be changed.
4. Virtual DOM: A virtual DOM object is a representation of the real DOM object.
Whenever any modifications happen in the web application, the entire UI is re-rendered
in virtual DOM representation. Then, it checks the difference between the previous DOM
 representation and new DOM. Once it has done, the real DOM will update only the
things that are changed. It makes the application faster, and there is no wastage of
memory.
5. Simplicity: ReactJS uses the JSX file, which makes the application simple and to code as
well as understand. Also, ReactJS is a component-based approach which makes the code
reusable as your need. It makes it simple to use and learn.
6. Performance: ReactJS is known to be a great performer. The reason behind this is that it
manages a virtual DOM. The DOM exists entirely in memory. Due to this, when we
create a component, we did not write directly to the DOM. Instead, we are writing virtual
Components that will turn into the DOM, leading to smoother and faster performance.

ANGULAR-JS VS. REACT-JS