React+Bootstrap实现精简版微博个人中心-UI部分

首先引入 Bootstrap

注:此处未使用npm来管理Bootstrap

在官网下载Bootstrap最新版,解压后复制dist 目录下所有文件到 assets 文件夹下。即完成了Bootstrap与React 的整合。

那么如何在React中使用Bootstrap呢,其实使用起来比导入更容易

只需要在 组件中 导入 bootstrap,之后只需要在组件的 className 里编写 bootstrap 的 class名

React使用模块化的方式去构建WEB前端,所以我们首先来拆分模块。

在这里我们简单的将页面拆分为 头部,用户资料,和博文列表,而没有考虑 view复用等优化技术,有兴趣的读者可自行研究。

一个完整的React View 只需要继承于 React.Component 实现 render 方法, 即可完成页面展示 。 关于 html+css 技术在此不讨论。 读者请自行学习。

按照模块划分的结构编写完view代码后, 使用 npm run build 即可生成生产环境代码

源代码已上传百度云

https://pan.baidu.com/s/1eRM46AY

在线演示地址

http://react.file.alimmdn.com/weibo/index.html

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180604A0L7MH00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券