最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】使用react-hot-boilerplate去集成ReactJS-AdminLTE

ReactJS crifan 2136浏览 0评论

折腾:

【已解决】把ReactJS-AdminLTE的页面编译打包成生产环境版本

https://www.crifan.com/

期间,试了其他方式,都不行。

去试试:

https://github.com/gaearon/react-hot-boilerplate

“It’s experimental and completely lacks any production features.“

缺少production的版本?

晕死。

那也还是试试看看效果。

➜  react-hot-boilerplate git clone https://github.com/gaearon/react-hot-boilerplate.git
Cloning into ‘react-hot-boilerplate’…
remote: Counting objects: 420, done.
remote: Total 420 (delta 0), reused 0 (delta 0), pack-reused 420
Receiving objects: 100% (420/420), 132.46 KiB | 0 bytes/s, done.
Resolving deltas: 100% (213/213), done.
➜  react-hot-boilerplate cd react-hot-boilerplate
➜  react-hot-boilerplate git:(master) npm install
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
> [email protected] install /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-hot-boilerplate/react-hot-boilerplate/node_modules/fsevents
> node install
[fsevents] Success: “/Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-hot-boilerplate/react-hot-boilerplate/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node” already installed
Pass –update-binary to reinstall or –build-from-source to recompile
npm notice created a lockfile as package-lock.json. You should commit this file.
added 664 packages in 26.938s

然后

➜  react-hot-boilerplate git:(master) ✗ npm start
> [email protected] start /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-hot-boilerplate/react-hot-boilerplate
> node server.js
Listening at http://localhost:3000/
webpack built bf9debfd305a0d42e60a in 1521ms
Hash: bf9debfd305a0d42e60a
Version: webpack 1.15.0
Time: 1521ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.03 MB       0  [emitted]  main
chunk    {0} bundle.js (main) 742 kB [rendered]
    [0] multi main 40 bytes {0} [built]
    [1] (webpack)-hot-middleware/client.js 6.68 kB {0} [built]
    [2] (webpack)/buildin/module.js 251 bytes {0} [built]
    [3] ./~/strip-ansi/index.js 161 bytes {0} [built]
    [4] ./~/ansi-regex/index.js 135 bytes {0} [built]
    [5] (webpack)-hot-middleware/client-overlay.js 1.82 kB {0} [built]
    [6] ./~/ansi-html/index.js 4.26 kB {0} [built]
    [7] ./~/html-entities/index.js 231 bytes {0} [built]
    [8] ./~/html-entities/lib/xml-entities.js 2.99 kB {0} [built]
    [9] ./~/html-entities/lib/html4-entities.js 6.59 kB {0} [built]
   [10] ./~/html-entities/lib/html5-entities.js 49 kB {0} [built]
   [11] (webpack)-hot-middleware/process-update.js 3.88 kB {0} [built]
   [12] ./src/index.js 2.09 kB {0} [built]
   [13] ./~/react-hot-api/modules/index.js 57 bytes {0} [built]
   [14] ./~/react-hot-api/modules/makeMakeHot.js 1.07 kB {0} [built]
   [15] ./~/react-hot-api/modules/makePatchReactClass.js 1.3 kB {0} [built]
   [16] ./~/react-hot-api/modules/makeAssimilatePrototype.js 1.85 kB {0} [built]
   [17] ./~/react-hot-api/modules/requestForceUpdateAll.js 888 bytes {0} [built]
   [18] ./~/react-hot-api/modules/deepForceUpdate.js 1.23 kB {0} [built]
   [19] ./~/react-hot-api/modules/bindAutoBindMethods.js 2.21 kB {0} [built]
   [20] ./~/react-hot-api/modules/traverseRenderedChildren.js 536 bytes {0} [built]
   [21] ./~/react-hot-loader/RootInstanceProvider.js 1.18 kB {0} [built]
   [22] ./~/react-hot-loader/getRootInstancesFromReactMount.js 209 bytes {0} [built]
   [23] ./~/react/lib/ReactMount.js 36.8 kB {0} [built]
   [24] ./~/process/browser.js 5.42 kB {0} [built]
   …
  [181] ./src/App.js 3.82 kB {0} [built]
  [182] ./~/react-hot-loader/makeExportsHot.js 1.73 kB {0} [built]
  [183] ./~/react-hot-loader/isReactClassish.js 801 bytes {0} [built]
  [184] ./~/react-hot-loader/isReactElementish.js 288 bytes {0} [built]
