Introducing React to Rails with react-rails

Hi everyone, this time I'll show you how to introduce React to Rails using a gem called "react-rails". There are multiple ways to deploy React in Rails, but I chose it because it's probably easy and common. As a caveat, it depends on Rails, so I think you like it or not.

By the way, the official document can be accessed from the following URL. URL of react-rails: https://github.com/reactjs/react-rails#server-side-rendering

I will introduce it according to the following flow.

--Premise --Introduction of react-rails --Create component --Output with view

Premise

(1) The app has already been created with rails-new etc. ② Use rails 5.0 or later

Introduction of react-rails

Write the following at the bottom of the Gemfile.

gem 'webpacker'
gem 'react-rails'

• Depending on the version of rails, "webpacker" may be included by default, so please check in advance. Please move to the target application directory with the cd command. Next, execute the following commands in order.

$ bundle install
/*①*/ $ rails webpacker:install
/*②*/ $ rails webpacker:install:react
$ rails generate react:install

Note that the commands ① and ② can only be executed if rails is 5.0 or later version!

Now you're ready to go! !!

Create component

To describe React, it is common to create files in a directory called components. It's okay to create it manually, but let's create it according to the official documentation. Execute the following command in the terminal etc.

$ rails g react:component HelloWorld greeting:string

Then the following files will be created.

app/javascript/components/HelloWorld.js

import React from "react"
import PropTypes from "prop-types"
class HelloWorld extends React.Component {
  render () {
    return (
      <React.Fragment>
        Greeting: {this.props.greeting}
      </React.Fragment>
    );
  }
}

HelloWorld.propTypes = {
  greeting: PropTypes.string
};
export default HelloWorld

This completes the file creation.

Output in view

Let's output the contents of React from the created component.

app/views/posts/index.html.erb

<%= react_component('HelloWorld', greeting: 'Mike') %>

Let's see the output contents in the browser. You should see "Greeting: Mike".

By the way, in addition to the components directory, you can also create your own directory. Execute the following command.

$ rails g react:component my_subdirectory/HelloWorld greeting:string

Then, in the command executed earlier, a js file was created under the components directory, but this time it will be as follows.

app/javascript/my_subdirectory/HelloWorld.js

import React from "react"
import PropTypes from "prop-types"
class HelloWorld extends React.Component {
  render () {
    return (
      <React.Fragment>
        Greeting: {this.props.greeting}
      </React.Fragment>
    );
  }
}

HelloWorld.propTypes = {
  greeting: PropTypes.string
};
export default HelloWorld

I was able to create a js file under "my_subdirectory" specified in the command. When calling to view, describe the following.

app/views/posts/index.html.erb

<%= react_component("my_subdirectory/HelloWorld", { greeting: "Hello from react-rails." }) %>

If you check your browser, you should see "Greeting: Hello from react-rails."

It's convenient because it can be easily called with the react_component method. I've just introduced it, so I'm going to play around with it.

As an aside, it's been getting colder these days. I'm too angry and I'm hitting the keyboard with my mannequin-like hands. (If you turn on the heating, yeah ...)

Thank you for reading until the end! !!