14 Common Questions for JSX (React) and Their Answers
Tags: frontend, react, webdev, coding
Published: 2024-05-15 03:00:00

## Table of contents
- [The list of questions](#The_list_of_questions)
    - [What exactly is JSX?](#What_exactly_is_JSX)
    - [What is the full-form of JSX?](#What_is_the_full-form_of_JSX)
    - [Why is React better with JSX?](#Why_is_React_better_with_JSX)
    - [What is the role of JSX in React?](#What_is_the_role_of_JSX_in_React)
    - [Is JSX mandatory for React?](#Is_JSX_mandatory_for_React)
    - [What is the difference between React and JSX?](#What_is_the_difference_between_React_and_JSX)
    - [Is JSX a programming language?](#Is_JSX_a_programming_language)
    - [Is JSX a templating language?](#Is_JSX_a_templating_language)
    - [Can browsers understand JSX?](#Can_browsers_understand_JSX)
    - [Why browsers can't read JSX?](#Why_browsers_can't_read_JSX)
    - [Can I use JSX without Babel?](#Can_I_use_JSX_without_Babel)
    - [How is JSX converted into JS?](#How_is_JSX_converted_into_JS)
    - [Should I use React without JSX?](#Should_I_use_React_without_JSX)
    - [What is the difference between HTML and JSX?](#What_is_the_difference_between_HTML_and_JSX)

- [Wrapping up...](#Wrapping_up)

-----

JSX, as you may know, is a useful piece of technology that we use customarily when building apps in [React](https://www.codeguage.com/courses/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 the list of these 14 questions below, for it's not going to take more than 10 minutes but it might expose you to fundamental ideas in React and help clarify any confusions you have regarding JSX.

_So shall we get into it?_

-----

## The list of questions<a name="The_list_of_questions"></a>

### What exactly is JSX?<a name="What_exactly_is_JSX"></a>

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?<a name="What_is_the_full-form_of_JSX"></a>

JSX is sometimes referred to as **_JavaScript Syntax Extension_**, and sometimes as **_JavaScript XML_**.

### Why is React better with JSX?<a name="Why_is_React_better_with_JSX"></a>

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

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

**Further reading:**
To learn more about how React is declarative as compared to the HTML DOM, refer [React First Program: The declarative beauty of React](https://www.codeguage.com/courses/react/first-program#The_declarative_beauty_of_React).

### What is the role of JSX in React?<a name="What_is_the_role_of_JSX_in_React"></a>

Speaking broadly, JSX helps us **define our app's UI** in React.

Speaking technically, the role of JSX is to **simplify calls to `createElement()`** by using an HTML-like syntax to define elements.

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

```js
createElement('h1', null, 'Hello World!');
```

we can simply do the following in JSX:

```jsx
<h1>Hello World!</h1>
```

_Quite amazing, isn't it?_

### Is JSX mandatory for React?<a name="Is_JSX_mandatory_for_React"></a>

Not at all. JSX is NOT mandatory for React; we can create an entire application solely using `createElement()`, without even touching JSX. However, it's important to note that there's _very very little_ reason to do so in a React app.

### What is the difference between React and JSX?<a name="What_is_the_difference_between_React_and_JSX"></a>

React is a JavaScript library for building interactive UIs whereas JSX is just a tool that can be used while working in React to simplify the creation of elements (i.e. simplify the creation of the UI).

### Is JSX a programming language?<a name="Is_JSX_a_programming_language"></a>

No, 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 (that is transpiled into plain JavaScript by a tool such as Babel before it's executed by the browser).

### Is JSX a templating language?<a name="Is_JSX_a_templating_language"></a>

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](https://www.codeguage.com/courses/advanced-js/modules-basics) in an EJS file, neither any function definitions, or any class definitions. At the most, we'll probably see JavaScript function invocations and arbitrary expressions. The main thing that we see are 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 tiny, cute pieces of JSX elements.

All in all, I am compelled to stand with the stance that JSX is not a templating language. _What do you think?_

### Can browsers understand JSX?<a name="Can_browsers_understand_JSX"></a>

No, browser can NOT understand JSX (at least as of now).

### Why browsers can't read JSX?<a name="Why_browsers_can't_read_JSX"></a>

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 parse and execute.

### Can I use JSX without Babel?<a name="Can_I_use_JSX_without_Babel"></a>

While there are third-party packages ([acorn-jsx](https://github.com/acornjs/acorn-jsx) and [jsx-transform](https://github.com/alexmingoia/jsx-transform)) besides Babel that _can_ be used to transpile JSX into plain JavaScript, none of them is actively maintained, with the last commits being years and years old. Likewise, it can be concluded that JSX can NOT be used without Babel.

### How is JSX converted into JS?<a name="How_is_JSX_converted_into_JS"></a>

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?<a name="Should_I_use_React_without_JSX"></a>

Certainly, this entirely depends on your preference, but as far as I know, I've not seen anyone developing React apps without using JSX. The simplicity and convenience that JSX brings is a great thing to have on board. So, I'd say no, don't use React without JSX.

### What is the difference between HTML and JSX?<a name="What_is_the_difference_between_HTML_and_JSX"></a>

[HTML is a markup language](https://www.codeguage.com/courses/html/introduction#What_is_meant_by_a_markup_language) (keep in mind, it's not a programming language!) that helps us define the content, structure, and semantics of webpages. In contrast, JSX is a syntax extension to JavaScript that helps us conveniently define UIs in React. Sure, JSX resembles HTML but they both are completely different tools for different purposes.

-----

## Wrapping up...<a name="Wrapping_up"></a>

React is a pretty powerful and popular JavaScript library, used by companies of all sizes to empower their complex web applications, and even their mobile and desktop applications (thanks to tools like [Electron](https://www.electronjs.org/) and [React Native](https://reactnative.dev/)).

There are many foundational ideas to learn in React, such as [elements](https://www.codeguage.com/courses/react/elements), [components](https://www.codeguage.com/courses/react/components), [events](https://www.codeguage.com/courses/react/events), and amongst the most important of these is JSX.

This article put forth a healthy discussion on some aspects of JSX but obviously it didn't explore all the underlying aspects of working with JSX. If you wish to learn more about JSX, and cover all these aspects of it, refer to the chapter [React JSX](https://www.codeguage.com/courses/react/jsx) from my [comprehensive React course](https://www.codeguage.com/courses/react/).

And if you feel you're quite confident with your JSX skills, you can try taking the [React JSX quiz](https://www.codeguage.com/courses/react/jsx-quiz), answering a decent number of questions on JSX.

_Happy learning and happy coding!_ 🙂

-----