📄️ Communication between React Components and Redux Reducers
Communication Between Components
📄️ Using React Router
React on Rails supports React Router for client-side routing. This guide shows how to integrate React Router into your React on Rails application.
📄️ Using TanStack Router
TanStack Router is a fully type-safe React router with built-in data loading, search param validation, and first-class TypeScript support. It's a strong choice when you want end-to-end type safety from your route definitions through to your components and search params.
📄️ Code Splitting with Loadable Components
Pro Feature — Available with React on Rails Pro.
📄️ Internationalization
You can use Rails internationalization (i18n) in your client code.
📄️ Configuring Images and Assets with Webpack
A leading slash is necessary on the name option for file-loader/url-loader and the publicPath option for output.
📄️ Using React Helmet to build <head> content
React 19 Alternative: If you are using React 19, consider using React 19 Native Metadata instead of react-helmet. Native metadata tags (`, , `) are built into React 19 and work with streaming SSR and React Server Components — no extra dependencies or render-functions needed.
📄️ React 19 Native Metadata: Replacing react-helmet and react_component_hash
React 19 introduces built-in support for rendering `, , and tags anywhere in your component tree. React automatically hoists them into the document . This eliminates the need for react-helmet and, for metadata use cases, reactcomponenthash`.
📄️ Streaming Server Rendering
SSR works in the OSS version via ExecJS. Pro adds streaming SSR with renderToPipeableStream and Suspense for progressive rendering. See the Streaming SSR guide or upgrade to Pro →
📄️ How to conditionally render server side based on the device type
In general, we want to use CSS to do mobile responsive layouts.
📄️ How to use different versions of a file for client and server rendering
[!NOTE]
📄️ SSR Caching: Prerender Caching and Fragment Caching
Available with React on Rails Pro. Free or very low cost for startups and small companies. Get a license →
📄️ Bundle Caching
Pro Feature — Available with React on Rails Pro.
📄️ Using Process Managers with React on Rails
React on Rails requires running multiple processes simultaneously during development:
📄️ HMR, Dev Server Modes, and Testing
Run bin/dev --help for all development server modes and options.
📄️ Testing Configuration
This guide explains how to configure React on Rails for optimal testing with RSpec, Minitest, or other test frameworks.
📄️ Extensible bin/dev Precompile Pattern
This guide describes an alternative approach to handling precompile tasks that provides more flexibility than the default precompile_hook mechanism. This pattern is especially useful for projects with custom build requirements.
📄️ Integrating React on Rails with Rails Engines
In your engine
📄️ Turbolinks and Turbo Support
React on Rails Updated to support Turbo, August 2024
🗃️ Node Renderer (Pro)
6 items