DEV Community

Discussion on: Learning Vue as a React Developer

View post
Collapse
 
ftonato profile image
Ademílson F. Tonato •

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

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

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

Thanks again for this comparison 🚀