UNIT 6: ReactJS

The world can't live without mobile and web applications in this day and age. Everything is digitized,
from booking cabs to ordering food to make bank transactions. Thanks to the efficient frameworks
that provide a seamless user experience. One such robust frontend library is React.

React is a JavaScript-based UI development library. Facebook and an open-source developer

community run it. Although React is a library rather than a language, it is widely used in web
development. The library first appeared in May 2013 and is now one of the most commonly used
frontend libraries for web development.

React’s popularity today has eclipsed that of all other front-end development frameworks. Here is
why:

 Easy creation of dynamic applications: React makes it easier to create dynamic web
applications because it requires less coding and offers more functionality, as opposed to
JavaScript, where coding often gets complex very quickly.

 Improved performance: React uses Virtual DOM, thereby creating web applications faster.
Virtual DOM compares the components’ previous states and updates only the items in the Real
DOM that were changed, instead of updating all of the components again, as conventional web
applications do. 

 Reusable components: Components are the building blocks of any React application, and a
single app usually consists of multiple components. These components have their logic and
controls, and they can be reused throughout the application, which in turn dramatically reduces
the application’s development time.

 Unidirectional data flow: React follows a unidirectional data flow. This means that when
designing a React app, developers often nest child components within parent components. Since
the data flows in a single direction, it becomes easier to debug errors and know where a problem
occurs in an application at the moment in question.

 Small learning curve: React is easy to learn, as it mostly combines basic HTML and

JavaScript concepts with some beneficial additions. Still, as is the case with other tools and
frameworks, you have to spend some time to get a proper understanding of React’s library.

 It can be used for the development of both web and mobile apps: We already know that React
is used for the development of web applications, but that’s not all it can do. There is a framework
called React Native, derived from React itself, that is hugely popular and is used for creating
beautiful mobile applications. So, in reality, React can be used for making both web and mobile
applications.

 Dedicated tools for easy debugging: Facebook has released a Chrome extension that can be
used to debug React applications. This makes the process of debugging React web applications
faster and easier.
Features of React

React offers some outstanding features that make it the most widely adopted library for frontend app
development. Here is the list of those salient features.

 JSX 

JSX is a JavaScript syntactic extension. It's a term used in React to describe how the user interface
should seem. You can write HTML structures in the same file as JavaScript code by utilizing JSX.

const name = 'Simplilearn';

const greet = <h1>Hello, {name}</h1>;

The above code shows how JSX is implemented in React. It is neither a string nor HTML. Instead, it
embeds HTML into JavaScript code.

Virtual DOM:
 DOM stands for Document Object Model . It is the most important part of the web as it
divides into modules and executes the code. Usually, JavaScript Frameworks updates the
whole DOM at once, which makes the web application slow. But react uses virtual DOM
which is an exact copy of real DOM. Whenever there is a modification in the web
application, the whole virtual DOM is updated first and finds the difference between real
DOM and Virtual DOM. Once it finds the difference, then DOM updates only the part that
has changed recently and everything remains the same. 
The Virtual DOM is React's lightweight version of the Real DOM. Real DOM manipulation is
substantially slower than virtual DOM manipulation. When an object's state changes, Virtual DOM
updates only that object in the real DOM rather than all of them.

 What is the Document Object Model (DOM)?

Fig: DOM of a Webpage

DOM (Document Object Model) treats an XML or HTML document as a tree structure in which
each node is an object representing a part of the document.

 How do Virtual DOM and React DOM interact with each other?
When the state of an object changes in a React application, VDOM gets updated. It then compares its
previous state and then updates only those objects in the real DOM instead of updating all of the
objects. This makes things move fast, especially when compared to other front-end technologies that
have to update each object even if only a single object changes in the web application.

Architecture 

In a Model View Controller(MVC) architecture, React is the 'View' responsible for how the app
looks and feels. 

MVC is an architectural pattern that splits the application layer into Model, View, and Controller.
The model relates to all data-related logic; the view is used for the UI logic of the application, and
the controller is an interface between the Model and View.

Extensions

React has many extensions that we can use to create full-fledged UI applications. It
supports mobile app development and provides server-side rendering. React is extended
with Flux, Redux, React Native, etc. which helps us to create good-looking UI.
React goes beyond just being a UI framework; it contains many extensions that cover the entire
application architecture. It helps the building of mobile apps and provides server-side rendering. Flux
and Redux, among other things, can extend React.

One-way Data Binding: One-way data binding, the name itself says that it is a one-
direction flow. The data in react flows only in one direction i.e. the data is transferred from
top to bottom i.e. from parent components to child components. The properties(props) in
the child component cannot return the data to its parent component but it can have
communication with the parent components to modify the states according to the provided
inputs. This is the working process of one-way data binding. This keeps everything
modular and fast.

