Integrated React component from Rails-assets.org in Rails Application

Question

i tried to integrated react component from rails-assets.org in my rails application. Currently, i used react-rails gems to write react view in my application.

I want to use other react component such as react-router, react-select, etc. I found the easy ways to get this is by using rails-assets.org. However, i don't know the proper ways to called this component. Can someone teach me ?

For example i want integrate react-select in my rails application :

Gemfile :

gem 'rails-assets-react-select','~> 1.0.0.rc.3', source: 'https://rails-assets.org'

Application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require react
//= require react_ujs
//= require components
//= require react-select
//= require react-dom
//= require_tree .
$(function(){ $(document).foundation(); });

Applications.scss.sass

*= require_tree .
 *= require_self
 *= require foundation
 *=require foundation_and_overrides
 *= require react-select
@import "foundation_and_overrides"

Below is my code to called this component (GroupSetting.jsx)

var Select  = require('react-select');
var GroupSetting = React.createClass({
 getInitialState () {
  return {
   options: [
    { value: true, label: 'Yes' },
    { value: false, label: 'No' }
   ],
   value: null
  };
 },
 onChange(value) {
  this.setState({ value });
  console.log('Boolean Select value changed to', value);
 },
 render () {
  return (
   <div className="section">
    <h3 className="section-heading">{this.props.label}</h3>
    <Select
     onChange={this.onChange}
     options={this.state.options}
     simpleValue
     value={this.state.value}
     />
    <div className="hint">This example uses simple boolean values</div>
   </div>
  );
 }
});

I got below errors :

Someone please guide me how to get this done.

Is there anyone could help me in this ? – Aizuddin Badry Apr 19 '17 at 06:09 — Aizuddin Badry, Apr 19 '17 at 06:09

score 0 · Answer 1 · answered Jun 24 '17 at 00:11

This should work by simply removing the var Select = require('react-select'); line

Since you aren't using a javascript packager, you don't need to import/require. This is both a blessing and a curse when using gems from rails-assets, but that's a rant for another time...

Integrated React component from Rails-assets.org in Rails Application

1 Answers1