Get Advice Icon

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

React
React

26.3K
18.2K
+ 1
3.4K
Vue.js
Vue.js

8.9K
6.6K
+ 1
984
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 are the cons of using React?
What are the cons of using Vue.js?
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
Angular 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
No stack decisions found
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