React on Rails Tutorial

A cleaner way to explore Rails, React, and server rendering together.

Start with the live demo, then branch into the React on Rails gem and Shakapacker gem integration patterns without digging through a wall of docs first.

Browse the Source Explore control-plane-flow Jump to the Live Demo

More routes and docs

Jump Directly

React-only Route Classic Rails README

This Demo Covers

Server rendering and hydration.
React Router transitions and redirects.
Live comments over Action Cable.

Review Apps

Three commands, one preview environment.

Use control-plane-flow to deploy, inspect, or remove a PR preview without leaving the thread.

Why this workflow matters

The review-app flow turns deployment into a lightweight PR action instead of a separate setup task.

control-plane-flow on GitHub Control Plane Example

Quick Review App Commands

/deploy-review-app

Deploy your PR branch for testing.

/delete-review-app

Remove the review app when done.

/help

Show detailed instructions, environment setup, and configuration options.

SSR + hydration Action Cable updates Review app commands Multiple Rails + React paths

Explore the App

Pick a path.

Each route shows a different integration style inside the same Rails project.

Simple React

Smallest client-rendered React example.

Stimulus Demo

Hotwire-style behavior in the same app shell.

ReScript Variant

A typed front-end route using the same backend story.

Show stack notes

Ruby on Rails for routing, controllers, persistence, and the demo shell.
React + Redux for the interactive comment workflow.
React Router for server rendering and route transitions.
Tailwind CSS for utility-first styling layered on the Rails app.

Quick Links

Pull the next thing you need, not the whole library.

Start with the essentials here. Open the extra reading only if you want more context.

Current Commit 9a71217

Deployment

control-plane-flow Library

The library behind this project’s review-app workflow.

Review Apps

Quick PR Commands

Keep /deploy-review-app, /delete-review-app, and /help close.

Build Notes

Repository README

Setup, structure, and local run instructions.

Docs

React on Rails Documentation

Go deeper once the live demo clicks.

The main demo is already running below.

Stay on this page, or jump straight to the plain Rails and React variants.

Classic Rails No Router React

React Router Demo

The same comments app, with routing.

Use the pills to view the comments route, a plain routed screen, and a redirect back to root.

What this demo proves

Server render first, then hydrate on the client.
Keep routing and comments in the same Redux-backed flow.
Verify redirects still resolve cleanly after SSR.

Comments Route Redirect

Live Data

Comments

This widget exercises the tutorial's full stack: Rails endpoints, server rendering, Redux state, Markdown rendering, and Action Cable updates.

Language

Manual refresh available

Auto-updates via Action Cable

Markdown

Text supports Github Flavored Markdown.

Cleanup

Comments older than 24 hours are deleted.

Validation

Name is preserved. Text is reset, between submits.

Realtime

To see Action Cable instantly update two browsers, open two browsers and submit a comment!

Write Something

Post a new comment in the layout that fits your use case.

Switch between horizontal, stacked, and inline form layouts to see how the same Rails-backed workflow adapts to different interface constraints.

Stream