React 官网例子 v16.13.1

不使用JSX

使用 React 的时候也可以不使用 JSX 语法。尝试使用 Babel REPL，了解 JSX 被编译成原生 JavaScript 代码的步骤。

class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

ReactDOM.render(React.createElement(HelloMessage, { name: "Taylor" }), document.getElementById('hello-example'));

Babel 比较

const element = <h1>Hello, world!</h1>;
const container = document.getElementById(
  'root'
);
ReactDOM.render(element, container);

const element = /*#__PURE__*/React.createElement("h1", null, "Hello, world!");
const container = document.getElementById('root');
ReactDOM.render(element, container);

使用JSX

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
);