使用如何反应没有网络包，节点，NOM等

我试图使用反应，而不必的WebPack，节点等我想结构，单独的文件中的每个组件，这是我在做什么：使用如何反应没有网络包，节点，NOM等

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/[email protected]/dist/react.min.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script> 
    <script src="https://unpkg.com/[email protected]/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> 
     ); 
     } 
    }

简体leButton.js

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

但请给我这个错误控制台：

Uncaught ReferenceError: require is not defined

我认为是由import造成的，怎么也可以使用这种结构没有节点或网络包？

来源

2017-02-21 Piero

您需要transpile'jsx'到'js'浏览器之前，可以把它理解。 –

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

如果你不想使用transpiler你应该使用require代替import和React.createClass({ ... })，而不是class。

的require代替import一个例子：

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

来源

2017-02-21 19:48:39

我们有2017年 - 现在是ES6的时间，课程和延伸关键字... –

你能举一个例子吗？ – Piero

@Piero增加了一个例子;） –

使用如何反应没有网络包，节点，NOM等

回答

相关问题