如何评价 React 实现的前端 UI 库 material-ui

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何评价 React 实现的前端 UI 库 material-ui相关的知识，希望对你有一定的参考价值。

参考技术A 前端通过Material-UI构造界面，然后通过hprose-html5调用后端hprose服务取数据

hprose服务参考 上一篇hprose实践,

环境配置：

必须先安装nodejs与npm

新建工程目录
mkdir react-workspace
cd react-workspace
npm init

安装依赖
npm install --save react react-dom react-tap-event-plugin material-ui
npm install --save-dev babel-core babel-loader
npm install --save-dev babel-preset-es2015 babel-preset-react babel-preset-stage-1
npm install --save-dev webpack

第一行是生产用的 React 与 Material-UI 部分。
第二行是Babel转换器的核心部分。
第三行是Babel转换器的三个额外配置：ES2015（ES6），React，Stage1（ES7）。
第四行是Webpack的部分。

第二、三、四行的内容只在工程构建之前有用（用于开发：-dev）。

安装完毕之后呢，可以先检查一下 package.json
应该会看见如下内容
"dependencies":
"material-ui": "^0.15.0",
"react": "^15.1.0",
"react-dom": "^15.1.0",
"react-tap-event-plugin": "^1.0.0"
,
"devDependencies":
"babel-core": "^6.9.1",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-1": "^6.5.0",
"webpack": "^1.13.1"
,

配置 Babel

在 package.json 中添加一个域”babel”，与之前的”dependencies” 同级。
"babel":
"presets": [
"es2015",
"react",
"stage-1"
],
"plugins": []


配置 Webpack

在项目目录新建一个webpack.config.js ，并写入：
var path = require('path');

module.exports =
entry: './entry.js',
output:
path: path.join(__dirname, '/dist'),
filename: 'bundle.js'
,
resolve:
extensions: ['', '.js', '.jsx']
,
module:
loaders: [
test: /\.jsx?$/, loaders: ['babel']
]



这里对Webpack的打包行为做了配置，主要分为几个部分：

entry：指定打包的入口文件，每有一个键值对，就是一个入口文件
output：配置打包结果，path定义了输出的文件夹，filename则定义了打包结果文件的名称
resolve：定义了解析模块路径时的配置，常用的就是extensions，可以用来指定模块的后缀，这样在引入模块时就不需要写后缀了，会自动补全
module：定义了对模块的处理逻辑，这里可以用loaders定义了一系列的加载器，以及一些正则。当需要加载的文件匹配test的正则时，就会调用后面的loader对文件进行处理，这正是webpack强大的原因。比如这里定义了凡是.js结尾的文件都是用babel-loader做处理，而.jsx结尾的文件会先经过jsx-loader处理，然后经过babel-loader处理。当然这些loader也需要通过npm install安装
plugins: 这里定义了需要使用的插件，比如commonsPlugin在打包多个入口文件时会提取出公用的部分，生成common.js

当然Webpack还有很多其他的配置，具体可以参照它的配置文档

配置 npm 脚本
现在我们还缺少一个构建脚本，编辑package.json 中的 “scripts” 域：
"scripts":
"build": "webpack",
"build-dev": "webpack -w -d"


接下来我们就可以在项目目录下使用简单的构建脚本了：

$ npm run build

如果是开发中，可以使用监听式的Webpack，差量打包，提升效率。

$ npm run build-dev

按照配置，打包生成的文件为 dist/bundle.js 。

至此，基本的环境已经配置完毕，我们来尝试一下调用Material-UI库。

代码编写

创建Web入口
在项目目录下创建一个index.html，写入：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>

编写Webpack入口
编辑项目目录下的 entry.js，写入：
import React from 'react';
import ReactDOM from 'react-dom';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';

const App = () => (
<MuiThemeProvider muiTheme=getMuiTheme()>
<AppBar title="Hello, Material-UI!" />
</MuiThemeProvider>
);

let app = document.createElement('div');
ReactDOM.render(<App />, app);
document.body.appendChild(app);

运行构建脚本：
npm run build

输出

现在可以看到目录下有了一个dist/bundle.js

打开index.html

成功

以上内容严重参考：http://blog.csdn.net/zccz14/article/details/51421324

浏览器自动刷新

如果需要一直输入 npm run build 确实是一件非常无聊的事情，幸运的是，我们可以把让他安静的运行，让我们设置 webpack-dev-server。
npm install --save webpack-dev-server

修改package.json文件的scripts：
"scripts":
"build": "webpack",
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"


当你在命令行里运行 npm run dev 的时候他会执行 dev 属性里的值。这是这些指令的意思：

webpack-dev-server - 在 localhost:8080 建立一个 Web 服务器
–devtool eval - 为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号
–progress - 显示合并代码进度
–colors - Yay，命令行中显示颜色！
–content-base build - 指向设置的输出目录
总的来说，当你运行 npm run dev 的时候，会启动一个 Web 服务器，然后监听文件修改，然后自动重新合并你的代码。真的非常简洁！

访问 http://localhost:8080 你会看到效果。

访问发现 “Cannot GET /” 错误

因为我们的index.html不是在build目录下

调整项目结构为

/app

main.js

component.js
/build

bundle.js (自动创建)

index.html
package.json
webpack.config.js

修改index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>

将entry.js移动到app/main.js

修改webpack.config.js，将入口文件设置为app/main.js，output设为build目录下的bundle.js,
并新增入口点，使得浏览器在文件修改之后会自动刷新。
var path = require('path');

