JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xpa1/t39.3284-6/12056978_1532581897044561_572594621_n.js"></script>
<script src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xfa1/t39.3284-6/12056978_1723186904561917_1347349243_n.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.0.0/react-redux.js"></script>
<script src="https://rawgit.com/pitrho/react-gridstack/master/src/grid-stack.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
<div id="log">
</div>
JavaScript 1.7
const { Component, PropTypes } = React;
const { Provider, connect } = ReactRedux;
const { createStore, combineReducers } = Redux;
const containerElement = document.getElementById('container');
const initialState = getInitialState();
const { GridStack, GridStackItem } = GridStack;
/* Set up Reducers */
const pinboardReducer = (state = initialState, action) => {
switch (action.type) {
case ADD_CARD:
return assign({}, state, {
cards: state.cards.push(action.cards)
});
default:
return state;
}
}
const rootReducer = combineReducers({ pinboardReducer });
/* Logging */
const store = createStore(rootReducer);
const render = () => { document.getElementById("log").innerText = JSON.stringify(store.getState()); }
store.subscribe(render);
render();
function Pinboard(props) {
const { cards } = props;
console.log('pinboard ',cards);
return (
<div className="pinboard">
<Grid cards={cards} />
</div>
);
}
function Grid(props) {
const { cards } = props;
console.log(`Grid cards `,cards);
return (
<GridStack
className="layout"
cols={12}
rowHeight={30}
width={120}
>
{cards.map((card,i) => {
return (
<GridStackItem key={i}
id={`viz-${card.vizId}`}
x={card.x}
y={card.y}
width={card.width}
height={card.height} >
<div>
Viz {card.vizId}
</div>
</GridStackItem>
);
})}
</GridStack>
);
}
/* Setting up the Pinboard App */
class PinboardApp extends Component {
constructor(props) {
super(props);
console.log("props", props);
...