Tech Review Series: React

We begin the new tech series dedicated to front-end development and our first technology for review is React. Known for its speed and multiple ways of use, React is one of the most popular front-end development tools out there. 

Whether you are choosing between available options or want to know more about React, this article will serve as a useful and informative guide. Enjoy the reading!

React: a brief history and the current state

React is a library created in 2011 by Facebook – or by Jordan Walke, to be more precise. The Facebook team wanted to make the news feed update in real-time while users use chats. For that, the team needed a dynamic and high-performing UI. At that time, there were no available tools that would correspond to this request. So Jordan Walke proposed putting XHP into the Javascript coordinate system. Surprisingly, it worked, and soon React was deployed on Facebook in 2011. Later in 2012, React was also used on Instagram and the initial public release of React happened in 2013.

Throughout the years, React has seen multiple changes and improvements. One of the most notable is probably React Fiber released in 2017. React Fiber was introduced as an alternative to Stack, the old rendering algorithm of React. The problem with Stack was that it had become too outdated and needed to be replaced. Thus, the development team created React Fiber – a set of algorithms for rendering graphics. 

We also need to mention React Native – an open-source framework for mobile applications that was released in 2015. The reason why Facebook created it was perfectly explained by Mark Zuckerberg who stated that “a company was betting too much on HTML as opposed to native”. This is how React Native came into play and became one of the best tools for building mobile applications due to its speed and efficiency.

As for the current state of React, the numbers look pretty good. In 2020, React was the second most loved web framework according to Stack Overflow’s survey. It has a big community that keeps growing, it’s used by over 8700 industry leaders, and it was at the top of Google Trends in 2020 (compared to Vue and Angular). The list of brands that use React is impressive as well: it features Facebook (obviously!), Atlassian, Airbnb, Dropbox, Skyscanner, and more. And this is actually a solid indication that this library is reliable and has a lot to offer.

React: technology type

React is a component-based Javascript library that helps develop the view layer of the applications. In terms of the MVC model (Model-View-Controller), React belongs to the V part which stands for the View. 

React is based on three pillars:

1. Component-based

React allows easy building of complex apps by breaking them down into smaller components. These components are independent of each other and can be easily managed, maintained, tested, and debugged.

1. Declarative style

With declarative style, developers only have to create simple views for each state of an app, and React will take care of the components’ updating and rendering.

1. “Learn Once, Write Anywhere”

The existing code can be easily reused whenever it’s needed. This reusability also contributes to the ease of code maintenance.

Now let’s have a look at the features that make React so loved by developers. The key features of this library are:

• Virtual DOM: React uses virtual DOM which means one element can be rendered without the need to render the whole DOM (equals high speed).
• One-way data flow: implies faster data flow and reduces the boilerplate.
• Custom renderers: allow building custom implementations.
• SSR (server-side rendering): improves your application SEO.

As you can see, they are aimed at maximally optimizing the speed of the library while retaining a high level of performance.

JSX

JSX is an XML-like syntax for Javascript that is used by React. JSX allows developers to pass around tree structures that are composed of HTML elements as if they were Javascript values. In other words, JSX makes XML and/or HTML text coexist with Javascript or React code. 

There has been a bit of controversy around JSX in the React community. While some developers claim it makes things more difficult, others say that JSX is an essential tool to use when working with React. It’s not obligatory to use JSX and it can be quite challenging for beginners. However, if you have some experience with React already, you’ll notice how JSX facilitates your work.

Expert Opinion

React is a stable and mature technology and is a great library for frontend development. React is easy to learn due to the simplicity of its syntax and well-written documentation. Configuration examples, together with a variety of libraries for variant cases, allow you to start real coding in minutes. As well, your application can have a high unit test coverage and the component-based system really helps with it.

As for performance and speed, virtual DOM does its job – React applications are really fast. But don’t forget to follow certain rules to help the React DOM library perform its job efficiently. Also, keep in mind that React components automatically re-render whenever there is a change in their state or props.
Since React is responsible for the view layer only, a developer has to patch together the rest of the app instead of having a single go-to solution. This is something that one has to keep in mind when working with react. As well, the React world moves quickly and this can result in the code becoming outdated quickly. Such rapid changes can be tiring for developers.

React is a very fast and beautiful solution for small to medium-sized projects. But you need to be prepared for the sharply growing complexity of support for large projects. And if SEO is extremely important to you, you should take a closer look at SSR and the React-based project NextJS.

Full Stack Engineer

Igor