DEV Community

Cover image for Why choose React for frontend?
Digvijay Jadhav
Digvijay Jadhav

Posted on

Why choose React for frontend?

Before I dive into some of the cool things you can do with React, lets understand what is React.
React JS is basically a JavaScript library built and maintained by Facebook. React is an efficient, declarative, and flexible open-source JavaScript library for building simple, fast, and scalable frontends of web applications.

Language used to build React applications is JSX. JSX is basic JavaScript that facilitates HTML quoting and uses the syntax of this HTML tag to make subcomponents

ReactJS is a stronger framework because of its ability to break down the complex interface and allow users to work on individual components.

ReactJS comes with the core objective is to deliver the best rendering performance possible. Its strength stems from the emphasis on individual parts. ReactJS helps a developer to break down the complicated UI into smaller components, rather than operating on the entire web framework

Key benefits of ReactJS for front-end development

  1. Easy to Learn & Easy to Use : React, compared to other popular frontend frameworks like Angular & Vue, is much easier to learn. In fact, it’s one of the main reasons why React gained so much traction in little time. It helps businesses quickly build their projects.

  2. Helps to build rich user interfaces : React supports frontend libraries such as Bootstrap, Material ui, Chakra, Tailwind etc to build rich UI.

  3. Offers fast rendering : the DOM model is tree-structured. So, a minor modification at a higher level layer can awfully impact the user interface of an application. To solve this, Facebook has introduced a virtual DOM feature. Virtual DOM is the virtual representation of DOM that allows testing all changes to the virtual DOM first to calculate risks with each modification.

  4. Strong community support : Currently, React JS has attained [136,079 stars on Github] and 1,331 regular contributors. Not only that, but experts are also regularly uploading free React tutorials on Youtube and writing in-depth React tutorial articles & blogs on the internet. For instance, a simple “free React tutorial” search on Google gives 13,00,00,000 results. The latest survey by Stack Overflow also revealed that React is the most loved web framework, while Angular ranked 9th on the same list.

  5. Reusable elements : Technology used to be far more complicated than that, but ReactJS provides us with the ability to do just the same. Each React project is constructed using the so-called reusable elements. This means that by calling from other components, each element of the interface that you have already built can be used anywhere in your project.

Currently React is used by many fortune 500 companies

Airbnb, Tesla, Tencent QQ, and Walmart are among the top brands that built their mobile apps using the React Native framework.

React web framework, on the other hand, is currently being utilized by famous companies including Netflix, Paypal, NASA, BBC, Lyft, and New York Times to name just a few.

React Js inherits React Native which allows us to use the native look and feel to develop any mobile application(Android & IOS).

Like any other technology, React also has its flaws. The good news is that the number of them decreases month by month, year by year, and those left behind are acceptable in many cases.

  • Incompleteness : It is not a framework and hence demands other libraries to be included, which may include learning curve as well.

  • The high pace of development : Everything is evolving, and some developers are not comfortable with keeping up with such a pace. At the same time, we should admit that React’s core API has become more stable and rarely changeable.

  • Lack of proper documentation : he problem with documentation traces back to constant releases of new tools. Different and new libraries like Redux and Reflux are promising to accelerate the work of a library or improve the entire React ecosystem.

Along with React we also have Angular2, Vue.js, Ember.js,Vanilla js, etc according to business requirements one can use suitable frontend framework.

Tell us below comment section which frontend framework do you use?

Discussion (27)

Collapse
sroehrl profile image
neoan

Due to its dominance I work a lot with React. However, I personally disagree with a few key points of your post:

  1. It's easier to learn

How so? While Angular has indeed quite a learning curve, most other libraries and frameworks are easier to tackle. Have a look at something like Alpine JS for example. Even Vue is easier to conquer.

  1. Offers fast rendering

Well, compared to what? It neither shines against vanilla not other frameworks.

  1. Reusable components

Again a mute point. Component based structure is what EVERY big name out there does. So what is the difference? Does Angular not have reusable components? Or Vue? Or Lit?

I guess my problem is mostly that you describe things that are either true for more or less all frameworks or that your arguments aren't accurate or relevant. This in turn leads me to believe that you lack in-depth experience with other frameworks. That itself isn't an issue, but it's misleading in the sense that you explain React from a perspective of comparing options.

Collapse
elefint profile image
elefint

I would agree, I recently started dabbling with React / Angular / Vue. Vue was much easier to learn for a complete beginner.

Collapse
anubhav0fnu profile image
Anubhav

So which framework you vouch for?

Collapse
sroehrl profile image
neoan

Well, that depends on the situation. I didn't intend to imply that React isn't a good choice for many cases. However, if I was told I can only choose one framework, then I would probably go with Vue

Collapse
siy profile image
Sergiy Yevtushenko

Take a look at Solid.js. youtube.com/watch?v=Xw9XMNn2k0o

Collapse
vonziu profile image
vonziu • Edited on

Easier to learn ?

  • JSX,
  • Hooks/redux,
  • function components/class components,
  • cssInJs/normal styling,
  • render props,
  • HOC,

And it is just a tip of the iceberg.
There is a lot to learn. Much more than for vue for example. The problem is that, it is hard for newcommer to know what to use and when, and that is what pushed me away from React(tried 3 times already and every time I did some react I was thinking: "Really ? It is that convoluted ? I can do it in Vue in 3 lines of code").

