README.md in react-rails-2.4.4 vs README.md in react-rails-2.4.5

- old
+ new

@@ -85,10 +85,16 @@ $ rails g react:component HelloWorld greeting:string ``` Your component is added to `app/javascript/components/` by default. +You can also generate your component in a subdirectory: + +``` +$ rails g react:component my_subdirectory/HelloWorld greeting:string +``` + [Render it in a Rails view](#view-helper): ```erb <%= react_component("HelloWorld", { greeting: "Hello" }) %> ``` @@ -133,11 +139,11 @@ ``` $ bundle exec rails webpacker:install:typescript $ yarn add @types/react @types/react-dom ``` -Doing this will allow React-Rails to support the .tsx extension. +Doing this will allow React-Rails to support the .tsx extension. ## Use with Asset Pipeline `react-rails` provides a pre-bundled React.js & a UJS driver to the Rails asset pipeline. Get started by installing: @@ -301,9 +307,22 @@ // Remove previous event handlers and add new ones: ReactRailsUJS.detectEvents() ``` For example, if `Turbolinks` is loaded _after_ `ReactRailsUJS`, you'll need to call this again. This function removes previous handlers before adding new ones, so it's safe to call as often as needed. + +If `Turbolinks` is `import`ed via Webpacker (and thus not available globally), `ReactRailsUJS` will be unable to locate it. To fix this, you can temporarily add it to the global namespace: + +```js +// Order is particular. First start Turbolinks: +Turbolinks.start(); +// Add Turbolinks to the global namespace: +window.Turbolinks = Turbolinks; +// Remove previous event handlers and add new ones: +ReactRailsUJS.detectEvents(); +// (Optional) Clean up global namespace: +delete window.Turbolinks; +``` ### `getConstructor` Components are loaded with `ReactRailsUJS.getConstructor(className)`. This function has two built-in implementations: