ReactJS is a declarative, efficient, and flexible JavaScript library for building

reusable UI components. It is an open-source, component-based front end library

responsible only for the view layer of the application.

A ReactJS application is made up of multiple components, each component responsible

for outputting a small, reusable piece of HTML code.

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.

Why learn ReactJS?

Today, many JavaScript frameworks are available in the market(like angular, node),
but still, React came into the market and gained popularity amongst them.

The previous frameworks follow the traditional data flow structure, which uses the
DOM (Document Object Model). DOM is an object which is created by the browser each
time a web page is loaded. It dynamically adds or removes the data at the back end
and when any modifications were done, then each time a new DOM is created for the
same page. This repeated creation of DOM makes unnecessary memory wastage and
reduces the performance of the application.

Therefore, a new technology ReactJS framework invented which remove this drawback.
ReactJS allows you to divide your entire application into various components.
ReactJS still used the same traditional data flow, but it is not directly operating
on the browser's Document Object Model (DOM) immediately; instead, it operates on a
virtual DOM. It means rather than manipulating the document in a browser after
changes to our data, it resolves changes on a DOM built and run entirely in memory.
After the virtual DOM has been updated, React determines what changes made to the
actual browser's 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.
-------------------------------------------------------------------
React create-react-app
Starting a new React project is very complicated, with so many build tools. It uses
many dependencies, configuration files, and other requirements such as Babel,
Webpack, ESLint before writing a single line of React code. Create React App CLI
tool removes all that complexities and makes React app simple. For this, you need
to install the package using NPM, and then run a few simple commands to get a new
React project.

Requirements
you need to have installed the following things in your system.
Node version >= 8.10
NPM version >= 5.6

In React application, there are several files and folders in the root directory.
Some of them are as follows:
1) node_modules: It contains the React library and any other third party libraries
needed.
2) public: It holds the public assets of the application.
It contains the index.html where React will mount the application by default on the
<div id="root"></div> element.
3) src: It contains the App.css, App.js, App.test.js, index.css, index.js, and
serviceWorker.js files. Here, the App.js file always responsible for displaying the
output screen in React.
4) package-lock.json: It is generated automatically for any operations where npm
package modifies either the node_modules tree or package.json.
5) package.json: It holds various metadata required for the project. It gives
information to npm, which allows to identify the project as well as handle the
project?s dependencies.
6) README.md: It provides the documentation to read about React topics.
-------------------------------------------------------------------
React Features
JSX
Components
One-way Data Binding
Virtual DOM
Simplicity
Performance

1) JSX: stands for JavaScript XML. It is a JavaScript syntax extension. Its an XML
or HTML like syntax used by ReactJS.
2) Components:ReactJS is all about components. ReactJS application is made up of
multiple components, and each component has its own logic and controls. These
components can be reusable.
3) One-way Data Binding:ReactJS is designed in such a manner that follows
unidirectional data flow or one-way data binding. The benefits of one-way data
binding give you better control throughout the application.
4) Virtual DOM :A virtual DOM object is a representation of the original DOM
object. It works like a one-way data binding. 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 have actually
changed. This makes the application faster, and there is no wastage of memory.
-------------------------------------------------------------------
Disadvantage of ReactJS
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.
-------------------------------------------------------------------
AngularJS Vs. ReactJS
DOM Regular DOM Virtual DOM
Language JavaScript, HTML JSX
-------------------------------------------------------------------
React JSX
JSX(JavaScript Extension), is a React extension which allows writing JavaScript
code that looks like HTML. In other words, JSX is an HTML-like syntax used by React
that extends ECMAScript so that HTML-like syntax can co-exist with JavaScript/React
code. The syntax is used by preprocessors (i.e., transpilers like babel) to
transform HTML-like syntax into standard JavaScript objects that a JavaScript
engine will parse.
-------------------------------------------------------------------
React Components
Earlier, the developers write more than thousands of lines of code for developing a
single page application. These applications follow the traditional DOM structure,
and making changes in them was a very challenging task. If any mistake found, it
manually searches the entire application and update accordingly. The component-
based approach was introduced to overcome an issue. In this approach, the entire
application is divided into a small logical group of code, which is known as
components.
Functional Components
function components are a way to write components that only contain a render method
and don't have their own state.We can create a function that takes
props(properties) as input and returns what should be rendered.

Class Components
It requires you to extend from React. Component and create a render function which
returns a React element. You can pass data from one class to other class
components.
-------------------------------------------------------------------
React State
The state is an updatable structure that is used to contain data or information
about the component and can change over time. The change in state can happen as a
response to user action or system event.

Props
Props are read-only components. It is an object which stores the value of
attributes of a tag and work similar to the HTML attributes. It allows passing data
from one component to other components. It is similar to function arguments and can
be passed to the component the same way as arguments passed in a function. Props
are immutable so we cannot modify the props from inside the component.

1)Props are read-only.State changes can be asynchronous.

2)Props are immutable.State is mutable.
3)Props allow you to pass data from one component to other components as an
argument.State holds information about the components.
4)Props can be accessed by the child component. State cannot be accessed by child
components.
-------------------------------------------------------------------
1. In react, we cannot return false to prevent the default behavior. We must call
preventDefault event explicitly to prevent the default behavior.
------------------------------------------------------------------
React Router
Routing is a process in which a user is directed to different pages based on their
action or request. ReactJS Router is mainly used for developing Single Page Web
Applications. React Router is used to define multiple routes in the application.
When a user types a specific URL into the browser, and if this URL path matches any
'route' inside the router file, the user will be redirected to that particular
route.

Need of React Router

React Router plays an important role to display multiple views in a single page
application. Without React Router, it is not possible to display multiple views in
React applications. Most of the social media websites like Facebook, Instagram uses
React Router for rendering multiple views.

$ npm install react-router-dom --save

Components in React Router

<BrowserRouter>: It is used for handling the dynamic URL.
<HashRouter>: It is used for handling the static request.

What is < Link> component?

This component is used to create links which allow to navigate on different URLs
and render its content without reloading the webpage.

React Router Switch

The <Switch> component is used to render components only when the path will be
matched. Otherwise, it returns to the not found component.
-------------------------------------------------------------------
React Hooks
If you write a function component, and then you want to add some state to it,
previously you do this by converting it to a class. But, now you can do it by using
a Hook inside the existing function component.

Hooks State
Hook state is the new way of declaring a state in React app. Hook uses useState()
functional component for setting and retrieving state.
import React, { useState } from 'react';

function CountApp() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);

return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
export default CountApp;

-------------------------------------------------------------------