React components and module exports

Question

I don't understand how module.exports can only export one component that has a dependency on a subcomponent but still be rendered in the DOM although that sub component was never exported.

//component.js

var SubComponent = React.createClass({
...
    });

var Component = React.createClass({
    ...
    render: function () { 
    return(
        <div><SubComponent /> stuff</div>`)
        }});

module.exports = Component

//main.js

    var Component = require('./component.js');

    var MainContainer = React.createClass({
    render: function () {return (
    <Component />)
    }})

Answer 1

You are using only one component directly (Component) in your main.js file. SubComponent is not used outside component.js, therefore it doesn't have to be exported. If you want to use SubComponent in your main.js file you could use it like this:

//component.js

(...)
module.exports = {
    Component: Component,
    SubComponent: SubComponent
}

//main.js

 var Component = require('./component.js').Component;
 var SubComponent = require('./component.js').SubComponent; (...)

Then you can use SubComponent directly in main.js