DEV Community

Cover image for Why React.js is So Popular ?

Why React.js is So Popular ?

Jagroop Singh on December 23, 2022

React is a popular JavaScript library for building user interfaces. It was developed by Facebook(Meta) and is often used for building single-page a...
Collapse
 
jwp profile image
John Peters

All true, but there is one omission. React is opinionated. Pure Javascript or TypeScript are not.

Now that WASM is here Javascript is not the only player any longer. For some, that's wonderful news.

Collapse
 
ivan_jrmc profile image
Ivan Jeremic

If react is opinionated for you I highly doubt you ever used it or are you even a developer who knows how to code?

Collapse
 
jagroop2001 profile image
Jagroop Singh

Truely said.

Thread Thread
 
jwp profile image
John Peters

I suffered once from Angular astigmatism once. I thought it was everything. I stuck to my guns for a long time, not because it was better, but because it's what I knew. Have you studied HTML5 Web Components?

Collapse
 
jwp profile image
John Peters

I've probably been coding longer than you've been alive. But just like your comment is opinionated, so is React. The only non opinionated work going on today is HTML5 Web Components. Also, at only 12 posts to this forum I don't recognize any prolific contribution either.

Collapse
 
brense profile image
Rense Bakker • Edited

Explain how React is opinionated compared to say... Angular or Vue... React is actually written in pure js or ts. The only thing thats not vanilla is jsx and even that tries to stay extremely close to what you expect from vanilla HTML and js. Infact not being opinionated is often cited as one of the biggest pitfalls for React. In React you can do things "the wrong way" very easily and it will still work.

Collapse
 
jwp profile image
John Peters

Angular is the worst, next is Vue, then React. All of these "frameworks" compared to HTML5 Web Components are the long way to "get there"

Thread Thread
 
brense profile image
Rense Bakker

πŸ€” tbh I don't have enough experience with web components to disagree, but it seems to me some of these frameworks are pretty popular with high satisfaction ratings as well if you look at state of JS survey from 2022. So they can't all be bad.

Thread Thread
 
jwp profile image
John Peters

Rense;
I never mentioned anything regarding popularity or satisfaction, I only mentioned the word "Opinionated".

