无限制地构建用它就够了！超灵活的WEB应用程序框架

fine 是一个基于 React 的框架，用于快速网络应用程序的开发。它消除了 CRUD 操作所需的重复任务，并为身份验证、访问控制、路由、网络、状态管理和 i18n 等关键部分提供行业标准解决方案。

主要特征

使用单个 CLI 命令进行零配置、一分钟设置
用于 15 多种后端服务的连接器，包括 REST API、GraphQL、NestJs CRUD、Airtable、Strapi、Strapi v4、Strapi GraphQL、Supabase、Hasura、Nhost、Appwrite、Firebase、Directus 和 Altogic
Next.js 或 Remix 支持 SSR
使用 React Query 完善状态管理和突变
使用选择的任何路由器库的高级路由
身份验证和访问控制流程的提供商
对实时/实时应用程序的开箱即用支持
轻松的审核日志和文档版本控制
面向未来的稳健架构
完整的测试覆盖

快速入门指南

开始细化的最快方法是使用 create refine-app 项目启动工具或使用细化.new 浏览器工具。

使用 refine.new 浏览器工具

Fine.new 可通过直接在浏览器中进行逐步选择来创建新的优化应用程序。

可以选择要使用的库和框架，该工具将生成可下载的样板代码。

使用 create refine-app

npx superplate-cli --preset refine-antd my-project

设置完成后，导航到项目文件夹并使用以下命令启动项目：

npm run dev

可以通过http://localhost:3000访问优化应用程序：使用 publicfake REST API 并为项目添加两个资源（blog_posts、categories）。将的内容替换 src/App.tsx 为以下代码：

import { Refine } from "@refinedev/core";
import {
    notificationProvider,
    ErrorComponent,
    ThemedLayout,
} from "@refinedev/antd";
import routerProvider, { NavigateToResource } from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";

import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";

import { AntdInferencer } from "@refinedev/inferencer/antd";

import "@refinedev/antd/dist/reset.css";

const App: React.FC = () => {
    return (
        <BrowserRouter>
            <Refine
                routerProvider={routerProvider}
                dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
                notificationProvider={notificationProvider}
                resources={[
                    {
                        name: "blog_posts",
                        list: "/blog-posts",
                        show: "/blog-posts/show/:id",
                        create: "/blog-posts/create",
                        edit: "/blog-posts/edit/:id",
                        meta: { canDelete: true },
                    },
                    {
                        name: "categories",
                        list: "/categories",
                        show: "/categories/show/:id",
                    },
                ]}
            >
                <Routes>
                    <Route
                        element={
                            <ThemedLayout>
                                <Outlet />
                            </ThemedLayout>
                        }
                    >
                        <Route index element={<NavigateToResource />} />
                        <Route path="blog-posts">
                            <Route index element={<AntdInferencer />} />
                            <Route
                                path="show/:id"
                                element={<AntdInferencer />}
                            />
                            <Route path="create" element={<AntdInferencer />} />
                            <Route
                                path="edit/:id"
                                element={<AntdInferencer />}
                            />
                        </Route>
                        <Route path="categories">
                            <Route index element={<AntdInferencer />} />
                            <Route
                                path="show/:id"
                                element={<AntdInferencer />}
                            />
                        </Route>
                        <Route path="*" element={<ErrorComponent />} />
                    </Route>
                </Routes>
            </Refine>
        </BrowserRouter>
    );
};

export default App;

这得益于 Fine Inferencer 包，它可以根据从 API 获取的数据猜测用于 list、show、create 和 edit 页面的配置，并自动生成页面。

blog_posts 现在应该看到输出为填充有&数据的表格 category：

基础示例

第一个使用 Material UI 的应用

首先，使用以下命令运行 superplate ：

npx superplate-cli -o refine-mui tutorial

数据提供者是精炼的组件，可以方便地使用不同的 API 和数据服务。要使用 Fake REST API，先使用“Simple REST Dataprovider”。

接下来，导航到项目文件夹并运行以下命令来安装所需的包：

npm i @pankod/refine-simple-rest

将内容替换为 App.tsx 以下代码：

import { Refine } from "@pankod/refine-core";
import {
    Layout,
    ErrorComponent,
    ReadyPage,
    LightTheme,
    CssBaseline,
    ThemeProvider,
    GlobalStyles,
    RefineSnackbarProvider,
    notificationProvider,
} from "@pankod/refine-mui";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";

const App: React.FC = () => {
    return (
        <ThemeProvider theme={LightTheme}>
            <CssBaseline />
            <GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />
            <RefineSnackbarProvider>
                <Refine
                    routerProvider={routerProvider}
                    dataProvider={dataProvider(
                        "https://api.fake-rest.refine.dev",
                    )}
                    notificationProvider={notificationProvider}
                    Layout={Layout}
                    ReadyPage={ReadyPage}
                    catchAll={<ErrorComponent />}
                />
            </RefineSnackbarProvider>
        </ThemeProvider>
    );
};

export default App;