Sha256: e0b6d2395addef385297588ceda1124ab49b83e8b46fe75478e0e43a4f72d614

Contents?: true

Size: 1.11 KB

Versions: 142

Compression:

Stored size: 1.11 KB

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