DEV Community

Discussion on: Really, why React?

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 on

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!