JSX

ES5(the ES stands for ECMAScript) is basically “regular JavScript”. The 5th update to JavaScript, ES5 was finalized in 2009. It has been supported by major browsers for several years. Therefore if you’ve written 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.

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:

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

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 JavScript that looks like HTML.

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

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

The render( ) function in the HelloWorld component looks like it’s returning HTML, but this is actually JSX. The JSX is translated to regular JavaScript at runtime. That component, after translation, looks like this:

class HelloWorld extends React.Component {
    render() {
        return (
            React.createElement(
                'h1',
                {className: 'large'},
                'Hello World'
            )
        );
    }
}

While JSX looks like HTML, it is actually just a terser way to write a React.createElement( ) declaration. When a component renders, it outputs a tree of React elements or a virtual representation of the HTML elements the component outputs. React will then determine what changes to make to the actual DOM based on the React element representation. In the case of the HelloWorld component, the HTML the React writes to the DOM will look like this:

<h1 class="large">Hello World</h1>

The class extends syntax we used in our first React component is ES6 syntax. It allows us to write objects using a familiar Object-Oriented style. In ES6, the class syntax might be translated as:

var HelloWorld = function() {}
Object.extends(HelloWorld, React.Component)
HelloWorld.prototype.render = function() {}

Because JSX is JavaScript, we can’t use JavaScript-reserved words. This includes words like class and for.

React gives us the attribute className. We use it in HelloWorld to set the large class of our h1 tag. There are a few other attributes, such as for attribute on a label that React translates into htmlFor as for is also a reserved word. We’ll look at them when we start using them.

If we want to write pure JavaDcript instead of relying on a JSX compiler, we can just write React.createElement( ) function and not worry about the layer of abstraction. But we like JSX. It’s especially more readable with complex components. Consider the following JSX:

<div>
    <img src='profile.png' alt='Profile photo' />
    <h1>Welcome back Tobi</h1>
</div>

The JavaScript delivered to the browser will look like this:

React.createElement("div", null
    React.createElement("img", {src: "profile.png", alt: "Profile 
        photo"})
    React.createElement("h1", null, "Welcome back Tobi")
);

Again, while you can skip JSX and write the latter directly, the JSX syntax is well-suited for representing nested HTML elements.

Jsx/es5/es6

How JSX,ES5, and ES6 work