Intro to JSX

Walking person silhouette

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

What’s JSX

Spoiler! 👻 JSX is not an airline

Why JSX

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

<div>
  <h1>How can this text be changed?</h1>
</div>

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

The setup

// Create h1 element in memory
const h1 = document.createElement('hi');
h1.textContent = 'Still unchanged 😢';

// We need to update the DOM
const dom = document.getElementById('app');
dom.append(h1);

// To actually update it:
dom.getElementByTagName('h1')[0].textContent = "It's fianlly changed!";

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:

<div>
  <h1>This has to be updated many times</h1>
</div>

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

const Title = () => {
  const [count, setCount] = callbackFunction(0); // Hook is beyond the scope of JSX

  return (
    <div>
      <h1>This changed {count} times!</h1>
    </div>
  );
};

Facts

✅ 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

And More …

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)

Trade-off

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

Use Your Creativity 🧠

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

File extension
Style classes
Reference
Reactivity
Virtual DOM
Reconciliation
Control flow
Sever rendering
the list goes on… :)

Addiontional Readings:

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

JSX

Demystifying SolidJS’ JSX

Documentation - JSX

RF21 - Ryan Carniato - SolidJS - Reactive JSX

Introducing JSX - React

react-engine vs other template engines

JSX (JavaScript) - Wikipedia

https://github.com/airbnb/javascript/pull/985

React/JSX as a server-side templating language

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.