I've been spending some hours researching which of three gems will be the best fit for our Rails/React needs. We run a few Rails sites, all of which use React pretty heavily. Usually I presume the best solution is whichever project has the most stars, but in the case of these three, stars alone haven't made it abundantly clear which project will be best. Our main needs/wants:
HMR that Just Works, with an example case to prove it. Strong preference for boilerplate-free solutions.
Means by which to mount components that are loaded after initial page load (without re-loading previous components and etc)
(Prefer) Easy path by which to server-side render component for possible SEO and page speed benefits
(Prefer) Sufficiently unambiguous name to easily Google results. Dunno why open source projects often seem to have such a hard time with this.
(Maybe) Testing framework
Below is my assessment of the benefits of various contenders.
Smallest project, only a couple hundred stars. 14 issues, 70 commits
Still labels itself "beta" though its last commit was July 2019
Small size advantage
Documentation disadvantage
HMR that "just works" in the packs
Components explicitly registered when pack setup, allowing good opportunity to wrap them for Sentry something like this
Doesn't use packs/application.js (presumably because components are registered directly)
Can re-mount components via direct call post-xhr, so can extrapolate a solution equivalent to the one recommended by shakacode.
Largest project, about 6k stars. 83 issues, 1131 commits
It's organization calls itself the "React community," which has some credence
Signature feature: allowing React components in Sprockets pipeline (no thanks)
This "signature feature" serves to muddy the waters considerably when it comes to Googling documentation on how to connect components and application.js, which is defined both in sprockets (gets some react includes added) and in webpacker (has three lines without documentation)
Allows server-side rendering
Documentation pretty lacking after first page. Have spent several hours Googling for what would seem to be easy problems. Has been far from a "just works" solution for a complex page with many components, some of which load via xhr
Seemingly no example apps that use packages aside from App.js
Hot module reload explanation is shuttled off to Stack Overflow question which links to a gem which claims it is deprecated and links to a Github Issue that is "expected to be its replacement" but is in fact a very, very long comment about a process by which HMR might be replaced. 🤦 Wow.
Example project they link to uses react-hot-loader npm package. It shows the component itself implementing HMR, which implies a healthy dose of boilerplate across many components.
Spent at least 30 mins Googling futilely to ascertain how one instructs react-rails that there are more than one directory in which components are located. Every single example project links only to components.
Middle project, about 5k stars, 19 issues, 1600 commits
Talks a lot more about the server-side render use case (including examples), which seems page-load and SEO-useful for noteapps.info
Supported by donations from users, memberships aggressively sold (by open source standards) but it doesn't go the Sidekiq route of making payment mandatory for distribution
Getting component to load after xhr can be done but takes some heavy lifting to fix it as well as react-rails mountComponents method
They do have an existing example that's specific to getting components to load when using Turbolinks, which could potentially be repurposed
Most usable examples, including HMR example, which uses zero boilerplate in contrast to the other two.
Explicitly register components via ReactOnRails.register({ HelloWorld }); by default, this implies that one needs to create a caller that has a full list of every component that will be used in the course of rendering a page, which doesn't lend itself to large sites with many components on a page
Doesn't use packs/application.js (presumably because components are registered directly)
Level of Googling the gem: moderate. "React on Rails" is difficult for Google to disambiguate from the more popular react-rails, so I've found myself mostly Googling "shaka react rails [query]" which has worked OK
Project has link to a Slack channel (not obvious if it's only for the gem or?)
Could learn more if willing to listen to long podcast without transcript
Friendly useful post-install instructions