How can I use this React library with React-Rails

Question

I came upon this:

https://github.com/ssorallen/turbo-react

And I like what it does, I am just a bit confused about how I use this code within my Rails project that currently uses the React-Rails gem

I am mostly confused about where to put the code so that I can read it into my Rails gem with React Rails. If I paste the main JS file into my vendor/assets folder, I get this message:

Uncaught ReferenceError: global is not defined

I know that I am just fundamentally misunderstanding how to include this kind of JS file into my Rails project.

Crypt

What specifically confuses you? – Gunnel

I'm wondering where I put the js file in order to use them properly. I can't just add them to vendor assets because they rely on globals and require statements that are not recognized. – Crypt

Please edit your question to explain your confusion. There's not enough there for someone to know how to help. – Gunnel

Sorry, made it more clear. – Crypt

Answer 1

src/turbo-react.js is meant for a Node.js environment, not a browser environment. I see another file, public/dist/turbo-react.min.js, which has been "compiled" to run in a browser (using Webpack). You should copy that file into vendor/assets, then require it in application.js.

The first few lines of src/turbo-react.js gave me some signals that it is for Node.js:

if (global.Turbolinks === undefined) {
  throw "Missing Turbolinks dependency. TurboReact requires Turbolinks be included before it.";
}

var HTMLtoJSX = require("htmltojsx");
var JSXTransformer = require("react-tools");
var React = require("react");

global and require are both Node.js concepts which don't exist in the browser.

Forras

Answer 2

You are searching for this one I guess: https://github.com/ssorallen/turbo_react-rails

Installation instructions:

1. Add this line to your application's Gemfile:

   gem 'turbo_react-rails'

2. Install the updated gems

   $ bundle install

3. Require turbo-react in a JavaScript file like "application.js" after Turbolinks:

   //= turbolinks //= require turbo-react

That's it. Now if you click any link in your Web-Application it should be loaded via Ajax and use React to replace the tags in your page.

Brusa