Home Blogs Programming VueJS or React.JS: What i ...

VueJS or React.JS: What is a more valuable technology in 2020?

There are many technologies available right now to choose for software development. In this article, we'll focus on the comparison between VueJS and React.JS to see which one is better.

To understand the differences between these two JavaScript frameworks, let's look at a practical example of a comparison between React and Vue. We'll also take a look at Google Trends.

For our experiment, we'll create two apps that will allow our users to add items to the to-do list and remove them. Both applications are developed using standard CLIs (Command-Line Interfaces) - create-react-app for ReactJS and Vue CLI for VueJS.

ReactJS and Vue.JS CLI

The CSS for both projects is the same, and the only difference is where the corresponding files are located. Let's check out the projects' architecture:

Vue and React project architecture

The significant difference is that React app has three CSS files, while the Vue application doesn't have any at all. How come? React components are equipped with the CSS files when you use create-react-app. Vue CLI takes a different approach, where you declare styles inside specific component files.

Despite these differences, both React and Vue reach the same goal. At the moment, we'll follow the standard CSS approaches in the CLI of the frameworks in question.

Let's talk about the differences in detail.

Changing the data

By changing the data, we mean making changes to the information in our application, which is exactly where the main difference between React and Vue is.

Vue creates a data object, which contains the data is, and the developer can easily change the contents. React, on the other hand, creates an object called "state," where the state of the app is stored, and where the data changes are made. In case you wonder why React is so complicated, everything is arranged for a reason, and we'll discuss it a bit later.

Here's what the data object in Vue looks like:

Data object in Vue.JS

Here's what the data object in React looks like:

Data Object in React

As you can see, in both cases, we describe the same data, but it's organized differently. As a result, we can say that the initial data transfer to the components in both Vue.JS and ReactJS look very similar, it's changing the existing data that is different.

Suppose we have a data item like a name: 'Helga'.

  • In Vue, you can access this data using this.name and change it: this.name = 'John.'
  • In React, you access the same data using this.state.name.construct. However, you cannot change them by writing something this.state.name = 'John,' since React restricts such data changes. Therefore, in React, you'll need something like this.setState ({name: 'John'})

The result of such an operation is the same, despite the Vue way being more straightforward. In React, you have to write more code, but in Vue, there is something like a particular version of the setState function, called when the data changes.

So, to summarize,

  1. React requires the use of the setState command with the description of the data that needs to be changed.
  2. Vue works on the assumption that the developer would like to use something similar by changing the data inside the data object.

Adding new items

In React, it looks like this:

Adding new items in React

The 'input' field has an attribute value. This attribute is updated automatically through the use of interconnected functions pair that form a two-way data binding. We create this type of two-way binding due to the presence of an additional onChange event listener attached to the input field. Let's take a look at this field's code so you can understand what's going on.

Input field in React

The handleInput function is called when the value of the input field changes. This updates the todo element, which is inside the state object, by setting it to the value in the input field. This is what the handleInput function looks like:

handleInput in React

When the user clicks "+" button on the app page to add a new record to the list, the createNewToDoItem functions calls this.setState method and passes the function to it.

This function has two parameters:

  • List array from the state object
  • Todo element updated by the handleInput function

The function then returns a new object that contains the old list array, adding the new todo element to the end of the array.

In Vue, this process looks like this:

Functions in Vue

Vue’s input field has a v-model directive. It allows organizing two-way data binding.

Input field in Vue

The v-model directive binds a field to a key that exists in a data object called toDoItem. When the page loads, an empty line is written in toDoItem and it looks like todo: ''. If there is data there, something like 'Add some text here', the same text will appear in the input field.

In any case, if we return to the example with an empty string, the text that we enter in the field will be added to the todo property, due to data binding.

This is a two-way data binding meaning that entering new data in the field leads to the recording of this data in the data object, and updating the data in the object leads to the appearance of this data in the field.

Deleting items

In React, it looks like this:

Deleting items in React

While the deleteItem function is in the ToDo.js file, you can access it from ToDoItem.js, passing this function as property at first to the <ToDoItem />.

deleteItem

Passing this function first makes it available to 'child' components. In addition, we bind this and pass the key parameter. This parameter is used by the function to distinguish the ToDoItem element that should be deleted from other elements. Then, in the ToDoItem component, we write the following:

todoitem-delete

All that needs to be done now to access the function located in the parent component is to use this.props.deleteItem construct.

In Vue, it looks like this:

deleting items in vue

We need to perform three actions:

1. Call the delete function to work with the element:

call the delete function

2. Create the emit function as a method in the child component (in this case, in the ToDoItem.vue):

creating the emit function

3. Use this function to add ToDoItem.vue inside ToDo.vue:

deleting items in vue.js

This is what is called a custom event listener. It responds to emit calls with the delete line. If it captures a similar event, it calls the onDeleteItem function, which is located inside ToDo.vue, and not in ToDoItem.vue. This function, as mentioned above, filters the todo array located in the data object to remove the element that was clicked on.

Also, in the example using Vue, one could simply write code related to the emit function inside the @click listener like this:

click.listener

This would reduce the number of steps required to remove a list item from three to two. It is the developer's call how to proceed with this.

To summarize the items deletion process,

  • In React, access to the functions described in the parent components is organized via this.props (given that props are passed to the child components, a standard technique that can be found everywhere.)
  • In Vue, child components must trigger elements using the emit function and the parent component already handles these events.

In conclusion

Once we've analyzed the examples, the similarities, and differences in Vue and React are easy to see. Of course, there are other differences between these two frameworks, but I hope that what we've covered here will be a good basis for understanding how React and Vue work.

The question of which framework to choose often arises when you are looking for a good platform for a project. We hope this material was helpful to make that choice.

Here at HUSPI, we prefer ReactJS because even despite its certain inconveniences (as might seem at first), it can do whatever you want, whereas Vue is great for certain things, but not for everything.

Also, we tend to trust the developers' community and collective thought. Check out the Google Trends in the United States for the past year, comparing Vue.JS and ReactJS:

vue vs react in the united states statistics 2019

Here is a worldwide statistics comparing the Vue and React in the last five years:

react vs vue statistics worldwide 2019

 

"Top Enterprise Development Companies According to SDCR site"

You may also like