Why React.js?

What problems does react solve?

Back in the day, we had HTML files for each page and every time we moved from one page to another, the browser would have to send requests to the server each time. But in single-page applications, like React.js, the Javascript files just update the DOM in the browser without having to send a request to the server. The birth of React.js took place in 2013 by Facebook.

Things that were achieved by React.js:

• Good architecture
• Organizing code
• Manipulate data
• The flow of data throughout applications

Imperative Approach ( Not very React)

• People would directly interact with the DOM( DOM ( Document Object Model, a tree representation of the page, which is manipulated by Javascript).) using jQuery or different libraries. This way of programming was called imperative where each individual part was directly changed.
• DOM manipulation is one of the biggest performance bottlenecks. It takes a long time for DOM changes to happen. The browser has to do two very intensive operations.
• Repaint or change an element on the page and refloat, which means recalculating the layout of the page. Basically changing anything in the DOM can be very expensive in terms of time.

Declarative Approach (The React way!)

• React.js uses more of a Declarative approach. Meaning, we just tell what the app should look like, and React would do the rest.
• We want to write some Javascript code and introduce a JS object, React will hold that JS object, the blueprint of our whole app, and update the DOM whenever it is needed. This resulted in better code quality.

Reusable Component:

• React is built around this idea of reusable components. Smaller components are joined together to make bigger components, for example, image component, navigation component, etc.
• People can directly copy-paste components from Material UI, Semantic React, etc., and use them in different projects.
• These components in React are just plain simple Javascript functions that receive input or attribute sometimes called Javascript props.

Unidirectional data flow:

• The state: which is the data of our app, works with components that are built using JSX (HTML like syntax inside of Javascript) and these all combine give us two things:

1. React Components
2. State of our application

function React( state, components){ }

This function will create a Virtual DOM (Javascript version of the actual DOM). It is also a tree-like object that gives React a blueprint of how the app should update the actual DOM. Anytime we want to change something on our webpage, the state of our app has to change. The data will flow in only one direction, if any changes happen for example if a user clicks a button, the state change will go down the components which also makes it easier to debug.

Things we learned today:

• React takes a declarative approach
• It is Unidirectional
• Uses Virtual DOM