152

0

Refine

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

主页| discord| 示例| 博客| 文档| 路线图

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

不和谐 推特关注

精炼 - 100% 开源 React 框架,以 3 倍速度构建 Web 应用程序 |  产品搜索

惊人的 可维护性 测试覆盖率 npm 版本 npm 贡献者契约

工作原理如何改进## 什么是Refine?

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

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

“无头”是什么意思?

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

Refine可与您喜欢的任何自定义设计UI 框架无缝协作。为方便起见,它附带了针对Ant Design SystemMaterial UIMantineChakra UI的现成集成。

用例

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

主要特征

⚙️使用单个 CLI 命令进行零配置、一分钟设置

🔌用于15 多种后端服务的连接器,包括REST APIGraphQLNestJs CRUDAirtableStrapiStrapi v4Strapi GraphQLSupabaseHasuraNhostAppwriteFirebaseDirectusAltogic

🌐 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 的公共路线图!

观星者

用于提炼ev/refine 的 Stargazers 回购名册

贡献

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

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

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

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

我们的♥️贡献者

## 执照

根据 MIT 许可证获得许可,版权所有 © 2021-至今 Refinedev