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?

Comments

[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.

[elefint]

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

[Amohammadi2]

Actually one of the reasons why I believe react is better than other frameworks is that it has a larger community support and, great development tooling and it has tons of different libraries for every use case. Also I should mention that react has maintained a much more stable API compared to Angular and Vue at this point.

From my perspective, these things make react the best choice for enterprise web application development.

But, react has some trade-offs too. Apart from the advantages of react that were mentioned above, react has some problems too:

• Too much boilerplate code to write
• Really complicated state management strategies
• Too easy to abuse its features and develop applications in a wrong way

Sometimes, it's worth to use react and sometimes it's not. I believe choosing a web app framework depends on the type of project. The framework that fits your project's needs is the perfect choice.

[Anubhav]

So which framework you vouch for?

[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

[Sergiy Yevtushenko]

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

[Konrad Stącel]

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").

[Joshua Nussbaum]

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

[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.

[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.

[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.

[FilipSlezak]

React is not a framework.

[Digvijay Jadhav]

Yes, It is JS library. Have explained below

[Nwanguma Victor]

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.

[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>

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.

[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).

[Abhilaasha iyer]

This article effectively highlights the key advantages of using React for front-end development. Its ease of use, strong community support, and ability to create reusable components make it a top choice for developers. The introduction of the virtual DOM significantly enhances rendering performance, ensuring smooth user interfaces. Great insights!

visit: iroidtechnologies.com/technology/w...

[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???