React vs Vue? Both of them have their own pros and cons, but which one should you choose? Should it be React or should it be Vue?

In this article, React vs Vue – Choosing the Best JavaScript Library, we will focus on the major aspects of both the javascript libraries, so that we can come to the conclusion of the best because, in the end, you should choose the best.

Introduction to React.js

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. React is based on the concept of DOM manipulation is a costly operation and ought to be minimized.

It additionally acknowledges that optimizing DOM manipulation by hand will end in lots of boilerplate code, which is error-prone, boring, and repetitive. React solves this by giving the developer a virtual DOM to render instead of the actual DOM.

It finds the difference between the real DOM and virtual DOM and conducts the minimum number of DOM operations required to achieve the new state. React is also declarative.

When the data changes, React conceptually hits the refresh button and knows only to update the changed parts.

Stats & Popularity

[gitrepo author=”facebook” repo=”react”]

Introduction to Vue.js

Vue.js is a powerful library that allows us to create powerful client-side applications. Vue is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. Vue.js is a library for creating web interfaces.

Vue is a Simple, minimal core with an incrementally adoptable stack that can handle apps of any scale. Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Stats & Popularity

[gitrepo author=”vuejs” repo=”vue”]

Why use Vue?

Let’s take an example of a code snippet comparing Jquery with Vue. the code snippet will download a list of items from an Ajax resource and display them on the page.

code Snippet using Jquery

<ul class="js-items"></ul>
<script>
$(function () {
$.get('https://dunebook.com/items.json')
.then(function (data) {
var $itemsUl = $('.js-items');
if (!data.items.length) {
var $noItems = $('li');
$noItems.text('Sorry, there are no items.');
$itemsUl.append($noItems);
} else {
data.items.forEach(function (item) {
var $newItem = $('li');
$newItem.text(item);
if (item.includes('Red')) {
$newItem.addClass('is-Red');
}
$itemsUl.append($newItem);
});
}
});
});
</script>

the code snippet above is making Ajax request using $.get()  selecting the element matching .js-items and storing it in the $itemsUl object. If there are no items in the list downloaded, it creates a li element, sets the text of the li element to indicate that there were no items and adds it to the page. now, for every item in the list, it creates a li element and sets the text to be the item. Then, if the item contains the string  Red, it sets the class of the element to is-Red. Finally, it adds the element to the page.

As you can see every step had to be done manually, every element created and appended to the page individually. We have to read all the way through the code to work out exactly what is going on. With Vue.js, we can write the same code providing the same functionality in a much simpler way & easier to read and understand.

Code snippet using Vue

<ul class="js-items">
<li v-if="!items.length">Sorry, there are no items.</li>
<li v-for="item in items" :class="{ 'is-Red': item.includes('Red') }">
{{ item }}</li>
</ul>
<script>
new Vue({
el: '.js-items',
data: {
items: []
},
created() {
fetch('https://dunebook.com/items.json')
.then((res) => res.json())
.then((data) => {
this.items = data.items;
});
}
});
</script>

the code snippet above is making an Ajax request using fetch() than parsing the response from JSON into a JavaScript object & storing the downloaded items in the items data property. As you can see the same task is completed in a much easier way. we can now use Vue’s templating functionality to write the elements to the Document Object Model (DOM), which is how elements are represented on an HTML page.

Why use React?

If you have used jQuery in the past, you must know jQuery manipulates UI elements, the jQuery approach is prone to mistakes and takes more work to implement. Also, this approach of directly manipulating the regular DOM works fine with simple UIs, but it’s limiting when you’re dealing with a lot of elements in the DOM tree. This is the case because it’s harder to see the results of imperative functions than declarative statements.

Let’s take an example of a code snippet comparing Jquery with React. in the code snippet When the button is clicked, we want to add the class “clicked” to the element and when the button is clicked again, we want to remove the class.

Code snippet using Jquery

$(document).ready(function(){
$('#someButton').on('click',function(){
if($('#someElement').hasClass('clicked')){
$('#someElement').removeClass('clicked');
}else{
$('#someElement').addClass('clicked');
}
});
});

Code snippet using React

var ExampleComponent = React.createClass({
getInitialState : function(){
return ({isClicked : false})
},
handleClick : function(){
this.setState({isClicked : !this.state.isClicked});
},
render: function() {
var someElementClass = this.state.isClicked ? 'clicked' : '';
return(<div className="container">
<div id="someElement" className={someElementClass}>
I'm an element
</div>
<button id="someButton" onClick={this.handleClick}>
Click me!
</button>
</div> );
}
});
ReactDOM.render(<ExampleComponent />,document.getElementById('content'));

you might think React is looking more difficult in comparison to JQuery but React has some advanced features that make easier to centralize an application instead of having a large number of JavaScript files full of declarations$(document).ready().

React vs Vue – The syntax

The following React code snippet will display Hello World

<!DOCTYPE html>
<html>
<head>
<script src="https://fb.me/react-15.0.0.js"></script>
<script src="https://fb.me/react-dom-15.0.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
</head>
<body>
<div id="greeting"></div>
<script type="text/babel">
var Namaste = React.createClass({
render: function() {
return (
<p>Hello world</p>
)
}
});
ReactDOM.render(
<Namaste/>,
document.getElementById('namaste')
);
</script>
</body>
</html>

The following Vue code snippet will display “John it’s morning” in the morning, “John it’s afternoon” until 6 p.m., and “ john it’s evening” after 6 p.m.

<div id="app">
<p v-if="isMorning">John it's morning</p>
<p v-if="isAfternoon">John it's afternoon</p>
<p v-if="isEvening"> john it's evening</p>
</div>
<script>
var hours = new Date().getHours();
new Vue({
el: '#app',
data: {
isMorning: hours < 12,
isAfternoon: hours >= 12 && hours < 18,
isEvening: hours >= 18
}
});
</script>

Vue is simpler in terms of syntax. In React, all components express their UI within render functions using JSX, a declarative XML-like syntax that works within JavaScript.

Speed

React vs Vue
Benchmark published on vuejs.org

the data above shows that Vue’s rendering system is faster than React. Vue has a bloated file size of 23k while React stands at 43k.

Learning

React doesn’t have many moving parts to learn about and understand the same implies to Vue also.

React vs Vue – why learn React.js

  • Simpler apps – React has a CBA with pure JavaScript; a declarative style; and powerful, developer-friendly DOM abstractions (and not just DOM, but also iOS, Android, and so on).
  • Fast UIs – React provides outstanding performance thanks to its virtual DOM and smart-reconciliation algorithm, which, as a side benefit, lets you perform testing without spinning up (starting) a headless browser.
  • Less code to write – React’s a great community and the vast ecosystem of components provides developers with a variety of libraries and components. This is important when you’re considering what framework to use for development.

React vs Vue – Why Learn Vue.js

  • Vue is incrementally adaptable, with a core library focused on user interfaces that you can use in existing projects
  • You can make small prototypes all the way up to large and sophisticated web applications
  • Vue is approachable–the beginners can pick up the library easily, and the confirmed developers can be productive very quickly

Conclusion

Both React and Vue provide faster development times and quicker debugging solutions. but Vue is a little smaller & faster than react.  It doesn’t mean Vue is better than react. if you love a great community and the vast ecosystem of components then react is better and suitable for you. In a nutshell, if you need to build a lightweight or medium-sized application, or maybe even prototype an idea? Use Vue. Building a larger application? Use React