React in RequireJS ? about react

[petehunt]

We run React+RequireJS on Instagram.

Check out the repo and run grunt. Then under build/ you'll have a bunch of CommonJS modules that RequireJS can use via its r.js tool.

Does that answer your question?

[zpao]

What @petehunt said should work, though it exposes more than you need and might lead to information overload (just look at React.js if you do this! this is what gets exposed by the shipping file).

I was hoping the UMD wrapper we have around react.js would just work if you decided to require('React'); (or maybe it's require('react'); If neither of those work then we should definitely try to make this work out of the box without having to do a custom build.

[alvaromuir]

Thanks guys. A single 'React' would be sweet imho.

On Thu, May 30, 2013 at 4:58 PM, Paul O’Shannessy
[email protected]:

What @petehunt https://github.com/petehunt said should work, though it
exposes more than you need and might lead to information overload (just
look at React.js if you do this! this is what gets exposed by the shipping
file).

I was hoping the UMD wrapper we have around react.js would just work if
you decided to require('React'); (or maybe it's require('react'); If
neither of those work then we should definitely try to make this work out
of the box without having to do a custom build.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/28#issuecomment-18707918
.

[jriecken]

I think the issue is probably that the shipped react.js defines an anonymous module rather than one with the id of 'react'.

Unless the file is loaded asynchronously (or merged together with other files using the r.js optimizer), a "Mismatched anonymous define()" error will be thrown. This means that currently the react.js file cannot be loaded via a normal <script> block in an AMD environment.

For example, jQuery does this to define itself as an AMD module:

// Register as a named AMD module, since jQuery can be concatenated with other
// files that may use define, but not via a proper concatenation script that
// understands anonymous AMD modules. A named AMD is safest and most robust
// way to register. Lowercase jquery is used because AMD module names are
// derived from file names, and jQuery is normally delivered in a lowercase
// file name. Do this after creating the global so that if an AMD module wants
// to call noConflict to hide this version of jQuery, it will work.
if ( typeof define === "function" && define.amd ) {
  define( "jquery", [], function () { return jQuery; } );
}

from react.

[zpao]

Lets reopen this then until we ship something that works with require.

We're using browserify with the standalone option (which wraps with UMD) to build a mostly compatible module. I'd like to keep the process as simple as possible so we might want to try to fix this in one of those tools.

[benjamn]

@zpao you mean we should modify browserify so that it generates something that works as an AMD module?

RequireJS does have the ability to load modules on demand, which is a different sort of philosophy from the monolithic package that browserify produces. Both approaches can be worthwhile, and it should be easy to support both. We've just implicitly preferred the monolithic package approach so far.

[zpao]

you mean we should modify browserify so that it generates something that works as an AMD module?

Yea. If what @jriecken said is right, then we can maybe get UMD changed (https://github.com/ForbesLindesay/umd/blob/master/template.js#L12 is what gets used by browserify and it very much does not provide a name to define).

Again, I'm not super familiar with RequireJS so maybe we need more. react.js is already React with all the dependencies so I don't think we need to ship a bundle of modules and can stick with the single file so long as it actually works

[felipecrv]

Check https://github.com/philix/jsx-requirejs-plugin

[alex-zhang]

i pack the react.js jquery.js redux.js and so on as vender-bundle.js. but the react.js is a anonymous module in AMD define.