DEV Community

Ben Halpern
Ben Halpern Subscriber

Posted on

React vs Vue: Compare and Contrast

#healthydebate #javascript #vue #react

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. 😇

Top comments (46)

Collapse
 
ryansmith profile image
Ryan Smith • • Edited

Here's my take on it:

React

  • Aims to be a library concerned with rendering UI and it stays true to that purpose. It is unopinionated on how to build apps.
  • In most use cases, having just a library for rendering UI is not enough, so other packages are typically added (create-react-app with routing, CSS-in-JS, state management, etc.) to improve the experience. With the add-ons, a React app becomes more framework-like.
  • Templating is done with JSX which are HTML-like elements plus standard JavaScript to create conditionals or loops. 
const todoItems = todos.map((todo, index) =>
  <li key={index}>
    {todo.text}
  </li>
);
  • Less domain-specific language as most constructs use standard JavaScript. This can steepen the learning curve but will help improve JavaScript language skills.

Vue

  • Its purpose is also to render UI, but it has added convenience as official parts of the ecosystem (Vue CLI, Vuex, Vue Router). It is not necessarily opinionated or rigid, but it gives more guidance and convenience to build apps.
  • By default, Vue components are separated into a template, scripts, and styles to separate concerns.
  • The templates use directives, which are custom Vue attributes added to HTML elements to output dynamic content that requires an if-statement, loops, etc. 
<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>
  • More domain-specific language to learn, which can lessen the learning curve but you may not pick up as much JavaScript knowledge.
Collapse
 
jwp profile image
John Peters •

I think react is opinionated. (Jsx and redux, top down data passing, hooks) However it doesn't hijack JavaScript.

Collapse
 
miketalbot profile image
Mike Talbot ⭐ •

I do see that differently:

  • JSX is sugar over basic JS, it compiles to produce a javascript function that is fast to run. "v-for=" is not. It's being interpreted at run time I believe (feel free to correct me on that, not a Vue expert, tried it for a prototype and felt it was too "other").

  • I certainly use Hooks (it's a method) but not Redux (don't like it). I use hooks to do lower down binding and reinterpretation of refreshes, because that's my style and it works for me. So I guess React might have an opinion but is isn't forcing it on me :)

Thread Thread
 
jwp profile image
John Peters •

First time I saw Jsx I thought it was the coolest thing since chewing gum! I like it actually.

Hooks tie into their state stuff, I don't like react's state stuff. Why? Because I don't see the advantage of farming off state to another thing. Internal variables to the component or even observables are closer to the metal in my opinion. In fact, an Observable could easily mimic the React state stuff. Right?

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
Thread Thread
 
miketalbot profile image
Mike Talbot ⭐ • • Edited

Yeah it's the diffing/refreshing algorithm. See I don't farm it off much - only perhaps when it's a local thing that isn't part of the real application state. So imagine my app is editing documents, I'd use useState to capture the rename of something, in a dialog, in case the user cancels. The rest of the time my React looks like this:

    return <Bound target={someRoot} refresh={refresh}>
        <BoundTextField field="name"/>
        <BoundTextField field="age" transformOut={convertToMinMaxNumber(0, 100)}/>
        <BoundAutocomplete options={choices} field="mode" label="Choose your mode"/>
    </Bound>

Those BoundXYZ things come from a neat little wrapper that interprets the specific components value and events - a one liner
for all of the MaterialUI components I use and the ability to return to
the core if I need it.

Refresh up there is basically an internal trigger using a useState() hook to trigger rendering and perform other actions.

Thread Thread
 
jwp profile image
John Peters •

What's your thoughts on this? I haven't tried it in React , but this is how I do it in Angular. Angular automatically detects changes to bound elements.

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  let count = 0;
  onCountClicked =()=>{
  count++;
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => onCountClicked()}>
        Click me
      </button>
    </div>
  );
}
Thread Thread
 
miketalbot profile image
Mike Talbot ⭐ •

Yeah I've always liked Angular. We didn't choose it for our current project because we found it hard to "late load" unknown classes for injection into a template - which is a very specific requirement.

If I were to put the point for React it would be that its fairly explicit about what it's doing - it's very mechanical and low level - though having looked at an article of Fiber recently - I guess it isn't THAT low level.

I need something to feel like bound data to be happy, so I make my own. I dislike Redux because your logic is in a huge pile somewhere else. That never worked for the way I reason out problems.

