What on earth is JSX/ES5/ES6 ????

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

What is ES5 ?

• 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.

What is ES6 ?

• 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.
• 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.

What is JSX?

• 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.

Although in previous paradigms it was viewed as a bad habit to include JavaScript and markup in the same place, it turns out that combining the view with the functionality makes reasoning about the view straight-forward

• To see what this means, imagine we had a React component that renders an 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>;      
           }
    }

• The render function in the component looks like it’s returning HTML, but this is actually JSX. The JSX is translated to regular JavaScript at runtime
• While JSX looks like HTML, it is actually just a terser way to write a React.creactElement() declaration.
• When a component renders, it outputs a tree of React elements or a virtual representation of the HTML elements this component outputs.
• React will then determine what changes to make to the actual DOM based on this React element representation.
• In the case of the component Hello World in the example , the HTML that React writes to the DOM will look

<h1 class='large> hello World </h1>

One more thing to remember,

• Because JSX is JavaScript, we can’t use JavaScript reserved words. This includes words like

— class. — React Gives className for this

— for — React gives htmlFor for this.

Hope this helped you undertand what JSX is :) .