DEV Community

Cover image for 7 Reasons Why React is King of JavaScript UI Frameworks

7 Reasons Why React is King of JavaScript UI Frameworks

Kinanee Samson on July 10, 2022

React is still the best JavaScript framework to use for frontend web development in 2022, the framework features many out of the box tools that mak...
Collapse
 
sfleroy profile image
Leroy

React might be great for some. Not to rain on your parade but it's really not a framework, despite what people are claiming it to be. It's a library. Like jquery.

And there are tons of libraries that are of similar functionality. Like vue, svelte, or if you like actual frameworks, angular.

I've recently been charmed by svelte but for work, nothing beats angular for spas

Collapse
 
devdufutur profile image
Rudy Nappée

Since hooks and context, React can be seen as a framework, not as rigid as angular but still, you don't really need anything else.

Collapse
 
kodipe profile image
Konrad Przydział

Hooks and context have nothing to do with "framework". React is a UI library due to lack of concrete architecture IMO.

Thread Thread
 
brense profile image
Rense Bakker

Framework: "a supporting structure around which something can be built"

Cambridge dictionary: framework

What you're trying to say, it doesn't fit the angular definition of itself and angular calls itself a framework, so everything else is now not a framework? Thats not how words work :P Angular is a different kind of very opinionated framework. Opinionated frameworks are nice if everyone has the same opinion, which was (more or less) briefly the case when angular was first introduced, because it made 2-way data binding easy. Something which was hard(er) in other frameworks of the time like Backbone.js.

React very much defines a supporting structure around which something can be built. The built-in hooks are part of that structure. For an incomplete reference, take a look here: reactjs.org/docs/react-api.html or look at the typedefs for the React object to see what supporting structure React defines :P

Why are we even having this discussion? The trends are extremely obvious, angular is done. 2021.stateofjs.com/en-US/libraries... angular hasnt been popular even before Russia invaded Crimea :B You might as well try to defend ember.js 😅

Thread Thread
 
devdufutur profile image
Rudy Nappée

IMO it's a (light) framework because you don't have to add anything to write full featured applications et scale. I mention hooks because before them we needed a state management tool like redux.

Furthermore React enforce an opiniated unidirectional flowed component based architecture.

Thread Thread
 
kodipe profile image
Konrad Przydział

@brense I didn't mentioned Angular and its definition of framework, also I didn't defend any framework at all - just talk about React itself.

From my perspective React was and still is a library which solve exactly one problem - playing with VirtualDOM (and side effects) and translating it to changes in DOM. Of course you can write whole application around React but you can do it also around any other library like e.g. jQuery which solve also one problem.

Any other typicall problems like communication with API, state management, routing are solved not by React but 3rd-party libraries which in many cases just integrate other 3rd-party libraries with React (e.g. Redux).

When it comes to architecture/structure topic, React just reacts on certain side effects and run composed functions if something has been changed to modify VirtualDOM and DOM after all. I don't see here anything about supporting structure.

Thread Thread
 
brense profile image
Rense Bakker

I'm not sure how API communication and state management or routing translate to "structure" for you... IMHO those are domain specific choices. Some business logic doesnt even need routing or API calls...

React doesnt tell you how you should structure your code, thats not the definition of a framework. A framework IS a supporting structure ontop of which you can build. Which is exactly what React is. A framework that tells you how YOU should structure whatever you're building is opinionated and will ultimately fail because it can't keep up with rapid changes in software development.

Thread Thread
 
lalislau profile image
Marcos

It´s possible to mix angular and react in the same front-end project? React and vue, react and svelte? So you can call it a library. If not, react can be called a framework?

Thread Thread
 
brense profile image
Rense Bakker

Well technically anything is possible, but no, generally it's not a practice to include React in an angular project or vise versa etc.

Collapse
 
kalashin1 profile image
Kinanee Samson

I have actually built UIs with Angular. I even learned Angular before i learned react. Angular is a great framework, and it allows you to build very robust applications. I also like the Angular CLI too.

However apps that I built with Angular ends up being quite large, angular also enforces a strict application structure.

