Material-UI入门文档
臧烨烁
实在没找到中文的，只好看英文的了。poor......现在的状态是未完待续...
入门：
1.前期准备
学Material UI之前先了解React，Material UI是React的一个组件，所以需要了解如何在网页中使用React的组件。
如果已经熟悉了单页面网站和Node，可以跳过这一步直接去看2.安装。
不然则介绍下单页面网站(SPA)和Node，这些对于菜鸟前端和只做过简单的html+js+css的人来说，还是很有用的。
单页面网站（single page applications）
很长(口胡？)一段时间以来，网站一直是用html构建静态页面，css写样式，js增添一些动画效果或用于支持用户交互。大多数客户端（client）的交互，特别是数据上的交互，需要走过一条完整的流程：数据从客户端发送到处理它的服务器，然后处理结果再发送到客户端。而且大多数这样的交互一般都会堵住（blocking）。这给客户端带来了巨大的压力，忙于处理这些交互的客户端根本不能与用户交互，用户只能等着这些数据都搞定了才能操作，这不友好！
异步服务器调用的出现（ajax）使得客户端可以边做别的事边和服务器数据交互。但是说到底还是需要让数据走这个流程，而且网页也并不如安装的应用来得流畅。为了解决这一困境，SPAs就被折腾出来了。
SPA就是单页面的网站，用户交互也只是动态更新该页面内容。整个网站在一开始就加载所有的html，css，js。大部分的处理交互的逻辑都写在js上。这一切构成了一个流畅、灵敏、迅速的网站。这个技术在过去十年中发展较好，许多流行的js框架都对它比较友好（This web programming architecture has gained tremendous traction in the last decade, with many popular JavaScript presentation frameworks geared towards SPAs）。如：
Angular
Ember
Backbone
React.
有些工具能帮我们将单页面内的东西分成几个模块，这样写和引用都会很方便，比如node。
Node
node的核心是一个c语言写的程序，能让js在你的shell上运行（是的，你的terminal，而非浏览器）。为了做到这一点，它用的是chrome v8的js引擎。因此，node基本上是一个运行环境。
node刚刚被创建的时候，主要是针对在js中开发web server，然而js的使用历来被限制在客户端中。但是随着时间的推移，网页的开发者们意识到了使用Node管理依赖的好处，然后造出了：
Grunt
Glup
Browserify
Webpack
随着Node的流行，独立开发者和组织们几乎用script（用node跑的）写任何与web相关的东西。当时的“custom node script”这个Node库给大家带来了各种便利，它开放给了开发者，大家都能上传自己的node Script，也能下载使用它。
node package manager（npm）做的就是这个事儿，它是一个命令行工具，可以用来管理依赖的包。比如咱们的Material-UI就可以作为一个package被npm管理。这就是说，可以在文件目录下使用npm install material-ui导入material-ui的包，然后就可以使用啦~
2.安装
material-ui可以通过npm package的方式安装。
react-tap-event-plugin
现暂时使用react-tap-event-plugin 监听touch/tap/clickevents这些事件，如果React官方出了解决方案，这个就会被移除。但是还没出的时候只能先用这个，要在程序开始前确认注入了这个插件。
<span style="font-family:Microsoft YaHei;font-size:14px;"><span style="font-size:14px;">import injectTapEventPlugin from 'react-tap-event-plugin';
// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();</span></span>
react-tap-event-plugin提供onTouchTap()给所有React组件。这在material-ui中是onclick()的替代，对于button特别有效，对移动端也友好。
Roboto字体
material-ui默认roboto字体，所以要保证这个被包含在项目里，这么做到。
ES编译
这篇文档的栗子们用的是es规范的stage-1 feature，如果要在自己的环境下跑这些栗子，要保证插件。怎么安装babel插件。
3.用法
从v0.15.0开始，material-ui的组件需要一个主题（theme），最快捷的方式是用MuiThemeProvider将主题注入程序，然后就可以用文档内的任何组件啦~
一个栗子：
./App.js
<span style="font-family:Microsoft YaHei;font-size:14px;">import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MyAwesomeReactComponent from './MyAwesomeReactComponent';
const App = () => (
<MuiThemeProvider>
<MyAwesomeReactComponent />
</MuiThemeProvider>
);
ReactDOM.render(
<App />,
document.getElementById('app')
);</span>./MyAwesomeReactComponent.js
<span style="font-family:Microsoft YaHei;font-size:14px;">import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
const MyAwesomeReactComponent = () => (
<RaisedButton label="Default" />
);
export default MyAwesomeReactComponent;</span>
请参阅每个组件的文档，看看如何导入它们。
注意，在上面的栗子中，使用
import RaisedButton from 'material-ui/RaisedButton';
代替
import {RaisedButton} from 'material-ui';
这样能构建更快，构建输出的信息更精简，对于Material-ui的impotr具体映射，详见material-ui的npm package根目录下的/index.js。
定制
Material-ui有默认的主题，想改变组件的造型也很简单，有两种方式：
使用内嵌样式，重写样式
4.服务器渲染
如果使用Material-ui在在服务器端渲染，那客户端和服务器的环境必须一样。
Autoprefixer(自动前缀)
（它解析css文件并添加浏览器前缀到css规则。）
首先，material-ui需要使用相同的自动前缀补足的浏览器前缀（user agents）。在客户端里默认是navigator.userAgent，但是服务器端，navigator是undefined，所以需要自己提供。userAgent可以是如下值：
一个很普通的浏览器前缀（user agent），比如：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.82 Safari/537.36
'all'，所有前缀都添加
false，禁用prefixer
我们依靠muiTheme context 将浏览器前缀添加到所有组件，栗子：
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {green100, green500, green700} from 'material-ui/styles/colors';
const muiTheme = getMuiTheme({
palette: {
primary1Color: green500,
primary2Color: green700,
primary3Color: green100,
},
}, {
avatar: {
borderColor: null,
},
userAgent: req.headers['user-agent'],
});
class Main extends React.Component {
render() {
return (
<MuiThemeProvider muiTheme={muiTheme}>
<div>Hello world</div>
</MuiThemeProvider>
);
}
}
export default Main;
process.evn.NODE_ENV
process.evn.NODE_ENV也需要服务器端和客户端一致，不然校验和会不匹配。为了保证我们的style只转换一次，我们给每个style都增加了一个属性：process.env.NODE_ENV !== 'production'
5.栗子
这里有两个demo，他们可以在example folder中找到，这两个栗子是比较基础的，示例了怎么把material-ui的组件用到自己的项目里。
第一个项目使用browserify构建模块，使用gulp将js任务自动化。
第二个项目用webpack构建模块与项目搭建。
这整个文档的栗子也在库里，不过是一个略复杂的项目，也是用webpack，还包含了每个material-ui的组件的实例。
查看文档文件夹可以看到构建说明。
----------------------------------------------------------------------------------------------------------------------------------------------------
到这里“入门”就结束了，之后的部分有定制（主题，内联样式，颜色）和组件。这些在官网直接能看到组件效果，所以这个译文肯定没有官网好。非常推荐直接去官网看。
官网地址：http://www.material-ui.com/
如果说真的看那些英文很头疼，可以用翻译器把整个网页翻译后再看，因为描述简短，页面的翻译效果还是可以的，推荐google翻译。
类似资料：