React vs Vue.js

Get Advice Icon

Need advice about which tool to choose?Ask the StackShare community!

React
React

43.5K
35K
+ 1
3.5K
Vue.js
Vue.js

14.1K
11.6K
+ 1
1.1K
Add tool

What Should I Use? React or Vue?


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 ```js

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 (

); } }

ReactDOM.render(, document.getElementById('root')); ```

HTML js <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 js 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 js <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.

React vs Vue.js: What are the differences?

What is React? A JavaScript library for building user interfaces. 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.

What is Vue.js? Reactive Components for Modern Web Interfaces. Vue.js is a library for building interactive web interfaces. It provides data-reactive components with a simple and flexible API.

React and Vue.js belong to "Javascript UI Libraries" category of the tech stack.

"Components", "Virtual dom" and "Performance" are the key factors why developers consider React; whereas "Simple and easy to start with", "Good documentation" and "Components" are the primary reasons why Vue.js is favored.

React and Vue.js are both open source tools. Vue.js with 142K GitHub stars and 20.4K forks on GitHub appears to be more popular than React with 131K GitHub stars and 24.2K GitHub forks.

reddit, Instacart, and Slack are some of the popular companies that use React, whereas Vue.js is used by Sellsuki, Repro, and BrightMachine. React has a broader approval, being mentioned in 3180 company stacks & 2967 developers stacks; compared to Vue.js, which is listed in 819 company stacks and 1169 developer stacks.

What is React?

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.

What is Vue.js?

It is a library for building interactive web interfaces. It provides data-reactive components with a simple and flexible API.
Get Advice Icon

Need advice about which tool to choose?Ask the StackShare community!

Why do developers choose React?
Why do developers choose Vue.js?

Sign up to add, upvote and see more prosMake informed product decisions

What companies use React?
What companies use Vue.js?

Sign up to get full access to all the companiesMake informed product decisions

What tools integrate with React?
What tools integrate with Vue.js?

Sign up to get full access to all the tool integrationsMake informed product decisions

What are some alternatives to React and Vue.js?
Angular 2
It is a TypeScript-based open-source web application framework. It is a development platform for building mobile and desktop web applications.
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.
NativeScript
NativeScript enables developers to build native apps for iOS, Android and Windows Universal while sharing the application code across the platforms. When building the application UI, developers use our libraries, which abstract the differences between the native platforms.
jQuery
jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.
Xamarin
Xamarin’s Mono-based products enable .NET developers to use their existing code, libraries and tools (including Visual Studio*), as well as skills in .NET and the C# programming language, to create mobile applications for the industry’s most widely-used mobile devices, including Android-based smartphones and tablets, iPhone, iPad and iPod Touch.
See all alternatives
Decisions about React and Vue.js
Arik Fraimovich
Arik Fraimovich
AngularJS
AngularJS
Angular 2
Angular 2
React
React
Vue.js
Vue.js

When Redash was created 5 years ago we chose AngularJS as our frontend framework, but as AngularJS was replaced by Angular 2 we had to make a new choice. We decided that we won't migrate to Angular, but to either React or Vue.js. Eventually we decided to migrate to React for the following reasons:

  1. Many in our community are already using React internally and will be able to contribute.
  2. Using react2angular we can do the migration gradually over time instead of having to invest in a big rewrite while halting feature development.

So far the gradual strategy pays off and in the last 3 major releases we already shipped React code in the Angular.js application.

See more
Adam Rabinovitch
Adam Rabinovitch
Global Technical Recruiting Lead & Engineering Evangelist at Beamery · | 5 upvotes · 99.2K views
atBeameryBeamery
AngularJS
AngularJS
React
React
Angular 2
Angular 2
Vue.js
Vue.js
Aurelia
Aurelia
Polymer
Polymer
#Hiring

At Beamery we had a large, AngularJS app, built over several years. Our clients were happy, but we were not. We had several problems: Building new features was slow. AngularJS doesn’t scale nicely. Features clash with each other. Isolation doesn’t come as standard, you have to work hard to keep features separate. It takes time to get it right. #Hiring was hard, for all the reasons listed above. The app was slower than it needed to be because AngularJS was never built for speed. We wanted to render half a million contacts, and Angular was fighting us all the way.

