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.

• 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()
          }
        })
      ])}
  });

  function Header(props) {
    return <h1>{props.text}</h1>;
  }

  function Main() {
    return <Header text={new Date()}/>;
  }

  ReactDom.render(<Main />, document.querySelector('#app'))

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.