CreateReactApp編(2)|React使ってSPAを作るよ


CreateReactApp編(1)|React使ってSPAを作るよの続きです。

CreateReactAppで構築したプロジェクトに既存のソースを移す

さっそく既存のソースを移します。
とりあえずcomposer.jsonとか/resourcesディレクトリとか、Laravel側で必要なファイルはそのままコピーしてきます。
さらにjsxファイルもsrcディレクトリに入れちゃいます。

create-react-appで作られたサンプルのソースは、.jsxではなく、.jsファイルですね。
ES6で書かれているようです。
つい先日TypeScriptの導入に挑戦したところなので、classの書き方はなんとなく見覚えがある感じです。

まずはエントリーポイントとなるIndex.jsを見ていきます。
(もとのプロジェクトではapp.jsxでしたがわかりやすいようにリネームしました。)

まず、サンプルアプリに倣ってReactとReactDOMをimportします。

Reactのところで{Component}をわざわざ指定していますね。
これはTypeScriptをやったときに型付きで

としていたところが

こういうふうに書くようになっています。

う~ん。

ってな具合に書き方が変わってきていますね。

そして、ほかのjsファイルからコンポーネントをimportします。

あとはほとんど変わりませんね。
render()の中身はこれまでJSXで書いてきたのとほぼ同じように書けます。

ES6で書くときに気を付けないといけないこと

Index.jsは簡単に済みましたが、ほかのファイルはそう簡単にはいきません。
たとえば、Tag.jsですが…
こういったコンポーネントがあります。

パッと見大きく異なるのは、constructorですね。
TypeScriptのときにもハマったように、onClickのイベントについて、constructorでthisをbindする必要があります。

あとは、関数のところの書き方も、これまで

となっていたところが、

だけでいけるようになりました。
閉じ括弧のあとのカンマも不要です。

それからもうひとつ。
これまでJSONで取得してきたデータをリストコンポーネントに渡すところで、データを格納するdataの初期化をgetInitialStateで行っていました。
それも、constructorで指定することになります。

・・・といった修正を全体にかけたらできあがりです!

GitHubにソースあげておきました。
https://github.com/mayo31/minami-create-react-app

開発環境の依存関係がだいぶスッキリしますし、特に問題なさそうだったら、これをmasterにして進めていこうかな~と思いました。