Since React employs one-way data binding, all activities stay modular and quick. Moreover, the
unidirectional data flow means that it's common to nest child components within parent components
when developing a React project.

Fig: One-way data binding

Debugging

Since a broad developer community exists, React applications are straightforward and easy to test.
Facebook provides a browser extension that simplifies and expedites React debugging. 
Fig: React Extension

 Performance: As we discussed earlier, react uses virtual DOM and updates only the
modified parts. So , this makes the DOM to run faster. DOM executes in memory so we
can create separate components which makes the DOM run faster.

Conditional Statements: JSX allows us to write conditional statements. The data in the

browser is displayed according to the conditions provided inside the JSX.
Syntax:
const age = 12;
if (age >= 10)
{
<p> Greater than { age } </p>;
}
else
{
<p> { age } </p>;
}

Components in React

React.js divides the web page into multiple components as it is component-based. Each
component is a part of the UI design which has its own logic and design as shown in the
below image. So the component logic which is written in JavaScript makes it easy and run
faster and can be reusable.

Components are the building blocks that comprise a React application representing a part of the user
interface.
React separates the user interface into numerous components, making debugging more accessible,
and each component has its own set of properties and functions.

Here are some of the features of Components - 

 Re-usability - A component used in one area of the application can be reused in another area.
This helps speed up the development process.

 Nested Components - A component can contain several other components.

 Render method - In its minimal form, a component must define a render method that
specifies how the component renders to the DOM.

 Passing properties - A component can also receive props. These are properties passed by its
parent to specify values.

Have a look at the demo for a better understanding. 

Consider two components, a Functional component and a Class Component with the following code. 

import React from "react";

function FunctionalComp() {

  return <p>This is a Functional component</p>;

}

export default FunctionalComp;

import React from "react";

export class ClassComp extends React.Component {

