React+Reduxの練習:ポモドーロタイマー


React.jsを試してみるか、ということで、ここ数日いろいろ見ながら真似しながら、ポモドーロタイマーを実装することにしてみた。

ポモドーロテクニックとは – はてなキーワード

Reactも、ReduxもES2015で書いてみたのでそちらも、さらにはwebpackも初めて使ってみました。なんとか動くようにはなったみたいです。

Reducer同士の連携を無理やりContainerでやっているけど、本来の使い方はこうではないような気がするんですが…ひとまずは練習ということで、他にも作ってみて、良いやり方があれば修正していこうと思います。(SettingViewで保存したsettingのstateを別のReducerであるtimerで参照する方法がわからなかったので、無理やり両方にsettingというstateを持たせて、settingを保存する際に両方にActionを飛ばしています…。)

React+Reduxを触ってみて、FlashでPureMVCを使っていた時になんだか似ているなぁと思ったりしました。ComponentをGUIで作ったりできればよりFlashっぽいような気もする。そのうちDreamweaverにそんな機能ついたりして。

こういうのもあるらしい。→https://github.com/ipselon/structor

Haxe+Reactもわりと相性が良いようなので、Flash風にHaxeで実装してみたら案外自分にしっくり来たりするかもしれません。

HaxeとReact – Qiita

Reactで作ろうとした場合、CSSってどうするのがいいのだろう、とちょっと考えてしまいます。ComponentとSassファイルを同一化させて、Componentごとにスタイルを書いていくのか、インラインにstyleを書いていくのが良いのか…。JSファイルとSassファイルがバラバラに管理されているのも気持ち悪い気がしますが、HTMLのタグをパーツ化したと思えば、CSSは独立していても良さそうです。

現状は線引きをどうするかはわからないですが、いろいろ作ってみて、探ってみようと思います。

参考 :

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です