Ran redux generator with 6.7.1

.gitignore

@@ -19,3 +19,9 @@
 
 # Ignore Byebug command history file.
 .byebug_history
+# React on Rails
+npm-debug.log*
+node_modules
+
+# Generated js bundles
+/app/assets/webpack/*

Gemfile

@@ -49,3 +49,5 @@ end
 
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
 gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
+
+gem 'mini_racer', platforms: :ruby

Gemfile.lock

@@ -76,6 +76,7 @@ GEM
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
+    libv8 (5.3.332.38.3-x86_64-darwin-16)
     listen (3.0.8)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
@@ -88,6 +89,8 @@ GEM
       mime-types-data (~> 3.2015)
     mime-types-data (3.2016.0521)
     mini_portile2 (2.1.0)
+    mini_racer (0.1.7)
+      libv8 (~> 5.3)
     minitest (5.10.1)
     multi_json (1.12.1)
     nio4r (2.0.0)
@@ -174,6 +177,7 @@ DEPENDENCIES
   jbuilder (~> 2.5)
   jquery-rails
   listen (~> 3.0.5)
+  mini_racer
   puma (~> 3.0)
   rails (~> 5.0.0, >= 5.0.0.1)
   react_on_rails!

Procfile.dev

@@ -0,0 +1,2 @@
+web: rails s -p 3000
+client: sh -c 'rm app/assets/webpack/* || true && cd client && bundle exec rake react_on_rails:locale && yarn run build:development'

app/assets/javascripts/application.js

@@ -1,3 +1,5 @@
+//= require webpack-bundle
+
 // This is a manifest file that'll be compiled into application.js, which will include all the files
 // listed below.
 //

app/controllers/hello_world_controller.rb

@@ -0,0 +1,5 @@
+class HelloWorldController < ApplicationController
+  def index
+    @hello_world_props = { name: "Stranger" }
+  end
+end

app/views/hello_world/index.html.erb

@@ -0,0 +1,3 @@
+<h1>Hello World</h1>
+<%= react_component("HelloWorldApp", props: @hello_world_props, prerender: false) %>
+

client/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "stage-2", "react"]
+}

client/REACT_ON_RAILS_CLIENT_README.md

@@ -0,0 +1,9 @@
+Client folder generated by the React on Rails gem.
+
+See documentation [at github.com/shakacode/react_on_rails](https://github.com/shakacode/react_on_rails) for details on how it is organized.
+
+If you need additional help, please consider:
+
+* [Our ShakaCode Forum for React on Rails](https://forum.shakacode.com/c/rails/reactonrails).
+* Joining our Slack discussion room by [emailing us a bit about you and your project](mailto:[email protected]).
+* [Hiring us](https://forum.shakacode.com/c/rails/reactonrails) for coaching and custom web application development for your project.

client/app/bundles/HelloWorld/actions/helloWorldActionCreators.jsx

@@ -0,0 +1,8 @@
+/* eslint-disable import/prefer-default-export */
+
+import { HELLO_WORLD_NAME_UPDATE } from '../constants/helloWorldConstants';
+
+export const updateName = (text) => ({
+  type: HELLO_WORLD_NAME_UPDATE,
+  text,
+});

client/app/bundles/HelloWorld/components/HelloWorld.jsx

@@ -0,0 +1,28 @@
+import React, { PropTypes } from 'react';
+
+const HelloWorld = ({ name, updateName }) => (
+  <div>
+    <h3>
+      Hello, {name}!
+    </h3>
+    <hr />
+    <form >
+      <label htmlFor="name">
+        Say hello to:
+      </label>
+      <input
+        id="name"
+        type="text"
+        value={name}
+        onChange={(e) => updateName(e.target.value)}
+      />
+    </form>
+  </div>
+);
+
+HelloWorld.propTypes = {
+  name: PropTypes.string.isRequired,
+  updateName: PropTypes.func.isRequired,
+};
+
+export default HelloWorld;

client/app/bundles/HelloWorld/constants/helloWorldConstants.jsx

@@ -0,0 +1,3 @@
+/* eslint-disable import/prefer-default-export */
+
+export const HELLO_WORLD_NAME_UPDATE = 'HELLO_WORLD_NAME_UPDATE';

client/app/bundles/HelloWorld/containers/HelloWorldContainer.jsx

@@ -0,0 +1,13 @@
+// Simple example of a React "smart" component
+
+import { connect } from 'react-redux';
+import HelloWorld from '../components/HelloWorld';
+import * as actions from '../actions/helloWorldActionCreators';
+
+// Which part of the Redux global state does our component want to receive as props?
+const mapStateToProps = (state) => ({ name: state.name });
+
+// Don't forget to actually use connect!
+// Note that we don't export HelloWorld, but the redux "connected" version of it.
+// See https://github.com/reactjs/react-redux/blob/master/docs/api.md#examples
+export default connect(mapStateToProps, actions)(HelloWorld);

