JSX

If you ever wondering what JSX is, how it is used, and why it was created. You might find this article useful

Brian Lau / February 04, 2023

3 min read

💡 This was released on My YouTube Channel, check it out at Let's talk about JSX 💡

What's JSX

Before introducing JSX, I want you to think about how we can manipulate HTML?

To be able to dynamically change the content, we’d need some help from JS:

The setup

To actually update it:

Now its updated. Problem is, no one would write nor read this! We want something that’s Modular, Composable, Reusable.

In modern days, we have very good UX. So okay now think about this:

Sure, you’d want some sort of tokens to represent **X** to dynamically change it . This is where JSX shines!

✅ JSX is actually a spec

✅ JSX is an XML-like syntax extension to ECMAScript without any defined semantics

✅ It's intended to be used by various preprocessors (transpilers) to transform these tokens into standard ECMAScript

❌ It's NOT a proposal to incorporate JSX into the ECMAScript spec itself

❌ It's NOT intended to be implemented by engines or browsers

Generic but well defined syntax enable parsers tools like:
- Eslint, TypeScript, Tailwind, Prettier, and syntax highlighters etc
Could co-exist with with other lib with a thin extension wrapper
Could write JS logic in side the templates
JSX is designed as an ECMAScript feature and the similarity to XML is only for familiarity
Works for Server-Side-Render(SSR)

Embedding a new syntax in an existing language is not the plan. Therefore, it will always require a transpiler to have it work.

How would you twist JSX to create something that solve your problem? For example

If you find this interesting, here are some of the readings I went through and found interesting!

If you'd like to see a completed example, the entire source code for my website is open source.

Feel free to send me a message if you have any questions or if I've missed anything.

If you find any issue regarding this post, please send me a DM or open a pull request!