So the ReactJS key warnings are really starting to get to me. It wants me to add keys for everything little thing - even static elements.

I know I can add ^{:key "something"} that only has to be unique inside that tree, but it's too much.

I have all these form helper functions that React complains about. E.g.

(defn success-btn [on-click & body]
  [:button.btn.btn-success
   {:on-click on-click
    :type "button"}
   body])

e.g. one such warning I get: Warning: Every element in a seq should have a unique :key (in plus$app$wizard_view). Value: ("Continue " [:i.fa {:class "fa-long-arrow-right"}]) Presumably the list starting with "Continue" ... is the cause. I tried (vec body), but that doesn't help either.

@petrus: have you tried (into [:button.btn.btn-success {:on-click on-click :type “button”}] body) ?

(vec body) does not seem to work to me, as it would return ["continue" [:div]] for list ("continue" [:div ]), and reagent expects the first element of a vector to be html tag or a component function

that seems to help

yayyyy

thanks, @xhh

Should I be calling these helpers with (success-btn ...) or as components, [success-btn ...]? I don't like losing Cursive's argument checking.

@petrus: you’re welcome, basically we i’ve kept thinking is to transform elements into [:div “child 1” “child 2] to avoid that warning

[success-btn …] should be the idiomatic approach, as that would be only called when necessary

Thanks. Now I'm fighting a different error: Uncaught TypeError: Cannot read property 'unmountComponent' of undefined The stack trace is just react.inc.js gobbledygook. Any ideas?

ah, think I solved it. I was overriding a parent atom that should have been touching a cursor.

What are reagent cursors commonly used for?

Can re-com components like input-text take a reagent cursor as a :model argument?

looks like it can, but the cursor must not resolve to nil initially.

I stay away from cursors

I've used cursors before and I view them simply as pointers into your app-state. Just

A way to get at a nested part of your data more quickly without caring where that data lives in the context of your entire app-state

I also moved away from cursors (after Om). I find splitting data into atoms much easier to manage.

sounds counterintuitive maybe since most people think less atoms is better

it all depends

reagent-forms are not making sense to me yet.

I think I have a textarea bound to my state ratom, but it doesn't appear to pick up changes from the repl.

and I'm not coming from vanilla react so I'm not sure where to poke 😛

i haven’t used reagent-forms. Not sure what they do.

looks like something you don’t need if you are using re-frame

(defn note-form-template []
  
    [:div.row
  
       [:textarea {:field :textarea
 :id :note-text}]])



(defn note-form []
  
    [bind-fields note-form-template state])

heh... I was hoping to stay simple at first and not jump to re-frame.

the only thing I'm doing that looks really different from the examples is using a ratom that's defined at the top level, not inside the form component.

but that doesn't seem like it'd make a difference.

well now I'm even more confused... I have a :label that binds to the same key in the ratom, and that works. but the textarea doesn't. Not even if I change it to a simple text input field.

Should I learn react before learning reagent?

You don’t have to. I learned reagent first.

And only learned the parts of react I needed (e.g. the lifecycle)

@pupeno I don't think so. If you understand (at a high-level) the react life-cycle, that's all you need.

Yeah, I agree with @roberto

I know the whole thing about the virtual dom, comparing it and so on to update it.

But that’s about it.

just write code

I’m looking at the snippets here: https://reagent-project.github.io and they look interesting, but is there an easy way to have a complete example to run those snippets in?

play with it first with a small side project before you commit to write a production app at work. I think that is what you should do with any new tech first.

Take a look at reagent cookbook for simple examplrs

Has step by step guidance and a lein template that pairs with it.

there is a reagent examples repo, I think. Just dig around in the reagent-project github

https://github.com/reagent-project/reagent-cookbook

Cool. I’ll take a look.

Is reagent actually using Hiccup or another library?

Toggle class is a good starter recipe

I just deployed my first Reagent app to Heroku! Exciting. For some reason, Bootstrap's carousel works in Figwheel, and in my compiled uberjar, but does not scroll on Heroku. I thought Heroku just used lein uberjar, so I'm not sure why there's a difference. Does anyone know why?

Also, if there's any interest in the Carousel (once it's working), might be convenient to have online somewhere (cookbook?).

👍 on cookbook recipe