react 组件库（怎样使用React进行组件库的开发）
本文目录
- 怎样使用React进行组件库的开发
- 如何评价 React 实现的前端 UI 库 material-ui
- 如何用原生的react，webpack，es6来使用蚂蚁金服的ant design组件库
- 网页前端常用的库或框架有哪些
怎样使用React进行组件库的开发
var navBar = React.createClass({
render: function (){
return 《ul》{nav_li}《/ul》
}
})12345
createClass创建react组件对应的类，描述组件的各种行为，render函数是必须实现的，表示渲染什么内容
下面来看我们的代码，接着前面封装导航栏组件
nav.js
// 创建组件
var NavBar = React.createClass({
liClick: function () {
alert(’组件’);
},
render: function(){
return 《ul》《li》《a href=““》最新电影《/a》《/li》《li》《a href=““ onClick={function(){alert(’组件’)}}》最新评论《/a》《/li》《/ul》
}
});
ReactDOM.render(
// 使用组件
《NavBar /》,
document.getElementById(“navbar“)
);12345678910111213141516
NavBar就是我们定义的组件，使用是方式是《NavBar /》
这里我暂时不编译，在页面上引用nav.js
如何评价 React 实现的前端 UI 库 material-ui
非常厉害，做一些功能为主，不需要过多品牌调性的 WebApp
只需要前端+交互就可以快速构建做出非常不错的产品
（icon还是有点点难度，有设计比较专业的人员跟着做产品的质量会更加“产品级”一些）
框架用了很多 MD 的视觉元素，但是还是只是“看着像”，交互，动画世界观之类的实现距离最理想的 MD 还是有差距，不过基本感觉可以忽略不计。
非要挑刺的话，就是 Menu 部分的动画设计感觉有点粗糙，做得不够好（MD 的世界观，所有东西的诞生都是“扩散”出来，而不是“缩放”出来的，还有就是先“慢_快”的缓动做得还是差一点点）
如何用原生的react，webpack，es6来使用蚂蚁金服的ant design组件库
1.准备:
npm安装以下组件
a.安装react/antd:
npm install react react-dom antd --save
b.安装webpack/less:
npm install webpack less --save-dev
webpack根据需要选择使用-g安装
c.安装babel-loader以及其他相关package:
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev
d.选择安装style-loader/css-loader
npm install style-loader css-loader --save-dev
2. 配置webpack.config.js
具体配置可以查看webpack提供的例子，主要依赖的是babel-loader
babel-loader上也有webpack.config.js应该如何编写的例子，传送门: babel-loader
3. 编写我们的文件(例如: demo-antd.jsx)
只使用了antd提供的Button组件。只使用了antd提供的Button组件。
ps: 对比
import { Button } from ’antd’;
和
import Button from ’antd/lib/button’;
后者不会将antd中所有的内容都引入，如果你只是需要Button这么一种组件的话，推荐使用后一种写法。
4. 执行构建
webpack ./demo-antd.jsx demo-antd-bundle.js
将生成demo-antd-bundle.js文件
5. 在页面中引入bundle文件(demo-antd-bundle.js)
执行到这一步，在浏览器中查看页面可以应该可以看到一个原生样式的button元素，因为antd并没有将样式使用内联style的方式写入js文件中。
这里我们暂时将问题一搁置，来看看问题二：组件库的内部机制。
因为没有深入去看过antd的源代码，没法详细说明antd的在代码编写上的一些....怎么说，就是『代码为什么这样写』这个问题，有兴趣的话，可以去查看源码，正如 @陈吉浩 所说，查看github上的代码比npm下载后的代码更舒服。
网页前端常用的库或框架有哪些
bootstrap是twitter出的一款不错的UI框架，或者与其说是框架不如说是类库（lib），当然这里边牵扯到一个“究竟什么是框架什么是类库？”的问题，我们暂时不谈。毕竟是有大公司背景的代码堆，我觉得没什么“落伍”可言。
angular是前两年之内突然火得一塌糊涂的一个fe框架，这个我觉得可以算的上是真正意义上的框架了，MVVM双向绑定，包括它拥有足够完善的社区、生态，甚至chrome上都有很多好用的相关插件（这一点可以说是占了google出品的光），比较完整的大型项目都是可以考虑引入的。但如果你的网站只是做一些轻量级的东西，杀鸡焉用宰牛刀吧我觉得。
backbone主要针对的MVC中的M层，至少我是这么理解的。对UI层它几乎没什么太多的限制，一方面给出了coder自由度进行发挥，另一方面也等于在这方面框架本身对开发没提供什么太大的帮助。我觉得这更像是一个高手向的框架，另外对于underscore前端模板那一套东西，说实话作为一名php java啥都能写的FE我始终觉得这套东西有那么一种纯JS工程师的一厢情愿的意味。这是个人看法了，不一定准确，况且有人会搬出ajax动态渲染时 前端模板的作用来反驳我，别急着反驳，至少往下看完我说的话。
相比之下，react可以说是一个在MVC中V层做的十分出色和新颖的框架了，独特的jsx编译机制就已经让你的代码变得高大上了，我是觉得这个类库在UI层做的更彻底更专业，或者说让FE的代码更专业了。更何况，react比angular更年轻，而且同样拥有大公司背景，react native一出更是让JS工程师的地位取得了革命性的提升，（不要跟我提phonegap，用过两个东西后你会明白，react打包的app性能甩phonegap几条街没问题）。另外既然楼主提到了之前的网站是bootstrap，不妨可以看一看react-bootstrap这个东西，或许这就是你想要的。
更多文章：
majority of（the majority of 和 a majority of的区别以及用法例句）
2026年10月11日 07:40
2026年10月11日 07:20
2026年10月11日 06:30
2026年10月11日 06:20
2026年10月11日 05:40
another time（another time和other time的区别）
2026年10月11日 05:00
2026年10月11日 04:50
2026年10月11日 03:00
2026年10月11日 02:40
2026年10月11日 02:20
