【随時更新】Railsで作成したWebアプリにReactを導入する方法

この記事はこんな方におすすめです。

Ruby on RailsでReactを使いたい
Javascriptのライブラリを使ってみたい
SPA（シングルページアプリケーション）を実装したい
非同期通信の機能を作りたい

今回はRailsで既に作成しているWebアプリにReactを導入する方法について解説していきます。（今後は新規アプリ作成段階でReactを導入する方法についても追記していきます。）

これから紹介する手順を実行する前に必ず、下記をインストールしているのを確認してください。

webpacker
yarn
node

Contents

1 STEP1.react_on_railsをインストール
2 STEP2.react-railsをインストール
3 STEP3.webpackerを起動する
4 アプリを作ってReactの基礎を学ぼう！

STEP1.react_on_railsをインストール

RailsでReactを導入する方法は何種類かありますが、今回は『react_on_rails』というgemをインストールして進めていきます。

まずはgem file内に『gem ‘react_on_rails』を記入します。

gem 'react_on_rails

そしてgemをインストールする呪文を唱えます。

bundle install

これでgemをインストールできました！

STEP2.react-railsをインストール

次にreact-railsをインストールします。

bundle exec rails webpacker:install:react

そしてReactを動かすために必要なファイルを次のコードで作成します。

rails generate react:install

そうするとjavascriptファイルの中に「HelloWorld.jsx」などReactを動かすための雛形のファイルが作成されます。

STEP3.webpackerを起動する

まずはこの段階でwebpackerが起動してファイルがコンパイルされることを確認しておきましょう。

成功すれば下図のような画面になります。

これで一通りReactのセットアップは完了です。

この段階でRoutesを確認すると、自動でルーティングを作成してくれているのが分かります。

ちゃんと画面が表示されるのか、/hello_worldでアクセスしてみます。

『Hello World』が表示されましたが、期待する画面ではありません。

デフォルトで作成されたHelloWorld.jsxを下記のように編集します。

import PropTypes from 'prop-types';
import React, { useState } from 'react';

const HelloWorld = (props) => {
  const [name, setName] = useState(props.name);

  return (
    <>
      <h3>Hello, {name}!</h3>
      <hr />
      <form>
        <label htmlFor="name">
          Say hello to:
          <input id="name" type="text" value={name} onChange={(e) => setName(e.target.value)} />
        </label>
      </form>
    </>
  );
};

HelloWorld.propTypes = {
  name: PropTypes.string.isRequired, // this is passed from the Rails view
};

// エラー修正
export default props => <HelloWorld {...props} />;

もう一度画面を確認すると変更されたことが分かります。