Fork me on GitHub

Hey reagent experts: more docs have now been merged into the /docs folder. This section in particular needs help, so if you can fill in some of the blanks, please submit a PR.


@lee.justin.m fantastic! I'll see if I can fill in some blanks


I saw. I got curious about the first sentence: >>> it is possible to update reagent componetns by remounting the entire component tree with react.core/render


1. it should be reagent.core I think; 2. not sure this is actually true


Or maybe I'm not reading it right, but if you React.render the same component, with the same props, I don't think it will actually re-render the component tree


It should be reagent.core, yes good catch. As for (2), I wrote that based on this


@lee.justin.m thanks for the link. It would be good to actually verify how things work precisely


In my experience, just calling render again doesn't cause all components to unmount, and mount again


To actually force a re-mount, you need to use a trick like this one:


The reason is, I think, that React.render is just the normal way to pass new props to an (embedded) React component. It detects that the DOM node is already under React control, and reuses the existing DOM/component tree if possible


right--the sentence quoted above was intended to say that you can force a re-render by doing that. using the word “remounting” is confusing because it suggests a full lifecycle


it’s a good point


correct, I've confused those two words many times before


but does it even force a re-render, i.e. is the render lifecycle method necessarily called again?


I had a section on terminology but I don’t think it made it in the PR. We should find a place for it again.


I can tell you that this technique works with hot reloading code


I’ll test to see if it really calls the render function.


this stuff is important for CLJS because we like our reloading workflow


cool! Make sure it's not actually Figwheel that is causing the re-render


please share the results! I'm not 100% sure on how this stuff works under the hood


i don’t use figwheel actually, i use shadow-cljs, where you have to cause the re-render yourself, so i know that’s what its doing


@lee.justin.m Yeah, I had removed a few hanging things that didn't seem quite done. I should have mentioned that I wasn't trying to say they shouldn't be included though! Also @pesterhazy has a good list / structure of topics that I think you also echoed that didn't make it in, but should.


one cool addition to the .md would be a discussion of the different ways of causing a rerender: - React component state (not usually used with Reagent) - props - calling React.render (if that's what it does, haha) Reagent adds ratoms, which is implemented by calling React.render for subcomponents


I now realize that this must mean that calling React.render does cause the render method to be called again


(though not necessarily the children of the component)


@gadfly361 I had a section on components that introduced some terminology ( I actually wanted to build that out with a little more (render vs. mount would be good too). I think we decided to go with the existing tutorial so there wasn’t really a place for it.


Reagent also has r/state, but that's not used very much and is actually implemented using ratoms under the covers, not using component local state


Actually the base mechanism is a Reaction. All Reagent-y mechanisms are implemented on top of Reactions, i.e. track, cursors, wrap, re-frame subscriptions and of course ratoms


@lee.justin.m Ahh, i deleted that because, at first glance, it was too close , but if there are nuggets or differences from that, then they should be reintroduced - either in that document (if it makes sense to do so) or in its own ... so long they dont step on each other's toes


@gadfly361 yea no worries. we’ll find a place. one reason i’ve been a bit pushy on getting the documentation in a single linear order because it enables you to write definitive material, have a section on terminology, and cross reference more easily.


@pesterhazy if you actually understand how reactions work, please send a pr, because I can’t write that stuff. if reactions are what everything is built on, then a thorough exposition of them to start with followed by a “this is similar to a reaction, but….” would be a great addition


actually it would really be the final missing piece of documentation.


I can't claim 100% understanding, but I'll give it a try


We can always ask @juhoteperi when we get stuck 🙂


no one 100% understands reagent. it is a mystical text that was discovered on a papyrus scroll in Herculaneum


@pesterhazy I just did a little test. Unless I’ve messed something up, calling react/render appears to force a remount of the whole tree.


have you tried without #' and with a div with only a single child?


without #' is the same


btw if you have instructions how to run this with shadow-cljs, I'd be curious


I've been wanting to give it a try for a while now


(defn form1-component [num]
  (print "form1-component render")
  [:div num])

(defn test-component []
  (print "test-component being rendered")
  [:div [form1-component 42]])


ok cool, thanks for doing this test! You're right then


I'm pretty sure I had problems with render not actually re-remounting at some point, but maybe I was doing something wrong then


i’d just read the docs on how to install and then start here Biggest pointers are: you just call shadow-cljs watch app directly from the terminal. no lein needed


I should write a walkthrough


cool the starter helps already


join #shadow-cljs if you do. thomas really wants people to try it out and report confusion in the docs. he fixes stuff instantly (though he’s on central europe time i think so you gotta catch him in the morning)


I guess there could also be a clj one-liner using the new cljs.main a la


I'm already lurking there, will give it another try


if you use a lot of npm modules, it is just an amazingly better experience


I do use a ton of npm modules 🙂


most of the time it’s just yarn add or npm install and then import directly into your code


I’d like to migrate a fairly large AngularJS 1.5 based web app to ClojureScript with reagent/re-frame and was wondering if it is possible to rewrite some components in ClojureScript with reagent and embed them into the AngularJS? There is to embed React.js components so I guess it is possible.


I’m playing around with cljs.main, but I get an error when trying to use r/render:

$ clj -Sdeps '{:deps {org.clojure/clojurescript {:mvn/version "1.10.64"}  reagent {:mvn/version "0.8.0-alpha2"}}}' -m cljs.main -r
(require '[reagent.core :as r])
(defn foo [] [:div "Hello"])
(r/render [foo] (.-body js/document))
Cannot read property 'render' of undefined


Maybe I have to explicitly load react as well?


clj -Sdeps ‘{:deps {org.clojure/clojurescript {:mvn/version “1.10.64”}
                    cljsjs/react {:mvn/version “15.6.2-2"}}}’ -m cljs.main -r

cljs.user=> (require ’[cljsjs.react])
Error: goog.require could not find: cljsjs.react

Roman Liutikov10:02:55

@borkdude I think @richiardiandrea was discussing this issue on #cljs-dev , maybe he knows something 🙂


Was it ever possible to require foreign libs from a repl?

Roman Liutikov16:02:06

it certainly works for Node REPL

Roman Liutikov16:02:58

sorry, it doesn’t have anything to do with foreign libs


I had the same problem as above and I assumed you could. In lumo this is transparent so maybe I got spoiled :))