Question

我正在尝试使用基于组件的方法在react.js中编写一个简单的Hello world应用程序。所以我使用的是requie.js。我在同一文件夹中有4个文件，即index.html, index.js,world.js and require.js。我在index.html中有一个脚本标记，它将加载index.js。但是我使用module.exports通过require.js加载world.js，这会导致错误。这是我的代码
index.html

<head>
<script src="https://fb.me/react-0.13.3.js"></script>
<!-- In-browser JSX transformer, remove when pre-compiling JSX. -->
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script data-main="index.js" src="require.js"></script>

</script>


</head>

<body>

  <script type="text/jsx" src="index.js"></script>
</body>

index.js

var world = require('./world');

var Hello = React.createClass({
  render:function(){
    return (<div>
        <div>Hello,</div>
        <world/>
      </div>)

  }

})

var element = React.createElement(Hello);

React.render(element,document.body);

world.js

module.exports = React.createClass({
  render: function(){
    return (<div>World!</div)
  }

})

我打算展示Hello, World。但我收到以下错误

Uncaught SyntaxError: Unexpected token <
fbcdn-dragon-a.akamaihd.net/hphotos-ak-xtf1/t39.3284-6/11057100_835863049837306_1087123501_n.js:314 You are using the in-browser JSX transformer. Be sure to precompile your JSX for production - http://facebook.github.io/react/docs/tooling-integration.html#jsx
require.js:8 Uncaught Error: Module name "world" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded
:8000/index.js:5 Uncaught SyntaxError: Unexpected token <

Answer 1

首先，组件＆＃34; world＆＃34;应该以大写字母开头。我继续将代码放在一个文件中，以便您可以更清楚地看到它：

    <!DOCTYPE html>
<html>

<head>

    <title>Hello React!</title>
    <script src="https://fb.me/react-0.13.3.js"></script>
    <!-- In-browser JSX transformer, remove when pre-compiling JSX. -->
    <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx">
    var World = React.createClass({
      render: function(){
        return (
        <div>World!</div>
        );
      }

    });

    var Hello = React.createClass({
      render:function(){
        return (
        <div>
            <div>Hello,
            <World />
            </div>
        </div>
        );

      }

    });

    React.render(<Hello />,document.getElementById('example'));
    </script>
  </body>
</html>

我建议您使用node和npm安装适当的开发环境。我在github上有一个项目，你可以用它来启动和运行，而不必担心它现在如何工作：reactjs skeleton。

我希望这有帮助！

Answer 2

这里至少有三个问题。首先，您没有使用正确的require语法进行异步加载。你的index.js应该是：

define(['world'], function(world) {

    var Hello = React.createClass({
        render:function(){
            return (<div>
                    <div>Hello,</div>
                    <world/>
                    </div>)

        }

    })

    var element = React.createElement(Hello);

    React.render(element,document.body);
});

其次，由于index.js和world.js是jsx文件，requirejs需要一个能告诉它的插件。类似的东西：

https://github.com/philix/jsx-requirejs-plugin

最后，由于您是通过requirejs加载index.js，因此您不需要：

<script type="text/jsx" src="index.js"></script>

需要模块给出模块未加载错误

2 个答案: