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

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

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

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

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

  • webpacker
  • yarn
  • node

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} />;

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

フォームに入力すると、非同期で文字が変わります!

アプリを作ってReactの基礎を学ぼう!

もし、Reactを触ったことがない方は下のUdemyの講座が本当におすすめです。

無料サンプル動画をチェック



純粋なjavascriptとReactの2パターンで同じアプリを制作し、どれほどReactが便利なものなのか体感できます。

また他のReactの講座や参考書では、javascriptの解説が省略されています。しかし本講座は、しっかりとjavascriptの基礎を解説してくれるのでつまづくこともありません!

もう少し詳しく知りたい方は下記記事をご覧ください!

【初心者向け】Reactの勉強にオススメの教材を紹介

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です