Question

我尝试检查在React.js上运行HelloWorld的简单示例所需的所有库/包，但没有成功。

var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);

错误如下：

/Users/Silvio/WebstormProjects/untitled/main.js:5
    <h1>Hello, world!</h1>,
    ^

SyntaxError: Unexpected token <

我安装了babel和ReactDOM。

Answer 1

在.babelrc文件中，您需要指定以下内容

  { 
    "presets": ["react", "stage-0", "es2015"] 
  }

此外，您需要安装上述预设，如

npm install -S babel-preset-react babel-preset-stage-0 babel-preset-es2015

除此之外，webpack.config.js必须如下所示才能为.js或.jsx文件扩展名启用babel

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './main.js',
  output: { path: __dirname, filename: 'bundle.js' },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,

      }
    ]
  },
};

您可以参考 here 和 here 了解更多详情

Answer 2

你需要先通过babel运行它 - 启用react和stage-0预设。

我们在此处为示例代码执行此操作：

https://github.com/flexicious/react-redux-datagrid

Answer 3

代码本身是正确的，但您可能没有正确运行它，因为它意味着要在浏览器中运行，而不是在Node.js中运行。如果require用于导入依赖项，则main.js必须首先由webpack之类的文件夹处理，然后才能使用。

以下代码段与您发布的代码基本相同，但依赖项（React和ReactDOM）是通过script代码导入的。

ReactDOM.render(<h1>Hello, world</h1>, document.getElementById("example"))

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello, world</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
  </head>
  <body>
    <div id="example"></div>
  </body>
</html>

这里解释JSX（<h1>Hello, world</h1>）的Babel由片段编辑器提供。 This minimal example将Babel作为依赖项导入，并在运行时转换JSX部分。

HelloWorld示例在React

3 个答案: