mirror of https://github.com/status-im/reagent.git
Documentation for atom
This commit is contained in:
parent
21823e12d0
commit
dc6b50e864
|
@ -84,6 +84,25 @@
|
|||
"Here is a list:"
|
||||
[lister {:items (range 3)}]])
|
||||
|
||||
(def click-count (atom 0))
|
||||
|
||||
(defn counting-component []
|
||||
[:div
|
||||
"The atom " [:code "click-count"] " has value: " @click-count ". "
|
||||
[:input {:type "button"
|
||||
:value "Click me!"
|
||||
:on-click #(swap! click-count inc)}]])
|
||||
|
||||
(defn local-state []
|
||||
(let [val (atom "foo")]
|
||||
(fn []
|
||||
[:div
|
||||
[:p "The value of " [:code "val"] " is now: " @val]
|
||||
[:p "Change it: "
|
||||
[:input {:type "text"
|
||||
:value @val
|
||||
:on-change #(reset! val (-> % .-target .-value))}]]])))
|
||||
|
||||
(defn calc-bmi [{:keys [height weight bmi] :as params}]
|
||||
(let [h (/ height 100)]
|
||||
(if (nil? bmi)
|
||||
|
@ -123,6 +142,7 @@
|
|||
|
||||
(defn intro []
|
||||
[:div
|
||||
[:h2 "Introduction to Cloact"]
|
||||
|
||||
[:p "Cloact provides a minimalistic interface between ClojureScript
|
||||
and React. It allows you to define React components using nothing but
|
||||
|
@ -143,8 +163,35 @@ Hiccup-like syntax."]
|
|||
[:code "seq"] "." ]
|
||||
|
||||
[demo-component {:comp lister-user
|
||||
:defs [:lister :lister-user]}]
|
||||
])
|
||||
:defs [:lister :lister-user]}]])
|
||||
|
||||
(defn managing-state []
|
||||
[:div
|
||||
[:h2 "Managing state in Cloact"]
|
||||
|
||||
[:p "The easiest way to manage state in Cloact is to use Cloact's
|
||||
own version of " [:code "atom"] ". It works exactly like the one in
|
||||
clojure.core, except that it keeps track of every time it is
|
||||
deref'ed. Any component that uses the atom is automagically
|
||||
re-rendered."]
|
||||
|
||||
[:p "Let's demonstrate that with a simple example:"]
|
||||
[demo-component {:comp counting-component
|
||||
:defs [:ns :click-count :counting-component]}]
|
||||
|
||||
[:p "Sometimes you may want to maintain state locally in a
|
||||
component. That is very easy to do with an " [:code "atom"] " as well."]
|
||||
|
||||
[:p "Here is an example of that:"]
|
||||
[demo-component {:comp local-state
|
||||
:defs [:ns :local-state]}]
|
||||
|
||||
[:p "This example also uses another feature of Cloact: a component
|
||||
function can return another function, that is used to do the actual
|
||||
rendering. It is called with the same arguments as any other
|
||||
component function. This allows you to perform some setup of newly
|
||||
created components, without resorting to React's lifecycle
|
||||
events."]])
|
||||
|
||||
|
||||
(defn bmi-demo []
|
||||
|
@ -158,5 +205,6 @@ Hiccup-like syntax."]
|
|||
[:div
|
||||
[:h1 "This will become a demo"]
|
||||
[intro]
|
||||
[managing-state]
|
||||
[bmi-demo]
|
||||
[:p "WIP"]])
|
||||
|
|
Loading…
Reference in New Issue