DEV Community

Learning Vue as a React Developer

Vincent Tang on August 07, 2019

React. The first major JavaScript framework I decided to learn coming from jQuery land. My journey learning was painful. I had to watch three diff...

Read full post

Ademílson F. Tonato • Aug 21 '19

Hey there,

I liked your comparison, I think it's makes it easy for everyone to understand a little bit more about each framework :)

I have some additional comments, first two typos:

On your example of what a typical Vue file looks like, you have:

// code...
<style lang="scss" scoped>
  .h1 {
    color: red;
  }
</style>

There is a . (dot) left before h1 tag

On the react code where you explain about template in JSX and styling in CSS-in-JS, you have:

// code...
<div>
  <h1 style={styles.color}>{this.state.message}</h1>
</div>

// code...

// CSS in JS
const styles = {
  header: {
    color: 'red',
  },
};

You need to change the style={styles.color} to style={styles.header}

It might make sense to add a note to the Watchers and Observables topic, as we have been available since Vue 2.6.0+, a new behaviour for Observables.

Finally, the part where we have:

Vue requires you to declare a child component twice, once on import another on Components.

Is important to know that you can change this behaviour using lazy load/async components imports:

<!-- Vue Parent Component -->
<template>
  <div>
    <child-component :message="message"/>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: 'hello world',
      };
    },
    components: {
      ChildComponent: () => import('./ChildComponent.vue'),
    },
  };
</script>

Thanks again for this comparison 🚀

Ronin • Aug 7 '19

I've been doing React dev for a few years now. I attempted to learn Vue a few times in the past few months and I just can't. It's not that Vue is harder to understand or set up, I always revert to React because I can do it so much quicker and I know it'll at least be fairly optimized (With my webpack config setup, etc). I'm sure I can get the same performance doing similar things with Vue. Since I did React first, I keep going back to it! D:

Derek D • Aug 8 '19

I have the same feelings, just the other way around. Obviously, it's because we're both just more comfortable with the way we have been doing it 😋

Vincent Tang • Aug 7 '19

I find styling components in React to be a much slower process than Vue, but this is just my personal experience :)

Laurie • Aug 8 '19

Great write up! Though I'm not looking at the markdown source I think some of your react examples have weird highlighting because they're marked as javascript instead of jsx. Both are supported. Could be wrong, but figured I'd mention it.

Vincent Tang • Aug 8 '19

Thanks for the note!

I changed the files to jsx it should be fixed now :)

KP • Aug 7 '19

Good article. I'm only familiar with Vue but this provided a nice overview of React.
So, I'm going the obvious question....Vue or React? :D

Vincent Tang • Aug 7 '19

I personally like using Vue especially when it comes to styling, but React has better overall 3rd party library support. Recently I wanted to use a geo-data location library but the official doc examples were only in React.

Example: github.com/uber/deck.gl

KP • Aug 7 '19

This might help you: github.com/uber/deck.gl/issues/2935

Vincent Tang • Aug 8 '19

But see that's the thing, the code sandbox link doesn't work there and the information on Vue integration is limited at best

Joe Zack • Aug 8 '19

Wow, very thorough write up! Thank you!!

Aimee • Aug 8 '19

Great Post really interesting hearing your views coming from react to Vue. I may be using Vue in the future and I've learnt React first too. So thanks for this. :)

Buniamin Shabanov • Jul 10 '21

No longer did I have to write my HTML, and then convert it to JSX.

YOU DID WHAT?!

Bopbopbob • Jun 14 '23

Thanks! As a react developer that is starting new job where they use Vue… this was a very good cliff notes.