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.

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.

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.