Why would people hate React (or JSX), but not Vue SFC, or even Angular?

I'm glad you asked , LOL. I worked as a professional React dev for about 9 months ( part time ) and I've been a professional Angular dev for over a year.

I hate React, and JSX the primary reason. CSS in JS is another ( not required for React, but prominent ). First, however let's talk about JSX.

Separation of concerns was the ENTIRE reason we decided to put controllers, HTML, and CSS into different files. JSX muddies the waters so much that there are some JSX novels that I've seen and worked with that read very much like a horror story.

Heiker's example is a good example of this. What I love about Angular is that your component's html file is, well, an HTML file. Sure, it uses structural directives and some minimal ( very readable ) interpolation, but it's nothing compared to the spaghetti mess the JSX usually becomes.

When it comes to very complex views, nothing is worse than having to mentally map your way through a React component with endless JSX acrobatics that you have to translate into your mind into a coherent web page. For simple views, it's fine. But in some of the more complex views that I've seen, it's just ridiculous.

There's a reason why Angular tends to be the framework of choice with much larger and robust enterprise applications. It scales better, and it's easier to deconstruct and refactor the architecture as things grow and change. To me, React is beautiful , fast , and elegant for smaller and medium sized projects, but once the projects scale, it can become a Frankenstein very quickly. There's no real universally agreed upon pattern for how React should scale. ( Not to my knowledge ) , where Angular's structure is baked into the framework.

I didn't bring up TypeScript because technically you can use TypeScript with React, but TypeScript being in ALL Angular projects is the other major reason that I love it.

Old man yelling at cloud here. I know that JSX can be use for good and has many good things but I'm here to talk about the things that bug me.

Using JSX to render html elements is all good. My problem is when people go beyond that, when they start doing one clever thing after another in the middle of that html.

Stuff like this.

<div className="tag-list">
  {
    (this.props.tagList || []).map(tag => {
      return (
        <span className="tag-default tag-pill" key={tag}>
          <i  className="ion-close-round"
              onClick={this.removeTagHandler(tag)}>
          </i>
          {tag}
        </span>
      );
    })
  }
</div>

Using .map to render a list? That's clever. Using parenthesis and an operator to make sure .map gets executed? I get it, you want to prevent a bug, but why do it there? They could have handle that in another part of the code but they didn't because nothing could stop them from putting that piece of logic there. And that piece of just HTML-in-js is going to get worse if they need to do more clever things in that taglist.

And then we have "renderless components", I do hate those things. It breaks the mental model of using tags to describe the user interface.

<Provider>
 <div className="editor-page">
    <div className="container page">
      /// stuff
    </div>
  </div>
</Provider>

That "Provider" thing, if I can't put a margin, padding or color I don't want it as a tag. And of course this "renderless components" are so flexible that we can do this.

Rodrigo Pombo

@pomber

This works

22:56 PM - 01 May 2018

That freaks me out.

Vue and Angular are very good because they impose a certain style by using strict conventions and style guides.

So anybody else can come later and understand your code.

The same can't be said about React, even if it has big companies using it.

Also, my biggest problem when I used it was that it doesn't have just one STORE. But a lot of clones online(easypeasy, mobx, another better management store).

So my question is:

Can react devs and contributors stop forking and working on a single universal store and best practices for it?

Overall, I think the biggest issue I've found with React is it just doesn't have an opinion on a lot of things: routing, state management, logical categorization of components.

The second big thing that I find awkward with it is that it doesn't have a discrete services layer. Prop drilling and context are fine in small applications, but I'm just really not sure that embedding the services layer in the view hierarchy is at all scalable.

I hear a lot of people bashing Redux, and I get it - it took me a while to come to grips with it (no thanks to the Redux-specific jargon), and it involves a lot of boilerplate - but I really think it's better to separate your data access and transformations into totally separate files, detaches from the view hierarchy.

All that said, I have no problem with JSX. It serves as a nice visual distinction between the component hierarchy and any business logic a component might have (unless you mix your business logic in with your JSX - please don't do that).

I feel like react often introduces new ways to do the same thing and everybody refactors and updates all their libs to the new hot way of doing things. The most recent addition is hooks, which was supposed to reduce 90% of your code's complexity. Unfortunately, it only makes simple code simpler, everything else became harder and requires you to know the nuts and bolts of react, hooks and javascript. Some argue that's not a bad thing, but it's by no means progressive like vue. Consider all the devs out there whose "first language" is not JavaScript...

E.g the following will execute the useEffect every time it renders if you don't pass the item prop because it is considered new. Imagine setting state in the useEffect, you got yourself an infinite rerender without any sort of error message hinting to the solution, or even the problem.

const { item = {} } = props

useEffect(() => something(), [item])

JSX Syntax is terrible. It reminds me of the old days when we had PHP inside ugly tags. Then we came out with template engines and the world was a better place.

SPA's have this problem generally, with qoutes inside qoutes inside qoutes making terrible to read templates. I prefer clean and simple templates with nothing more than a few capitalized key words inside mustache brackets. You don't need anything else, and anything else more complicated should be inside code and delivered as a value to the view. Languages inside of languages always annoyed me, and for more complex projects it quickly gets out of hand. Your essentially trading the spaghetti code of one kind for spaghetti of another, which then requires you to write ever more complex code to check the code.

It's the sort of design pattern that reminds me of John Stewart Mill's warning about how "The bureaucracy is expanding to meet the needs of the Expanding Bureaucracy."

Vue has the least annoying template syntax, so it's my go to for persona projects.

React as a whole is quite good and I'm a big fan. But I write as little JSX as possible, and when I do, it's almost always an actual value with data-binding instead of a method call to a method call inside a method call. Every time I see an arrow function inside a template I die a little on the inside. And before someone mentions how bad code shouldn't damn a language, I'd like to point out that React design docs actually encourage this pattern.

Angular has a different problem. There are about 5 ways to mark up html elements, to the point that you get that absurd banana-in-a-box syntax for stuff like ngModel, and again you end up with quotes inside of quotes because you have to appease the parser ... rather than having a unified syntax and forcing the parser to appease us.

You use vanilla JavaScript and vim? Well I write everything in machine code, like a real developer

I use React and Vue for more years now. The biggest problem on react is that it has no clean code. It's kind of a mixture, very bad to read and if you have to maintain it is a big problem.

VueJs is based on React and Angular and solve this problems in a very beautyful way.

I am convinced that react only exists because facebook invests a lot of money. Some times a bad tenology wins because of mony > VHS.

people who hate Anguvueact, usually they either had to work with a bad codebase using it, or somebody they dislike is an advocate of it.

Well, I don't HATE JSX or any other markup. It's just a preference. That said, I prefer proper using HTML attributes like class, style etc. Instead of something like className.