function foo()
{
}

2016年4月30日土曜日

Reactの勉強(3) - まだまだReact

カウントアップやカウントダウンができる画面を作ってみます

1. Reactのコンポーネントを作ります
- index.js
import React from 'react';
import ReactDOM from 'react-dom';

let Counter = React.createClass({
  render() {
    return (
      <h1>Counter</h1>
    );
  }
});
ReactDOM.render(<Counter />, document.getElementById('root'));
Counterと表示されるようになります。Reactではコンポーネントを組み合わせて画面を作るようです。
2. カウントアップとカウントダウンの機能を作っていきます。
- index.js
import React from 'react';
import ReactDOM from 'react-dom';

let Counter = React.createClass({
  getInitialState() {
    return {
      count: 10
    };
  },

  onPlusClick() {
    this.setState({count: this.state.count + 1});
  },

  onMinusClick() {
    this.setState({count: this.state.count -1 });
  },

  render() {
    return (
      <div>
        <h1>Counter</h1>
        <h2>{this.state.count}</h2>
        <button onClick={this.onPlusClick}>+</button>
        <button onClick={this.onMinusClick}>-</button>
      </div>
    );
  }
});
ReactDOM.render(<Counter />, document.getElementById('root'));
  • getInitialState: カウンタの初期値を用意するための関数。初期値を10にします
  • onPlusClick, onMinusClick: カウンタの値を増減させます。ボタンのonClickと結びつけます。
  • this.state.count: カウンタの値にアクセスします。

3. コンポーネントを別ファイルに分けます
- Counter.js
import React from 'react';

const Counter = React.createClass({
  getInitialState() {
    return {
      count: 10
    };
  },

  onPlusClick() {
    this.setState({count: this.state.count + 1});
  },

  onMinusClick() {
    this.setState({count: this.state.count -1 });
  },

  render() {
    return (
      <div>
        <h1>Counter</h1>
        <h2>{this.state.count}</h2>
        <button onClick={this.onPlusClick}>+</button>
        <button onClick={this.onMinusClick}>-</button>
      </div>
    );
  }
});
export default Counter;
- index.js
import React from 'react';
import { render } from 'react-dom';
import Counter from './Counter';

render(<Counter />, document.getElementById('root'));
4. 親からカウンタへプロパティとしてタイトル文字列と初期値を渡すように変更します
- index.js
import React from 'react';
import { render } from 'react-dom';
import Counter from './Counter';

render(<Counter title="Counter Sample" initialCount={5}/>, document.getElementById('root'));
- Counter.js
import React from 'react';

const Counter = React.createClass({
  getInitialState() {
    return {
      count: this.props.initialCount
    };
  },

  onPlusClick() {
    this.setState({count: this.state.count + 1});
  },

  onMinusClick() {
    this.setState({count: this.state.count -1 });
  },

  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <h2>{this.state.count}</h2>
        <button onClick={this.onPlusClick}>+</button>
        <button onClick={this.onMinusClick}>-</button>
      </div>
    );
  }
});
export default Counter;
5. ボタンを再利用可能な部品にしてみます
- PlusMinuxButton.js
import React from 'react';

const PlusMinusButton = React.createClass({
  render() {
    return (
      <div>
        <button onClick={this.props.onPlusClick}>{this.props.plus}</button>
        <button onClick={this.props.onMinusClick}>{this.props.minus}</button>
      </div>
    );
  }
});

export default PlusMinusButton;
- Counter.js
import React from 'react';
import PlusMinusButton from './PlusMinusButton';

const Counter = React.createClass({
  getInitialState() {
    return {
      count: this.props.initialCount
    };
  },

  onPlusClick() {
    this.setState({count: this.state.count + 1});
  },

  onMinusClick() {
    this.setState({count: this.state.count -1 });
  },

  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <h2>{this.state.count}</h2>
        <PlusMinusButton
          onPlusClick = {this.onPlusClick}
          onMinusClick = {this.onMinusClick}
          plus = {this.props.plus}
          minus = {this.props.minus}
        />
      </div>
    );
  }
});
export default Counter;
- index.js
import React from 'react';
import { render } from 'react-dom';
import Counter from './Counter';

render(
  <div>
    <Counter title="Car" initialCount={0} plus="Saw Car" minus="Car Left" />
    <Counter title="Train" initialCount={0} plus="Saw Train" minus="Train Left" />
  </div>,
document.getElementById('root'));
6. PlusMinusButtonを関数型な部品に書き換えてみます
- PlusMinuxButton.js
import React from 'react';

const PlusMinusButton = ({onPlusClick, onMinusClick, plus, minus}) => {
    return (
      <div>
        <button onClick={onPlusClick}>{plus}</button>
        <button onClick={onMinusClick}>{minus}</button>
      </div>
    );
}

export default PlusMinusButton;

0 件のコメント:

コメントを投稿