@@ -16,12 +16,14 @@ When you install React on Rails, several things happen:
16164 . ** Shakapacker configured** - Webpack integration for Rails (required dependency)
1717
1818The generator sets up:
19+
1920- Component directories (typically ` app/javascript/bundles/ ` or with auto-bundling in ` app/javascript/src/*/ror_components/ ` )
2021- Rails integration (controllers, views, initializer)
2122- Webpack configuration for building JavaScript bundles
2223- Development workflow with hot module replacement
2324
2425** For detailed installation instructions, see:**
26+
2527- ** [ Quick Start Guide] ( ./quick-start.md ) ** - Fastest path (15 minutes)
2628- ** [ Installation Guide] ( ./installation-into-an-existing-rails-app.md ) ** - For existing Rails apps
2729- ** [ Complete Tutorial] ( ./tutorial.md ) ** - Step-by-step with Redux and routing
@@ -39,11 +41,13 @@ Once installed, you render React components in Rails views using the `react_comp
3941### Basic Options
4042
4143** Client-side rendering only (default):**
44+
4245``` erb
4346<%= react_component("HelloWorld", props: { name: "World" }) %>
4447```
4548
4649** Server-side rendering for SEO/performance:**
50+
4751``` erb
4852<%= react_component("HelloWorld", props: { name: "World" }, prerender: true) %>
4953```
@@ -53,6 +57,7 @@ The component name (`"HelloWorld"`) must match the name you registered in your J
5357### Configuration
5458
5559React on Rails is configured in ` config/initializers/react_on_rails.rb ` :
60+
5661- Server rendering settings
5762- Development vs production behavior
5863- Logging options
@@ -87,19 +92,22 @@ You must configure webpack entry points and manually register each component.
8792```
8893
8994With auto-bundling enabled:
95+
90961 . Place components in designated directories (e.g., ` app/javascript/src/*/ror_components/ ` )
91972 . React on Rails automatically finds and bundles them
92983 . No manual webpack configuration needed
93994 . No manual ` ReactOnRails.register() ` calls
941005 . Components are loaded on-demand per page
95101
96102** Configuration (in ` config/initializers/react_on_rails.rb ` ):**
103+
97104``` ruby
98105config.components_subdirectory = " ror_components" # Directory name for auto-discovery
99106config.auto_load_bundle = true # Enable automatic bundle loading
100107```
101108
102109** Benefits:**
110+
103111- Eliminates boilerplate configuration
104112- Automatic code splitting per component
105113- Smaller initial bundle sizes
@@ -137,6 +145,7 @@ app/javascript/
137145### Development Workflow
138146
139147The generator creates ` bin/dev ` for starting both:
148+
140149- Rails server (port 3000)
141150- Webpack dev server (for hot reloading)
142151
@@ -156,15 +165,11 @@ Sometimes you need more than just a simple React component. **Render-Functions**
156165``` js
157166const MyApp = (props , railsContext ) => {
158167 // Access Rails context
159- console .log (railsContext .pathname ); // Current URL
168+ console .log (railsContext .pathname ); // Current URL
160169 console .log (railsContext .i18nLocale ); // Current locale
161170
162171 // Return a React component
163- return () => (
164- < div>
165- Hello from {railsContext .pathname }
166- < / div>
167- );
172+ return () => < div> Hello from {railsContext .pathname }< / div> ;
168173};
169174
170175export default MyApp ;
@@ -183,7 +188,9 @@ For advanced server rendering (like React Router), you can return an object:
183188
184189``` js
185190{
186- renderedHtml: { componentHtml, redirectLocation, error }
191+ renderedHtml: {
192+ componentHtml, redirectLocation, error;
193+ }
187194}
188195```
189196
0 commit comments