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

View File

@ -102,12 +102,19 @@
(let [val (atom "foo")]
(fn []
[:div
[:p "The value of " [:code "val"] " is now: " @val]
[:p "The value is now: " @val]
[:p "Change it: "
[:input
{:type "text" :value @val
: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 []
(cloact/render-component [simple-component]
(.-body js/document)))
@ -156,9 +163,9 @@
[:h2 "Introduction to Cloact"]
[:p "Cloact provides a minimalistic interface between ClojureScript
and React. It allows you to define React components using nothing but
plain ClojureScript functions, that describe your UI using a
Hiccup-like syntax."]
and React. It allows you to define React components using nothing
but plain ClojureScript functions, that describe your UI using a
Hiccup-like syntax."]
[:p "A very basic component may look something like this: "]
[demo-component {:comp simple-component
@ -204,12 +211,17 @@ Hiccup-like syntax."]
[demo-component {:comp 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
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."]])
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 []
[:div