What on earth is JSX/ES5/ES6 ????
2 min readApr 25, 2021
- 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.