React vs Vue.js

Overview

React

Stacks182.6K

Followers147.0K

Votes4.1K

GitHub Stars240.3K

Forks49.7K

Vue.js

Stacks55.5K

Followers44.7K

Votes1.6K

GitHub Stars209.7K

Forks33.8K

React vs Vue.js: What are the differences?

React vs Vue.js Performance: React utilizes a virtual DOM to make updates efficiently, while Vue.js has a more optimized reactivity system and faster rendering compared to React under certain circumstances.
Component Structure: React uses JSX for defining components, whereas Vue.js uses templates with optional JSX-like syntax, allowing for more flexibility in component structures.
State Management: React relies on external libraries like Redux for state management, while Vue.js has Vuex, an official centralized state management solution built specifically for Vue applications.
Learning Curve: React has a steeper learning curve due to its JSX syntax and unidirectional data flow, while Vue.js is more beginner-friendly with its clear and concise documentation and simpler syntax.
Ecosystem: React has a larger ecosystem with more third-party libraries and tools available, while Vue.js offers a more cohesive ecosystem with official solutions for common challenges like routing and state management.
Community Support: React has a larger community and is backed by Facebook, making it more widely adopted and supported in terms of resources and updates, whereas Vue.js has a growing community and is supported by tech giants like Alibaba and Baidu.

In Summary, React and Vue.js differ in performance, component structure, state management, learning curve, ecosystem, and community support.

What Should I Use? React or Vue?

By Josh Dzielak

How They Handle Rendering HTML and CSS

React and Vue are very similar in their approach to handling the DOM (Document Object Model). They both utilize a Virtual DOM approach to rendering and re-rendering elements on a browser. Frameworks that employ this approach keep a virtual copy of the browser’s DOM. They then use this copy to determine how to best render new changes to the browser’s actual DOM.

While React and Vue both utilize the same approach to the DOM, the manner by which they render HTML & CSS is different. Let’s take a look.

HTML & CSS in React

We’ll start off by talking about how React handles rendering elements on the web page. React does this via Components. A basic React Component might looks something like this:

Javascript


import React, { Component } from 'react';
import ReactDOM from 'react-dom';
 
class App extends Component {
  state = {
	count: 0
  };
 
  increaseCount() => {
	const previousCount = this.state.count;
	  this.setState({
	  count: previousCount + 1
	});
  };
 
