React-Admin 项目教程

1. 项目的目录结构及介绍

React-Admin 项目的目录结构如下：

react-admin/
├── examples/          # 示例项目
│   ├── demo/          # 完整的演示示例
│   ├── simple/        # 简单的博客示例
│   └── ...            # 其他示例
├── src/               # 源代码
│   ├── core/          # 核心模块
│   ├── ui/            # UI 组件
│   └── ...            # 其他模块
├── package.json       # 项目依赖和脚本
├── README.md          # 项目介绍文档
└── ...                # 其他文件和文档

目录结构介绍

• examples/: 包含多个示例项目，每个示例项目都有其独立的目录结构和设置文件。
  • demo/: 一个完整的演示示例，展示了 React-Admin 的多种功能。
  • simple/: 一个简单的博客示例，适合初学者学习。
• src/: 包含 React-Admin 的核心源代码。
  • core/: 核心模块，包含主要的逻辑和功能。
  • ui/: UI 组件，包含 React-Admin 使用的 Material-UI 组件。
• package.json: 定义了项目的依赖和脚本命令。
• README.md: 项目的介绍文档，包含基本的使用说明和链接。

2. 项目的启动文件介绍

React-Admin 项目的启动文件通常位于 examples/ 目录下的示例项目中。以 examples/demo/ 为例，启动文件如下：

examples/demo/
├── public/            # 静态资源
│   ├── index.html     # 主 HTML 文件
│   └── ...            # 其他静态资源
├── src/               # 源代码
│   ├── App.js         # 主应用组件
│   ├── index.js       # 入口文件
│   └── ...            # 其他组件和文件
├── package.json       # 示例项目的依赖和脚本
└── ...                # 其他文件

启动文件介绍

• public/index.html: 主 HTML 文件，包含应用的根元素。
• src/index.js: 入口文件，负责渲染 App.js 中的主应用组件。
• src/App.js: 主应用组件，设置了 React-Admin 的 Admin 和 Resource 组件。

3. 项目的设置文件介绍

React-Admin 项目的设置文件主要包括 package.json 和示例项目中的 src/App.js。

package.json

package.json 文件定义了项目的依赖和脚本命令。以下是一个简化的示例：

{
  "name": "react-admin-demo",
  "version": "1.0.0",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-admin": "^3.19.0",
    "ra-data-simple-rest": "^3.19.0"
  },
  "devDependencies": {
    "react-scripts": "4.0.3"
  }
}

src/App.js

src/App.js 文件设置了 React-Admin 的 Admin 和 Resource 组件。以下是一个简化的示例：

import * as React from "react";
import { Admin, Resource } from 'react-admin';
import restProvider from 'ra-data-simple-rest';
import { PostList, PostEdit, PostCreate, PostIcon } from './posts';

const App = () => (
  <Admin dataProvider={restProvider('http://localhost:3000')}>
    <Resource name="posts" list={PostList} edit={PostEdit} create={PostCreate} icon={PostIcon} />
  </Admin>
);

export default App;

设置文件介绍

• package.json: 定义了项目的依赖和脚本命令