{"id":26194258,"url":"https://github.com/active-group/reacl","last_synced_at":"2025-04-12T23:29:47.300Z","repository":{"id":16011707,"uuid":"18755177","full_name":"active-group/reacl","owner":"active-group","description":"ClojureScript library for interfacing with React framework","archived":false,"fork":false,"pushed_at":"2025-03-28T14:36:49.000Z","size":1181,"stargazers_count":79,"open_issues_count":7,"forks_count":2,"subscribers_count":21,"default_branch":"main","last_synced_at":"2025-04-04T03:07:07.286Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Clojure","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/active-group.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-04-14T09:24:08.000Z","updated_at":"2025-03-28T14:36:54.000Z","dependencies_parsed_at":"2025-02-28T12:22:06.677Z","dependency_job_id":"571f06be-5b85-4033-b9cf-fdc29fded199","html_url":"https://github.com/active-group/reacl","commit_stats":null,"previous_names":[],"tags_count":43,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/active-group%2Freacl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/active-group%2Freacl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/active-group%2Freacl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/active-group%2Freacl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/active-group","download_url":"https://codeload.github.com/active-group/reacl/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248647038,"owners_count":21139079,"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":[],"created_at":"2025-03-12T01:55:58.037Z","updated_at":"2025-04-12T23:29:47.280Z","avatar_url":"https://github.com/active-group.png","language":"Clojure","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"https://raw.githubusercontent.com/active-group/reacl/master/logo.png\" width=\"180\"\u003e\n\nA ClojureScript library for programming with Facebook's React framework.\n\n[![Clojars Project](https://img.shields.io/clojars/v/reacl.svg)](https://clojars.org/reacl)\n[![cljdoc reacl badge](https://cljdoc.xyz/badge/reacl)](https://cljdoc.org/d/reacl/reacl/CURRENT)\n[![Actions Status](https://github.com/active-group/reacl/workflows/Tests/badge.svg)](https://github.com/active-group/reacl/actions)\n\n## Using it\n\nYour `project.clj` should contain something like this:\n\n```clj\n:dependencies [[org.clojure/clojure \"1.9.0\" :scope \"provided\"]\n               [org.clojure/clojurescript \"1.9.293\" :scope \"provided\"]\n               [reacl \"2.2.8\"]]\n```\n\n## Documentation\n\nAPI documentation for the latest release: [CljDoc](https://cljdoc.org/d/reacl/reacl/CURRENT).\n\nAn introduction to the library can be found [here](doc/intro.md).\n\nAnd the sources on [Github](http://active-group.github.io/reacl/).\n\n## Running the tests\n\nThe following commands run the tests defined in `test-dom` and `test-nodom`,\nrespectively. To execute them, [karma](https://github.com/karma-runner/karma) is needed.\n\n```\nlein doo chrome-headless test-dom\nlein doo chrome-headless test-nodom\n```\n\nYou may substitute `chrome-headless` with a runner of your choice.\n\n## Model\n\nThe central idea of Reacl is this: Reacl programs are pure.  They\n(mostly) do not need to call imperative functions to get anything\ndone.  This goes well with React's philosophy, but goes a step further\nas well as making programming more convenient.\n\nThis idea has immediate consequences on how Reacl organizes data that\nis communicated between components.  In React, a component has\n*properties* and *state*, where properties typically carry arguments\nfrom one component to its subcomponents.\n\nIn Reacl, there are three different kinds of data:\n\n- *application state* managed by a component that represents something\n  that's important to your application, rather than just being an\n  aspect of the GUI\n- *local state* of a component, used to maintain GUI state not already\n  tracked by the DOM\n- *arguments* passed from a component to its sub-components\n\n(These can all be arbitrary ClojureScript objects, and are not\nrestricted to JavaScript hashmaps.)\n\nWhen a component wants to manipulate the application state, that\ntypically happens inside an event handler: That event handler should\nsend a *message* to the component - a value communicating what just\nhappened.  The component can declare a *message handler* that receives\nthe message, and returns a new application state and/or new local\nstate.\n\nThe key to tying these aspects together are the `reacl2.core/defclass`\nmacro for defining a Reacl class (just a React component class, but\nimplementing Reacl's internal protocols), and the\n`reacl2.core/send-message!` for sending a message to a component.\n\nIn addition to this core model, Reacl also provides a convenience\nlayer on React's virtual dom. (The convenience layer can be used\nindependently; also, any other convenience layer over React's virtual\ndom should be usable with Reacl.)\n\n## Examples\n\nThere are several examples in the [`examples/`](examples/)\nsubdirectory, like an app managing a to-do list:\n[`examples/todo/`](examples/todo/) (don't expect\n[TodoMVC](http://todomvc.com/)), an example with a searchable product\ncatalogue: [`examples/products/`](examples/products), and an example\ninvolving communicatinon with a server:\n[`examples/comment`](examples/comment).\n\nAnd of course the [`clock` example](examples/clock), which the\n[introduction](doc/intro.md) tutorial explains step by step.\n\nYou can run the examples and edit the code live by running `lein fig`\nfrom the console, and open\n`http://localhost:9500/figwheel-extra-main/todo` for the todo example,\nand the others accordingly.\n\nThe example `tabs` shows draggable Bootstrap tabs.  Since the `tabs` example\nuses Bootstrap 5, you need to open\n`http://localhost:9500/examples/tabs/index.html` to see it in action.\n\n## License\n\nCopyright © 2015-2022 Active Group GmbH\n\nDistributed under the Eclipse Public License either version 1.0 or (at\nyour option) any later version.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Factive-group%2Freacl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Factive-group%2Freacl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Factive-group%2Freacl/lists"}