1最流行的开源React UI组件库

material-ul（国外）

ant-design（国内蚂蚁金服 http://design.alipay.com ）

2 安装

npm install antd

3 成品图

4 搭建后台模板

都是血与泪，又是2.0和4.0版本不兼容问题,这里明哥先简单的说一下2.0版本的写法思路

当 URL 为 / 时，我们要渲染一个在 App 中的组件。不过在此时，App 的 render 中的 this.props.children 还是 undefined。这种情况我们可以使用 IndexRoute 来设置一个默认页面。

2.0版本的index.js文件

现在，App 的 render 中的 this.props.children 将会是{MyInteroduce} 这个元素。这个功能就类似 Apache 的DirectoryIndex 以及 nginx的 index指令（上述功能都是在当请求的 URL 匹配某个目录时，允许你制定一个类似index.html的入口文件）

然后在App模板中会用 {this.props.children} 去获取到用户点击的路由所指向的模板中所有子节点，从而实现页面切换功能

剧本是很完美的，但是在4.0版本中，首先2.0中的<router>已经被4.0版本中的 <BrowserRouter>和<HashRouter>所取代，同时<HashRouter>和<BrowserRouter>中只支持一个子元素，这时候我们就可以转换思路在<BrowserRouter>中默认加载<App>组件，同时地址栏访问 localhost：3000 的时候默认匹配 path="/" 加载{MyIntroduce}模板，使app组件中的 this.props.children属性变为MyIntroduce