You have to learn TypeScript, if you don't already know how to use it, then you have to learn how to work with Observables, 😥.

Svelte comes close, i like how simple it is to get started with, it has an elegant syntax and a great state management solution which is built in.

Then Again i find myself running back to react, because some libraries I'd like to use doesn't really works out of the box, svelte has a great community but its nowhere near what react has.

Again like I said earlier, in some aspects some frameworks are better, however when it comes to overall performance remains dominant.

Collapse
 
shriji profile image
Shriji

Svelte plays very well with JS, this is a oldest arguments users from angular and react often pull from their books. If you really run back to react then you did not research and spend enough time to optimize with just JS.

Collapse
 
jekinney profile image
jekinney

Great comment until you attempted to pass your opinion as fact. The, arguably, big three vue, react and Angular do a fine job.

Collapse
 
lalit64 profile image
Lalit Yalamanchili

PS. Svelte is a compiler 😉

Collapse
 
shimatai profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct
Wagner

Angular is just a piece of shit. Imagine a Java/Node backend developer and I hate Angular. You write too much to get a ridiculous result.

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • Edited

The only reason to use React is probably the large community. I use it at work, but I really don't like it. It's not the fastest thing in the world, it uses JSX (which is an abomination), it encourages unstructured messy code...

I've also used VueJS and RiotJS (less well known, but has been around about as long as React - and seems to have been a large influence on Svelte) - and they are both much nicer to work with than React.

Collapse
 
raibtoffoletto profile image
Raí B. Toffoletto

I'm interested to hear why JSX is an abomination, because I cannot see why.

btw, people who do spaghetti code will do spaghetti code in any language / framework. Even the more strict ones, they just love 🍝.

As anything in JS, with great freedom comes great responsibility. 😉

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • Edited

For me, JSX harks back to the bad old days of PHP and ASP where logic and layout were horribly intertwined. JSX actively encourages this way of working once again - it's just awful. And yes, I know the mess is purely down to the way people are using it... but I've seen many other frameworks that keep this separation to a much greater degree - promoting much neater, coherent code.

Collapse
 
brianmcbride profile image
Brian McBride

JSX isn't bad, but I see @jonrandy 's point.

I think since the first days of app development anywhere, there has been the constant learnings of "don't put your business logic in your views."

I don't use Angular as my first pick of a tool, but partly the reason many devs don't like it is because it forces them to actually use a MVC (varient) pattern. Since hooks came around, I see more and more code just thrown into hooks and shoved into view components.

This makes the code harder to test in unit tests and automation. It makes it hader to refactor or update later. It makes it harder to debug. But it sure is easier to code on the first pass.

Like all coding languages though, JSX can be great. React expects the developer to properly architect the app. If you take the time to build your logic in isolated modules (that can still be called in a hook) you end up with the "contollers" and "services" in Angular. Unless you are building a portfolio website or something crazy simple - a proper React app/site is going to be just as big and heavy as an Angular site.

Collapse
 
retry2z profile image
Hristiyan Hristov

Not to boder but you can't compare library to framework angular expose tons of ways to optimize the application, sure is hard to learn but once you done it it's more easy than react. And to back up my words I work with react on cz it's the popular one and teach angular to students so I have to know them both

Collapse
 
kodipe profile image
Konrad Przydział • Edited

"React has a small learning curve"

React is easy to learn but hard to mastering. As a developer who worked a bit with React, Angular and Vue I think that the first one is the hardest one after all.

Usually community of React is discussing about hooks, contexts and other few features of library. They talk about UI libraries, forms handling etc. but there is much less discussions about architecture and good patterns at all (not only from React perspective).

As a developer who has to develop and maintain React project which has been written with "react-way" thinking before I become a team member, I must say that there is nothing worse thing than programming without focus on programming and framework/library-agnostic good patterns.

As a React developers we should talk more about decoupled business logic which is not handled by e.g. hooks but only integrated within them with UI, clean architecture and other good practices.

Collapse
 
npobbathi profile image
Nagesh Pobbathi

