需要模块会导致模块未加载错误

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

这里至少存在三个问题。首先，您没有使用正确的 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>

Answer 2

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

    <!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.

希望对您有所帮助！

需要模块会导致模块未加载错误

Requiring modules gives module not loaded error

requirejs

reactjs