React vs Vue.js vs Preact — Which one should you use?
React

React is a widely popular and well-maintained web framework created by Facebook. It has garnered a strong following of developers and contributors. One reason to choose React over the others would be its massive community support.

JSX is a syntax extension to Javascript, and is recommended to be used in React. This is how it looks like

const myImage = <img src={gallery.flowerUrl}></img>;

This allows developers to separate their codes into independent and reusable pieces of UI called components that contain markup and logic.

Here are the dependencies installed via npm

"react": "^16.13.1",

"react-dom": "^16.13.1",

"react-router-dom": "^5.2.0",

"react-scripts": "3.4.1"

The generated bundle had the largest size among the three frameworks, taking up 168KB. The average loading time of the website was 188.8ms, finishing in a close second place, at around 5% faster than Vue.js.

Vue.js

Vue.js is a progressive framework designed by Evan You, an ex-Google employee. It is used for building user interfaces. Vue.js is said to be easier to learn than React, as it builds on HTML which most web developers would already be familiar with.

Templates in Vue.js are written in HTML, which are the counterpart to React’s components. Thanks to this, Vue.js is more easily integrated into existing projects without too much overhead. This is how a template looks like

<ul>

<template v-for="item in cart">

<li>{{ item.itemName }}</li>

</template>

</ul>

Here are the dependencies installed via npm

"core-js": "^3.6.4",

"vue": "^2.6.11",

"vue-router": "^3.1.6"

The generated bundle had a size of 110KB, which is around 35% smaller than React. The average loading time of the website was 200.6ms, the last of the bunch and around 5% slower than React.

Preact

Preact is regarded as the lightweight alternative to React that uses the same API. Its selling point is that existing React applications can be easily converted to Preact by using preact/compat. It is a thin layer over Preact that attempts to achieve 100% compatibility with React.

Preact adds a few convenient features as compared to React, one of them being allowing arguments in Component.render()

class Foo extends Component {

state = { age: 1 }; render({ name }, { age }) {

return <div>Name: {name}, Age: {age}</div>;

}

}

The same code would not work in React, and the values will need to be passed in via state or props.

Here are the dependencies installed via npm

"preact": "^10.3.2",

"preact-render-to-string": "^5.1.4",

"preact-router": "^3.2.1"

The generated bundle only had a size of 36KB, which is a whopping 78% smaller than React. The average loading time of the website was 155.2ms, which is around 17% faster than React, and the fastest of the bunch.
['Hong Yong']
['Vuejs', 'React', 'JavaScript', 'Technology', 'Web Development']