ReactJS+Flumpot 카운터 샘플 중 하나

의 목적

Flumpt가 어떤 물건인지 알기 위해 만져보세요.
추기: 두 번째

파일 구성

.
├── dest
│   └── app.js
├── index.html
├── package.json
└── src
    └── app.jsx

package

pacage.json

{
  "devDependencies": {
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babelify": "^7.2.0",
    "browserify": "^12.0.1",
    "watchify": "^3.6.1"
  },
  "scripts": {
    "build": "browserify src/app.jsx -o dest/app.js -t [ babelify --presets [ es2015 react ] ]",
    "watch": "watchify -t [ babelify --presets [ es2015 react ] ] src/app.jsx -o dest/app.js -v"
  },
  "dependencies": {
    "flumpt": "^0.1.3",
    "flux": "^2.1.1",
    "react": "^0.14.3",
    "react-dom": "^0.14.3"
  }
}

실행

$ npm install
$ npm run build
$ npm run watch

code

src/app.jsx

'use strict';

import * as React from 'react';  //eslint-disable-line
import {Flux, Component} from 'flumpt';
import {render} from 'react-dom';


class CounterComponent extends Component {
  render() {
    return (
      <div>
        <p>count: {this.props.count}</p>
        <div>
          <button onClick={() => this.dispatch('increment')}>+1</button>
          <button onClick={() => this.dispatch('decrement')}>-1</button>
        </div>
      </div>
    );
  }
}


class App extends Flux {
  subscribe() {
    this.on('increment', () => {
      this.update(({count}) => {
        return {count: count + 1};
      });
    });
    this.on('decrement', () => {
      this.update(({count}) => {
        return {count: count - 1};
      });
    });
  }
  render(state) {
    return <CounterComponent {...state}/>;
  }
}

const app = new App({
  renderer: el => {
    render(el, document.querySelector('.js-container'));
  },
  initialState: {count: 0},
  middlewares: [
    // logger
    (state) => {
      console.log(state);
      return state;
    }
  ]
});

app.update(_initialState => (_initialState));