Refine_奇链 - 一个神奇的网站

无限制地构建基于React的 CRUD 应用程序。 一个开源的、无头的 Web 应用程序框架，在开发时考虑了灵活性。

## 什么是Refine？

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

Refine在设计上是 无头的 ，因此提供了无限的样式和定制选项。

“无头”是什么意思？

Refine不是一组有限的预先样式化的组件，而是一个助手的集合 hooks，components和 providers。它们都与UI 组件和业务逻辑分离，因此它们永远不会阻止您自定义UI或编写自己的流程。

Refine可与您喜欢的任何自定义设计或UI 框架无缝协作。为方便起见，它附带了针对Ant Design System、Material UI、Mantine和Chakra UI的现成集成。

用例

Refine 在管理面板、仪表板和内部工具等数据密集型应用程序上大放异彩。由于内置的 SSR 支持，refine 还可以为面向客户的应用程序（如店面）提供支持。

主要特征

⚙️使用单个 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完善状态管理和突变

🔀 使用您选择的任何路由器库的高级路由

🔐无缝身份验证和访问控制流程的提供商

⚡对实时/实时应用程序的开箱即用支持

📄轻松的审核日志和文档版本控制

💬支持任何i18n框架

💪面向未来的稳健架构

✅完整的测试覆盖

快速开始

开始使用细化的最快方法是使用superplate项目启动工具。运行以下命令来创建一个新的以Ant Design System配置为默认 UI 框架的细化项目：

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

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

npm run dev

您可以通过http://localhost:3000访问您的优化应用程序：让我们使用一个公共资源并将两个资源（帖子、类别）添加到我们的项目中。将的内容替换为以下代码： fake REST API``src/App.tsx

import { Refine, useMany } from "@pankod/refine-core";
import {
    useTable,
    List,
    Table,
    DateField,
    Layout,
    ReadyPage,
    notificationProvider,
    ErrorComponent,
} from "@pankod/refine-antd";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";

import "@pankod/refine-antd/dist/styles.min.css";

const App: React.FC = () => {
    return (
        <Refine
            routerProvider={routerProvider}
            dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
            resources={[{ name: "posts", list: PostList }]}
            Layout={Layout}
            ReadyPage={ReadyPage}
            notificationProvider={notificationProvider}
            catchAll={<ErrorComponent />}
        />
    );
};

export const PostList: React.FC = () => {
    const { tableProps } = useTable<IPost>();

    const categoryIds =
        tableProps?.dataSource?.map((item) => item.category.id) ?? [];

    const { data, isLoading } = useMany<ICategory>({
        resource: "categories",
        ids: categoryIds,
        queryOptions: {
            enabled: categoryIds.length > 0,
        },
    });

    return (
        <List>
            <Table<IPost> {...tableProps} rowKey="id">
                <Table.Column dataIndex="title" title="title" />
                <Table.Column
                    dataIndex={["category", "id"]}
                    title="category"
                    render={(value: number) => {
                        if (isLoading) {
                            return "loading...";
                        }

                        return data?.data.find(
                            (item: ICategory) => item.id === value,
                        )?.title;
                    }}
                />
                <Table.Column
                    dataIndex="createdAt"
                    title="createdAt"
                    render={(value) => <DateField format="LLL" value={value} />}
                />
            </Table>
        </List>
    );
};

export default App;

interface IPost {
  title: string;
  createdAt: string;
  category: { id: number };
}

interface ICategory {
  id: number;
  title: string;
}

现在，您应该看到输出为一个填充了 post&category数据的表：

下一步

👉跳转到Refine<>Ant Design Tutorial以继续您的工作并将示例转变为成熟的 CRUD 应用程序。

👉查看Refine<>Tailwind 教程，了解如何以纯粹的无头方式使用细化。

👉访问学习基础页面以了解基本概念。

👉阅读更多关于不同使用场景的高级教程。

👉查看真实的Finefoods 演示项目。

👉玩交互式示例

路线图

你可以在这里找到refine 的公共路线图！

观星者

贡献

如果您发现错误，请提交有问题的错误报告。如果您想修正错字或更新文档，请在此处提出问题。如果您想提出一项功能，请在此处提出详细的问题并进行解释。

如果您愿意解决问题或提出功能，欢迎并鼓励所有具有明确解释的 PR。

在这里了解更多关于贡献的方式

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

我们的♥️贡献者

## 执照

看看其他 algorithm-visualizer SortableJS Lively Wallpaper Storybook mayfly-go Dart_Frog Cloudreve Meilisearch Lancet HTML DOM