turbo-mount-react

What problem does it solve?

Integrating React into a Hotwire-first Rails application can lead to navigation breaks, oversized bundles, and fragile lifecycle management; this Skill shows how to keep Hotwire as the foundation while introducing isolated React islands only where genuinely needed.

Core Features & Use Cases

• Islands architecture: mount isolated React components inside Rails views so they auto-mount and unmount correctly during Turbo navigation.
• Secure data exchange: guidance for serializing ActiveRecord objects into plain props and performing CSRF-aware fetches between React and Rails.
• Build, registration, and performance: instructions for configuring esbuild or Vite, registering components, lazy loading heavy bundles, testing mounts, and avoiding common memory leaks.
• Example use cases: embedding a React Flow diagram, a rich data grid, or a canvas-based editor into a mostly Hotwire application without replacing Turbo navigation.

Quick Start

Add a turbo-mounted React component to a Rails view, register the component in your JavaScript entry point, and serialize props to plain objects so the component mounts and communicates securely with Rails.