As time went by it become harder to find developers who would willingly choose AngularJS over React Angular 2 , Vue.js , Aurelia or Polymer .

So we faced a choice. We could throw it all away and start again, we could upgrade to Angular 5, or the awesome option - we could use micro frontends. We chose the awesome option.

See more
Omar Melendrez
Omar Melendrez
Front-end developer · | 4 upvotes · 4.4K views
Vue.js
Vue.js
React
React
Node.js
Node.js
C#
C#
Python
Python
#Fullstack
#Vscode

I'm #Fullstack here and work with Vue.js, React and Node.js in some projects but also C# for other clients. Also started learning Python. And all this with just one tool!: #Vscode I have used Atom and Sublime Text in the past and they are very good too, but for me now is just vscode. I think the combination of vscode with the free available extensions that the community is creating makes a powerful tool and that's why vscode became the most popular IDE for software development. You can match it to your own needs in a couple of minutes. Did I mention you can style it your way? Amazing tool!

See more
Heroku
Heroku
Netlify
Netlify
Vue.js
Vue.js
Angular 2
Angular 2
React
React
ExpressJS
ExpressJS
vuex
vuex
Puppeteer
Puppeteer
ASP.NET
ASP.NET
#Heroku
#Seo

I found Heroku to be a great option to get ExpressJS up and running with very little hustle. The free tier is great, but I'd recommend to set up a cronjob to visit your site every few minutes so that the server stays awake. Netlify was the option to host the front-end because doing the server side rendering on #Heroku would have taken a little more time than I'd like to. For the moment pre-rendering the app with prerender-spa-plugin is enough to help with #seo. Puppeteer was my choice over other options because it made it easier to scrape websites made on ASP.NET which is what I needed in this case. And Vue.js is my top choice at the moment because it's really beginner friendly and it has a lot of the features I like about Angular 2 and React. vuex is a must in most of the app I build.

See more
Buzz Zhang
Buzz Zhang
CTO at Qiban · | 5 upvotes · 2.8K views
Vue.js
Vue.js
Angular 2
Angular 2
React
React

For those who want to develop business in China, Vue.js would be your first choice. I never thought Vue.js is better than Angular 2 or React , but for project language choosing, sometimes you should not only consider technology advance, but also must consider human resource market.

In China, there are far more engineers familiar with Vue.js than React and Angular, that means you can easily hire some front end engineers with much cheaper price. The reason why Vue.js is so popular in China is just because the community, as Vue.js author You Yuxi is Chinese, the community around Vue.js is mainly in Chinese language and most engineers speaks Mandarin, thus they can get questions and problems solved at first time.

From technical side, Vue.js is more like a simplified Angular, syntax are mostly same, ng-if became v-if, ng-for became v-for. The most convenience part is Vue.js put html+js+css in one single vue file so that you will not have to create a separate folder to include 3 files as Angular does.

To be frankly, I love Vue.js especially when I need to quickly create a small project contains only 1 or 2 pages even 5 pages, Vue.js would be the best choice, it's small and fast. For a really big and huge project, I will consider Angular, after all, there are far more complicated and interesting plugins to play with, Angular need more time, more code, more complex, but we senior engineer is living for some sophisticated code which only we can understand and set barriers for other beginners, right?

See more
Ido Shamun
Ido Shamun
at The Elegant Monkeys · | 5 upvotes · 76.1K views
atDailyDaily
Vue.js
Vue.js
React
React
Polymer
Polymer
#Frontend

For developing our #frontend applications, we decided to use Vue.js . Being such an easy to learn library, compared to React for example, it made everything so easy. At first we started with Polymer but the existing tooling and small community at the time made us look for alternatives.

See more
Rory Womack
Rory Womack
Software Engineer at Relatient · | 3 upvotes · 2K views
Angular 2
Angular 2
Vue.js
Vue.js
React
React

I recommend using Angular 2 when moving from Angular 1 if you are looking for a fully featured framework solution. Neither Vue.js nor React just work out of the box and require creating your own components from scratch as well as the kind of support architecture available in Angular 2 out of the box. However if you are looking for something lightweight to add reusable components to an existing application Vue.js and React are more ideal to that end.