Collapse
 
sergiodxa profile image
Sergio Daniel Xalambrí •

Redux is not part of React, and is not even recommended in the website, neither it's recommended by the team.

But yeah, React has some opinions on how to build UIs, that includes how to define the UI (JSX) and how to control the state of your UI (top down data passing, useState/useReducer) and how to run effects. Nevertheless, aside of that it's completely un opinionated, it doesn't care how you style your components, how you fetch data, how you manager routes, not even how you animate, that is why there are libs for those things instead of being part of React itself.

Thread Thread
 
jwp profile image
John Peters •

When I first learned the top down data model and state stuff, I didn't like react. Then I found they altered Css and renamed tags like link.

Thread Thread
 
aarongarciah profile image
Aarón García Hervás •

What do you mean by "they altered CSS"?

Thread Thread
 
jwp profile image
John Peters • • Edited 
render() {
  let className = 'menu';
  if (this.props.isActive) {
    className += ' menu-active';
  }
  return <span className={className}>Menu</span>
}

Instead of this:

   //where the style sheet is contains the className style 
  <span class="className">Menu</span>

When I first read about this many years ago I did not like it. I didn't understand it at the time.

Thread Thread
 
aarongarciah profile image
Aarón García Hervás •

I'd say that's "altered HTML" (JSX), but no CSS has been altered, right?

Collapse
 
sirseanofloxley profile image
Sean Allin Newell • • Edited

I love Vue, it has a special place in my heart since I was weaned on KnockoutJS and MVVM. Data bind syntax in dom nodes make a lot of sense to me.

I've done more professional react dev over the past 3 yrs, but I can say they both offer very similar or identical features.

React is very FB, and Vue is very OSS, but it's worth pointing out that both ecosystems have a healthy amount of corporate sponsorship and OSS activity.

Vue pushes the single file component paradigm a lot, but you dont have to do it. React pushes the hook based state management, but you don't have to do it.

In conclusion, they are identical twin brothers who grew up in different countries. Who you will want to date or marry largely depends on your first date experience.

Collapse
 
laurieontech profile image
Laurie • • Edited

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.

Collapse
 
fullstackcoder profile image
fullstackcoder • • Edited

A lot can be written here but I will just mention the model binding feature that VueJs and Angular offer that make life easier.

Personal feeling, VueJs contains the best features of the two worlds (Angular and React).

Collapse
 
dtinth profile image
Thai Pangsakulyanont • • Edited

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)

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.
Collapse
 
dinsmoredesign profile image
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👍

Collapse
 
dtinth profile image
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.

Thread Thread
 
dinsmoredesign profile image
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 ;)

Collapse
 
andrewdubya profile image
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.

Collapse
 
drbragg profile image
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.

Collapse
 
krishnakakade profile image
krishna kakade •

Vuejs is fast and easy to learn but for react you need more experience with javascript about ES6 syntax but you can do more things with react btw i still react developer and I am enjoying it also .drop your thoughts below 🔽 have a good day!

Collapse
 
themarcba profile image
Marc Backes •

I believe it is crucial that for whatever JavaScript framework you want to use, you get a good grasp of JavaScript first. (This includes ES6+, which I consider part of JavaScript).

You can do all the things with Vue that you can also do with React. The biggest difference is the way you code and the way it works internally. Both Vue and React can be used for large-scale apps.

I would even make the point that Vue is more versatile because it can easily be included in legacy code while React doesn't give that option.

In the end, it all depends on personal preference. Whether you like React, Vue, Angular, Ember, Svelte, etc... The most important part is that you feel comfortable with the framework or library you choose.

My personal preference is Vue, because I find it way more elegant than React.

Collapse
 
cmelgarejo profile image
Christian Melgarejo •

No svelte.dev love? 😜

Collapse
 
gregfletcher profile image
Greg Fletcher •

Secret svelte devs unite! 😜

Collapse
 
michi profile image
Michael Z •

I just leave this here ☺️

Collapse
 
fayaz profile image
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.

View full discussion (46 comments)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Read next

manishsundriyal profile image

Building your own Interactive Line Graph in ReactJS

Manish Kumar Sundriyal -

bhattji007 profile image

OpenID Connect: Your Simplified Login Solution for Web Apps

bhattji007 -

chrissiku profile image

Update and delete records on a DWN

Chris Siku -

chrissiku profile image

Connect to Web5 and on a DWN in Web5

Chris Siku -