module.exports =
entry: [
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8080',
path.resolve(__dirname, 'app/main.js')
],
output:
path: path.join(__dirname, '/build'),
filename: 'bundle.js'
,
resolve:
extensions: ['', '.js', '.jsx']
,
module:
loaders: [
test: /\.jsx?$/, loaders: ['babel']
]



运行命令 npm run dev, 然后访问http://localhost:8080/
看到之前同样页面，然后修改一下main.js
将
<AppBar title="Hello, Material-UI!" />

修改为
<AppBar title="Hello, World!" />

保存一下，再回到浏览器，会发现自动刷新了，内容也变成了Hello, World!

通过hprose-html5取数据

下面通过后端服务取数据，来替代Hello，World！

现已有hprose for php 构建的hprose服务，在远程服务器http://xx.xx.xx.xx:8080/
方法为getUserByID

修改index.html,引入hprose-html5.js，使用的是bootcss提供的cdn
<script type="text/javascript" src="http://cdn.bootcss.com/hprose-html5/2.0.8/hprose-html5.js"></script>

修改main.js
import React from 'react';
import ReactDOM from 'react-dom';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';

const muiTheme = getMuiTheme();

class App extends React.Component

constructor(props)
super(props);
this.state =
data:"none",
;
this.componentDidMount = this.componentDidMount.bind(this);


componentDidMount()
this.setState(data: "block");
let self = this;
let client = hprose.Client.create("http://xx.xx.xx.xx:8080/", ["getUserByID"]);
client.getUserByID(2, function(result)
console.log(result.player_name);
self.setState(data: result.player_name);
, function(name, err)
console.log(err);
);

render()
return (
<MuiThemeProvider muiTheme=muiTheme>
<AppBar title=this.state.data />
</MuiThemeProvider>
);



let app = document.createElement('div');
ReactDOM.render(<App />, app);
document.body.appendChild(app);

查看结果

从后端服务取到了数据“keyunqqq”

PS：React在ES6的实现中去掉了getInitialState这个hook函数，规定state在constructor中实现，如下：

Class App extends React.Component

constructor(props)

super(props);

this.state = ;

…


Babel的Blog上还有一种实现方法，即直接使用赋值语句：

Class App extends React.Component

constructor(props)

super(props);


state =
…


ES6中this需要手动绑定：
this.componentDidMount = this.componentDidMount.bind(this);

十大常用web前端UI组件库，赶紧收藏

今天主要介绍web前端常用的UI库，这些网站基本都是背靠互联网大厂，值得web前端开发者收藏，当然还是要多多学习使用。

Vant

一款有赞出品轻量、可靠的的移动UI组件库，目前支持 Vue2、Vue3、React，微信和支付宝小程序，并由社区团队维护 React 版本和支付宝小程序版本。
官网的文档清晰易懂，如果你熟悉vue.js的组件化开发，上手非常容易。

Ant Design

Ant Design是一套企业级 UI 设计语言和 React 组件库，提供了一套非常完整的组件化设计规范与组件化编码规范，能大幅提高了部分产品的设计研发效率及质量。

PC端组件库文档中的设计原则写的比较完善，并且每个组件都描述了何时使用，让其对组件有更深的认识，提供的设计资源也是非常完善，值得web前端企业开发者们收藏！

Ant Design Mobile

Ant Design 移动端设计规范，一个基于 Preact/React/React Native 的 UI 组件库。新版样式比较好，文档更新的也好用起来了

Bootstrap

Bootstrap 是全球受欢迎的前端开源工具库，Bootstrap4中文文档这个 UI 库来自 Twitter 的成员，拥有了box-flex布局等更新，但是组件比较少，特点是提供了很多工具类；需要引入 JQuery，如果有自己特殊的需求，就需要重新定制样式。

Flat UI是基于Bootstrap做的Metro化改造，由Designmodo提供。Flat UI包含了很多Bootstrap提供的组件，但是外观更加漂亮。

Layui

经典开源模块化前端 UI 框架(官方文档镜像站)，JQuery 时代很好的 UI 库，是一套开源的 Web UI 解决方案,其内部采用的是自身经典的模块化规范,并遵循原生 HTML/CSS/JS 的开发方式,极易上手,拿来即用。

ElementUI

出自饿了么前端团队，学 Vue 的童鞋们必用的一款 UI 库，采用 Vue 2.0 作为基础框架实现的组件库，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助网站快速成型，也支持有 Angular 和 React 的版本，Element Plus 支持 Vue3。

semi design

出自字节跳动抖音前端与 UED 团队，是一款包含设计语言、React 组件、主题等开箱即用的中后台解决方案，可用于快速搭建美观的 React 应用。

Taro UI

出自京东凹凸实验室，基于 Taro 的多端 UI 组件库，提供友好的 API，可灵活的使用组件，一套组件可以在 微信小程序、H5、ReactNative 等多端适配运行。

Vuetify

Vuetify 是建立在Vue.js之上的完备的界面框架。 该项目的目标是向开发人员提供他们积累的丰富且吸引用户体验所需的工具。 Vuetify从一开始就设计为易于学习的并且拥有来自 Material设计规范的数百个精心设计组件。每一个组件都经过精心设计，具有模块化、响应式和优秀的性能。

WeUI

WeUI ——微信官方的 UI 库，一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。

以上是关于如何评价 React 实现的前端 UI 库 material-ui的主要内容，如果未能解决你的问题，请参考以下文章

想做前端开发，试试这款React组件库

React UI组件库——如何快速实现antd的按需引入和自定义主题

十大常用web前端UI组件库，赶紧收藏

如何评价饿了么开源的 Vue 组件库 Mint UI

作为初级前端我知道的插件(React版)

2021年的前端框架选择 Angular vs React vs Vue