Combining the power of React for building dynamic user interfaces with the robustness of Ruby on Rails for the backend is a game-changer for developers. In this guide, we’ll take you through a step-by-step process to successfully integrate React into a Ruby on Rails application. This combination helps create powerful, fast, and scalable web applications.
Introduction
Integrating React with Ruby on Rails allows developers to leverage Rails’ solid backend capabilities alongside React’s modern, component-based frontend framework. Rails is known for its simplicity and convention over configuration, while React excels at building interactive UIs. Together, they form an unbeatable full-stack development duo. In this guide, we will walk through the process of integrating React into a Rails app, from setup to rendering React components.
A Step-by-Step Guide to Integrate React with Ruby on Rails
Prerequisites
Before diving into the integration process, ensure you have the following tools installed:
- Ruby (version 2.5 or later)
- Rails (version 6 or later)
- Node.js (for React)
- Yarn (a JavaScript package manager)
- Webpacker (to compile JavaScript files in Rails)
Familiarity with both Ruby on Rails and React will also make the process smoother.
Setting Up Ruby on Rails
Let’s start by setting up a new Rails application. Open your terminal and run the following command:
rails new react_rails_app --webpack=react
Here, --webpack=react tells Rails to install Webpacker with React support. After the project is created, navigate into your project directory:
cd react_rails_app
Now, you have a basic Rails project with React support ready to go.
Adding React to Rails
Rails 6 comes with Webpacker pre-installed, making it easy to integrate React. If you’re using an older version of Rails, you may need to install Webpacker separately:
rails webpacker:install
rails webpacker:install:react
These commands set up Webpacker and React in your Rails project. Webpacker ensures that React’s JavaScript files are compiled and served along with your Rails app.
Next, create a JavaScript pack to include React:
mkdir app/javascript/packs
touch app/javascript/packs/application.js
Inside application.js, add the following to import React:
import React from "react"
import ReactDOM from "react-dom"
Your Rails project is now ready to serve React components!
Creating a React Component in Rails
Let’s create our first React component and render it inside a Rails view. First, generate a new React component inside the javascript/components directory:
mkdir app/javascript/components
touch app/javascript/components/HelloWorld.js
In the HelloWorld.js file, define a simple React component:
import React from "react"
const HelloWorld = () => {
return <div>Hello, React with Ruby on Rails!</div>
}
export default HelloWorld
Next, import and render this component in your application.js file:
import HelloWorld from "../components/HelloWorld"
document.addEventListener("DOMContentLoaded", () => {
ReactDOM.render(<HelloWorld />, document.body.appendChild(document.createElement("div")))
})
Finally, ensure the JavaScript pack is included in your Rails layout file (app/views/layouts/application.html.erb):
<%= javascript_pack_tag 'application' %>
Now, when you visit the app in the browser, you should see “Hello, React with Ruby on Rails!” rendered on the page.
Communicating Between Rails and React
To make your app dynamic, you’ll likely want to send data from your Rails backend to React components. You can pass data using props when rendering a React component.
For example, in your Rails view (app/views/home/index.html.erb), you can pass data to React like this:
<%= react_component("HelloWorld", { name: "Smart User" }) %>
Modify your HelloWorld component to accept and display the name prop:
const HelloWorld = (props) => {
return <div>Hello, {props.name}!</div>
}
Now, React dynam
Handling Routing with React and Rails
ically renders content from Rails, and you can pass any necessary data between the two.
Rails uses its own routing system, but when you integrate React, you may also want to handle frontend routing for single-page applications (SPAs). React Router is the best tool for this.
Install React Router:
yarn add react-router-dom
In your React component, you can now define routes:
import { BrowserRouter as Router, Route, Switch } from "react-router-dom"
import HelloWorld from "../components/HelloWorld"
const App = () => {
return (
<Router>
<Switch>
<Route path="/" exact component={HelloWorld} />
{/* Add more routes here */}
</Switch>
</Router>
)
}
export default App
React Router allows your frontend to handle navigation seamlessly while Rails manages backend routes.
Building the Final Application
To finalize your React and Rails integration:
- Use API endpoints in Rails to send data to React using
fetchor Axios. - Optimize performance by using React’s state management libraries like Redux or Context API.
- Leverage Webpacker to bundle your JavaScript files efficiently.
- Separate concerns by keeping Rails for the backend and React for the frontend.
This structure allows you to maintain clear separation while maximizing the power of each framework.
