React vs Vue: Compare and Contrast

Neither ReactJS or VueJS are overly novel anymore. With lots of time to establish identities, can we have a discussion about what fundamentally differentiates these popular JavaScript approaches?

Feel free to debate, but keep it respectful. 😇

Comments

[Infinity Detective]

i started my front-end skills with vue 2 but after react released version 16 with hooks that means no need of class cumbersome but functional way then i decided to stay with react because vue 3 tried to implement such technique .

[Ibrahim Abdullahi Aliyu]

I go with Vue because

1. It's unopinionated unlike with React( usage of JSX) and Angular( usage of Typescript)
2. It's choice of state management(Vuex) and Routing (Vue-router) although you are free to not use them
3. Beginner friendly
4. Maintainability( the creators are dedicated in improving it) The advantage I think React have over Vue is it's community, although Vue community is also growing fast

[Etienne Burdet]

One thing I really like with Vue, is that it makes very clear what is specific to Vue. You migh call the props/component/data/methods object boilerplatey, but when you come to a code base you clearly have the This part is Vue and This part is regular JS.

It also provides shorthands for the most common tasks, as part of the same "We're not afraid to be a framework" philosophy.

Reach though, with its it's just JS approach, it's harder if the other dev has done something because of React or some other purposes. This leads to an unecessary amount of constructor(props) { super(props); this.state = {… for trivial things for exemple.

[Pan Chasinga]

This is my personal take, please take it with a grain of salt.

Vue

I'm quite frustrated with Angular, and although Vue seems easier to begin with, it still embraces some patterns from Angular, like bi-directional bindings, which are really confusing in a bigger code base.

Vue still requires one to separate representation (HTML) from data (JS), which is a conventional way of thinking but the context-switch can be exhausting.

I like the community and the fact that it's being authored to massive adoption by just a developer is empowering. The ecosystem is catching up and on-par with React.

React

Although React may appear to have a lot of jargons, it is very fast to learn coming from a functional language. If you have tried Elm, I think you will appreciate React (Elm is like the ultimate Nirvana for React). It was confusing to me at first, but more and more functional components seem to make a lot of sense and easier on debugging.

I like the fact that I can think of elements in terms of data (JSX) instead of HTML and code in the traditional way. It's very much coherent with the way many functional languages do things. The current introduction of hooks finally obliterate the need to write class-based components, which is awesome.

[GaurangDhorda]

which one is your biggest frustration about angular?

[santosh]

Angular itself.

[Michael Z]

I just leave this here ☺️

Sarah Dayan

@frontstuff_io

- How do I find a @vuejs developer?
- Don’t hire a @vuejs developer, hire a JS developer. Then give them a day on the docs and they’ll be a @vuejs developer. – @chrisvfritz

So true. Took me a day of reading the full docs (literally) to feel ready to build with Vue. #VueConfTO

14:27 PM - 12 Nov 2019

244 1127

[Derek D]

Personally, it boils down to the ecosystem for me. React has a very vibrant community, but that is both a plus and negative IMO. The React landscape is constantly changing. New, innovative, things come quickly, but the community is so fragmented on how to do things, it makes it harder to just pick the right tools and start working.

Outside of Context and Hooks, for state management, React has so many options:

• Redux
• Mobx
• Unstated
• Recoil
• Kea
• Stator
• Etc.

Vue has an official library - Vuex.

Routing in React is different from pretty much every other library ever made. Instead of creating routes as objects (controllers), they are created as components inside the JSX. React Router v6 will FINALLY allow route definition by object, but it's still in alpha last I looked.

Vue offers this now, with an official router plugin.

React has a million ways to style components, few of which actually use basic CSS.

Vue allows you to use CSS, SCSS, etc and scope them to the component without an effort. Just add "scoped" to the style tag. You can also export it as a module with "module", instead.

Building something as simple as a form should be... simple. Not in React. There are countless packages to handle forms because doing it is cumbersome with 1-way data binding.

With Vue, just add v-model to your from element and your values magically update on each input.

Create-react-app is limited and assumes you'll only build your app a certain way.

The Vue CLI is super flexible and prototyping and scaffolding apps is super simple. They even have the Vue UI app built in to give the CLI a GUI.

JSX has first class support in Vue, too. So does Pug. Both are configuration options in the CLI. You don't have to use the template system.

The thing with React is, you HAVE to add so many libraries to it, because it's not really that powerful without them and with Vue, there's not many libraries you have to reach out for besides what's included in the "core" ecosystem.

IMO Vue is going to get a huge spike in popularity this year, once v3 is released. First-class TypeScript support, Hooks, fragments, portals, suspense and an even smaller bundle size with faster response times, all with a strong core ecosystem.

Don't get me wrong, I love React. If it weren't for React, Vue 3 wouldn't be shaping up to be so awesome, but I'd have a hard time recommending it for anything other than the fact that there are more React developers than anything else right now. IMO, picking something based on popularity isn't a good idea, though, unless the other option is so small its longevity is a concern.

[leob]

Vue is more "batteries included", with stuff like Vue Router and Vuex offered "out of the box". This leads to much less debate and discussion about "how to do things" (even quite basic things, that is).

I would argue that this makes Vue (at least for beginners) much more approachable and less intimidating than React, with a smaller learning curve.

In contrast, the React world seems to be dominated way more by discussions about patterns and libraries, all of them with their fans and opponents. The debates surrounding Redux (with all of its variants - "Thunks", "Sagas" and so on), Context, HOCs, Render Props, Hooks etc are never ending.

What React has going for it is of course its dominant market share in terms of jobs, community and ecosystem - apart from that I'm definitely more sympathetic to the Vue approach.

P.S. I saw Svelte mentioned here in a few comments and I think it also absolutely deserves attention!

[Fayaz Ahmed]

I had an option to choose when my previous company was paying for a course, I had a react course already purchased but vue kept popping up in my social. I tried both and ended up choosing vue because it was just more readable and I was able explain my frontend code even to my Team lead who is a traditional python dev and now I work as a professional vue dev and I can say I am pretty happy with my descision of moving ahead with it.

[Pacharapol Withayasakpunt]

Considerations,

• Is <template> tag a great idea? What about SFC as in Vue and Svelte? It actually makes it harder for IDE and TypeScript... But it enhances a great structure. But I think foldered component as in Angular might be a better idea not to compromise the IDE, and also add .spec.ts.
• I never think JSX is a bad idea. Just SFC / decoupling with templating language is a better idea. But JSX might be easier to lint / IDE-integrated.
• Is two-way binding a good idea, or better immutable as in React?
• Is Vue 3 (vs Vue 2) takes a good direction or not?
• In the end, I only care about scalability / maintainability? Not even sure which is better (both have downsides).

[Matthew Daly]

I've dabbled with Vue a couple of times, but I've found it to be too complex for my liking, with more magic than I'd like and an uncomfortable amount of additional syntax to learn.

React is conceptually simpler, and thus I find it easier to understand what is going on. As I generally write only functional components nowadays, it's easy to understand a component as just a function that returns HTML. It also tends to encourage writing smaller components than Vue, making them easier to understand. There's also less special syntax, since apart from a few differences like className and htmlFor, the templates are mostly just Javascript. That does make the barrier to entry with React a bit higher, though.

I really enjoy working with React, since I've always enjoyed writing Javascript and I feel like it embraces the language to a greater extent than Vue or Angular.

[Thai Pangsakulyanont]

I use both React and Vue. Here are my thoughts:

When I build prototypes, I like to use Vue.

When I prototype, I use Vue without any build tooling (no vue-cli, no webpack, no dev server; just an HTML file; double-click, open, edit, refresh). I made a single-file template for me to kickstart new projects with it.

• For React, at least I need a dev server to be productive. Some people recommended me babel-standalone, but it doesn’t work with <script src="..."> in file:/// URLs without disabling web security in Chrome. htm also exists that lets me create virtual DOM nodes with tagged template literals, but my code wouldn’t be in normal JSX syntax anymore. I also tried hyperscript before. Having different syntaxes to represent the virtual DOM in different React projects added a lot of mental load. When I use React I prefer JSX and nothing else.

I find Vue’s reactivity system and its two-way bindings for forms (v-model) made me very productive. I just change the object (this.loading = true) and the UI updates. No need to useState and do all the data-binding ceremony.

• Now the closest thing to this experience I’ve found so far in React land is MobX, but it requires me to use either useObserver (hooks), <Observer> (render props) or observer (HOC) to make the component reactive. It’s not built in.

Vue comes with a :class helper, which turns arrays and objects into a class string. e.g. :class="[ running ? 'bg-green-400' : 'bg-red-400', { 'opacity-50': disabled }]"

• In React, I had to concatenate className strings by myself or use a third-party library such as classnames. It’s not built in.

Vue has enter and exit transitions as well as move animations (implementing the FLIP technique) built-in.

• In React I would have to use a 3rd party library like react-flip-move. It’s not built in.

However, if I’m creating a project that I intend to maintain long-term, I would use React.

It has a first-class support by TypeScript ("jsx": "react"). The JavaScript and TypeScript Language Service allows me to do large-scale automated refactoring. For example, in VS Code, I can rename a component’s prop, let’s say from title (a very common name) to pageTitle, and the editor would find every file that uses this component and automatically renames it. (Video demonstration)

• For Vue, there’s been a feature request for this (rename symbol) support since 2017. As of writing, Vetur still cannot rename symbols. I would have to either use WebStorm or resort to find-and-replace (can be risky for common prop names like title) or manual refactoring (can be more time-consuming).

React components can return just text (no wrapping nodes), as well as multiple nodes (React.Fragment).

• For Vue, you get errors like ”Component template requires a root element, rather than just text.” and “Cannot use <template> as component root element because it may contain multiple nodes.” React supports this since 2017. For now, in Vue, we have to use a 3rd party library like vue-fragment. I heard that Vue 3 will support this and I am really looking forward to it.

[Derek D]

Vue 3 will fix all your qualms with v2 and should be entering Beta relatively soon. It has first class TS support (it's written in TS), fragments, portals, suspense, hooks and is smaller and faster👍

[Thai Pangsakulyanont]

Thanks for your comment, I’m looking forward to it! 🤩

Regarding tooling, will I be able to rename a prop and have that rename propagate throughout my source tree when v3 comes out?

I consider this an absolute must before I can consider using it in serious projects because I do a lot of small refactoring.

Sometimes I name variables/props x/foo/tmp and rename it later when I have the main logic figured out, where I can actually be more thoughtful about naming things… and I don’t want to do that renaming manually.

[Derek D]

To be honest, I have no idea. I don't generally rename props. I don't see an issue if you're using JSX for templating, but using the template syntax, I'm not sure. You can download the alpha and try ;)

[Andrew W]

Love your starter template! That was very similar to one I used (except with routing). I recently changed to http-vue-loader so I can write my templates in external files.

[Preet Parekh]

Started out with Vue, for the reason that it seemed more like Html. (This is before hooks ).
Really enjoyed the developer experience given this was my very first web framework.
The nature of Vue having fundamentals (Routers SSR ) in house made it super easy to get things done.
Also the the ability to use vue-ui to start apps was kinda magic to me.

The only problem with Vue is the UI libraries available on top are kinda not amazing.

Now coming to react, gave it a shot after the stabilization of hooks and it was a breeze to build products with it.
The task in using react is you have a lot of options. You task is to over time try these out and pickout the packages that you like to work with.
And that's a tedious task.

[Laurie]

The biggest difference to me is the decisive opinions on state and routing that Vue made and React did not.

With Vuex and Vue router, there is an expected bundling of tools for creating a Vue app. This makes it more approachable for beginners.

React is incredibly configurable, but that can be intimidating for those that aren't comfortable architecting a full frontend application.

I'll also add that I'm a big fan of the breakdown of a Vue component. They took the angular style of 3 files and collapsed it into one. Data, display, styles.

React, again, is much more open to interpretation on best practices in component structure.

[Andrew W]

I started with Angular 6-ish years ago, and was AMAZED when I found React: So much less boiler plate, flexibility in how the app is built, etc.

But my templates started to feel like PHP. A ton of code mixed with HTML. I also prefer to build apps incrementally, so not being able to drop in static HTML without customizing "class=" etc bothered me.

The first time I saw Vue, I fell in love immediately. I loved the Angular-like template syntax for looping, if statements, etc. The data binding was icing on the cake, not having to setState and just updating an object as I normally would.

I know Vue has its downsides. I have no idea how many times I've used $forceUpdate() or $set() as a hack because an object wasn't initialized with all of the data necessary. I also know React has changed a lot since I last used it.

I'm pretty sure the dev styles are just down to personal preferences, so I'm no React hater!

[Derek D]

Curious why you're having to use Vue.set() so much? I constantly hear it as being a downside to Vue, but in the 50+ apps I've built currently running in production, I don't think I've ever had to use it (this won't be an issue in v3, though 👍). Every once and a while I'll need to use $forceUpdate() but usually it's because of something that was coded incorrectly after going back and looking at it later.

[Drew Bragg]

I started with React and used it a lot. I was super hesitant to start using Vue but my new job required it. After about a month of Vue I liked it as much as React. After 3 I liked it more than React and started to deep dive into it. Single file components made a lot more sense to me, the ability to build functional components instead, when appropriate, was great, and the whole Dev process was just nicer. I've been using Vue for almost 3 years now I and I don't miss React at all. Just looking at files in React vs Vue make me love Vue even more.

As a bonus, it's super easy to inject Vue components into a Rails view. I normally use Stimulus if I'm working on a Rails project but if I need JS super powers being able to inject a Vue component easily is awesome.