react-rails is a handy gem that helps integrate ReactJS into your Rails application.
While it comes with some great features like server side rendering, bundled UJS, and view/controller helpers, it's a bit heavy for smaller Rails applications or cases where you're mounting simple components.
I have previously covered why it's sometimes a good idea to build your own version of something instead of using an outside library, and this is one of the cases where the simplicity and learning experience outweigh the various features the library brings.
- Create a server-side (Rails) helper that will create a DOM mount node
The Rails Side
First we create a helper method that will create a DOM node (a
<div>) that we can mount our React component on to.
The helper will assign the DOM node a unique
props we want to pass to the component as a
data-* attribute on the element itself.
All we have to do is call this helper from the
view. I've used the name
react_component to mirror the name of the view helper that
Now that the DOM node exists, we can dynamically mount components on to it.
First we create a JS helper function (
mountReactComponent()) that does the following
- Finds the DOM node from the specified
- Extracts the
- Mounts the specified component on to the node with
Once that's set up, it's just a matter of calling
mountReactComponent() without our desired example component.
And that's it!
This approach may come with a few limitations as you scale but it does it's main job well: rendering ReactJS components into your page. Coupled with standalone Webpack to bundle assets, I've succesfully used this in several mid-tier apps without many issues for a few years now.