Skip to content
Search Create account

DEV Community

DEV Community is a community of 851,150 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Twitter Facebook Github Instagram Twitch
Cover image for What Is JSX?
Sontus Chandra Anik
Sontus Chandra Anik

Posted on

What Is JSX?

#react #javascript #node #webdev

JSX is a React-specific XML/HTML-like syntax that extends ECMAScript to allow for the coexistence of XML/HTML-like text and JavaScript/React code. Preprocessors (i.e., transpilers like Babel) will employ this syntax to convert HTML-like content present in JavaScript files into standard JavaScript objects that a JavaScript engine will parse.
JSX allows you to write compact HTML/XML-like structures (e.g., DOM-like tree structures) in the same file as JavaScript code, and Babel will later convert these expressions to JavaScript code. Instead of putting JavaScript into HTML as in the past, JSX allows us to put HTML into JavaScript.
By using JSX one can write the following JSX/JavaScript code:

var nav = (
    <ul id="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
);
Enter fullscreen mode Exit fullscreen mode

And Babel will transform it into this:

var nav = React.createElement(
   "ul",
   { id: "nav" },
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Home"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "About"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Clients"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Contact Us"
      )
   )
);
Enter fullscreen mode Exit fullscreen mode

You can think of JSX as a shorthand for calling React.createElement().
The idea of mixing HTML and JavaScript in the same file can be a rather contentious topic. Ignore the debate. Use it if you find it helpful. If not, write the React code required to create React nodes. Your choice. My opinion is that JSX provides a concise and familiar syntax for defining a tree structure with attributes that does not require learning a templating language or leaving JavaScript. Both of which are can be a win when building large applications

Discussion (3)

Collapse
lukeshiru profile image
Luke Shiru •

FYI, the output of JSX depends on the "pragma" you have defined, so for example if you're using Preact, the output will look something like this:

import { h } from "preact";

const nav = h(
    "ul",
    { id: "nav" },
    h("li", null, h("a", { href: "#" }, "Home")),
    h("li", null, h("a", { href: "#" }, "About")),
    h("li", null, h("a", { href: "#" }, "Clients")),
    h("li", null, h("a", { href: "#" }, "Contact Us")),
);
Enter fullscreen mode Exit fullscreen mode

And if you use the latest version of React, the output code actually looks something like this:

const nav = _jsxs("ul", {
    id: "nav",
    children: [
        _jsx("li", {
            children: _jsx("a", { href: "#", children: "Home" }),
        }),
        _jsx("li", {
            children: _jsx("a", { href: "#", children: "About" }),
        }),
        _jsx("li", {
            children: _jsx("a", { href: "#", children: "Clients" }),
        }),
        _jsx("li", {
            children: _jsx("a", { href: "#", children: "Contact Us" }),
        }),
    ],
});
Enter fullscreen mode Exit fullscreen mode

So JSX is not "a shorthand for calling React.createElement". JSX is a way of describing function calls, so generally this:

<a href="https://dev.to">DEV</a>
Enter fullscreen mode Exit fullscreen mode

Is transformed into this:

aFunction("a", { href: "https://dev.to", children: "DEV" });
Enter fullscreen mode Exit fullscreen mode

Or into this:

aFunction("a", { href: "https://dev.to" }, "DEV");
Enter fullscreen mode Exit fullscreen mode

Which was actually inspired by something called hyperscript.

Cheers!

Collapse
donnatyler profile image
DonnaTyler •

I want to know more about this topic here, please share more . mantra to get ex back

Collapse
opeolluwa profile image
ADEOYE ADEFEMI OPEOLUWA •

I've been thinking is it possible to use JSX standalone (probably with deno) in building JavaScript powered app.

No need for HTML. Js all the way 🤔

Read next

codemaster747 profile image

Sell me on Turborepo

Darren Baldwin -

seek4samurai profile image

Quick guide to FaceApi Machine learning model for web - ML5.js

Gourav Singh Rawat -

pramit_marattha profile image

Load JavaScript optimally by utilizing defer.

Pramit Marattha -

svprdga profile image

Flutter 3 for WEB: have they really managed to increase performance?

David Serrano Canales -