Differences between React and Vue

Published on

It’s been a while since I started working at Rivian back in July. It was a big change for me from a relatively small company to a big company. One of the big changes for me was actually using React. In previous company we were using Vue and I enjoyed it. I wasn’t sure if I could pick up React fast enough to make meaningful contribution. But I think my experience in Vue helped me a bit since basic principle is the same just the execution is different.

React, comparing to Vue, is a very unopinionated UI library that only provides the features needed but lets the users choose how they wish to work with it. In other words, there's almost zero official guide on how to do many things besides how to render a UI based on your states. If you'd like router, there is a library for that; state management, there's a library; form handling, another library. React is not responsible for any of these but due to the big community a lot of good libraries have been born to solve many challenges.

Vue on the other hand is more opinionated but not to the extreme level of Angular. The idea is the same that Vue wants to make developer's lives easier when creating the UI. There's an official package for stage management, router, and Vue itself can handle form very easily but of course there is a library for that too.

The following examples show how to do the same thing but in React and Vue.

Features

JSX

React:

jsx
const CompA = () => <h1>what sup</h1>

Vue:

jsx
<template>
	// HTML stuffs
</template>

<script>
	// JavaScript logic stuffs
</script>

<style>
	// CSS styling stuffs
</style>

In React world, everything can be JavaScript including the template HTML. HTML is not really JavaScript so JSX was born to handle it when used in a JavaScript function. This allows us to manipulate and return an HTML template directly inside a function. To some developers, this is more expressive and can easily control what to render on the screen.

Vue takes a bit more traditional approach where HTML, CSS, and JavaScript are separate in their own blocks. For people that just started learning about frontend development, this is very friendly and very easy to pick up.

Conditional Rendering

React:

jsx
const CompA = () => {
	const [bool, setBool] = useState(false)
	return bool ? <h1>sup</h1> : null
}

Vue:

jsx
<template>
	<h1 v-if="bool">sup</h1>
</template

<script setup>
const bool = ref(false)
</script>

Since everything is React is JavaScript, however you do decision making in JavaScript also applies to React. The example shown here uses ternary operator but you can also use if else, &&, ||, just to name a few.

For Vue, it requires special statement so your Vue template understands your JavaScript statement. In this example, v-if checks the ref variable bool to decide whether to render it or not.

List Rendering

React:

jsx
const CompA = () => {
  const items = [0, 1, 2];

  return (
    <div>
      {items.map((item) => (
        <span key={item}>{item}</span>
      ))}
    </div>
  );
};

Vue:

jsx
<template>
  <div>
    <span v-for="item in items" :key="item">
      {{ item }}
    </span>
  </div>
</template>

<script setup>

const items = ref([0, 1, 2])

</script>

Another example of how React utilizes JavaScript for its rendering purpose. There are a lot of way to loop through data in JavaScript and the most intuitive way to do so is using the map function which loops through data, operates on each data, and returns a new array. We loop through our array and returns a new array of HTML elements.

Previously we saw there was a v-if for rendering, we also have a special v-for operator to do list rendering.

Reuse Logic

React:

jsx
export function Component() {
	const [age, setAge] = useState(20)
	const { user } = useUser()

	return <div>{user}: {age}</div>
}

Vue:

jsx
<template>
	{{user}}: {{age}}
</template>

<script setup>

const age = ref(20)
const { user } = useUser()

</script>

In React 16.8, React hooks became available and it was a new way to reuse logic between components. This also almost eliminate the needs keep using Class-based components since functional components are lighter and closer to what JavaScript is meant to be.

Inspired by React hooks, Vue has its own version called Composition API. They work almost the same way and regardless of what they are called, it helps developers write simpler components and easier for others to review the code.

Quick Thoughts

Both frameworks are really good tools for you to build your web applications. They have great supports and really good communities behind them. They have their own ecosystem and different toolsets built around or on top of them to make developes’ lives easier. Choose whichever one you feel more comfortable and once you know one framework it’s easy for you to pick up another.