reactjs/react-rails
React Rails
This library is an integration bridge for embedding React components within Ruby on Rails views and controllers. It provides a hybrid frontend architecture that allows developers to mix traditional server-rendered templates with isolated interactive components.
The project differentiates itself through a comprehensive server-side rendering wrapper that generates HTML on the server to improve load speeds and search engine visibility. It includes a client-side hydration manager that automatically mounts and unmounts components by scanning the document for markers and synchronizing with navigation events.
The toolset covers a broad range of capabilities, including component scaffolding via a command-line generator, data mapping to transform server-side naming conventions to JavaScript camelCase, and a JavaScript asset pipeline for bundling and transpiling JSX. It also provides extensible resolution and rendering logic to customize how components are located and transformed into HTML.
The system integrates with TypeScript and Babel to support typed files for component development.
Features
- React Rails Integrations - Acts as the primary integration bridge for embedding React components within Ruby on Rails views and controllers.
- Server-Side Rendering - Executes a JavaScript engine on the server to generate static HTML for improved load speeds and search engine visibility.
- Hybrid Frontend Architectures - Provides a hybrid architecture allowing traditional server-rendered templates to coexist with isolated interactive React components.
- View Template Component Injection - Injects components into view templates using helpers that synchronize with client-side lifecycle events.
- Component Lifecycle Triggers - Monitors page change events to automatically synchronize the mounting of components with user navigation.
- Automatic Mounting - Automatically mounts components by scanning the document for markers and reacting to page changes.
- Lifecycle Synchronizers - Coordinates the mounting and unmounting of components via navigation events to maintain consistent application state.
- Component Lifecycle Management - Coordinates the mounting and unmounting of components during navigation events to maintain state.
- UI Component Integrations - Integrates interactive frontend components into server-rendered views to allow hybrid coexistence.
- Template Integration Helpers - Provides helpers to manage the naming, property passing, and prerendering of components injected into views.
- DOM Program Mounting - Automatically initializes and mounts React components by scanning the DOM for markers and reacting to content changes.
- Client-Side Hydration - Includes a hydration manager that attaches interactive behavior to pre-rendered HTML after the initial page load.
- Server-Side Rendering - Generates HTML on the server with accompanying client-side hydration for performance and SEO.
- Server-View Component Embedding - Injects component identifiers and properties into HTML templates to bridge backend logic with frontend mounting.
- UI Component Embedding - Implements a bridge for embedding interactive React components directly into server-side Rails views.
- Asset Bundling - Compiles JavaScript and JSX assets into browser-ready bundles and distributes them to designated asset paths.
- React Component Scaffolding - Provides a command-line generator to scaffold standardized React component files and prop definitions within Rails.
- Component Resolution - Resolves component names to their respective JavaScript constructors by searching configured directories or global namespaces.
- Rendering Logic Overrides - Enables the overriding of default HTML generation for embedded components through custom implementation classes.
- Component Path Loading - Configures the execution context to resolve component names from specific directories or multiple asset bundles.
- Controller-to-Layout Injection - Injects components from server-side actions into the response layout with specific properties.
- Component Name Resolution - Overrides the mapping of component names to constructors using global namespace lookups or module requirements.
- Direct Component Responses - Allows server actions to return a React component directly as the HTTP response body.
- Full Page Server Rendering - Enables the generation of complete HTML pages on the server using a JavaScript runtime.
- JSX Transformers - Allows the replacement of the default JSX transpiler with a custom transformer class to modify markup processing.
- Markup Transpilation - Implements a pluggable transpilation pipeline to convert JSX markup into executable JavaScript during the build process.
- Asset Pipelines - Manages the compilation and bundling of React and JSX code into browser-ready files using Rails asset tools.
- Frontend and Assets - Integrates React.js with Rails.
