简介
Material-UI是一组实现了谷歌Material Design设计原则的React组件集合，江湖传言使用Material-UI可以使我们的页面颜色更鲜艳，动画效果更突出（符合Material Design的设计风格），那么接下来就由我来带大家围观下吧~
What is Material Design
究竟什么是Material Design呢？
“设计是创造的艺术，我们的目标就是要满足不同的人类需要。人们的需要会随着时间发展，我们的设计，实践，以及理念也要随之提升。我们在自我挑战，为用户创造了一个可视化语言，它整合了优秀设计的经典原则和科学与技术的创新。这就是Material Design。” —— 关于Material Design，其亲爹谷歌是这么介绍的。
Material Design的设计风格如下图，其核心思想就是把物理世界的体验带进屏幕。去掉现实中的杂质和随机性，保留其最原始纯净的形态、空间关系、变化与过渡，配合虚拟世界的灵活特性，还原最贴近真实的体验，达到简洁与直观的效果。
Material Design的设计原则如下：
- 实体感就是隐喻（通过系统的动效和合理的空间利用去打造与众不同的触感）；
- 鲜明、形象、深思熟虑（制定了基础的平面设计规范，提升用户体验）；
- 有意义的动画效果（合理的有意义的动效可以吸引用户的注意力，并且维持整个系统的连续性体验）；
对于Material Design就简单介绍到这里，由于本人不是做设计的，就不搁这白话了，全凭大家用心去感受，如果大家对Material Design感兴趣可以关注官方的文档及规范。
麻溜滴，上DEMO
在我们的开发环境配置过程中，我们会用到node.js，so，没有npm的同学请自行装之。
请带上你的依赖包
首先在我们的A、B、C、D、E、F、G任意盘上创建demo项目文件夹，执行命令如下：
# 创建demo项目文件夹
mkdir material-ui
cd material-ui
# 初始化package.json文件
npm init
接下来安装依赖包，拥为Material-UI在编写时用到了ES2015的一些特性，所以在配置过程中我们会用到Babel( 一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境中执行)。我们还会用到webpack（作为模块加载器和打包工具），执行命令如下：
# 安装Material-UI部分
npm install --save material-ui
# 安装React部分
npm install --save react react-dom react-tap-event-plugin
# 安装Babel转换器核心部分
npm install --save-dev babel-core babel-loader
# 安装Babel转换器的三个额外配置：ES2015（ES6），React，Stage1（ES7）
npm install --save-dev babel-preset-es2015 babel-preset-react babel-preset-stage-1
# 安装webpack
npm install --save-dev webpack
配置Babel
上述过程如果顺利完成的话，在 package.json 中添加一个对象babel，与"dependencies"保持同级。如果不顺利的话，那么恭喜你，请再来一遍上述过程，与此同时面向西方开启跪拜模式吧。。。
package.json内容如下：
"babel" : {
"presets" : [
"es2015",
"react",
"stage-1"
],
"plugins": []
}
配置webpack
在我们项目根目录下新建webpack的配置文件webpack.config.js，其内容如下：
var path = require('path');
var webpack= require('webpack');
module.exports = {
entry: './entry.js', // 入口文件
output: {
path: path.join(__dirname, '/dist'), // 打包路径
filename: 'bundle.js' // 打包文件名称
},
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [ {
test: /\.jsx?$/,
loaders: ['babel']
} ]
}
}
写一个AppBar
在项目根目录下新建index.html，并引入我们生成的bundle.js，内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script src="dist/bundle.js"></script>
</body>
</html>
创建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 World!" />
</MuiThemeProvider>
);
ReactDOM.render(<App />, document.getElementById('app'));
在命令行中输入webpack，执行打包操作，执行成功后，命令显示如下：
现在可以看到目录下有了一个dist/bundle.js，打开index.html，效果如图所示：
至此，我们利用Material-UI的AppBar组件实现了一个简单的页面，除此之外Material-UI还实现了很多实用的组件，并且支持我们修改组件的主题，内部样式、颜色等定制化操作。到这里大家应该对Material-UI有了初步的了解，如果想深入了解，还请参考其官网。
