React-rails: How do you use/require other libraries

[scottbarrow]

In a typical vanilla React app using CommonJS you can
import SomeModule from 'some_file' or without var SomeModule = require('some_file')

Without using browserify, how do users of react-rails go about including other libraries in React classes?
I'm surprised this isn't documented, is no one using third party libraries in React classes with this gem?

[jakegavin]

In other issues, @rmosolgo has suggested adding the library to your vendored javascript files (including the version in the filename can help when it comes time to upgrade). Then you can require it in application.js after requiring React. This will expose the library as a global. This has worked well for us so far.

Would this kind of approach work for what you're doing? Example: https://github.com/reactjs/react-rails/issues/510#issuecomment-207790440

Seems like this issue is somewhat common so I agree it might be good to mention it in the read me.

[scottbarrow]

Thanks @jakegavin, however how do you use a package that isn't a single file such as https://github.com/andreypopp/autobind-decorator which may have npm dependencies of its own?
I'm fairly new to React, and I understand how this is done with React just not with the Rails asset pipeline

[joerodrig]

@scottbarrow I've seen a few solutions to this. The simplest solutions I've seen are adding the library to your vendor JS files or using rails-assets.org to convert the packages to gems for you. This is nice if you're using the version of React included in react-rails.

Recently, I've decided to use the npm version of React and am no longer using the one included with react-rails. This lets me use Gulp + Babelify + Browserify to compile all of my React components into a single, Sprockets compatible, JS file that gets loaded in by the asset pipeline. I personally like this approach because recompiling my React files now only takes a couple of hundred milliseconds on each save. I had also been running into issues where 3rd party libraries were causing a duplicate React version to be imported when I used the version included with react-rails. This solution fixed that.

One downside I've noticed to this approach is that I'm unable to get server-rendering with react-rails to work with these bundled components.

[rmosolgo]

Hi, I've written up a little bit about how I use Sprockets to manage JavaScript dependencies:

http://rmosolgo.github.io/blog/2016/05/19/how-i-use-sprockets/
http://rmosolgo.github.io/blog/2016/05/19/finding-a-browser-ready-file-for-sprockets/

Unfortunately, "autobind-decorator" defies these categories! That project _does_ compile to a single file (as seen on npmcdn), but that file is not usable in a browser because it depends on a global module object.

Of course, there are other good options for binding, such as React.createClass or binding during constructor!

I hope that helps a bit! You can also browse other issues here regarding non-Sprockets asset bundling. It's a bit "off the beaten track" with Rails but some folks have found nice solutions (like @joerodrig3 's solution above!).

[scottbarrow]

Awesome thanks robert

On May 19, 2016, 7:37 PM, at 7:37 PM, Robert Mosolgo [email protected] wrote:

Hi, I've written up a little bit about how I use Sprockets to manage
JavaScript dependencies:

http://rmosolgo.github.io/blog/2016/05/19/how-i-use-sprockets/
http://rmosolgo.github.io/blog/2016/05/19/finding-a-browser-ready-file-for-sprockets/

Unfortunately, "autobind-decorator" defies these categories! That
project _does_ compile to a single file (as seen on
npmcdn), but
that file is not usable in a browser because it depends on a global
module object.

Of course, there are other good options for binding, such as
React.createClass or binding during constructor!

I hope that helps a bit! You can also browse other issues here
regarding non-Sprockets asset bundling. It's a bit "off the beaten
track" with Rails but some folks have found nice solutions (like
@joerodrig3 's solution above!).

---

You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub:
https://github.com/reactjs/react-rails/issues/523#issuecomment-220503417