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. https://github.com/reagent-project/reagent/blob/master/docs/ManagingState.md

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

Heads up, this in particular has several hanging TODOs https://github.com/reagent-project/reagent/blob/master/docs/ManagingState.md

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 https://github.com/reagent-project/reagent/issues/112#issuecomment-82908212

@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: https://gist.github.com/pesterhazy/33d5ac78629b11c5120c58b81d5e8114

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

ah, good

@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. https://github.com/reagent-project/reagent/issues/302

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 (https://github.com/jmlsf/reagent/blob/34af94f3000f47321fff73b6603aa6622fda8c40/docs/ReactUserGuide.md#what-is-a-component). 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 https://github.com/reagent-project/reagent/blob/master/docs/CreatingReagentComponents.md , 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.

Comment added: https://github.com/reagent-project/reagent/issues/209#issuecomment-368727644

@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. https://gist.github.com/jmlsf/0a78c196cf3c45db15fd7df8cbee2b22

@lee.justin.m test looks good

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]])

^ same

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 https://github.com/lauritzsh/reagent-shadow-cljs-starter 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 https://twitter.com/mfikes/status/967929140430229505

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 https://github.com/ngReact/ngReact 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

@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?

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