如果没有构建系统，React 应用程序可以在不同的 JS 文件中包含组件吗？

Question

React 示例使用 gulp、Grunt 或 npm 以及 Browserify 或 Webpack。在下面的代码中，我有一个没有这些的 React 应用程序，我只是想知道这最后一步是否可行。

一个包含 React、babel-browser 和一个 JavaScript 文件的 HTML 页面：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
  <script src="https://unpkg.com/react@0.14.0/dist/react.min.js"></script>
  <script src="https://unpkg.com/react-dom@0.14.0/dist/react-dom.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser.min.js"></script>
  <script type="text/babel" src="js/App.js"></script>
</body>
</html>

这里是App.js

'use strict';
var {
  Component
} = React;
class Hdr extends Component {
  render() {
    return (<header className="container">Header</header>);
  }
};

class App extends Component {
  render() {
    return (
      <main>
        <Hdr />
      </main>
    );
  }
};
ReactDOM.render(<App />, document.body);

App 组件拉入 Hdr 组件。问题是：如何将 Hdr 放在单独的 JS 文件中？我试过了，App 找不到 Hdr.

Here is a working demo.

Answer 1

http://plnkr.co/edit/Pw75IIuonyz9UlBhvWo5?p=preview

你只需要做

window.Hdr = Hdr

它会起作用。

编辑： 根据 Joshua 的评论

window.__MyApp__ = {
   // a lot of app props
}
window.__MyApp__.Hdr = Hdr

Answer 2

您可以像任何其他脚本一样在应用程序中加载您的 js 文件。但我建议你使用 requirejs 它会更干净。

如果没有构建系统，React 应用程序可以在不同的 JS 文件中包含组件吗？

Can a React app have components in different JS files without a build system?

reactjs

babeljs