A minimalistic ClojureScript interface to React.js http://reagent-project.github.io/
Go to file
Dan Holmsand c030cf7266 Fix mount ordering to be more robust 2014-12-01 14:27:51 +01:00
bin Reorganize build, tests and doc site 2014-11-29 18:30:24 +01:00
demo Tweak setup 2014-11-30 16:40:22 +01:00
env Really make advanced mode tests work 2014-11-29 23:47:57 +01:00
examples Reorganize build, tests and doc site 2014-11-29 18:30:24 +01:00
outsite/public Reorganize build, tests and doc site 2014-11-29 18:30:24 +01:00
site/public Add a build note to index.html 2014-11-29 23:54:17 +01:00
src/reagent Fix mount ordering to be more robust 2014-12-01 14:27:51 +01:00
test Really make advanced mode tests work 2014-11-29 23:47:57 +01:00
vendor/reagent Update React to 0.12.1 2014-11-20 13:35:53 +01:00
.gitignore Make sure index.html is in git 2014-11-29 23:34:59 +01:00
CHANGELOG.md Compare component arguments with = in shouldComponentUpdate 2014-11-06 19:45:49 +01:00
Makefile Make gh-pages pushing more explicit 2014-11-30 10:13:19 +01:00
README.md Change links to point to reagent-project 2014-11-06 20:21:38 +01:00
project.clj Fix extra pseudo-names 2014-11-30 12:09:23 +01:00

README.md

Reagent

A simple ClojureScript interface to React.

The main repository for Reagent is now located here.

Reagent provides a way to write efficient React components using (almost) nothing but plain ClojureScript functions.

To use Reagent you add this to your dependencies in project.clj:

[reagent "0.4.3"]

You also need to include react.js itself. One way to do this is to add

:preamble ["reagent/react.js"]

to the :compiler section of project.clj, as shown in the examples directory (or "reagent/react.min.js" in production). You could also add

<script src="http://fb.me/react-0.9.0.js"></script>

directly to your html.

Examples

Reagent uses Hiccup-like markup instead of React's sort-of html. It looks like this:

(defn some-component []
  [:div
   [:h3 "I am a component!"]
   [:p.someclass 
    "I have " [:strong "bold"]
    [:span {:style {:color "red"}} " and red"]
    " text."]])

You can use one component inside another:

(defn calling-component []
  [:div "Parent component"
   [some-component]])

And pass properties from one component to another:

(defn child [name]
  [:p "Hi, I am " name])

(defn childcaller []
  [child "Foo Bar"])

You mount the component into the DOM like this:

(defn mountit []
  (reagent/render-component [childcaller]
                            (.-body js/document)))

assuming we have imported Reagent like this:

(ns example
  (:require [reagent.core :as reagent :refer [atom]]))

State is handled using Reagent's version of atom, like this:

(def click-count (atom 0))

(defn state-ful-with-atom []
  [:div {:on-click #(swap! click-count inc)}
   "I have been clicked " @click-count " times."])

Any component that dereferences a reagent.core/atom will be automatically re-rendered.

If you want do some setting up when the component is first created, the component function can return a new function that will be called to do the actual rendering:

(defn timer-component []
  (let [seconds-elapsed (atom 0)]
    (fn []
      (js/setTimeout #(swap! seconds-elapsed inc) 1000)
      [:div
       "Seconds Elapsed: " @seconds-elapsed])))

This way you can avoid using React's lifecycle callbacks like getInitialState and componentWillMount most of the time.

But you can still use them if you want to, either using reagent.core/create-class or by attaching meta-data to a component function:

(def my-html (atom ""))

(defn plain-component []
  [:p "My html is " @my-html])

(def component-with-callback
  (with-meta plain-component
    {:component-did-mount
     (fn [this]
       (reset! my-html (.-innerHTML (reagent/dom-node this))))}))

See the examples directory for more examples.

Performance

React is pretty darn fast, and so is Reagent. It should even be faster than plain old javascript React a lot of the time, since ClojureScript allows us to skip a lot of unnecessary rendering (through judicious use of React's shouldComponentUpdate).

The ClojureScript overhead is kept down, thanks to lots of caching.

Code size is a little bigger than React.js, but still quite small. The todomvc example clocks in at roughly 53K gzipped, using advanced compilation.

About

The idea and some of the code for making components atom-like comes from pump. The reactive-atom idea (and some code) comes from reflex.

The license is MIT.