CODEWITHSUNDEEP
ruby-on-railsreactjswebpackreact-rails
user1337902
user1337902

Reputation: 236

how do you use react-rails react_component with webpacker gem rails 5.1?

Newbie here, I've recently implemented the webpacker gem in my react-rails project. Being new to webpack and react, this gem makes a lot of sense to me coming from a rails background.

i'm wondering if it were possible to use the react-rails gem in my rails webpacker project so we could still use the view helper method like this:

<%= react_component('MyComponent', @controller_value.to_json)%>

if not, is there a reason why?

Thanks for any input! :)

Upvotes: 3

Views: 4477

Answers (2)

Abhi
Abhi

Reputation: 1

You can use another gem for this

--> #react_on_rails (5.2.0)

$ bundle show react_on_rails
--> #- /Users/mark/.rvm/gems/ruby-2.1.2/gems/react_on_rails-5.2.0

Isn't the helper supposed to be included something like this?:

See http://pothibo.com/2013/06/customize-rails-view-controller-with-railtie/ and https://github.com/reactjs/react-rails/blob/master/lib/react/rails/railtie.rb#L42-L44

Hear is the example of gem react_on_rails and gem react-rails

https://learnetto.com/blog/rails-data-react-component-webpacker

Upvotes: 0

Vedant Agarwala
Vedant Agarwala

Reputation: 18819

First you need to install node- I used nvm,

and install yarn- link.

Then, add these lines to your Gemfile:

gem 'webpacker', '~> 2.0'
gem 'react-rails'

then run

bundle install
rails webpacker:install
rails webpacker:install:react
rails generate react:install

This will create the necessary files in app/javascript (not app/assests/javascripts) and config files.

Now add <%= javascript_pack_tag 'application' %> to the appropriate layout file, like app/views/layouts/application.html.erb

Finally you will need to run ./bin/webpack-dev-server in a separate terminal, along with rails server.

That's it. Now you can use 

<%= react_component('MyComponent', @controller_value) %>

Here MyComponent will be defined in app/javascript/components/MyComponent.js

Upvotes: 2

Related Questions