コンポーネントの特徴

親子関係
状態を持つ

親子関係

コンポーネントは、親子関係になっている。

例） Page => Header => LoginButton

Header.js

class Header extends Component {
  render() {
    return (
      <div>
        <LoginButton></LoginButton>
      </div>
    );
  }
}

状態を持つ

コンポーネントは、自身の状態でDOMを書き換える

LoginButton.js

class LoginButton extends Component {
  render() {
    const msg = this.state.loggeIn ? "ログアウト" : "ログイン";

    return (
      <div>{ msg }</div>
    );
  }
}

React.jsでは

props：親から渡される情報
state：自Componentの状態

親から初期状態としてpropsを渡し、stateで自身の状態を管理する。

Case1

親から渡されたpropsで、振る舞いを変える。

例）共通の振る舞いをするボタンで、表示するテキストを変えたい

Button.js

class Button extends Component {
  render() {
    return (
      <div>{ this.props.text }</div>
    );
  }
}

parent.js

class Page extends Component {
  render() {
    return (
      <LoginButton text="try Login" />
    );
  }
}

Case2

イベントを受け、自身のstateを変更する。

例）ボタンがクリックされたら、表示を変える

Count.js

class Button extends Component {
  add() {
    this.setState({ count: this.state.count + 1 } );
  }

  render() {
    return (
      <div>
        { this.state.count }
        <button onClick={ () => this.add() } />
      </div>
    );
  }
}

Case3

親から受け取ったpropsをstateの初期値とする。

CountButton.js

class CountButton extends Component {
  constructor(props) {
    this.state = { count: props.defaultCount };
  }

  render() {
    return (
      <div>
        { this.state.count }
        <button onClick={ () => this.add() } />
      </div>
    );
  }
}

parent.js

class Parent extends Component {
  render() {
    return <CountButton defaultCount={5} />
  );
}

「コンポーネントを作る」とは

1. そのページの中で、どこをコンポーネントにするか決める

「サイドバー」があって、その中に「カード」があって、...

2. コンポーネントへのInput（props）を決める

どこが共通化できるのか（コンポーネントのJSXにベタ書き）
どこが汎化できるのか（親からpropsを渡す）

3. そのコンポーネントの状態（state）を考える

そのコンポーネントが、どういう状態を持つかを考える

例）フォローボタン

フォロー済み/未フォロー

React.js コンポーネント入門（props/state）