React,Flux,ESLintの導入

.eslintrc.json

@@ -0,0 +1,36 @@
+{
+    "env": {
+        "browser": true,
+        "commonjs": true,
+        "es6": true
+    },
+    "extends": "eslint:recommended",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 2018,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+        "indent": [
+            "error",
+            "tab"
+        ],
+        "linebreak-style": [
+            "error",
+            "unix"
+        ],
+        "quotes": [
+            "error",
+            "single"
+        ],
+        "semi": [
+            "error",
+            "never"
+        ]
+    }
+}

.gitignore

@@ -34,3 +34,4 @@
 /node_modules
 yarn-debug.log*
 .yarn-integrity
+/.idea

Gemfile

@@ -12,6 +12,7 @@ gem 'webpacker', '~> 3.5'
 gem 'turbolinks', '~> 5'
 gem 'bootsnap', require: false
 gem 'jbuilder', '~> 2.5'
+gem 'react-rails'
 
 # 暫定的bootstrap導入。将来的にはjqueryも含めて排除したい。
 gem 'bootstrap', '~> 4.1.1'

Gemfile.lock

@@ -49,6 +49,10 @@ GEM
     arel (9.0.0)
     autoprefixer-rails (9.1.3)
       execjs
+    babel-source (5.8.35)
+    babel-transpiler (0.7.0)
+      babel-source (>= 4.0, < 6)
+      execjs (~> 2.0)
     bindex (0.5.0)
     bootsnap (1.3.1)
       msgpack (~> 1.0)
@@ -71,11 +75,19 @@ GEM
       archive-zip (~> 0.10)
       nokogiri (~> 1.8)
     coderay (1.1.2)
+    coffee-rails (4.2.2)
+      coffee-script (>= 2.2.0)
+      railties (>= 4.0.0)
+    coffee-script (2.4.1)
+      coffee-script-source
+      execjs
+    coffee-script-source (1.12.2)
     concurrent-ruby (1.0.5)
     config (1.7.0)
       activesupport (>= 3.0)
       deep_merge (~> 1.2.1)
       dry-validation (>= 0.10.4)
+    connection_pool (2.2.2)
     crass (1.0.4)
     deep_merge (1.2.1)
     dry-configurable (0.7.0)
@@ -159,8 +171,6 @@ GEM
     nio4r (2.3.1)
     nokogiri (1.8.4)
       mini_portile2 (~> 2.3.0)
-    popper_js (1.14.3)
-    public_suffix (3.0.3)
     oauth2 (1.4.0)
       faraday (>= 0.8, < 0.13)
       jwt (~> 1.0)
@@ -175,11 +185,13 @@ GEM
     omniauth-oauth2 (1.5.0)
       oauth2 (~> 1.1)
       omniauth (~> 1.2)
+    popper_js (1.14.3)
     pry (0.11.3)
       coderay (~> 1.1.0)
       method_source (~> 0.9.0)
     pry-rails (0.3.6)
       pry (>= 0.10.4)
+    public_suffix (3.0.3)
     puma (3.12.0)
     rack (2.0.5)
     rack-proxy (0.6.4)
@@ -214,6 +226,12 @@ GEM
     rb-fsevent (0.10.3)
     rb-inotify (0.9.10)
       ffi (>= 0.5.0, < 2)
+    react-rails (2.4.7)
+      babel-transpiler (>= 0.7.0)
+      connection_pool
+      execjs
+      railties (>= 3.2)
+      tilt
     ruby_dep (1.5.0)
     rubyzip (1.2.1)
     sass (3.5.7)
@@ -285,6 +303,7 @@ DEPENDENCIES
   byebug
   capybara (>= 2.15)
   chromedriver-helper
+  coffee-rails (~> 4.2)
   config
   font-awesome-rails
   jbuilder (~> 2.5)
@@ -296,6 +315,7 @@ DEPENDENCIES
   pry-rails
   puma (~> 3.11)
   rails (~> 5.2.1)
+  react-rails
   sass-rails (~> 5.0)
   selenium-webdriver
   slim-rails

app/assets/stylesheets/application.scss

@@ -11,6 +11,7 @@
  * It is generally better to create a new file per style scope.
  *
  *= require font-awesome
+ */
 // bootstrap導入、おいおい削除。
 @import "bootstrap";
 

app/javascript/components/TestBox.js

