Introduction to React:

---

ReactJS is a declarative, efficient, and flexible JavaScript library for building reusable UI components. It is an open-source, component-based front end library which is responsible only for the view layer of the application.

It was initially developed and maintained by Facebook and later used in its products like WhatsApp & Instagram.

React allows you to design and develop complex UIs from very small and isolated pieces of code referred to as components.

---

Prerequisites to learn React:

1. The two very first things to be well familiar with are HTML and JavaScript.
2. Candidate should be familiar with the Object Oriented concepts like: Objects, Classes, Functions, Arrays, etc.
3. ES6 (ECMA Script 6) is also an important thing to know in advance.

---

React Advantages:

1. Usage of virtual DOM as against regular DOM makes it quicker since virtual DOM is a lot quicker over the regular DOM.
2. Ability to work on both Client and Server-side with the help of other frameworks.
3. With the use of component and data patterns, readability is improved way better than other UI frameworks.

---

React Limitations:

1. Some developers might feel awkward using inline templates and JSX.
2. React covers only View and Model layers of an application, hence making it dependent on some framework or the other to complete the tooling set for development.

---

React Features:

1. JSX: JSX is JavaScript syntax extension. It isn't necessary to use JSX in React development, but it is recommended.
2. Components: React is all about components. You need to think of everything as a component. This will help you maintain the code when working on larger scale projects.
3. Unidirectional data flow and Flux: React implements one-way data flow which makes it easy to reason about your app. Flux is a pattern that helps keeping your data unidirectional.
4. License: React is licensed under the Facebook Inc. Documentation is licensed under CC BY 4.0.

---

Working of React:

Since React is developed as a JavaScript library that can either be used on client side or be used on server side as well, the following diagram depicts this concept very easily-

The process flow is like-

1. Browser running on client requests for some HTTP/HTTPS content.
2. NodeJS server after getting the respective page from react environment renders onto the browser.
3. Meanwhile, for simple client side loading of pages, browser requests directly to React and gets the content.

---

ReactJS requirements:

ReactJS needs the following things to be installed in advance

1. Node.JS and NPM: NodeJS is an open-source run-time environment for JavaScript code. On a machine, it runs as a server program that renders both the JS and HTML pages in browser. NPM is a package manager for JavaScript language. It is the default package manager of Node.JS.
2. React and React DOM: ReactJS or simply React is an open-source JavaScript library for designing front end and UI elements. React DOM is a package that enables a developer manipulates the DOM of any page by minimal efforts.
3. Webpack: Webpack is a popular module bundling system for Node.JS. It bundles JS and CSS codes to simplify the understand ability.
4. Babel: Babel is a JavaScript transcompiler that converts new JavaScript into plain old ES5 JavaScript that can run in any browser (even the old ones).

---

React Virtual DOM:

The Virtual DOM is an abstraction of the HTML DOM. It is lightweight and detached from the browser-specific implementation details. Since the DOM itself was already an abstraction, the virtual DOM is, in fact, an abstraction of an abstraction.

Perhaps it’s better to think of the virtual DOM as React’s local and simplified copy of the HTML DOM. It allows React to do its computations within this abstract world and skip the “real” DOM operations, often slow and browser-specific.

---