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

Comparing React and Vue - part 1

simonhlee97 profile image Simon H 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>
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.

Photo by CDC on Unsplash

Posted on by:

simonhlee97 profile

Simon H Lee

@simonhlee97

I enjoy building apps with Vue, Vuex, MongoDB, Node, Express (MEVN stack) as well as React (MERN stack). I also build custom WordPress themes.

Discussion

markdown guide
 

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.

 

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.

 

Once you go Vue, you always go Vue.

 

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.

 

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!