DEV Community

Discussion on: Why I Converted from Vue to React

 
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.