My Opinion on React vs. Vue
When building applications for the web, considering the front-end and how it will look to the users is becoming more and more important. Users of the internet now expect webpages to be very interactive, look visually appealing, and load without taking too much time. This is why front-end frameworks have become so popular in the past few years. There are many different frameworks to choose from, but the most popular is React.js, so it’s not surprising that React is the framework I was taught in the bootcamp I attended. I also recently decided to teach myself Vue.js so I could have experience in more than one framework. And now, having completed projects in both React and Vue, I thought I would share my thoughts on the differences between them, and the advantages of each one.
There are a lot of ways in which React and Vue are similar. They both use a virtual DOM, which provides a number of benefits such as a more efficient way to update the page view, and a simpler way for programmers to interact with the DOM. They each also use their own type of components to organize all the pieces of a project. Another thing they have in common is that they each have companion libraries you can use in a project to add in additional functionality, such as react-router-dom and vue-router for routing management. They also both have ways to easily bootstrap a new project from the command line; create-react-app and vue-cli.
Now to talk about some of the differences between React and Vue. One of the big ones is the file types you use in each and what all you included in the files. React components are all written in .js files using JavaScript and JSX. Each file has a JS class (or function) that renders JSX, which looks very similar to HTML with some JS between curly braces, and you can put any functions you need in the class. To add CSS to a component, you can either make style objects in the JS file to use, or put your styling in a separate .css file. Assuming you already know how to write JavaScript and HTML, React just requires you to learn how JSX syntax works.
In comparison, Vue has it’s own file extension, .vue, to put components in. Each file is separated into sections, template, script, and style. You write HTML in the template section, JS in the script section, and CSS in the style section. One benefit to this is that the syntax highlighting will be appropriate for each language that’s used in each of the sections. Once you understand the format of .vue files, you just need to learn how to use Vue’s directives.
When it comes to the ways React and Vue make components, I think they both work well, but I prefer Vue’s style of component files because I think it is more intuitive when everything related to a component is kept in one file. The sections in a .vue file are also helpful for separating concerns in each component.
Another comparison between the two frameworks is that React requires you to work with a fully bootstrapped project, while you can use Vue in any basic project by adding a script or two to your HTML. For people new to front-end frameworks, his makes Vue easier to learn, and it gives anyone new to Vue a chance to try it out without needing to work with a big project.
One big thing that React has that Vue doesn’t is a robust system for native rendering. React Native lets you write apps for mobile using the same React component model. Vue does have a way to use their component syntax in projects that can be rendered natively, but it is still in development and hasn’t been as well tested as React Native, so React is clearly better for building phone apps.
Ultimately, if you are trying to decide what front-end framework to learn, I would say React is better because it is so widespread and there is a lot of documentation and a large community to ask for help with. But if you are just looking to make projects for fun or experience, then I would say you should consider looking into Vue, because I found it a bit more intuitive to work with. Both React and Vue have their similarities and differences, but they each are good for creating front-ends that are interactive and relatively fast.
