Making Sense of JSX vs HTML

In case you are learning React or have worked on some applications using React, you must be knowing that in-order to build UI we write the markup using JSX ( JavaScript XML ) and not the good old HTML. In case, you didn't knew, don't sweat it. You know it now.

So, what is this JSX which looks so similar to HTML, yet is different from it ? And do we absolutely need JSX to write applications using React ? These are some important questions and we will answer them now.

Before we go into JSX, let us understand what are React Elements. These are the smallest building block of any React Application ( NOT Components ). Basically, any React Component is made up of one or many React Elements.

JSX

• It describes what the UI should look like & it basically produces React Elements.
• After compilation JSX expressions become normal JS functions which are finally evaluated to plain JS objects. Therefore, we can use JSX expressions inside if statements, loops, pass them as an argument to functions as well as return them from some functions.
• So, now we know that JSX are more closer to plain JavaScript than HTML. Therefore, we use camelCase property naming convention instead of normal HTML attributes for tags. Eg: className instead of class, htmlFor instead of for and so on.
• Anything that we mention inside {} of a JSX expression will be evaluated as plain JavaScript.

Will all the above points in mind, now let's see what this is all about.

Suppose inside your React Application in some component you have written the below piece of code:

const name = "Amiya";
const desc = "This is my first post!";

const element = (
    <>
        <h1 className="greeting">
            Hello, <span>{name}</span>
        </h1>
        <p id="desc">Desc: {desc}</p>
    </>
);

Now when you application is compiled, Babel breaks down the above piece of code to:

const name = "Amiya";
const desc = "This is my first post!";

const element = React.createElement(
    React.Fragment,
    null,
    React.createElement(
        "h1",
        {
            className: "greeting",
        },
        "Hello, ",
        React.createElement("span", null, name)
    ),
    React.createElement(
        "p",
        {
            id: "desc",
        },
        "Desc: ",
        desc
    )
);

What React.createElement() does is basically takes in the element type, props associated with it and the childrens of that particular element as arguments and returns us a plain JavaScript object.

The function definition of React.createElement() is:

React.createElement(type, [props], [...children]);

So, the piece of code that we had in our React Application is evaluated to something like this:

const name = "Amiya";
const desc = "This is my first post!";

const element = {
    type: React.Fragment,
    props: {
        children: [
            {
                type: "h1",
                props: {
                    className: "greeting",
                    children: [
                        "Hello, ",
                        {
                            type: "span",
                            props: { children: name },
                        },
                    ],
                },
            },
            {
                type: "p",
                props: { id: "desc", children: ["Desc: ", desc] },
            },
        ],
    },
};

So, this brings us to the question. Do, we really need JSX to write React Applications ? The answer is a big NO. React by itself doesn't require JSX. We could always use React.createElement() and not write JSX at all because it eventually is compiled to it.

But, imagine having too many nested tags, or building a complex UI. Would you prefer the simplicity of what JSX offers or the complexity of using React.createElement() ? And there are not such real world benefits of not using JSX. So, the answer is pretty obvious I think.

This was my first ever post. Hope, you had a good read. As I start revising & learning the old and new concepts, I will be posting more Tech related stuffs.

You can always reach out me over Twitter @amiyakt

Thanks for reading. Have a Good Day!