使用Webpack组装的React组件，我在哪里调用React.render？

Question

我一直在关注React＆amp;在React网站上的另一个教程中，我进一步将每个组件拆分为它自己的文件，然后我使用Webpack进行汇编。

我的问题是，如果我加载webpacked javascript，我在哪里调用React.render？

Answer 1

要求您的顶级组件来自另一个模块（或创建一个模块，该模块定义了一个负责使用其他组件的组件 - 拥有App组件或类似组件的常见组件这个）并在那里呈现，例如使用Thinking With React中的一个组件：

var FilterableProductTable = require('./FilterableProductTable');

var PRODUCTS = [
  {category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
  {category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
  {category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
  {category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
  {category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
  {category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
];

React.render(<FilterableProductTable products={PRODUCTS} />, document.body);

将您的webpack配置指向此模块作为应用的入口点，例如如果您将上述代码放在src/app.js：

中

module.exports = {
  entry: {
    app: './src/app'
  }
  // ...
}