create-react-app + reactrap 构建简单管理页面

想给自己的小程序博客构建一个后台管理界面,第一考虑是用react+antd。但是一想,自己的需求很简单,需要的组件也很少,简单的几个form界面,antd的话太重了,部署到1m小水管服务器上加载速度势必很慢。第二考虑是不用ui组件,只用react,但又受不了自己的css还有审美太烂。综合之下还是用bootstrap,怎么写也难看不到哪去,比antd稍微轻量一点。react版的bootstrap叫reactrap。
https://reactstrap.github.io/
https://www.html.cn/create-react-app/docs/getting-started/


用createreactapp创建项目

npx create-react-app mini-blog-admin
cd mini-blog-admin
npm start

添加路由

npm install --save react-router-dom

添加reactrap

npm install --save reactstrap bootstrap@4

使用

在 src/index.js 文件的开头导入 Bootstrap CSS 和可选的 Bootstrap 主题 CSS :
import 'bootstrap/dist/css/bootstrap.css';

在 src/App.js 文件或自定义组件文件中导入所需的 reactstrap 组件:
import { Button } from 'reactstrap';

react-router示例
https://reacttraining.com/react-router/web/example/basic

可以开动写代码了

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容