javascript - ReactJS 无法识别的 token 导入

Question

我目前正在尝试学习使用 ReactJS，但我遇到了一个问题，而且我似乎找不到合适的方法来修复它。

我已经安装了 npm 并运行了 npm --install react和 npm --install react-dom在我的项目的根目录中。该项目是发布到 PHP 后端的 HTML/Javascript，我没有使用 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/"); var React = require("/node_modules/react");

但现在在 Chrome 中我得到:

Uncaught SyntaxError: Unexpected token <

提示 <p>Hello here is my react component</p> 行在渲染返回中

Answer 1

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