React

React is a framework that employs Webpack to automatically compile React, JSX, and ES6
code while handling CSS file prefixes. React is a JavaScript-based UI development library.
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.

Why React?

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.
ReactJS Advantages

1. React.js builds a customized virtual DOM. Because the JavaScript virtual DOM is quicker
than the conventional DOM, this will enhance the performance of apps.

2. ReactJS makes an amazing UI possible.

3. Search - engine friendly ReactJS.

4. Modules and valid data make larger apps easier to manage by increasing readability.

5. React integrates various architectures.

6. React makes the entire scripting environment process simpler.

7. It makes advanced maintenance easier and boosts output.

8. Guarantees quicker rendering

9. The availability of a script for developing mobile apps is the best feature of React.

10. ReactJS is supported by a large community.

Advantages and Limitations (Pros and Cons)

Advantages

1. Makes use of the JavaScript structure known as virtual DOM. Since JavaScript's virtual
DOM is quicker than the conventional DOM, this will boost the speed of programs.

2. Can be used with various systems and on both client and server sides is commendable.

3. Components and identify trends make larger apps easier to manage by increasing clarity.

Limitations

1. Only addresses the app's angle and distance; as a result, additional techniques must be
selected if you want a full collection of development tools.

2. Employs inline scripting and JSX, which some programmers might find uncomfortable.
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 Document Object Model (DOM)

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 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.
Data Binding

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

This extension, for example, adds a React tab in the developer tools option within the
Chrome web browser. The tab makes it easy to inspect React components directly.

Now that you know the key features of React, let’s move on to understanding the pillars of
React.
Components in React

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.

A named export or just export can also be used to export multiple objects from a file.

Now that you have an understanding of React Components, move on to React Props.

Props in React

Props, short for Properties in React Props, short for properties, allow the user to pass
arguments or data to components. These props help make the components more dynamic.
Props in a component are read-only and cannot be changed.

Consider the class Classprops.js with the following code.

import React, { Component } from "react";

class Classprops extends Component {

render() {

return (

<div>

<h1>

Hello {this.props.name} from {this.props.place}! Welcome to

Simplilearn

</h1>

</div>

);

export default Classprops;

Here, you use the properties called "name" and "place," whose values can be passed when
importing the component into the parent component.

In the main component, App.js, consider the following code.

import React from "react";

import Classprops from "./Classprops";

class App extends React.Component {

render() {

return (

<div>
 <Classprops name="Learner 1" place="PlaceX"/>

<Classprops name="Learner 2" place="PlaceY"/>

<Classprops name="Learner 3" place="PlaceZ" />

</div>

);

export default App;

Here, the component is called thrice, and it passes three different values for the same
property. The following is the output of the code.

Now that you know how props work, let's understand how a state in React works.

State in React
A state is an object that stores properties values for those attributed to a component that could
change over some time.

• A state can be changed as a result of a user's action or changes in the network.

• React re-renders the component to the browser whenever the state of an object changes.

• The function Object() { [native code] } is where the state object is created.

• Multiple properties can be stored in the state object.

• this.

• setState() is used to alter the state object's value.

• The setState() function merges the new and prior states shallowly.

Consider the following component, State.js.

import React, { Component } from 'react'

class State extends Component {

constructor(props) {

super(props)

this.state = {

message: "Subscribe to Simplilearn"

render() {

return (

<div className='App'>

<h3>{this.state.message}</h3>

</div>

)
 }

export default State

Here, the h3 tag displays the value of ‘message,’ a state object.

In your main component, App.js, consider the following code.

import React from "react";

import "./App.css";

import State from "./Components/State";

class App extends React.Component {

styles = {

fontStyle: "bold",

color: "teal"

};

render() {

return (

<div className="App">

<h1 style={this.styles}> Welcome </h1>

<State />

</div>

);

}
}

export default App;

The output will look like this.

setState() Method

A state can be updated to event handlers, server responses, or prop changes. This is done
using setState method.

this.setState({ quantity: value }

setState() method enqueues all the updates made to the component state and instructs React to
re-render the component and its children with the updated state.

Consider the scenario where the subscribe button is clicked. On clicking the button, the
display message must change. To implement this, you make use of the setState() method.

import React, { Component } from 'react'

class State extends Component {

constructor(props) {
 super(props)

this.state = {

message: "Subscribe to Simplilearn",

sub: 'Subscribe'

ChangeMessage=()=>{

this.setState({

message: "Thank you for Subscribing",

sub: "Subscribed"

})

render() {

return (

<div className='App'>

<h3>{this.state.message}</h3>

<button onClick={this.ChangeMessage}>{this.state.sub}</button>

</div>

}
export default State

You first create an additional state object called “sub” for the button. When a button click
event occurs, the method “ChangeMessage” is called. This method in turn uses the setState()
method to update the values of message and sub and re-render the output.

After clicking the button, the output will look like this.
Although the above can be achieved using just props, using state makes it extremely efficient.
The following section covers the differences between props and State in React.

Props vs. State in React

Props State

The data of the components that

Props are used to send data and event handlers to a
must be presented to it store the
component's children.
view in the state.

Props are immutable — they can't be modified after they've The data is stored in the state, which
been set. might change over time.

Both functional and class components can benefit from the Only class components can use the
use of props. state.

The parent component sets props for the children Event handlers are typically
components. responsible for updating the state.