DEV Community

Discussion on: Why I Converted from Vue to React

View post

Replies for: Hmm i see, good points, thanks! one thing, why react makes lesser sense when not using JSX? It's just pretty straightforward createElement calls. ...

 
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.