コンポーネント間のpropsの受け渡し - React入門

React入門」、前回の「Reactで作るTODOアプリ後編」ではこれまでの総復習として簡単なTODOアプリを作成しました。今回は情報をAjaxで取得・更新が行えるように改造していきます。

今回はあくまで練習なのでAPIにはJSON Serverを利用します。

環境構築

まずは「Create React App」を利用して環境を構築していきます。

以下のコマンドでReactのインストールを行います。

これで http://localhost:3000 でReactアプリの表示が可能になります。

次にJSON Serverの設定を行います。
以下のコマンドでJSON Serverのインストールを行い、

db.json というファイル名で以下のようなJSONファイルを作成します。

標準では3000番ポートで立ち上がってしまうので、以下のコマンドで3001番ポートで立ち上がるように設定しています。

App.jsは以下のように設定します。

各メソッドは以下のような内容になっています。

JSX部分

JSXでは現在のStateをli要素で表示して、値を入力フィールドに代入しています。
編集ボタンを押下時にupdateTodoメソッドを実行して、編集時にdeleteTodoメソッドを実行しています。
また、追加ボタン押下時にaddTodoメソッドを実行してTODOを追加しています。

初期表示時

初期表示時にはライフサイクルイベントのcomponentWillMount()内でfetchResponseメソッドを実行しています。

Ajaxで情報を取得

fetchResponse()ではAjaxで取得したTODO一覧をStateにセットしています。

新規登録時

新規登録時にはAjaxで入力された値の更新を行ってからfetchResponse()で情報の再取得を行っています。

編集時

編集時には現在のTODO情報をPUTで送信しています。
Stateは入力のタイミングで変更されているため編集後にStateを操作する必要はないです。

削除時

削除時には現在のTODO情報をDELETEで送信して削除を行います。
削除後には現在のStateから削除したTODOを取り除く必要があります。

これでReactでAjaxを利用することができるようなりました。
次回はReactとよく一緒に利用されるライブラリを紹介いたします。