The purpose behind React JS in Front-End Development

React JS (React) is a JavaScript library which was developed by Facebook and released in 2013. It is used to build User Interfaces (UI) in web applications. Although it can also be used to build desktop applications by incorporating other frameworks such as Electron JS, the focus behind this library is to deploy fast and scalable UI.

So why do we need React libraries to build UI? Can’t we just build it with regular HTML (HyperText Markup Language) and CSS (Cascading Style Sheets)?

Short answer, Yes.

Long answer, No.

TLDR (too long didn’t read) answer, who has the time to write extensive code for just one project. Reduce, reuse, and recycle the code.

Why is React a library and not a framework?

We can build a UI with regular HTML, CSS, and JavaScript. However, the React library provides many more functionalities and ultimately, streamlines the workload to make it easy. See our previous blog, Tailwind CSS, as an example behind this explanation. Furthermore, we can create stylings for web pages using CSS. However, instead of writing extensive lines of code, we can use frameworks like Tailwind CSS, making the code concise, structured, and most importantly, fast.

In the software development industry, there are two technological approaches when developing code: frameworks and libraries. A library is a set of additional components or code that was previously written and then it is requested by a program. It can be modified in its own way based on the requirements from the project. On the other hand, a framework is a library that does not possess any finished functions, but rather it provides a blueprint to build projects.

In other words, imagine a library in terms of a ‘room containing books’, where the books are a set of completed functions ready to use off the shelf. Whereas frameworks are the shelves and cataloging system that hold and categorize the books, a structured and organized approach to build projects.

The React library can provide us with the above mentioned beneficial utilities for Front-End Development. For example, in the modern version of React, they provide a useful hook to easily perform sophisticated operations; see our blog on Webhooks as an expansion on this notion. The outcome is by and large the same, but the only difference being time and effort.

Taking it back to a ‘room containing books’ analogy, we can write the words on the pages of each book, then build the shelves that store the books and finally deploy them for each individual project. Not only does this take time but an immense amount of effort, especially for every single assignment. Instead, we are now able to deploy code using a mix-match bundle or as a coherent package, reusing components or code from various sources based on our needs.

Now, taking the analogy one step further. Imagine if you needed a book but new information came out that only required one additional page. Instead of rewriting the entire book, you would simply add that page onto the book you possess; components added onto the project. Furthermore, imagine if there was no need for the pages you never read or used. In that case, simply take them away and thereby keeping the book slimmer and lighter; less data for storage, making the components lean.

This is hard to imagine in the conventional sense, but an analogy is a comparison of two things; may not be the best comparison, but a comparison nonetheless.

Most useful feature of React

In the React library, there are many useful features to make developing easier and more efficient. Below are some of the key features:

• Component-Based: This is one of the main attributes which is incorporated on their official React Library website. Due to React being component based, this library allows people to build applications in a modular way. That is why it is easy to reuse components throughout the application.

• Virtual DOM (Document Object Model): This is an important core feature from the React library and a difficult topic to comprehend. In short, whatever we see as HTML on a website is traditionally Real DOM. Instead of creating Real DOM, React uses Virtual DOM to avoid expensive Real DOM manipulation. A topic we can discuss further on a future blog.

• Server-side rendering: When content on the web page is rendered on the server and not the browser using JavaScript. This feature improves the Search Engine Optimization (SEO) of an application.

• State Management: It is a process for managing the data that the components need in order to render. This is easy to integrate with React applications, which is very helpful for large applications to pass data throughout the program.

• Performance:Many people love React for this reason. For instance, if we compare it with Angular, then they perform a two-way data binding and use Real DOM. However in React, they use a one-way data binding process and use Virtual DOM. Also the size is much smaller when an application is built.

• Community support: Although every active library and framework provides community support on its development, from our point of view, React is very much ahead and has extensive community resources, such as System Developer Kits (SDK), blog posts, glossary, etcetera.

These are not the only benefits of the React library. If we dive deeper, we learn examples such as JSX (Javascript XML), a method to easily write HTML in React, or Testing, a library set to help test React components without relying on their implementation details and many other examples which we can discourse on a future blog.

Conclusion

Our approach to building the Ark-am website was based on the above information. We wanted a website that was lean, responsive, and modern. Using React, we were able to build reusable components throughout the site which were based on our needs. Using Next.js, we were able to leverage off the framework and allow for customizability. Not only is Next.js easy to integrate into React, but by combining the two, we were able to benefit from the Server-Side Rendering and attain a more responsive website. Other key factors, such as State Management, or Component-Based code also contributed to our decision.

With a deeper understanding, React is a powerful library at our disposal. For beginner developers, React is a very good choice. For senior developers, React requires less keystrokes and allows them to efficiently build complex projects. There is a lot to learn in the React ecosystem and we recommend you get started as soon as feasible.

Thank you and happy learning.