CSSをいじりたおす根気がなかった・・・ ということで話題を変えてFigwheelの作者でもあるBruce Haumanが作ったツールであるDevcardsについて書く。 Devcardsとは DevcardsはClojureScript+Reactで作ったコンポーネントの動作を試すための環境を提供するツー…

ReactチュートリアルのShowing the Movesから最後のImplementing Time Travelまで。 Showing the Moves https://facebook.github.io/react/tutorial/tutorial.html#showing-the-moves 前回作成したhistoryデータを使って過去の動きを表示するようにする。 Ja…

最後までやるつもりだったのだが、長くなったので今回はStoring a Historyだけ。 https://facebook.github.io/react/tutorial/tutorial.html#storing-a-history これまでReactチュートリアルでは、まずSquareを状態を持ったコンポーネントとして実装し、その…

公式チュートリアルのFunctional ComponentsからDeclaring a Winnerまで。 Functional Components 前回散々JavaScript版が明示的じゃない、ボイラープレートが多いと煽っていたが、実際にはJSでも純粋関数的に書くとより簡潔になる： function Square(props)…

React公式チュートリアルを進める。今回はPassing Data Through PropsからLifting State Upまで。 Passing Data Through Props https://facebook.github.io/react/tutorial/tutorial.html#passing-data-through-props 親コンポーネント（つまり呼び出し側の…

Reactの公式ページに基本概念などの説明のためのチュートリアルがある： facebook.github.io これをClojureScript/Reagentでやっていきたい。 最終的な成果物は簡単な○×ゲーム。 HTMLやCSS、そしてReact Componentの大枠はすでに出来上がっていて、チュート…

Reagentでは、Hiccup構文を使ったコンポーネント関数とReagent Atomを使って、複雑な状態を持つクライアントサイド・アプリケーションを作成できる。 前回の例ではコードをなるべく単純に留めるために、トップレベルでReagent Atomを定義し、各コンポーネン…

さて、Reagentの二大要素の二つ目であるReagent Atomについて。 Reagentでは、コンポーネントの可変な状態を保持するために特殊なAtomを用意している。 と言っても概念・機能は通常のClojureのAtomとほとんど同じで、Immutableなデータ構造へのポインタのよ…

ReactのClojureScript WrapperであるReagentライブラリについて。 前回書いたとおり、ClojureScriptには有名なReact Wrapperが三つある。Om/Om-Next、Quiescent、そしてこのReagentである。 最初の二つの特徴を非常にざっくりと要約するなら： Om/Om-Nextは…

Facebookが提供するJavaScriptライブラリであるReactについていろいろと書こうと思う。 まず、私自身がReactについて調べていた時に大変参考になった記事を三つ挙げる： qiita.com mizchi.hatenablog.com qiita.com 本記事と前後してこれらも読めば、Reactに…