Reagami

(defn greeting [{:keys [name]}]
  [:div.greeting
   [:h1 "Hello, " name "!"]])

(defn card [{:keys [title]} & children]
  [:div.card
   [:h2 title]
   [:div.card-body children]])

;; Usage
[card {:title "My Card"}
  [:p "Card content here"]]

(defn button [{:keys [on-click label]}]
  [:button {:on-click on-click} label])

(defn input-field [{:keys [value on-change]}]
  [:input {:type "text"
           :value value
           :on-input (fn [e] (on-change (.. e -target -value)))}])

(defn status-badge [{:keys [status]}]
  [:div
   (when status
     [:span.badge {:class (when (= status "error") "badge-error")}
      status])])

(defn item-list [{:keys [items]}]
  [:ul
   (for [item items]
     ^{:key (:id item)}
     [:li (:name item)])])

[:div.container.main
  [:span.label "Text"]]
;; Equivalent to:
[:div {:class "container main"}
  [:span {:class "label"} "Text"]]

[:div.item {:class (str (when active "active ")
                        (when selected "selected"))}
  content]

;; In components, call the module's dispatch! function
[:button {:on-click #(dispatch! [[:editor/ax.save-script]])} "Save"]

;; Multiple actions in one dispatch
[:button {:on-click #(dispatch! [[:editor/ax.clear-results]
                                  [:editor/ax.check-scittle]])} "Reset"]

(defn parent [{:keys [items]}]
  [:div
   (for [item items]
     ^{:key (:id item)}
     [child-component item])])  ; Note: [component props] not (component props)

(defn port-input [{:keys [id label value on-change]}]
  [:span
   [:label {:for id} label]
   [:input {:type "number"
            :id id
            :value value
            :min "1"
            :max "65535"
            :on-input (fn [e] (on-change (.. e -target -value)))}]])

(defn script-item [{:keys [script/name script/enabled] script-id :script/id}]
  [:div.script-item
   [:div.script-info
    [:span.script-name name]]
   [:div.script-actions
    [:input {:type "checkbox"
             :checked enabled
             :on-change #(dispatch! [[:toggle-script script-id]])}]
    [:button.delete {:on-click #(dispatch! [[:delete-script script-id]])}
     "Delete"]]])

[:div {:on-render (fn [node lifecycle data]
                    (case lifecycle
                      :mount
                      (do
                        ;; Element just added to DOM
                        (.add (.-classList node) "entering")
                        (js/requestAnimationFrame
                          #(.remove (.-classList node) "entering"))
                        nil)

                      :update
                      ;; Element re-rendered (can track update count via data)
                      data

                      :unmount
                      ;; Element being removed from DOM
                      ;; NOTE: Too late to delay removal - element is already leaving
                      nil))}
 content]