Fork me on GitHub

Hello! How is hiccup imported into this namespace :thinking_face: ? I can not see what line enables Hiccup here


Huccup is just a way to represent DOM elements with Clojure data structures. Reagent transforms Huccup into React's objects for you.


but the problem is that there is only thing of imports [reagent.core :as r] And it is not obvious how it works actually?


usually you have to import macros and functions before use


and thar r/atom thingy somehow refreshes functions...


Oh boy. You're basically asking how the whole Reagent works. 🙂 You need only to call reagent.core/render. Everything else from Reagent is optional. That function will traverse all data structures in the Hiccup form and all functions, and will create all the necessary React objects and let React do the rest. The r/atoms are magic. Basically, when you dereference them in a view function, they're registered in an internal Reagent registry that propagates any changes to them to a function that re-renders that very same component.


I see 🙂


1 thing : how then [:div... form works? does it register some reader macro before compilation


No-no-no. It's a plain vector. Reagent then just sees the vector, turns its first element into a component, and the rest of the elements into its parameters. Plain data manipulation.


aaah this one r/render-component then does the magic. Now it is all clear. thanks 👍:skin-tone-2:


No problem. You can also just skim through Reagent source code. Most of the stuff there is fairly easy to understand, at least on the surface.


now it will be much clearer. I did not realize that components are vectors


Yep. I personally like Hiccup more, but if you prefer proper function calls of macros, there's also Fulcro and other similar projects that do stuff like (dom/div (dom/h4 "Page title") (dom/button ...)). I don't know of other differences though because I'v e only used Reagent.