Vue3.js v.s. React.js

At work, I use Vue.js because there is a reusable vue.js component that makes coding more efficient. However, I am aware that many people choose React.js over Vue.js, so I decided to do research about the difference.

Templating and JSX.

In Vue.js we use template sections and script. In Vue's code, a template where you can write predominantly html with vue code such as v-if is separated from JavaScript code even though they are both in the same file. When it comes to the simple project, Vue3.js and React.js look pretty similar.

I think in Vue.js we write HTML in the template and support the HTML with JavaScript code, but in React, we write JavaScript and add HTML to it.

Here are examples, clearly in React, JSX allows you to write JavaScript expressions directly in your markup. Whereas, Vue.js has a template, which is predominantly HTML.

import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

export default Greeting;

<template>
  <h1>Hello, {{ name }}!</h1>
</template>

<script>
export default {
  props: ['name']
};
</script>

Overall, if you prefer a simpler, more lightweight framework with built-in state management, Vue3.js may be the better choice. If you need more flexibility and a larger ecosystem, React.js may be a better fit.