Hi, I’ve made an npm package to easily bootstrap a CLJS web-app using #shadow-cljs and #reagent.
https://github.com/AutoScreencast/create-reagent-app
It is called create-reagent-app
and is inspired by the popular create-react-app
project over in the JavaScript world.
You can create your app scaffold without cloning a GitHub repo. Just use npx
, the npm package runner that comes with npm, from your terminal. Let’s say you want to call your app my-app
:
1. npx create-reagent-app my-app
2. cd my-app
3. npm install
4. npm start
5. Open browser at localhost:3000
That’s all. The project is still very early stage, so please let me know of any bugs you encounter, or suggestions that you have. The goal of the project is to make entry into the Clojure(Script) world as easy as possible for ReactJS devs, and I’m hoping create-reagent-app
will help smooth their crossing.
A question related to updating of child component. I’d like to render a foldable tree of elements, where a node unfolds, when the user clicks on it. It works for the root node but for other nodes. Here is the code:
(def my-org
{:name "nestle"
:description "bla bla bla"
:children [{:name "Choco"
:description "woo"}
{:name "Moka"
:description "boo"
:children [{:name "Elite"
:description "YESH"}]}]})
(defn org-tree [org]
(with-let [opened (reagent/atom false)]
(println (:name org) @opened)
(if @opened
[:div
[:div {:onClick #(do
(println "close" (:name org))
(reset! opened false)
)}
"Name: "(:name org)]
[:div "Description: " (:description org)]
[:ul
(for [child (:children org)]
[:li (org-tree child)])]]
[:div {:onClick #(do
(println "open" (:name org))
(reset! opened true)
)}
"> " (:name org)])))
(defn ui []
[org-tree my-org])
Here is a http://app.klipse.tech/?cljs_in=(ns%20simple.core%0A%20%20(%3Arequire%20%0A%20%20%20%20%5Breagent.core%20%3Aas%20reagent%20%20%3Arefer-macros%20%5Bwith-let%5D%5D%0A%20%20%20%20%5Breagent.dom%20%3Arefer%20%5Brender%5D%5D))%0A%0A(def%20my-org%20%0A%20%20%7B%3Aname%20%22nestle%22%0A%20%20%20%3Adescription%20%22bla%20bla%20bla%22%0A%20%20%20%3Achildren%20%5B%7B%3Aname%20%22Choco%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Adescription%20%22woo%22%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%3Aname%20%22Moka%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Adescription%20%22boo%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Achildren%20%5B%7B%3Aname%20%22Elite%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Adescription%20%22YESH%22%7D%5D%7D%5D%7D)%0A%0A(defn%20org-tree%20%5Borg%5D%0A%20%20(with-let%20%5Bopened%20(reagent%2Fatom%20false)%5D%0A%20%20%20%20(println%20(%3Aname%20org)%20%40opened)%0A%20%20%20%20(if%20%40opened%0A%20%20%20%20%20%20%5B%3Adiv%20%0A%20%20%20%20%20%20%20%5B%3Adiv%20%7B%3AonClick%20%23(do%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20(println%20%22close%22%20(%3Aname%20org))%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20(reset!%20opened%20false)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20)%7D%0A%20%20%20%20%20%20%20%20%22Name%3A%20%22(%3Aname%20org)%5D%0A%20%20%20%20%20%20%20%5B%3Adiv%20%22Description%3A%20%22%20(%3Adescription%20org)%5D%0A%20%20%20%20%20%20%20%5B%3Aul%0A%20%20%20%20%20%20%20%20(for%20%5Bchild%20(%3Achildren%20org)%5D%0A%20%20%20%20%20%20%20%20%20%20%5B%3Ali%20(org-tree%20child)%5D)%5D%5D%0A%20%20%20%20%20%20%5B%3Adiv%20%7B%3AonClick%20%23(do%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20(println%20%22open%22%20%20(%3Aname%20org))%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20(reset!%20opened%20true)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20)%7D%0A%20%20%20%20%20%20%20%22%3E%20%22%20(%3Aname%20org)%5D)))%0A%0A(defn%20ui%20%5B%5D%0A%20%20%5Borg-tree%20my-org%5D)%0A%0A%0A%3B%3B%20do%20not%20touch%0A(render%20%20%5Bui%5D%20js%2Fklipse-container)&container=1 in KlipseWhat am I missing?
@timothypratley An idea?
@viebel Try replacing (org-tree child)
with [org-tree child]
.
Of course! How did I miss that