Back to Details

refine-dev

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Refine.dev Framework

Refine.dev 框架

Refine is a headless React framework for building enterprise CRUD applications. It provides data fetching, routing, authentication, and access control out of the box while remaining UI-agnostic.
Refine是一个用于构建企业级CRUD应用的无头React框架。它开箱即用地提供数据获取、路由、身份验证和访问控制功能，同时保持与UI无关的特性。

When to use

适用场景

  • Building admin panels, dashboards, or internal tools with React
  • Need CRUD operations with various backends (REST, GraphQL, Supabase, Strapi, etc.)
  • Want a headless approach with Mantine UI integration
  • Setting up Vite-based React projects with data management
  • Implementing authentication flows in React admin apps
  • 使用React构建管理面板、仪表盘或内部工具
  • 需要对接多种后端（REST、GraphQL、Supabase、Strapi等）实现CRUD操作
  • 希望采用无头方案并集成Mantine UI
  • 搭建基于Vite的React项目并进行数据管理
  • 在React管理应用中实现身份验证流程

Core Concepts

核心概念

Refine is built around these key abstractions:
  1. Data Provider — adapter for your backend (REST, GraphQL, etc.)
  2. Resources — entities in your app (e.g., 
    posts
    , 
    users
    , 
    products
    )
  3. Hooks — 
    useList
    , 
    useOne
    , 
    useCreate
    , 
    useUpdate
    , 
    useDelete
    , 
    useForm
    , 
    useTable
  4. Auth Provider — handles login, logout, permissions
  5. Router Provider — integrates with React Router, etc.
Refine围绕以下关键抽象概念构建：
  1. Data Provider — 后端适配器（支持REST、GraphQL等）
  2. Resources — 应用中的实体（例如
    posts
    、
    users
    、
    products
    ）
  3. Hooks — 
    useList
    、
    useOne
    、
    useCreate
    、
    useUpdate
    、
    useDelete
    、
    useForm
    、
    useTable
  4. Auth Provider — 处理登录、登出、权限控制
  5. Router Provider — 与React Router等路由库集成

Quick Start (Vite)

快速开始（Vite）

bash
npm create refine-app@latest
bash
npm create refine-app@latest

Select: Vite, Mantine, REST API (or your backend)

Select: Vite, Mantine, REST API (or your backend)


Or manual setup:

```bash
npm install @refinedev/core @refinedev/mantine @refinedev/react-router @mantine/core @mantine/hooks @mantine/form @mantine/notifications

或者手动搭建：

```bash
npm install @refinedev/core @refinedev/mantine @refinedev/react-router @mantine/core @mantine/hooks @mantine/form @mantine/notifications

Minimal App Structure

最小应用结构

tsx
// src/App.tsx
import { Refine } from "@refinedev/core";
import { MantineProvider } from "@mantine/core";
import routerProvider from "@refinedev/react-router";
import dataProvider from "@refinedev/simple-rest";
import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <MantineProvider>
        <Refine
          dataProvider={dataProvider("https://api.example.com")}
          routerProvider={routerProvider}
          resources={[
            {
              name: "posts",
              list: "/posts",
              create: "/posts/create",
              edit: "/posts/edit/:id",
              show: "/posts/show/:id",
            },
          ]}
        >
          <Routes>{/* Your routes here */}</Routes>
        </Refine>
      </MantineProvider>
    </BrowserRouter>
  );
}
tsx
// src/App.tsx
import { Refine } from "@refinedev/core";
import { MantineProvider } from "@mantine/core";
import routerProvider from "@refinedev/react-router";
import dataProvider from "@refinedev/simple-rest";
import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <MantineProvider>
        <Refine
          dataProvider={dataProvider("https://api.example.com")}
          routerProvider={routerProvider}
          resources={[
            {
              name: "posts",
              list: "/posts",
              create: "/posts/create",
              edit: "/posts/edit/:id",
              show: "/posts/show/:id",
            },
          ]}
        >
          <Routes>{/* Your routes here */}</Routes>
        </Refine>
      </MantineProvider>
    </BrowserRouter>
  );
}

Critical Prohibitions

严格禁止操作

  • Do NOT mix multiple UI libraries (pick Mantine and stick with it)
  • Do NOT bypass data provider — always use Refine hooks for data operations
  • Do NOT hardcode API URLs — use data provider configuration
  • Do NOT skip resource definition — all CRUD entities must be declared in 
    resources
  • Do NOT ignore TypeScript types — Refine is fully typed, leverage it
  • 请勿混合使用多个UI库（选择Mantine后请坚持使用它）
  • 请勿绕过Data Provider — 始终使用Refine的钩子函数进行数据操作
  • 请勿硬编码API地址 — 使用Data Provider的配置项
  • 请勿跳过资源定义 — 所有CRUD实体必须在
    resources
    中声明
  • 请勿忽略TypeScript类型 — Refine完全支持类型定义，请充分利用

Steps for New Feature

新增功能步骤

  1. Define the resource in 
    <Refine resources={[...]}>
  2. Create page components (List, Create, Edit, Show)
  3. Set up routes matching resource paths
  4. Use appropriate hooks (
    useTable
    for lists, 
    useForm
    for create/edit)
  5. Configure auth provider if authentication is needed
  1. 在
    <Refine resources={[...]}>
    中定义资源
  2. 创建页面组件（列表、创建、编辑、详情页）
  3. 设置与资源路径匹配的路由
  4. 使用合适的钩子函数（列表用
    useTable
    ，创建/编辑用
    useForm
    ）
  5. 如果需要身份验证，配置Auth Provider

Definition of Done

完成标准

  • Resource defined in Refine configuration
  • All CRUD pages implemented with proper hooks
  • Routes match resource configuration
  • TypeScript types for resource data defined
  • Error handling in place
  • Loading states handled
  • 在Refine配置中定义了资源
  • 使用正确的钩子函数实现了所有CRUD页面
  • 路由与资源配置匹配
  • 定义了资源数据的TypeScript类型
  • 已实现错误处理
  • 已处理加载状态

References (Detailed Guides)

参考文档（详细指南）

Core

核心功能

  • data-providers.md — Data provider interface, available providers, custom implementation
  • resources.md — Resource definition and configuration
  • routing.md — React Router integration and route patterns
  • data-providers.md — Data Provider接口、可用的提供者、自定义实现
  • resources.md — 资源定义与配置
  • routing.md — React Router集成与路由模式

Hooks

钩子函数

  • hooks.md — All hooks: useList, useOne, useCreate, useUpdate, useDelete, useForm, useTable, useSelect
  • hooks.md — 所有钩子函数：useList、useOne、useCreate、useUpdate、useDelete、useForm、useTable、useSelect

Security & Auth

安全与身份验证

  • auth.md — Auth provider, access control, RBAC/ABAC, Casbin/CASL integration
  • auth.md — Auth Provider、访问控制、RBAC/ABAC、Casbin/CASL集成

UI & Components

UI与组件

  • mantine-ui.md — Mantine components integration
  • inferencer.md — Auto-generate CRUD pages from API schema
  • mantine-ui.md — Mantine组件集成
  • inferencer.md — 从API schema自动生成CRUD页面

Utilities & Features

工具与功能

  • notifications.md — Notification provider and useNotification hook
  • i18n.md — Internationalization with i18nProvider
  • realtime.md — LiveProvider for websocket/realtime subscriptions
  • notifications.md — 通知提供者与useNotification钩子
  • i18n.md — 基于i18nProvider的国际化支持
  • realtime.md — 用于WebSocket/实时订阅的LiveProvider

Links

链接