效果展示:http://m.penkuoer.com/
在rails5之后可以直接使用前端js框架進(jìn)行spa應(yīng)用的處理,集成了yarn做js插件管理徙菠。在搭建react項(xiàng)目的時(shí)候如果為了省事可以使用dva進(jìn)行項(xiàng)目創(chuàng)建蝶俱。

1. 創(chuàng)建rails項(xiàng)目

   rails new rails-dva --webpack=react # 創(chuàng)建rails項(xiàng)目,加入webpack和react基礎(chǔ)插件
   

2. 修改相關(guān)代碼,開啟前端框架引用

   rails g controller home # 創(chuàng)建控制器,并修改相關(guān)代碼
   

   config/routes.rb文件

   Rails.application.routes.draw do
     root 'home#index'
     # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
     resource :home
   end
   

   app/views/home/index.html.erb文件

   <div id="root"></div>
   <%= javascript_pack_tag 'application' %>
   

   啟動(dòng)代碼看下效果

   rails s # 啟動(dòng)rails開發(fā)服務(wù)器
   ./bin/webpack-dev-server    # 啟動(dòng)webpack開發(fā)服務(wù)器
   # 訪問(wèn) http://localhost:3000 查看效果
   

3. 安裝dva,修改相關(guān)代碼

   yarn add dva
   # 在app/javascript/packs目錄下創(chuàng)建dva的入口文件
   

   app/javascript/packs/application.js文件

   import dva from 'dva';
   
   const app = dva();  # 創(chuàng)建dva項(xiàng)目
   app.router(router); # 引入路由
   app.start('#root'); # 啟動(dòng)項(xiàng)目
   

   app/javascript/packs/router.js文件

   import React from 'react';
   import {Router, Route, IndexRoute} from 'dva/router';
   import IndexPage from './routes/IndexPage';
   
   // IndexRoute 默認(rèn)加載的地址
   function RouterConfig({history}) {
       return (
           <Router history={history}>
               <Route path="/" component={IndexPage} />
           </Router>
       );
   }
   
   export default RouterConfig;
   

   app/javascript/packs/routes/IndexPage.js文件,頁(yè)面文件

   import React from 'react';
   function IndexPage() {
       return <h1>我是首頁(yè)</h1>
   }
   
   export default IndexPage;
   

4. 修改es6語(yǔ)法編譯時(shí)的配置問(wèn)題,修改后的文件如下
   .babelrc文件,需要安裝相關(guān)插件
   babel-preset-es2015,babel-preset-stage-0,babel-plugin-transform-runtime

   {
     "presets": [
       [
         "env",
         {
           "modules": false,
           "targets": {
             "browsers": "> 1%",
             "uglify": true
           },
           "useBuiltIns": true
         }
       ],
       "react",
       "stage-0",
       "es2015"
     ],
     "plugins": [
       "syntax-dynamic-import",
       [
         "transform-class-properties",
         {
           "spec": true
         }
       ],
       "transform-runtime"
     ]
   }
   

5. 修改webpack中配置文件,解決css引入的問(wèn)題

   config/webpack/loaders/sass.js

   const ExtractTextPlugin = require('extract-text-webpack-plugin')
   const {env} = require('../configuration.js')
   
   module.exports = {
     test: /\.(scss|sass|css)$/i,
     // use: ExtractTextPlugin.extract({
     //   fallback: 'style-loader',
     //   use: [
     //     { loader: 'css-loader', options: { minimize: env.NODE_ENV === 'production',modules: true, } },
     //     { loader: 'postcss-loader', options: { sourceMap: true, modules: true, } },
     //     'resolve-url-loader',
     //     { loader: 'sass-loader', options: { sourceMap: true, modules: true, } }
     //   ]
     // })
     use: [
       require.resolve('style-loader'),
       {loader: 'css-loader', options: {minimize: env.NODE_ENV === 'production', modules: true,}},
       {loader: 'postcss-loader', options: {sourceMap: true, modules: true,}},
       'resolve-url-loader',
       {loader: 'sass-loader', options: {sourceMap: true, modules: true,}}
     ]
   };