DEV Community

Discussion on: Why I Converted from Vue to React

View post

Replies for: Uff, a nice write-up, but I so disagree. Professionally I have to work with React way more frequently than Vue, but I highly prefer the latter. Wh...

Collapse
 
anuraghazra profile image
Anurag Hazra •

Hi Neoan, can you please explain why do you think JSX is magic? (comparing to Vue's magic, i think vue is more magical than jsx) I'm actually planning to write an article about JSX so i wanted to know your thoughts :D

Collapse
 
sroehrl profile image
neoan •

I will try:
Vue's markup is valid HTML. In the most primitive form, what Vue does is to create observers for props and data and bind it to HTML. The result is relatively straight forward:

<element :my-prop="bound-value" another-prop="hard-coded-value"> ...
Enter fullscreen mode Exit fullscreen mode

This setup makes the use of .vue-files optional and doesn't even require a development server. One could import Vue via CDN and write components directly in "hard" declaration:

const template = `<h1>{{headline}}</h1>`;
Vue.component('my-element',{
   data: function (){
      return {headline:"test"}
   },
   template
});
Enter fullscreen mode Exit fullscreen mode

So while there is a lot of magic in Vue, the markup and bindings are pretty straight forward.

React uses JSX (you don't have to use it, BTW, but then React makes little sense). JSX is NOT valid HTML. It cannot render without being compiled. It isn't JavaScript either. The following code snippet is therefore neither valid JS nor HTML markup:

...
return <h1>{headline}</h1>
...
Enter fullscreen mode Exit fullscreen mode

Is that bad? No, but it's pure magic, of course. I mean, it has it's own name (JSX) because of that (otherwise it would just be a template)!?

Now, as every React-dev knows, this means that some interpretational oddities arise. For example, we have to use "className" instead of "class" and "onClick" isn't "onclick". But all of that is relatively easy to get used to and not an issue compared to what is offered. What bothered me about React was how state was handled and bound (this got sooo much better with hooks) and that JSX has a very ugly solution to the two most common things in a dynamic template: conditionals and iteration.

Given the following data:

items = [{item: "one"}, {item: "two"}]
Enter fullscreen mode Exit fullscreen mode

Let's look at Vue:

...
<li v-for="item in item" v-if="item.item != 'one'">{{item.item}}</li>
Enter fullscreen mode Exit fullscreen mode

And JSX:

...
{items.map(item => 
   if(item.item != 'one'){
      return (
         <li>{item.item}</li>
      )
   }
)}
Enter fullscreen mode Exit fullscreen mode

Looking at the above example: it there more magic in Vue? Yes. But you tell me which is more straight forward and approachable.

Thread Thread
 
anuraghazra profile image
Anurag Hazra •

Hmm i see, good points, thanks!

one thing, why react makes lesser sense when not using JSX? It's just pretty straightforward createElement calls.

"you don't have to use it, BTW, but then React makes little sense"

Thread Thread
 
sroehrl profile image
neoan • • Edited

Really? Please try writing the following JSX with createElement-calls and surprise me:

<form onSubmit={parentCallBack}>
   <input value={someUsestateValue} onChange={ev => setSomeUsestateValue(ev.target.value)} />
   <button type="submit">send</button>
</form>

And BTW, since we have a template here. Compare the following valid markups:

VueJS

<form @submit.prevent="parentCallback">
   <input v-model="someDataValue" />
   <button type="submit">send</button>
</form>

Or even more native and including the complete logic in declarative form:
AlpineJS

<form x-data="{data:{inputValue:''}}" onsubmit="parentCallback(data)">
   <input x-model="data.inputValue" />
   <button type="submit">send</button>
</form>
Thread Thread
 
anuraghazra profile image
Anurag Hazra • • Edited

here: (you said "React makes little sense", that's what i'm referring to, JSX is not binded to React elements you can build up any Tree like structures)

React.createElement(
    'form', 
    { onSubmit: parentCallback }, 
    React.createElement('input', { 
       value: someUsestateValue, onChange: ev => setSomeUsestateValue(ev.target.value)
    }),
    React.createElement('button', { type: 'submit' })
)
Thread Thread
 
sroehrl profile image
neoan •

So, how does it feel? Does it still make sense to use React? Do you think you could actually efficiently read a React app when built like that? What is the remaining advantage over vanilla JS?

const domEl = document.createElement;
const form = domEl('form');
form.innerHTML = `
<input name="some-name">
<button type="submit">send</button>
`;
form.addEventListener('submit', parentCallback)

My point is: JavaScript is moving to a declarative style. We want a clear separation of view/template and controller/component-logic, even if there is a move towards having these concepts in one file (component based architecture).

So my question was not if it is possible, but if it makes sense. You would certainly use a different solution than React if you couldn't use JSX.