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!

Tech Review Series: React

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

i.maslakoff

The use of React: most common cases

There are many kinds of software applications out there and all of them have different requirements. Like any other tool, React has a certain set of features that make it highly suitable for certain applications that we will describe below.

SPAs

SPA stands for a Single Page Application and is probably the most common use case for React. The core idea behind a SPA is that it updates the content on the page without demanding a user to refresh it. A good example is Gmail: you can see new messages appearing in the mailbox without refreshing the whole page. 

React, in turn,  can display the applied changes without reloading the page. It happens due to the one-way data binding method when the changes made to the model affect the view but not vice versa. In this way, React is perfect for SPAs.

Social networks

In relation to the point above, React is great for working on social networks. Since React is great for building SPAs, it brings the benefits of a SPA to a social network, enabling it to update the content in real-time and boosting user experience. The SSR feature of React is a plus too as it allows doing initial rendering on the server and loading the subsequent pages from the client.

Data visualization

There is no need to repeat ourselves in saying how important data visualization is. Hence, it is also important to choose proper data visualization tools, and React happens to be just one.

The usage of virtual DOM allows React to quickly rerender the needed components and thus display the changing data in real-time. As well, React will take care of coming up with the best way to update the UI while you will only have to supply the data stream through the API.

E-commerce

E-commerce stores tend to have many elements such as filters, APIs, search engines, etc. So it’s a good option to manage these elements as independent reusable components – and that’s exactly what React does.

As well, React components are reusable: meaning, a developer can reuse the component within an app several times without the need to rewrite the code. This contributes to saving time and finances as no new code needs to be written (not always, at least).

React Pros and Cons

Even though React is the most popular front-end tool and receives lots of praise, there are certain disadvantages that one must be aware of. As well, React may not be suitable for certain kinds of applications due to its functionality.

Pros

Popularity: available and vast documentation, huge community, many available libraries and tools;
Performance: React shows a high level of performance due to the use of virtual DOM;
The high pace of initial development;
Component-based: makes it easy to perform layer abstractions and compose large pages from small components;
Testing: the unit testing of the UI components is quite easy and significantly impacts the overall maintainability of the project;
Time to market: choosing React as your technology can save you money due to the fast time to market; 
Open source: allows contributions and all necessary adjustment.

Cons

Has no opinion: being a library React has no opinion on how to solve problems that affect all project aspects;
Build time: build time (on a CI machine) for a small application can take a few minutues. But with a large application, it dramatically increases and could take up to 15 minutes;
Compatibility: while React itself is always compatible with other systems (which is a big plus), the libraries in use be not compatible – which can mecome a real bottleneck, especially for big long-term projects;
SEO: the use of React calls for additional efforts in order to obtain dynamic SEO;
Re-renders: React components automatically re-renders whenever there is a change in the state or props. Example, the use inline style to a big pure component, forgetting to specify a key, use of the index of the array elements.

Conclusion

React is among the tools that our development team at SoftTeco uses on a regular basis. However, before starting to work on a project, we carefully estimate every aspect of it to make sure that React would be a suitable solution.

Overall, React shows a great level of performance and helps create swift and robust applications so we definitely recommend it. And in the next article, we will review Angular – a tool that is often compared to React and is another popular choice for frontend development. Don’t forget to sign up for our newsletter and stay tuned!React is one of the most popular front-end development tools. Known for its speed and reliability, it is used in a variety of apps, from SPAs to e-commerce.

Want to stay updated on the latest tech news?

Sign up for our monthly blog newsletter in the form below.

Softteco Logo Footer