Home Page | Documentation | Examples | Discord | Blog | Refine AI

什么是Refine？

Refine 是一个用于以CRUD为主的Web应用的React元框架。 它涵盖了包括内部工具、管理面板、仪表盘和B2B应用程序在内的各种企业用例。

Refine 的核心钩子和组件通过提供项目关键方面的行业标准解决方案，简化了开发流程，包括 认证, 访问控制, 路由, 网络社交, 状态管理，和 i18n.

Refine 的无头架构通过将业务逻辑与用户界面和路由解耦，使构建高度可定制的应用程序成为可能。 这允许与…集成:

• 任何自定义设计或UI框架如 TailwindCSS以及内置的支持 Ant Design, Material UI, Mantine, and Chakra UI.

• 各种平台，包括 Next.js通过一个简单的路由界面使用这些框架，如Remix、React Native、Electron等，而无需额外的设置步骤。

⚡ 尝试优化

使用以下命令几秒钟内用Refine启动一个新项目:

1
npm create refine-app@latest my-refine-app

或者你可以在浏览器上创建一个新项目:

你也可以免费尝试 Refine AI 来创建项目:

快速入门

这是Refine在实际应用中的示例，下面的代码是一个使用Refine + React Router + Material UI实现的简单CRUD应用程序的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
import React from "react";
import { Refine, useMany } from "@refinedev/core";
import { ThemedLayout } from "@refinedev/mui";
import dataProvider from "@refinedev/simple-rest";
import routerProvider from "@refinedev/react-router";
import { BrowserRouter, Outlet, Route, Routes } from "react-router";
 
import CssBaseline from "@mui/material/CssBaseline";
 
export default function App() {
  return (
    <BrowserRouter>
      <CssBaseline />
      <Refine
        dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
        routerProvider={routerProvider}
        resources={[
          {
            name: "products",
            list: "/products",
          },
        ]}
      >
        <Routes>
          <Route
            element={
              <ThemedLayout>
                <Outlet />
              ThemedLayout>
            }
          >
            <Route path="/products">
              <Route index element={<ProductList />} />
            Route>
          Route>
        Routes>
      Refine>
    BrowserRouter>
  );
}
 
// src/pages/products/list.tsx
 
import { List, useDataGrid, DateField } from "@refinedev/mui";
import { DataGrid, GridColDef } from "@mui/x-data-grid";
 
export const ProductList = () => {
  const { dataGridProps } = useDataGrid();
 
  const { data: categories, isLoading } = useMany({
    resource: "categories",
    ids:
      dataGridProps?.rows?.map((item) => item?.category?.id).filter(Boolean) ??
      [],
    queryOptions: {
      enabled: !!dataGridProps?.rows,
    },
  });
 
  const columns = React.useMemo<GridColDef[]>(
    () => [
      { field: "id", headerName: "ID", type: "number" },
      { field: "name", flex: 1, headerName: "Name" },
      {
        field: "category",
        flex: 1,
        headerName: "Category",
        display: "flex",
        renderCell: ({ value }) =>
          isLoading
            ? "Loading..."
            : categories?.data?.find((item) => item.id === value?.id)?.title,
      },
      {
        field: "createdAt",
        flex: 1,
        headerName: "Created at",
        display: "flex",
        renderCell: ({ value }) => <DateField value={value} />,
      },
    ],
    [categories?.data, isLoading],
  );
 
  return (
    <List>
      <DataGrid {...dataGridProps} columns={columns} />
    List>
  );
};

结果会是这样的:

用例

Refine 闪耀着 数据密集型⚡ enterprise B2B 类似的应用程序 管理面板, dashboards and internal tools谢谢内置的 SSR支持它也可以供电 面向客户 applications like 店铺前庭.

你可以查看一些使用它们构建的实时示例 Refine 从头开始:

• Fully-functional CRM Application
• Fully-functional Admin Panel
• Win95 Style Admin panel 🪟
• PDF Invoice Generator
• Medium Clone - Real World Example
• Multitenancy Example
• Storefront
• Refer to templates page for more examples
• More Refine powered different usage scenarios can be found here

主要特点

• 优化开发工具 - 深入了解您的应用并提供有用的见解
• 连接器 15个后端服务 包括 REST API, GraphQL, NestJs CRUD, Airtable, Strapi, Strapi v4, Supabase, Hasura, Appwrite, Nestjs-Query, Firebase, Sanity, and Directus.
• SSR支持 Next.js & 使用任何你选择的路由库进行混搭和高级路由
• 基于您的API数据结构自动生成CRUD用户界面
• 完美的状态管理与突变，使用 React Query
• 提供无缝认证和访问控制流程的**商
• 开箱即用的支持实时应用
• 简单审计日志与文档版本控制

学习精炼

• 导航到该 Tutorial 在构建全面的CRUD应用程序时，将逐步引导您完成整个过程。
• 参观 Guides & Concepts 了解基本概念。
• 查看更多 Advanced Tutorials 针对不同的使用场景。

贡献

Refer to the contribution docs for more information.

如果您对项目有任何疑问或想讨论一些事情，请加入我们的 Discord server.

贡献者 ♥️ 感谢

我们感谢所有众多贡献者，他们创建插件、协助解决问题和拉取请求，并在Discord和GitHub讨论中回答问题。

Refine 是一个社区驱动的项目，您的贡献不断改进它。

授权许可

根据MIT许可协议，版权所有©2021至今Refinedev