React入門メモ

今後使いそうな気配を察知したためReactに入門した。jQueryでやってたことがどうなるのか体感するためにjQueryで書いた簡単なコードをReactに置き換えてみるテスト。

ソース。

React 環境構築

先人たちの知識を借りて(ググって)、特にハマるポイントはなかった。
create-react-appをインストールできたらローカルサーバを気軽に立ち上げられる環境になって一気に捗った。

子・孫コンポーネントへの関数の渡し方

class Main extends React.Component{
  constructor(props){
      // おまじない
      super(props);
      // コンポーネントの状態を定義する≒画面の変動要素をここで管理
      this.state = {
          cards: []
      };
      // 子・孫で参照する時のthisを固定するためのおまじない
      this.deleteCard = this.deleteCard.bind(this)
  };
  deleteCard(index){
    // Removeボタンが押されたら押されたところのカードを消す処理
    // jQueryでは直接DOM要素を消すが、Reactではstateを消すことで再レンダリング時に最新のstateを見ることでカードが消える
    this.state.cards.splice(index, 1);
    // stateの保存
    this.setState({
      cards : this.state.cards
    });
  };
  onSortEnd = ({oldIndex, newIndex}) => {
    this.setState({
      cards: arrayMove(this.state.cards, oldIndex, newIndex),
    });
  };
  render(){
      return (<main>
                  // 略
                     // 子コンポーネントの引数名={this.関数名}
                     <Cards items={this.state.cards} onSortEnd={this.onSortEnd} deleteCard={this.deleteCard}/>
                  // 略
              </main>
      );
  }
}

// 親の<Cards />のところで設定した引数名を指定(親の関数が渡ってくる)
const Cards = SortableContainer(({items, deleteCard}) => {
  return (
    <div>
      {items.map((value, index) => (
        // 孫コンポーネントの呼び出し。孫の引数名={関数名}とする
        <Card key={`item-${index}`} index={index} i={index} title={value.title} bgcolor={value.bgcolor} deleteCard={deleteCard}/>
      ))}
    </div>
  );
});

// 子の<Card />のところで設定した引数名を指定(親から子に割った関数が渡ってくる)
const Card = SortableElement(({title,bgcolor,i,deleteCard})  =>
<div className="card mb-1">
  <div className="card-header">
      <h3>{title}</h3>
      // onイベント名={() => 関数名(引数)}
      <button type="button" id="remove-btn" className="btn btn-danger" onClick={() => deleteCard(i)}>REMOVE</button>
  </div>
  <div className={"card-body " + bgcolor}>
      <h5 className="card-title">Special title treatment</h5>
      <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
      <a href="#" className="btn btn-primary">Go somewhere</a>
  </div>
</div>

そのほか

要素をドラッグ&ドロップで入れ替えられるようにするのにはreact-sortable-hocを使用した。


jQueryではjQueryUIを使っていたけどまったく同じような操作感で実装できた。