Add webpack-dev-server to allow us to visualize form

tylercollier · tylercollier · commit a5c4ab681c3b · 2016-09-10T18:38:08.000-07:00
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,4 @@
 {
-	"presets": ["es2015", "react"]
+	"presets": ["es2015", "react"],
+	"plugins": ["react-hot-loader/babel"]
 }
diff --git a/app/ContactFormComponent.js b/app/ContactFormComponent.js
@@ -14,9 +14,13 @@ class ContactForm extends Component {
 
 		return (
 			<form onSubmit={this.props.handleSubmit(this.mySubmit.bind(this))}>
+				<h1>Contact Form</h1>
 				<label>First name</label>
+				{' '}
 				<input {...firstName}/>
-				{firstName.touched && firstName.error && <div className='help-block'>{firstName.error}</div>}
+				{' '}
+				{firstName.touched && firstName.error && <span className='help-block'>{firstName.error}</span>}
+				<p></p>
 				<button type="submit">
 					<i className={submitClassName}/> Submit
 				</button>
diff --git a/app/ContactFormContainer.js b/app/ContactFormContainer.js
@@ -1,14 +1,23 @@
 import React from 'react'
+import { connect } from 'react-redux'
 import ContactFormComponent from './ContactFormComponent'
 import { reduxForm } from 'redux-form'
 import * as formValidations from './formValidations'
 
-const ContactFormContainer = reduxForm({
+let ContactFormContainer = reduxForm({
 	form: 'contact',
 	fields: ['firstName'],
 	validate: formValidations.createValidator({
 		firstName: formValidations.required
 	})
 })(ContactFormComponent)
 
+const mapStateToProps = null
+const mapDispatchToProps = {
+	// Note: we aren't actually doing anything with this. The ContactForm component has a propType, so I'm showing where it might come from.
+	onSave: contactFormValues => { return { type: 'FORM_SUBMIT', payload: contactFormValues } }
+}
+
+ContactFormContainer = connect(mapStateToProps, mapDispatchToProps)(ContactFormContainer)
+
 export default ContactFormContainer
diff --git a/app/index.js b/app/index.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import { render } from 'react-dom'
+import { createStore, combineReducers } from 'redux'
+import { Provider } from 'react-redux'
+import { reducer as reduxFormReducer } from 'redux-form'
+import ContactFormContainer from './ContactFormContainer'
+
+const rootReducer = combineReducers({
+	form: reduxFormReducer
+})
+const store = createStore(rootReducer, window.devToolsExtension && window.devToolsExtension())
+
+render(
+	<Provider store={store}>
+		<ContactFormContainer/>
+	</Provider>,
+	document.getElementById('root')
+)
diff --git a/index.html b/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>redux-form-test</title>
+		<style>
+			.help-block {
+				color: red;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script src="bundle.js"></script>
+	</body>
+</html>
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "description": "Showing some unit and integration tests for redux-form",
   "keywords": [],
   "scripts": {
-    "webpack": "node_modules/.bin/webpack",
+    "dev": "node_modules/.bin/webpack-dev-server",
     "test": "node_modules/.bin/mocha -w --compilers js:babel-core/register tests/*"
   },
   "devDependencies": {
@@ -19,11 +19,13 @@
     "mocha": "^2.4.5",
     "react-addons-test-utils": "^15.0.2",
     "sinon": "^1.17.4",
-    "webpack": "^1.13.0"
+    "webpack": "^1.13.0",
+    "webpack-dev-server": "^1.15.1"
   },
   "dependencies": {
     "react": "^15.0.2",
     "react-dom": "^15.0.2",
+    "react-hot-loader": "^3.0.0-beta.3",
     "react-redux": "^4.4.5",
     "redux": "^3.5.2",
     "redux-form": "^5.2.3"
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,21 @@
+const webpack = require('webpack')
+
+module.exports = {
+	entry: {
+		app: './app/index.js'
+	},
+	module: {
+		loaders: [
+			{ pattern: /\.jsx?/, loader: 'babel', exclude: /node_modules/ }
+		]
+	},
+	plugins: [new webpack.HotModuleReplacementPlugin({ })],
+	devServer: {
+		historyApiFallback: true,
+		hot: true,
+		stats: {
+			colors: true,
+			chunks: false
+		}
+	},
+}

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
`1`	`1`	`{`
`2`		`- "presets": ["es2015", "react"]`
	`2`	`+ "presets": ["es2015", "react"],`
	`3`	`+ "plugins": ["react-hot-loader/babel"]`
`3`	`4`	`}`