What is JSX?

Hrishi Mittal
JSX is a syntax extension to JavaScript. It’s a way to turn HTML markup into JavaScript objects.

As we saw earlier, our Hello class component has just one function, the render function:

class Hello extends React.Component {
  render () {
    return (
      <h1>Hello, World!</h1>
    )
  }
}
which returns this markup:

<h1>Hello World!</h1>
Now, you might be wondering why there is HTML inside JavaScript.

This is JSX, one of the new things that React introduced.

JSX produces React elements, the smallest building blocks of React apps that React components are made of.

It’s not compulsory to use JSX with React but it is highly recommended and almost everyone uses it, because it makes using React a lot easier.

It may feel a bit strange at first but you get used to it very quickly.

One key feature of JSX to note is that you can embed JavaScript expressions inside JSX by enclosing them inside curly brackets.

For example, if we want to use the value of a variable or property called name, we can do so like this:

<h1>Hello, {name}!</h1>
Similarly, we can use mathematical expressions:

<h1>Hello, I am {13+24} years old!</h1>
which returns this markup:

<h1>Hello, I am 37 years old!</h1>

Initially JSX may seem just like another template language, but in fact, it comes with the full power of JavaScript. As you use and see more of its properties you’ll realise that it’s actually very powerful, much more powerful than a normal template language.