Vue is less complex, easy api, and easier to jump into. React is more complex, bigger learning curve, but more featured. Vue has satisfied my needs for 99% of projects.
React is idiomatic javascript. Vue is it's own quirky thing that doesn't feel anything at all like Javascript to me.
At the end of the day, I think that calling something idiomatic is subjective and so, varies from people to people.
*: to be clear, my point is many people use JSX with React because it feels idiomatic (I manipulate HTML/DOM, so why not just write with HTML-like syntax?) but it is not idiomatic to JavaScript and I don't think the other React APIs are that nice to use. If I didn't use JSX with React, I'd tend to use other framework because, in my opinion, they make more sense.
Hater-or-lover of JSX, it is definitely an intuitive way to think about HTML in the context of JS.
I prefer the vue model that's a bit closer to the metal, though, if only because of quirks like className
Mithril has "class" instead of "className"; that irks me too.
When I look at the guide and I see stuff like this:
<div id="app-2">
<span v-bind:title="message">
Hover your mouse over me for a few seconds
to see my dynamically bound title!
</span>
</div>
In contrast, React is a JS library, and works like any other. JSX is weird for the first minute, but it's a very light transformation to the underlying JS, to the point where when I write it I can mentally see what JS functions I'm invoking, which therefore helps me understand all those things I mentioned before like scoping rules, what this will refer to, etc.
If you know plain javascript you know half of what makes react. The API surface usually consists of a single function: render. The rest are 3-4 class lifecycles, setState, a few jsx semantics and that's it. You solve problems in the same way you always solved them, there is nothing to re-learn and you don't bend to the framework.
Go ahead and re-create this in Vue, tell me what you're doing is easier:
import timestamp from 'time-stamp'
const Header = props => <h1>{props.text}</h1>
const Main = () => <Header text={timestamp()} />
ReactDom.render(<Main />, document.querySelector('#app'))
• lifecycle method names: mounted vs componentDidMount
• proptypes: builtin vs `import PropTypes from 'prop-types'`
• component creation: basic JS object vs ES6 class extending `React.component`
Please don't spread misinformation because you prefer one way of writing frontend apps to another. React is better at complex apps, and Vue has a simpler API that many find easier to memorize.
It's rude to insult other commenters by saying "A beginner could blink at this once and start making simple apps blindfolded." I think you're being hyperbolic, but it comes off as condescending.
Frontend is hard. No one "blinks at this once" and learns how to build component-based layouts with view, data, and logic. Please be nice.
> Frontend is hard. No one "blinks at this once" and learns how to build component-based layouts with view, data, and logic. Please be nice.
You seem to purposely misunderstand me. I never said someone could learn react by looking at it. I said someone could understand the nature of simple composition by looking at it.
I learned Vue fully in maybe a few weeks. React in an hour here: egghead.io/courses/react-fundamentals If you think that studying a 70 page document in order to carry out basics like composition is easy then so be it. If you'd actually dare to post the example in Vue, we'd all see how "easy" the hoops would be you'd have to jump through to realize it.
I've never coded in React or Vue but after spending 15 mins reading https://vuejs.org/v2/guide/render-function.html here's a pure JS re-creation in Vue for you (fiddle here: https://jsfiddle.net/0wr6xskh/):
<div id="app"></div>
const MyHeader = Vue.component('MyHeader', {
render: function (createElement) {
return createElement('h1', this.text)
},
props: {
text: {
type: String,
required: true
}
}
});
new Vue({
el: '#app',
render: function (createElement) {
return createElement('div',[
createElement(MyHeader, {
props: {
text: ''+new Date()
}
})
])}
});
Once you get rolling both of them are good but it's no easy task to start-up a React project on your own. You need a lot libraries, have to twiddle with immutability which is no piece of cake with JS and be constantly aware of small quirks like keys when looping jsx-elements, className instead of class, how to add css preprocessor, using setState instead of directly assigning to it with the constant farce with deeply nested Object.assigning oh such fun.
React tries to make the world a better place with more theoretical approach while Vue focuses on tried-and-true methods that work and are straight-forward for everyone with a little experience in programming. (v-if might not be pretty but it beats JSX conditional) Granted modern frontend development has a lot of different things to be aware of that make it bit difficult for beginners but IMO Vue makes it a lot more simpler and productive. Some things I wish might be better like the ecosystem but oh well. Overall I'm happier and the only problem is having to fight off overly smug React-developers who have rubbed their egos so hard that they aren't able to even think about better solutions anymore.
> be constantly aware of small quirks like keys when looping
There are no "quirks" in looping anything. It is plain javascript. I would call "v-for" a quirk on the other hand.
const array = []
for (let item of items)
array.push(<li>{item.text}</li>)
render (
<ul>
{array}
</ul>
)
Also you can use `items.map` in your example.
The example would run without keys, it's merely for demonstration. You'd need keys in Vue as well.
I don't think that's reacts fault? http://exploringjs.com/es6/index.html#toc_ch_first-steps
Other than the es6 syntax, would you like to specify what it is that you don't understand? If you look at it, it must occur to you that react components are functions that can receive properties and return markup. Now you can compose these functions. Just like in Vue or any other framework there is a single mounting point. If you understand this, you know the largest part of the react library.
const Foo = () => <span>hey</span>
function Foo() {
return <span>hey</span>
}
And if i asked you to use this component in another, even if you saw how it's done, you would absolutely not be able to pull it off again?
function Bar() {
return <Foo />
}
To be honest, i thought i didn't like react as well when i first encountered it. I didn't actually try to understand, the appearance of it seemed so radically different that i refused to think of it as simple. But i eventually tried and figured that there is actually nothing behind this framework. These are plain functions, or classes with lifecycles. I was wrong in my assumptions.
function Header(props) {
return <h1>{props.text}</h1>;
}
function Main() {
return <Header text={new Date()}/>;
}
ReactDom.render(<Main />, document.querySelector('#app'))