Yeah, good point. That's what we do when we generate the React code at Quest. We decouple the presentation and the business logic, so the presentation is generated automatically from the design and the business logic can custom-coded.

Collapse
 
mrkhan profile image
Mark Han

So true!

 
jonrandy profile image
Jon Randy 🎖️

I totally agree, but unfortunately the fact that it enables such an awful mixture of layout and logic can, and does, result in hideously coupled code. Again, I know it's down to how it's used and I have seen it very occasionally used well, but I think JSX is headed in wayyy the wrong direction.

Collapse
 
beggars profile image
Dwayne Charrington • Edited

Let's be honest, the number one reason people use React is because it's the popular option. There are so many better options out there that are not React which are much better. You don't hear about them as much because everyone is concerned with job security and not challenging the status quo.

React is PHP in the browser, evident by the fact it allows you to mix business logic and markup like PHP. It explains a lot that Facebook are behind it and they're a well-known PHP shop.

 
retry2z profile image
Hristiyan Hristov

You are completely right and not those things are just decorators and and pure classes you can actually drop zone drop rxjs and make it even less. Soon or later they ll face big problems not only write components and functionality and that's it. Once learn how Angular provide solutions they apply for all js libs. I teach thinkers after that if they want react or what workspace will require 3h video will be enough, but principles will remain.

Thread Thread
 
ashleyjsheridan profile image
Ashley Sheridan

@lukeshiru You can use Promises in Angular, Observables was mainly introduced while support for Promises was still being added in to browsers. As for things like Services, that's a standard feature in many languages and frameworks, it's a standard pattern that is worth learning. React has plenty of its own things that it does that are definitely not pure JS. Just look at JSX which has become so entwined with React that it's often difficult to find any pure React JS code these days in online examples or tutorials.

I've been using Angular for 6+ years (ever since it Angular 2 was in beta) but I've been using JS for a lot longer, so it's not entirely true that developers will always look for the Angular way of doing something. Personally, I've always put any language first, the frameworks and libraries come after. That goes for any language/framework/library combination.

One of the reasons I like Angular is the ability to write large scale applications. The last one I worked on in my previous role was over 40,000 lines of code and contained some very complicated functionality. That scale would have been possible with React, but the effort involved to ensure the code was clean and followed SOLID practices would have been far greater.

Angular isn't overengineered, it's just engineered. It's aimed at application development, and large scale projects. Most often, front end web projects are smaller and simpler, so I can see why it might seem that Angular is _always _the wrong choice. However, what Angular does give is a robust introduction into well-architected code, which is invaluable for front end devs who want to scale their applications into larger systems on the back end. React serves a different purpose, but that doesn't necessarily make it automatically better in all scenarios.

Collapse
 
jamesvanderpump profile image
James Vanderpump

No regrets of rewriting a big Vue site to React. I would probably rewrite it to the next best thing if it provides strong benefits and gains a bigger market share. Until that happens I'll happily ride the React train into the sunset.

Collapse
 
jwp profile image
John Peters

React is very popular. That alone makes it a great career choice. Its time will persist just like JQuery, which is still the most popular. But both probably have met their match with Webcomponents and WASM. These two are the future. But that's just my opinion. Zuckerberg is yucky too.

Collapse
 
brianmcbride profile image
Brian McBride

Let's just all let JQuery die off. sigh

Collapse
 
jekinney profile image
jekinney

One of the most biased articles I've read.

Years ago when Ember was a thing, might still be, was easier to find a great JavaScript dev if they were proficient in Ember.

What is best is dependent on the application and what developers are proficient at on the team. Another aspect to tie in the ember statement is most vue developers know actual JavaScript where many times Angular and React seem to always try to grab a plug in or use some magic. Ie more work to get out of work.

Collapse
 
damiensn profile image
Damien S • Edited

Nice article ! But personally I prefer Svelte since it has a clear and concise syntax and it's really faster than react. You have also a built in system to manage stores like you can do with react, which is also very practical.

Collapse
 
devdufutur profile image
Rudy Nappée

