Material-UI入门文档

文档官网：http://www.material-ui.com/

实在没找到中文的，只好看英文的了。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的包，然后就可以使用啦~

如果需要了解更多node，可以看这个博客和这个视频。

  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/988941injectTapEventPlugin();</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翻译。