hi. i just started using reagent. fairly experienced with both cljs and react and it seemed lighter weight than om, although i'll probably eventually want to try out both, and just want to quickly port a react component to wrap my head around it. the trouble i'm having from the tutorial and examples i see on github is that the way i use react is not with jsx, but just with the api usually mapping state from arrays in my container component (often loaded with AJAX from JSON) to UI components. then on top of that...i tend to use es6 classes so i can destructure some of react's classes and lately, including in the case i'd like to port, using React.createFactory in this manner to spawn n numbers of my UI components in a reflective manner. i hope that description makes sense, but if not i'd be happy to clarify. i'm really just looking for examples/advice on how to use reagent to work with react's top-level API rather than JSX and i think once i figure that out it will be much more straightforward than the way i've been doing it in JavaScript. thanks!

I'm not sure how to do the things you describe, but there are a couple of resources that have helped me out a lot in learning reagent: https://github.com/reagent-project/reagent-cookbook https://github.com/Day8/re-frame/wiki/Creating-Reagent-Components

well...what i'm saying is i already read through the reagent tutorials...and what i'm asking for are just examples wrapping more of the classes from the top-level react.js api rather than using hiccup

it should make sense to people who've used react.js through the api...the problem is most you talk to on the js side have only used jsx, which is a lot like hiccup

i just mean these wrappers for these classes: https://facebook.github.io/react/docs/react-api.html

Ah ok, I don't really have much experience with react itself. I started using reagent without knowing anything about react. The reagent API maybe have some of what you're looking for. Seeing the link you posted there are several functions in reagent.core that seems to fit the bill.

http://blog.ducky.io/reagent-docs/0.6.0-alpha2/index.html

createFactory, i don't see anything that might help there, but react is available in the js global scope (js/React) but that might not be of much help.

yeah seems i just want to make use of their wrappers on that level

well createFactory is really just syntactic sugar that can be replicated with createElement

although a little rough going this route in having to figure it out on my own!

I had a lot of trouble figuring out stuff too. There is a lot of react resources, articles and the likes, and not that much reagent. So figuring out the interop have taken a fair bit of my time.

But starting with a good understanding of React puts you in a better place to figure it out than I have.

uh...well...presumably you're using reagent in a manner consistent with example projects and tutorials whereas i'm using it consistent with best practices for React.js and i suppose will have to choose whether to read through the source seeing as there don't exist any example projects that use it this way...

I'm sorry I couldn't be of more help. I tend to not touch the top level api very often. Whats been of most help have been learning how to use the lifecycle functions, and then I tend to stick to using pretty basic hiccup and using atoms for state.

really? the tutorials all say to avoid even the lifecycle functions. that i can at least understand since they're a major source of race condition bugs

but making react more like writing markup and less like programming...idk i always saw that as the webmonkey approach

i suppose with atoms you eliminate the need for container components so that's very smart

hmm, I use the lifecycle functions fairly frequently and haven't heard that you shouldn't use them. I'm sure they can be troublesome sometimes. But sometimes I don't see any other way to handle certain problems. Like selecting dom elements when things are mounted and so forth.

I have heard tho that using react to handle state isn't that great of an idea when using reagent.

I feel more often that reagent presents its own paradigm, and I've been sticking to that rather than coaxing reagent to do things the react way.

reagent is the react way...it's just the less sophisticated one where you use jsx instead of the api. better for designers instead of programmers, which is a bizarre choice for clojurescript if you ask me

I don't really see it that way. React is a way to render data to the dom, and clojurescript is all about the data. All the good stuff about clojurescript and a good way to reactivly render your manipulations to the dom.

@sophiago something to note is that hiccup is based on a native clojurescript data structure unlike jsx in javascript. As a result, hiccup can be manipulated with vanilla clojurescript functions and it ends up being very useful.

@gadfly361 does it end up being useful in a way that helps me port a large library of existing react components for easier cljs interop? because otherwise i'd just use them in their js versions

@sophiago no, it doesnt help regarding that issue. Just commenting why clojurescript community might have made that choice to use a jsx-like syntax

i understand it. most js people use jsx

and as you mentioned, this isn't really like jsx other than in a systems design sort of way

my choices at the outset are just slightly frustrating is all. like atoms are a clear win vs. container classes

and i'm talking to someone who similarly comes from a react background and decided to use 100% js interop other than atoms, but i don't see the point of that and would really prefer to port my components using your wrappers

I understand your dilemma, unfortunately i have no insight toward a solution (been entirely on the cljs side of the fence). Hope someone is able to chime in that can help tho! :)

i'm just having some frustration over the amount i'm forging my own path compared to how i imagined is all 🙂

hopefully won't be too long

i'll spend some time researching, then maybe post to the list. but all in all this is a tiny project that encompasses pretty much everything i need and then can expand from there