React.js的一个极简的ClojureScript接口。(A minimalistic ClojureScript interface to React.js. )
Reagent 提供了 ClojureScript 和 React 之间的简约接口。 它允许您使用纯粹的 ClojureScript 函数和数据定义高效的 React 组件，它们使用类似 Hiccup 的语法来描述您的UI。\r\n
Reagent 的目标是通过使用几个基本概念来定义任意复杂的UI，并且默认情况下足够快，你几乎不需要关心性能。\r\n
要创建一个新的Reagent项目，只需运行：\r\n
<code>lein new reagent myproject\r\n</code>\r\n
如果您只想在没有Clojure后端的情况下创建ClojureScript的资源，请执行以下操作：\r\n
<code>lein new reagent-frontend myproject\r\n</code>\r\n
这将建立一个新的试剂项目，并提供一些合理的默认值，详见这里。\r\n
| 名称与所有者 | reagent-project/reagent |
|---|---|
| 主编程语言 | Clojure |
| 编程语言 | JavaScript (语言数: 5) |
| 平台 | |
| 许可证 | MIT License |
| 创建于 | 2013-12-18 18:12:03 |
|---|---|
| 推送于 | 2025-07-15 07:49:06 |
| 最后一次提交 | 2025-07-15 10:48:34 |
| 发布数 | 48 |
| 最新版本名称 | v2.0.0-alpha2 (发布于 2025-07-15 10:48:48) |
| 第一版名称 | v0.0.2 (发布于 ) |
| 星数 | 4.8k |
|---|---|
| 关注者数 | 105 |
| 派生数 | 413 |
| 提交数 | 1.7k |
| 已启用问题? | |
| 问题数 | 400 |
| 打开的问题数 | 24 |
| 拉请求数 | 156 |
| 打开的拉请求数 | 6 |
| 关闭的拉请求数 | 65 |
| 已启用Wiki? | |
|---|---|
| 已存档? | |
| 是复刻? | |
| 已锁定? | |
| 是镜像? | |
| 是私有? |
A simple ClojureScript interface to React.
Reagent provides a way to write efficient React components using (almost) nothing but plain ClojureScript functions.
To create a new Reagent project using Leiningen template 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:
This is all you need to do if you want the standard version of React. 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 react and react-dom namespaces (by creating .cljs files with just ns form, or by adding your own :foreign-libs entries).
[reagent "0.x.x" :exclusions [cljsjs/react cljsjs/react-dom]]
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
:classattribute 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.
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.
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.