Vue and React Side by Side

I have been learning React for the past few days, and coming from Vue background, I would like to put a compilation of Vue and React code side by side. I mean how you do one thing in Vue, and what is the equivalent in React.

This is not an article about which one is better, nor about which one that you should use. I am simply putting Vue and React code next to each other so you can use it as a reference on how to do it in one or another.

I am not 100% familiar with React, so if you you see I am doing something bad (bad practice, potential bugs, etc.) please tell me and I would be thankful and update the article.

Declaring Component

To use Vue component, you have to register it using Vue.component or import it from another component that using it. As above, you can display it using <component-name/>.

To use React component, just import the component and use JSX to display it. As above, you can display it using <ComponentName/>.

Single File Component

In Vue, you can put template, JS, and CSS on the same file.

In React, you define the template in JSX, and code JS because it is JS file, and the CSS can be using either requiring external CSS file or use some CSS in JS library.

Attribute and Template Binding

In Vue, you can bind to attribute using :attribute-name, which is shorthand for v-bind:attribute-name. To display in template, you can use {{expression}}.

In React, you can simply use {expression} to use value in attribute or template.

State and Props

Vue put props and states on the same scope, so you have to carefully name your props and states so it doesn’t collide with each other. To pass properties to a component, you can use <my-component say="Hello"/>, where say is the name of the property. If you have property name called sayWhat, you can pass it as say-what="value".

React scope props inside this.props, and states inside this.states. You can pass props similar to Vue above, <MyComponent say="Hello!"/>.

Input State Binding

Vue state is reactive by utilizing ES6 properties. The v-model attribute simply means when an input event is called, it will set the name state with that input value, and because it is reactive, when name state changes, Vue will render itself.

Similar to Vue, but you have to write your own input event handler.

Event Binding

In Vue, @click is the shorthand for v-on:click. The method this is already set as your Vue instance.

In React, you have to manually bind this to onSave if you are planning to use it. Usually put in constructor as this.onSave = this.onSave.bind(this).

Conditional Rendering

In Vue, you can use the v-if directive, and it accepts any JS expression, when it returns true, Vue will display the component.

In React, you can use ternary operator, or create a method that check for the condition and return the element if the condition is satisfied.

List Rendering

List rendering in Vue is simple, because the loop is handled by Vue. Everything inside v-for (including the component that you put the v-for will be looped and displayed).

In React, you can create a method that process the data that you want to loop using map and return the list of elements you returned. Or, you can create a component that maps the data inside the render method.

Final

This is an on-going article, it will be updated whenever I discovered something new during my learning of React.

If you have any feedback, feel free to share it with me.