Great article ! I would add react is one of the only front-end framework which promote immutability and functional description of the UI (with plain JavaScript, not another weird HTML-like DSL)

Collapse
 
codert0109 profile image
Vasyl K

Wonderful reasons why front end developers should choose ReactJS.
In previous React JS, I used so many ref operations to avoid expensive rerendering instead of useMemo or useCallback.
I want to know whether this is good practice or not.
Thanks for reading.

Collapse
 
devdufutur profile image
Rudy Nappée

I have extensive use or refs too. I guess it's faster than memo or callback because it didn't have to check for dependencies changes on each render cycle.

Collapse
 
mitch_chanza_93fef780e873 profile image
Mitch Chanza • Edited

Well said!. But all the hype about the best framework or library is not necessary. As far as our ego is concerned , software developers we are the most confused and difficult breed in the universe. Have you noticed how C is criticised now? We forget that without C the we would not have other languages. I for one use all the tools suited to a job. I try to diversify my skills to remain relevant. Thats why i learned vue, jquery, nodejs, deno, angular, react. When a project comes i decide which stack to use based on requirements. They are all great tools.

Collapse
 
wilmela profile image
Wilmela • Edited

I will go with react and the likes of Next.js any day and time. The freedom they give is second to none. Angular is definitely cool too but kinda difficult to wrap your head around if you are a beginner.

Nice write up.

 
avinkavish profile image
avin-kavish

I think JSX is a genius invention. It eliminates the horrible unreasonability of template binding and just lets you build a coherant view in one logical flow.

Collapse
 
imonem profile image
imonem

Great article, the comments also have some gems. 👍

Collapse
 
premierdan profile image
premierdan

Nice one

Collapse
 
ironcladdev profile image
Conner Ow

I totally agree, react is the most amazing javascript framework

Collapse
 
metal3d profile image
Patrice Ferlet • Edited

React is not able to handle storage pattern (Angular has got services, Vue handles storage pattern) so you need Proxy and Context or Redux ⇒ bad
React has not real structure of project ⇒ bad
React mixes view and code, that makes the component a mess ⇒ bad
React handles almost everything in a view, even routes (which are not managed natively) ⇒ bad
React needs "useXXX" to be able to listen for something, and the setter function is not the same that getter ⇒ My god, it's so bad...
My list is long to say that React is very very bad. It's the new jQuery, everybody wants to use it because it's the fashion. But it's bad.

Collapse
 
yoquiale profile image
Alex • Edited

React doesn't suit my coding style, I prefer Vue and Angular because of the proper separation between logic, markup and style, and because they have custom directives and a better templating system. I'd rather do

<li v-for="item in items">{ item.etc}</li>
Enter fullscreen mode Exit fullscreen mode

than

items.map(item => <li>{item.etc}</li>)
Enter fullscreen mode Exit fullscreen mode

I hate it's too popular and would rather see more Vue and Angular job postings.

Collapse
 
noriller profile image
Bruno Noriller

I've learned and used Angular before React, so I know where you're coming from.

But the more I used, the more it "makes sense". But it's a fine line between just YOLO and doing whatever and actually taking the time to do it right.

With React, I do feel like it's easier to just make whatever, because it let's you and everyone out there appears to do like that.

But you can also make something that encapsulate logic from markup and style.

Collapse
 
brianmcbride profile image
Brian McBride

React had a place back when web components were a mess.
Now it doens't fully support the actual web standards and custom components. It isn't as fast or as small as similar libs (Preact, Solid, etc...) either.

This is why I see React as still heavily used:

  1. There are a TON of resources, libs, training materials, etc...
  2. Facebook can "do no wrong" in the web development community. No idea why. There are talented devs in FB. But also elsewhere. The general herd mentality seems to keep the momentum though.
  3. Because of the above, it is easier to hire React developers as there are more of them. For various reasons, it is a path of low-resistence just to stick with React (or Angular) for many corps.

Personally, I think we are beyond the time where the web community should focus on web component archtiecture that works with any reactive lib. There is Lit, Stencil, and others that are a very small amount of helper syntax to make working with the core Web Components easier. Imagine a popular React lib like Material-UI that was just common components that would work just as great in React, Vue, Angular, Svelte, Solid, etc...