client/app/bundles/HelloWorld/reducers/helloWorldReducer.jsx

@@ -0,0 +1,15 @@
+import { combineReducers } from 'redux';
+import { HELLO_WORLD_NAME_UPDATE } from '../constants/helloWorldConstants';
+
+const name = (state = '', action) => {
+  switch (action.type) {
+    case HELLO_WORLD_NAME_UPDATE:
+      return action.text;
+    default:
+      return state;
+  }
+};
+
+const helloWorldReducer = combineReducers({ name });
+
+export default helloWorldReducer;

client/app/bundles/HelloWorld/startup/HelloWorldApp.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+
+import configureStore from '../store/helloWorldStore';
+import HelloWorldContainer from '../containers/HelloWorldContainer';
+
+// See documentation for https://github.com/reactjs/react-redux.
+// This is how you get props from the Rails view into the redux store.
+// This code here binds your smart component to the redux store.
+// railsContext provides contextual information especially useful for server rendering, such as
+// knowing the locale. See the React on Rails documentation for more info on the railsContext
+const HelloWorldApp = (props, _railsContext) => (
+  <Provider store={configureStore(props)}>
+    <HelloWorldContainer />
+  </Provider>
+);
+
+export default HelloWorldApp;

client/app/bundles/HelloWorld/startup/registration.jsx

@@ -0,0 +1,8 @@
+import ReactOnRails from 'react-on-rails';
+
+import HelloWorldApp from './HelloWorldApp';
+
+// This is how react_on_rails can see the HelloWorld in the browser.
+ReactOnRails.register({
+  HelloWorldApp,
+});

client/app/bundles/HelloWorld/store/helloWorldStore.jsx

@@ -0,0 +1,8 @@
+import { createStore } from 'redux';
+import helloWorldReducer from '../reducers/helloWorldReducer';
+
+const configureStore = (railsProps) => (
+  createStore(helloWorldReducer, railsProps)
+);
+
+export default configureStore;

client/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "react-webpack-rails-tutorial",
+  "version": "0.0.1",
+  "private": true,
+  "engines": {
+    "node": "6.9.0",
+    "npm": "4.1.1"
+  },
+  "scripts": {
+    "build:test": "webpack --config webpack.config.js",
+    "build:production": "NODE_ENV=production webpack --config webpack.config.js",
+    "build:development": "webpack -w --config webpack.config.js"
+  },
+  "cacheDirectories": ["node_modules", "client/node_modules"],
+  "dependencies": {
+    "babel-cli": "^6.23.0",
+    "babel-core": "^6.23.1",
+    "babel-loader": "^6.3.2",
+    "babel-runtime": "^6.23.0",
+    "babel-polyfill": "^6.23.0",
+    "babel-preset-es2015": "^6.22.0",
+    "babel-preset-react": "^6.23.0",
+    "babel-preset-stage-2": "^6.22.0",
+    "es5-shim": "^4.5.9",
+    "expose-loader": "^0.7.3",
+    "imports-loader": "^0.7.1",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "react-on-rails": "6.6.0",
+    "react-redux": "^5.0.3",
+    "redux": "^3.6.0",
+    "webpack": "^2.2.1"
+  },
+  "devDependencies": {
+  }
+}

client/webpack.config.js

@@ -0,0 +1,56 @@
+/* eslint comma-dangle: ["error",
+ {"functions": "never", "arrays": "only-multiline", "objects":
+ "only-multiline"} ] */
+
+const webpack = require('webpack');
+
+const devBuild = process.env.NODE_ENV !== 'production';
+
+const config = {
+  entry: [
+    'es5-shim/es5-shim',
+    'es5-shim/es5-sham',
+    'babel-polyfill',
+    './app/bundles/HelloWorld/startup/registration',
+  ],
+
+  output: {
+    filename: 'webpack-bundle.js',
+    path: '../app/assets/webpack',
+  },
+
+  resolve: {
+    extensions: ['.js', '.jsx'],
+  },
+  plugins: [
+    new webpack.EnvironmentPlugin({ NODE_ENV: 'development' }),
+  ],
+  module: {
+    rules: [
+      {
+        test: require.resolve('react'),
+        use: {
+          loader: 'imports-loader',
+          options: {
+            shim: 'es5-shim/es5-shim',
+            sham: 'es5-shim/es5-sham',
+          }
+        },
+      },
+      {
+        test: /\.jsx?$/,
+        use: 'babel-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+};
+
+module.exports = config;
+
+if (devBuild) {
+  console.log('Webpack dev build for Rails'); // eslint-disable-line no-console
+  module.exports.devtool = 'eval-source-map';
+} else {
+  console.log('Webpack production build for Rails'); // eslint-disable-line no-console
+}