When it comes to building apps in JavaScript, my go-to frameworks are Vue and React. They have their similarities, but also a bit of differences when it comes to writing code, so let’s explore some of them.

This article is a continuation of my previous article about my journey tomastering React. I thought it would be a good idea to make a comparison between Vue and React, but in a more specific way. Rather than analyzing the high-level differences, we’ll be taking a look at the code and the overall development experience in both technologies.

For this article, I decided to create the same, although a rather simple, application in Vue and React. My reasoning behind this is that I haven’t found that many examples of a comparison made on a simpler application. And it made no sense to recreate a larger application twice, especially since a great example already exists.

Overview

Here is an example of a screen you might see in the application. The search bar is connected to the PokeAPI and it allows you to search for Pokemon by their name or ID. After you’ve searched for a Pokemon, you can see its stats and also add it to a list of your favourite Pokemon. Afterwards, you can remove a Pokemon from the said list.

The project I made represents a more realistic scenario where I’ve used a UI library and made some simple API requests, much like you would do in a real project. This way, I was offered a much broader palette of functionalities to showcase. I have also used Typescript to mimic the workflow in Bornfight.

Both projects were set up in the same way, so we could clearly see the differences without worrying about different implementations between the libraries. The project’s repository is located on Github, so you can check it out for yourself if you’d like. I’ve also tried to name all of the variables and components the same, but some inconsistencies might creep up. It might be a good idea to mention that a lot of the conclusions will be my own opinions which might differ from yours. I urge you to do something similar by yourself because it’s really interesting to dissect an idea this way!

Setup

The setup went on pretty much without any difference between the two, although Vue’s CLI made it a bit neater. The only thing that had to be installed additionally for React was node-sass to allow me to use SASS inside the project, but that’s about it. I’d also note that I used Vue 2 instead of Vue 3, even though Vue 3 and current React might be a bit more similar.

This was the Vue setup with the CLI:

And this was the same process for React:

I’ve additionally installed axios and the Ant Design implementation for each.

#vue