What is REACT and why is it so popular ?

What Is REACT ?

React

React is a JavaScript library for building fast and interactive user interfaces. It was developed at Facebook in 2011 and currently it is the most popular JavaScript library for building user interfaces.

React vs Angular vs Vue

As you can see on google trends, React is dominating the space of libraries and frameworks for building user interfaces. The other two players in the above graph are Angular and Vue. So, if you want to expand your job opportunities as a front end developer, you should have React on your resume. At the heart of all React applications are Components.

React Components

A component is essentially a piece of the user interface. So, when building applications with React, we build a bunch of independent, isolated and reusable components and then compose them to build user interfaces.

Every React application has at least one component which we refer to as the root component. This component represents the internal application and contains other child components. So, every React application is essentially a tree of components.

Tree of Components

Here is the representation of these components in a tree. So, above all we have App and below that we have Navbar, Profile, Trends and Feed. Now, feet includes several tweet components. Each tweet component can include a like component which we can reuse on other pages or even in different applications. So, each component is a piece of user interface. We can build these components in isolation and then put them together to build complex user interfaces.

In terms of implementation, a component is typically implemented as a JavaScript class, that has some state and render method. The state here is the data that we want to display when the component is rendered and the render method is responsible for describing what the user interface should look like.

React Element

The output of this render method is a React element which is a simple plain JavaScript object that maps to a DOM element. It is not a real DOM element, it is just a plain JavaScript object that represents the DOM element in memory.

So, React keeps a representation of the DOM in memory which were referred to as the Virtual DOM. Unlike the browser or the real DOM, this virtual DOM is cheap to create.

When we change the state of the component, we get a new React element. React will then compare this element and his children with the previous one, it figures out what is changed and then it will update a part of the real DOM to keep in sync with the virtual DOM. So, that means when building applications with React, we no longer have to work with DOM API in browsers. We simply change the state of our components and React will automatically update the DOM to match that state and that's exactly why this library is called React because when the state changes, React essentially reacts to the state change and updates the DOM.

Want to become a Web Developer ? Check out our other article on How To Become a Web Developer

REACT or Angular ?

React or Angular

Both React and Angular are similar in terms of their component based architecture. However, Angular is a framework or a complete solution while React is a library, which only takes cares of rendering the view and making sure that the view is in sync with the state.