DEV Community


Posted on • Originally published at

State of JSX in JavaScript Frameworks

Frameworks supported by Astro

We are going to discuss frameworks supported by Astro, plus special guest: Angular!

🟢 Excellent support
🟡 Moderate support
🔴 Poor support

🔴 Angular

Apparently our special guest favors separation of concerns via using separate files for HTML, CSS and JS. JSX is absolutely “Not invented here” to this opinionated framework.

An aside: this convention is frowned upon by Vue, despite its first version is inspired by AngularJS, the predecessor of Angular.

🟢 React

Being brought up and made popular by React, JSX is the de facto way to build stuff in Reactland.

Fun fact: React prevailed the usage of className and htmlFor, but “HTML-style” class and for usually just work in other frameworks.

🟢 Preact

Our sweet little React wannabe actively publicizes itself as an alternative to React, no wonder it has perfect support for JSX as well. But if you want, you can also go the lit way.

🔴 Svelte

Being a compiler-driven framework, Svelte relies heavily on its template syntax to achieve the magic, so JSX is a no-go.

However, the Svelte Language Tools does leverage JSX for type checking via svelte2tsx.

🔴 Alpine

Prioritized as a drop-in library to enhance ordinary websites, this is not something you use with JSX which assumes a compiler.

🟡 Vue

Even though templates (or let’s say, SFC) is the dominant way to author Vue components, decent JSX support is also provided for both Vue 2 and Vue 3.

Vue’s more sophisticated JSX transform requires Babel, which denies you the speed gains provided by esbuild/SWC. Also, components written in JSX do not preserve local state with Hot Module Replacement.

Worth mentioning, Volar, the Vue extension for VSCode, implements type checking as JSX just like Svelte.

🔴 Lit

Lit is born for Web Components and that thing doesn’t really get along with JSX. Technically you could transpile JSX to LitElement on you own, but let’s pass.

🟢 Solid

JSX is first class citizen in Solid, there are even helpers to write control flows in JSX conveniently.

Solid’s JSX transform uses Babel, thus have the same “lock-in” as Vue JSX.

🟡 Vanilla

Sure, you can use JSX without a framework! Be it MobX JSX, dom-chef or jsx-dom, it should feel right at home.

Depends on how you see it, Solid can be categorized as vanilla too since it creates ordinary DOM elements.

What gives?

I’m not going to argue about JSX vs Template DSLs, but to me, the biggest benefit of JSX is it enables trivially composing components with ordinary variables:

const Component = () => <div>Look mum, no SFCs!</div>
Enter fullscreen mode Exit fullscreen mode

Other benefits of JSX include built-in editor support (instead of needing plugins like Volar), first class type checking support (instead of needing workarounds like vue-tsc), and better support for generic components. These are trade-offs template DSLs make for ergonomic developing experience.

👋 Hi DEV Community! My second post here, hope you find it more informative than my last post 🙈.
The first version of this post is written at the end of March, posted on my Notion page, hence the old screenshot of Astro homepage. Nonetheless, I added new content and restructured it for easier consuming. Suggestions are very much appreciated ✨!

Top comments (3)

spock123 profile image
Lars Rye Jeppesen • Edited

The author of this article has no idea that Angular doesn't require separate files for css, html and component code. ... . .tells you something about this article

kidonng profile image

I said "favor", not "require". Vue doesn't require using SFC either, yet majority Vue components are SFC.
Also, this article is not for or against frameworks, but rather "JSX support in frameworks". Disapproving the whole article just because you think something is arguable does not seem right.

naucode profile image
Al - Naucode

Thanks, it was a good read, bookmarked, and followed!