【2016/12/17 追記】
React(flux)を使ったブログエンジンを開発しました!
何か参考になれば嬉しいです!
Notee
https://github.com/funaota/notee
最近React.jsを始めた新米javascripterです!
こんな感じで作ってきました。
【rails/非同期】js初心者がいいね機能をReact.jsで実装してみた。その①
http://qiita.com/funao/items/60aa3d7e36cf93e0d832
【rails/非同期】js初心者がコメント機能をReact.jsで実装してみた。その①
http://qiita.com/funao/items/55a91ff1732b9c825630
ただ、Fluxがまだいまいちピンときてなかったので、今回しっかり勉強してみました。そのときに役に立った記事をまとめました。
役に立った記事一覧
Fluxが必要な理由が分かる記事
ReactとFluxとReduxについて順を追って整理する
https://hogehuga.com/post-1095/
この記事のおかげで、なんでFluxの方式が必要なのかが分かります!
必要性がわかったあとだと、めっちゃ理解が早い気がします。
Fluxの基礎的な部分がめっちゃ分かる記事
Reactの単純なサンプルでFluxの実装を解説
http://mae.chab.in/archives/2747
こちらは前提になる知識から、Fluxを使う場合、使わない場合を比較してくれたり、丁寧に説明してくれます。
これを読めば大体おおまかに理解出来るはずです。
短期間でFluxを実装してみる記事
10分で実装するFlux
http://azu.github.io/slide/react-meetup/flux.html
めちゃめちゃ簡単にしかも図解してまとめてくれます。
一緒に作りながらやっちゃえばたくさんみにつくはず!
コードの全体像はこちら
https://github.com/azu/mini-flux
railsでfluxを使う時にありがたい記事
react(flux)とrails(turbolinks)の親和性
http://qiita.com/8398a7/items/d2a9bd9be0476213e086
Fluxの認識を自分なりにまとめました(随時更新します!2016/05/10)
Fluxは、Component間のやりとりをわかりやすくするための構造を作るためにある。
Fluxには、View、Store、Actionがある。
- Viewは、名前通りViewの表示と、イベント発火
- Storeは、情報の保持、変更などを司ります
- Actionは、Viewでイベント発火したものを受け取り、処理を行います。
fluxの流れ
- View → Action → ( Dispatcher, EventEmitter ) → Store → View
ActionからStoreに直接伝えられないから、DispatcherとかEventEmitterを通じてStoreに伝えます。