React.js is Popular. 5.5 Reasons Why

Nithyusha Arumalla bio photo By Nithyusha Arumalla website Comment

Get "hand"-delivered posts.

If you have been following the market trend you might have observed how JavaScript is rapidly taking over the world. Thanks to Node.js, JavaScript is one of the more popular languages that you can use in building server side applications as well.

Having been a DevOps Engineer for a while, I wanted to take a sneak peak on what is going on in the front-end world; all I heard about was React.js. So I wanted to dive in and see what is it all about.

This article is not intended for seasoned React Pros but for newbies who are wondering what is it that makes “React.js” so special when there are lot of other js libraries and frameworks to choose from.

Disclaimer: My knowledge on React.js is very limited but this article might be a good start (hopefully) for people who wants to get a basic familiarity with react.js.

React.js is a JavaScript library developed by some cool folks at Facebook, known for building great user interfaces. If you are familiar with a MVC architecture, React focuses relatively more on ‘V’ part, which stands for View. I have seen many comparisons between React and angular etc. It is like comparing library against framework. Angular is a MVC framework while React is a library that serves few specific purposes. If you are looking to build a complete dynamic application, you cannot do it with just ‘React’ alone.

But then you may ask why is React so popular?

Well, here are a few reasons. 

A. React makes it easy for you to work with JavaScript. It has special syntax called JSX, which is like a template language. It allows you to combine your HTML with JavaScript (Yes, you read that correctly). Using JSX is not a requirement but it makes your life easy while writing components. Ex:

const element = <h1>It’s crazy right?</h1>;

B. Components are the heart and soul of React. In other words, everything in React is a component. They give you the ability to split your UI into independent and reusable pieces by isolating it which are similar to modules. It basically defines how your DOM (Document Object Model) elements are created and how your users can interact with them. You can use plain JavaScript or JSX to define your components.

C. You can do much more when you decouple yourself from DOM and use it as a rendering platform or target. It lets you have a better control over the life cycle of the application. Thanks To React, you can render on the client or server. Instead of updating the DOM node completely, it uses a different approach called Virtual DOM. Using this, react keeps your last DOM version in its memory and when it a new DOM is versioned, it basically does computes the difference of the two DOM versions and updates just the difference rather than doing a full replace. This way you can avoid all those costly DOM operations and happily update your user interfaces without panicking.

D. React did not just prove that DOM can be used as rendering target but also capitalizes on the idea of uni-directional data flow. When you build large applications it gets difficult to start reasoning about the architecture of the applications because you will have hundreds of developers working on the single code base. With complex applications it gets difficult to identify bugs because there are lot of events firing that mutate the data all over the place. By keeping your data in uni-directional there will be only a single source of truth. Application state is contained in specific “stores” so the components of your application remain loosely coupled. This gives you a clear idea on how your components react to state change.

E. React developer tools makes debugging your application much easier. You can easily inspect your component hierarchies.

E.5 It’s backed by “FACEBOOK” developers. With their brand recognition, it is more attractive to the developer community.

References:

Yes React it Taking Over Front End Development, The Question is Why
Components and Props

comments powered by Disqus