reagent

A minimalistic ClojureScript interface to React.js http://reagent-project.github.io/
tomrbowden 2020-11-18T05:37:23.228600Z

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.

👍 1
Yehonathan Sharvit 2020-11-18T14:51:23.229600Z

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 Klipse

Yehonathan Sharvit 2020-11-18T14:53:34.229900Z

What am I missing?

Yehonathan Sharvit 2020-11-18T14:58:53.230100Z

@timothypratley An idea?

p-himik 2020-11-18T15:01:27.230500Z

@viebel Try replacing (org-tree child) with [org-tree child].

Yehonathan Sharvit 2020-11-18T15:31:01.230800Z

Of course! How did I miss that