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

//ponent.js

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

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

module.exports = Component

//main.js

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

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

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

//ponent.js

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

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

module.exports = Component

//main.js

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

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

• javascript
• reactjs
• module

1 Answer 1

You are using only one ponent directly (Component) in your main.js file. SubComponent is not used outside ponent.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:

//ponent.js

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

//main.js

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

Then you can use SubComponent directly in main.js