如何将单独文件中的组件链接在一起以做出反应

Question

Say within my app.jsx file I'm calling:

var Main = require('./components/main.jsx'); 
 ReactDOM.render(
        <Main />, document.getElementById('container')

        );

Inside my main.jsx file I want to call two react classes from different files:

    var comp1 = require('./comp1.jsx')
    var comp2 = require('./comp2.jsx')
    const MyMainComponent = React.createClass({
    return(
       <comp1></comp1>
       <comp2></comp2>
    );
    });
    module.exports = MyMainComponent;

Inside my comp1 file I have a simple button and dialog:

var comp1 = React.createClass({
return(
<RaisedButton label="comp1" primary={true} onTouchTap={this._handleTouchTap} />
<dialog name = "test"></dialog>
_handleTouchTap: function(){
test.show()
};);

And inside my comp2 file I have the exact same code as comp1.jsx except I rename the buttons. Essentially when the document loads main.jsx I want the two components (comp1 and comp2) to load right next to each other. I made up the code above so I'm not sure if general principles or syntax are correct, but I am asking at a very high level on how to achieve the goal I described above. Thank you

Answer 1

I think what you are looking for is Asynchronous Module Definition (AMD). You can implement that using requirejs.

First you have to configure it, you can do so in an app.js file or whatever you want :

require.config({
  paths: {
    react: 'vendor/react',
    reactDOM: 'vendor/react-dom',
    JSXTransformer: 'vendor/JSXTransformer'
  }
});

require(['reactDOM', 'jsx!main'], function(ReactDOM, Main) {
    ReactDOM.render(<Main />, document.getElementById('container'));
});

After loading the library, you can define your modules like this :

comp1.jsx (or whatever other module)

define(['react'], function(React) {
    var Comp1 = React.createClass({
        render: function() {
            return (

            )
        }
    });

    return Comp1;
});

main.jsx

define(['jsx!comp1', 'jsx!comp2'], function(Comp1, Comp2) {
    var Main = React.createClass({
        render: function() {
            return (
               <section>
                   <Comp1 />
                   <Comp2 />
               </section>
            );
        }
    });

    return Main;
});

And finally, in your HTML files :

<script data-main="js/app" src="js/vendor/require.js"></script>

It could seem complicated if you are beginner, but it's worthwhile when working with large projects, so better make it a habit.

I also urge you to pick up some books about programming. try Javascript The good parts, and The pragmatic programmer