A minimalistic ClojureScript interface to React.js http://reagent-project.github.io/
Go to file
Juho Teperi 2588041c5a
Merge pull request #363 from reagent-project/remove-synthetic-input
Remove synthetic-input options
2018-04-11 20:21:15 +03:00
.github Update template words 2016-05-20 11:01:33 +10:00
demo Add dates to news posts 2017-11-28 19:16:26 +02:00
docs Update 0.8-upgrade.md 2018-04-04 20:41:03 +03:00
examples Use deftype constrcutor functions instead of interop, replaces #144 2017-03-11 01:19:35 +02:00
lib Make it easier to use with webpack and node 2015-10-10 13:40:33 +02:00
outsite/public Use a README instead .keep for gh-pages 2015-02-09 15:02:16 +01:00
site/public Make h2 bigger 2015-12-21 08:14:11 +01:00
src/reagent Remove synthetic-input options 2018-04-11 20:13:39 +03:00
test Merge branch 'test-browser-node-prod' into react-16-try2 2018-04-03 11:00:46 +03:00
test-environments Use latest Closure for React fix 2018-04-04 19:11:58 +03:00
.gitignore Use React 16 and simplify test setup 2018-04-03 10:33:01 +03:00
CHANGELOG.md Remove synthetic-input options 2018-04-11 20:13:39 +03:00
CONTRIBUTING.md Update CONTRIBUTING.md 2017-11-28 17:35:40 +02:00
LICENSE Rename LICENSE.md to LICENSE 2017-10-27 11:04:15 +03:00
README.md Small fix to the markdown. 2018-03-14 14:10:45 -07:00
build-example-site.sh Fix 2017-11-02 23:12:05 +02:00
circle.yml Document React 16 problems with npm-deps 2018-04-03 10:53:05 +03:00
package-lock.json Use React 16 and simplify test setup 2018-04-03 10:33:01 +03:00
package.json Use React 16 and simplify test setup 2018-04-03 10:33:01 +03:00
prepare-tests.sh Use React 16 and simplify test setup 2018-04-03 10:33:01 +03:00
project.clj Use latest Closure for React fix 2018-04-04 19:11:58 +03:00
run-tests.sh Use React 16 and simplify test setup 2018-04-03 10:33:01 +03:00

README.md

Reagent

A simple ClojureScript interface to React.

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

Prerequisites

Usage

To create a new Reagent project simply run:

lein new reagent myproject

If you wish to only create the assets for ClojureScript without a Clojure backend then do the following instead:

lein new reagent-frontend myproject

This will setup a new Reagent project with some reasonable defaults, see here for more details.

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

Clojars Project
CircleCI

This is all you need to do if you want the standard version of React. If you want the version of React with addons, you'd use something like this instead:

[reagent "0.7.0" :exclusions [cljsjs/react]]
[cljsjs/react-with-addons "15.4.2-2"]

If you want to use your own build of React (or React from a CDN), you have to use :exclusions variant of the dependency, and also provide a file named "cljsjs/react.cljs", containing just (ns cljsjs.react), in your project.

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."]])

Reagent extends standard Hiccup in one way: it is possible to "squeeze" elements together by using a > character.

[:div
  [:p
    [:b "Nested Element"]]]

can be written as:

[:div>p>b "Nested Element"]

Since version 0.8: The :class attribute also supports collections of classes, and nil values are removed:

[:div {:class ["a-class" (when active? "active") "b-class"]}]

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 []
  (r/render [childcaller]
            (.-body js/document)))

assuming we have imported Reagent like this:

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

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

(defonce click-count (r/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 (r/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:

(defonce my-html (r/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 79K 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.