ReactとRails基礎編１

RubyonRailsでwebサイトを作成するのはすごい楽しいし時間があっという間に消える。やりたいことは多いが、webサイトにアニメーションを加えたい時に困ってしまうことが多い。
JSのフレームワークとして有名なReactを勉強することで、自分のできることが広がると考えた。

そこでReactonRailsで何かできないと調べ始めた。

前提条件

Mac OS 11.2.3 (intel) M1欲しい
railsバージョンは6.0.0

必要なGem

1.react-rails
https://github.com/reactjs/react-rails
2.webpacker
https://github.com/rails/webpacker

ReactonRailsでHello　Worldまで

プロジェクト作成

ターミナル上

rails _6.0.0_ new react_rails -d mysql 

データベース作成

rails db:create
rails db:migrate

Gemfileに追記

gem 'react-rails'

ターミナル上で無心で打ち込み続ける

- bundle install
- rails webpacker:install
- rails webpacker:install:react

React関連のファイルを作成

ターミナル上で

rails g react:component HelloWorld greeting:string

すると
app/javascripts/components内にHelloWorld.jsが作成される

HelloWorld.ｊｓ

import React from "react"
import PropTypes from "prop-types"
class HelloWorld extends React.Component {
  render () {
    return (
      <React.Fragment>
        Greeting: {this.props.greeting}
      </React.Fragment>
    );
  }
}

HelloWorld.propTypes = {
  greeting: PropTypes.string
};
export default HelloWorld

rails g react:component HelloWorld greeting:string

コントローラー作成＆ルーティング設定

- rails generate controller Welcomes

route.rb

Rails.application.routes.draw do
  root 'welcomes#index'  # 追記
end

ビューファイル編集

Reactコンポーネントが表示されるようにするためにviewフォルダにindex.html.erbを作成し以下を打ち込む

index.html.erb

<%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %> # 追記

ローカルサーバー起動

rails s

ブラウザで
http://localhost:3000/　をチェック✅　以下のように表示されていればOK！
####

今回はgemを活用して,ReactとRailsを組み合わせることができました。
しかし、他にReactとRailsを組み合わせる方法もあります。
それは次回記事にしようと思います