Illustration of a code bridge connecting Ruby on Rails and React islands

Rails React Fusion: Bridging Ruby and JavaScript with react-rails

The Gray Cat
The Gray Cat

React-rails is a powerful gem that brings the flexibility and component-based architecture of React to Ruby on Rails applications. This library allows developers to seamlessly integrate React components into their Rails views, leveraging the best of both worlds: Rails’ robust backend capabilities and React’s efficient frontend rendering.

Features

React-rails offers several key features that make it an attractive choice for Rails developers looking to incorporate React into their projects:

  • Automatic server-side and client-side rendering of React components
  • Support for Shakapacker v7 and Sprockets 4.x, 3.x
  • JSX, ES6, TypeScript, and CoffeeScript support
  • Easy integration with the Rails asset pipeline
  • View helpers for rendering React components
  • Server-side rendering for improved performance and SEO

Installation

To get started with react-rails, you’ll need to add it to your Rails project. You can do this by including the gem in your Gemfile:

gem 'react-rails'

Then, run the following commands to install the gem and its dependencies:

bundle install
rails generate react:install

For yarn users:

yarn add react react-dom

For npm users:

npm install react react-dom

Basic Usage

Creating React Components

With react-rails, you can create React components in .jsx files within your Rails project. These components can be placed in the app/javascript/components directory. Here’s a simple example of a React component:

// app/javascript/components/Greeting.tsx
import React from 'react';

interface GreetingProps {
  name: string;
}

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default Greeting;

This component creates a simple greeting message using the provided name prop.

Rendering Components in Views

To render your React components in Rails views, react-rails provides a view helper called react_component. You can use it like this:

<%= react_component("Greeting", { name: "World" }) %>

This will render the Greeting component with the prop name set to “World”. React-rails takes care of mounting the component and passing the props.

Advanced Usage

Server-Side Rendering

One of the most powerful features of react-rails is its ability to render React components on the server. This can significantly improve initial page load times and SEO. To enable server-side rendering for a component, you can use the prerender option:

<%= react_component("Greeting", { name: "World" }, { prerender: true }) %>

This will render the component on the server and send the HTML to the client, where React will then take over for interactivity.

Custom JSX Transformer

React-rails uses a transformer class to transform JSX in the asset pipeline. You can customize this transformer by setting config.react.jsx_transformer_class in your Rails configuration. For example, to use a custom Babel transformer:

# config/application.rb
config.react.jsx_transformer_class = MyCustomBabelTransformer

Your custom transformer must implement an initialize method that accepts options and a transform method that takes a code string and returns the transformed code.

Using with Webpacker

If you’re using Webpacker in your Rails application, react-rails integrates seamlessly. You can create your components in the app/javascript/components directory and they will be automatically compiled by Webpacker.

Here’s an example of how to set up your app/javascript/packs/application.js file to work with react-rails and Webpacker:

import React from 'react'
import ReactDOM from 'react-dom'
import ReactRailsUJS from 'react_ujs'

// Import your components
import Greeting from '../components/Greeting'

// Register your components globally
ReactRailsUJS.useContext({
  Greeting
})

// Mount components
ReactRailsUJS.mountComponents()

This setup allows you to use your React components in your Rails views as before, but with the added benefits of Webpacker’s module bundling and code splitting.

Component Generator

React-rails provides a component generator to quickly scaffold new React components. You can use it like this:

rails generate react:component Greeting name:string

This will create a new component file with the specified props:

// app/javascript/components/Greeting.tsx
import React from 'react'

interface GreetingProps {
  name: string;
}

const Greeting: React.FC<GreetingProps> = (props) => {
  return (
    <div>
      Greeting: {props.name}
    </div>
  )
}

export default Greeting

Conclusion

React-rails provides a powerful bridge between the Ruby on Rails backend and React frontend, allowing developers to leverage the strengths of both technologies. With features like server-side rendering, seamless asset pipeline integration, and easy component creation, it’s an excellent choice for Rails developers looking to incorporate React into their applications.

By using react-rails, you can gradually introduce React components into your existing Rails views, making it an ideal solution for both new projects and legacy application upgrades. Whether you’re building a small interactive feature or a full-scale single-page application, react-rails offers the flexibility and performance to meet your needs.

Comments