status-im
/
reagent
mirror of https://github.com/status-im/reagent.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

One more example

This commit is contained in:
Dan Holmsand 2014-01-04 10:56:21 +01:00
parent 9df8609f45
commit 0f45462034
1 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
test/demo.cljs
View File

@ -102,12 +102,19 @@
(let [val (atom "foo")] (let [val (atom "foo")]
(fn [] (fn []
[:div [:div
[:p "The value of " [:code "val"] " is now: " @val] [:p "The value is now: " @val]
[:p "Change it: " [:p "Change it: "
[:input [:input
{:type "text" :value @val {:type "text" :value @val
:on-change #(reset! val (-> % .-target .-value))}]]]))) :on-change #(reset! val (-> % .-target .-value))}]]])))
(defn timer-component []
(let [seconds-elapsed (atom 0)]
(fn []
(js/setTimeout #(swap! seconds-elapsed inc) 1000)
[:div
"Seconds Elapsed: " @seconds-elapsed])))
(defn render-simple [] (defn render-simple []
(cloact/render-component [simple-component] (cloact/render-component [simple-component]
(.-body js/document))) (.-body js/document)))
@ -156,9 +163,9 @@
[:h2 "Introduction to Cloact"] [:h2 "Introduction to Cloact"]
[:p "Cloact provides a minimalistic interface between ClojureScript [:p "Cloact provides a minimalistic interface between ClojureScript
and React. It allows you to define React components using nothing but and React. It allows you to define React components using nothing
plain ClojureScript functions, that describe your UI using a but plain ClojureScript functions, that describe your UI using a
Hiccup-like syntax."] Hiccup-like syntax."]
[:p "A very basic component may look something like this: "] [:p "A very basic component may look something like this: "]
[demo-component {:comp simple-component [demo-component {:comp simple-component
@ -204,12 +211,17 @@ Hiccup-like syntax."]
[demo-component {:comp local-state [demo-component {:comp local-state
:defs [:ns :local-state]}] :defs [:ns :local-state]}]
[:p "This example also uses another feature of Cloact: a component [:p "The previous example also uses another feature of Cloact: a component
function can return another function, that is used to do the actual function can return another function, that is used to do the actual
rendering. It is called with the same arguments as any other rendering. It is called with the same arguments as any other
component function. This allows you to perform some setup of newly component function. This allows you to perform some setup of newly
created components, without resorting to React's lifecycle created components, without resorting to React's lifecycle
events."]]) events."]
[:p "Here is another example, where we call setTimeout everytime
the component is rendered to update a simple clock:"]
[demo-component {:comp timer-component
:defs [:timer-component]}]])
(defn essential-api [] (defn essential-api []
[:div [:div