添加对网站的反应后如何导入课程

时间:2019-02-26 21:44:12

标签: reactjs webpack babeljs

我跟随this document向我的php / JS项目添加了反应。

这是应该添加react应用的地方。

<div id="messages"></div>
<div id="root"></div>

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>



<script src="../common/scripts/jquery.mask.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
<script type="text/babel" src="../js/missions/app.js"></script>

这是示例代码,可以正常工作:

'use strict';
const e = React.createElement;

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked comment number ';
    }

    return (
        <button onClick={() => this.setState({ liked: true })}>
          Like
        </button>
      );
  }
}

const domContainer = document.querySelector('#root');
ReactDOM.render(e(App), domContainer);

但是问题是,我必须将所有类添加到同一文件中,因为如果尝试导入其他类,则会出现require is not defined错误。

我知道使用捆绑包并编译React代码可以解决此问题,但是我想知道是否还有另一种解决方案。

如果在窗口对象上附加了类,我读过某处,没有必要import,但找不到相关文档,如果您对此有任何想法,将不胜感激。

最佳

0 个答案:

没有答案