Tiny Counter in Reagent & ClojureScript for Klipse

klipse-tiny-counter.cljs

;; this code will work in Klipse if and only if the URL is http://app.klipse.tech/?container=1
(require 
  '[reagent.core :as r]
  '[reagent.dom :as r-dom])

;; TODO: refactor app to hold & manage its own state as a form-3 component
(def counter (r/atom 0))

(defn app []
  [:main
   [:h1
    {:style {:margin "0"}} ;; no h1 margins
    "Tiny Counter"]
   [:div 
    {:style {:padding "0.5em 0"}} ;; vertical padding 
    "Count: " @counter]
   [:button 
    {:on-click #(swap! counter inc)} 
    "Increment"]])

;; (r-dom/render [app] (js/document.getElementById "app"))
(r-dom/render [app] js/klipse-container) ;; renders the app in Klipse

(app) ;; displays hiccup in Klipse "stdout"