@@ -0,0 +1,13 @@
+import React from "react";
+// import PropTypes from "prop-types"
+class TestBox extends React.Component {
+  render () {
+    return (
+      <div className="commentBox">
+        Test message. Hello, BuddixTeam!
+      </div>
+    );
+  }
+}
+
+export default TestBox

app/javascript/data/ActionTypes.js

@@ -0,0 +1,5 @@
+const ActionTypes = {
+  HOGE_FUGA: 'HOGE_FUGA',
+};
+
+export default ActionTypes;

app/javascript/data/Dispatcher.js

@@ -0,0 +1,3 @@
+import {Dispatcher} from 'flux';
+
+export default new Dispatcher();

app/javascript/data/actions/TestAction.js

@@ -0,0 +1,14 @@
+// TODO(Taishi): おそらくSuperAgent導入
+import ActionTypes from '../ActionTypes';
+import Dispatcer from '../Dispatcher';
+
+const Actions = {
+  HogeFuga(text) {
+    TodoDispatcher.dispatch({
+      type: TodoActionTypes.HOGE_FUGA,
+      text,
+    });
+  },
+};
+
+export default Actions;

app/javascript/data/stores/TestStore.js

@@ -0,0 +1,24 @@
+import {ReduceStore} from 'flux/utils';
+import ActionTypes from '../ActionTypes';
+import Dispatcer from '../Dispatcher';
+
+class TestStore extends ReduceStore {
+  constructor() {
+    super(Dispatcher);
+  }
+
+  getInitialState() {
+  }
+
+  reduce(state, action) {
+    switch (action.type) {
+      case TodoActionTypes.HOGE_FUGA:
+        break
+
+      default:
+        return state;
+    }
+  }
+}
+
+export default new TestStore();

app/javascript/packs/application.js

@@ -8,3 +8,7 @@
 // layout file, like app/views/layouts/application.html.erb
 
 console.log('Hello World from Webpacker')
+// Support component names relative to this directory:
+var componentRequireContext = require.context("components", true)
+var ReactRailsUJS = require("react_ujs")
+ReactRailsUJS.useContext(componentRequireContext)

app/javascript/packs/server_rendering.js

@@ -0,0 +1,5 @@
+// By default, this pack is loaded for server-side rendering.
+// It must expose react_ujs as `ReactRailsUJS` and prepare a require context.
+var componentRequireContext = require.context("components", true)
+var ReactRailsUJS = require("react_ujs")
+ReactRailsUJS.useContext(componentRequireContext)

app/views/errors/500_internal_server_error.html.slim

@@ -0,0 +1,2 @@
+/ FIXME(Taishi): 常に500エラーが出るのでここでテストしてます。
+= react_component('TestBox')

app/views/home/top.html.erb

@@ -1,3 +1 @@
-<div class="container">
-  <div class="text-primary">bootstrap test</div>
-</div>
+<%= react_component('TestBox') %>

app/views/layouts/_head.html.slim

@@ -11,4 +11,3 @@ meta name="BuddiX (バディックス )"
 
 = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
 = javascript_pack_tag 'application'
-= javascript_pack_tag 'hello_vue'

app/views/layouts/_header.html.slim

@@ -1,6 +1,6 @@
 div#header
   .page_logo
-    =image_tag('header/header.png')
+    //=image_tag('header/header.png')
 
   form action="/" name="search" method="get"
     dl.search
@@ -10,6 +10,6 @@ div#header
           button
             span
 
-  - if user_signed_in?
+  //- if user_signed_in?
     .log-out
       button = link_to "ログアウト", destroy_user_session_path, style:"text-decoration:none"

db/schema.rb

@@ -1,15 +1,3 @@
-# This file is auto-generated from the current state of the database. Instead
-# of editing this file, please use the migrations feature of Active Record to
-# incrementally modify your database, and then regenerate this schema definition.
-#
-# Note that this schema.rb definition is the authoritative source for your
-# database schema. If you need to create the application database on another
-# system, you should be using db:schema:load, not running all the migrations
-# from scratch. The latter is a flawed and unsustainable approach (the more migrations
-# you'll amass, the slower it'll run and the greater likelihood for issues).
-#
-# It's strongly recommended that you check this file into your version control system.
-
 ActiveRecord::Schema.define(version: 2018_08_28_064407) do
 
   create_table "gifts", force: :cascade do |t|