免费 React 仪表板 - 材料仪表板设计

你好，程序员们，

本文介绍了 Creative-Tim 公司根据 MIT 许可证发布的开源React Dashboard。Creative -Tim 公司为全球众多开发者提供了众多免费产品，并积极提供支持和版本控制。这款React Dashboard 的设计灵感源自 Google 的 Material Design，您可以从官方产品页面或 Github 直接下载。基于这种宽松的许可证，其文件可用于无限量的业余爱好和商业产品。感谢您的阅读！

谢谢！内容由AppSeed - App Generator提供。

React Dashboard Material - 产品页面
React Dashboard Material PRO - 更多页面、组件
免费React 仪表盘，一篇 Dev.to 热门文章

什么是React

给新手简单介绍一下：React是一个用于快速构建用户界面的 JavaScript 库。这个著名的 JS 库可以帮助开发者使用一些小型且独立的代码片段（称为“可重用 UI 组件”）来构建复杂的 UI，这些代码片段可以呈现随时间变化的数据。要开始使用 React，请访问以下资源：

React - 官方项目网站
React 简介- 适合初学者的优秀教程
ReactJS - 快速指南，由 TutorialsPoint 发布

React 仪表板 - 材料设计

UI 供应商备注- Material Dashboard React是一款免费的 Material-UI 管理界面，其全新设计灵感源自 Google 的 Material Design。我们非常高兴地通过一套易于使用且美观的组件来展现我们对 Material Design 概念的理解。Material Dashboard React 基于广受欢迎的 Material-UI v4.1.0 框架构建。

Material Dashboard React充分利用了光线、表面和运动。其整体布局类似于多层纸张，因此深度和顺序清晰可见。导航主要位于左侧边栏，内容位于主面板的右侧。

Material Dashboard React 为侧边栏和卡片标题提供了 5 种颜色滤镜选择（蓝色、绿色、橙色、红色和紫色），并可选择在侧边栏上使用背景图像。

React Material - 编译源代码

要在本地编译并启动项目，我们需要 NodeJS 和可选的 GIT，以便从公共存储库Material Dashboard React下载源代码。安装 NodeJs 非常简单，只需访问NodeJS 官方网站，下载并执行适用于您操作系统的安装程序即可。

编译 React 代码库

$ # Get the code
$ git clone https://github.com/creativetimofficial/material-dashboard-react.git
$ cd material-dashboard-react
$
$ # Install modules
$ yarn
$
$ # Start the app (development mode)
$ yarn start

如果一切顺利，这个 React 模板应该可以在浏览器中启动并运行。

为了更好地理解代码库结构，我将在下面列出相关文件和目录的 ASCII 图表：

material-dashboard-react
.
├── README.md
├── bower.json
├── gulpfile.js
├── package.json
├── documentation
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── index.js
    ├── routes.js
    ├── assets
    │   ├── css
    │   │   └── material-dashboard-react.css
    │   ├── img
    │   │   └── faces
    │   └── jss
    │       ├── material-dashboard-react
    │       │   ├── components
    │       │   ├── layouts
    │       │   └── views
    │       └── material-dashboard-react.js
    ├── components
    │   ├── Card
    │   │   ├── Card.js
    │   │   ├── CardAvatar.js
    │   │   ├── CardBody.js
    │   │   ├── CardFooter.js
    │   │   ├── CardHeader.js
    │   │   └── CardIcon.js
    │   ├── CustomButtons
    │   ├── CustomInput
    │   ├── CustomTabs
    │   ├── Footer
    │   ├── Grid
    │   │   ├── GridContainer.js
    │   │   └── GridItem.js
    │   ├── Navbars
    │   │   ├── AdminNavbarLinks.js
    │   │   ├── Navbar.js
    │   │   └── RTLNavbarLinks.js
    │   ├── Sidebar
    │   │   └── Sidebar.js
    │   ├── Table
    │   │   └── Table.js
    │   ├── Tasks
    │   │   └── Tasks.js
    │   └── Typography
    │       ├── Danger.js
    │       ├── Info.js
    │       ├── Muted.js
    │       ├── Primary.js
    │       ├── Quote.js
    │       ├── Success.js
    │       └── Warning.js
    ├── layouts
    │   ├── Admin.js
    │   └── RTL.js
    └── views
        ├── Dashboard
        ├── Icons
        ├── Maps
        ├── Notifications
        ├── RTLPage
        ├── TableList
        ├── Typography
        └── UserProfile

React 仪表板材料 - 页面

RTL 支持 - 对于需要阿拉伯语支持的项目非常有用

Google 地图页面

用户资料页面

感谢阅读！更多资源请访问：

Creative-Tim 提供的更多React 模板
使用React Dashboards的精选列表- 博客文章

鏂囩珷鏉ユ簮锛�https://dev.to/sm0ke/free-react-dashboard-material-dashboard-design-6i4