JSX is a joy giver and pain lifter for many frontend developers like myself.

You most likely have heard of it, used it but yet do not know what it stands for.

JSX is an acronym for JavaScript XML. It is a syntax extension for Javascript, which means it extends from Javascript and have some unique features that differentiate it from a typical Javascript code.

JSX helps develop software with less hassle.

It gives the capability to mix both HTML and Javascript together.

You can have a Javascript expression within a HTML tag.

Here is an example:

const isHuman = true

const ourPlanet = "earth"

<h1>We are in {isHuman && ourPlanet}</h1>

However, that's not all about JSX, there are cogent point that needs to be pointed out:

1. JSX is not a valid language in and of itself.

This means, browser engines do not understand JSX. Which is why we need transpilers like Babel to transpile JSX into JS Objects which can be read and interpreted by a browser.

2. JSX and React are Independent of One Another

Yeah, you heard that right. JSX and React are not interdependent, each can still be used without the other.

That's all for now.. Thanks for reading, feel free to share your thoughts on JSX in the comment box.