mewben/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    made with esnextbin

  
## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNextbin Sketch</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

## index.js
import React, { PropTypes, Component } from 'react';
import ReactDOM from 'react-dom';
import { Provider, connect } from 'react-redux';
import { modelReducer, formReducer, Form, Field, actions } from 'react-redux-form';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import createLogger from 'redux-logger';

const initialState = {
  firstName: '',
  lastName: '',
  children: [{
      firstName: '',
      lastName: '',
      age: 1
  }]
};

const store = applyMiddleware(thunk, createLogger())(createStore)(combineReducers({
  'parentModel': modelReducer('parentModel', initialState),
  'parentForm': formReducer('parentModel', initialState)
}));

const parentFromDB = {
    firstName: 'John',
    lastName: 'Doe',
    children: [{
        firstName: 'Alice',
        lastName: 'Doe',
        age: 1
    }, {
        firstName: 'Bob',
        lastName: 'Doe',
        age: 150
    }]
}

store.dispatch(actions.load('parentModel', parentFromDB))

const App = connect(s => s)((props) => {
  console.log(props)
  return (
    <div>
      <Form model='parentModel'>
        <Field model='parentModel.firstName'>
          <label>Parent FirstName</label>
          <input type="text" />
        </Field>
        {props.parentModel.children.map((child, k) => {
          return (
            <div key={k}>
              <hr />
              Child {k + 1}: First Name
              <Field model={`parentModel.children[${k}].firstName`}>
                <input type="text" />
              </Field>
              <Field model={`parentModel.children[${k}].age`}>
                <input type="text" />
              </Field>
            </div>
          )
        })}
      </Form>
    </div>
  )
})


ReactDOM.render(<Provider store={store}><App /></Provider>,document.getElementById('app'))

## package.json
{
  "name": "esnextbin-redux-form",
  "version": "0.0.1",
  "dependencies": {
    "react": "15.3.0",
    "react-dom": "15.3.0",
    "react-redux": "4.4.0",
    "react-redux-form": "0.14.3",
    "redux": "3.3.1",
    "redux-thunk": "1.0.0",
    "redux-logger": "2.5.2"
  }
}

## transpiled.js
'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _reactRedux = require('react-redux');

var _reactReduxForm = require('react-redux-form');

var _redux = require('redux');

var _reduxThunk = require('redux-thunk');

var _reduxThunk2 = _interopRequireDefault(_reduxThunk);

var _reduxLogger = require('redux-logger');

var _reduxLogger2 = _interopRequireDefault(_reduxLogger);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var initialState = {
  firstName: '',
  lastName: '',
  children: [{
    firstName: '',
    lastName: '',
    age: 1
  }]
};

var store = (0, _redux.applyMiddleware)(_reduxThunk2.default, (0, _reduxLogger2.default)())(_redux.createStore)((0, _redux.combineReducers)({
  'parentModel': (0, _reactReduxForm.modelReducer)('parentModel', initialState),
  'parentForm': (0, _reactReduxForm.formReducer)('parentModel', initialState)
}));

var parentFromDB = {
  firstName: 'John',
  lastName: 'Doe',
  children: [{
    firstName: 'Alice',
    lastName: 'Doe',
    age: 1
  }, {
    firstName: 'Bob',
    lastName: 'Doe',
    age: 150
  }]
};

store.dispatch(_reactReduxForm.actions.load('parentModel', parentFromDB));

var App = (0, _reactRedux.connect)(function (s) {
  return s;
})(function (props) {
  console.log(props);
  return _react2.default.createElement(
    'div',
    null,
    _react2.default.createElement(
      _reactReduxForm.Form,
      { model: 'parentModel' },
      _react2.default.createElement(
        _reactReduxForm.Field,
        { model: 'parentModel.firstName' },
        _react2.default.createElement(
          'label',
          null,
          'Parent FirstName'
        ),
        _react2.default.createElement('input', { type: 'text' })
      ),
      props.parentModel.children.map(function (child, k) {
        return _react2.default.createElement(
          'div',
          { key: k },
          _react2.default.createElement('hr', null),
          'Child ',
          k + 1,
          ': First Name',
          _react2.default.createElement(
            _reactReduxForm.Field,
            { model: 'parentModel.children[' + k + '].firstName' },
            _react2.default.createElement('input', { type: 'text' })
          ),
          _react2.default.createElement(
            _reactReduxForm.Field,
            { model: 'parentModel.children[' + k + '].age' },
            _react2.default.createElement('input', { type: 'text' })
          )
        );
      })
    )
  );
});

