Added support for Redux Form

packages/react-scripts/template/forms/DemoForm.js.j2

@@ -0,0 +1,52 @@
+import React from 'react';
+{% if bootstrap -%}
+import { Button, ControlLabel, Col, FormControl, FormGroup, Grid, Row } from 'react-bootstrap';
+{%- endif %}
+import { Field, reduxForm } from 'redux-form';
+
+{% if bootstrap -%}
+const Input = ({ input, label, meta, ...other }) => (
+    <FormGroup controlId={input.name}>
+        <ControlLabel>{label}</ControlLabel>
+        <FormControl {...input} {...other} />
+    </FormGroup>
+);
+
+const DemoForm = ({ handleSubmit }) => (
+  <form onSubmit={handleSubmit}>
+    <Grid>
+      <h4>Demo Form</h4>
+      <Row className="text-left">
+        <Col md={4} mdOffset={4}>
+          <Field name="message" type="text" label="Message" placeholder="Message text" component={Input} />
+        </Col>
+      </Row>
+      <Row>
+        <Col xs={12}>
+          <Button bsStyle="primary" type="submit">Submit</Button>
+        </Col>
+      </Row>
+    </Grid>
+  </form>
+);
+{%- else -%}
+const Input = ({ input, label, meta, ...other }) => (
+  <div>
+    <label htmlFor={input.name}>{label}</label>{' '}
+    <input {...input} {...other} />
+  </div>
+);
+
+const DemoForm = ({ handleSubmit }) => (
+  <form onSubmit={handleSubmit}>
+    <h4>Demo Form</h4>
+    <Field name="message" type="text" label="Message" placeholder="Message text" component={Input} />
+    <input type="submit" />
+  </form>
+);
+{%- endif %}
+
+
+export default reduxForm({
+    form: 'demo'
+})(DemoForm);

packages/react-scripts/template/modules/index.js.j2

@@ -2,14 +2,18 @@ import { combineReducers } from 'redux';
 {% if router -%}
 import { routerReducer } from 'react-router-redux';
 {%- endif %}
+{% if form -%}
+import { reducer as formReducer } from 'redux-form';
+{%- endif %}
 
 import demo from './demo';
 
 export default combineReducers({
-{% if router -%}
-    demo,
-    router: routerReducer
-{%- else -%}
-    demo
-{%- endif %}
+  demo
+  {%- if form %},
+  form: formReducer
+  {%- endif %}
+  {%- if router %},
+  router: routerReducer
+  {%- endif %}
 });

packages/react-scripts/template/src/App.js.j2

@@ -20,6 +20,9 @@ import './App.css';
 {% if redux -%}
 import IncrementButton from './containers/IncrementButton';
 {%- endif %}
+{% if form -%}
+import DemoForm from './forms/DemoForm';
+{%- endif %}
 {% if router and redux -%}
 import { history } from './';
 {%- endif %}
@@ -30,6 +33,10 @@ const Home = () => (
         <h3>Home</h3>
         {% if redux -%}
         <IncrementButton />
+        {% if form -%}
+        <br /><br /><br /><br />
+        <DemoForm onSubmit={values => { console.log(values); return false; }} />
+        {%- endif %}
         {%- endif %}
     </div>
 );
@@ -61,7 +68,7 @@ class App extends Component {
         <Navbar>
           <Navbar.Header>
             <Navbar.Brand>
-              <Link to="/" exact replace>Home</Link>
+              <Link to="/" replace>Home</Link>
             </Navbar.Brand>
           </Navbar.Header>
           <Nav>

packages/react-scripts/utils/addDependencies.js

@@ -1,9 +1,10 @@
 'use strict';
 
-module.exports = (currentDependencies, { bootstrap, fontawesome, redux, router }) => {
+module.exports = (currentDependencies, { bootstrap, fontawesome, form, redux, router }) => {
   const boostrapDependencies = bootstrap ? { "bootstrap": "3.3.7", "react-bootstrap": "0.31.0" } : {};
   const fontawesomeDependencies = fontawesome ? { "font-awesome": "4.7.0", "react-fontawesome": "1.6.1" } : {};
   const reduxDependencies = redux ? { "redux": "3.6.0", "redux-thunk": "2.2.0", "redux-promise": "0.5.3", "redux-logger": "3.0.1", "redux-actions": "2.0.2", "react-redux": "5.0.4" } : {};
+  const reduxFormDependencies = form ? { "redux-form": "6.6.3" } : {};
   const routerDependencies = router ? { "react-router-dom": "4.1.1" } : {};
   const routerBoostrapDependencies = router && bootstrap ? { "react-router-bootstrap": "0.24.2" } : {};
   const routerReduxDependencies = router && redux ? { "react-router-redux": "5.0.0-alpha.6" } : {};
@@ -13,6 +14,7 @@ module.exports = (currentDependencies, { bootstrap, fontawesome, redux, router }
     boostrapDependencies,
     fontawesomeDependencies,
     reduxDependencies,
+    reduxFormDependencies,
     routerDependencies,
     routerBoostrapDependencies,
     routerReduxDependencies

packages/react-scripts/utils/copyTemplates.js

@@ -41,6 +41,9 @@ module.exports = (appName, appPath, templatePath, activeModules) => {
       copyTemplateDirectory(path.join(templatePath, 'containers'), path.join(paths.appSrc, 'containers'), templateContext);
       copyTemplateDirectory(path.join(templatePath, 'modules'), path.join(paths.appSrc, 'modules'), templateContext);
     }
+    if(activeModules.form) {
+      copyTemplateDirectory(path.join(templatePath, 'forms'), path.join(paths.appSrc, 'forms'), templateContext);
+    }
   } else {
     console.error('Could not locate supplied template: ' + chalk.green(templatePath));
     return;