simple-react playground.md

Simple React Playground

About

This is a playground using the following technologies:

• react
• react-heatpack
• react-pure-render
• react-redux
• redux
• redux-logger

Getting Started

git clone https://gist.github.com/e831cf5f6f7129e7bff5.git playground
cd playground
npm install
npm start

Then point your browser at http://localhost:3000

.gitignore

node_modules/

index.js

import createLogger from 'redux-logger';
import PureComponent from 'react-pure-render/component';
import React from 'react';
import ReactDOM from 'react-dom';
import { connect, Provider } from 'react-redux';
import { createStore, combineReducers, applyMiddleware, compose, bindActionCreators } from 'redux';

/**
 * Actions
 */

const TICK = 'CLOCK_TICK';

function tick() {
  return {
    type: TICK,
  };
}

/**
 * Reducers / Store
 */

function index(state = { now: new Date() }, action) {
  switch (action.type) {
    case TICK:
      return { ...state, now: new Date() };

    default:
      return state;
  }
}

const reducers = combineReducers({
  index,
});

const finalCreateStore = compose(
  applyMiddleware(createLogger({ collapsed: true }))
)(createStore);

function configureStore(initialState) {
  const store = finalCreateStore(reducers, initialState);

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('./index.js', () => {
      const nextRootReducer = reducers;
      store.replaceReducer(nextRootReducer);
    });
  }

  return store;
}

/**
 * Components
 */

class Clock extends PureComponent {
  render() {
    const { value } = this.props;

    return <div>{ value.toString() }</div>
  }
}

class DumbIndex extends PureComponent {
  componentDidMount() {
    const { tick } = this.props;

    this._intervalID = setInterval(() => tick(), 1000);
  }
  componentWillUnmount() {
    clearInterval(this._intervalID);
  }
  render() {
    const { index } = this.props;

    return (
      <div>
        <h2>Hello worlds!</h2>
        <Clock value={ index.now } />
      </div>
    );
  }
}

const Index = connect(
  state => ({
    index: state.index,
  }),
  dispatch => bindActionCreators({
    tick,
  }, dispatch)
)(DumbIndex);

/**
 * Entry Point
 */

const store = configureStore();

ReactDOM.render(
  <Provider store={ store }>
    <Index />
  </Provider>,
  document.querySelector('#app')
);

package.json

{
  "name": "simple-react",
  "dependencies": {
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "react-pure-render": "^1.0.2",
    "react-redux": "^4.0.6",
    "redux": "^3.0.6",
    "redux-logger": "^2.4.0",
    "redux-thunk": "^1.0.3"
  },
  "scripts": {
    "start": "heatpack index.js"
  },
  "devDependencies": {
    "react-heatpack": "^3.0.1"
  }
}