react如何控制全局loading_ReactJS实践（一）—

在前面我们通过四篇文章入门了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

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

react如何控制全局loading_React Loading组件的正确姿势
React Loading组件的正确姿势页面异步加载的时候为缓解用户等待的焦虑情绪,我们通常会采取加载中...等文字或图标提示. (图例,各种加载中状态) 日常写法直接在state中存一个load ...
react如何控制全局loading_React项目实现全局 loading 以及错误提示
前言在项目中使用 loading,一般是在组件中用一个变量( 如isLoading)来保存请求数据时的 loading 状态,请求 api 前将 isLoading 值设置为 true,请求 api ...
React Native在Android当中实践（五）——常见问题
React Native在Android当中实践(一)--背景介绍 React Native在Android当中实践(二)--搭建开发环境 React Native在Android当中实践(三)--集 ...
react 最佳实践_最佳React教程
react 最佳实践 React is a JavaScript library for building user interfaces. It was voted the most loved i ...
【前端】react and redux教程学习实践，浅显易懂的实践学习方法。
前言前几天,我在博文[前端]一步一步使用webpack+react+scss脚手架重构项目中搭建了一个react开发环境.然而在实际的开发过程中,或者是在对源码的理解中,感受到react中用的最多 ...
Spring Cloud的全局封装实践
前言跨应用的全局封装通过模仿java的异常抛出实现,通过各个服务使用相同的接口返回格式实现服务消息的传递,在规范化的同时快速定位真正出现问题的服务. 全局接口返回格式分为外部接口格式和内部接口格式, ...
react全局状态管理_rxv: 在React中用Vue3的reactivity包实现状态管理。
前言 React的状态管理是一个缤纷繁杂的大世界,光我知道的就不下数十种,其中有最出名immutable阵营的redux,有mutable阵营的mobx,react-easy-state,在hooks ...
[react] 说出几点你认为的React实践
[react] 说出几点你认为的React最佳实践使用HOC实现组件复用完善测试用例Testing 使用Typescript或者Flow对代码进行静态检测代码规范及格式化ES lint, Pre ...
React Native在Android当中实践（一）——背景介绍
React Native在Android当中实践(一)--背景介绍 React Native在Android当中实践(二)--搭建开发环境 React Native在Android当中实践(三)--集 ...

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

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

最新文章

热门文章