See more
Rafael Santos
Rafael Santos
CTO at Decision6 · | 11 upvotes · 25.2K views
atDecision6Decision6
AngularJS
AngularJS
React
React
Vue.js
Vue.js

Back in 2015, my company had a back-office dashboard that was originally built in AngularJS 1. Since Angular 2 presented drastic changes we decided to rethink the options and we looked at React and Vue.js. Besides, at the time, Vue had basically only one developer, its structure (100% oriented to components) and also its backward compatibility focus (Angular 1 to 2 no more) we preferred it against React cause it seemed more straightforward, clean and with a small learning curve. Now 4-5 years later we are very happy with our choice.

See more
Vue.js
Vue.js
React
React

I find using Vue.js to be easier (more concise / less boilerplate) and more intuitive than writing React. However, there are a lot more readily available React components that I can just plug into my projects. I'm debating whether to use Vue.js or React for an upcoming project that I'm going to use to help teach a friend how to build an interactive frontend. Which would you recommend I use?

See more
Johnny Bell
Johnny Bell
Senior Software Engineer at StackShare · | 20 upvotes · 88.3K views
Vue.js
Vue.js
React
React

I've used both Vue.js and React and I would stick with React. I know that Vue.js seems easier to write and its much faster to pick up however as you mentioned above React has way more ready made components you can just plugin, and the community for React is very big.

It might be a bit more of a steep learning curve for your friend to learn React over Vue.js but I think in the long run its the better option.

See more
Mark Scott
Mark Scott
Personal Development at Mark Scott · | 3 upvotes · 0 views
Vue.js
Vue.js
React
React

Having developed in both Vue.js and React, I agree with your assessment of Vue. It does feel light and easier to understand and therefore learn. Seeing that Vue has some genetic roots with React, I would say start your friend out on Vue. If they need to learn React later, that should give them a good foundation. If you have a Pluralsight subscription, look for my course on Vue.js and feel free to use the demo project as a starting point.

See more
Thomas LEVEIL
Thomas LEVEIL
at Mediaveille · | 8 upvotes · 1 views
Vue.js
Vue.js
React
React

I chose to use Vue.js a few years ago mainly for the easy learning curve. I have no experience with React, so I won't make any comparison here. Regarding available components, I never felt locked in because of Vue when looking for components. It happens that a component I wish to use is not available as a Vue component (and nobody published any Vue wrapper for it), but in such cases I was able to quickly hack a Vue wrapper component. In the end I don't think a decision to choose one framework over another should be made solely because of the number of components available. (And not all components in either framework is maintained, bug free, documented or easy to use)

See more
Oguzhan Cetin
Oguzhan Cetin
Senior Developer at Melantis · | 4 upvotes · 2 views
React
React
Vue.js
Vue.js
JavaScript
JavaScript

React is great, Vue.js is also great. But I'm personally using React, because React is changing the way I look at how JavaScript should be. This is a really big plus for me. Vue is good, but it's just another alternative. Also, too many big companies are using React, that means you can trust it for big projects.

See more
Node.js
Node.js
Laravel
Laravel
PHP
PHP
React
React
Vue.js
Vue.js

I want to create a video sharing service like Youtube, which users can use to upload and watch videos. I prefer to use Vue.js for front-end. What do you suggest for the back-end? Node.js or Laravel ( PHP ) I need a good performance with high speed, and the most important thing is the ability to handle user's requests if the site's traffic increases. I want to create an algorithm that users who watch others videos earn points (randomly but in clear context) If you have anything else to improve, please let me know. For eg: If you prefer React to Vue.js. Thanks in advance

See more
Node.js
Node.js
Vue.js
Vue.js
React
React
JavaScript
JavaScript
.NET
.NET

I want to start a SaaS or product based company and thinking of going with the .NET family of technologies, as I have been working on it for the past 3 years. Can anyone provide insights on the pros and cons of this approach? Would I be able to run modern JavaScript frameworks on top of it like React/Vue.js/Node.js?

See more
Interest over time
Reviews of React and Vue.js
Review ofReactReact

Perfect workflow

