質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.37%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

1798閲覧

react-railsを使ってreactコンポーネントを表示させることができない

iruka-s

総合スコア12

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/04/21 03:35

前提・実現したいこと

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 comments

5.ビュー(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.」と表示される

試したこと・質問したいこと

別のサイトをいくつか調べましたが、参考にしたサイトと同様の手順を行っており、結果は同じになりました。
なぜ目的のメッセージが表示されないのでしょうか。
教えていただけますと幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2020/04/21 03:38

ブラウザのコンソールになにかエラーなどは出ていませんか?
hoshi-takanori

2020/04/21 04:31

React のバージョンは分かりますか? React.createClass は React 16 では削除されてるので、クラスコンポーネントか関数コンポーネントに移行しましょう。
iruka-s

2020/04/21 05:04 編集

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 05:03 編集

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 05:06

素朴な疑問なのですが、Rails 6なのにSprocketsでやっているのは、あえての選択でしょうか。
iruka-s

2020/04/21 05:29 編集

とりあえず調べた通りにやってみただけで、特にこだわりがあってこうなったわけではありません。。
guest

回答1

0

自己解決

別の方法でreactを使用するようにすることで解決しました。
railsをAPIモードで起動し、create-react-appでreactの環境を構築。
create-react-appで生成されたフォルダ内にreactのコンポーネントを配置することで無事に表示できました。
参考にした記事

なぜ質問内容に記載した方法ではうまくいかなかったのかは謎のまま。
使用しているバージョンの問題なのでしょうか。

投稿2020/04/22 01:44

編集2020/04/22 01:50
iruka-s

総合スコア12

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2020/04/22 01:52

> 使用しているバージョンの問題なのでしょうか。 そうですね、Rails 6ではSprocketsもバージョンアップしているので、そのままではうまく行かないかもしれません(そもそも、Rails 6のアセット管理はWebpackerのほうがメインになっています)。
iruka-s

2020/05/19 08:01

勉強になりました。 ご回答いただきありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.37%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問