Working of JSX

Back to: ReactJS Tutorials

Working of JSX:

Let us understand the working of JSX.

Pure JavaScript Code:

As we mentioned earlier in this module, you can open up your developer tools and there you’ll find the JavaScript code that is responsible for what you’re seeing on the page. And there, you will also find all your component functions, like the app function.

In the end, it will look totally different, because there you have no JSX code. Because JSX code isn’t supported by the browser. In inspection, we can see the transformed code. This is a code that still is fairly cryptic because this is the final step of the transformation. We can also write code instead of this JSX code which is a bit more readable to us than the above code. The above code is not readable as the JSX code. We still want to show it to you because this shows you what this JSX code actually represents behind the scenes.

Maybe you already wondered about one thing. In the package.json file in our project,

We’ve got a bunch of dependencies, and most of them are just dealing with the behind-the-scenes transformations. But we’ve got two dependencies that are related to React, React, and React-dom. We’re using the React-dom in the index.js file,

But we are never using React anywhere. We never imported React anywhere. This actually works in this kind of project setup and in all modern React project setups which are created by create-react-app.

In a lot of other React projects, which you’ll find out there in the wild. You will actually see React imports, even though we don’t have them here. Because in the past, in older React projects, you actually needed to import React from ‘React’ in all your React component files. To be precise, in all files where you used JSX. And you’ll still see a lot of React projects out there which have these imports.

We can emit this import now. It is really just some magic being done by modern React project setups. We needed the import in the past because the JSX code is just syntactic sugar. And under the hood, it has actually transformed two methods that are called on the React object, which is why we needed to import React in the past. Now, let us show you the below code without JSX syntax.

We can comment on the above code for a while and return its alternative. In the imported React object, there is a createElement method that we can call. When you use JSX, in the end, it’s this method that is called. The createElement method takes three arguments. The first argument is the element that should be created. For example, a div. And div is a built-in HTML element, you just pass the element name in a string, like ‘div’.

The second argument is an object that configures this element. Specifically, an object which sets all the attributes of the passed element i.e. div element. This div has no attributes, so here we can pass an empty object i.e. {}.

The third argument is the content between the opening and closing div tags. And it’s not just a third argument. You can have an infinitely long list of arguments which are the different content pieces between the opening and closing tags. So here we have two elements. So we will have two extra arguments.

So, the third argument will be our H2 element. As you can see in the JSX code, the first child in that div is H2. And therefore, again, we will call React.createElement and create an H2 element. And that H2 element, again, has no attributes, so the second argument of this second createElement call will be an empty object. And the third argument of this createElement call will be content in this H2 tag. In this case, the “Hello Coders!” string is the content for H2. So we will pass this string.

Now next to this second createElement call, we will have a third createElement call, which is the neighbor element to this H2 element that is the Expenses component. Again, we will create an element here, but now we’re working with a custom component instead of a built-in one. In such cases, you don’t use a string here, but you just point at your imported function i.e. import Expenses from ‘./components/Expenses’ because your components are just functions. So here we set Expenses. We point at Expenses as an element here. The second argument is an object of properties or attributes that should be set.

In the Expenses component, we have the items prop, and the items attribute, so we will add the key of an item. Keep in mind, this is just a JavaScript object, so we will write the property name, then a colon, and then the value. And then as a third argument, we have to pass the content between the opening and closing tags. And in this case, there is no such content, so we omit it.

return React.createElement(
    'div',
    {},
    React.createElement('h2', {}, 'Hello Coders!'),
    React.createElement(Expenses, {items: expenses})
  );

And this is the alternative to the JSX code by using this React object. And therefore, if we saved that,

The output will be exactly the same as before. Now, you can write your entire React app like this. This code is a bit harder to read and a bit more cumbersome than using the JSX code. That’s why you needed to import React from React in all your component files in the past because this is the code that gets built automatically when JSX is used.

Now in more modern project setups, you can omit this React import because the project setup is able to make that transformation without the import being added. And therefore, because of that reason, we will now also import it and add it to all components where we used the JSX code like index.js, Expenses.js, ExpenseItem.js, etc.

Again, we technically don’t need to do that. And if you have a look at this code, it should also be clear why we need some wrapping element as a root JSX element. Why we can’t have two side-by-side elements returned? Because how will you write this in the React.createElement? We can’t return more than one thing. We can return an array, but two or more elements without the root element is not an array of elements. That’s why you always need such a wrapper because, in the createElement method, you always create one element which then may have more child elements. So that’s why we have this one wrapper root JSX element which we always need.

So that’s behind-the-scenes stuff. Now, we will comment out our JSX solution, because, of course, we’re going to write JSX code. After all, this is way more convenient. But it is important to understand what is happening under the hood and how React works.