dmackerman/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    made with esnextbin

  
## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNextbin Sketch</title>
  <!-- put additional styles and scripts here -->
</head>
<body>
  <!-- put markup and other contents here -->
  <div id="app"></div>
</body>
</html>

## index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'

/**
 * Initial State Data
 */
const defaultState = {
  messages: []
}

/**
 * Reducer Function
 */
const reducer = (state = defaultState, action) => {
  switch (action.type) {
    case RECEIVE_MESSAGES:
      return Object.assign({}, state, {
        messages: action.messages
      })

    case DELETE_MESSAGE:

      const messageIdx = event.nativeTarget.getAttribute('data-message-index')
      const message = store.getState().messages[messageIdx]
      actions.deleteMessage(message)

      console.log(action);

    case CREATE_MESSAGE:


    default: return state
  }
}

const store = createStore(reducer)

/**
 * Redux Actions with Constants
 */
const RECEIVE_MESSAGES = 'RECEIVE_MESSAGES'
const CREATE_MESSAGE = 'CREATE_MESSAGE'
const DELETE_MESSAGE = 'DELETE_MESSAGE'

const actions = {
  getMessages: () => {
    store.dispatch({
      type: RECEIVE_MESSAGES,
      messages: [
        'Hi there, this is a messages app',
        'Getting coffee with a friend'
      ]
    })
  },

  createNewMessage: message => {
    // TODO: Fill out action for creating a new message
    console.log('create new message');
  },

  deleteMessage: message => {
    store.dispatch({
      type: DELETE_MESSAGE,
      index
    })

  }
}

/**
 * Stateless App Component
 */
const App = ({ data, actions }) => {
  const messages = data.messages.map((message, index) => (
    <li key={message}>
      <p>{ message } <button data-message-index={index} onClick={actions.deleteMessage}>Delete Me</button></p>
    </li>
  ))

  return (
    <div>
      <h3>Messages</h3>
      <button onClick={actions.getMessages}>
        Refresh Messages
      </button>
      <ul>{ messages }</ul>
      <button onClick={actions.createNewMessage}>Add New Message</button>
    </div>
  )
}

/**
 * Render Function
 */
const render = () => {
  ReactDOM.render(
    <App
      data={store.getState()}
      actions={actions}
    />,
    document.getElementById('app')
  )
}

render()
store.subscribe(render)

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "react": "15.0.0-rc.2",
    "react-dom": "15.0.0-rc.2",
    "redux": "3.1.5",
    "babel-runtime": "6.6.1"
  }
}

## transpiled.js
'use strict';

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _reactDom2 = _interopRequireDefault(_reactDom);

var _redux = require('redux');

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

/**
 * Initial State Data
 */
var defaultState = {
  messages: []
};

/**
 * Reducer Function
 */
var reducer = function reducer() {
  var state = arguments.length <= 0 || arguments[0] === undefined ? defaultState : arguments[0];
  var action = arguments[1];

  switch (action.type) {
    case RECEIVE_MESSAGES:
      return (0, _extends3.default)({}, state, {
        messages: action.messages
      });

    case DELETE_MESSAGE:

      var messageIdx = event.nativeTarget.getAttribute('data-message-index');
      var message = store.getState().messages[messageIdx];
      actions.deleteMessage(message);

      console.log(action);

    case CREATE_MESSAGE:

    default:
      return state;
  }
};

var store = (0, _redux.createStore)(reducer);

/**
 * Redux Actions with Constants
 */
var RECEIVE_MESSAGES = 'RECEIVE_MESSAGES';
var CREATE_MESSAGE = 'CREATE_MESSAGE';
var DELETE_MESSAGE = 'DELETE_MESSAGE';

var actions = {
  getMessages: function getMessages() {
    store.dispatch({
      type: RECEIVE_MESSAGES,
      messages: ['Hi there, this is a messages app', 'Getting coffee with a friend']
    });
  },

  createNewMessage: function createNewMessage(message) {
    // TODO: Fill out action for creating a new message
    console.log('create new message');
  },

  deleteMessage: function deleteMessage(message) {
    store.dispatch({
      type: DELETE_MESSAGE,
      index: index
    });
  }
};

/**
 * Stateless App Component
 */
var App = function App(_ref) {
  var data = _ref.data;
  var actions = _ref.actions;

  var messages = data.messages.map(function (message, index) {
    return _react2.default.createElement(
      'li',
      { key: message },
      _react2.default.createElement(
        'p',
        null,
        message,
        ' ',
        _react2.default.createElement(
          'button',
          { 'data-message-index': index, onClick: actions.deleteMessage },
          'Delete Me'
        )
      )
    );
  });

  return _react2.default.createElement(
    'div',
    null,
    _react2.default.createElement(
      'h3',
      null,
      'Messages'
    ),
    _react2.default.createElement(
      'button',
      { onClick: actions.getMessages },
      'Refresh Messages'
    ),
    _react2.default.createElement(
      'ul',
      null,
      messages
    ),
    _react2.default.createElement(
      'button',
      { onClick: actions.createNewMessage },
      'Add New Message'
    )
  );
};

/**
 * Render Function
 */
var render = function render() {
  _reactDom2.default.render(_react2.default.createElement(App, {
    data: store.getState(),
    actions: actions
  }), document.getElementById('app'));
};

