In case you don't know (and I also didn't until recently), those namings come from the HTML DOM Javascript API, and not from React. So having that naming in React+JSX is more a consequence of operating on that abstraction level, than a quirky decision of the React developers.
for and class are reserved statements, hence htmlFor and className are the official api names, in other words they belong to the actual web-api spec, there's nothing arbitrary about it:
https://developer.mozilla.org/en-US/docs/Web/API/Element/cla...
https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelEl...
If you really dislike it, you can still use class and for: https://github.com/insin/babel-plugin-react-html-attrs
> or I would be able to write a simple if-else statement
{} evaluates to a ternary. You can use if, according to the spec that's what do expressions are there for.
do {
if (condition) <div>yes</div>
else <h>nope</h>
}
condition
? <div>yes</div>
: <h>nope</h>
These two things are explained in a single sentence, every tutorial eases you into it, the first thing that comes up once JSX is mentioned.
const { for, class } = this.props
const { for: forHtml, class: className } = this.props
v-model isn't two-way binding in the AngularJS sense; it's just a shortcut for binding a "value" property and updating it on "change" events. See https://vuejs.org/v2/guide/forms.html.
- Don't need to know jsx!
But you need to learn Vue's template DSL. JSX is just HTML and JavaScript.
- v-for looping is saner than reacts mapping
- v-if allows v-if statements without renderIf component or multiple render statements in react (antipatterns boo!).
Strongly disagree!
- two way data binding with vue-model
I suggest anyone thinking of using two-way binding for anything to rethink their choice. There is always a better way.