作成済のRailsアプリケーションのView部分をReactに置き換えてみる #React

初めてのRailsアプリケーションを作成してから数か月、Reactの学習を兼ねて　View を編集していこうと思います。

既に忘れている部分も多いのでまずはディレクトリ内の確認

直下に
package.json

他は rails new で作成されたものだと思う。

yarn が必要だという事なので確認

nvm -v
not found
npm -v
6.14.7
yarn -v
1.22.4

bin/ にインストールされているみたい。いつインストールしたのかは記憶にない。

次は gem webpacker が必要という事

Gemfile

gem 'webpacker'

追記したら　

$ bundle install

必要なファイルの作成＆インストール

$ bin/rails webpacker:install

作成された　app/javascript/　app/javascript/packs/ ディレクトリ内にファイルを作成していくみたいです。

$ bin/yarn add react react-dom

デフォルトでは JSX は使用できないようです。

$ bin/rails webpacker:install:react

Webpacker now supports react.js って出た。
あーさっきのコマンドで初めてwebpackerがreactを認識するんですね。
JSX は使えなくて当然でした・・・。

app/javascript/packs/ に　hello_react.jsx が作成された。

app/views/layouts/application.html.slim 内に

app/views/layouts/application.html.slim

<head>
  = javascript_pack_tag 'hello_react'
</head>

で　サンプルが表示される。

$ bin/yarn add @material-ui/core
$ bin/yarn add @material-ui/icons

次回から少しずつ変更していこうと思います。