Vue.js vs. React

Re:Vue.js vs. React by dmitriid on Saturday August 19, 2017 @11:53AM (#15054036)

It's funny you bash JSX, which is a very thin XML-like DSL on top of JS, and then turn around and claim that Vue's DSL is HTML

   <button v-bind:disabled="isButtonDisabled">Button</button>
   <div v-bind:id="'list-' + id"></div>
   <form v-on:submit.prevent="onSubmit"></form>
   <a @click="doSomething"></a>

Something tells me JSX is the better DSL.

[ Parent | on HN ]

Re:Vue.js vs. React by innocenat on Saturday August 19, 2017 @12:15PM (#15054149)

When you make it so that (which is how everyone is writing Vue anyway)

   <button :disabled="isButtonDisabled">Button</button>
   <div :id="'list-' + id"></div>
   <form @submit.prevent="onSubmit"></form>
   <a @click="doSomething"></a>

It gets really, really clear that anything not in {{ }}, or attribute not prefixed by @ or : is HTML.

[ Parent | on HN ]

Re:Vue.js vs. React by scottmf on Saturday August 19, 2017 @06:57PM (#15056093)

What's the difference between :disabled and the regular HTML disabled? Same for ID, etc. How do strings differ from variable names?

The only way I see that as being more "intuitive" is if you're familiar with other templating languages.

JSX is far clearer:

  <button disabled={isButtonDisabled}>Button</button>
  <form onSubmit={handleSubmit}></form>
  <a onClick={doSomething}></a>

All you really need to know is everything between braces is plain JavaScript, and property names are camelCased.

[ Parent | on HN ]

Re:Vue.js vs. React by dmitriid on Sunday August 20, 2017 @06:21AM (#15057800)

...and property names are Javascript property names. Because, well, JSX is a very thin layer on top of Javascript

[ Parent | on HN ]