React: JSX to javascript

JSX allows you to write htML-like tags by declaring an HTML tag and then returning an object identified in React as follows:

Babel before

<div id="div" className="div" key="div">
  <div>
    <span>2</span>
  </div>
  <span>1</span>
  <span>1</span>
</div>Copy the code

After the transformation

"use strict";

React.createElement("div", {
    id: "div",
    className: "div",
    key: "div"
  }, 
  React.createElement("div", null, React.createElement("span", null, "2")), 
  React.createElement("span", null, "1"), React.createElement("span", null, "1"));Copy the code

Component transformation

function Comp() {
	return <div>111</div>
}

<Comp id="div" className="div" key="div">
  <span>222</span>
  <span>222</span>
</Comp>

-----------------------------------------------------------------------------------

function comp() {
	return <div>111</div>
}

<comp id="div" className="div" key="div">
  <span>222</span>
  <span>222</span>
</comp>
Copy the code

After the transformation

"use strict";

function Comp() {
  return React.createElement("div", null, "111");
}

React.createElement(Comp, {
    id: "div",
    className: "div",
    key: "div"
  }, 
  React.createElement("span", null, "222"), 
  React.createElement("span", null, "222")); -----------------------------------------------------------------------------------"use strict";

function comp() {
  return React.createElement("div", null, "111");
}

React.createElement('comp', {
    id: "div",
    className: "div",
    key: "div"
  }, 
  React.createElement("span", null, "222"), 
  React.createElement("span", null, "222"));Copy the code

Note: We can see from the example above that this is why we require uppercase for our component, because lowercase will be treated as a label, converted to a string, and then an error will be reported if there is no label.