この記事はこんな方におすすめです。
- Ruby on RailsでReactを使いたい
- Javascriptのライブラリを使ってみたい
- SPA(シングルページアプリケーション)を実装したい
- 非同期通信の機能を作りたい
今回はRailsで既に作成しているWebアプリにReactを導入する方法について解説していきます。(今後は新規アプリ作成段階でReactを導入する方法についても追記していきます。)
これから紹介する手順を実行する前に必ず、下記をインストールしているのを確認してください。
- webpacker
- yarn
- node

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

まずはgem file内に『gem ‘react_on_rails』を記入します。
gem 'react_on_rails
そしてgemをインストールする呪文を唱えます。
bundle install
これでgemをインストールできました!
次にreact-railsをインストールします。
bundle exec rails webpacker:install:react
そしてReactを動かすために必要なファイルを次のコードで作成します。
rails generate react:install
そうするとjavascriptファイルの中に「HelloWorld.jsx」などReactを動かすための雛形のファイルが作成されます。

まずはこの段階で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を触ったことがない方は下のUdemyの講座が本当におすすめです。


純粋なjavascriptとReactの2パターンで同じアプリを制作し、どれほどReactが便利なものなのか体感できます。
また他のReactの講座や参考書では、javascriptの解説が省略されています。しかし本講座は、しっかりとjavascriptの基礎を解説してくれるのでつまづくこともありません!
もう少し詳しく知りたい方は下記記事をご覧ください!
コメントを残す