What is JSX?

Now that we know what React is, let’s take a look at a few terms and concepts that will come up throughout the rest of the series.

In this article, we’re going to look at one part of the React ecosystem: ES6 and JSX.

JSX/ES5/ES6 WTF??!

In any cursory search on the Internet looking for React material, no doubt you have already run into the terms JSX, ES5, and ES6. These opaque acronyms can get confusing quickly.

ES5 (the ES stands for ECMAScript) is basically “regular JavaScript.” The 5th update to JavaScript, ES5 was finalized in 2009. It has been supported by all major browsers for several years. Therefore, if you’ve written or seen any JavaScript in the recent past, chances are it was ES5.

ES6 is a new version of JavaScript that adds some nice syntactical and functional additions. It was finalized in 2015. ES6 is almost fully supported by all major browsers. But it will be some time until older versions of web browsers are phased out of use. For instance, Internet Explorer 11 does not support ES6, but has about 12% of the browser market share.

In order to reap the benefits of ES6 today, we have to do a few things to get it to work in as many browsers as we can:

1. We have to transpile our code so that a wider range of browsers understand our JavaScript. This means converting ES6 JavaScript into ES5 JavaScript.
2. We have to include a shim or polyfill that provides additional functionality added in ES6 that a browser may or may not have.

As we’ll see, all of our React components have a render function that specifies what the HTML output of our React component will be. JavaScript eXtension, or more commonly JSX, is a React extension that allows us to write JavaScript that looks like HTML.

To see what this means, imagine we had a React component that renders an h1 HTML tag. JSX allows us to declare this element in a manner that closely resembles HTML:

class HelloWorld extends React.Component {
  render() {
    return (
      <h1 className='large'>Hello World</h1>
    );
  }
}

#react #javascript #developer