  render() {
	return (
	  <div>
		<button onClick={this.increaseCount}>
		 You clicked me {{ state.count }} times.
		</button>
	  </div>
	);
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

HTML

<html>
  <header></header>
  <body>
	<div id="root"></div>
  </body>
</html>

React’s approach to handling HTML and CSS comes from utilizing JSX. JSX allows developers to define their HTML templates (and often CSS rendering) within Javascript files. While CSS processing can be done by a variety of libraries (like StyledComponents), the definition of HTML structure from within render() is a signature feature of React.

In our example, we used the ReactDOM class to search for an entry point (in our case a div with the id of “root”), and render the App component.

If we wanted to add more Component to our React application, we could inject them within the component template:

render() {
  <div>
   <MyComponent />
   <MyOtherComponent />
  </div>
}

HTML & CSS in Vue

Vue also utilizes a Component-based approach towards rendering HTML and CSS code in the browser. The means that the framework goes about this is a bit different from React. Vue’s out-of-the box approach towards this is by using HTML templating to define how components are rendered.

Here’s an example:

Javascript

Vue.component('button-counter', {
  data: function () {
	return {
	  count: 0
	}
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
});
new Vue({ el: '#components-demo' });

HTML

<html>
  <header></header>
  <body>
	<div id="components-demo">
	  <button-counter></button-counter>
	</div>
  </body>
</html>

Vue’s approach towards rendering HTML and CSS relies more on actual HTML templating to define how our Components are structured and ordered. In our example, any Vue component tag under the Components-demo div is going to be rendered. If you recall our React example from above, this structuring lived in the React Component.

This doesn’t exclude completely exclude templating from the Vue Component file, though. We still define certain sections of HTML in our template section of our Component. However, specifically in this example, all of the code being defined there is being acted upon by Javascript.

Vue also allows you to utilize the concept of Single File Components. This approach allows you to include your CSS, Templating, and Component Logic - all in a single file. Single File Components offer an effective means to including CSS in Components without having to install a CSS specific library on top of Vue. However, if you have a CSS library you like to use, Vue likely has support for it. Libraries like Vue Loader are helping developers utilize CSS Modules within their Vue Components.

While Vue has HTML templating out of the box, it also supports JSX templating via a Babel extension. The way we approach Vue templating with JSX is different from React, but it provides a way for developers to embrace Vue without ditching JSX.

In Review

React

HTML is rendered in JS (JSX)
CSS is increasingly being rendered in JS

Vue

HTML templates by default.
Supports JSX through extensions
Utilizes style tags in Components by default
Supports a variety of CSS in JS libraries

State Management

React’s Flux and Redux

The React community is well known for bringing forth two popular ideas in the Javascript community: Flux and Redux. While the ideas, themes, and implementations of these ideas aren’t strictly found only in the React community, React apps have benefited the most from them.

Facebook created Flux as a pattern to structure their React architecture across their various apps and services. Flux is based around the idea that all data being managed by a React application - no matter how big or small - is going to be flowing in one direction.

A couple of React developers decided to take the Flux pattern and create a functional-Javascript library out of it called Redux. Redux is essentially taking the primary ideas of Flux and adding a few spins to it. The ideas around actions and dispatchers still exist in Flux as well.

The React community has used Flux and Redux to both achieve scaling heights that not many of us thought possible. Facebook’s adoption and continued support of these ideas has also greatly influenced how people scale React.

Vue’s Spin on Redux

Vue is a much younger framework compared to React. Partially because of its age, it doesn’t have a giant company like Facebook backing and helping develop new patterns and ideas for it yet. However, despite Vue’s smaller following, it can still utilize Flux and Redux in similar ways that React does. So, you won’t have to abandon the idea of using Flux or Redux if you use Vue.

Vue does have a version of Redux: Vuex. It’s a library based around the idea of managing a state with one-way data flows - just like Redux. Vuex is also heavily inspired by the Elm programming language. So, if you’re into Elm-based functional views, it could be a good reason to check out Vue and Vuex. In Review

React is the tried-and-testing framework for creating Javascript applications at scale. There’s no doubt about that. However, Vue has the potential to not only use the same patterns, but create new flavors of it own. If you’re really into Elm and vibe with what Vue has going on, it might be a viable alternative for you and your team. However, you will be going down a road less traveled.

Amount of Control Available to Developers

Every framework has a variation of control that they allow to developers. This comes from two perspectives: an available public API and documentation or resources available to developers.

React Documentation

Facebook has done a great job at documenting a the features, methodologies, and thought process behind React. However, one of the biggest places that needs improvement is guidance on how build and structure your applications. React’s stance on this to not be too opinionated on how to accomplish this. The blessing is that a lot of creativity and innovation has come out of this space (see Flux and Redux). The curse of it lies within the thought that it's pretty difficult to figure out the the best way to build a React app is - since everyone has somewhat of a unique spin on how to create it. Combine that with a few years of API deprecations and you’re stuck wandering around the internet looking for a how-to article that’s most relevant to the React version you’re building against.

Vue Documentation

Vue has very similar documentation coverage and ideas that React has. However, they do include a bit more “official” documentation coverage than React has. Because of this, its offering more of an opinion than React does on how to build and structure applications. However, if you’ve experienced the pain points of React documentation and learning, this could be a welcome change.

Vue is a younger framework and because of that less resources are going to be out there on how to do certain things. If you’re coming from React, this could be a little annoying at first. However, resources around Vue are starting to grow at a pretty steady pace, so the gap between the two is shortening. React and Vue API Accessibility

React offers a few more lifecycle hooks than Vue (componentDidCatch, shouldComponentUpdate). While these hooks aren’t a dominant upper-hand that React has over Vue, they’re certainly useful to have.

Vue is going to offer developers a more API methods from within the HTML Vue templates. This is because Vue relies more on templates than React. So, if you’re into embedding more functionality in your HTML template tags, Vue might be the better choice.

In Review

Vue’s tendency towards more official documentation on certain functionality and design patterns certainly makes it a more refined experience to onboard into as a framework. However, React offers virtually the same experience with a bit more fragmented documentation. Even in places where React’s documentation doesn’t shine, developers have been able to create some amazing resources to help fill the knowledge gap. It's just not all in one central place.

Overall, there’s not a huge difference between the amount of API accessibility each framework offers. This is especially cemented by the fact that they’re both frameworks that focus solely on the user-interface side of things. They support various types of routing and middleware libraries, but they don’t make any sort of effort towards funneling developers to choose one over the other.

Share your Stack

Help developers discover the tools you use. Get visibility for your team's tech choices and contribute to the community's knowledge.

View Docs

CLI (Node.js)

Manual

Advice on React, Vue.js

John Clifford

Software Engineer at CircleYY

Jun 8, 2020

Decided

I used React not just because it is more popular than Angular. But the declarative and composition it gives out of the box is fascinating and React.js is just a very small UI library and you can build anything on top of it.

Composing components is the strongest asset of React for me as it can breakdown your application into smaller pieces which makes it easy to reuse and scale.

455k views455k

Comments

Máté

Senior developer at Self-employed

May 28, 2020

Decided

Svelte is everything a developer could ever want for flexible, scalable frontend development. I feel like React has reached a maturity level where there needs to be new syntactic sugar added (I'm looking at you, hooks!). I love how Svelte sets out to rebuild a new language to write interfaces in from the ground up.

311k views311k

Comments

Malek

Web developer at Quicktext

Mar 28, 2020

Decided

The project is a web gadget previously made using vanilla script and JQuery, It is a part of the "Quicktext" platform and offers an in-app live & customizable messaging widget. We made that remake with React eco-system and Typescript and we're so far happy with results. We gained tons of TS features, React scaling & re-usabilities capabilities and much more!

What do you think?

244k views244k

Comments

Detailed Comparison

React	Vue.js
Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.	It is a library for building interactive web interfaces. It provides data-reactive components with a simple and flexible API.
Declarative; Component-based; Learn once, write anywhere	Reactivity; Components; Modularity; Animations; Routing; Stability; Extendable Data bindings; Plain JS object models; Build UI by composing components; Mix & matching small libraries
Statistics
GitHub Stars 240.3K	GitHub Stars 209.7K
GitHub Forks 49.7K	GitHub Forks 33.8K
Stacks 182.6K	Stacks 55.5K
Followers 147.0K	Followers 44.7K
Votes 4.1K	Votes 1.6K
Pros & Cons
Pros 837 Components 674 Virtual dom 579 Performance 509 Simplicity 442 Composable Cons 41 Requires discipline to keep architecture organized 30 No predefined way to structure your app 29 Need to be familiar with lots of third party packages 13 JSX 10 Not enterprise friendly	Pros 294 Simple and easy to start with 230 Good documentation 196 Components 131 Simple the best 100 Simplified AngularJS Cons 9 Less Common Place 5 YXMLvsHTML Markup 3 Don't support fragments 3 Only support programatically multiple root nodes

What are some alternatives to React, Vue.js?

jQuery

jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.

AngularJS

AngularJS lets you write client-side web applications as if you had a smarter browser. It lets you use good old HTML (or HAML, Jade and friends!) as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. It automatically synchronizes data from your UI (view) with your JavaScript objects (model) through 2-way data binding.

jQuery UI

Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

Ember.js

A JavaScript framework that does all of the heavy lifting that you'd normally have to do by hand. There are tasks that are common to every web app; It does those things for you, so you can focus on building killer features and UI.

Backbone.js

Backbone supplies structure to JavaScript-heavy applications by providing models key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.

Svelte

If you've ever built a JavaScript application, the chances are you've encountered – or at least heard of – frameworks like React, Angular, Vue and Ractive. Like Svelte, these tools all share a goal of making it easy to build slick interactive user interfaces. Rather than interpreting your application code at run time, your app is converted into ideal JavaScript at build time. That means you don't pay the performance cost of the framework's abstractions, or incur a penalty when your app first loads.

Angular

It is a TypeScript-based open-source web application framework. It is a development platform for building mobile and desktop web applications.

Aurelia

Aurelia is a next generation JavaScript client framework that leverages simple conventions to empower your creativity.

Flux

Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.

Famo.us

Famo.us is a free and open source JavaScript platform for building mobile apps and desktop experiences. What makes Famo.us unique is its JavaScript rendering engine and 3D physics engine that gives developers the power and tools to build native quality apps and animations using pure JavaScript.

Related Comparisons

Bootstrap vs Materialize

Django vs Laravel vs Node.js

Bootstrap vs Foundation vs Material UI

Node.js vs Spring-Boot

Flyway vs Liquibase

What Should I Use? React or Vue?

By Josh Dzielak

How They Handle Rendering HTML and CSS

While React and Vue both utilize the same approach to the DOM, the manner by which they render HTML & CSS is different. Let’s take a look.

HTML & CSS in React

We’ll start off by talking about how React handles rendering elements on the web page. React does this via Components. A basic React Component might looks something like this:

Javascript


import React, { Component } from 'react';
import ReactDOM from 'react-dom';
 
class App extends Component {
  state = {
	count: 0
  };
 
  increaseCount() => {
	const previousCount = this.state.count;
	  this.setState({
	  count: previousCount + 1
	});
  };
 
  render() {
	return (
	  <div>
		<button onClick={this.increaseCount}>
		 You clicked me {{ state.count }} times.
		</button>
	  </div>
	);
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

HTML

<html>
  <header></header>
  <body>
	<div id="root"></div>
  </body>
</html>

In our example, we used the ReactDOM class to search for an entry point (in our case a div with the id of “root”), and render the App component.

If we wanted to add more Component to our React application, we could inject them within the component template:

render() {
  <div>
   <MyComponent />
   <MyOtherComponent />
  </div>
}

HTML & CSS in Vue

Here’s an example:

Javascript

Vue.component('button-counter', {
  data: function () {
	return {
	  count: 0
	}
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
});
new Vue({ el: '#components-demo' });

HTML

<html>
  <header></header>
  <body>
	<div id="components-demo">
	  <button-counter></button-counter>
	</div>
  </body>
</html>

In Review

React

HTML is rendered in JS (JSX)
CSS is increasingly being rendered in JS

Vue

HTML templates by default.
Supports JSX through extensions
Utilizes style tags in Components by default
Supports a variety of CSS in JS libraries

State Management

React’s Flux and Redux

Vue’s Spin on Redux

Amount of Control Available to Developers

Every framework has a variation of control that they allow to developers. This comes from two perspectives: an available public API and documentation or resources available to developers.