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]
markdown guide
 

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:

 

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 😋

 

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

 

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 🚀

 

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.

 

Thanks for the note!

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

 

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

 

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

 

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

 
 

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. :)

code of conduct - report abuse