Getting started with the react-rails gem

Joel Hooks
InstructorJoel Hooks
Share this video with your friends

Social Share Links

Send Tweet
Published 8 years ago
Updated 5 years ago

React and Ruby on Rails play very nicely together if you are using the react-rails gem. Using react-rails, you can easily drop in React components throughout your Rails application. In this lesson, we will get react-rails installed and create our first React component.

[00:00] The first thing we need to do to use react-rails is add it to our Gemfile, so we're going to add react-rails down here at the bottom of our Gemfile. We're going to target version 1.5 of the react-rails gem. Now that we've added that to the Gemfile, we can open up the terminal and type "bundle install," and there we go. We've installed the react-rails gem.

[00:25] Now we use "rails generate react install" to do the initial configuration for the react-rails gem. You can see from the generator's output that several files have been created for us. Those are all located in the app assets JavaScript folder, so let's go take a look at that.

[00:42] Inside of that folder, you'll see a new file called "components.js." Inside of that, you can see that react-rails has required the full tree of the components folder, which is empty right now, but we'll fill it up with components soon.

[00:56] Inside of application.js, react-rails has added three require statements. First, it's requiring react, the framework, then react unobtrusive JavaScript and adapter, and, finally, components.js.

[01:07] Now that we have react-rails configured, I can open the terminal. I can use the supply generator by calling "rails generate react:component."

[01:21] We're going to name our component "message," and I'm going to give it a property of "text," which is a string. Finally, I'm going to say, "--ES6" to give us an EF6 class in the generated component.

[01:37] Inside of the components folder, you'll see that we have "message.es6.jsx." The generator has given us a class that extends react.component, as well as given prop types for the text property and a render method that returns a simple div, and it just displays this text property.

[01:58] To get our component to display in our template, we're going to come down here into "index.html.erb," and what we're going to do is add the react-rails react component helper. Its argument is going to be the name of our component, or in this case "message."

[02:16] Now we'll refresh the browser and, voila, we have text. The text property isn't displaying any value, so we can help that out here by adding another argument "text: ." We'll just send a simple string in. We'll call it "Hello."

[02:31] Come over here, and we'll refresh the browser, and there you go. Our property shows up. "Text equals hello."

[02:38] Now we can make a couple copies of this component, and we can change the text. We'll change this to "Goodbye," and we'll change this one to "It is alive," and we'll refresh the browser. We see that we have three copies of this component with three different values for the text property.

~ 14 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today