React and Vue.js are both Front-End Javascript frameworks for building fast and flexible user interfaces but, when it comes to choose which one to learn first, you’re better to be prepared on what to expect, the main differences, their features etc..
COMPARISON TABLE
As you can see in the comparison table, React and Vue share many similarities. They both:
- Use a virtual DOM
- Provide reactive and dynamic view components
- Maintain focus in the core library, with routing and global state management handled by companion libraries.
Runtime Performance
Both React and Vue.js are similarly fast, so speed is unlikely to be a deciding factor in choosing between them. For specific metrics though, check out this 3rd party benchmark, which focuses on raw render/update performance with very simple component trees.
The folder structure
JSX or HTML?
Keep in mind that both of these two frameworks are component-based. You can reuse components across the project. If we talk about JSX, JSX looks like HTML but it’not, neither a string according to the official documentation. It allows developers to create React elements and it is a syntax extension to JavaScript.
There’s an advantage using it because JavaScript is powerful than HTML and it is quite maintained and mature language for front-end development. Vue differs from both the frameworks. It gives separation of concerns and enables developers to write styles, scripts, and other things in an ordered manner. This sounds good to any beginners, designers, and experienced developers who are familiar with HTML in previous projects.
Note: You can use JSX in Vue with the help of babel plugin.
Setting up a Component with Vue and React
- React uses JSX and Components can be statefull (can handle the state directy) or statless (can only receive props).
- Vue.Js uses Twig for handling HTML templates with javascript.
Here’s an example of a component between the two frameworks:
Template Directives
Updating Local State
To update local component state in React, you use the setState method. To update it in Vue, you simply assign the property the new value.
The React way:
The Vue.Js way:
Conditional Rendering
In React, you would usually use a ternary operator to conditionally render content. Vue introduces the v-if keyword that you acts the same way.
Iterating Over Items
To iterate over an array of items in React, you usually map over the values and return a string of what you’d like each ‘element’ to be. In Vue, you would use v-for .
Conclusions
These two frameworks are quite similar but you need to use the one that fits your needs for your project and your current skill-set.
If you love Javascript and you are very familiar using it, you’ll definitely end up choosing React for its flexibility because you just have to deal with Javascript.
If you prefer working with HTML templates keeping Javascript and Css in a clearer structure, all in one file and you like the fact that Vue is lightweight and fast, you’ll definitely end up using Vue.Js.
You can find important resources here: