What is JSX? Find out about the syntax used to write code in ReactJS

This article was originally published at https://www.blog.duomly.com/what-is-jsx/

---

Intro to what is JSX?

As a student learning front-end development, your first choice after HTML, CSS, and Javascript is a framework that will make it easy to create the first project.

And as most beginners start with ReactJS because it’s pretty popular and easy to use the framework. So, when you are already used Create React App to set up your new project, you may realize something wired or something new.

Component’s files will have a specific extension, which is not familiar for non ReactJS developers, it’s .jsx. Why it’s not .js, what’s the specific JSX syntax, which is used in ReactJS, and in what way it’s better than the traditional JS?

That’s exactly what’s I like to explain to you in this article. I’m going to tell you what is JSX, what it’s used for, how to use for loop in JSX, and what’s the difference between JSX and HTML.

And of course, if you prefer watching than reading, enjoy the video version of this article on our YouTube channel.

What is JSX?

JSX is a syntax extension to Javascript used in ReactJS that allows writing Javascript that looks similar to HTML. In other words, it is a kind of templating language but with the power of Javascript.

Let’s take a look at the JSX code example, so you know how it looks:

class Main extends React.Component {
    render() {
        return <h3 className=„title">Hello, Duomly!</h3>;
    }
}

Right now, you can see the JSX code inside the render() function. It’s really similar to HTML. After the compilation, the JSX is translated to regular Javascript function calls, and here’s how it looks:

class Main extends React.Component {
    render() {
        return (
            React.createElement(
                „h3”,
                { className: ‚title’},
                ‚Hello, Duomly!’
            )
        )
    }   
}

So, JSX is kind of an easier way to use React.createElement() method. React.createElement() helps to create a bug-free code, because it performs checks during the compilation, and finally the result of JSX expression is the object like below:

const title = {
    type: ‚h3’,
    props: {
        className: ‚title’,
        children: ‚Hello Duomly!’
    }
}

Using JSX in ReactJS is recommended because it brings some benefits to your applications. Here’s why you should use JSX:
- it simplifies creating component’s templates
- it’s faster than Javascript because it performs optimization when transiting to JS
- it helps to keep logic and template together as components without the mess

But if for some reason you don’t want to use JSX, you don’t have to; pure Javascript is acceptable in ReactJS as well.

Finally, just to clarify what’s exactly JSX stands for. JSX stands for a JavaScript eXtension or JavaScript XML.

What is JSX used for?

Well, we know what JSX is and why it’s better to use it, so right now, let’s clarify what JSX used for actually is.

In ReactJS we are using JSX to create HTML elements as a JavaScript code, that will be placed inside the DOM without using createElement() or appendChild() methods.

Many developers use JSX to actually simplify their lives because writing ReactJS code in pure JavaScript would be much more uncomfortable.

Let’s take a look at a simple example with JSX and without JSX:

// JSX
const greetings = <p>Good morning!</p>;
ReactDOM.render(greetings, document.getElementById(‚root’));

// NO JSX
const greetings = React.createElement(‚p’, {}, ‚Good morning!’);
ReactDOM.render(greetings, document.getElementById(‚root’));

As you can see, the JSX syntax is much more simple and easy, mostly because it is similar to HTML, which every front-end developer knows very well.

JSX for loop

When you’d like to create a list of JSX elements, and you’d like to use a loop for that, it’s possible by creating an array of JSX elements that could be later displayed. Let’s see the code example:

render() {
    const children = [‚John’, ‚Mark’, ‚Mary’];
    const childrenList = [];

    for (let [index, value] of children.entries()) {
        childrenList.push(<li key={index}>{value}</li>);

    }

    return <ul>{items}</ul>
}

But there is also a better solution for doing the same and more ReactJS and JSX friendly, it’s .map(). Let’s take a look at the code example:

render() {
    const children = [‚John’, ‚Mark’, ‚Mary’];

    return (
        <ul>
            {children.map((value, index) => {
                return <li key={index}>{value}</li>
            }))
        </ul>
    )
}

Simple and easy, right?

JSX vs HTML

Right now, let’s talk about JSX as opposed to HTML. As you should probably know, as a front-end developer, HTML is a Hypertext Markup Language which is used to create the elements that we can see on the screen like lists, divs, or images.

On the other hand, JSX is a JavaScript extension that allows creating HTML inside the JavaScript code.

The biggest difference between JSX and HTML is that nested JSX must return just one element. It means that if you’d like to create siblings elements, they always need to have parents; in HTML, it’s not necessary.

Let’s see the code:

// JSX
<div>
    <p>Mary</p>
    <p>Judy</p>
    <p>John</p>
</div>

// HTML
<p>Mary</p>
<p>Judy</p>
<p>John</p>

If JSX code wouldn’t have a div parent, it couldn’t compile, and it would show the error.

Another difference is that with HTML, we can use a class keyword to define CSS classes, but with JSX, this keyword is already taken; that’s why creators had to find out something else. In JSX, we have to use className to define class names to be used with styles. It’s similar to properties like onclick in HTML and onClick in JSX.

The next difference is that in JSX, any element can be written as a self-closing tag if there aren’t any children elements inside. In HTML, just a few elements have self-closing tags; the others have separate opening and closing tags.

JSX and TypeScript

It’s more and more common that developers are using TypeScript instead of Javascript to code in ReactJS. And in this case, there is another extension used .tsx, which is TypeScript JSX.

There isn’t any difference between TSX and JSX, besides the types you have to use inside the functions.

What is JSX - Summary

In this article, I tried to explain to you what is JSX, the Javascript extension used to create templates in ReactJS, the most popular front-end framework. We went through what is JSX used for and how it differs from HTML. Finally, you also find out what’s the .tsx file extension and when you can expect it.

I hope you found this article useful as a short overview of JSX. If you’d like to learn more about ReactJS and JSX, take a look at our ReactJS Course, where we are covering lots of other concepts important for this framework.

Thank you for reading,
Anna from Duomly