What Is React (React js) & Why Is It So Popular?

 


Many peoples who start their career in web development want to know what is React. in this article we cover everything you need to know about React.

What is react

React is a JavaScript library for building fast and interactive user interfaces. It was developed at Facebook in 2011 and currently it’s the most popular JavaScript library for building user interfaces as you can see on google trends React is dominating the space of libraries and frameworks for building user interfaces.


 

The other two players here are angular and view. 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. 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 complex 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. If you have worked with angular 2 or higher it should sound familiar. Here is an example let’s imagine we want to build an application like Twitter. We can split this page into components like navbar, profile, trends and feeds.


 

Here’s a representation of these components in a tree. So on the top we have app and below that we have navbar, profile, trends, and feed.

Now feed includes several tweet components. Each tweet component can include a light component which we can reuse on other pages or even in different applications.

So as you see each component is a piece of UI. We can build these components in isolation and then put them together to build complex UIs. 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, as you can tell, is responsible for describing what the UI should look like. The output of this render method is a React element which is a simple plain JavaScript object that maps to a Dom element.


 

It’s not a real Dom elements, but just a plain JavaScript object that represents that Dom element in memory.

Virtual Dom

So React keeps a lightweight 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 a component 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 it in sync with the virtual Dom. So that means when building applications we React, unlike vanilla JavaScript or jQuery we no longer have to work with the Dom API in browsers. In other words we no longer have to write code in query and manipulate the Dom or attached event handlers to Dom elements.

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.

So React or angular?

Well 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. It only takes care of rendering the view and making sure that the view is in sync with the state.

It’s all React does. Nothing less nothing more. For this very reason React has a very small API to learn. So when building applications with React we need to use other libraries for things like routing or calling HTTP services and so on.

But this is not necessarily a bad thing, because you get to choose the libraries that you prefer as opposed to being fixed with what angular gives you which often breaks from one version to another.

*

Post a Comment (0)
Previous Post Next Post