react如何控制全局loading_ReactJS实践（一）—— FrozenUI React化之Loading组件

在前面我们通过四篇文章入门了React的大部分主要API，现在则开始进入实践环节。

实践系列的开篇打算拿我司的FrozenUI来试验，将其部分UI组件进行React化，作为第一篇实践文章，将以较简单的Loading组件来入手，官网demo的效果如下图：

为了更好地开发，后续将以webpack工具来辅助，对其不了解的童鞋可以先查阅我的《webpack 入门指南》一文。

鉴于我们将复用 FrozenUI 的样式，所以在DOM结构、class命名上都应当尽量和原版的保持一致，在这个基础上来实现具有同样功能的React组件。

于是我们先下载好 frozen.css(方便示例所以直接用全局的样式)和图片资源，并定义一个简单的 webpack.config.js：

module.exports ={

entry: {

loading :'./src/js/page/loading.js'},

output: {

path:'dist/js/page',

filename:'[name].js'},

module: {

loaders: [

{ test:/\.css$/, loader: 'style-loader!css-loader'},

{ test:/\.js$/, loader: 'jsx-loader?harmony'},

{ test:/\.scss$/, loader: 'style!css!sass?sourceMap'},

{ test:/\.(png|jpg)$/, loader: 'url-loader?limit=8192'}

]

},

resolve: {extensions: ['', '.js', '.json', '.scss']

}

};

需要下载的模块大致有这些(尽管有几个我们暂时还用不上，先装上无所谓)：

"dependencies": {"css-loader": "^0.15.2","expose-loader": "^0.7.0","file-loader": "^0.8.4","jsx-loader": "^0.13.2","node-sass": "^3.2.0","react": "^0.13.3","sass-loader": "^1.0.2","style-loader": "^0.12.3","url-loader": "^0.5.6"}

我们的文件目录结构也很简单：

其中 src 为源文件文件夹，dist 用于存放 webpack 最终处理后的输出文件。

src/js 中又分了 component 和 page 两个文件夹，用于存放组件脚本和html页面上要引用的入口脚本。

./loading.html

这是最终执行页面，作为Demo可以做的简单点：

Demo