javascript - 运行 JSX 代码(ReactJS)需要 Babel transpile？

Question

我正在看我一年前写的一些代码，对于所有项目，我在运行 index.js 时遇到错误(在 Atom 中，使用“脚本”包)。我完全忘记了我当时是如何运行这些项目的，从那时起就没有做过任何编程(使用 React)。是否需要使用 babel 转译此代码才能运行任何 JSX 代码？

/src 中的 index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

package.json:

{
  "name": "jammming",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-scripts": "1.0.11"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

这是为什么，如何解决？

Answer 1

是的，因为 JSX 不是标准语法，它是 React.createElement 的语法糖.
您可以使用 babel-plugin-transform-react-jsx

在

var profile = <div>
  <img src="avatar.png" className="profile" />
  <h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>;

出去

var profile = React.createElement("div", null,
  React.createElement("img", { src: "avatar.png", className: "profile" }),
  React.createElement("h3", null, [user.firstName, user.lastName].join(" "))
);