title: Referencing components in separate .JSX file
body: <p>I'm am using some ReactJS components for my views in a .Net MVC application.</p>
  
  <p>Currently I have a single file containing all my components at: <code>/scripts/react-app/MyApp.jsx</code></p>
  
  <p>I'd like to split this into multiple files but when I move components into another file I get a run-time exception:</p>
  
  <pre><code>Uncaught ReferenceError: SomeComponent is not defined
  </code></pre>
  
  <p>How can I tell <code>MyApp.jsx</code> to reference another <code>.jsx</code> file?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I've tried bundling as suggested but I'm still getting the same error. Here's what I've done:</p>
  
  <p>Added the below to <code>BundleConfig.cs</code>:</p>
  
  <pre><code> bundles.Add(new JsxBundle("~/bundles/main").Include(
           "~/React/FileOne.jsx",
           "~/React/FileTwo.jsx",
           "~/React/FileThree.jsx"));
  </code></pre>
  
  <p>And in my <code>_Layout.cshtml</code> I've added: <code>@Scripts.Render("~/bundles/main")</code></p>
  
  <p>I'm trying to use a component defined in <code>FileThree.jsx</code> in <code>FileOne.jsx</code> but still getting the <code>component is not defined</code> error.</p>
  
  <p><strong>SECOND EDIT:</strong></p>
  
  <p>I changed to use Html helper in view and it started working for me:</p>
  
  <pre><code>@{
      ViewBag.Title = "Testing";
  }
  
  &lt;div id="someContent"&gt;
      @Html.React("FileOneComponent", new
          {
              prop1 = "a",
              prop2 = "b",
          })
  &lt;/div&gt;
  
  &lt;script src="https://unpkg.com/react@0.13.3/dist/react.js"&gt;&lt;/script&gt;
  @Scripts.Render("~/bundles/main")
  @Html.ReactInitJavaScript()
  </code></pre>