title: reactjs communicating between multiple file
body: <p>I am new to reactjs and trying to understand architecting a reactjs application. I have created two different js files with react code ( <code>spc.js</code> and <code>index.js</code>) The <code>spc.js</code> file contains all the reusable component definitions while the <code>index.js</code> consists of the calling component and the <code>reactDom</code> function. Both this files are called from an index.html file. please find the code below.</p>
  
  <p>Index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Investor Relations&lt;/title&gt;
      &lt;!-- Not present in the tutorial. Just for basic styling. --&gt;
      &lt;link rel="stylesheet" href="spc.css" /&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="spticker_content"&gt;
      &lt;/div&gt;
      &lt;script type="text/babel" src="sharepriceticker.js"&gt;&lt;/script&gt;
      &lt;script type="text/babel" src="../default/sharepriceticker/sharepriceticker.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>spc.js</p>
  
  <pre><code>   var Companyname = React.createClass({
       render: function() {
         return ( &lt; div className = "company_name" &gt; {
           this.props.compname
         } &lt; /div&gt;            );
       }
     });
  
     var Exchange = React.createClass({
       render: function() {
         return ( &lt; span className = "exch_text" &gt; {
           this.props.exchange
         } &lt; /span&gt;);
       }
     });
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>var Sharepriceticker = React.createClass({
    render:function(){
      return(
          &lt;div className="spticker"&gt;
              &lt;div className="heading"&gt;
                  &lt;Companyname compname="Indus Gas"/&gt;
                  &lt;Exchange exchange="(LON:INDI)"/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );   
    }
  });
  
  ReactDOM.render(
      &lt;Sharepriceticker/&gt;,
      document.getElementById('spticker_content')
  );
  </code></pre>
  
  <p>My code works fine if i combine the spc.js and index.js in single file, however it doesnt work if i seperate the two files</p>
  
  <p>Thanks</p>