React项目中加入jQuery和相关插件

Hexo使用内链及文章中加入图片的方法的基础上,做了两件事情:

  • React-Router: 用transition API替代Link标签。Link标签虽然很简单的实现了切换页面效果,但它充其量不过是自动生成的a标签,界面需求复杂的情况下,还是要动用底层的API
  • 引入jQuery-UI到项目中,为了实现页面条目的选中和拖拽排序等功能

使用transition#

参照官方说明:Navigation Mixin

代码的改动,在PagePannel.js m5.4

引入jQuery-UI#

也许有更适合webpack的方式,比如官方文档webpack with common libs,但是,为了简单可控的实现需求,使用的是bower。以后有时间再了解官方的方式,评估是否加入到项目中来。

我的基本思路是:

  • 使用bower install安装所需的库,主要是jQueryjQuery UI
  • jQuery UI等库全局的方式加入到html页面上,这样React的代码都可使用,类似这样:
1
2
3
4
5
6
7
8
9
10
11
12
<head>
<title>react原型</title>
<!-- jquery -->
<script type="text/javascript" src="/bower_components/jquery/dist/jquery.min.js"></script>
<!-- jquery-ui -->
<script type="text/javascript" src="/bower_components/jquery-ui/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/bower_components/jquery-ui/themes/smoothness/jquery-ui.min.css">
<!-- bootstrap -->
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
</head>

缺点是,hot-load方式调试的时候,每做一次改动,浏览器重新加载的速度较慢,要好几秒钟。

也许可以通过这种方式集成webpack和bower,http://webpack.github.io/docs/usage-with-bower.html,需要测试一下。