Whether you’re a newcomer or a seasoned web developer, you’ve likely encountered the term “JSX.” But have you ever stopped to wonder why it’s used? Why do we mix HTML with JavaScript? How does it all actually work? Let’s break it down in plain language.

What is JSX?

JSX is an abbreviation for “JavaScript XML”. It’s a syntax extension for JavaScript

JSX was created by the developers of React (Meta). It introduced a syntax that allowed developers to write HTML-like code directly within JavaScript files, enabling a more intuitive and declarative way to define UI components.

Here’s a simple example of what JSX looks like:

//HelloWorld.jsx

const element = <h1>Hello World!</h1>;

Why Use JSX?

For years, the foundation of the web rested on HTML, CSS, and JavaScript. Developers typically kept content within HTML, design aspects in CSS, and logic in JavaScript — often stored in separate files. HTML was responsible for marking up content, while JavaScript handled the page’s logic, all while living in their respective realms.

As the web evolved to become more interactive, the logic behind content started to dictate its structure. JavaScript began to take the lead in shaping HTML elements. That’s why in React, both the rendering logic and markup coexist within the same space — components. Here are some advantages of JSX:

Declarative SyntaxReadabilityComponent BasedType CheckingEasy integration with JavaScript

JSX becomes vanilla JavaScript before it makes it to the browser. How does it accomplish this? Let’s take a look under the hood!

How JSX is Compiled

JSX is not directly understood by browsers. It needs to be compiled into regular JavaScript code before it can be executed. Typically, JSX is compiled using a tool like Babel, which is a popular JavaScript compiler.

Here’s a simplified overview of how JSX is compiled:

Parsing – The JSX code is first parsed by a parser, which understands JSX syntax and converts it into an abstract syntax tree (AST). This AST represents the structure of the JSX code in a way that can be manipulated and transformed.

//Consider the HelloWorld component
const element = <h1>Hello, world!</h1>;

//AST Tree
{
“type”: “JSXElement”,
“openingElement”: {
“type”: “JSXOpeningElement”,
“name”: {
“type”: “JSXIdentifier”,
“name”: “h1”
},
“attributes”: [],
“selfClosing”: false
},
“closingElement”: {
“type”: “JSXClosingElement”,
“name”: {
“type”: “JSXIdentifier”,
“name”: “h1”
}
},
“children”: [
{
“type”: “JSXText”,
“value”: “Hello, world!”,
“raw”: “Hello, world!”
}
]}

Transformation – Once the JSX code is parsed, it undergoes transformation steps where JSX syntax is converted into regular JavaScript. This involves converting JSX elements into function calls that create React elements.

Code Generation – After transformation, the transformed AST is then converted back into JavaScript code. This code is typically compatible with older browsers and can be executed without relying on JSX syntax.

Optional Optimization – Optionally, additional optimizations can be applied during the compilation process. For example, dead code elimination, minification, and tree shaking can be performed to optimize the size and performance of the compiled code.

Output – Finally, the compiled JavaScript code is outputted either to files or directly into memory, depending on the build configuration and tooling setup.

// JSX code
const element = <h1>Hello, world!</h1>;

// Transformed JavaScript code
const element = React.createElement(‘h1’, null, ‘Hello, world!’);

// Minified JavaScript code
const e=React.createElement;const element=e(‘h1′,null,’Hello, world!’);

This compilation process allows developers to write JSX code, which is more expressive and readable, while still being able to run it in environments that only understand standard JavaScript. It also enables the use of modern JavaScript features and optimizations, improving the performance and compatibility of React applications.

Who uses JSX?

ReactJSNext.jsVue.JSPreact

Wrapping Up

In summary, JSX is a powerful tool in web development that blends together the structure of web pages with the code that makes them work. It’s really good at making code easier to understand, maintain, and write, especially when using React.

By learning about where JSX came from, why it’s important, how it’s turned into regular code, and the many ways it can be used, developers can make the most of JSX to create cool and interactive websites without much hassle.

References

Fluent ReactReact Docs

I read, write about low level tech details. Please reach out to me for any feedback or tech explorations!

https://www.linkedin.com/in/itherohit/

https://itherohit.dev/

Inside React: JSX – what, why, how! was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.

​ Level Up Coding – Medium

about Infinite Loop Digital

We support businesses by identifying requirements and helping clients integrate AI seamlessly into their operations.

Gartner
Gartner Digital Workplace Summit Generative Al

GenAI sessions:

  • 4 Use Cases for Generative AI and ChatGPT in the Digital Workplace
  • How the Power of Generative AI Will Transform Knowledge Management
  • The Perils and Promises of Microsoft 365 Copilot
  • How to Be the Generative AI Champion Your CIO and Organization Need
  • How to Shift Organizational Culture Today to Embrace Generative AI Tomorrow
  • Mitigate the Risks of Generative AI by Enhancing Your Information Governance
  • Cultivate Essential Skills for Collaborating With Artificial Intelligence
  • Ask the Expert: Microsoft 365 Copilot
  • Generative AI Across Digital Workplace Markets
10 – 11 June 2024

London, U.K.