Table of contents
-
- What exactly is JSX?
- What is the full-form of JSX?
- Why is React better with JSX?
- What is the role of JSX in React?
- Is JSX mandatory for React?
- What is the difference between React and JSX?
- Is JSX a programming language?
- Is JSX a templating language?
- Can browsers understand JSX?
- Why browsers can't read JSX?
- Can I use JSX without Babel?
- How is JSX converted into JS?
- Should I use React without JSX?
- What is the difference between HTML and JSX?
JSX, as you may know, 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 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
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 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.
What is the role of JSX in React?
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!'
createElement('h1', null, 'Hello World!');
we can simply do the following in JSX:
<h1>Hello World!</h1>
Quite amazing, isn't it?
Is JSX mandatory for React?
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?
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?
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?
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 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?
No, browser can NOT understand 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 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, 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?
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?
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?
HTML is 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...
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 and React Native).
There are many foundational ideas to learn in React, such as elements, components, 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 from my comprehensive React course.
And if you feel you're quite confident with your JSX skills, you can try taking the React JSX quiz, answering a decent number of questions on JSX.
Happy learning and happy coding! 🙂
Top comments (0)