react-railsを使ってreactコンポーネントを表示させることができない
解決済
回答 1
投稿
- 評価
- クリップ 0
- VIEW 766
前提・実現したいこと
react-railsを用いたWeb開発をしたいと考えております。
開発環境は以下の通りです。
- Ubuntu 18.04
- Ruby 2.7.1
- Rails 6.0.2.2
react-railsでルートパスにReactコンポーネントが表示されるようにすべく、以下の手順を行いました。
参考にしたサイトはこちらです
1.rails newでプロジェクト作成
$ rails new react-rails-tutorial
$ cd react-rails-tutorial
2.react-railsを使用可能にするためのコマンド実行
$ vi Gemfile
# ...省略
gem 'react-rails', '~> 1.0' # 追加する
$ bundle install
$ rails g react:install
$ rails g react:component CommentBox
3.app/assets/javascripts/components/comment_box.js.jsxを編集
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
Hello, world! I am a CommentBox.
</div>
);
}
});4.コマンドを実行してコントローラーを作成
$ rails g controller comments5.ビュー（app/views/comments/index.html.erb）を作成
<%= react_component('CommentBox') %>6.ルーティング設定
Rails.application.routes.draw do
root 'comments#index'
end発生している問題
rails serverを実行し、localhost:3000にアクセスしましたが、何も表示されず画面が真っ白になります。
デベロッパーツールで確認すると、作成したコンポーネント（CommentBox）を表示しようとしていることは確認できました。
期待動作
ブラウザ上に「Hello, world! I am a CommentBox.」と表示される
試したこと・質問したいこと
別のサイトをいくつか調べましたが、参考にしたサイトと同様の手順を行っており、結果は同じになりました。
なぜ目的のメッセージが表示されないのでしょうか。
教えていただけますと幸いです。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
check解決した方法
0
別の方法でreactを使用するようにすることで解決しました。
railsをAPIモードで起動し、create-react-appでreactの環境を構築。
create-react-appで生成されたフォルダ内にreactのコンポーネントを配置することで無事に表示できました。
参考にした記事
なぜ質問内容に記載した方法ではうまくいかなかったのかは謎のまま。
使用しているバージョンの問題なのでしょうか。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.34%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
maisumakun
2020/04/21 12:38
ブラウザのコンソールになにかエラーなどは出ていませんか？
hoshi-takanori
2020/04/21 13:31
React のバージョンは分かりますか？ React.createClass は React 16 では削除されてるので、クラスコンポーネントか関数コンポーネントに移行しましょう。
iruka-s
2020/04/21 13:50 編集
maisumakun様
ブラウザのコンソールにはエラーも警告も出力されておりませんでした。
rails sを実行したPCのコンソールには以下のような警告が出ていました。
一部コピペします。
Processing by CommentsController#index as HTML
gems/activesupport-6.0.2.2/lib/active_support/messages/rotator.rb:28: warning: Using the last argument as keyword parameters is deprecated; maybe ** should be added to the call
iruka-s
2020/04/21 14:02 編集
hoshi-takanori様
react-rails のバージョンは 1.11.0 でした。
app/assets/javascripts/components/comment_box.js.jsx を以下のように変更しましたが、同じ挙動になりました。
class CommentBox extends React.Component {
render() {
return (
<div className="commentBox">
Hello, world! I am a CommentBox.
</div>
);
}
}
maisumakun
2020/04/21 14:06
素朴な疑問なのですが、Rails 6なのにSprocketsでやっているのは、あえての選択でしょうか。
iruka-s
2020/04/21 14:29 編集
とりあえず調べた通りにやってみただけで、特にこだわりがあってこうなったわけではありません。。