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

[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!

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

[Christian Melgarejo]

No svelte.dev love? 😜

[Greg Fletcher]

Secret svelte devs unite! 😜

[fullstackcoder]

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

[Ryan Smith]

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.

[JWP]

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

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

[JWP]

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.

[Aarón García Hervás]

What do you mean by "they altered CSS"?

[JWP]

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.

[Aarón García Hervás]

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

[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 :)

[JWP]

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>
  );
}

[Mike Talbot ⭐]

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.

[JWP]

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>
  );
}

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

[Sean Allin Newell]

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.

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