はじめに

こちらのページでReactの基本について勉強しました。
Railsアプリの中でReactを利用するという観点でいくつかトピックを抜き出してみました。

Babelの利用

BabelはReactのJSX記法を典型的なJavaScriptの構文に変換してくれる機能です。
Babelは本来、ES6で書かれたJavaScriptをES5やES4に変換するために使われますが、ReactでのBabelは@babel/preset-reactによってJSX記法を変換する機能を持たせている…のだと思います。
Webpackを使ってReactをインストールしている場合、Webpackのコンパイル時にBabelによるトランスパイルを行うようWebpackのバンドリングルールに設定されています。

ReactDOM

app/views/sample/index.html.erb

<h1>Sample#index</h1>
<p>Find me in app/views/sample/index.html.erb</p>

<%= react_component("Hello", { name: "John" }) %>
<div id="hello"></div>

app/javascript/components/Hello.js

import React from "react"
import PropTypes from "prop-types"
import ReactDOM from "react-dom";

export default class Hello extends React.Component {
  render () {
    return (
      <h1>Hi, {this.props.name}!</h1>
    );
  }
}

Hello.propTypes = {
  name: PropTypes.string
};
Hello.defaultProps = {
  name: "Jane"
}

const hello = document.getElementById('hello');
ReactDOM.render(<Hello />, hello);

ReactDOMを使うことで任意の場所でコンポーネントを実行することが可能です。
上記の場合、HTMLから直接Helloコンポーネントを呼び出して引数を与えており、ReactDOMで生成されたHelloコンポーネントはデフォルトの変数が使われています。
export default <コンポーネント名>を記述することで外部からの呼び出しが可能になります。

実行結果。

wepack-dev-serverの利用

Webpack管理下（app/javascript/）のファイルを更新した状態でRailsアプリを実行したタイミングでWebpackerによりWebpackのコンパイルが実行されます。
webpack-dev-serverを起動しておけば、Railsアプリを実行しなくても自動でWeb管理下の更新を検出してコンパイルしてくれます。

$ bin/webpack-dev-server

コンポーネントの階層

コンポーネントに階層をもたせることができます。
app/javascript/components/Hello.jsをapp/javascript/components/Greeting/Hello.jsに変更した場合、呼び出し側は以下のように記述します。

<%= react_component("Greeting/Hello", { name: "John" }) %>

まとめ

Reactは最新のJavaScript構文がふんだんに使われているので、まずJavaScript構文を勉強し直す必要があると感じました。匿名関数、let宣言、{name}、ここらへんの構文は見たことはあっても説明はできない状態です。JavaScriptの基本から勉強し直そうと思います。
それから、まだReactの基本しか勉強してないからかもしれませんが、Railsアプリの中でReactを使うメリットがいまのところ見つかっていません。Railsの考え方はMVCなので、ReactのSPA的な考え方と相反するような気がしています。