Webpacker gem to get Rails data into React component

Webpacker gem to get Rails data into React component
Average rating: 0
(0 votes)

Recently we presented you the list of the most used Ruby on Rails gems from 2014 to 2017. Now it’s time to introduce you another gem called webpack. In this article, we will show you how to use webpack gem to get Rails data into React component. 

The webpacker introduces an easy way to use JavaScript libraries, including React, inside Rails while using native JS tools like yarn and Webpack.
For those of you who use Rails 5.1 or higher, you can directly create a new app with React support out of the box simply by running:

$ rails new myapp --webpack=react

If we talk about an older version of Rails (4.2+), you can install the webpacker gem and then run:

$ ./bin/rails webpacker:install
$ ./bin/rails webpacker:install:react

After this, you have to put your React components in the newly created app/javascript/packs directory and use them with the javascript_pack_tag helper method in a view. But if you’ve previously used the react-rails or react_on_rails gem, you might find it difficult to get your Rails model data into a React component with webpacker. Both react-rails and react_on_rails provide a helper method called react_component which you can use in a view to render a component and pass data to it as props. If we take a closer look, the react_component method puts the Rails data inside a data attribute of a div on the page:

react_component(‘Appointments’, appointments: @appointments)

If you inspect the source code of the page, you can see the data loaded inside a div with the data attributes react-class and react-props. To parse the data and to pass the React component you use some JavaScript code. Webpacker doesn’t provide any such convenience methods by default. That’s why we have to write our own code to do the same. In two simple steps:

1. We need to put the data as JSON inside the data attribute of a div in the view where we want to render the React component:

<%= content_tag :div,
  id: "appointments_data",
  data: @appointments.to_json do %>
<% end %>

With HAML it will look like:

#appointments_data{data: @appointments.to_json}

2. On the second step we need to parse the data once all DOM content is loaded and pass it on to the Appointments component:

document.addEventListener('DOMContentLoaded', () => {
  const node = document.getElementById('appointments_data')
  const data = JSON.parse(node.getAttribute('data'))
 
  ReactDOM.render(
   <Appointments appointments={data} />,
   document.body.appendChild(document.createElement('div')),
  )
})

Now your data will be passed on to the React component.

You can find the original code on GitHub: https://github.com/learnetto/calreact/tree/lesson-4.5

 

 

Rate this article, if you like it

Thanks! You’ve rated this material!

Got a project? Let's discuss it!

*By submitting this form you agree with our Privacy Policy.

Mailing & Legal Address

Syndicode Inc. 340 S Lemon Ave #3299, Walnut CA, 91789, USA

Visiting & Headquarters address
Kyiv Sofiivska 1/2a, 01001, Kyiv, Ukraine
Dnipro Hlinky 2, of. 1003, 49000, Dnipro, Ukraine
Email info@syndicode.com
Phone (+1) 9035021111