webpack: Compiled successfully.

http://localhost:3000/

➜  react-hot-boilerplate git:(master) ✗ npm install adminlte-reactjs
npm WARN deprecated [email protected]: ..psst! While Bower is maintained, we recommend Yarn and Webpack for *new* front-end projects! Yarn’s advantage is security and reliability, and Webpack’s is support for both CommonJS and AMD projects. Currently there’s no migration path, but please help to create it: https://github.com/bower/bower/issues/2467
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN [email protected] requires a peer of react@^15.6.1 but none was installed.
added 37 packages in 14.998s

然后:

【已解决】Reactjs出错:Uncaught Error Cannot find module react/lib/ReactComponentTreeHook

可以运行了,但是很明显,就是缺少css了。

期间,去加上了很多css和js,直接使用的是各种cdn:

【整理】ReactJS-AdminLTE用到的各种css和js的库的在线CDN地址

现在的代码是:

react-hot-boilerplate/react-hot-boilerplate/index.html

<!doctype html>
<html>
  <head>
    <meta charset=”utf-8″>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
    <title>Sample App</title>
    <!– Tell the browser to be responsive to screen width –>
    <meta content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no” name=”viewport”>
    <!– Bootstrap 3.3.5 –>
    <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>
    <!– Font Awesome –>
    <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css”>
    <!– Ionicons –>
    <link rel=”stylesheet” href=”https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css”>
    <!– DataTables –>
    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/css/dataTables.bootstrap.min.css”>
    <!– Theme style –>
    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.3.11/css/AdminLTE.min.css”>
    <!– AdminLTE Skins. Choose a skin from the css/skins
      folder instead of downloading all of them to reduce the load. –>
    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.3.11/css/skins/_all-skins.min.css”>
  </head>
  <body class=”skin-blue sidebar-mini wysihtml5-supported”>
    <div id=’root’>
    </div>
    <script src=”/public/bundle.js”></script>
    <!– <script src=”/adminlte_app.js”></script> –>
    
    <script src=”https://code.jquery.com/jquery-3.1.1.min.js” integrity=”sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=” crossorigin=”anonymous”></script>
    <script src=”https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/js/jquery.dataTables.min.js”></script>
    <script src=”https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/js/dataTables.bootstrap.min.js”></script>
  </body>
</html>

react-hot-boilerplate/react-hot-boilerplate/src/App.js

import React, { Component } from ‘react’;
import adminlteReactjs from ‘adminlte-reactjs’;
export default class App extends Component {
  render() {
    console.log(adminlteReactjs);
    // let ProfileCard = adminlteReactjs.ProfileCard;
    let HeaderBar = adminlteReactjs.HeaderBar;
    let NavigationMenu = adminlteReactjs.NavigationMenu;
    // console.log(ProfileCard);
          // <div>
      //   <h1>Hello, world.</h1>
      //   <ProfileCard />
      // </div>
    return (
      <div className=”wrapper”>
        <HeaderBar />
        
        <NavigationMenu />
        
        <div className=”content-wrapper”>
          <section className=”content-header”>
            <h1>拇指车<small>管理后台</small></h1>
          </section>
        </div>
        <footer className=”main-footer”>
          <div className=”pull-right hidden-xs”>
              <b>Version</b> 1.0.0
          </div>
          <strong>Copyright © 2017 <a href=”http://www.daryun.com”>苏州达云网络科技有限公司</a>版权所有.</strong>
        </footer>
      </div>
    );
  }
}

且把ReactJS-AdminLTE中public/dist/

下面的img都拷贝过来了:

因为发现此处调用到的HeaderBar中需要调用到头像图片文件:

但是结果头像还是显示不出来:

效果是:

另外,对于:

此处的导航栏中其实内容很多,但是高度内容被右边内容限制了

的问题,之前就解决过:

【已解决】如何设置ReactJS-AdminLTE的主体显示内容的高度为页面高度

是把ReactJS-AdminLTE的app.js引入即可

但是此处试了试:

【已解决】react-hot-boilerplate中导入ReactJS-AdminLTE的app.js出错:Uncaught SyntaxError: Unexpected token <

然后去:

【已解决】导入ReactJS-AdminLTE的app.js出错:Uncaught Error: AdminLTE requires jQuery

另外,对于如何在backend的server,再加上webpack-dev-server同时工作的写法,还是不懂:

看来是,只有好好从头开始学习webpack等工具,才能更好的理解,如何把ReactJS-AdminLTE中的app.js,如何放到Reactjs的项目中。

【记录】从头开始学习Webpack+Webpack资料

【总结】

截至目前,虽然有点不完美,但是现在暂时可以在react-hot-boilerplate中跑起来ReactJS-AdminLTE了:

react-hot-boilerplate/react-hot-boilerplate/src/App.js

import React, { Component } from ‘react’;
import adminlteReactjs from ‘adminlte-reactjs’;
export default class App extends Component {
  render() {
    console.log(adminlteReactjs);
    // let ProfileCard = adminlteReactjs.ProfileCard;
    let HeaderBar = adminlteReactjs.HeaderBar;
    let NavigationMenu = adminlteReactjs.NavigationMenu;
    // console.log(ProfileCard);
    return (
      <div className=”wrapper”>
        <HeaderBar />
        <NavigationMenu />
        <div className=”content-wrapper”>
          <section className=”content-header”>
            <h1>
                  拇指车
                  <small>管理后台</small>
              </h1>
          </section>
          <section className=”content”>
            <div className=”row”>
              <div className=”col-xs-12″>
                <div className=”box”>
                  <div className=”box-header”>
                    <h3 className=”box-title”>客户列表</h3>
                  </div>
                  <div className=”box-body”>
                    <table
                      id=”datatable_example2″
                      className=”table table-bordered table-hover”
                      >
                          <thead>
                          <tr>
                          <th>Rendering engine</th>
                          <th>Browser</th>
                          <th>Platform(s)</th>
                          <th>Engine version</th>
                          <th>CSS grade</th>
                          </tr>
                          </thead>
                          <tbody>
                          <tr>
                          <td>Trident</td>
                          。。。
                          </tr>
                          </tfoot>
                      </table>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
        <footer className=”main-footer”>
            <div className=”pull-right hidden-xs”>
                <b>Version</b> 1.0.0
            </div>
            <strong>Copyright © 2017 <a href=”http://www.daryun.com”>苏州达云网络科技有限公司</a>版权所有.</strong>
        </footer>
        {/*<ControlsMenu />*/}
      </div>
    );
  }
}

adminlte_app.js是ReactJS-AdminLTE中的app.js

其中加上

  /*
   * enable data table pagination
   * ————————
   */
  $(‘#datatable_example1’).DataTable()
  $(‘#datatable_example2’).DataTable({
    ‘paging’      : true,
    ‘lengthChange’: false,
    ‘searching’   : false,
    ‘ordering’    : true,
    ‘info’        : true,
    ‘autoWidth’   : false
  });

以便于支持data table的pagination。

react-hot-boilerplate/react-hot-boilerplate/webpack.config.js

var path = require(‘path’);
var webpack = require(‘webpack’);
module.exports = {
  devtool: ‘cheap-module-eval-source-map’,
  // entry: [
  //   // ‘webpack-hot-middleware/client’,
  //   ‘./src/index.js’,
  //   ‘./src/adminlte_app.js’
  // ],
  entry: {
    index: ‘./src/index.js’,
    vendor : [
      ‘webpack-hot-middleware/client’,
      ‘./src/adminlte_app.js’
    ],
  },
  output: {
    // path: path.join(__dirname, ‘public’),
    path: path.join(__dirname, ‘build’),
    // filename: ‘bundle.js’,
    filename: ‘[name].js’,
    // publicPath: ‘/public/’
    publicPath: ‘/public’
    // publicPath: ‘http://localhost:3000/public/’
  },
  plugins: [
    // new webpack.ProvidePlugin({
    //   $: ‘jquery’,
    //   ‘window.jQuery’: ‘jquery’,
    //   jQuery: ‘jquery’,
    //   ‘window.$’: ‘jquery’,
    // }),
    new webpack.optimize.CommonsChunkPlugin(‘vendor’, ‘vendor.bundle.js’),
    new webpack.HotModuleReplacementPlugin()
    // new webpack.optimize.UglifyJsPlugin({
    //   minimize: true
    // })
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: [‘react-hot-loader’, ‘babel-loader’],
      include: path.join(__dirname, ‘src’)
    }]
  }
};

代码,效果:

转载请注明:在路上 » 【已解决】使用react-hot-boilerplate去集成ReactJS-AdminLTE

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
83 queries in 0.178 seconds, using 22.17MB memory