The has given us an easy way to use libraries, including React, inside Rails while using native JS like yarn and Webpack. webpacker gem JavaScript tools If you’re using 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 you’re using 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 Then you simply 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 or gem, one thing you might be wondering about is how to get your Rails model data into a React component with webpacker. react-rails react_on_rails 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 look under the hood, 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: Then, on page load, some JavaScript code (react_ujs) is used to parse the data and pass it on to the React component: webpacker doesn’t provide any such convenience methods by default. So we have to write our own code to do the same. First let’s 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: .to_json do %><% end %> @appointments If you use HAML, you can simply do: #appointments_data{data: @appointments.to_json} Then 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')),)}) And that’s all! Your data will now be passed on to the React component. If you’d rather not do this, you can also use the which provides a react_component helper method. webpacker-react gem See the full code of this example app on Github: _calreact - React and Rails 5 calendar appointment app_github.com learnetto/calreact If you’d like to learn how to use React with Rails for free, check out the free React on Rails tutorials on Learnetto . You might also like these articles: _IMPORTANT UPDATE (6 July 2017): With the release of Rails 5.1, Rails now has native support for using React via the…_medium.com 3 ways to use React with Ruby on Rails 5 _You know when you’re trying to learn something new, but get reeeeeeallly bored of building the default example app?_medium.freecodecamp.org ✅ Every time you build a to-do list app, a puppy 🐕 dies 😢 Originally published at learnetto.com .

Twitter

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How to get your Rails data into your React component with webpacker

Too Long; Didn't Read

Company Mentioned

Hrishi Mittal

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to get your Rails data into your React component with webpacker

Too Long; Didn't Read

Company Mentioned

Hrishi Mittal

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES