core.cljs

(ns example.core
  (:require [react.helper :refer-macros [defc]]
            [cljsjs.react.dom]
            [goog.object :as obj]))

(enable-console-print!)

(extend-type object
  ILookup
  (-lookup
    ([o k] (obj/get o (name k)))
    ([o k not-found] (obj/get o (name k) not-found))))

(defn $
  [el props & children]
  (apply js/React.createElement el props children))

(def initialState
  {:count 0
   :greeting "Hello"
   :nested (zipmap (range 10) (repeat {:result "Nice!"}))})

(defn reducer [state {:keys [type args] :as action}]
  (case type
    :inc (update state :count inc)
    :dec (update state :count dec)
    :salute (assoc state :greeting "Welcome")
    state))

(defc Counter [dispatch x]
  (println ::Counter)
  ($ "div" nil "Counter" " " (str x) " "
     ($ "button" #js {:onClick #(dispatch {:type :inc})} "Increment")))

(defc Greeter [dispatch x]
  (println ::Greeter)
  ($ "div" nil (str x) " " "Bob!" " "
     ($ "button" #js {:onClick #(dispatch {:type :salute})} "Change")))

(defc Complex [dispatch x]
  (println ::Complex)
  ($ "div" nil (pr-str x)))

(defn Root []
  (let [[state dispatch] (js/React.useReducer reducer initialState)
        {:keys [count greeting nested]} state]
    ($ "div" nil
       ($ "h1" nil "This is working")
       (Greeter dispatch greeting)
       (Counter dispatch count)
       (Complex dispatch nested))))

(defn main []
  (when-let [node (js/document.getElementById "main-app-area")]
    (js/ReactDOM.render (js/React.createElement Root) node)))

(main)