[With back tricks] How to introduce React to the simplest Rails

The Rails + React or Vue configuration is very popular in modern web companies. This time, we will introduce React to Rails, which is gaining momentum with the introduction of hook.

Execution environment

ruby 2.6.3p62 Rails 6.0.2.2

Install Gem

You need to install Gem to use Helper. Add the following to the Gemfile and bundle install

• For Rails 5 series, gem'webpacker' is also required.

Gemfile

gem 'react-rails'
#Rails 5 series also added the following
gem 'webpacker'

Install React

Execute the following command in the terminal.

terminal

$ bin/rails wepacker:install:react
$ bin/rails g react:install

#In Rails 5 series, also execute the following
$ bin/rails webpacker:install

Then the following changes will be added.

** Added app / javascript / components / directory ** React files will be created here.

** Added processing to embed React in app / javascript / packs / application.js **

app/javascript/packs/application.js

//The following code is added at the end
// Support component names relative to this directory:
var componentRequireContext = require.context("components", true);
var ReactRailsUJS = require("react_ujs");
ReactRailsUJS.useContext(componentRequireContext);

** Added server-side rendering (SSR) to app / javascript / packs / server_rendering.js **

app/javascript/packs/server_rendering.js

//The following code is added at the end
// By default, this pack is loaded for server-side rendering.
// It must expose react_ujs as `ReactRailsUJS` and prepare a require context.
var componentRequireContext = require.context("components", true);
var ReactRailsUJS = require("react_ujs");
ReactRailsUJS.useContext(componentRequireContext);

• In case of Rails 5 series, it is necessary to describe the following in the header of app / views / layouts / applicationi.html.erb (default is described in 6).

ruby:app/views/layouts/applicationi.html.erb

<%= javascript_pack_tag 'application' %>

The preparation is complete.

Creating a component

As a test, create a component called Hello World. Execute the following command.

terminal

$ bin/rails g react:component HelloWorld greeting:string
Running via Spring preloader in process 12477
      create  app/javascript/components/HelloWorld.js

greeting: string is the argument name and type respectively. Then, the following file will be generated.

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

Introduced to Rails

Add the following code to the place where you want to apply the component in the rails ʻerbfile, and the installation is complete!<%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %>`

Tricks!

The code that is automatically added to ʻapp / javascript / packs / application.jswhen React is installed is ** the process of reading the React code on all pages **, so it also applies to pages where React is not installed. And the response will be reduced. Delete the automatically added part, ** only on the page where React is introduced **<%= javascript_pack_tag 'server_rendering.js' %>` You can avoid this by adding.