Vue vs React: Choosing the Best  Tool for Your Project in 2019. Part 2
Tags: vue, react, javascript, webdev
Published: 2019-05-10 08:24:50

---
title: Vue vs React: Choosing the Best  Tool for Your Project in 2019. Part 2
published: true
description:  Vue vs React: Choosing the Best Tool for Your Project in 2019. Nowadays, every company is targeting to create a high-quality web solution within a short period of time. To put it into practice, the developers' community is able to choose from many JavaScript
tags: vue, react, javascript, webdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/9mfytktsvzbxdfkopd19.jpg
---

Today, we want to provide you with the second part of the article dedicated to Vue vs React. Here we compare these tools by such technical aspects, as **tooling, flexibility, mobile development, and component approach**. In case you missed the first part, here is the [link](https://dev.to/codicacom/vue-vs-react-part-1-1i57) for your convenience.

Let’s get this show on the road. 

## Technical features
### Tooling
**React**
To begin with, **React** offers a third-party tool [create-react-app (CRA)](https://github.com/facebook/create-react-app). This option provides you with a rapid start while creating React apps. It helps you to avoid a time-consuming configuration process and it can be used for scalable and large projects.

Prior to the official CRA release, coders were required to deal with the Webpack-config and other <code>.rc</code> files from former apps anytime they began developing a new application, or configure it by hand. If you do not use CRA, you need to put the same configuration from one application to another. Actually, it is not much time-consuming but is pretty tedious. 

Furthermore, React has large support for the main IDEs.

**Vue**
[Vue-cli](https://cli.vuejs.org/) is an integral tool for fast project creation for **Vue.js**. These projects have a ready-made structure, an installed configuration, as well as a number of basic files.

The main advantages of Vue-CLI:
* Out-of-the-box features (Babel, TypeScript, ESLint, PostCSS, PWA, etc.).
* Graphical User Interface.
* Fully configurable, you do not need to eject.
* An opportunity for developers to build their own plugins and templates.

### Flexibility
**React** is all about UI, so originally, you gain support in building UI components. 

ReactJS gives you an opportunity to operate with state management. However, in case you have a large project, you need to use Redux as a state management tool for your convenience. It simplifies state management pretty much. 

Furthermore, if we take into account the React router - it is not an official package, but also a third-party one.

On the flipside, **Vue.js** is a dynamic framework which provides with out-of-the-box tooling to create an application. However, if necessary, it additionally offers all the functionalities that you may need:
 
* [Vuex](https://vuex.vuejs.org/) for state management.
* [Vue Router](https://router.vuejs.org/) for application URL management. 
* [Vue.js Server-Side Renderer](https://vuejs.org/v2/guide/ssr.html) for Server-Side Rendering. 

### Mobile development
**React Native** is a framework for creating cross-platform iOS and Android applications using JavaScript. Shortly, it gives React developers an opportunity to create mobile applications. It was released in 2015 and is React-based. it does not use WebView and HTML, but native components have bindings in JS and are wrapped in React. 

On the other hand, Vue is paired with **NativeScript** (NS) which gives an opportunity to create cross-platform applications with the help of XML, CSS, JavaScript. Actually, NativeScript deals with the same issue as React Native mentioned above, but they have some distinctions.

NativeScript syntax and implementation are much easier for a web developer to understand using HTML / CSS / JavaScript. XML usage is also similar to HTML in markup creation.
NativeScript has direct access to native platform API.

In order to compare and realize the popularity and developers community usage of both frameworks, we provide you with the following comparison table [State of JS 2018 Chart](https://2018.stateofjs.com/mobile-and-desktop/overview/).

![](https://thepracticaldev.s3.amazonaws.com/i/y6tj02yie8p3583igmep.png)

Furthermore, below we present a Google Trends Chart displaying the search results of React Native and NativeScript for the past 4 years.

![](https://thepracticaldev.s3.amazonaws.com/i/h5rijgffsq58s6mudqwm.jpg)

Source: [Google Trends](https://trends.google.com/trends/explore?cat=13&date=2015-01-04%202019-01-04&q=React%20Native,NativeScript)

As you can see, React Native is much more popular among software developers that means a bigger amount of ready-made solutions are available.

### Component approach
In general, Vue and React follow the same component approach in development: it means that you have one file for one component. However, there are still some different aspects interesting to discover.

**React**
Many years, developers have tried to separate templates and embedded Javascript logic, but in JSX they are again mixed. Maybe it sounds almighty, but you should listen to Peter Hunt's speech [“React: Rethinking Best Practices”](https://www.youtube.com/watch?v=x7cQ3mrcKaY).

{% youtube x7cQ3mrcKaY %}

JSX is an optional preprocessor with an HTML-like syntax that is then compiled into JavaScript. Hence some oddities - for example, you need to use <code>className</code> instead of <code>class</code>, because the latter is a reserved keyword in JavaScript.

**Vue**
Vue offers [“single-file components”](https://vuejs.org/v2/guide/single-file-components.html). This is like a compromise regarding the division of responsibilities - templates, scripts, and styles are not in one file, but in three different, ordered sections. This means you get syntax highlighting, CSS support and the ability to easily use preprocessors like Jade or SCSS. 

Let’s get acquainted with the same component created for a To-Do List application both in React and Vue to see the difference between ReactJS JSX and Vue.js templates.

Vue component structure: 
```javascript
<template>
  <div class="ToDoItem">
    <p class="ToDoItem-Text">{{todo.text}}</p>
      <div class="ToDoItem-Delete"
        @click="deleteItem(todo)">-
      </div>
  </div>
</template>
```

React component structure: 
```javascript
import React, {Component{ from 'react';
import './ToDoItem.css';

class ToDoItem extends Component {
  render() {
    return {
      <div className="ToDoItem">
        <p className="ToDoItem-Text">{this.props.item}</p>
        <div className="ToDoItem-Delete" onClick={this.props.deleteItem}>-</div>
      </div>
    );
  }
}

export default ToDoItem;
```

## Conclusion 
Here we presented you the second part of the article covering such technical issues like **tooling, flexibility, mobile development, and component approach**. 

The third (final) part is coming soon and there we will compare Vue and React by such technical features, like **performance, state management (Redux and Vuex), and storage data reception**.

Stay tuned and read the full article version here: Vue vs React: [Choosing the Best Tool for Your Project in 2019](https://www.codica.com/blog/react-vs-vue-2019/).