How developers use React and Vue.js
Avatar of Instacart
Instacart uses ReactReact

Before two weeks ago or so, it used to be Backbone views and models, and everything was on our main store app, and our mobile web app, but actually, we just switched our mobile web app to using ReactJS for the interface. So it’s using Backbone models but ReactJS front-end components. Really, it was borne out of the frustration with how the Backbone model-view bindings worked, and it wasn’t especially performant for large views, and we had to do lots of tricks to make it performant. But swapping that out with React views meant that it could be both simpler and faster without having to spend a lot of time on that.

One other interesting thing about that is, since React actually works okay with the Backbone models and the Backbone router and stuff like that, we didn’t have to rewrite the mobile web application and update it to ReactJS. Rewrites are almost always a bad idea. We were able to upgrade pieces of it at a time, move on to React, and now the entire thing is using React and just has the Backbone router and models and stuff like that that we already had, so it's a lot faster.

Avatar of Netflix
Netflix uses ReactReact

At the beginning of last year, Netflix UI engineers embarked on several ambitious projects to dramatically transform the user experience on our desktop and mobile platforms. Given a UI redesign of a scale similar to that undergone by TVs and game consoles, it was essential for us to re-evaluate our existing UI technology stack and to determine whether to explore new solutions. Do we have the right building blocks to create best-in-class single-page web applications? And what specific problems are we looking to solve? Much of our existing front-end infrastructure consists of hand-rolled components optimized for the current website and iOS application. Our decision to adopt React was influenced by a number of factors, most notably: 1) startup speed, 2) runtime performance, and 3) modularity.

React has exceeded our requirements and enabled us to build a tremendous foundation on which to innovate the Netflix experience.

Avatar of Cloudcraft
Cloudcraft uses ReactReact

Web-frontend programming prior to React: like banging rocks together. With React: Like wearing fusion powered underwear. Gives you a nice warm feeling. Using React for Cloudcraft.co allowed us to create a beautiful UI in record time (1 month start to launch), with virtually no bugs popping up during development. The functional approach to just rendering your component given a state just makes so much sense, with React figuring out the delta between your current and desired representation. It's the future kids!

Avatar of Kurzor, s.r.o.
Kurzor, s.r.o. uses ReactReact

React is choice number 1 when it comes to JS development at Kurzor. We choose React because it solves many issues with web applications in a elegant way. Writing an app in components is useful for coordination and isolation of concerns. React forces you to abandon state and use vertical passing through props instead. And having as many Pure Components as possible helps to write cleaner code.

With React we usually use: Redux, React Router, React Toolbox, Styled Components.

Avatar of Kent Steiner
Kent Steiner uses ReactReact

This is the best component framework and API available today for building modern web sites and apps. I really enjoy how minimal it is, and powerful at the same time. It removes opinionated development and replaces it with logic and data philosophies, which has in turn fostered a robust and lively code and support community.

Avatar of Andrew Gatenby
Andrew Gatenby uses Vue.jsVue.js

We think VueJS is great. It's the main tool used to generate the client-side UI of our updated admin system, as well as being used in other smaller projects. The possibilities that VueJS brings to the table, means that we can quickly create rich and app-like interfaces and experiences.

Avatar of Marc3842h
Marc3842h uses Vue.jsVue.js

Vue.js is used in Kuro (https://github.com/Marc3842h/kuro).

Kuro is the browser facing portion of shiro. Vue.js is used for rendering the interface of https://shiro.host as the frontend is client side rendered.

Avatar of Mick Dekkers
Mick Dekkers uses Vue.jsVue.js

Vue.js is my front-end framework of choice. It's light, fast, and extensible. Its simplicity and reactivity system make it an absolute pleasure to use and it has a wonderful, ever-growing community.

Avatar of Flux Work
Flux Work uses Vue.jsVue.js

New and very popular. Less legacy to deal with compared to React. Great documentation. Easy to get started.

Avatar of Fred Steffen
Fred Steffen uses Vue.jsVue.js

It's amazing! Single file components, supports pug and sass, very easy to use, very fast, light weight.

How much does React cost?
How much does Vue.js cost?
Pricing unavailable
Pricing unavailable