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.