From all the available JavaScript frameworks, I’d say that Vue and React are my favorites. React for its vast ecosystem, great TypeScript support, JSX, and Vue for its simplicity, performance, and some smaller life quality improvements, like auto-passing props, easy-to-use transitions system, directives, slots & more.

So, how about getting the best of both worlds? Get Vue’s benefits in React would mean making React into Vue, so that’s not an option. How to use TypeScript and JSX in Vue then?

Well, Vue is heavily reliant on its custom templating syntax and SFCs (Single File Components). However, it’s also very “unopinionated” and provides its users with many ways of doing the same thing. This includes using JSX, even TSX (JSX with TypeScript)! Sadly, when you do many things well, you usually can’t do a single thing great. Let me demonstrate that through Vue 2’s TSX support.

Vue 2 TSX Support

Let’s start with pure JSX. A quick search on Vue 2 docs brings the following results:

#vue #typescript #framework #library