In-depth React

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

React is a JavaScript library created for building fast and interactive user interfaces for web and mobile applications. It is an open-source, component-based, front-end library responsible only for the application’s view layer. In Model View Controller (MVC) architecture, the view layer is responsible for how the app looks and feels.

React was created by Jordan Walke, a software engineer at Facebook.

Nowadays, React is used by many top brands. Airbnb, Tesla, Tencent QQ, Instagram, and Walmart are some of the market leaders who opted to build their mobile apps using React Native. On the other hand, Netflix, Paypal, NASA, BBC, and similar Fortune 500 companies utilize React Web Framework actively!

With these examples, out of many more, we want to share the point that React must be a truly useful frontend and mobile app dev framework.

But how, and why is React so useful?

Let’s take this Instagram page as an example. The main advantage of using React is that the UI is divided into several components. This immensely increases the ease with which the code can be debugged and worked on.

Is React a framework or a library?

Some argue that React is not a framework, but a library since it controls only View. It’s controlling the flow of the application, as opposed to letting the framework do it. This discussion can be further looked at here.

React uses declarative code, which describes what we want, instead of saying how to do it. It merely describes the result but doesn’t act as a step-by-step tutorial on how to do it. This leads to declarative code being lightweight, easier to understand, and ultimately having fewer bugs. Also, React brought this fantastic feature called Virtual DOM that enabled developers to implement SSR without needing to update the whole view each time during an update.

Now, let’s talk about what React offers and why its popularity soared:

• Easy creation of dynamic applications: It’s easier to create dynamic web apps due to the fact React requires less coding and offers more functionality
• Improved performance: With Virtual DOM which compares the components’ previous states and updates only the items in the Real DOM that were changed, web applications are created quicker
• Reusable components: Components are the building blocks of any React application, with more of them making up applications. Each component has its logic and controls, and they can all be reused throughout the application, reducing development time
• Unidirectional data flow: With the data flowing in a single direction, it is far easier to debug errors and pinpoint where the problem first occurred
• Web AND mobile apps: A framework called React Native, derived from React itself, is a great way to create wonderful mobile apps
• Dedicated debugging tools: Facebook has released a Chrome extension that can be used to debug React applications. This makes the process of debugging React web applications faster and easier.

A lot of our projects have switched to, or are done in React. It has been incredibly more simple to solve bugs, which saved a lot of our time!

“After refactor to React, this was an easy fix! Instead of having to manually maintain the creating, placement, styling, and deleting when the results were ready it was just a matter of executing the UI update straight away, and checking if results were ready or not and add what was going to show if not ready, all while using standard UI elements.”

However, it is not all perfect, React comes with some disadvantages of its’ own:

• The high pace of development: Since the environment continually changes, some developers might not be as comfortable constantly relearning, with all continuous updates
• Poor Documentation: Constantly updating technologies have their perks, and cons: to overcome the updates and changes, developers write instructions on their own of new releases and tools in current projects
• View Part: only the UI layers of the app are covered, so to get a complete tooling set, you might need to use some other technologies as well
• JSX as a barrier: This useful syntax extension can be a barrier to some, as its complexity might be something to complain about

When we sum up the pros and cons of React, it seems like the pros exceed. Like with any other framework, it takes a bit of time getting used to, but once learned — it offers many perks to developers.

Take a look at this graph, it shows a clear divergence between downloads of React and the two other main JS libraries, Vue and Angular. It seems pretty straightforward that React is a top competitor nowadays, and we’re excited to see how it develops in the future.

The truth is, a modern developer should constantly learn new skills, new technologies, in order to stay up to date with the latest updates. Technology is fast evolving, and we should adapt to that. If React is something you’re not familiar with, we highly recommend checking out the official React tutorial.

Take a moment and share your opinions about React with us through our social media!