18
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ReactJS + Flumpt のカウンターのサンプルその1

Last updated at Posted at 2015-12-20

目的

Flumpt がどのようなものか知るためにちょっと触ってみる。

追記:その2

ファイル構成

.
├── 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));

表示

$ python -m SimpleHTTPServer 8000

スクリーンショット 2015-11-07 14.48.21.png

感想

  • 書いてみたら思っていたよりシンプルでなかなか書きやすく良い感じかもしれない。
  • import * as React from 'react'; の * を書かない書き方にできないかしら?
  • 最終行の app.update(_initialState => (_initialState)); の書き方これでいいのかしら?

追記

2015-12-27

テストを追加してみた

参考

18
18
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?