Revise "Hello World" Redux example

Author: nostophilia

lib/generators/react_on_rails/base_generator.rb

@@ -77,7 +77,7 @@ def template_base_files
  Procfile.dev
  app/views/hello_world/index.html.erb
  package.json
- client/app/bundles/HelloWorld/components/HelloWorldWidget.jsx
+ client/app/bundles/HelloWorld/components/HelloWorld.jsx
  client/package.json).each { |file| template(base_path + file + ".tt", file) }
  end
 

lib/generators/react_on_rails/react_no_redux_generator.rb

@@ -10,7 +10,7 @@ class ReactNoReduxGenerator < Rails::Generators::Base
 
  def copy_base_files
  base_path = "no_redux/base/"
- file = "client/app/bundles/HelloWorld/containers/HelloWorld.jsx"
+ file = "client/app/bundles/HelloWorld/containers/HelloWorldContainer.jsx"
  copy_file(base_path + file, file)
  end
 

lib/generators/react_on_rails/react_with_redux_generator.rb

@@ -14,10 +14,9 @@ def create_redux_directories
  def copy_base_redux_files
  base_path = "redux/base/"
  %w(client/app/bundles/HelloWorld/actions/helloWorldActionCreators.jsx
- client/app/bundles/HelloWorld/containers/HelloWorld.jsx
+ client/app/bundles/HelloWorld/containers/HelloWorldContainer.jsx
  client/app/bundles/HelloWorld/constants/helloWorldConstants.jsx
  client/app/bundles/HelloWorld/reducers/helloWorldReducer.jsx
- client/app/bundles/HelloWorld/reducers/index.jsx
  client/app/bundles/HelloWorld/store/helloWorldStore.jsx).each do |file|
  copy_file(base_path + file, file)
  end

lib/generators/react_on_rails/templates/base/base/app/views/hello_world/index.html.erb.tt

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

lib/generators/react_on_rails/templates/base/base/client/app/bundles/HelloWorld/components/HelloWorld.jsx.tt

@@ -0,0 +1,29 @@
+import React, { PropTypes } from 'react';
+
+// Simple example of a React "dumb" component
+const HelloWorld = ({ name, updateName }) => (
+ <div className="container">
+ <h3>
+ Hello, {name}!
+ </h3>
+ <hr />
+ <form className="form-horizontal">
+ <label htmlFor="name">
+ Say hello to:
+ </label>
+ <input
+ type="text" value={name} id="name"
+ onChange={(e) => updateName(e.target.value)}
+ />
+ </form>
+ </div>
+);
+
+HelloWorld.propTypes = {
+ // If you have lots of data or action properties, you should consider grouping them by
+ // passing two properties: "data" and "actions".
+ updateName: PropTypes.func.isRequired,
+ name: PropTypes.string.isRequired,
+};
+
+export default HelloWorld;

lib/generators/react_on_rails/templates/base/base/client/app/bundles/HelloWorld/components/HelloWorldWidget.jsx.tt

@@ -2,6 +2,7 @@
 {
  "name": "react-webpack-rails-tutorial",
  "version": "0.0.1",
+ "private": true,
  "engines": {
  "node": "5.10.0",
  "npm": "3.5.0"
@@ -24,21 +25,13 @@
  "babel-preset-stage-0": "^6.5.0",
  "es5-shim": "^4.5.7",
  "expose-loader": "^0.7.1",
- <%- if options.redux? -%>
- "immutable": "^3.7.6",
- <%- end -%>
  "imports-loader": "^0.6.5",
- <%- if options.redux? -%>
- "mirror-creator": "1.1.0",
- <%- end -%>
- "react": "^0.14.8 || ^15.0.0",
- "react-dom": "^0.14.8 || ^15.0.0",
+ "react": "^15.0.0",
+ "react-dom": "^15.0.0",
  "react-on-rails": "<%= VersionSyntaxConverter.new.rubygem_to_npm %>",
  <%- if options.redux? -%>
  "react-redux": "^4.4.1",
  "redux": "^3.3.1",
- "redux-promise": "^0.5.3",
- "redux-thunk": "^2.0.1",
  <%- end -%>
  "webpack": "^1.12.14"
  },

lib/generators/react_on_rails/templates/base/base/client/package.json.tt

@@ -1,6 +1,7 @@
 {
  "name": "react-webpack-rails-tutorial",
  "version": "0.0.1",
+ "private": true,
  "engines": {
  "node": "5.10.0",
  "npm": "3.5.0"

lib/generators/react_on_rails/templates/base/base/package.json.tt

@@ -1,8 +1,8 @@
 import React, { PropTypes } from 'react';
-import HelloWorldWidget from '../components/HelloWorldWidget';
+import HelloWorld from '../components/HelloWorld';
 
 // Simple example of a React "smart" component
-export default class HelloWorld extends React.Component {
+export default class HelloWorldContainer extends React.Component {
  static propTypes = {
  name: PropTypes.string.isRequired, // this is passed from the Rails view
  };
@@ -15,14 +15,12 @@ export default class HelloWorld extends React.Component {
  this.state = { name: this.props.name };
  }
 
- updateName(name) {
- this.setState({ name });
- }
+ updateName = (name) => { this.setState({ name }); };
 
  render() {
  return (
  <div>
- <HelloWorldWidget name={this.state.name} updateName={e => this.updateName(e)} />
+ <HelloWorld name={this.state.name} updateName={this.updateName} />
  </div>
  );
  }

lib/generators/react_on_rails/templates/no_redux/base/client/app/bundles/HelloWorld/containers/HelloWorld.jsx renamed to lib/generators/react_on_rails/templates/no_redux/base/client/app/bundles/HelloWorld/containers/HelloWorldContainer.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import ReactOnRails from 'react-on-rails';
 
-import HelloWorld from '../containers/HelloWorld';
+import HelloWorldContainer from '../containers/HelloWorldContainer';
 
 const HelloWorldApp = (props) => (
- <HelloWorld {...props} />
+ <HelloWorldContainer {...props} />
 );
 
 // This is how react_on_rails can see the HelloWorldApp in the browser.