This post will walk you through how to use React with Ruby on Rails by integrating React with Rails to create a dynamic, interactive web app.

React and Ruby on Rails are two popular web technologies, each with unique strengths.

Rails is excellent for building full-featured backend applications quickly, and React shines in creating fast, responsive frontend interfaces.

  • Rails handles the server-side business logic.
  • React manages the frontend views for better user experiences.

Prerequisites

To follow along, you’ll need following:

  • Ruby (preferably version 3.0+)
  • Rails (version 6.0 or higher)
  • Node.js and Yarn (to install React)

If you haven’t installed these, follow the official documentation for Rails and Node.js to get set up.

Step 1: Create a New Rails Project with React

  1. Set Up the Rails App: Open PowerShell or Command Prompt and run:
bash
   rails new my_app --webpack=react

The --webpack=react flag sets up Webpack for React from the start.

  1. Navigate to Your Project:
bash
   cd my_app

Step 2: Install React in Rails

If you didn’t use the --webpack=react flag above, you can install React manually:

  1. Add React Packages:
bash
   yarn add react react-dom
  1. Confirm Webpack Setup: Rails should have created a packs folder inside app/javascript.

Step 3: Set Up a Controller and Root Route

  1. Generate a Controller:
bash
   rails generate controller Pages index
  1. Define the Root Route: Open config/routes.rb and add:
ruby
   root 'pages#index'

This directs the root URL to the index action in PagesController.

Step 4: Create and Render a React Component

  1. Create a Component: Inside app/javascript/packs, add a file named HelloReact.jsx:
javascript
   import React from 'react';

   function HelloReact() {
     return <h1>Hello, React in Rails!</h1>;
   }

   export default HelloReact;
  1. Add to Application.js: In app/javascript/packs/application.js, import and render the component:
javascript
   import React from 'react';
   import ReactDOM from 'react-dom';
   import HelloReact from './HelloReact';

   document.addEventListener('DOMContentLoaded', () => {
     ReactDOM.render(<HelloReact />, document.getElementById('root'));
   });
  1. Modify View File: Open app/views/pages/index.html.erb and add:
html
   <div id="root"></div>
   <%= javascript_pack_tag 'application' %>

Step 5: Test Your Setup

Start the Rails server:


rails server

Open http://localhost:3000 in your browser, and you should see “Hello, React in Rails!”

Pass Data from Rails to React

  1. Set Data in the Controller:
ruby
   def index
     @message = "Hello from Rails!"
   end
  1. Pass Data in the View:
html
   <div id="root"></div>
   <script type="application/json" id="data">
     <%= raw @message.to_json %>
   </script>
   <%= javascript_pack_tag 'application' %>
  1. Retrieve Data in React:
javascript
   import React, { useEffect, useState } from 'react';

   function HelloReact() {
     const [message, setMessage] = useState('');

     useEffect(() => {
       const data = document.getElementById('data').textContent;
       setMessage(JSON.parse(data));
     }, []);

     return <h1>{message}</h1>;
   }

   export default HelloReact;

Reload the page to see the message passed from Rails to React.

Integrating React with Ruby on Rails allows you to combine a dynamic frontend with Rails’ powerful backend. In this post, I've covered:

  • Setting up Rails with React
  • Creating a basic React component in Rails
  • Passing data from Rails to React

This setup is highly scalable for applications needing complex user interactions and seamless data integration with Rails.

Let me know the feedback in comments below. Thanks

Comments(0)