DEV Community

Discussion on: Really, why React?

Collapse
ecyrbe profile image
ecyrbe

Hello, thanks for taking the time to write this rant.
I want to point at some missconceptions about React.
React is not a component templating library. Vue, Svelte, Marko,... are. So obviously JSX is is not an templating syntax and certainly not an HTML templating syntax. JSX is an extension of JS syntax to make writing JS to React Virtual DOM rendering easier.
So tour title JSX templates is missleading.

JSX is a JS extension, not an HTML template engine. This means JSX is precompiled to JS, then JSX knows nothing about component context, where a template engine does. Template engines are more powerfull to optimize what to render at a high level (before Virtual DOM merge) where JSX has to go all the way down the road to know if it should re-render a sub component by running it's JS code. Where a template engine, being declarative, can understand what to render before hand.

Collapse
aliakakis profile image
Antonios Liakakis • Edited

JSX is not an official W3C standard like HTML unless something changed recently. Learning JSX first is a costly mistake for any aspiring web developer career and will also leave you with bad habits and an erroneous sense of what is actually HTML.

Collapse
ecyrbe profile image
ecyrbe

Where did i say JSX was standard? Learning React is not a costly mistake, because in today's world, it will earn you more jobs than just knowing HTML/CSS. Maybe you don't like it, but don't fool yourself. The frontend market is dominated by React.

Just look here, at dev.to. The majority of junior dev are doing React, and the majority of hiring managers, are hiring for react. That's part of the rant of Jordan.

The market is flooded by React and no clean alternative is really emerging. Sure, there is Vue. But vue is not without it's own mistakes.

Thread Thread
aliakakis profile image
Antonios Liakakis • Edited

As I said if you need to put food in the table React is the way to go.
But being the best option? I wouldn't go that far. Moreover, NO Jordan's article is not a rant but exactly what is wrong with today's front end market. The majority of juniors dealing with React most probably are not aware of the basics and that is sad not something to celebrate. Moreover, using junior devs as a measure of the success of React is quite strange. How can you accept the opinion of someone just starting for an expert one? The majority of hiring managers are just following the hype and marketing therefore I wouldn't count there acumen when it comes to front end. The market is flooded with React for all the wrong reasons. Vue has its mistakes but surely less than React.
But let me say again. If you want to get a job learn React but hope you will not hate development in the process.

Thread Thread
jfbrennan profile image
Jordan Brennan Author • Edited

You're right about learning JSX - it doesn't hurt. But you got to get out of the bubble. There are TONS of clean alternatives already widely in use and growing in popularity every day.

Also, because I was once a junior dev I do not take any queues from what jr devs are doing :) Juniors flock to React for all the wrong reasons (#1 being it's the most popular...because it's the most popular)

Collapse
jfbrennan profile image
Jordan Brennan Author

Thanks for reading my rant, although I like to think it's less rant and more objective evaluation, but probably just a rant!

I have never ever heard anyone say something like this:

React is not a component templating library. Vue, Svelte, Marko,... are.

I'd say React is definitely the same as those libraries. The difference being React sucks at the templating part because people hated createElement so Fb mixed JavaScript with XML in an attempt to provide something more "familiar". But maybe I'm missing some nuance even though React is "declarative" and "component-based" like Vue et al. Can you elaborate some more on that point?

certainly not an HTML templating syntax

I know people like to say that, but then 80% of JSX code out there is legit HTML, so what does that tell us? The other 20% being all the garbage I mentioned above. Whether anyone at Fb will admit it or not, JSX is in practice an HTML template syntax, the worst one of all time :)

Collapse
ecyrbe profile image
ecyrbe

There is a huge difference between Vue and React, even though both are component libraries.

Vue has a real templating system, meaning, that the control flow (if, loops ...) is declarative... whereas in React, the control flow is made in javascript, it's not declarative... it can only be interpreted at runtime (for each render), with no chance for optimisation.

JSX is just syntactic sugar for createElement (no templating here), whereas Vue has a full integrated template compiler that knows about control flow, component context (props change) and can optimize what it renders.

Hence, not a template syntax engine, even though it looks like one. Hence people expecting it to be a template system, find it ugly.

Now to be quite frank with you. Having used a lot of component libraries, React is the one i prefer using for now. No stockholm syndrome here.

Why ? It's all about writing business code, i prefer using react hooks. It's simple, it's clean, it's composable, it's reusable.

Just compare this :
github.com/jfbrennan/m-/blob/maste...

with this :

AutoComplete = (props) => {
  const [textState, setTextState] = useState('');
  const [completions] = useAutocomplete(textState, props.AutoCompleteSource);

  return (
    <div>
      <input
        type='text'
        value={textState}
        onChange={(e) => setTextState(e.target.value)}
      />
      <div>
        {completions.map((val, index) => (
          <p key={index}>{val}</p>
        ))}
      </div>
    </div>
  );
};
Enter fullscreen mode Exit fullscreen mode

I known i can maintain the second one... the first one, maybe , with pain.

Thread Thread
jfbrennan profile image
Jordan Brennan Author • Edited

Thanks for clarifying. I know what you mean about the technical differences in "templating", however irl the library's implementation doesn't matter to a dev does it? Part of building components is writing markup of some kind and that's the role JSX plays. Compared to other markup solutions - true template engine or not - JSX imo is the worst.

As for comparing a React component to a Web Component it depends on the purpose of the component. WC have zero dependencies, are faster, and can be shared across all of your companies web projects. Also, your code above doesn't cover half of the use cases the M- autocomplete does. If it did, yes it would probably still be less code and maybe more maintainable and it should because it depends on a 40kb library!