when I do standard js react dev, I'll often grab components off the web and try them out for size... is there a way to drop js react components into a reagent project without having to convert them to, say, hiccup?

(reagent/adapt-react-class (.-MyComponent my-js-lib)) or something like it should work. But ultimately I think they’ll have to be usable in hiccup

cool, thanks!

what do you mean by 'ultimately I think they’ll have to be usable in hiccup'?

no need to respond to that... I'll play around a bit and probably figure out what you mean.

ok... looking more complicated by the minute. I definitely would want something along the lines of being able to use any react component in the npm ecosystem, and so I found http://blob.tomerweller.com/reagent-import-react-components-from-npm but that's a lot of setup for each new project. I wonder if this has been streamlined at all?

if you use shadow-cljs, the NPM stuff is streamlined for you

there's still some one-off issues when libraries are packaged weirdly, but 80% of the time you just npm i some-lib and then in your ns:

(ns my-app.feature
  (:require ["some-lib" :as some-lib]))

oh fantastic!

for clarity: shadow-cljs is an alternative to lein + cljsbuild + figwheel. it helps manage your builds, dependencies, and compiling your CLJS code in a streamlined way

assuming shadow-cljs is easy enough... looking at that now.

if you run into any issues, we hang out in #shadow-cljs 🙂

in the shadows, eh.

what would is meant by 'properly imported as a React Component' at http://reagent-project.github.io/docs/master/InteropWithReact.html ?

that's in the first paragraph of the Creating Reagent “Components” from React Components section.

I think it means "you've gotten to the point where you :require'd FlipMove correctly"

ah ok... where/how would I have brought FlipMove into the project ideally? (sorry for being so lame here... I did search on this a bit)

ah, see you responded in shadow-cljs... I'll take this conversation there.

or, I don't know, maybe it should stay here for continuity.

I'm always confused as to when slack conversations should turn into DM ones... and it pains me everyone has to watch my floundering.

haha it's OK. we're learning in public 🙂

were my instructions in #shadow-cljs helpful?

they were, though it will take me a bit to implement the steps.

I'm wondering if I can, for now, just bring, say, FlipMove into a plain reagent/re-frame project and use it without going into the shadows just yet.

this is because I'm still just learning the basics of hiccup and so on and it may be a bit much to do more.

so by that you mean a project using figwheel, cljsbuild and leiningen right?

yeah... that's what I'm familiar with.

I mean, I'm just trying to wean off vanilla react and inspire myself that I can do that.

which would mean being able to use something like semantic-ui-react to make a pretty interface...

and maybe be able to use or convert existing react components I find on the web as I do in vanilla js.

I do have the feeling at times that it's hard to get the same nice looking interfaces using things like cljs because functionality is a higher priority and sometimes I feel that the look and feel thing is an afterthought BUT that could be a total illusion based on my lack of knowledge.

a lot of look and feel stuff on the web comes from third party things to complement approaches like React.

yeah. it’s hard because things like semantic-ui take a lot of time and resources to build

I agree that having access to 3rd party libs from the greater JS ecosystem helps a lot

unfortunately, it’s hard to do that using figwheel + cljsbuild. you usually have to include webpack as well

ah, ok... that's what I'm starting to figure out.

when trying to sell people on a cljs approach for a project (I shouldn't need to sell them on anything, but it's part of life), the first thing they will want to know or see is whether the output looks as good as other approaches... and they don't really care about my developer experience, nor do I think they should. I need to show them it's comparable and a better approach.

I agree

@macrobartfast I created a quick example using shadow-cljs + reagent + flip-move: https://github.com/Lokeh/shadow-reagent-flip-move-example

@lilactown you are the best!

I was away from the computer for a few hours and had decided I just probably needed to go the traditional react route ;-( and then returned to this!

maybe the little push I need to stay in the awesome mix.

it all works like a charm 😀

a little hiccup (no pun intended) with the last route in your repo (connecting remotely) by typing

shadow> (shadow/repl :app)

shadow> (shadow/repl :app)
Syntax error compiling at (shadow-reagent-flip-move-example:localhost:58814(clj)*:50:9).
No such var: shadow/repl
Syntax error macroexpanding clojure.core/ns at (browser.cljs:1:1).
((:require [reagent.core :as r] ["react-flip-move" :as FlipMove])) - failed: Extra input spec: :clojure.core.specs.alpha/ns-form
shadow>

something obvious on my part, I'm sure.

never mind, works now.

just restarted everything and solved it.

😄 happy to help