By growing a dynamic web project, (for example famous social medias like Facebook, twitter or online stores like amazon or eBay) the number of http request on a page and the reload of page to update new variables, increases significantly. Frontend includes 3 parts: HTML, CSS and JavaScript. When the project gets big the number of JavaScript function calls and etc, gets bigger and the speed of load page decreases accordingly. Also, the handling of this for developers of website gets crazy and sometimes they get lost among all of these JavaScript calls.
Facing these issues in 2010, for first time google introduced a framework named Angularjs to handle mentioned problems, but it has many bugs or Defects. In 2013, Facebook released for first time the react js to overcome all mentioned problems efficiently. Although, google completely changed the Anularjs to make it more efficient and the new framework introduced in 2016 with name Angular (without js). Before birth of React and Angular, in early 2000, JavaScript libraries like jQuery, Ajax and Backebone.js took care of manipulating the DOM using JavaScript. But it worth to discover how React Js handles all of JavaScript complexities and what are its advantages than other JavaScript libraries.
There are 4 main concepts which react is made of and are the reasons of its popularity.
1- React manipulates the DOM, so no need to manipulate it directly!!
In a page like Facebook or twitter or etc, there are hundreds of components which are updated in a page and changing in page frequently. For example, when you log in to your social media page, the feed that is showing to you, or liking a post, commenting, advertise updates in side bar, new post, sharing and etc, all are events which change the DOM and in older ways it needed the new html update on page. Meanwhile there were libraries like Ajax which Asynchronously updates JavaScript with less efficiently, but react does it in a more efficient way.
2- React builds the website from individual, separated components.
As it could be seen in below image, a dynamic website made of many components. Each component could include a JavaScript class or function which handles the changes in data and states in that component. Imagine when the state of a component is changed, only that part refreshed without the need for entire website refresh or a new html page reload. This is the great thing which React Js will does as most efficient frontend framework behind the scene. React allows you to create your own HTML-Like tags (like we do in XML) and these new tags are “React Component” and deciding which component you create in your website, shows how senior react developer you are, because it effects on website performance.
3- Data can flow in one direction.
As it could be seen in below image, data could flow from parent component to its Childs and grand-Childs and the update in states could send back to parent nodes and again new data will flow from up to bottom. In other words, sibling nodes or grand-siblings node doesn’t have access to their data and this architecture, somehow, increases the speed of data flow and updates in states and eventually the speed of page load.
4- React is the UI, the rest is up to you.
React is a frontend framework which acts like an engine which could manipulate the DOM and what you see in browser (or even in mobile app) very efficiently. Deciding on Backend is up to you, which means react is kind of cross-platform UI and is compatible with all of backend technologies. Therefore, you are not restricted to JavaScript backend frameworks like node or express or nuxt, you can use react with Django or ASP.Net or Android or iOS to build what you want from your website.
I made a website using only react and JavaScript with capability of synchronous search item. Here is the link of website: https://tutorial-shop.ir