score:6

Accepted answer

yeah, you'd be better off following the example and requiring test from a .jsx file rather than inlining it in the html.

otherwise, test needs to be exported as a global, so you'd need to follow similar conventions to the browserify --standalone flag, which looks to be something like this:

output: {
    library: "test",
    librarytarget: "umd"
}

http://webpack.github.io/docs/webpack-for-browserify-users.html#standalone

edit: after looking at your gh repo, you have:

<script src="bundle.js" type="text/js"></script>

instead of

<script src="bundle.js" type="text/javascript"></script>

so it wasn't loading bundle at all. further, you can't have 2 separate copies of react, the way you have it currently you're requiring react from within webpack, and then you're also loading it on the page. you should either export a function which takes the react object, or use the global to be able to use it outside of the bundle.

for example this would work:

/** @jsx react.dom */
module.exports = function(react) {

var test = react.createclass({
    render: function(){
        return <h1>hi!!</h1>
    }
});

return test;
};

and then:

    /** @jsx react.dom */
    react.rendercomponent(
      test(react)(),
      document.getelementbyid('hi')
    );

or this

/** @jsx react.dom */
var test = react.createclass({
    render: function(){
        return <h1>hi!!</h1>
    }
});

module.exports = test;

and then:

    /** @jsx react.dom */
    react.rendercomponent(
      <test />,
      document.getelementbyid('hi')
    );

though i can't imagine most folks consuming a react package are going to be loading it with a script tag, and you generally don't want globals, so it's probably best to just use the commonjs style require and let people figure out shimming or whatever.


Related Query

More Query from same tag