How to use react components from other files

I have a simple reactJS component like this : ``` var LikeCon = React.createClass({ render: function() { return ( <span>Like</span> ); } }); ``` This is placed in a file called Common.jsx. Im trying to use this LinkeCon component from antoher jsx file like this ``` var FeedTopic = React.createClass({ render: function() { var test = false; return ( <div className="topic"> {LikeCon} </div> ); } }); ``` The problem is that this exception is thrown Error while rendering "FeedBox" to "react1": ReferenceError: LikeCon is not defined This is how the import looks like on the Layoutpage ``` <script src="@Url.Content("~/Scripts/Common.jsx")"></script> <script src="@Url.Content("~/Scripts/Grid.jsx")"></script> <script src="@Url.Content("~/Scripts/Feed.jsx")"></script> ``` My thought was that if Common.jsx that contains the shared component was first, then the var would also be available to the other react components? Edit : this is placed on the Layout.cshtml ``` <script type="text/jsx" src="@Url.Content("~/Scripts/JSXTransformer.js")"></script> <script type="text/jsx" src="@Url.Content("~/Scripts/Common.jsx")"></script> <script type="text/jsx" src="@Url.Content("~/Scripts/Grid.jsx")"></script> <script type="text/jsx" src="@Url.Content("~/Scripts/Feed.jsx")"></script> ``` The component is now refered to with `<LikeCon like="0" />` instead of `{LikeCon}`. Edit 2 : This is how I use the LikeCon ``` var TopicComments = React.createClass({ render: function() { var comment = this.props.data.map(function(com, i) { return ( <article key={i}> <div className="commentCon"> <div className="tUImgLnk"> <a title={com.UserName} target="_blank" href={com.UserInfoUrl}> <img className="tUImg" src={com.UserPicSrc} /> </a> </div> <b><a href="#" title={"Visit " + com.UserName} target="_blank">{com.UserName}</a></b>&nbsp;:&nbsp; <span className="content"> {com.Message} </span> <div className="status"> <div className="dateCreated dimText"> {com.DateCreated} </div> <LikeCon initialLike={com.Like} initialLikeCount={com.LikeCount} objectId={com.Id} categoryKey={1} userId={this.props.userId} /> <article></article> </div> </div> </article>); }.bind(this)); return( <div className="comments"> {comment} </div> ); } }); ``` This is how the script import looks like ``` <script src="http://fb.me/react-0.12.2.js"></script> <script src="@Url.Content("~/Scripts/jquery-2.1.3.min.js")"></script> <script src="@Url.Content("~/Scripts/jquery.autosize.min.js")"></script> <script src="@Url.Content("~/Scripts/spin.min.js")"></script> <script src="@Url.Content("~/Scripts/JSXTransformer.js")"></script> <script src="@Url.Content("~/Scripts/Grid.jsx")"></script> <script src="@Url.Content("~/Scripts/Feed.jsx")"></script> @RenderSection("ScriptFoot", required: false) @Html.ReactInitJavaScript() </body> ``` This is the exception I get : Error while rendering "FeedBox" to "react1": ReferenceError: LikeCon is not defined at React.createClass.render (Script Document [7]:83:33) -> React.createElement(LikeCon, {initialLike: this.props.data.Like, i at Script Document [2]:7021:34 at wrapper (Script Document [2]:12893:21) at Script Document [2]:6563:14 at wrapper (Script Document [2]:12893:21) at ReactMultiChild.Mixin.mountChildren (Script Document [2]:12352:42) at ReactDOMComponent.Mixin._createContentMarkup (Script Document [2]:7801:32) at Script Document [2]:7723:14 at wrapper (Script Document [2]:12893:21) at Script Document [2]:6569:44 at wrapper (Script Document [2]:12893:21) at Script Document [2]:6569:44 at wrapper (Script Document [2]:12893:21) at Script Document [2]:13797:38 at Mixin.perform (Script Document [2]:16855:20) at renderToString (Script Document [2]:13795:24) at Script Document [9] [temp]:1:7 Line: 7021 Column:34