  render() {

    return <p>This is the Class Component </p>;

  }

export default ClassComp;

A class component comes with a render method that renders onto the screen. Export default is used
to export only one object (function, variable, class) from the file. Only one default export per file is
allowed. 

Evidently, these components are imported into the main component which is App.js in our case. 

import React from "react";

import FunctionalComp from "./Components/FunctionalComp";

import ClassComp from "./Components/ClassComp";

function App() {

  return (

    <div>

      <h1>Hello! Welcome to Simplilearn</h1>

      <FunctionalComp />

      <ClassComp />
    </div>

  );

export default App;

Once run, the browser will look like this. 

 Simplicity: React.js is a component-based which makes the code reusable and React.js

uses JSX which is a combination of HTML and JavaScript. This makes code easy to
understand and easy to debug and has less code.
Let’s see how react.js works by creating an application.
Follow the below steps to create a react application:
Step 1: Create a react application by using the following command:
npx create-react-app foldername
Step 2: Change your directory to the newly created folder.
cd foldername
Project Structure: A project structure is created as shown below:
 Step 3:  Now create a new file as PassMessage.js in src folder and add the following code.
 Javascript

import React from 'react'

import App from './App';

  

function PassMessage() {

    return ( 

        <div>

             <h1 style = {

              {

                textAlign: 'center',
                 color: 'green'

              }

            }> Congratulations!!!You passed the test. </h1>  

        </div>

    )

  

export default PassMessage

Step 4: Now create another file as FailMessage.js in src folder and add the following
code.
 Javascript

import React from 'react'

import App from './App'

  

function FailMessage() {

    return ( 

        <div >

            <h1 style = {

            { textAlign: 'center', 

            color: 'green' } 
             }> You failed the test.Better luck next time..!! </h1> 

        </div>

    )

  

export default FailMessage

        
Step 5: Now add the following code in App.js.
 Javascript

import PassMessage from './PassMessage';

import FailMessage from './FailMessage';

  

  

function App(props) {

    const isPass = props.isPass;

        if (isPass) {

            return <PassMessage/> ;

        }

    return <FailMessage/> ;
 };

  

export default App;

Step 6: Add the below code in index.js.

 Javascript

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

import FailMessage from './FailMessage';

import PassMessage from './PassMessage';

  

  

ReactDOM.render( <App isPass = { true }/>, 

              document.getElementById('root'));

Step to run the application: Open the terminal and type the following command.
npm start

Output:

If you give the value of isPass={true} in index.js, then it will give the following output:
If the value of isPass={false} in index.js, then the following output is displayed.

Pros and Cons of ReactJS

Today, ReactJS is the highly used open-source JavaScript Library. It helps in creating impressive
web apps that require minimal effort and coding. The main objective of ReactJS is to develop
User Interfaces (UI) that improves the speed of the apps. There are important pros and cons of
ReactJS given as following:

Advantage of ReactJS
1. Easy to Learn and USe

ReactJS is much easier to learn and use. It comes with a good supply of documentation, tutorials,
and training resources. Any developer who comes from a JavaScript background can easily
understand and start creating web apps using React in a few days. It is the V(view part) in the
MVC (Model-View-Controller) model, and referred to as ?one of the JavaScript frameworks.? It
is not fully featured but has the advantage of open-source JavaScript User Interface(UI) library,
which helps to execute the task in a better manner.

2. Creating Dynamic Web Applications Becomes Easier

o create a dynamic web application specifically with HTML strings was tricky because it
requires a complex coding, but React JS solved that issue and makes it easier. It provides less
coding and gives more functionality. It makes use of the JSX(JavaScript Extension), which is a
particular syntax letting HTML quotes and HTML tag syntax to render particular
subcomponents. It also supports the building of machine-readable codes.

3. Reusable Components

A ReactJS web application is made up of multiple components, and each component has its own
logic and controls. These components are responsible for outputting a small, reusable piece of
HTML code which can be reused wherever you need them. The reusable code helps to make
your apps easier to develop and maintain. These Components can be nested with other
components to allow complex applications to be built of simple building blocks. ReactJS uses
virtual DOM based mechanism to fill data in HTML DOM. The virtual DOM works fast as it
only changes individual DOM elements instead of reloading complete DOM every time.

4. Performance Enhancement
ReactJS improves performance due to virtual DOM. The DOM is a cross-platform and
programming API which deals with HTML, XML or XHTML. Most of the developers faced the
problem when the DOM was updated, which slowed down the performance of the application.
ReactJS solved this problem by introducing virtual DOM. The React Virtual DOM exists entirely
in memory and is a representation of the web browser's DOM. Due to this, when we write a
React component, we did not write directly to the DOM. Instead, we are writing virtual
components that react will turn into the DOM, leading to smoother and faster performance.

5. The Support of Handy Tools

React JS has also gained popularity due to the presence of a handy set of tools. These tools make
the task of the developers understandable and easier. The React Developer Tools have been
designed as Chrome and Firefox dev extension and allow you to inspect the React component
hierarchies in the virtual DOM. It also allows you to select particular components and examine
and edit their current props and state.

6. Known to be SEO Friendly

Traditional JavaScript frameworks have an issue in dealing with SEO. The search engines
generally having trouble in reading JavaScript-heavy applications. Many web developers have
often complained about this problem. ReactJS overcomes this problem that helps developers to
be easily navigated on various search engines. It is because React.js applications can run on the
server, and the virtual DOM will be rendering and returning to the browser as a regular web
page.

7. The Benefit of Having JavaScript Library

Today, ReactJS is choosing by most of the web developers. It is because it is offering a very rich
JavaScript library. The JavaScript library provides more flexibility to the web developers to
choose the way they want.

8. Scope for Testing the Codes

ReactJS applications are extremely easy to test. It offers a scope where the developer can test and
debug their codes with the help of native tools.

Disadvantage of ReactJS
1. The high pace of development

The high pace of development has an advantage and disadvantage both. In case of disadvantage,
since the environment continually changes so fast, some of the developers not feeling
comfortable to relearn the new ways of doing things regularly. It may be hard for them to adopt
all these changes with all the continuous updates. They need to be always updated with their
skills and learn new ways of doing things.
2. Poor Documentation

It is another cons which are common for constantly updating technologies. React technologies
updating and accelerating so fast that there is no time to make proper documentation. To
overcome this, developers write instructions on their own with the evolving of new releases and
tools in their current projects.

3. View Part

ReactJS Covers only the UI Layers of the app and nothing else. So you still need to choose some
other technologies to get a complete tooling set for development in the project.

4. JSX as a barrier

ReactJS uses JSX. It's a syntax extension that allows HTML with JavaScript mixed together.
This approach has its own benefits, but some members of the development community consider
JSX as a barrier, especially for new developers. Developers complain about its complexity in the
learning curve.

Example of React Js to print Hello World.

import React from "react";

import ReactDOM from "react-dom/client";

function Hello(props) {
return <h1>Hello World!</h1>;
}

ReactDOM.render(<Hello />, document.getElementById("root"));

/*
The examples in this tutorial are created using the
create-react-app.

Install the create-react-app,

and you will be able to run the same examples on your computer.

In this example we create a component called 'Hello'.

The component is rendered in a container called 'root'.
*/

Output:
Hello World!