Reactjs 为什么要在React JS中组合这些文件才能找到对象？

我在React JS中有以下基本设置：

index.html（删除样板文件）：

然后一切呈现

为什么必须合并两个文件的内容才能找到第一个文件中描述的变量，或者为了阻止正确加载，我做错了什么

---

最后一点注意：一个单独的例子，与上面类似，但是有一个额外的文件，其中也包含它自己的

React.render（）

调用并附加到DOM中的一个单独元素，将从两个不同的文件加载。

您好，我能问一下为什么您不使用类似browserify或webpack的东西来捆绑js文件吗？这将允许您像现在一样分离js文件并加载单个bundle.js文件…我不知道您为什么会遇到上述问题，但我知道模块化方法可以解决此问题…）@deook这是我第一次在在线沙盒之外构建，所以我想简化，这就是我构建购物车的原因（因为我以前建过几个）当我试图学习状态、道具等时，我不想让自己陷入构建相关的问题。PS如果答案是使用一个构建系统，那很好，我现在很高兴使用一个文件进行学习，我只是好奇！我认为事情会出问题，因为无法保证文件下载的完成。因此出现错误是因为se您的

React.render（）

函数在之后立即运行（甚至可能在运行期间运行）下载.js附件。如果浏览器没有完全下载另一个js文件，则会出现错误。最好执行

文档。onload

或类似操作，以确保仅在下载所有脚本文件后才调用渲染函数。@wintvelt-听起来不错，但我没有尝试过然而-哈哈，太过简单了，这里是关于React和错过JS问题的让我们挠头的地方

...

<script type='text/babel' src='src/allcartitems.js'></script>
<script type='text/babel' src='src/basket.js'></script>

...

<div id='react-basket'></div>

var AllCartItems = React.createClass({
  render: function() {
    return (
      <section className='all-cart-items'>
        <h1 className='all-cart-items__heading'>Cart Items</h1>
      </section>
    );
  }
});

var Basket = React.createClass({
  render: function() {
    return (
      <main className='basket'>
        <AllCartItems className='basket__items' />
      </main>
    );
  }
});
React.render(
  <Basket />,
  document.getElementById('react-basket')
);

var AllCartItems = React.createClass({
  ...
});
var Basket = React.createClass({
  ...
});
React.render(
  <Basket />,
  document.getElementById('react-basket')
);