To create interactive and visually appealing applications while maintaining productivity with a Ruby on Rails backend, developers often opt for a combination of a Rails-based API and a React frontend.
However, maintaining a full frontend app in React and keeping it in sync with a Rails API can be a lot of work. It may not be worth it specially when only a few parts of your frontend really need to be dynamic. Wouldn’t it be nice to write plain Server Side Rendered (SSR) pages most of the time, and create dynamic frontend components only when necessary?
If you do not care for writing SSR pages and prefer to use full React apps all the way, there are a few things you should consider. In his book, Sustainable Web Development with Ruby on Rails, David Copeland highlights that JavaScript code can be a more significant liability than Ruby code due to a few reasons:
- You have no control over the runtime environment.
- Your JavaScript behavior is difficult or impossible to observe in production.
- The ecosystem values small decoupled libraries that tolerate breaking changes in order to progress quickly.
Despite these costs of JavaScript, we often cannot avoid it, but we sure can limit its usage to the areas of our application where it is absolutely necessary, and leverage SSR everywhere else.
While there are several other options available for this exact use case - the most notable nowadays being Hotwire - React remains a popular choice among developers. It has a large and active community of developers who contribute to the ecosystem by creating and maintaining libraries, tools, and resources. This community support means that developers can find solutions to problems quickly and get help when they need it, and so, some teams will often prefer React over other options.
This is where the React on Rails gem comes in.
You can take a look at the full React on Rails documentation, but here’s an overview of how easy it is to introduce a React component into your app. Spoiler alert: there’s no need to create new controllers and API routes only to serve your components. You can pass all the data directly from your Rails view instead of having it load and then make a separate request to your API.
Once you have followed the installation steps outlined in the React on Rails documentation, you’ll be able to edit your views.
Let’s say you have an ecommerce site and want to update the amount of items your customer has on its cart dynamically.
Here’s an usage example with ERB:
<div>
<%= react_component("CartCount", props: {cart_count: @cart_count}) %>
</div>
We’re using the react_component helper, passing first the component name and, optionally, props.
Notice that to enable this view helper to utilize your React components, you must register them within your JavaScript code.
You can do so by using the register method:
import ReactOnRails from 'react-on-rails';
import HelloWorld from './CartCount';
ReactOnRails.register({ CartCount });
Congratulations, now you can create your good old React components and use them along your erb views. Happy coding!