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"> [![Awesome](https://yellow-cdn.veclightyear.com/87312a0a/4e3407f5-d8fb-4556-924d-505ab26a25dd.svg)](https://github.com/refinedev/awesome-refine) [![OpenSSF 最佳实践](https://www.bestpractices.dev/projects/8101/badge)](https://www.bestpractices.dev/projects/8101) [![npm 版本](https://yellow-cdn.veclightyear.com/87312a0a/64d71f06-c163-4989-b284-99fd0cd04a1c.svg)](https://www.npmjs.com/package/@refinedev/core) [![贡献者公约](https://yellow-cdn.veclightyear.com/87312a0a/845c04f5-1991-44b6-b1a7-9205ec7fe068.svg)](https://raw.githubusercontent.com/refinedev/refine/master/CODE_OF_CONDUCT.md) [![Discord](https://yellow-cdn.veclightyear.com/87312a0a/7864c75e-e506-437d-ae88-39751c4f40be.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/refine) [![Twitter 关注](https://img.shields.io/twitter/follow/refine_dev?style=social)](https://twitter.com/refine_dev) </div> <br/> [![refine 如何工作](https://yellow-cdn.veclightyear.com/87312a0a/449a3abd-3ba3-42a9-b4d7-276a0f0c9af8.png)](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

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

快速开始

以下是 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 从头开始构建的一些实例：

主要特性

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 完美的状态管理和变更
为无缝身份验证和访问控制流程提供提供程序
对实时应用程序的开箱即用支持
简单的审计日志和文档版本控制