_reactDom2.default.render(_react2.default.createElement(
  _reactRedux.Provider,
  { store: store },
  _react2.default.createElement(App, null)
), document.getElementById('app'));
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	</head>
	<body>
	<div id="app"></div>
	</body>
	</html>
	import React, { PropTypes, Component } from 'react';
	import ReactDOM from 'react-dom';
	import { Provider, connect } from 'react-redux';
	import { modelReducer, formReducer, Form, Field, actions } from 'react-redux-form';
	import { createStore, combineReducers, applyMiddleware } from 'redux';
	import thunk from 'redux-thunk';
	import createLogger from 'redux-logger';

	const initialState = {
	firstName: '',
	lastName: '',
	children: [{
	firstName: '',
	lastName: '',
	age: 1
	}]
	};

	const store = applyMiddleware(thunk, createLogger())(createStore)(combineReducers({
	'parentModel': modelReducer('parentModel', initialState),
	'parentForm': formReducer('parentModel', initialState)
	}));

	const parentFromDB = {
	firstName: 'John',
	lastName: 'Doe',
	children: [{
	firstName: 'Alice',
	lastName: 'Doe',
	age: 1
	}, {
	firstName: 'Bob',
	lastName: 'Doe',
	age: 150
	}]
	}

	store.dispatch(actions.load('parentModel', parentFromDB))

	const App = connect(s => s)((props) => {
	console.log(props)
	return (
	<div>
	<Form model='parentModel'>
	<Field model='parentModel.firstName'>
	<label>Parent FirstName</label>
	<input type="text" />
	</Field>
	{props.parentModel.children.map((child, k) => {
	return (
	<div key={k}>
	<hr />
	Child {k + 1}: First Name
	<Field model={`parentModel.children[${k}].firstName`}>
	<input type="text" />
	</Field>
	<Field model={`parentModel.children[${k}].age`}>
	<input type="text" />
	</Field>
	</div>
	)
	})}
	</Form>
	</div>
	)
	})


	ReactDOM.render(<Provider store={store}><App /></Provider>,document.getElementById('app'))
	{
	"name": "esnextbin-redux-form",
	"version": "0.0.1",
	"dependencies": {
	"react": "15.3.0",
	"react-dom": "15.3.0",
	"react-redux": "4.4.0",
	"react-redux-form": "0.14.3",
	"redux": "3.3.1",
	"redux-thunk": "1.0.0",
	"redux-logger": "2.5.2"
	}
	}
	'use strict';

	var _react = require('react');

	var _react2 = _interopRequireDefault(_react);

	var _reactDom = require('react-dom');

	var _reactDom2 = _interopRequireDefault(_reactDom);

	var _reactRedux = require('react-redux');

	var _reactReduxForm = require('react-redux-form');

	var _redux = require('redux');

	var _reduxThunk = require('redux-thunk');

	var _reduxThunk2 = _interopRequireDefault(_reduxThunk);

	var _reduxLogger = require('redux-logger');

	var _reduxLogger2 = _interopRequireDefault(_reduxLogger);

	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

	var initialState = {
	firstName: '',
	lastName: '',
	children: [{
	firstName: '',
	lastName: '',
	age: 1
	}]
	};

	var store = (0, _redux.applyMiddleware)(_reduxThunk2.default, (0, _reduxLogger2.default)())(_redux.createStore)((0, _redux.combineReducers)({
	'parentModel': (0, _reactReduxForm.modelReducer)('parentModel', initialState),
	'parentForm': (0, _reactReduxForm.formReducer)('parentModel', initialState)
	}));

	var parentFromDB = {
	firstName: 'John',
	lastName: 'Doe',
	children: [{
	firstName: 'Alice',
	lastName: 'Doe',
	age: 1
	}, {
	firstName: 'Bob',
	lastName: 'Doe',
	age: 150
	}]
	};

	store.dispatch(_reactReduxForm.actions.load('parentModel', parentFromDB));

	var App = (0, _reactRedux.connect)(function (s) {
	return s;
	})(function (props) {
	console.log(props);
	return _react2.default.createElement(
	'div',
	null,
	_react2.default.createElement(
	_reactReduxForm.Form,
	{ model: 'parentModel' },
	_react2.default.createElement(
	_reactReduxForm.Field,
	{ model: 'parentModel.firstName' },
	_react2.default.createElement(
	'label',
	null,
	'Parent FirstName'
	),
	_react2.default.createElement('input', { type: 'text' })
	),
	props.parentModel.children.map(function (child, k) {
	return _react2.default.createElement(
	'div',
	{ key: k },
	_react2.default.createElement('hr', null),
	'Child ',
	k + 1,
	': First Name',
	_react2.default.createElement(
	_reactReduxForm.Field,
	{ model: 'parentModel.children[' + k + '].firstName' },
	_react2.default.createElement('input', { type: 'text' })
	),
	_react2.default.createElement(
	_reactReduxForm.Field,
	{ model: 'parentModel.children[' + k + '].age' },
	_react2.default.createElement('input', { type: 'text' })
	)
	);
	})
	)
	);
	});

	_reactDom2.default.render(_react2.default.createElement(
	_reactRedux.Provider,
	{ store: store },
	_react2.default.createElement(App, null)
	), document.getElementById('app'));