Refine 基于React 大量的消除CRUD应用程序的开发

项目介绍

Refine 基于React 大量的消除CRUD应用程序的开发。

什么是Refine？

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

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 演示项目。

👉玩交互式示例

项目地址：

Github: refine.dev/

本文由博客一文多发平台 OpenWrite 发布！