To help me learn and understand better, I'm going to write a series of posts that compare React and Vue, and how each framework codes some of the most fundamental programming concepts.
This post (and this series) is not an attempt at claiming one is better than the other. They are both very good and popular. The purpose is to increase understanding by looking at similarities and differences.
For Loops (Iteration) in a VueJS Component
So how do you loop through an array of items in Vue? here's an example from the Vue docs:
<ul>
<li v-for="item in items" :key="item.message">
{{ item.message }}
</li>
</ul>
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
Iterate through same array in a React Component
const items = [
{ message: 'Foo' },
{ message: 'Bar' }
];
function App() {
return (
<div>
{items.map((message, index) => (
<li key={index}>
{message}
</li>
))}
</div>
);
}
My Takeaways
For beginners who are just starting out with JS frameworks, I can understand why they would like VueJS more. In Vue components, the HTML is neatly separated from the JavaScript and the CSS. Using Vue's directives like v-for is semantic and is inside the element that will be repeated. Pretty awesome if you are new to JS frameworks.
For more experienced developers who have been writing vanilla JS for many years, I can understand why they would prefer the JSX way with React, writing for loops inside some HTML.
Conclusion
It's a matter of personal preference and perhaps where you are in your developer journey. For less experienced coders, Vue structures its components in a friendly intuitive way and provides Vue directives out of the box to accomplish array looping.
With no previous experience with JSX, React will require some additional time in the beginning to learn how React renders its components.
I am a fan of both frameworks and looking forward to comparing another simple aspect of programming in my next post. Stay tuned, and thanks for reading.
Top comments (10)
Thank you for the comment Rob. I wasn't aware that Vue had garnered those kinds of stereotypes. Not sure if Evan You would take that as a compliment or insult. True, all developers should know how to loop, even if a directive wasn't available. React and Vue both have distinct pros and cons. They are also similar in many ways, and I hope to highlight some of these and continue getting feedback from other Dev.to members.
Thanks!
You can use jsx in Vue too, and no matter your level of experience declarative Vs imperative style shouldn't make much difference. There's plenty more important things than this, such as react's hook system that forces you to litter your code with useMemo and useCallback Vs vue's much less dogmatic alternative.
Is there no equals for v-for in React?
Using .map is the equivalent. It’s because of JSX. You are basically sticking HTML tags inside JavaScript with React. In Vue you are inside an HTML template so you have a special v-for attribute. In JSX you don’t need anything special because you have the full power of JS.
Vue's directives were inspired by AngularJS's "ng-*" directives.
Once you go Vue, you always go Vue.
Hi, thanks for sharing your experience. But in the React you have a small mistake. Inside render array items, you try to get object (name) instead of object key (name.message). Good luck. Peter
Thank you Peter for pointing out my error! I have corrected my mistake.
Super cool comparison - only worked with Vue so far, but React looks interesting as well.
I was working first on VueJs and now ReactJS.It seems to be like VueJs code, and structure in terms of implementation is more comfortable and clear to understand!