http://re-demo.s3-website-ap-southeast-2.amazonaws.com/#/box <-- any time I have a hiccup component that is not a re-com component, am I supposed to put it in a box to ensure it does not screw up the flex-bolx layouting ?

@qqq if you go creating your own :div and :span then you'll probably have to put the right flexbox attributes on it.

Not so much if this :div or :span is a "leaf" in the DOM

But you'll certainly need to add the flexbox attributes if this :div or :span is an intermediate level whcih will have re-com component children.

okay; so if I build anything that contains re-com nodes as children, then I have to understand flexbox ?

It depends, but probably.

Either that or use hbox and vbox in the thing you build

in hiccup, is there a nil/null/no-op elem? I want to do something like (if @blah [some eleem] null-here)

it would seem logically (to me, and thus may not be the correct approach) that the parent would need to check that condition and either include the child or not

(when @blah [some element]) will work. nil is ignored in hiccup children

so @mikethompson , it is as if the child was not called at all then?

@mikethompson : cooll; thanks!

@joshjones Hmm. I can tell from the nature of your question that you should read the tutorials under "Reagent Tutorials" in here: https://github.com/Day8/re-frame/wiki

I already did 😞 lol

But at a fast pace ... remember that a renderer just returns a datastructure.

So this

(defn r 
    [bool]
    [:div  "Hello"  (when bool  "there")])

Will return either: [:div "Hello" nil] or [:div "Hello" "there"]

So ... if we make the render like this:

(defn r
   [bool]  
   [:div  (when bool  [some element]])

[:div nil] or

[div [some element]]

Does that answer your question ?

mostly -- but is [:div "abc" nil] equivalent to just [:div "abc"]?

The key thing is that there is no "calling" of some as a result of the parent rendering. Just the placement (or not) of some into a datastrcuture

Yes, hiccup will ignore nil children

ok, that addresses my confusion -- I read so many re-frame specific documentation today that i forgot all the basic reagent stuff lol -- thanks @mikethompson

no problem

would the re-frame api be cleeaner if h-box and v-box took first arg as :children

No, it would be worse :-)

All the fiddly details like :width would be hidden away after potentially lots of children

why? I never use h-box v-box w/p :children

hmm, you actually want children to be last?

Yes

Well, it is more that I want the style stuff to be close to the beginning

Before we get lost in all the detail associated with children

I find ` [v-box :children [ [ .... and

and the children on a new line both to be rathe rugly

The good news about named args is that you can arrange whatever way you want.

I wonder if I can get away with (v-box css-class children)

and stuff all the details into css

I actually don't want to see anything besides the children

All possible ... if that's the way you want it. We always try to bias our code towards the later-reader. And we like the style details clearly visible.

Gotta go

I just dealt with the worst bug for the past hour

what was my bug?

I was using an atom instead of a reagent.core/atom

Some nice re-frame mentions A deep dive into ClojureScript reagent - https://news.ycombinator.com/item?id=13373426

I have a small prototype I built months ago with cljs-react-material-ui and re-frame. I picked it up again and wanted to upgrade both to the latest versions... now I'm getting this on the JS console: Error: js/ReactDOM is missing ... that's from Reagent's render . Any ideas?

my dependencies on lein: [org.clojure/clojurescript "1.8.40"] [cljs-react-material-ui "0.2.35"] [reagent "0.6.0" :exclusions [cljsjs/react cljsjs/react-dom ]] [re-frame "0.9.1" :exclusions [cljsjs/react cljsjs/react-dom ]]

Went back to [cljs-react-material-ui "0.2.31"] for now. Thanks

I think it's enough to remove react from reagent, don't need to exclude react-dom.

@hlolli Thanks. I get a Circular dependency compilation error if I don't exclude react-dom

I think it has to do with cljs-react-material-ui

its documentation clearly states to exclude react-dom also... but then I get Error: js/ReactDOM is missing

(if-atom [atm then else]
            (fn [_ _ _]
              (if <@U169ZE1J4> then else)))

since it's in the gui namespaced I want to just name if "if", so I can do "gui/if" ... but I don't want to override if

I have named it if-box and am happy with that name.

In re-frame, labels become spans with class "rc-label". Now, if I overwrite that class with my own class (css styles I want it to use) -- will bad things happen via flexbox, or is this a safe op?

@dobladez we have this, which is working:

[org.clojure/clojurescript "1.9.293"]
                  [reagent "0.6.0" :exclusions [org.clojure/tools.reader
                                                cljsjs/react
                                                cljsjs/react-dom]]
                  [re-frame "0.9.1" :exclusions [reagent]]
                  [cljs-react-material-ui "0.2.35"]