親から子へ値を渡すprops

props（「プロパティ」の意味）→データの入ったオブジェクト

▼ParentコンポーネントがButtonコンポーネントを呼び出すときにpropsとして{ value: 'ボタン' }を渡してる

import React from 'react';

// 子
export class Button extends React.Component {
  render() {
    return (
      <button className="c-button-primary">
        { this.props.value }
      </button>
    );
  }
}

// 親
export class Parent extends React.Component {
  renderButton(val) {
    return <Button value={val} />;
  }

  render() {
    return (
      <div>
        <div className="l-buttonWrap">
          {this.renderButton('ボタン')}
        </div>
      </div>
    );
  }
}

モジュールをインポートするときのリマインド

• importの書き方はMDNを参照
• "./"は現在の場所を表す