どのようにClojureScriptで機能的なフロントエンドを構築し、反応を学ぶ.

あなたはおそらく反応について聞いて、試薬について聞いたか?試薬はclojurescriptと反応の間の最小限のインタフェースです.
ClojuReScriptは、Elmとして、reasonmlとecmascriptコンパイル/移行JavaScriptに.
試薬を使用すると、プレーンなclojurescript関数やデータ構造を使用しないコンポーネントを定義できます.
いくつかの例を見てみましょう.これは、反応の上のラントでありません.反応は素晴らしいです!また、JSの上のラント.jsもすごいです!これは不変で永続的なデータ構造を持つ言語でどのように反応するかを示すことです.

無国籍成分

試薬と反応中の最も単純な成分は単に機能である.

JavaScriptの場合は非常によく見られますconst 一つのライナー

const HelloMessage = props => <div>Hello {props.name}</div>;

状態成分

試薬はcljs(clojurescript)不変のデータ構造の上に構築されているので、余分なライブラリ(redux、mobx)または構文は必要ありませんthis.setState ) あなたの状態で働くために.CLJSで使用するatoms あなたの状態に対処するための(CLJSの参照タイプ).

この例ではlet バインドatom  — 内部機能defn . The let バインディングは関数のスコープ内でのみ使用可能ですswap! -値をon-click 使用によってinc (インクリメント)関数.

ライフサイクル法によるクラスコンポーネント

この例では、ライフサイクルメソッドを使用したクラスコンポーネントを示します.

試薬では1 %未満で使用します.理由は — 原子 — 彼らは更新する必要があります追跡します.試薬では、このコンポーネントを書くことができましたcomponentDidMount :

(defn timer []
  (let [seconds (r/atom 0)]
    (fn []
      (js/setInterval #(swap! seconds inc) 1000)
      [:div
       "Seconds: " @seconds])))

もっと知りたい？

あなたがclojurescriptと試薬についてもっと勉強したいならば、これをためしてくださいFREE ビデオコースとビルドGingginアプリ.

LearnRetorのコースについての詳細情報。コム

そして、あなたがこの記事が好きならば、あなたはdevの上で私について来なければなりません、そして、私はプログラミングとテクノロジーについて書きます.