Why do we need React?

The four main reasons, I think, that React is such a great idea and why it’s become so popular:

1. React is easily maintainable.

Now, we’ve all seen, as web projects grow in size, especially the front-end JavaScript code becomes very messy. You soon end up in a mess of spaghetti code with all sorts of interactions and data and state manipulations strewn all over the place.

React allows us to replace the spaghetti code with well-structured and logical UI components. Right from structuring the code files, down to how the code actually works, React allows code to be much more maintainable, especially when working in teams.

2. React code is declarative, as opposed to imperative.

Instead of telling the computer how to do something, we just specify what we want. Instead of specifying every single step of how to handle user interaction - when a user clicks a button, what to update, which bit of the UI to change - we simply tell React what we would like for our data to do, and React automatically refreshes the UI and handles all the UI transitions.

You can think of it a bit like SQL, which is a declarative language, not imperative. You simply define your query in terms of what data you’re looking for, and then the SQL database figures out the most efficient way to get that answer to you.

That’s what React does for UIs.

3. React allows us to build faster UIs.

One of the main underlying concepts behind React is the idea of the Virtual DOM - a copy of the DOM.

React creates a virtual representation of the browser DOM and does all the operations on the virtual DOM instead of directly manipulating the DOM every time the data changes.

Whenever the data changes, say, from the user action or from the server, React creates a new version of the Virtual DOM, and it then compares the old version of the virtual DOM to the new one, finds the differences between them, and only then makes the minimum amount of change that it needs to make to the actual DOM.

Making changes to the actual browser DOM is very expensive and slow. By minimising those changes, React manages to make things a lot faster than us manually updating DOM elements, as we would typically do with something like jQuery.

4. React allows us to write cross-platform code.

Instead of write once and run everywhere, React community has adopted the concept of “Learn once, write anywhere”.

Once you learn how to write web UIs using React, you can use the same style of code, the same structure, to write native code for mobile apps. There’s very little difference in how they they work.

Facebook has, in fact, found that for some of their apps they can share between 80 and 90 per cent of code between their Android and iOS apps. So this allows you to write a lot less code and achieve a lot more through it.

Especially for web developers looking to get into mobile development, this is one of the key features of React which makes it more attractive than other competing libraries and frameworks.