Fork me on GitHub
#reagent
<
2018-10-10
>
kingcode02:10:24

Hello, I have never used Reagent and am trying to find out whether it is easy enough to build a basic web app which would have a few buttons, and little state. Specifically, I want to know whether it is easy to write repeatable data: the data items would be shown in html tables; and also, draw onto canvases and interact with graphic libs such as d3.js…Would I need to also learn Re-Frame to do the above? thanks for any comment!

justinlee02:10:59

@kingcode you can do all of those things with reagent. keep in mind reagent adds a layer of abstraction on top of react in addition to its state management techniques. re-frame adds considerably more structure to reagent’s built-in state management. so, yes you can do what you are asking. no you don’t need re-frame

kingcode02:10:42

@lee.justin.m Thank you..yes indeed I am aware of React, and have figwheel installed and running with Cider. I am trying to decide which will be faster - om or reagent/re-frame.

kingcode02:10:11

I meant faster to learn..

gadfly36102:10:40

Reagent (biased opinion)

justinlee02:10:44

if you are already familiar with react, reagent is probably the least amount of stuff you need to learn

kingcode02:10:18

hmmm..am familiar with React principles 🙂 but hopefully that should be enough.

kingcode02:10:43

I did play with Reagent in the past…briefly though

justinlee02:10:47

well that’ll help. just run through the docs directory on github and you should be up and running pretty quickly

kingcode02:10:40

I remember I had a question with regards to the need to use the exact same variable names within component declarations in Reagent when returning a function

gadfly36102:10:49

@kingcode if you're familiar with just the concept of react lifecycle (will mount, render did mount) should be good to go for quite a while. Not much else from react is needed for 95 percent of stuff

kingcode02:10:22

I will check it out and come back with my question later - thank you @gadfly361 as well

kingcode02:10:18

Yeah, those lifecycle methods are in both reagent and om..

kingcode02:10:37

Will go with reagent for now - thanks!

gadfly36102:10:52

@kingcode if you are interested in d3, I'd recommend this library I made: https://github.com/gadfly361/rid3

👍 4
kingcode02:10:49

@gadfly361 Thanks, will check it out….I need to build bar charts and plot point graphs - will that be possible?

kingcode02:10:13

Nice…thanks!

kingcode02:10:55

Stay tuned, and talk to you later (via more questions hehe)

👍 4
valtteri04:10:45

I’ve had good times making simple declarative charts with http://recharts.org/

(defn my-bar-chart []
  (let [data [{:a "cats" :b 200} {:a "dogs" :b 300}]]
    [:> rc/ResponsiveContainer {:width "100%" :height 300}
     [:> rc/BarChart {:data data}
      [:> rc/CartesianGrid]
      [:> rc/Legend]
      [:> rc/Tooltip]
      [:> rc/YAxis]
      [:> rc/XAxis {:dataKey :a}]
      [:> rc/Bar {:dataKey :b :label false :fill "#ffd400"}]]]))
Available in cljsjs [cljsjs/recharts "1.1.0-3"]

llsouder12:10:38

form-2 is not rendering. I made a simple test button, then changed it over to form-2 and nothing happens. I checked the code and found mount-components does call reagent/render.

llsouder12:10:57

I just tried an example from the purelyfunctional page and displays.

llsouder12:10:44

(defn counting-button [txt]
  (let [state (r/atom 0)] ;; state is accessible in the render function
    (fn [txt]
      [:button.green
       {:on-click #(swap! state inc)}
       (str txt " " @state)])))

llsouder12:10:53

I have plenty of test components displaying but none in form-2.

pesterhazy12:10:10

That should work, the error must be elsewhere in the code @llsouder

llsouder12:10:46

something is wrong. I just commented out almost everything and I still see println I commented out in my figwheel repl. Other things are changing but I don't see my new println.

deliciousowl12:10:09

maybe cljs didn't build? the function looks fine

pesterhazy13:10:53

Try Shift-Reload, restarting the dev env, and cleaning build artifacts (roughly in that order)

llsouder13:10:55

I deleted target/cljs, (clean-builds) in fig, and shift-reload And finally got rid of yesterday's debug prints

llsouder13:10:35

but still no form-2 components. I put a println of the txt in the counting-button, before the let and now I see that print but no counting button

pesterhazy14:10:55

There's no println in the snippet you posted. How do you expect us to be able to guess what problem you're talking about? It helps if you boil it down to a minimum and post the full namespace e.g. as a gist.

llsouder19:10:00

I think I got it... testing...

llsouder19:10:51

I was calling my components in a list not a vector so () evaluated my function and [] does not. [] appears to work. still... waiting for run/fig to come up...

llsouder19:10:44

Confirmed! It make sense. noob mistake!

llsouder19:10:08

There is still some weird dev crap happening as far as clean builds, figwheel and my environment but at least the world is somewhat sane again.