开箱即用的React前端框架——ReactAdmin

介绍

ReactAdmin是一个Github上免费开源的前端框架（不是组件库，也不是模板，它是一个框架），采用es6、React和Material Design构建基于Rest/GraphQl API的Web应用程序。在React上star数超过8k。

Github地址

https://github.com/marmelab/react-admin

ReactAdmin特点

• 适用于任何后端服务
• 基于material-ui, redux, redux-form, redux-saga, react-router, recompose, reselect 等
• 性能极佳，渲染速度快
• 完整的文档
• 数据验证
• 国际化（使用了i18n，一个react专用国际化插件，你可以加入到你现在的react项目中）
• 支持任何身份验证授权(RESTAPI，OAuth，BasicAuth等等)
• 完整的数据功能（排序、分页、筛选等）
• 自定义类型验证
• 支持丰富的表单布局(简单的、选项卡等)
• 自定义动作
• 用于各种数据类型组件库：bool、数字、富文本组件等
• 所见即所得的编辑
• 自定义仪表盘、菜单、布局
• 易扩展和重写
• 高度可定制的接口
• 可连接多个后端
• 可以放到任何一个其他的react应用程序中

以上翻译自Github，由于本文英文水平有限，如有解释不够清晰的，请参考github或文档

优势

ReactAdmin不是个UI组件库，它是一个前端框架，因此你基本上基本上只要按照官网的文档进行一些配置等然后在其基础上开发自己的应用程序即可，可谓开箱即用，意识就是都给你集成好了。

安装使用

你可以直接使用以下命令进行安装（这是安装react-admin及所有的依赖）

npm install react-admin

#or
yarn add react-admin

下面我们看一下官网提供的一个最简单的示例，你可以在它的主仓库中获取

我们进入到simple中，大致看一下代码和目录结构

我们安装一些依赖然后启动

yarn

npm start

成功后打开浏览器，这是使用react-admin最简单的一个例子

ReactAdmin是如何与后台数据交互的

一图了解

文档

由于ReactAdmin是一个非常复杂的框架，你可以参考提供的文档，我这里就不详细介绍了，感兴趣的可以直接看文档，文档是英文的，所有的说明都在文档中。

https://marmelab.com/react-admin/

总结

ReactAdmin它是一个集合，它将一些前端开发所需要的东西都集成了进来，然后做好，我们直接使用即可，不仅仅适合个人学习，也适合通过它来构建企业级的应用。我们不仅仅是拿过来直接用，我们可看一看别人是怎么实现这样的一个框架的，从源码去学习会更快的提升自己的水平，希望对你有所帮助！

文章来源: https://www.toutiao.com/group/6697883041773126156/