The Web Component architecture is as "close to the metal" as possible, because the browser(s) have all exposed Web Component interfaces. When we code we are not coding to React (if we don't want to) we code directly to the Web Browser interface instead using plane old Javascript.

In addition, with the advent of WASM other languages such as C#, Python, and even Rust can replace Javascript completely.

Here's a Javascript Custom Web Component article.

Thread Thread
 
brense profile image
Rense Bakker

I mentioned popularity and satisfaction. The whole reason these frameworks were developed in the first place was to enable devs to build web applications faster. Specifically managing the DOM manipulation thats required to build big enterprise applications with a lot of user interaction. Web components do not solve this problem... You cannot really compare them at all tbh. Compared to other frameworks, React is not opinionated and is much closer to vanilla JS/TS.

Thread Thread
 
jwp profile image
John Peters

Everyone has their own opinions. One question; how is this code not opinionated? Of course it's JSX which is a React only thing. But there's no such method as render in the DOM, this is a React API function.

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

root.render(<HelloMessage name="Taylor" />);
Enter fullscreen mode Exit fullscreen mode

Or this, the built-in Props and state machine.

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  tick() {
    this.setState(state => ({
      seconds: state.seconds + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }
Enter fullscreen mode Exit fullscreen mode

Don't forget Hooks

And it's Styling

It's not opinionated to you because you bought into the React way. It's your primary coding framework.

Web Components interface directly to the DOM and the DOM provided Web Component interface. No middle man framework needed. To say Web Components cannot do what react does is just not true.

Thread Thread
 
brense profile image
Rense Bakker

Again... web components is not a framework.

The code you show is really old class-based React code.

React hooks are plain javascript functions.

JSX is an extension of JS. Its less opinionated than the custom commenting style for loops/conditional rendering that frameworks like svelte use, or the custom html elements/attributes style that angular/vue use. With React you write more actual compliant JS code, compared to any of the other frameworks.

Thread Thread
 
brense profile image
Rense Bakker

Good luck writing an enterprise web application with just web components I guess.

Thread Thread
 
jwp profile image
John Peters • Edited

I never said Web Components is a framework. The code I showed is on their main page describing react. Hooks is not a Javascript concept it's a React concept. The rest of the points above are irrelevant to my original post. I know, you love React, that's ok.

Thread Thread
 
brense profile image
Rense Bakker

... You come to a post about React and start making weird comparisons with web components...

Im glad we agree web components is not a framework. So this whole discussion was pretty much pointless, because you are talking about how opinionated a framework is compared to something thats not a framework... Its a useless comparisson.

Hooks are not a React concept: en.wikipedia.org/wiki/Hooking
But that was not even my point. My point was that React hooks use standard javascript code. They are valid javascript callbacks in every way shape and form.

You cannot have a framework without some form of an API, the level to which that API forces you to use non standard (vanilla) concepts is what is referred to as opinionated.

Appearantly even web components have lifecycle callbacks: developer.mozilla.org/en-US/docs/W...
which makes it pretty similar to old class-based React... The difference being that web components do not offer a way to manage state without constantly rerendering everything, unless you write your own custom diffing logic... Which is why people use frameworks like React... But again, thats not what web components are meant to do. Web components is purely for creating reusable components. Not for building enterprise web applications, which is what frameworks are for.

Thread Thread
 
jwp profile image
John Peters

I started by stating that React is opinionated and I still believe that to be true. The word "framework" needs to be defined because you stated

WebComponents are not a framework

then you said

You cannot have a framework without some form of an API

The entire Browser is a massive API. So I think you are confusing.

As far as hooks, the term hook or hooks has been known to programmers for 50 years. But React has an opinionated way of implementing them. Just look at the api on it. It takes people days to get the concepts.

The same goes with React States. Programmers have been using state logic for over 50 years. React comes along and says "This is how it's done". That's an opinion and another week to learn their way.

Anything React does can and will be done using Web Components. Including using WASM which will be a huge security benefit to the Enterprise.

Anyway I agree this discussion is worthless, you are a React only person and I'm selling Web Component goodness. Guess I made the wrong stop.

Thread Thread
 
brense profile image
Rense Bakker

You're full of assumptions, that's for sure. I'm not a React only person. Maybe you're projecting that you're a web components only person?

Thread Thread
 
jwp profile image
John Peters

Fair enough, you are a React defender.

Collapse
 
eshimischi profile image
eshimischi • Edited

the only thing is true is β€œstrong dev community”, other things are pretty the same for all other libraries/frameworks, they are all based on the same Javascript.. so your list of β€œbenefits” are very much arguable.. yes as someone said above, performance of React is low..

Collapse
 
rickdelpo1 profile image
Rick Delpo

React may be popular but I prefer plain javascript because I think it loads faster and there is much less overhead. I wrote a dev article comparing React to Plain JS.
click here to read it.... dev.to/rickdelpo1/react-vs-plain-j...

Collapse
 
jagroop2001 profile image
Jagroop Singh

Interesting !!

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

Interestingly, React's performance generally comes out near bottom in comparisons/benchmarks of popular front end libs/frameworks

Collapse
 
lexlohr profile image
Alex Lohr

Explaining the popularity of react with its popularity and wide adoption is a tautology.

Also, it has been demonstrated that a vDOM is pure overhead and you have to opt out of reconciliation using memoization to remain performant.

React cannot even use web components without a wrapper, so the point of the compatibility is patently wrong, too.

The current documentation is a mess. The beta docs are really good, though. Kent C. Dodds' stuff is also great, but that counts as community rather than react's own documentation being good.

Most of your points are either fallacious or wrong. But react isn't even really bad, it's more or less mediocre, in a dependable kind of way. But that dependable mediocrity is what gets CTOs' trust.

Collapse
 
eshimischi profile image
eshimischi

I agree, but we can’t compare it with Vanilla js performance, for instance..

Collapse
 
w3rafu profile image
Rafael Fu • Edited

No way React outperforms Sveltekit.
Too much hype.

Collapse
 
heyhadi profile image
Munawirul Hadi

The only strong point is react is widely adapted by Industry. I'd prefer build my own project on svelte.