jquery - Communicate between two components reactjs -

i making web application intend make modular possible using reactjs.

the application consists of menu , associated shopping cart, keeps track of items put cart menu.

my code is:

react.render(                 <div classname="row">                 <div classname="col-md-7">                     <mainmenu />                 </div>                 <div classname="col-md-4">                 <cartview />                 </div>                 </div>    , mountpoint     ); 

as visible, there no hierarchical relationship between these 2 components, can't communicate passing props.

i read on official react documentation:

for communication between 2 components don't have parent-child relationship, can set own global event system. subscribe events in componentdidmount(), unsubscribe in componentwillunmount(), , call setstate() when receive event. flux pattern 1 of possible ways arrange this

however, not want use flux in application.

so, question is:

is there way of setting message passing system between components without using flux?

p.s: know jquery. having trouble understanding todo example given on flux website wondering if there alternative way of doing this.

thanks.

yeah can without flux. consider flux because it's awesome.

but if don't want use it, why not make them have hierarchical relationship?

the way you'll create new root level component mount, has <mainmenu /> , <cartview /> components children. provide callbacks events on these child components parent can bind to change it's state, affects props passed.

an example of using code base:

var root = react.createclass({      getinitialstate: function() {         return {             itemid: 1         }     },      mainmenuchangehandler: function(itemid) {         if (itemid !== this.state.itemid) {             this.setstate({                 itemid: number(itemid)             })         }     },        render: function() {         return (             <div classname="row">                 <div classname="col-md-7">                     <mainmenu onchange={this.mainmenuchangehandler} />                 </div>                 <div classname="col-md-4">                     <cartview itemid={this.state.itemid}  />                 </div>             </div>         )     } });  var mainmenu = react.createclass({     proptypes: {         onchange: react.proptypes.func.isrequired     },     clickhandler: function(e) {         e.preventdefault();         this.props.onchange(e.target.href);     },     render: function() {         return (             <div>                 <a href="1" onclick={this.clickhandler}>item 1</a>                 <a href="2" onclick={this.clickhandler}>item 2</a>             </div>         );     } });  var cartview = react.createclass({     proptypes: {         itemid: react.proptypes.number.isrequired     },     render: function() {          var item;         if (this.props.itemid === 1) {             item = (                 <div>this item 1 being shown</div>             );         } else if (this.props.itemid === 2) {             item = (                 <div>this item 2 being shown</div>             );         }          return (             <div>{item}</div>         );     } });  react.render(<root />, mountpoint);