Using react_on_rails gem for rendering components on the client

- Paired with @samnang

Author: mapreal19

Gemfile

@@ -37,6 +37,8 @@ gem "rails-html-sanitizer"
 # Use Unicorn as the app server
 gem "unicorn"
 
+gem "react_on_rails", "~> 0.1.1"
+
 gem "autoprefixer-rails"
 
 # Use Capistrano for deployment

Gemfile.lock

@@ -172,6 +172,9 @@ GEM
     raindrops (0.15.0)
     rake (10.4.2)
     rdoc (4.2.0)
+    react_on_rails (0.1.1)
+      execjs (~> 2.5)
+      rails (~> 4.2)
     rspec-core (3.3.2)
       rspec-support (~> 3.3.0)
     rspec-expectations (3.3.1)
@@ -281,6 +284,7 @@ DEPENDENCIES
   rails-html-sanitizer
   rails_12factor
   rainbow
+  react_on_rails (~> 0.1.1)
   rspec-rails
   rubocop
   ruby-lint

app/views/pages/index.html.erb

@@ -16,7 +16,6 @@
   </li>
 </ul>
 <hr/>
-<div id="content"></div>
-
-
-
+<div id="content">
+  <%= react_component('App') %>
+</div>

client/assets/javascripts/App.jsx

@@ -1,26 +1,14 @@
-import $ from 'jquery';
-
 import React from 'react';
 import { Provider } from 'react-redux';
 
 import CommentScreen from './components/CommentScreen';
 import CommentStore from './stores/CommentStore';
 
-$(function onLoad() {
-  function render() {
-    if ($('#content').length > 0) {
-      React.render((
-        <Provider store={CommentStore}>
-          { () => <CommentScreen /> }
-        </Provider>
-      ), document.getElementById('content'));
-    }
-  }
-
-  render();
-
-  // Next part is to make this work with turbo-links
-  $(document).on('page:change', () => {
-    render();
-  });
-});
+window.App = () => {
+  const reactComponent = (
+    <Provider store={CommentStore}>
+      {() => <CommentScreen />}
+    </Provider>
+  );
+  return reactComponent;
+};

client/webpack.rails.config.js

@@ -25,7 +25,10 @@ config.module.loaders.push(
   // Next 2 lines expose jQuery and $ to any JavaScript files loaded after client-bundle.js
   // in the Rails Asset Pipeline. Thus, load this one prior.
   {test: require.resolve('jquery'), loader: 'expose?jQuery'},
-  {test: require.resolve('jquery'), loader: 'expose?$'}
+  {test: require.resolve('jquery'), loader: 'expose?$'},
+
+  // React is necessary for the client rendering:
+  {test: require.resolve('react'), loader: 'expose?React'}
 );
 module.exports = config;