Skip to content

Instantly share code, notes, and snippets.

@dmackerman

dmackerman/esnextbin.md

Last active March 28, 2016 16:15
Show Gist options
  • Save dmackerman/7fb4121cafc31fd84ee8 to your computer and use it in GitHub Desktop.
Save dmackerman/7fb4121cafc31fd84ee8 to your computer and use it in GitHub Desktop.
Download ZIP
esnextbin sketch
Raw
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>
Raw
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)
Raw
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"
}
}
Raw
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment