gistfile1.clj

(ns cljs-spike.core)

(defn vector->react [v]
  (let [[el attrs body] v
        react-body (react body)]
    (if (keyword? el)
      (make-react-dom-component el attrs react-body)
      (el attrs react-body))))

(defn make-react-dom-component [el attrs react-body]
  (let [component (aget js/React.DOM (name el))]
    (component (clj->js attrs) react-body)))

(defn react [el]
  (cond
   (string? el) el
   (seq? el)    (clj->js (map react el))
   (vector? el) (vector->react el)))

(defn create-class [opts]
  (let [react-class (js/React.createClass (clj->js opts))]
    (fn [props]
      (when (not (map? props)) (throw (js/Error. "component props should be clj map")))
      (let [js-props (clj->js props)]
        (aset js-props "_clj" props)
        (react-class js-props)))))

(defn props [this]
  (aget this "props" "_clj"))

(def videos
  [{:name "one"}
   {:name "two"}
   {:name "three"}])

(defn render-item [name]
  [:li {:className "video-item"} name])

(def VideoListItem
  (create-class
   {:displayName "VideoListItem"
    :render #(this-as this (-> this props :name render-item react))}))

(defn render-items [items]
  [:ul {:className "video-list"}
   (for [item items]
     [VideoListItem item])])

(def VideoList
  (create-class
   {:displayName "VideoList"
    :render #(this-as this (-> this props :videos render-items react))}))

(js/React.renderComponent
 (VideoList {:videos videos})
 (js/document.getElementById "my-app"))