Introduction to JSX

Back to: ReactJS Tutorials

Introduction to JSX:

In this article, I am going to discuss the Introduction to JSX. Please read our previous article where we discussed Understanding Standard React Project.

Introduction to JSX:

So, we got this JSX code here which is basically HTML code inside of JavaScript. Indeed, JSX stands for JavaScript XML because HTML in the end is XML, you could say. So, we got this HTML code in JavaScript. This is really important.

This only works because there are transformation steps running behind the scenes because of the process, NPM start process we started, which transformed this JavaScript code to more browser-friendly code before everything is served. And indeed, you can see that transformed code if you want to.

Here, we are using Chrome which we recommend to you all for development. Simply open up the developer tools in Chrome. Just right-click on the window and then click on inspect,

In Windows, you can open it with CTRL + SHIFT + I shortcut. And a window will open,

And in developer tools, go to the sources tab,

This shows all the sources, and all the script files, for example, which were downloaded as part of this page. Now here, you’ll see a couple of folders but you should see the static /js folder,

It holds a couple of JavaScript files. The exact number and names of these files might differ. But ultimately, if you click through these files,

you should see some code that looks fairly cryptic. And which is definitely not the code we wrote or we have in two simple JavaScript files (App.js and index.js). Well, it turns out that this is transformed code and it’s quite a complex code, as you can tell because React supports many features. And this code doesn’t just contain our source code but the whole reacts library source code and the whole ReactDOM library source code. So, the code in these files is not just our code but the entire React package code. That’s something to keep in mind.

Now in these files, for example, you see a function named App, somewhere in files or you might need to search for it. But of course, this function looks quite different from the App function that we have in the App.js file. There that is a very lean function but here this function is not so lean.

Well, in the end, this is transformed code. You could say this is the code that runs in the browser. And if you have a look at this transformed code and even if the look might change over time, it will definitely not look like App.js code. If you have a look at this transformed code that probably is not the code, we would like to write. And that’s why we have these transformation steps because we can use this special JSX Syntax, which is not normally supported in the browser whilst we’re writing our code and still it’ll automatically be transformed to code which does run in the browser.

And we are just putting so much emphasis on this because that can be super confusing If you’re new to React. You do know some basic JavaScript at least. And all of a sudden you see code like this which is not regular JavaScript. Well, this is just developer-friendly code that we can write, which is transformed behind the scenes.

In the next article, I am going to discuss How React Works. Here, in this article, I try to explain the Introduction to JSX with Examples. I hope you enjoy this Introduction to JSX article.