React or Vue: Which Javascript UI Library Should You Be Using?

Two frameworks, two advocates.

Anthony (left) and Alexis (right) comparing React and Vue at Bull and Bear Cafe in Chiang Mai, Thailand

If you like building apps with templates (or want the option to), go with Vue.

// HTML<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>// JSnew Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('');
    }
  }
});
// HTML<div id="app"></div>// JS (pre-transpilation)class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello React.js!'
    };
  }
  reverseMessage() {
    this.setState({ 
      message: this.state.message.split('').reverse().join('') 
    });
  }
  render() {
    return (
      <div>
        <p>{this.state.message}</p>
        <button onClick={() => this.reverseMessage()}>
          Reverse Message
        </button>
      </div>
    )
  }
}ReactDOM.render(App, document.getElementById('app'));

If you like simplicity and things that “just work”, go with Vue.

this.setState({ 
    message: this.state.message.split('').reverse().join('') 
});
// Note that data properties are available as properties of 
// the Vue instancethis.message = this.message.split('').reverse().join('');

If you need your application to be as small and fast as possible, go with Vue.

Benchmarks as published on vuejs.org

If you plan to build a large scale app, go with React.

If you want a library that is adaptable for both web and native apps, go with React.

// JSimport React, { Component } from 'react'; 
import { AppRegistry, Text, View } from 'react-native';  class HelloWorld extends Component {   
  render() {     
    return (       
      <View>         
        <Text>Hello, React Native!</Text>
      </View>
    );   
  }
}AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

If you want the biggest ecosystem, go with React.

If you’re already happy with one or the other, there’s no need to switch.


About the authors

Anthony Gore

Alexis Mangin


Vue.js Developers

Helping web professionals up their skill and knowledge of Vue.js

Anthony Gore

Written by

Here to teach you Vue.js! Vue Community Partner, creator of @Vue.js Developers. Take my free Vue intro course: https://bit.ly/2Eb4uPT

Vue.js Developers

Helping web professionals up their skill and knowledge of Vue.js