Collapse
joshnuss profile image
Joshua Nussbaum

I prefer Svelte, I find it easier to use than React. For example, here's a comparison of React Hooks vs Svelte

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
sroehrl profile image
neoan

I understand the excitement for it! However, it produces white a lot of transpiled code which leads me to believe bigger applications might suffer performance. However, I haven't built anything bigger with it yet so take this with a grain of salt.

Thread Thread
Sloan, the sloth mascot
Comment deleted
sroehrl profile image
neoan

Well, that didn't sound right considering the approach svelte takes, so I googled to see if anybody did an inflection analysis. You are of course right when it comes to smaller applications: since the "workload" is mostly done while transpiling most of our every-day projects will be WAAAY smaller with svelte. However, looking at the way it compartmentalizes code, it's clear that this advantage will eventually turn.
The nicest study on this I found is located at github.com/halfnelson/svelte-it-wi...

The good news is: the inflection point to React seems to be at beyond 130kb of source code, which is high enough for nearly every project. So over all, you are right in saying that there aren't any concerns.

There is something to be said about the way you look at this, though: neither the benchmarks you provided nor the pure bundle size comparison are suitable for performance evaluations. What you are actually interested in is what happens when you scale your application in order to evaluate whether or not a technology is suitable for industry-sized applications, as they tend to grow more or less indefinitely in the case of product success.

Collapse
cnayan profile image
Nayan Choudhary

You surely haven't tried Vue, when you mention simplicity and easy to learn. Vue 3 is coming up with similar state management. So, what's the point?

Besides, the article is very subjective and lacks data to convince that React is best.

Collapse
filipslezak profile image
FilipSlezak

React is not a framework.

Collapse
digvijayjadhav98 profile image
Digvijay Jadhav Author

Yes, It is JS library. Have explained below

Collapse
kachidk profile image
Victor Nwanguma

Why I refer React (personal opinion) is beacause React is pure javascript, and the lack of abstractions actually helped me learn Javascript. I love Vue (easy learning curve and simplicity in writing SFC) but when I use vue I tend to feel like a noob and forget some javascript concepts and inbuilt functions. I still use Vue tho, but It depends on the project and the people I'm working with.

I advice developers to learn the language, not the framework or library, I have seen developers fail interview questions because they know React or Vue instead of Javascript.

Collapse
pengeszikra profile image
Peter Vivo

In my opinion React greatest advantage is simple state handling. No one else can modify state, just action. That really simplify the software debugging, because most of the time enough check the state.

Second one is JSX, that is depend on pure JS and I can use any possibilities of modern ES6+. Really don't need to write any other files in project just JS files.
(in real case, we use scss and glsl files too).

Our html file is this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>appercell</title>
</head>
<body>
  <div id="appercell"></div>
  <script src="./index.js"></script>  
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

In our really complex single page medical science application FE side written in react, hold 10k+ line of code, and react help keep our code well organised. Component reusability also true. Plus we can write a whole Component in a single arrow function ... really handy.

In this project shows me, the simple useState + useSagaReducer without redux or useContext is very useful even complex application.

Collapse
onekiloparsec profile image
Cédric Foellmi

Purely opinionated post. Most what is described is true for Vue.js (the only other I know). Even the bold fortune 500 companies argument is probably true for other frameworks... (large companies rarely have a consistent codebase throughout).

Collapse
husseinkizz profile image
Hussein Kizz

Let me also defend react here, but before that, I can truly say there's no better technology z than technology x but it depends on the use case, and am sure there some projects where maybe using other js frameworks like vue is the best option, however to me as a react developer I think react's power comes from it's popularity or community so that you can find that StackOverflow answer easily, and 2 is the ability to use libraries where someone did what you want to do in the best way possible and you don't have to reinvent the wheel like in some frameworks, this saves time and 3 react has seen a steady fast growth than other frameworks, we stated with classes, now hooks! and in all, react has a greater market in terms of employment than other frameworks. These are the reasons why I choose react, and by the way should we talk about its next???

Collapse
pavelee profile image
Paweł • Edited on

React advantage is simplicity. Low entry point make it the first choice for ppl who just need to learn modern web development in fast pace.

Cost of that is requirement of third party software for more advantage feature purpose, but it’s still good deal.

Collapse
akrambzgh profile image
Akram Bouzoualegh

I think is the best js framework for frontend so i choose it

Collapse
digvijayjadhav98 profile image
Digvijay Jadhav Author

Yeah! me too

Collapse
shubhampatilsd profile image
Shubham Patil

I choose a JS framework based on how much code I can take from external libraries instead of writing my own 😤 💪

Collapse
pruthvi2103 profile image
Pruthvi Shetty

Trust me, the only reason you use react is because its easier to find answers and tools that solve your problem, nothing else

Collapse
jakeb1090 profile image
jakeb1090

For my case, I have to agree. But to me, that reasoning makes it a feature, not a bug

Collapse
ultimategemini profile image
NF

No thanks!

Collapse
jonrandy profile image
Jon Randy • Edited on
Collapse
digvijayjadhav98 profile image
Digvijay Jadhav Author

Ohh great!