reagent 2022-02-25

Hi there, I just created a new reagent project using the Leiningen template. I can’t seem to find the html document which the React mounting function hooks onto. Does anybody know where it would be? It’s not in the top level root directory like I expected…

If there's no HTML document at all, it might be generated in run time from e.g. Hiccup.

Given that it's a new project from a template, there's likely not that much code - you can just read it in its entirety.

See if there's something like resources/public/html/index.html

@manutter51 looked for that first- nothing there.

Yep so it definitely generates at runtime from hiccup, but shouldn't there still be an html document in the repo from that generation?

What lein command did you use to generate the project?

I just tried lein new reagent test-app and checked it out. There’s a file named handler.clj that generates the “index.html” page using the html5 function from hiccup.page.

What folder did you find that index.html?

It’s not a file, it’s generated on the fly. The request comes in to the server, the server passes the request to index-handler, and the index-handler function generates the raw HTML data for the page and returns it.

There’s functions called mount-target, head, and loading-page that you can edit to change what’s on the page.

inside handler.clj that is.

Amazing thank you so much @manutter51

Can a reagent form-2 be a anonymous function that wraps state then returns an anonymous function? E.g

(fn []
  (let [seconds-elapsed (reagent/atom 0)]     ;; setup, and local state
    (fn []        ;; inner, render function is returned
      (js/setTimeout #(swap! seconds-elapsed inc) 1000)
      [:div "Seconds Elapsed: " @seconds-elapsed])))

That's exactly what a form-2 component is?.. It doesn't matter whether the outer function is created using defn or fn.

👍 1

(fn [] ...) will produce an unhelpful component name for when you need to debug it, but that's about it.

thanks p-himik. It seemed self evident but i don't see it done very often so i was worried there might be some hitch beyond lacking a name.

Just in case - it's a form-2 component if the outer function is used in [...] via whatever name you bind the function to. If you just call the outer function, then the inner function becomes a form-1 component closed over seconds-elapsed.

👀 1