refine

<div align="center"> <a href="https://refine.dev/"> <img alt="refine 标志" src="https://yellow-cdn.veclightyear.com/87312a0a/97f9e002-ab7b-4ea5-af94-e2c913ba1ce6.png"> </a> <br/> <br/> <div align="center"> <a href="https://refine.dev">主页</a> | <a href="https://refine.dev/docs/">文档</a> | <a href="https://refine.dev/examples/">示例</a> | <a href="https://discord.gg/refine">Discord</a> | <a href="https://refine.dev/blog/">博客</a> </div> </div> <br/> <br/> <div align="center"><strong>CRUD 密集型应用程序中低代码/无代码和"从头开始"之间的完美平衡点。</strong><br> Refine 是一个开源的企业级 React 元框架。它为从管理面板到仪表板和内部工具的一切提供了无头解决方案。 <br /> <br /> </div> <div align="center"> [](https://github.com/refinedev/awesome-refine) [](https://www.bestpractices.dev/projects/8101) [](https://www.npmjs.com/package/@refinedev/core) [](https://raw.githubusercontent.com/refinedev/refine/master/CODE_OF_CONDUCT.md) [](https://discord.gg/refine) [](https://twitter.com/refine_dev) </div> <br/> [](https://refine.dev)

什么是 Refine？

Refine 是一个面向 CRUD 密集型 Web 应用程序的 React 元框架。它涵盖了广泛的企业用例，包括内部工具、管理面板、仪表板和 B2B 应用程序。

Refine 的核心钩子和组件通过为项目关键方面提供行业标准解决方案，简化了开发过程，包括身份验证、访问控制、路由、网络通信、状态管理和国际化。

Refine 的无头架构通过将业务逻辑与 UI 和路由分离，使构建高度可定制的应用程序成为可能。这允许集成：

• 任何自定义设计或 UI 框架，如 TailwindCSS，以及内置支持 Ant Design、Material UI、Mantine 和 Chakra UI。
• 各种平台，包括 Next.js、Remix、React Native、Electron 等，通过简单的路由接口，无需额外的设置步骤。

⚡ 试用 Refine

使用以下命令在几秒钟内用 Refine 启动新项目：

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

或者您可以在浏览器中创建新项目：

<a href="https://refine.dev/?playground=true" target="_blank"> <img height="48" width="245" src="https://yellow-cdn.veclightyear.com/87312a0a/95ae5ff3-89dd-4869-8c0a-2ad7d42a5d73.png" /> </a>

快速开始

以下是 Refine 的实际应用，下面的代码是使用 Refine + React Router + Material UI 的简单 CRUD 应用程序示例：

import React from "react";
import { Refine, useMany } from "@refinedev/core";
import { ThemedLayoutV2 } from "@refinedev/mui";
import dataProvider from "@refinedev/simple-rest";
import routerProvider from "@refinedev/react-router-v6";
import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom";

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={
              <ThemedLayoutV2>
                <Outlet />
              </ThemedLayoutV2>
            }
          >
            <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: "名称" },
      {
        field: "category",
        flex: 1,
        headerName: "类别",
        renderCell: ({ value }) =>
          isLoading
            ? "加载中..."
            : categories?.data?.find((item) => item.id === value?.id)?.title,
      },
      {
        field: "createdAt",
        flex: 1,
        headerName: "创建时间",
        renderCell: ({ value }) => <DateField value={value} />,
      },
    ],
    [categories?.data, isLoading],
  );

  return (
    <List>
      <DataGrid {...dataGridProps} columns={columns} autoHeight />
    </List>
  );
};

结果将如下所示：

使用场景

Refine 在_数据密集型⚡_企业 B2B 应用程序（如管理面板、仪表板和内部工具）中表现出色。得益于内置的 SSR 支持，它还可以为_面向客户_的应用程序（如商店前端）提供支持。

您可以查看使用 Refine 从头开始构建的一些实例：

• 全功能 CRM 应用程序
• 全功能管理面板
• Win95 风格管理面板 🪟
• PDF 发票生成器
• Medium 克隆 - 真实世界示例
• 多租户示例
• 商店前端
• 更多示例请参阅模板页面
• 更多 Refine 驱动的不同使用场景可以在这里找到

主要特性

• Refine 开发工具 - 深入了解您的应用并提供有用的见解
• 连接器支持 15+ 后端服务，包括 REST API、GraphQL、NestJs CRUD、Airtable、Strapi、Strapi v4、Supabase、Hasura、Appwrite、Nestjs-Query、Firebase、Sanity 和 Directus。
• 支持 Next.js 和 Remix 的 SSR，以及任何您选择的路由库的高级路由
• 基于 API 数据结构自动生成 CRUD UI
• 使用 React Query 完美的状态管理和变更
• 为无缝身份验证和访问控制流程提供提供程序
• 对实时应用程序的开箱即用支持
• 简单的审计日志和文档版本控制

学习 Refine

• 浏览教程，指导您完成构建全面 CRUD 应用程序的每个步骤。
• 访问指南与概念了解基本概念。
• 阅读高级教程了解不同的使用场景。

贡献

参考贡献文档以获取更多信息。

如果您对项目有任何疑问或想讨论某些内容，请加入我们的 Discord 服务器。

贡献者 ♥️ 感谢

我们向众多贡献者表示感谢，他们创建插件、协助解决问题和提交拉取请求，并在 Discord 和 GitHub Discussions 上回答问题。

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

<br/> <a href="https://github.com/refinedev/refine/graphs/contributors"> <img src="https://contrib.rocks/image?repo=refinedev/refine&max=400&columns=20" /> </a>

许可证

根据 MIT 许可证授权，版权所有 © 2021-present Refinedev