Libs like React will still have a place. But like DOM routers, they can be a lib where you pick the "reactive" lib that you like the most to handle your lifecycle, state, etc...

Collapse
 
dannyengelman profile image
Danny Engelman

One thing everyone ignores. The future of Web standards are now defined by the WHATWG. So Google, Mozilla, Apple and Microsoft together set that standard. Facebook hasn't been invited yet

en.wikipedia.org/wiki/WHATWG

Collapse
 
brianmcbride profile image
Brian McBride

Facebook as an org seems to have a poor history of contributing to existing open source projects. I very much appreciate all they have given to the community. That goes for anyone who maintains or contributes to open source.

I seriously question the "invited" aspect. First, it looks like the group is mainly the people who build the browsers? And there is a process for submitting to the W3C standards.

I have no idea if it is corporate policy or corporate culture - but Facebook just seems to go their own way with little to no regard for standards unless they have no choice or just happen to like something.

Collapse
 
akapulka profile image
akapulka

"It has the backing of Facebook" I love this argument. Yes it does have backing of facebook which is one of the worst companies there's and the best part facebook itself is slow buggy mess so this is more of a con than pro.

Collapse
 
tealover418 profile image
Stijn de Ligt

React on it's own is unusable for me, even though React is my favourite front-end framework.

Because it's a library and not a framework you need a lot of extra tools to create a full React application. Instead I opt to use meta frameworks like NextJs and Gatsby. These are built on top of React and make setting up a project not make you want to jump off a bridge.

That's the biggest drawback for React, and also why I think the opinions are so extreme on it. People that use meta frameworks love it, people that try to set up a regular React stack hate it and go back to Vue. Just a working theory.

Collapse
 
rixbeck_ profile image
Rix Beck

I think jsx is basically a bad idea except in quick and dirty solutions. In complex codebase much better to keep code and view separately. It is a nightmare for me editing code when I just want to change visual style. Not to mention also the generated markup snippets.

Collapse
 
mrkhan profile image
Mark Han

I promise you that even in a complex codebase with JSX it’s still possible to keep logic out of your views 😆

Collapse
 
shriji profile image
Shriji

The title gave me a great laugh.

Sorry but react is not the king!

Svelte >>>>>>> react.

Collapse
 
_udemezue profile image
Udemezue John

Vue js has all of these too

Collapse
 
metal3d profile image
Patrice Ferlet

React has never invented something. Excepting making all projects unmaintainable.

Collapse
 
chichebewebdev profile image
Chichebe@WebDev

Despite react being a JavaScript library, it still accommodate other Frameworks like react-dom to make it reactive and scalable.
I believe react is the best to work with.

Collapse
 
anuragvohraec profile image
Anurag Vohra • Edited

React might be the number one JSX framework. JSX is not JS, and hence definitely not the best JS framework.
You have not explored enough options.

 
yoquiale profile image
Alex

Meh, v-for and ng-for look better to the eyes and makes your code cleaner than mapping an array of objects and returning a html element.

Thread Thread
 
jonrandy profile image
Jon Randy 🎖️

RiotJS is also extremely readable IMO - and it feels very much like writing normal HTML/JS/CSS

Thread Thread
 
yoquiale profile image
Alex

Agree, I've never heard about it but just looked at one of the examples stated on its website and it makes sense to me.

Thread Thread
 
jonrandy profile image
Jon Randy 🎖️

Yeah, it's not that well known but has been around almost as long as React

Collapse
 
delacernamarimar profile image
Marimar Dela Cerna

Awesome! Still using it for my projects

Collapse
 
agat profile image
Aleksej Romanovskij

You "React Hooks" example is wrong, hooks work only inside a components. :)

Collapse
 
hyggedev profile image
Chris Hansen

React babyy! 🔥 Awesome post 💯

Collapse
 
mbaneshi profile image
Mehdi Baneshi

Not mentioned that for almost every problem there are a component solutions out there