[原创] rails5中使用dva搭建react项目

rails react dva

2017-08-24 4213

rails5中使用dva搭建react项目

在rails5之后可以直接使用前端js框架进行spa应用的处理,集成了yarn做js插件管理。在搭建react项目的时候如果为了省事可以使用dva进行项目创建。

  1. 创建rails项目

    rails new rails-dva --webpack=react # 创建rails项目,加入webpack和react基础插件
  2. 修改相关代码,开启前端框架引用

    rails g controller home # 创建控制器,并修改相关代码

    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' %>

    启动代码看下效果

    rails s # 启动rails开发服务器 ./bin/webpack-dev-server # 启动webpack开发服务器 # 访问 http://localhost:3000 查看效果
  3. 安装dva,修改相关代码

    yarn add dva # 在app/javascript/packs目录下创建dva的入口文件

    app/javascript/packs/application.js文件

    import dva from 'dva';
    
    const app = dva();  # 创建dva项目
    app.router(router); # 引入路由
    app.start('#root'); # 启动项目

    app/javascript/packs/router.js文件

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

    app/javascript/packs/routes/IndexPage.js文件,页面文件

    import React from 'react'; function IndexPage() { return <h1>我是首页</h1> }
    
    export default IndexPage;
  4. 修改es6语法编译时的配置问题,修改后的文件如下
    .babelrc文件,需要安装相关插件 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引入的问题

    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,}}
      ]
    };
  6. ...