javascript - Using requirejs to load React Components with a parent/child relationship -

i working on highly pluggable ui using react/flux, , loading modules requirejs.

i couldn't around problem, due poor knowledge of requirejs. there layer of indirection, root of problem this:

i have react component in module following render function:

render: function() {  <div>     <component b /> </div> } 

and component b, in separate module simple like:

render: function() {      <div> text </div> } 

in top-level module dive requirejs, can componenta this:

require(['componenta'], function(componenta) {     react.render(react.createelement(componenta,document.getelementbyid('main'));  }); 

this works great, until try , use componentb in render function of componenta...componenta naturally has no idea componentb is, i'm not sure of right approach or how require componentb before componenta tries render.

note: i'm converting jsx plain js beforehand, shouldn't factor.

any tips?

it sounds modules not definitions - http://requirejs.org/docs/api.html#defdep

using definitions, componenta can absolutely reference componentb, simplest example this:

componenta - has dependencies - http://requirejs.org/docs/api.html#defdep

define(['path/to/componentb'], function (componentb) {     return react.createclass( {         render: function () {             <div>                 <componentb />             </div>         }     }); }); 

componentb - no dependencies - http://requirejs.org/docs/api.html#deffunc

define(function () {     return react.createclass( {         render: function () {             <div>                 text             </div>         }     }); }); 

you can render componenta in top-level mentioned in question, , componenta contain componentb