render();
store.subscribe(render);
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	<!-- put additional styles and scripts here -->
	</head>
	<body>
	<!-- put markup and other contents here -->
	<div id="app"></div>
	</body>
	</html>
	import React from 'react'
	import ReactDOM from 'react-dom'
	import { createStore } from 'redux'

	/**
	* Initial State Data
	*/
	const defaultState = {
	messages: []
	}

	/**
	* Reducer Function
	*/
	const reducer = (state = defaultState, action) => {
	switch (action.type) {
	case RECEIVE_MESSAGES:
	return Object.assign({}, state, {
	messages: action.messages
	})

	case DELETE_MESSAGE:

	const messageIdx = event.nativeTarget.getAttribute('data-message-index')
	const message = store.getState().messages[messageIdx]
	actions.deleteMessage(message)

	console.log(action);

	case CREATE_MESSAGE:


	default: return state
	}
	}

	const store = createStore(reducer)

	/**
	* Redux Actions with Constants
	*/
	const RECEIVE_MESSAGES = 'RECEIVE_MESSAGES'
	const CREATE_MESSAGE = 'CREATE_MESSAGE'
	const DELETE_MESSAGE = 'DELETE_MESSAGE'

	const actions = {
	getMessages: () => {
	store.dispatch({
	type: RECEIVE_MESSAGES,
	messages: [
	'Hi there, this is a messages app',
	'Getting coffee with a friend'
	]
	})
	},

	createNewMessage: message => {
	// TODO: Fill out action for creating a new message
	console.log('create new message');
	},

	deleteMessage: message => {
	store.dispatch({
	type: DELETE_MESSAGE,
	index
	})

	}
	}

	/**
	* Stateless App Component
	*/
	const App = ({ data, actions }) => {
	const messages = data.messages.map((message, index) => (
	<li key={message}>
	<p>{ message } <button data-message-index={index} onClick={actions.deleteMessage}>Delete Me</button></p>
	</li>
	))

	return (
	<div>
	<h3>Messages</h3>
	<button onClick={actions.getMessages}>
	Refresh Messages
	</button>
	<ul>{ messages }</ul>
	<button onClick={actions.createNewMessage}>Add New Message</button>
	</div>
	)
	}

	/**
	* Render Function
	*/
	const render = () => {
	ReactDOM.render(
	<App
	data={store.getState()}
	actions={actions}
	/>,
	document.getElementById('app')
	)
	}

	render()
	store.subscribe(render)
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"react": "15.0.0-rc.2",
	"react-dom": "15.0.0-rc.2",
	"redux": "3.1.5",
	"babel-runtime": "6.6.1"
	}
	}
	'use strict';

	var _extends2 = require('babel-runtime/helpers/extends');

	var _extends3 = _interopRequireDefault(_extends2);

	var _react = require('react');

	var _react2 = _interopRequireDefault(_react);

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

	var _reactDom2 = _interopRequireDefault(_reactDom);

	var _redux = require('redux');

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

	/**
	* Initial State Data
	*/
	var defaultState = {
	messages: []
	};

	/**
	* Reducer Function
	*/
	var reducer = function reducer() {
	var state = arguments.length <= 0 \|\| arguments[0] === undefined ? defaultState : arguments[0];
	var action = arguments[1];

	switch (action.type) {
	case RECEIVE_MESSAGES:
	return (0, _extends3.default)({}, state, {
	messages: action.messages
	});

	case DELETE_MESSAGE:

	var messageIdx = event.nativeTarget.getAttribute('data-message-index');
	var message = store.getState().messages[messageIdx];
	actions.deleteMessage(message);

	console.log(action);

	case CREATE_MESSAGE:

	default:
	return state;
	}
	};

	var store = (0, _redux.createStore)(reducer);

	/**
	* Redux Actions with Constants
	*/
	var RECEIVE_MESSAGES = 'RECEIVE_MESSAGES';
	var CREATE_MESSAGE = 'CREATE_MESSAGE';
	var DELETE_MESSAGE = 'DELETE_MESSAGE';

	var actions = {
	getMessages: function getMessages() {
	store.dispatch({
	type: RECEIVE_MESSAGES,
	messages: ['Hi there, this is a messages app', 'Getting coffee with a friend']
	});
	},

	createNewMessage: function createNewMessage(message) {
	// TODO: Fill out action for creating a new message
	console.log('create new message');
	},

	deleteMessage: function deleteMessage(message) {
	store.dispatch({
	type: DELETE_MESSAGE,
	index: index
	});
	}
	};

	/**
	* Stateless App Component
	*/
	var App = function App(_ref) {
	var data = _ref.data;
	var actions = _ref.actions;

	var messages = data.messages.map(function (message, index) {
	return _react2.default.createElement(
	'li',
	{ key: message },
	_react2.default.createElement(
	'p',
	null,
	message,
	' ',
	_react2.default.createElement(
	'button',
	{ 'data-message-index': index, onClick: actions.deleteMessage },
	'Delete Me'
	)
	)
	);
	});

	return _react2.default.createElement(
	'div',
	null,
	_react2.default.createElement(
	'h3',
	null,
	'Messages'
	),
	_react2.default.createElement(
	'button',
	{ onClick: actions.getMessages },
	'Refresh Messages'
	),
	_react2.default.createElement(
	'ul',
	null,
	messages
	),
	_react2.default.createElement(
	'button',
	{ onClick: actions.createNewMessage },
	'Add New Message'
	)
	);
	};

	/**
	* Render Function
	*/
	var render = function render() {
	_reactDom2.default.render(_react2.default.createElement(App, {
	data: store.getState(),
	actions: actions
	}), document.getElementById('app'));
	};

	render();
	store.subscribe(render);