使用如何反應沒有網絡包，節點，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等

回答

相關問題