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
- 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.
- 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:
- Add React Packages:
bash
yarn add react react-dom
- Confirm Webpack Setup: Rails should have created a
packs
folder insideapp/javascript
.
Step 3: Set Up a Controller and Root Route
- Generate a Controller:
bash
rails generate controller Pages index
- 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
- Create a Component: Inside
app/javascript/packs
, add a file namedHelloReact.jsx
:
javascript
import React from 'react';
function HelloReact() {
return <h1>Hello, React in Rails!</h1>;
}
export default HelloReact;
- 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'));
});
- 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
- Set Data in the Controller:
ruby
def index
@message = "Hello from Rails!"
end
- 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' %>
- 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.
- For single-page applications, use React Router to handle client-side routing and Rails for API endpoints.
- Use libraries like
axios
orfetch
to call Rails API endpoints from React components. Make API Calls in Ruby on Rails - Use standard CSS, CSS modules, or popular libraries like Tailwind CSS or Bootstrap for easy styling. How to install Tailwind CSS in Ruby on Rails
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