Is React Just Hype?

If you are an experienced or intermediate software developer or engineer, you must have heard about React. It is a frontend library for building user interfaces. It is not a framework. It is Facebook’s response to Angular and JQuery. For PHP developers, it squares up with Vue.js.

If you run the topic of this article on Google, you would see similar topics, where some have concluded that React is just a fad, others have asked “why the hype” while others agree it is worth it. Again, nowadays if you are looking for a fullstack software developer job and you are not speaking React, Angular, Vue.js or JQuery, you will feel odd and meet many rejections. So many developments in software development such as progressive web applications, microservices, single page applications which are the progenies or successors to monolithic and multiple page applications makes the discussion on React interesting.

Meanwhile, React developed by Facebook may also give us a clue why everyone is talking about it but believe me, concluding on this subject matter requires laying all the cards on the table and looking at everything objectively.

Before going ahead, React “is a JavaScript library for building user interfaces” according to the official documentation. It is not a web development framework and is developed with Javascript which is the number 1 trending programming language of 2019 according to Tiobe.

React is gaining lots of traction because of a few things I have mentioned above. We are in the era where loose-coupling is the preferred software architecture where we can farm microservices which are independently developed and maintained. We are no longer building monolithic applications although there are use cases where we must. However, combining the different paradigms situationally to solve problems is the way to go.

Let’s talk about the hype around React. I happen to work on my first react project in 2020. I have about 6 years experience as an intermediate Java Backend Developer. I have known programming longer than that. I have also done dynamic frontend development but with JSP, JSF and Ajax. However, I have been on the backend over the past few years. In 2018, I was working towards a change of job towards fullstack and living in Nigeria, I was inclined to remote jobs. Most of the jobs I found required knowledge of React, Angular or Vue.js for the frontend. I had started upgrading my knowledge of Javascript in 2018. Built a medium level ecommerce backend with Node.js/Express in 2018 and the missing link was Angular or React.

However, I got a client in January 2020 who wanted me to fix an application a developer has been working on with React Native. React Native is the mobile library for React (Facebook), more like Kotlin and Flutter for Google. The difference with React Native is “write once run everywhere”. Utilizing the knowledge of React without much learning curve. I will not dive into the performance issues of React Native but my experience working on that mobile app made me understand why there is hype around React.

Tutorials on React take many things for granted. You need an intermediate programming knowledge to really understand React. You need some hand-ons experience on frontend development for it to make sense. Most tutorials will tell you that it is complicated but they won’t tell you why. I had to abandon many tutorials because they assume that anyone coming to learn React should have gotten a certain level of programming experience. The fact is that before React can make sense, you need deep knowledge of Objective Oriented Programming (OOP); and some knowledge of JSX, Javascript, CSS, HTML and DOM. You should be familiar with Node.js and Typescript.

React is a small library with a few features like props, state, component, lifecycle, and lately hooks. It is a component-based library. Let me break this down.

Components are classes, normal OOP classes which defines an object, its characteristics (object parameters) and behaviours (methods). Since React is Javascript, the methods are functions.

Props are properties of components, but they are specially reserved for super classes, that is properties of inherited classes (components). While state are the properties of a component. It is designed that way so that components have their states private to them. Anyone with good knowledge of OOP knows why this is important from SOLID principles. Lifecycle methods define the behaviour of components from their instantiation to their destruction.

The catch 22 is that everything is written in Javascript, lots of arrow functions, and other interesting features of Javascript. Hooks were introduced lately I think because those coming vanilla Javascript would find the concept of classes daunting. So hooks were introduced to mimic lifecycle methods which were not available previously in function components .

Let’s compare React to Angular which is the closest rival. Angular follows a pure MVC and separation of concern concepts. For instance, each Angular components concept of three files — one to hold the business logic and template, one to render and the other for styling. But React basically needs just one file where a component is declared and in which styling can also be declared.

After working on the mobile app for one month, I began to really understand why the hype around React. If you have developed with JSP and JSF, they are almost what React does with many advanced techniques and design. However, for anyone who has a fairly good knowledge of programming, they would find React somewhat of fancy way of building user interfaces without much hassles. Understanding the concepts in React requires mapping what you already know and given that most of our applications nowadays are REST based calling backend over HTTP.

In conclusion, React is neither a hype nor fad. Given the direction software development is going and the way it brought together different paradigms to achieve a somewhat simpler breakthrough to frontend development, it is going to be here for sometime before some other new framework takes over.