Transitioning from React to Vue

Part I — Components & Ecosystem

HELLO. This article doesn’t mean that Vue is “better” than React, because (as you’ll see), they are very similar. The decision on what is “better” is different for every project and team.

Ok — it’s 2018 and you’re ready to learn about Vue. You’ve read the comparison guide, installed the vue-cli, and probably even made a to-do list application.

But now it’s time to do some real work. If you come from React, you probably have a lot of questions about what a good Vue app looks like. I definitely did — my main questions: Are .vue files a recommended thing? Can I and should I write JSX? How do I scope styles to a component?

The good news is: Vue and React are very similar. As mentioned in the comparison guide, they have the exact same use case. The differences are in small implementation details as opposed to core functionality, so transitioning between the two is relatively easy!

Component Based Architecture

Both React and Vue are designed around components, meaning that out of the box, they only offer a very efficient way of writing and rendering components.

React.Component vs. Vue.component

Both React and Vue offer a component method, but they’re extremely different. This is because React defines components as classes, while Vue defines components as objects.

Vue.component registers the component globally, while React.Component acts as a base class of your component.

A common pattern in React is to subclass React.Component for all your components, then reference them directly by the class name in the render function.

<ComponentName /> is a class name used directly in template

Vue has no such concept — components don’t need to extend Vue at all, they can be plain objects.

The same component and pattern in Vue: <ComponentName /> is just an object and must be included in the `components` value of Vue app for it to display

So while Vue and React both offer a ‘component’ method, they’re drastically different.

React JSX vs. Vue Templates

Vue technically supports JSX, and React technically supports HTML. But one of the core distinctions is in which markup techniques they invest in, so it’s worth comparing them based on their most commonly used pattern.

React’s render prop is just Javascript, so everything in you would need to do in the template is the same as it would be in Javascript.

Vue relies on HTML templates — so it includes a few directives that abstract away this functionality. These directives are very similar in design to AngularJS (in fact, almost the same:v-if , v-for , v-show , etc.)

Component Methods

Many of React’s common component methods are a one-to-one match with Vue lifecycle hooks.

• constructor → created
• componentWillMount → beforeMount
• componentDidMount → mounted
• componentWillUnmount → beforeDestroy
• componentDidCatch → n/a
• shouldComponentUpdate → n/a
• setState → n/a — just set property directly (see “Managing Component State and Data” below)

Managing Component State and Data

In React, you have state of a component. In Vue, you have data. They’re basically the same thing.

Initial State

Setting the state of a React component

Setting data of a Vue component

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.

Updating local state on a React component

Updating local state on a Vue component — notice how we just updated this.welcomeMessage with the new value.

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.

Conditional Rendering in React

The same component in Vue — notice v-if instead of the plain Javascript expression

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 .

Iterating over items with ReactJS

Iterating over items in Vue — notice the v-for directive in the HTML. Although the Vue file uses this directive, it is exactly the same as the above React component.

Dynamically Rendering A Specific Type Of Component

You would actually do the same thing in both frameworks: assign an object with the components that should be used.

The only difference: in Vue, instead of assigning a variable with the specific value, you would use Vue’s :is functionality.

The :is tag tells Vue that the DOM element it is attached to should be whatever component name is passed to it. This is incredibly useful for cases like tables — for more use-cases, see the documentation.

To dynamically render a component based on a property, you would create a map

Ecosystem

Vue has more “official” libraries than React. “Official” meaning that it is officially supported, maintained, and released in conjunction with the core framework.

As a consequence of its age, Vue does not have as many community-supported libraries as React.

If you need routing, state management, or a Webpack loader; you should just use one of the packages listed below.

Routing: vue-router

State Management: vuex

Webpack Loader: vue-loader

Transitioning from React to Vue is not difficult, especially if you have already adopted and understand the value of component based design.

In the next edition of this series, we’ll go over everyone’s favorite topic: managing shared data.

You can follow me on Twitter for updates on when that article comes out.

Thank you for reading the Front-End Society Blog!