Introduction to JSX in ReactJS with Examples

JSX is probably the word you are going to see and hear a lot, in the world of ReactJS. So, it is really important for you to understand its context and usage.

1. JSX is JavaScript XML which is an extension to the JavaScript language syntax.

2. In the case of the React library, it is an extension to write an XML-like code for elements and components.

3. Just like XML, JSX tags have a tag name, attributes, and children.

Start from the beginning of the ReactJS series:

Get started with ReactJS

Hello World App in ReactJS

ReactJS Components: Functional and Class

But why do we need JSX?

Well, the truth is JSX is not a necessity to write React applications. You can definitely use ReactJS without JSX. However, the following advantages are what makes JSX so popular:

• JSX makes your ReactJS code simpler and elegant.

• JSX ultimately transpiles to pure JavaScript which is understood by the browsers.

But how does it works behind the scenes?

To understand this, let's create files with and without JSX code.

1. ReactJS Component using JSX Code

Simply write some code with a functional component, say in a file greet.js

Note: We have already discussed how you can create your first ReactJS app in our previous post, please follow that before the below code.

function Greet() {

    return (
        <div>
            <h1>Hello Jaz</h1>
        </div>
    )

}

We have created our first functional component. But as of now, this HTML code is not going to render in the browser. The Greet component is no way connected to the rest of our application. So for rendering it in the browser, we need to export this Greet function from greet.js and hence the statement export default Greet. Then we will import it in App.js and then include it in our App class component.

In App.js file,

Here, first of all, import Greet(on the line number 4 in the above snapshot) from the component folder (must be created inside src folder, refer the folder structure in the picture above).

Next, to include the greet component, in our App component we simply specify the component as a custom HTML tag, like

<Greet> </Greet>

And if there is no content between the tags, one can simply write it as a self-closing tag. Like.

<Greet />

Execute the command npm start in the terminal, you will see the following output:

Hurray!! So with JSX, this was as simple as it could be. Let's look into the code without JSX.

2. ReactJS Component without using JSX Code

To help us do that, the React Library provides a createElement method. So, within the same Greet function we'll make the following changes:

We will comment the HTML like looking code, and instead, use the createElement() of React Library. The createElement() method accepts minimum 3 parameters: the first parameter is a string that specifies an HTML tag to be rendered.

In our example, we need a div tag to be rendered. Hence we have provided a div tag as the first argument. In the second parameter, we need to pass any optional properties, since here we don't need any additional properties, so we can simply put null. The third parameter is the children for the HTML element, i.e. children for the div tag(in our case). It will be a simple text that is 'Hello Jaz' in our case.

The output will be:

As you can see, the output is slightly different. Any Guesses?

Yes, this is because the <h1> tag is missing. So let's include that.

Let's again check the output, with the code modified as per the above snapshot.

Oops! What a blunder, no worries, we need to make a few more changes and we would be able to see the desired output.

But before moving forward, let's inspect this element on the browser.

What we noticed over here is, the <h1> tag that we added is just an inner text to the div tag and that the <h1> tag is not the DOM node, as it should be. Let's fix this:

It turns out that the createElement() method can accept any number of elements as children. So, let's split the <h1> tag and text into two elements, as shown below:

The output to this will be:

... Again nothing useful. So, if we'll again inspect the element, we would get something like:

Though we still have the div element, it contains two text nodes rather than having a child h1 HTML element. h1 is a text node and Hello Jaz, is another text node. So to render <h1> as an HTML element but not as a text node, we have to call the createElement() method for the second time, as shown below.

The statement on Line number 10 is:

return React.createElement('div', null, React.createElement('h1', null, 'Hello Jaz'))

Here the third parameter, instead of plain text would be the second createElement() method call, passing <h1> as the first parameter, next will be null as we have no additional properties to mention and finally the text 'Hello Jaz'.

Let's take a final look at our browser.

Yes, we did it. But by now it must be clearly evident, which one is the simpler approach.

So, basically each JSX element is just syntactic sugar for calling React.createElement method. And that is why you have to import the React library when you use JSX because JSX translates into React.createElement which in turn uses the React Library.

So JSX is basically an HTML code but with some slight differences in syntax.

We'll be studying more on JSX in the upcoming sessions, So stay tuned!!