Fork me on GitHub
#reagent
<
2016-04-19
>
tom01:04:47

Has anyone used reagent.core/create-class? Can it be used in a react project in place of using reagent.core/render?

amonks01:04:31

create-class returns a react component class, like you might use from javascript

gadfly36101:04:47

@tom they serve different purposes, take a look at this recipe and you might be able to tell the difference: https://github.com/reagent-project/reagent-cookbook/blob/master/recipes/morris/src/cljs/morris/core.cljs

tom01:04:15

Thanks! Going to attempt to get a re-frame app to be usable by a javascript react project. I thought I'd start with that.

gadfly36101:04:22

when i think about those functions, i tend to rename them in my head: create-class --> create-component, and render --> mount

tom01:04:05

If the create-class ("create-component") is used, then render ("mount") can be done from javascript?

gadfly36101:04:58

@tom I havent dont that, but i imagine you can. If it doesn't just work, see "simple react integration" in this post: http://reagent-project.github.io/news/news050.html

fabrao02:04:27

Is that correct to do '(reagent/render [#'login] (.-body js/document))' and '(reagent/render [#'main-page] (.-body js/document))' to render pages? I´m trying to do this with Material Design Lite and if I call #'login first and then call #'main-page after, the event for menu button is not attached. I think I have to reaload the material.js again?

fabrao03:04:54

So, I just used (.upgradeAllRegistered js/componentHandler) after the render and the menu button is working. Is there the way the framework work? Or I have to ask in #material_design_lite channel? lol

martinklepsch08:04:33

@fabrao: not using mdl but I think you need to register some handler that is triggered for newly added mdl components. I think the mdl page mentions that somewhere

conan15:04:43

Hi reagent peeps, I've got some odd behaviour for you all. I've just found a solution to a problem that caused React to throw an Invariant Violation ... Unable to find element, but I don't know why it worked. I had a component that took a map of properties as an argument:

(defn dropdown
  [props children]
...)
In the props map, I had a mapping that used the key :key. So you'd call the component like this:
[dropdown {:key "abcd" :value "someval" :on-change #(...)}]
It turns out that React does not like this. Renaming the :key property to :k (or anything else) solves the problem. I know React uses the :key key in the metadata map in lists of things as a unique identifier, but this wasn't metadata - any ideas why this causes a problem? I realise using a key name of :key isn't the best idea, but the weird thing is that it does not cause a problem on my colleagues' OSX machines or our development Linux environment, only on my Windows machine. I can't for the life of me see how being on Windows could possibly cause a React issue, but maybe there's something I don't know about Closure?

mccraigmccraig15:04:08

@conan: you can use either a :key attribute or :key metadata to supply an id to a component...

conan15:04:14

ah, you learn something new every day. thanks!