⚙️
ReactとRails基礎編1
RubyonRailsでwebサイトを作成するのはすごい楽しいし時間があっという間に消える。やりたいことは多いが、webサイトにアニメーションを加えたい時に困ってしまうことが多い。
JSのフレームワークとして有名なReactを勉強することで、自分のできることが広がると考えた。
そこでReactonRailsで何かできないと調べ始めた。
前提条件
Mac OS 11.2.3 (intel) M1欲しい
railsバージョンは6.0.0
必要なGem
1.react-rails
2.webpackerReactonRailsで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.js
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を組み合わせる方法もあります。
それは次回記事にしようと思います
Discussion