Introduction to React JS

You can refer to this video to learn React js Introduction in Tamil.

React is a JavaScript open-source library created by Facebook. It is not a framework. 
React is only responsible for building rich user interfaces. 
React is used to build single-page applications.

React has component-based architecture. This lets you break down your application into small encapsulated parts which can then be

        composed to make a more complex UI as shown in the below image. Components make it possible to write reusable code.

React is declarative - We just need to tell React what we want to do. React with its dom library will build the actual UI.

Why learn ReactJS?

Today, many JavaScript frameworks/libraries 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 are 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 library was invented which removes 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 and will turn into the DOM.

Create react App

Install NodJs and npm

We can use this to quickly create the react application. We can simply run this cmd and the entire project will be created for you.
npx is an npm package runner which gets installed when you install node. Since then we are able to run and create react apps without

having to install it. npx takes care of that.

When you start the application, It will open the browser on localhost 3000

Folder structure

package.json - Contains the dependencies and the scripts required for the project.

    Eg: React version listed as dependency. There are some scripts to run, build, test the application.

package-lock.json - It ensures the consistent installation of your dependencies.

node-modules - This is the folder in which all the dependencies are installed. It is generated when running the create-react-app cmd.

public - 

        index.html - Only one html file we are going to have in the application. We are building a single page application. The view might

dynamically change in the browser. But this html file gets served up. We are not going to add any code here. Here,

the react will control the UI. At runtime react will take this div tag and it will ultimately be responsible for the UI.

src - 

        index.js - Here we’ll specify the root component which is the <App/> component and DOM element which will be controlled

                        by react. Here the DOM element is the id with ‘root’. The <App/> component will be rendered in the root element.

        App.js - App component is present in the App.js. It is responsible for the html displayed in the browser. App components

                      represent the view we see in the browser.

        App.css - For styling which applied in the App.js.

        App.test - For unit test.

        index.css - For body tag styling.

        Components - It represents the part of the UI. As in the previous image we have 5 components. Header, Footer, Side navigation,

                                 Main content, other to contain the above components that is the root(App) component. Each of the 4 nested

                                 components describes only the part of the UI. However all the components come together to make up the entire

                                 application. Components are also reusable. The same component can be used with different properties. It displays

                                 different information. Eg: The side nav component can be left side/right side nav. It can contain other components.

When npx starts executing, the index.html will be saved in the browser. Which contains the root DOM node. Next controls enter to the

index.js, react DOM render the App component into the root DOM node. The App component contains the html which is ultimately

displayed in the browser.