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
 * @returns {virtualDomElement} Reference to your component's backing instance
 */
ReactOnRails.render(componentName, props, elementId)
```

## 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

142 entries across 142 versions & 1 rubygems

Version	Path
react_on_rails-11.1.8	docs/additional-reading/rails_view_rendering_from_inline_javascript.md
react_on_rails-11.1.7	docs/additional-reading/rails_view_rendering_from_inline_javascript.md
react_on_rails-11.1.6	docs/additional-reading/rails_view_rendering_from_inline_javascript.md
react_on_rails-11.1.5	docs/additional-reading/rails_view_rendering_from_inline_javascript.md
react_on_rails-11.1.4	docs/additional-reading/rails_view_rendering_from_inline_javascript.md
react_on_rails-11.1.3	docs/additional-reading/rails_view_rendering_from_inline_javascript.md
react_on_rails-11.1.2	docs/additional-reading/rails_view_rendering_from_inline_javascript.md
react_on_rails-11.1.1	docs/additional-reading/rails_view_rendering_from_inline_javascript.md
react_on_rails-11.1.0	docs/additional-reading/rails_view_rendering_from_inline_javascript.md
react_on_rails-11.1.0.beta.1	docs/additional-reading/rails_view_rendering_from_inline_javascript.md
react_on_rails-11.0.10	docs/additional-reading/rails_view_rendering_from_inline_javascript.md
react_on_rails-11.0.9	docs/additional-reading/rails_view_rendering_from_inline_javascript.md
react_on_rails-11.0.8	docs/additional-reading/rails_view_rendering_from_inline_javascript.md
react_on_rails-11.0.7	docs/additional-reading/rails_view_rendering_from_inline_javascript.md
react_on_rails-11.0.6	docs/additional-reading/rails_view_rendering_from_inline_javascript.md
react_on_rails-11.0.5	docs/additional-reading/rails_view_rendering_from_inline_javascript.md
react_on_rails-11.0.4	docs/additional-reading/rails_view_rendering_from_inline_javascript.md
react_on_rails-11.0.3	docs/additional-reading/rails_view_rendering_from_inline_javascript.md
react_on_rails-11.0.2	docs/additional-reading/rails_view_rendering_from_inline_javascript.md
react_on_rails-11.0.1	docs/additional-reading/rails_view_rendering_from_inline_javascript.md