@kotaro-ktr (Kotaro Tanaka)posted at 2021-09-26

ruby on rails において既存のページ内にreactjsを導入したい

Q&A

Closed

解決したいこと

ruby on railsでWebアプリを作成しています。
チャットアプリなのですが、

チャット部屋を作成　→ ガントチャート作成ページへ遷移（←ここでreactjsを使いたい）
してそのページでreactを用いて非同期でガントチャートを作成したいと考えております。

react公式のサンプルを試しに入れたり、reactとrubyの両方使うやり方ブログ（https://qiita.com/k-penguin-sato/items/e3cc04f787cf3254cfae）の通りにしてもうまく表示ができません。

せめてreactを画面上に表示することはできるようになりたいので、分かる方がいらっしゃいましたら何卒ご教示いただけますと幸いです。

問題・エラーが起きている画像をここにドラッグアンドドロップ

reactを表示させたいビューのコード

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>React</title>
    <link rel="stylesheet" type="text/css" href="style.scss">

  </head>
  <body>
  <div id="like_button_container"></div>
    <h1 class="title">React</h1>
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="like_button.js"></script>
  </body>
</html>

application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("../chat")
require("../../views/charts/like_button")

like_button.js

'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);

自分で試したこと

・node npm webpacker react-railsは導入しております。

Are you sure you want to delete the question?