Quick Start Guide

The fastest way to get started with refine is using the superplate project starter tool. Run the following command to create a new refine project configured with Ant Design System as the default UI framework:

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

Once the setup is complete, navigate to the project folder and start your project with:

npm run dev

Your refine application will be accessible at http://localhost:3000: Let's consume a public fake REST API and add two resources (posts, categories) to our project. Replace the contents of src/App.tsx with the following code:

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;
}

Now, you should see the output as a table populated with post & category data:

Next Steps

👉 Jump to Refine - Ant Design Tutorial to continue your work and turn the example into a full-blown CRUD application.

👉 Check out the Refine - Tailwind Tutorial to learn how to use refine in a pure headless way.

👉 Read more on Advanced Tutorials for different usage scenarios.

👉 See the real-life Finefoods Demo project.

👉 Play with interactive Examples