John Au-YeungCheck out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62
Subscribe to my email list now at http://jauyeung.net/subscribe/
React is the most popular front end library for the last few years.
Vue is a front end framework that’s catching up in popularity with React in the last few years.
It’s hard to choose between the 2 frameworks since they both their pros and cons. When we choose one, we’ve to stick with it for a few years.
In this article, we’ll look compare the most basic features of these 2 frameworks, which are creating the app and displaying data.
Creating the App
React has the Create React App command-line program which lets us create a scaffold of the app with JavaScript or TypeScript.
It has built-in support for building a progressive web app.
Create React App can run tests that are in the __tests__ folder.
Vue has the Vue CLI to create an app with a JavaScript or TypeScript, plus we can incorporate CSS, SASS, Less, etc. for styling. We can also add testing infrastructure right into our scaffold by changing the options that are shown in the Vue CLI.
We can also add Vue Router and Vuex from Vue CLI.
It also has support for building a progressive web app.
Vue CLI has a GUI for creating quick projects to prototype apps.
In addition to using CLI programs, we can use the script tag to add React and Vue to our app.
However, most React libraries are only available as NPM packages. Whereas many Vue libraries can be added via a script tag.
This means that Vue is more suitable for enhancing legacy apps since they often don’t have front ends that are built with modern frameworks and build tools.
It also makes Vue a better choice for quick prototyping since we can just add libraries via script tags and use them without thinking about build tools and scaffolding.
Template Syntax
Most React apps use JSX to display data on the screen. It’s a shortcut for calling the React.createElement method.
Vue templates have their own syntax. For example, we use double curly braces to display variables on the screen.
For example, we can write the following to display a variable’s value in a React app:
import React, { useState } from "react";
export default function App() {
const [foo] = useState("foo");
return <div className="App">{foo}</div>;
}
Whereas we write the following to display a variable’s value in a Vue app:
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{foo}}
</div>
<script src="index.js"></script>
</body>
</html>
index.js :
const app = new Vue({
el: "#app",
data: {
foo: "foo"
}
});
In the code above, we display the value of the foo property in data in the template by writing:
{{foo}}
The React way is slightly simpler in that we put everything in the same component function.
On the other hand, we added what we want to display with Vue in a separate template.
In both cases, we have some new syntax to learn.
Conditionally Display Data
In React apps, we display items conditionally with normal if or switch statements in the render method of class components or returning JSX in function components.
The logic to toggle them on and off is all in the component file itself.
For example, we can write the following to toggle something on and off in a React app:
import React, { useState } from "react";
export default function App() {
const [show, setShow] = useState();
const toggleShow = () => {
setShow(!show);
};
return (
<div className="App">
<button onClick={toggleShow}>Toggle</button>
{show && <div>foo</div>}
</div>
);
}
In the code above, we added a Toggle button, and then the show state with the setShow function toggle the show state between true and false .
Then we show the div conditionally with:
{show && <div>foo</div>}
With Vue, we display items on the template and use v-if to control it.
For example, we can write the following code to do that:
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="toggle">Toggle</button>
<div v-if="show">foo</div>
</div>
<script src="index.js"></script>
</body>
</html>
index.js :
const app = new Vue({
el: "#app",
data: {
show: false
},
methods: {
toggle() {
this.show = !this.show;
}
}
});
In the code above, we made the toggle method to toggle this.show on and off.
Then we added a Toggle button to call toggle and display it conditionally with the v-if directive.
As we can see, the React implementation is simpler than the Vue implementation.
We also have to understand the parts of a Vue component like when are components methods calls and where are states stored.
With the useState React hook, this is more obvious. We also don’t have to add things to templates and components to add something.
We can add everything to one file with React components. This is more convenient for simple components.
However, Vue’s approach is more convenient for separating logic from the display code.
This is a cleaner approach for organizing a component when things are more complex.
Verdict
Vue is more of a full-fledged framework, as opposed to React, which is more of a library.
The Vue CLI has many more options for creating an app with the options required for creating an app.
Create React App only has options for creating a basic app that doesn’t have routing or any state management solution.
This isn’t ideal since most people want a single-page app rather than enhancing a legacy app.
Also, Vue libraries are available as script tags, whereas most React libraries are only available as Node packages.
Vue is the clear winner with the Vue CLI with its options.
Displaying data are similar to both React and Vue. They both require some logic and display items and conditionally display items on the screen.
They both have their own workflows, but Vue’s design has cleaner separation between logic and templates, whereas React puts everything in one place.
