4 ms·
FYI - There's some neat ways you can embed React components inside Rails templates. Basically - embed the props in a template-managed `script` tag, and use Stim
by RangerScience 2y ago
FYI - There's some neat ways you can embed React components inside Rails templates. Basically - embed the props in a template-managed `script` tag, and use Stimulus to mount the react code, passing in the props read from the DOM. Now your React is pure state-to-view, no need to synchronize anything, - it's really just a handful of React components instead of a full React app.
That said, AFAICT, there's just two advantages:
1. Those annoying little UX doohickeys that actually DO want that level of interactivity
2. You can use any of the vast library of existing React components (for me, that's been react_big_calendar)
As a bonus (and, why I rolled my own, since `react_on_rails` doesn't support these), and with a bit of tweaking:
1. It plays nicely with Turbo. I can use Turbo to update my React props and it just... works.
2. You can embed a template as a child of the React component.
2a. This also plays nice with Turbo.
It sounds a little screwy, but so far it's working well, and it feels like it lets me use the right tool for the right job - aka, Rails for everything except the stuff with extremely high interactivity.
- fareesh 2y agoI do this too, it works well
- jnathsf 2y agoAmazing! I would love to see a blog post or a gem that unlocks React components with a Rails + Stimulus/Turbo app.
- caiohsramos 2y agohttps://evilmartians.com/chronicles/the-art-of-turbo-mount-hotwire-meets-modern-js-frameworks https://evilmartians.com/chronicles/the-art-of-turbo-mount-h...
- RangerScience 2y agoI intend to! And to wrap it in a gem; I’ve got it partly there, but it’s a currently a mess as I ran into a bunch of “oh that didn’t actually work” problems at various points. I’ll post a link later… Edit: Ach, sorry - it's going to be awhile, when I went to roll my own I did it inside my project, so it's not even close to being available as a gem :/