ReactJS 无法识别的令牌导入

Question

我目前正在尝试学习使用 ReactJS，但我遇到了一个问题，我似乎无法找到正确的方法来解决它。

我已经安装了 npm 并在我的项目的根目录中运行 npm --install react 和 npm --install react-dom。该项目是 HTML/Javascript 发布到 PHP 后端，我没有使用 NodeJS，这似乎在我一直在看的东西中出现了很多，但据我了解，Node 不是必需的。

我有以下js文件

import * as ReactDOM from "react-dom";
import * as React from "react";
$(document).ready(function(){

    postToMiddleware(null, "account-manager.php", "testReact", function(result){
        alert(JSON.stringify(result));

        ReactDOM.render("<Names />", document.getElementById("names"));
    })
});

class Names extends React.Component {
    render() {
        return (
            <p>Hello here is my react component</p>
        );
    };
}

我的 HTML 页面包含上面的 javascript 文件，但随后在 chrome 控制台中出现错误：

Uncaught SyntaxError: Unexpected token import

它抱怨的那一行是第一行：

import * as ReactDOM from "react-dom";

如果它有任何区别 - 我假设没有，我在 Wamp 下运行的 Windows 上，尽管当它上线时，它将在运行 Apache 的 Linux 机器上。

更新 此后，我找到了导入的替代方法，并将两个导入行更改如下：

var ReactDOM = require("/node_modules/react-dom/");变种反应 = 要求("/node_modules/react");

但现在在 Chrome 中我得到：

Uncaught SyntaxError: Unexpected token <

在渲染返回中抱怨<p>Hello here is my react component</p>这一行

Answer 1

您需要 babel 来转译诸如 import 语句之类的功能以及现代浏览器中尚不可用的其他 es6 功能。如果您是新手，请考虑使用 create-react-app-boilerplate，它会为您处理所有这些以及更多。