如何在没有web pack,node,nom等的情况下使用React

时间:2017-02-21 19:44:35

标签: javascript reactjs

我试图在没有webpack,节点等的情况下使用React。 我希望将每个组件的结构放在单独的文件中,这就是我正在做的事情:

的index.html

<html>
<body>
    <div id="root">
      <!-- This div's content will be managed by React. -->
    </div>

    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel" src="js/demandAnalysis/app.js"></script>
    <script type="text/babel">
      ReactDOM.render(<App />, document.getElementById('root'));
    </script>
</body>
</html>

App.js

import SimpleButton from './componets/Buttons/SimpleButton.js';

    class App extends React.Component {
      render() {
        return (
          <div>
            <Button/>
          </div>
        );
      }
    }

SimpleButton.js

class SimpleButton extends React.Component {
   render() {
      return (
         <div>
            <button type="button">Click me!</button>
         </div>
      );
   }
}

但是在控制台中给我这个错误:

Uncaught ReferenceError: require is not defined

我认为是由import引起的,如果没有节点或网络包也可以使用这种结构?

1 个答案:

答案 0 :(得分:2)

import是ES6功能,目前许多浏览器都不支持此功能。这就是为什么babel用于将代码转换为ES5的原因。对于您正在使用的classextends和JSX也是如此。

如果您不想使用转录程序,则应使用require代替importReact.createClass({ ... })代替class

require而不是import的示例:

var SimpleButton = require('./componets/Buttons/SimpleButton.js');