如何评价 React 实现的前端 UI 库 material-ui
2016-12-27 · 做真实的自己 用良心做教育
千锋教育
千锋教育专注HTML5大前端、JavaEE、Python、人工智能、UI＆UE、云计算、全栈软件测试、大数据、物联网+嵌入式、Unity游戏开发、网络安全、互联网营销、Go语言等培训教育。
向TA提问
关注
![]()
展开全部
前端通过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);
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);
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
