Fork me on GitHub
#reagent
<
2015-07-16
>
Petrus Theron10:07:50

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.

Petrus Theron10:07:11

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

Petrus Theron10:07:34

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])
body is a seq in that context, so it will complain about that. And if I make it a single argument, like a [:div ...], it complains about the seq inside that div. What am I doing wrong, or is this the pain I have to deal with?

Petrus Theron10:07:19

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.

xhh10:07:50

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

xhh10:07:43

(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

Petrus Theron10:07:44

that seems to help

Petrus Theron10:07:59

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

xhh10:07:22

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

xhh10:07:18

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

Petrus Theron11:07:46

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?

Petrus Theron11:07:57

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

Petrus Theron11:07:30

What are reagent cursors commonly used for?

Petrus Theron12:07:03

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

Petrus Theron12:07:31

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

roberto13:07:32

I stay away from cursors

gadfly36115:07:15

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

gadfly36115:07:17

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

borkdude19:07:25

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

borkdude19:07:12

sounds counterintuitive maybe since most people think less atoms is better

borkdude19:07:34

it all depends

curtosis20:07:05

reagent-forms are not making sense to me yet.

curtosis20:07:01

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

curtosis20:07:10

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

roberto20:07:44

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

roberto20:07:22

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

curtosis20:07:46

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



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

curtosis20:07:24

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

curtosis20:07:52

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.

curtosis20:07:10

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

curtosis21:07:11

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.

Pablo Fernandez22:07:42

Should I learn react before learning reagent?

roberto22:07:08

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

roberto22:07:24

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

gadfly36122:07:31

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

gadfly36122:07:55

Yeah, I agree with @roberto

Pablo Fernandez22:07:22

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

Pablo Fernandez22:07:27

But that’s about it.

roberto22:07:34

just write code simple_smile

Pablo Fernandez22:07:53

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?

roberto22:07:22

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.

gadfly36122:07:24

Take a look at reagent cookbook for simple examplrs

gadfly36122:07:47

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

roberto22:07:52

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

Pablo Fernandez22:07:24

Cool. I’ll take a look.

Pablo Fernandez22:07:35

Is reagent actually using Hiccup or another library?

gadfly36122:07:07

Toggle class is a good starter recipe

coyotespike23:07:48

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?

coyotespike23:07:31

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

gadfly36123:07:13

👍 on cookbook recipe