Skip to main content
Version: 3.xx.xx

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: Welcome on board 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: First example result

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 Guides & Concepts for different usage scenarios.

πŸ‘‰ See the real-life Finefoods Demo project.

πŸ‘‰ Play with interactive Examples