core.cljs

(ns react-cljs.core
  (:require React))

(declare render)

(defn handle-change [e]
  (render {:text (.. e -target -value)}))

(defn render [{:keys [text]}]
  (React/renderComponent
    (React/DOM.div nil
      (array
        (React/DOM.h1 nil "Type some stuff in the text box")
        (React/DOM.input
          (js-obj
            "type" "text"
            "value" text
            "onChange" handle-change))
        text))
    js/document.body))

(render {:text ""})

;;  -- Oh the beautiful DSLs that await us! --
;;
;;  (render-component
;;    (div nil
;;      [(h1 nil "type some stuff here")
;;       (input :type "text" :value text :change handle-change)
;;       text])
;;    js/document.body)

project.clj

(defproject react-cljs "0.1.0-SNAPSHOT"
  :description "FIXME: write this!"
  :url "http://example.com/FIXME"

  :dependencies [[org.clojure/clojure "1.5.1"]
                 [org.clojure/clojurescript "0.0-2080"]
                 [reactjs "0.5.1"]]

  :plugins [[lein-cljsbuild "1.0.0"]]

  :source-paths ["src"]

  :cljsbuild { 
    :builds [{:id "dev"
              :source-paths ["src"]
              :compiler {
                :output-to "main.js"
                :output-dir "out"
                :optimizations :none
                :source-map true
                :foreign-libs [{:file "reactjs/react.js"
                                :provides ["React"]}]
                :externs ["reactjs/externs/react.js"]}}]})

@swannodette by "external libraries" I mean absolutely separate external libraries, i.e. jQuery, various date pickers and calendars, d3 and so on.

Regarding optimizations, something like that.

Is there a way to suppress the warnings of React.js? I'm getting 268 warnings about JSDoc tags. I can't find the real warnings about my code (like undefined variables).

@ericnormand, this is fixed in master, your release build should look something like this to suppress warnings:

{:id "release"
 :source-paths ["src"]
 :compiler
 {:output-to "main.js"
  :optimizations :advanced
  :pretty-print false
  :foreign-libs [{:file "reactjs/react.js"
                  :provides ["React"]}]
  :externs ["reactjs/externs/react.js"]
  :closure-warnings {:non-standard-jsdoc :off}}}

After chatting with the React devs some more, there are definitely some improvements to my approach in the counter Gist, will keep exploring and post updates when I discover something new.

@swannodette, in case you weren't aware, Conrad Barski (webfui) has made a few comments on the React mailing list: https://groups.google.com/forum/#!topic/reactjs/e3bYersyd64

Hi I see that you use React, so I am sure that you will find interesting the https://reactjs.co - this is the 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.