DEV Community

loading...
Cover image for Comparing React and Vue - part 1

Comparing React and Vue - part 1

simonhlee97 profile image Simon Lee ・2 min read

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>
Enter fullscreen mode Exit fullscreen mode
items: [
  { message: 'Foo' },
  { message: 'Bar' }
]
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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.

Photo by CDC on Unsplash

Discussion (11)

pic
Editor guide
Collapse
simonhlee97 profile image
Simon Lee Author • Edited

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!

Collapse
insidewhy profile image
insidewhy

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.

Collapse
p333ter profile image
p333ter

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

Collapse
simonhlee97 profile image
Simon Lee Author

Thank you Peter for pointing out my error! I have corrected my mistake.

Collapse
theshroomlife profile image
shroomlife πŸ„

Once you go Vue, you always go Vue.

Collapse
mzaini30 profile image
Zen • Edited

Is there no equals for v-for in React?

Collapse
ctrlshiftbryan profile image
ctrlshiftbryan

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.

Collapse
simonhlee97 profile image
Simon Lee Author

Vue's directives were inspired by AngularJS's "ng-*" directives.

Collapse
kewbish profile image
Emilie Ma

Super cool comparison - only worked with Vue so far, but React looks interesting as well.

Collapse
momin profile image
Md Abdul Momin

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!