{"id":13400818,"url":"https://github.com/reagent-project/reagent","last_synced_at":"2025-05-12T05:28:09.951Z","repository":{"id":12619410,"uuid":"15290592","full_name":"reagent-project/reagent","owner":"reagent-project","description":"A minimalistic ClojureScript interface to React.js","archived":false,"fork":false,"pushed_at":"2025-04-11T12:05:21.000Z","size":4291,"stargazers_count":4811,"open_issues_count":29,"forks_count":415,"subscribers_count":108,"default_branch":"master","last_synced_at":"2025-05-08T22:05:51.775Z","etag":null,"topics":["clojure","clojurescript","frontend","hiccup","react","reagent"],"latest_commit_sha":null,"homepage":"http://reagent-project.github.io/","language":"Clojure","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/reagent-project.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":"ROADMAP.md","authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2013-12-18T18:12:03.000Z","updated_at":"2025-05-06T17:38:10.000Z","dependencies_parsed_at":"2023-02-12T02:01:10.394Z","dependency_job_id":"28583edd-c649-49d2-ac18-69cefab7da39","html_url":"https://github.com/reagent-project/reagent","commit_stats":{"total_commits":1386,"total_committers":91,"mean_commits":15.23076923076923,"dds":0.5418470418470418,"last_synced_commit":"a14faba55e373000f8f93edfcfce0d1222f7e71a"},"previous_names":[],"tags_count":46,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reagent-project%2Freagent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reagent-project%2Freagent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reagent-project%2Freagent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reagent-project%2Freagent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reagent-project","download_url":"https://codeload.github.com/reagent-project/reagent/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253154974,"owners_count":21862622,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clojure","clojurescript","frontend","hiccup","react","reagent"],"created_at":"2024-07-30T19:00:55.813Z","updated_at":"2025-05-08T22:06:14.948Z","avatar_url":"https://github.com/reagent-project.png","language":"Clojure","readme":"\u003cimg src=\"logo/logo-text.png\" width=\"264px\" alt=\"Reagent\"\u003e\n\n[![Run tests](https://github.com/reagent-project/reagent/actions/workflows/clojure.yml/badge.svg)](https://github.com/reagent-project/reagent/actions/workflows/clojure.yml)\n[![Clojars Project](https://img.shields.io/clojars/v/reagent.svg)](https://clojars.org/reagent)\n[![cljdoc badge](https://cljdoc.org/badge/reagent/reagent)](https://cljdoc.org/d/reagent/reagent/CURRENT)\n[![project chat](https://img.shields.io/badge/slack-join_chat-brightgreen.svg)](https://clojurians.slack.com/archives/C0620C0C8)\n\nA simple [ClojureScript](http://github.com/clojure/clojurescript) interface to [React](https://reactjs.org/).\n\nReagent provides a way to write efficient React components using (almost) nothing but plain ClojureScript functions.\n\n  * **[Detailed intro with live examples](http://reagent-project.github.io/)**\n  * **[News](http://reagent-project.github.io/news/index.html)**\n  * **[Documentation, latest release](https://cljdoc.org/d/reagent/reagent/CURRENT)**\n  * **Documentation, next release: [API docs](http://reagent-project.github.io/docs/master/), [Tutorials and FAQ](https://github.com/reagent-project/reagent/tree/master/doc)**\n  * **Community discussion and support channels**\n    * **[#reagent](https://clojurians.slack.com/messages/reagent/)** channel in [Clojure Slack](http://clojurians.net/)\n  * **Commercial video material**\n    * [Learn Reagent Free](https://www.jacekschae.com/learn-reagent-free/tycit?coupon=REAGENT), [Learn Reagent Pro](https://www.jacekschae.com/learn-reagent-pro/tycit?coupon=REAGENT) (Affiliate link, $30 discount)\n    * [Learn Re-frame Free](https://www.jacekschae.com/learn-re-frame-free/tycit?coupon=REAGENT), [Learn Re-frame Pro](https://www.jacekschae.com/learn-re-frame-pro/tycit?coupon=REAGENT) (Affiliate link, $30 discount)\n    * [purelyfunctional.tv ](https://purelyfunctional.tv/guide/reagent/)\n    * [Lambda Island Videos](https://lambdaisland.com/collections/react-reagent-re-frame)\n\n### Usage\n\nTo create a new Reagent project using [Leiningen](http://leiningen.org/) template simply run:\n\n    lein new reagent myproject\n\nIf you wish to only create the assets for ClojureScript without a Clojure backend then do the following instead:\n\n    lein new reagent-frontend myproject\n\nThis will setup a new Reagent project with some reasonable defaults, see here for more [details](https://github.com/reagent-project/reagent-template).\n\nTo use Reagent in an existing project you add this to your dependencies in `project.clj`:\n\n[![Clojars Project](http://clojars.org/reagent/latest-version.svg)](http://clojars.org/reagent) \u003cbr\u003e\n\nAnd provide React using either npm (when using e.g. [Shadow-cljs](https://shadow-cljs.github.io/docs/UsersGuide.html))\n\n```\nnpm i react react-dom@18.3.1 react@18.3.1\n```\n\nor by adding [Cljsjs](http://cljsjs.github.io/) React packages to your project:\n\n```\n[cljsjs/react \"18.3.1-1\"]\n[cljsjs/react-dom \"18.3.1-1\"]\n```\n\nNote: Reagent is tested against React 18, using the compatibility mode (i.e.,\nnot using `createRoot` / concurrent mode), but should be compatible with other\nversions. It is not compatible with React 19\n\nReagent isn't tied to only React-dom but should work with [other renderers](./doc/ReactRenderers.md) also.\n\n## Examples\n\nReagent uses [Hiccup-like](https://github.com/weavejester/hiccup) markup instead of JSX. It looks like this:\n\n```clj\n(defn some-component []\n  [:div\n   [:h3 \"I am a component!\"]\n   [:p.someclass\n    \"I have \" [:strong \"bold\"]\n    [:span {:style {:color \"red\"}} \" and red\"]\n    \" text.\"]])\n```\n\n\u003e **Since version 0.8:** The `:class` attribute also supports collections of classes, and nil values are removed:\n\u003e\n\u003e ```clj\n\u003e [:div {:class [\"a-class\" (when active? \"active\") \"b-class\"]}]\n\u003e ```\n\nYou can use one component inside another:\n\n```clj\n(defn calling-component []\n  [:div \"Parent component\"\n   [some-component]])\n```\n\nAnd pass properties from one component to another:\n\n```clj\n(defn child [name]\n  [:p \"Hi, I am \" name])\n\n(defn parent []\n  [child \"Foo Bar\"])\n```\n\nYou mount the component into the DOM like this:\n\n```clj\n(defn mount-it []\n  (rd/render [parent] (.-body js/document)))\n```\n\nassuming we have imported Reagent like this:\n\n```clj\n(ns example\n  (:require [reagent.core :as r]\n            [reagent.dom :as rd]))\n```\n\nState is handled using Reagent's version of `atom`, like this:\n\n```clj\n(defonce click-count (r/atom 0))\n\n(defn state-ful-with-atom []\n  [:div {:on-click #(swap! click-count inc)}\n   \"I have been clicked \" @click-count \" times.\"])\n```\n\nAny component that dereferences a `reagent.core/atom` will be automatically re-rendered.\n\nIf you want to 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:\n\n```clj\n(defn timer-component []\n  (let [seconds-elapsed (r/atom 0)]\n    (fn []\n      (js/setTimeout #(swap! seconds-elapsed inc) 1000)\n      [:div\n       \"Seconds Elapsed: \" @seconds-elapsed])))\n```\n\nThis way you can avoid using React's lifecycle callbacks like `getInitialState` and `componentWillMount` most of the time.\n\nBut you can still use them if you want to, either using `reagent.core/create-class` or by attaching meta-data to a component function:\n\n```clj\n(defonce my-html (r/atom \"\"))\n\n(defn plain-component []\n  [:p \"My html is \" @my-html])\n\n(def component-with-callback\n  (with-meta plain-component\n    {:component-did-mount\n     (fn [this]\n       (reset! my-html (.-innerHTML (rd/dom-node this))))}))\n```\n\nSee the examples directory for more examples.\n\n\n## Performance\n\nReact 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`).\n\nThe ClojureScript overhead is kept down, thanks to lots of caching.\n\nCode size is a little bigger than React.js, but still quite small. The todomvc example clocks in at roughly 79K gzipped, using advanced compilation.\n\n## About\n\nThe idea and some of the code for making components atom-like comes from [pump](https://github.com/piranha/pump).\nThe reactive-atom idea (and some code) comes from [reflex](https://github.com/lynaghk/reflex).\n\nThe license is MIT.\n","funding_links":[],"categories":["Uncategorized","React [🔝](#readme)","Clojure","前端开发框架及项目","front-end","Tools","Clojure Tools, Libraries, and Frameworks","Core"],"sub_categories":["Uncategorized","其他_文本生成、文本对话","Mesh networks","JavaScript Libraries for Machine Learning"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freagent-project%2Freagent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freagent-project%2Freagent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freagent-project%2Freagent/lists"}