React使ってSPAを作るよ(8)


React使ってSPAを作るよ目次

React使ってSPAを作るよ(7)の続きです。

ちょっとPHPの環境設定でてこずってしまい進みませんでした・・・

こちらのブログを参考に、ローカルでPHPが動く環境を作りlocalhostでアクセスすることによって、ChromeでもJSONファイルにアクセスできるようになりました。

Laravelを導入しようということになったのでディレクトリを整理したりいろいろしてましたが、Reactのやり方は変わらないのでこのまま続けて書いていってしまいます。

今回は、JSON取得部分を梃入れしたのでメモしておきます。

古臭かった$.ajaxの記述を修正する

さて、前回やった$.ajax部分の記述がこうなってました。

success/errorの記述はどうも古臭いやり方のようです。

.then()のほうがスッキリする気もしますが、どの状況でどの処理をしてるかわかりやすくしておきたいので、.done().fail()でいきたいと思います。

これまでは.bind(this)としてthisを掴んでいたんですが、どうやったらいいかわからなかったので変数tにthisを格納してしまい、

としました。

もっとちゃんとしたやり方あるぞ!という方は、ぜひ教えてください(人∀・)

それから、PHPを通したことでクロスドメインに関しては解決できているので、JSONPとcallbackをやめました。
dataTypeをjsonに戻し、jsonpcallbackは削除。
さらに、PHP側も

こうなっていたのが

これだけで正常に返るようになりました。

短いですが今回はここまで。
次回、JSXファイルをヘッダやフッタなどコンポーネント別に分割します!

React使ってSPAを作るよ目次