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: