原文链接：https://www.newline.co/fullstack-react/30-days-of-react/day-2/
JSX/ES5/ES6 是什么？
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:
- We have to transpile our code so that a wider range of browsers understand our JavaScript. This means converting ES6 JavaScript into ES5 JavaScript.
- We have to include a shim or polyfill that provides additional functionality added in ES6 that a browser may or may not have.
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.
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.
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 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 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 HelloWorld component, the HTML that React writes to the DOM will look like this:
<h1 class='large'>Hello World</h1> The
class extendssyntax we used in our first React component is ES6 syntax. It allows us to write objects using a familiar Object-Oriented style. In ES5, theclasssyntax 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 on our h1 tag.
There are a few other attributes, such as the for attribute on a label that React translates into htmlFor as for is also a reserved word.
If we want to write pure JavaScript instead of rely on a JSX compiler, we can just write the 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.jpg" alt="Profile photo" /> <h1>Welcome back Ari</h1> </div> The JavaScript delivered to the browser will look like this:
React.createElement("div", null, React.createElement("img", {src: "profile.jpg", alt: "Profile photo"}), React.createElement("h1", null, "Welcome back Ari") ); Again, while you can skip JSX and write the latter directly, the JSX syntax is well-suited for representing nested HTML elements.