react-admin(尝试一下)
react-admin system solution
文档地点：wiki
题目和计划汇总：issue
更新日记迁移至CHANGELOG.md😁(重要！关于相识项目部份功用和代码很有效！)
cli 命令行脚手架装置和运用 react-admin 🔥
运用 react-admin-creator 疾速装置和下载 react-admin 模板来开辟项目：
npm i -g react-admin-creator
react-admin-creator myapp媒介
网上react背景治理开源免费的完全版项目比较少，所以应用空余时候集成了一个版本出来，已放到GitHub
启动和打包的时候都稍长，请耐烦守候两分钟
依靠模块
<span style=”color: rgb(184,49,47);”>项目是用create-react-app建立的，重要照样列出新加的功用依靠包</span>
<span style=”color: rgb(184,49,47);”>点击称号可跳转相干网站😄😄</span>
- react
- react-router(<span style=”color: rgb(243,121,52);”>react路由，4.x的版本，假如还运用3.x的版本，请切换分支（ps:分支不再保护）</span>)
- redux(基本用法，然则封装了通用action和reducer，demo中重要用于权限掌握（ps：现在能够用16.x的context api替代），能够简朴相识下)
- antd(<span style=”color: rgb(243,121,52);”>蚂蚁金服开源的react ui组件框架</span>)
- axios(<span style=”color: rgb(243,121,52);”>http要求模块，可用于前端任何场景，很壮大👍</span>)
- echarts-for-react(<span style=”color: rgb(243,121,52);”>可视化图表，他人基于react对echarts的封装，充足用了</span>)
- recharts(<span style=”color: rgb(243,121,52);”>另一个基于react封装的图表，个人以为是没有echarts好用</span>)
- nprogress(<span style=”color: rgb(243,121,52);”>顶部加载条，蛮好用👍</span>)
- react-draft-wysiwyg(<span style=”color: rgb(243,121,52);”>他人基于react的富文本封装，假如找到其他更好的能够替代</span>)
- react-draggable(<span style=”color: rgb(243,121,52);”>拖拽模块，找了个简朴版的</span>)
- screenfull(<span style=”color: rgb(243,121,52);”>全屏插件</span>)
- photoswipe(<span style=”color: rgb(243,121,52);”>图片弹层检察插件，不依靠jQuery，照样蛮好用👍</span>)
- animate.css(<span style=”color: rgb(243,121,52);”>css动画库</span>)
- react-loadable(代码拆分，按需加载，预加载，样样都行，详细见其文档，引荐运用)
- redux-alita 极简的redux2react东西
- 其他小细节省略
功用模块
<span style=”color: rgb(184,49,47);”>备注：项目只引入了ant-design的部份组件，其他的组件antd官网有源码，能够直接复制到项目中运用，后续有时候补上悉数组件。</span>
<span style=”color: rgb(184,49,47);”>项目运用了antd的自定义主题功用–>黑色，若想替代其他色彩，详细操纵请检察antd官网</span>
<!–more–>
首页
- 完全规划
- 换肤(全局功用，临时只完成了顶部导航的换肤，后续加上其他模块)
导航菜单
- 顶部导航(菜单伸缩，全屏功用)
- 左侧菜单(增添滚动条以及适配路由的active操纵)
UI模块
- 按钮(antd组件)
- 图标(antd组件并增添彩色脸色符)
- 加载中(antd组件并增添顶部加载条)
- 关照提示框(antd组件)
- 标签页(antd组件)
- 轮播图(ant动效组件)
- 富文本
- 拖拽
- 画廊
动画
- 基本动画(animate.css一切动画)
- 动画案例
表格
- 基本表格(antd组件)
- 高等表格(antd组件)
- 异步表格(数据来自掘金酱的接口)
表单
- 基本表单(antd组件)
图表
- echarts图表
- recharts图表
页面
- 登录页面(包含GitHub第三方登录)
- 404页面
功用截图
首页
按钮图标等
轮播图
富文本
拖拽
画廊
动画
表格
表单
图表
页面
菜单拖拽
代码目次
+-- build/ ---打包的文件目次
+-- config/ ---npm run eject 后的设置文件目次
+-- node_modules/ ---npm下载文件目次
+-- public/
| --- index.html ---首页进口html文件
| --- npm.json ---echarts测试数据
| --- weibo.json ---echarts测试数据
+-- src/ ---中心代码目次
| +-- axios ---http要求寄存目次
| | --- index.js
| +-- components ---形形色色的组件寄存目次
| | +-- animation ---动画组件
| | | --- ...
| | +-- charts ---图表组件
| | | --- ...
| | +-- dashboard ---首页组件
| | | --- ...
| | +-- forms ---表单组件
| | | --- ...
| | +-- pages ---页面组件
| | | --- ...
| | +-- tables ---表格组件
| | | --- ...
| | +-- ui ---ui组件
| | | --- ...
| | --- BreadcrumbCustom.jsx ---面包屑组件
| | --- HeaderCustom.jsx ---顶部导航组件
| | --- Page.jsx ---页面容器
| | --- SiderCustom.jsx ---左侧菜单组件
| +-- style ---项目的款式寄存目次，重要采纳less编写
| +-- utils ---东西文件寄存目次
| --- App.js ---组件进口文件
| --- index.js ---项目的团体js进口文件，包含路由设置等
--- .env ---启动项目自定义端口设置文件
--- .eslintrc ---自定义eslint设置文件，包含增添的react jsx语法限定
--- package.json装置运转
1.下载或克隆项目源码
2.yarn 或许 npm装置相干包文件(起首引荐运用yarn，国内发起增添淘宝镜像源，不然很慢，你懂的😁)
有些老铁碰到运转时报错，起首确定下是否是最新稳定版的nodejs和npm或许yarn(引荐用yarn)，牢记不要用cnpn
// 首引荐运用yarn装包
yarn or npm i3.启动项目
yarn start or npm start4.打包项目
yarn build or npm run buildQ&A(点击题目检察答案)
1.create-react-app 打包项目run build 增添进度条信息?
2.接口跨域了，怎样在当地开辟时设置代办?
3.在运用hashRouter的情况下怎样完成相似锚点跳转?
4.怎样增加多页面设置?
5.路由传参数接问号怎样传?
6.怎样兼容IE浏览器?
末端
该项目会不定时更新，后续时候会增加更多的模块
迎接和谢谢人人PR~~👏👏
如有题目，可加QQ群与我交换
- 1群：264591039（已满）
- 2群：592688854（已满）
- 3群：743490497 (已满)
- 4群：150131600
假如对你有协助，给个star哟~~❤️❤️❤️❤️
