Ruby on Rails - rendering and mounting in ruby on rails- ruby on rails tutorial - rails guides - rails tutorial - ruby rails
rendering and mounting in ruby on rails
react-rails includes a view helper (react_component) and an unobtrusive JavaScript driver (react_ujs) which work together to put React components on the page. You should require the UJS driver in your manifest after react (and after turbolinks if you use Turbolinks). The view helper puts a div on the page with the requested component class & props.
example:
<%= react_component('HelloMessage', name: 'John') %>
<!-- becomes: -->
<div data-react-class="HelloMessage" data-react-props="{"name":"John"}"></div>Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - ruby on rails tutorial - rails guides - ruby rails - rubyonrails - learn ruby on rails - team
On page load, the react_ujs driver will scan the page and mount components using data-react-class and data-react-props. If Turbolinks is present components are mounted on the page:change event, and unmounted on page:before-unload. Turbolinks >= 2.4.0 is recommended because it exposes better events. In case of Ajax calls, the UJS mounting can be triggered manually by calling from javascript: ReactRailsUJS.mountComponents() The view helper's signature is:
react_component(component_class_name, props={}, html_options={})Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - ruby on rails tutorial - rails guides - ruby rails - rubyonrails - learn ruby on rails - team
component_class_name is a string which names a globally-accessible component class. It may have dots (eg, "MyApp.Header.MenuItem").
`props` is either an object that responds to `#to_json` or an already-stringified JSON object (eg, made with Jbuilder, see note below).Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - ruby on rails tutorial - rails guides - ruby rails - rubyonrails - learn ruby on rails - team
html_options may include: tag: to use an element other than a div to embed data-react-class and data-react-props. prerender: true to render the component on the server. **other Any other arguments (eg class:, id:) are passed through to content_tag.