今回は「index.html.erb」表示まで
react用アプリケーション作成
rails
rails new RailsReactApp --webpack=react
indexページ作る
rails
rails g controller hello index
app/controllers/hello_controller.rb
class HelloController < ApplicationController
def index
end
end
indexファイルコーディング
rails
<%= javascript_pack_tag 'hello_react' %>
<h1 class="display-4 text-primary">
Hello#index</h1>
<div id="hello"></div>
Viewファイル修正
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>RailsReactApp</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css
bootstrap.css>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
Reactで表示完了
Reactを利用した処理が実行されています。
appフォルダ内の JavaScriptフォルダ内にはpacksというフォルダがあり、この中にhello_react.jsxというファイルが用意されています。このスクリプトが読み込まれています。
*標準でReactコンポーネントのJavaScriptファイルについて、拡張子を「.js」ではなく「.jsx」にすることが推奨されている。
今日はここまで