Contents

# Using ReactOnRails in JavaScript
You can easily render React components in your JavaScript with `render` method that returns a [reference to the component](https://facebook.github.io/react/docs/more-about-refs.html) (virtual DOM element).

```js
/**
 * ReactOnRails.render("HelloWorldApp", {name: "Stranger"}, 'app');
 *
 * Does this:
 *   ReactDOM.render(React.createElement(HelloWorldApp, {name: "Stranger"}),
 *     document.getElementById('app'))
 *
 * @param name Name of your registered component
 * @param props Props to pass to your component
 * @param domNodeId
 * @param hydrate [optional] Pass truthy to update server rendered html. Default is falsy
 * @returns {virtualDomElement} Reference to your component's backing instance
 */
ReactOnRails.render(componentName, props, domNodeId)
```

## Why do we need this?
Imagine that we have some event with jQuery, it allows us to set component state manually.

```html
<input id="input" type="range" min="0" max="100" />
<div id="root"></div>

<script>
  var input = $("#input");
  var component = ReactOnRails.render("componentName", { value: input.val() }, "root");

  input.on("change", function(e) {
    component.setState({ value: input.val() });
  });
</script>
```

Version data entries

39 entries across 39 versions & 1 rubygems

Version	Path
react_on_rails-13.4.0	docs/rails/rails_view_rendering_from_inline_javascript.md
react_on_rails-13.3.5	docs/rails/rails_view_rendering_from_inline_javascript.md
react_on_rails-13.3.4	docs/rails/rails_view_rendering_from_inline_javascript.md
react_on_rails-13.3.3	docs/rails/rails_view_rendering_from_inline_javascript.md
react_on_rails-13.3.2	docs/rails/rails_view_rendering_from_inline_javascript.md
react_on_rails-13.3.1	docs/rails/rails_view_rendering_from_inline_javascript.md
react_on_rails-13.3.0	docs/rails/rails_view_rendering_from_inline_javascript.md
react_on_rails-13.2.0	docs/rails/rails_view_rendering_from_inline_javascript.md
react_on_rails-13.1.0	docs/rails/rails_view_rendering_from_inline_javascript.md
react_on_rails-13.0.2	docs/rails/rails_view_rendering_from_inline_javascript.md
react_on_rails-13.0.1	docs/rails/rails_view_rendering_from_inline_javascript.md
react_on_rails-13.0.0	docs/rails/rails_view_rendering_from_inline_javascript.md
react_on_rails-13.0.0.beta.0	docs/rails/rails_view_rendering_from_inline_javascript.md
react_on_rails-12.6.0	docs/rails/rails_view_rendering_from_inline_javascript.md
react_on_rails-12.5.2	docs/rails/rails_view_rendering_from_inline_javascript.md
react_on_rails-12.5.1	docs/rails/rails_view_rendering_from_inline_javascript.md
react_on_rails-12.5.0	docs/rails/rails_view_rendering_from_inline_javascript.md
react_on_rails-12.4.0	docs/rails/rails_view_rendering_from_inline_javascript.md
react_on_rails-12.4.0.rc.0	docs/rails/rails_view_rendering_from_inline_javascript.md
react_on_rails-12.3.0	docs/rails/rails_view_rendering_from_inline_javascript.md