yutaponのブログ

javascript界隈の興味あるネタを備忘録的に残しておく場所

React+FluxでTodoMVCを作ってFluxについて学んでみた

ちょっと前にReactを使って簡単なアプリケーションを作ってみたのですが

React入門用に簡単なアプリケーション作ってみる - yutaponのブログ

今回はFluxアーキテクチャについて学びたいと思ったので、TodoMVCを題材に写経してみました。
構成・ロジックは参考にしつつ、ES6構文で書くようにしてます。

参考にしたコードはfacebook/fluxのexamplesのコードになります。

 

作ったコードはここに置いていて、

https://github.com/sskyu/react-flux-todomvc-example/tree/blog-20150427

動かすといつものTODOリストが表示されます。

f:id:sskyu:20150427005730p:plain

続きを読む

KaomojifyJSとかいうUglifyJSの亜種を試してみた

5 Minites of JavaScriptで紹介されていたKaomojifyJSをちょっと触ってみたという記事。

Nekuromento/UglifyJS · GitHub

はじめに

そもそもuglifyjsはjsのスペースとか改行などを取り除いたり、変数名を短くしてコードを圧縮するツールです。

生成されたコードは人間が読めないようなものになるので、難読化するツールとも言えます。

kaomojifyjsは難読化する際に、変数名などを顔文字化するツールです。
つまりネタツールのようです。

ちょっと触ってみた感じ、単に動かすだけならコマンドライン上で実行するのが
簡単だったので動かす手順を紹介します。

続きを読む

React入門用に簡単なアプリケーション作ってみる

React入門系の記事はもう結構出尽くしてる感ありますがせっかくなので私も。

今回はReact v0.13RC2を使って↓のアプリケーションを写経してみます。(Authorは私ではありません)

見ての通り、抵抗の値を計算するアプリケーションです。
Reactで書かれていたり、SVG使ってたり面白いソースですね。
ちなみに抵抗の色の仕様はこのようになってます。

抵抗のカラーコード

はじめに

React v0.13RC2を使う理由は現時点で最新版ということと、v0.13.0beta1でES6のclass構文が使えるようになったからです。

jsfiddleのソースは1ファイルにまとめて書かれていますが、これを1コンポーネント1ファイルに分割して書いてみます。

React(JSX)のビルドにはBabelが使えるので、前回作ったスケルトンの上に作っていきます。

続きを読む