DEV Community

Cover image for My experience with React and Vue in Depth
Mohammad Khayata
Mohammad Khayata

Posted on

My experience with React and Vue in Depth

I have been working in front-end development for 3 years now, using both React and Vue frameworks. I have built several projects with them, and in this article, I won't be comparing them like any beginner's guide. Instead, I will focus on the points where I felt the differences while working with them.

First, Library and Framework.

When working with Vue, you always have to deal with .vue files, which gives Vue some extra abilities like registering global components , directives or adding plugins (like i18) to your Vue app. This allows you to access any plugin or component from any .vue file, reducing the large number of imports that you often see in React and making public instance properties accessible from the without any imports.

Accessing public instance properties in vue

Dealing With State

Vue provides Refs and Reactives as the main way to define states in your components, which are mutable directly This makes your code easier and more readable .In contrast, React requires you to define a setter function for every state.

Vue Refs

React User State

JSX and Vue Syntax

Working with JSX, especially if you are good enough in JavaScript, makes you very comfortable when writing your code and gives you more control over HTML code. In the end, any code you write is normal JavaScript code, unlike Vue, where you may feel like you are writing somewhat unfamiliar syntax, such as directives. However, directives are actually a very nice feature that I miss in React 😅.

React Features that i missed in vue

JSX

As I previously mentioned, JSX is fantastic! its make your code more dynamic and scalable.

Multiple Components in The Same File

You can define multiple components in one file with React , unlike vue.

TypeScript Support

React has much better support for TypeScript than Vue. However, Vue is working on improving TypeScript support significantly through the new updates

The Greate Comunity

React has a large and thriving ecosystem of libraries and packages. For example, the Material-UI library, which was a major reason for me to turn towards React.

Job Opportunities

Through my research on popular websites such as LinkedIn and Glassdoor, I noticed that more than 80% of the job opportunities I found were asking for React developers, with a very small percentage of companies looking for Vue.js developers.

Vue Features that i missed in React

2 Way Binding

Two-way binding in Vue makes it easy to create interactive and responsive user interfaces, and it can help to simplify the code required to manage user input in forms.

Scoped Styles

Vue Scoped styles are a feature in Vue that allows you to apply styles to a specific component or element without affecting other components or elements in your application, and that would be very tricky in React.

Directives

Vue has a built-in system of directives that can be used to modify the behavior of HTML elements in the DOM. For example, the v-if and v-for directives can be used to conditionally render elements or loop over arrays of data. In addition, in Vue, you can create custom directives.

Built-in transitions and animations

Vue has built-in support for transitions and animations, which can be used to add visual effects to the UI when elements are added, removed, or updated. React does not have built-in support for transitions and animations, but similar functionality can be achieved using CSS transitions and animations or third-party libraries.

You may find many contradictions in this article, but I just wanted to clarify the points of difference that I felt through my use of both technologies.

Top comments (6)

Collapse
 
versacodes profile image
Franz Amersian

Great read! 👍

There’s actually a JSX support for Vue. For Material design, you can try Vuetify or Vue Material. 😁

Collapse
 
mohammad_kh4441 profile image
Mohammad Khayata

yes you are alright ! , but JSX has a lot of limitations in vue.js, and for vuetify .. yes it's an amazing library but it's very basic compared to Mui, and it's docs needs a lot of work😁 . thanks for sharing your toughts Franz ! 💙

Collapse
 
toothlesstarantula profile image
Yannick Napsuciale

Vuetify 3 has a long way to go, hopefully will catch previous version features in the near future, vuetify 2 was such a Powerhouse.

Collapse
 
toothlesstarantula profile image
Yannick Napsuciale

Great read.

Collapse
 
blanmary profile image
BlanMary

valuable concepts you have shared . Dreamexch Contact Number

Collapse
 
mohammad_kh4441 profile image
Mohammad Khayata

Thank You 😁