React vs Vue — Setting Attributes and Displaying Collections

Photo by Giovany Pineda Gallego on Unsplash

React has been 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 and has an incredibly passionate developer community adopting it.

It’s hard to choose between the 2 frameworks since they both have 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 setting attribute and displaying collections with React and Vue.

Setting Attributes

With React, we can set attributes like HTML. But we can also set dynamic attributes in our app.

For example, we can write the following code to do that:

import React, { useState } from "react";export default function App() {
const [color, setColor] = useState("red");
const toggleColor = () => {
setColor(color === "red" ? "green" : "red");
};
return (
<div className="App">
<button onClick={toggleColor}>Toggle</button>
<div className="box" style={{ color }}>
foo
</div>
</div>
);
}

In the code above, we set the color of the div dynamically with the hook, which returns the function to let us set the color.

Then we pass in the to the attribute. To set a static class name for our div, we have to use the attribute. We have to remember differences like instead of when we set attributes with React.

With Vue, we put our data and methods in the component and set the static and dynamic attributes as follows:

:

<!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="toggleColor">Toggle</button>
<div class="box" :style="{color: color}">
foo
</div>
</div>
<script src="index.js"></script>
</body>
</html>

:

const app = new Vue({
el: "#app",
data: {
color: "red"
},
methods: {
toggleColor() {
this.color = this.color === "red" ? "green" : "red";
}
}
});

With Vue, we have to add the method to the method and a default value for the field in the object.

Then we have to add the same logic for setting the color in the method.

This is more complex than what we have with React. However, it does separate the logic for display and business logic into separate parts.

This is easier to deal with when our components are more complex.

Displaying Collections

We can display collections with React by mapping our arrays to a collection of components.

For example, if we have an array of names, we can write the following to display them with React:

import React, { useState } from "react";export default function App() {
const [persons] = useState([
{ name: "Mary" },
{ name: "John" },
{ name: "Joe" }
]);
return (
<div className="App">
{persons.map(p => (
<div>{p.name}</div>
))}
</div>
);
}

In the code above, we have the array, which is then mapped to divs with as the text content.

To do the same thing with Vue, we can write the following:

:

<!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">
<div v-for="p of persons">
{{p.name}}
</div>
</div>
<script src="index.js"></script>
</body>
</html>

:

const app = new Vue({
el: "#app",
data: {
persons: [{ name: "Mary" }, { name: "John" }, { name: "Joe" }]
}
});

In the code above, we have the array in the Vue component, and the directive to display items in the array.

This is cleaner than what we have with React. We keep the code in each file more compact.

This will be even more apparent is more components are more complex, which is often the case.

Another good thing about is that we can use them to iterate through entries of an object as well.

For example, we can write the following to do that:

:

<!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">
<div v-for="(age, name) in persons">
{{name}}: {{age}}
</div>
</div>
<script src="index.js"></script>
</body>
</html>

:

const app = new Vue({
el: "#app",
data: {
persons: {
John: 20,
Mary: 19,
Jane: 20
}
}
});

We can get the value and key of an object’s entry respectively with:

v-for="(age, name) in persons"

With React, we use to do the same thing:

import React, { useState } from "react";export default function App() {
const [persons] = useState({
John: 20,
Mary: 19,
Jane: 20
});
return (
<div className="App">
{Object.entries(persons).map(([name, age]) => (
<div>
{name}: {age}
</div>
))}
</div>
);
}

The expression is getting more complex since we have to call and then map them to the component that we want to render.

Photo by Hakan Nural on Unsplash

Verdict

For simple components, there isn’t too much difference between React and Vue when it comes to setting attributes.

However, we do have to remember that they’re all camel case and the names might be different from HTML.

Vue has a slight edge here since we don’t have to worry about that. Dynamic attributes can be set with and the rest is the same.

With Vue, we have to learn the directive to render collections, while we just use plain JavaScript to do that with React.

However, with React, we have to write one big expression to do that, while in Vue, we can add directives to a template to do that.

This makes rendering collections cleaner with Vue, so Vue has the slight edge here as well.

Level Up Coding

Coding tutorials and news. The developer homepage gitconnected.com

John Au-Yeung

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/ . Follow me on Twitter at https://twitter.com/AuMayeung

Level Up Coding

Coding tutorials and news. The developer homepage gitconnected.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade