JavaScript
reactjs
React

小規模開発のためにreact-micro-containerを使ってみた

普通にreactを使っていると明らかにオーバースペックでしか無かったので,下記記事のライブラリを使用してみました.その際の流れを,忘れぬようにメモしておきます.

小さいReactアプリケーションのためのライブラリ書いた

動く環境を用意する

$ create-react-app micro
$ npm install react-micro-container

これで,動く環境は用意できます.

書く

上記の記事に書いてある通りにコードを改変していきます.
create-react-appには無駄なものが含まれているので,一度削除して作成しなおします.

$ rm -rf src/*
$ touch src/index.js
$ mkdir src/containers
$ touch src/containers/app.js
$ mkdir src/components
$ touch src/components/app.js

まず,htmlを一番単純なものに書き換えましょう.

public/index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>count</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

上記の記事には,index.js(記事内ではapp.js)と,container内のapp.jsに,import React from 'react';の文が書かれていません.この文がないとエラーを引き起こすので書きましょう.それ以外にも,多少の変更を加えています.

src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import CounterContainer from './containers/app';

ReactDOM.render(<CounterContainer />, document.getElementById('root'));
src/containers/app.js
import React from 'react';
import MicroContainer from 'react-micro-container';
import Counter from '../components/app';

export default class CounterContainer extends MicroContainer {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    this.subscribe({
      increment: this.handleIncrement,
      decrement: this.handleDecrement,
    });
  }

  handleIncrement(count) {
    this.setState({ count: this.state.count + count });
  }

  handleDecrement(count) {
    this.setState({ count: this.state.count - count });
  }

  render() {
    return <Counter dispatch={this.dispatch} {...this.state} />;
  }
}
src/components/app.js
import React from 'react';

export default class Counter extends React.Component {
  render() {
    return (
      <div>
        <div>{this.props.count}</div>
        <button onClick={() => this.props.dispatch('increment', 1)}>+1</button>
        <button onClick={() => this.props.dispatch('decrement', 1)}>-1</button>
        <button onClick={() => this.props.dispatch('increment', 100)}>+100</button>
      </div>
    );
  }
}

動かす

$ npm run startすれば,自動でデフォルトブラウザが開き,起動します.