Om translation of simple react.js

om_todo.cljs

(ns om-todos.core
  (:require [om.core :as om :include-macros true]
            [om.dom :as dom :include-macros true]))

;var Timer = React.createClass({
;  getInitialState: function() {
;    return {secondsElapsed: 0};
;  },
;  tick: function() {
;    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
;  },
;  componentDidMount: function() {
;    this.interval = setInterval(this.tick, 1000);
;  },
;  componentWillUnmount: function() {
;    clearInterval(this.interval);
;  },
;  render: function() {
;    return React.DOM.div({},
;      'Seconds Elapsed: ', this.state.secondsElapsed
;    );
;  }
;});

(def app-state (atom {:secondsElapsed 1}))

(defn inc-property [app prop]
  (om/update! app [prop]
    (fn [prop] (inc prop))))

(defn timer [{:keys [secondsElapsed] :as app}]
  (reify
    om/IDidMount
    (did-mount [_ owner _]
      (om/set-state! owner [:interval]
        (js/setInterval #(inc-property app :secondsElapsed) 1000)))

    om/IWillUnmount
    (will-unmount [_ owner]
      (js/clearInterval (om/get-state owner [:interval])))

    om/IRender
    (render [this owner]
      (dom/div nil
        (str "Seconds Elapsed: "
             secondsElapsed)
        (dom/div nil
          (dom/button
            #js {:onClick #(js/clearInterval (om/get-state owner [:interval]))}
            "Stop"))))))

(om/root app-state timer js/document.body)

https://reactjs.co This is the official free online convention and tutorial book for React.JS Developers. React is not only the View (in MVC) anymore. ReactJS For Dummies: Why & How to Learn React Redux, the Right Way.