Fork me on GitHub
#reagent
<
2016-06-11
>
plexus12:06:40

is there any documentation about Reagent components vs "native" react components?

plexus12:06:54

e.g. why there is :render vs :reagent-render

mikethompson12:06:07

You should generally ignore :render. It corresponds to the raw React render function which only gets this as a parameter. Instead, you should use :reagent-render which will be given props as parameters.

plexus12:06:52

I guess my question is: how are reagent component (component classes?) implemented

plexus12:06:35

I'll spend some more time reading the source, so I'll get there eventually, but if anyone has written things that would help me when trying to understand the code... that would be helpful 🙂

joshjones22:06:24

Hi all, I'm working on my first cljs project, and I'm using reagent. I used the lein reagent template and have three src subdirectories: cljs, clj, and cljc. In cljs I have projname/core.cljs, and charts/charts.cljs, where I use highcharts. The charts are working great, but now it's time for me to actually pull the data from the db to give to the charts. Where should this code go? I'd like to put it in a "db" folder but not sure whether this should be clj, or cljc ... and how to then :require it from my charts.cljs file (just a regular :require [db.db :as db] ....?) Please forgive my ignorance on this; it's a bit different from a regular clojure project and I'm still figuring things out.

plexus22:06:26

What kind of database are you pulling that data from?

plexus22:06:14

@joshjones: I'll assume you have some database on the server side, you will need to implement an API endpoint so your Reagent app can request that data from the server

plexus22:06:11

in handler.clj you find a defroutes routes section

joshjones22:06:12

@plexus - thanks for your reply! I have a local mysql database. I have clojure code already written that performs the queries, etc. I just need a way to reference the clojure functions.

plexus22:06:42

the thing is, you can't just "reference" those functions from ClojureScript, they live in separate worlds

plexus22:06:16

your reagent app is compiled to JavaScript and runs in the browser, your database runs on the server

plexus22:06:26

you need to bridge that gap yourself

joshjones22:06:33

that makes sense, so what would you recommend for the best way to hook things up?

joshjones22:06:34

I see the defroutes routes section, where I have put my other routes

plexus22:06:29

Compojure is already included, those are those routes in handler.clj

joshjones22:06:32

I used lein new reagent ... so I think I have these

joshjones22:06:22

ok ... I will do some research, and I appreciate you pointing me in the right direction. I'm sure after my research I will have some more questions. Thanks for your patience with a cljs newbie

plexus22:06:29

ring-middleware-format and cljs-http won't be there yet, you'll have to add them to project.clj

plexus22:06:25

actually I would use this one instead of cljs-http https://github.com/JulianBirch/cljs-ajax

plexus22:06:54

it's a thin wrapper around XhrIO which is all you really need, cljs-http is built on core.async which will makes things more complex than necessary

gadfly36122:06:04

+1 to @plexus recommendation

plexus22:06:50

I started from lein new reagent reagentnew, then applied these changes. That's all you need

joshjones22:06:56

thanks @plexus -- I think a separate sample project like this is a great idea, and then I can integrate it into my existing project

plexus22:06:29

yeah exactly, I know how tricky it can be to get all the moving pieces in the right place the first time

joshjones22:06:00

now that I think about it, I used lein new figwheel proj so that I could use figwheel to automatically update upon saving, so that may have muddied my mental waters a bit

joshjones22:06:34

but i also see a :figwheel in the reagent project, so it looks like I can also use it with the reagent template

plexus23:06:45

yes, the reagent template includes figwheel. It's pretty standard now for ClojureScript-heavy projects