Can you recommend me some material explaining the best way to integrate these things into a reagent/re-frame project?

Like, how to compile, and reference the JSX files from Reagent

@mateus.pimentel.w You can include JS libs using CLSJ's foreign libs configuration. I suggest consulting your build tools docs (such as figwheel or shadow) to figure that out.

@mateus.pimentel.w You can read up on native react/reagent interop here: https://github.com/reagent-project/reagent/blob/master/doc/InteropWithReact.md

@mateus.pimentel.w And some code examples for using MaterialUI: https://github.com/reagent-project/reagent/blob/master/examples/material-ui/src/example/core.cljs

JSX compiled modules are also optimized by closure?

with shadow-cljs for example

you’ll need to compile the jsx to es6 at least. surely material-ui comes with a umd bundle?

I create a bundle with webpack that gets imported via fighweel. Not sure how shadow would do it, since you can import directly. But yea, I imagine everything is in es5/6 by the time it hit closure

@mateus.pimentel.w if material ui really don’t come with es6 sources (weird), then you either need to webpack it or you can configure shadow-cljs to perform the jsx babel transform on it directly. https://shadow-cljs.github.io/docs/UsersGuide.html#_javascript_dialects

alright

also, FYI @material-ui/core is HUGE (like 6-8MB). So even if the tree-shaking would work, I would suggest still using per-component imports.