14 common questions for JSX (React) and their answers

JSX is a useful piece of technology that we use customarily when building apps in React, a JavaScript library for building interactive UIs.

In my quick short research on the questions developers are frequently asking online for JSX, I came across a bunch of them and decided to answer them all in one go, hence this blog post.

I encourage you to go through this list of 14 questions, for it's not going to take more than 10 to 20 minutes but it might expose you to some fundamental ideas in React and help clarify any confusions you might have regarding JSX.

So shall we get into it?

What exactly is JSX?

JSX is a syntax extension to JavaScript, originally developed by Facebook (now Meta) for use with React to simplify defining React elements in JavaScript code.

What is the full-form of JSX?

JSX is sometimes referred to as JavaScript Syntax Extension, and sometimes as JavaScript XML.

Why is React better with JSX?

React is better — actually much better — with JSX because instead of calling createElement() (the function exported by the react package) manually in code, JSX allows us to very conveniently define sets of React elements using an HTML-like syntax that we're all intrinsically familiar with.

React embraces the declarative programming paradigm, even with its createElement() logic as compared to the native HTML DOM element creation logic, and JSX takes this declarative world to a whole new level.

What is the role of JSX in React?

The role of JSX is to simplify calls to createElement() (to create elements in React) into an HTML-like syntax.

For instance, instead of having to manually write createElement() as follows, to create an <h1> element with the content "Hello world!"

let el = createElement('h1', null, 'Hello world!');

we can simply do the following in JSX:

let el = <h1>Hello world!</h1>

Quite amazing, isn't it?

Is JSX mandatory for React?

Not at all! JSX is NOT mandatory for React. You can create an entire application solely using createElement() calls, without even touching JSX. However, it's important to note that there's very very little reason to practically do so.

What is the difference between React and JSX?

React is a JavaScript library for building interactive UIs whereas JSX is just a tool used in tandem with React to simplify the creation of elements (i.e. the UI).

Is JSX a programming language?

JSX is NOT a programming language! JavaScript is the programming language, React is the library made on top of JavaScript, and JSX is just a syntactic extension to JavaScript (being transpiled into plain JavaScript by a tool such as Babel before it's executed by the browser).

Is JSX a templating language?

Hmm... I'd say NO.

If you have experience of working with templating languages, such as EJS, Blade, Handlebars, you'd be able to realize that they are not meant to contain fully-fledged code snippets of the underlying language, if any.

For example, you won't see a whole set of JavaScript import/export statements in an EJS file, neither any function or class definitions. At the most, you'll probably see JavaScript function invocations and arbitrary expressions. Mainly, you'll see the directives of EJS.

In contrast, JSX, being a syntax extension to JavaScript, naturally allows us to define whole JavaScript code blocks. In fact, this is what we do regularly when working with JSX — importing other components, writing JavaScript functions, running some rendering logic in those functions, and then finally returning a JSX element.

You see, a JSX file doesn't define only the template; it also contains a ton full of JavaScript code, sprinkled with bits and pieces of JSX elements.

All in all, I strongly argue that JSX is not a templating language.

Can browsers read JSX?

No, browsers can NOT read JSX (at least as of now).

Why browsers can't read JSX?

JSX is neither a part of the ECMAScript standard, nor a separate technology that's recognized by browsers (as of yet). Hence, they can't parse JSX on their own. In order to successfully build a React app with JSX, we need a transpiler to convert the alien JSX syntax into plain JavaScript that all browsers can easily parse and execute.

Can I use JSX without Babel?

While there are third-party packages (acorn-jsx and jsx-transform) besides Babel that can be used to transpile JSX into plain JavaScript, none of them is actively maintained — the last commits are years and years old. Likewise, it can rightly be concluded that JSX can NOT be used without Babel.

How is JSX converted into JavaScript?

The high-level overview is that each JSX element gets converted into a corresponding createElement() call. The low-level details obviously are slightly complex and out of the scope of this article.

Should I use React without JSX?

As far as I know, I've not seen a single person developing React apps without using JSX. The simplicity and convenience that JSX brings is a must to have on board. So, please don't use React without JSX!

What is the difference between HTML and JSX?

HTML is a markup language (keep in mind, it's not a programming language!) that helps us define the content, structure, and semantics (meaning) of webpages. In contrast, JSX is a syntax extension to JavaScript that helps us conveniently define UIs in React. For sure, JSX resembles HTML but they both are completely different tools for different purposes.