Fork me on GitHub
#reagent
<
2022-02-25
>
Christopher Gsell17:02:22

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…

p-himik17:02:25

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

p-himik17:02:58

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.

manutter5117:02:43

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

Christopher Gsell17:02:38

@U06CM8C3V looked for that first- nothing there.

Christopher Gsell17:02:25

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

manutter5117:02:28

What lein command did you use to generate the project?

manutter5117:02:08

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.

Christopher Gsell17:02:13

What folder did you find that index.html?

manutter5117:02:29

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.

manutter5117:02:06

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

manutter5117:02:22

inside handler.clj that is.

Christopher Gsell17:02:34

Amazing thank you so much @U06CM8C3V

Drew Verlee17:02:43

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

p-himik18:02:40

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

👍 1
p-himik18:02:17

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

Drew Verlee18:02:09

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.

p-himik18:02:55

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