From 9748a0e73a783ce2c5cd074c9c58bd838f8bc2c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Necati=20=C3=96zmen?= Date: Tue, 3 Sep 2024 18:53:50 +0300 Subject: [PATCH] docs: add refine with antd (#49280) Co-authored-by: afc163 --- docs/react/use-with-refine.en-US.md | 73 +++++++++++++++++++++++++++++ docs/react/use-with-refine.zh-CN.md | 73 +++++++++++++++++++++++++++++ 2 files changed, 146 insertions(+) create mode 100644 docs/react/use-with-refine.en-US.md create mode 100644 docs/react/use-with-refine.zh-CN.md diff --git a/docs/react/use-with-refine.en-US.md b/docs/react/use-with-refine.en-US.md new file mode 100644 index 000000000000..0fbedef123a6 --- /dev/null +++ b/docs/react/use-with-refine.en-US.md @@ -0,0 +1,73 @@ +--- +group: + title: Basic Usage +order: 7 +title: Usage with Refine +tag: New +--- + +[Refine](https://github.com/refinedev/refine) is a React meta-framework designed for CRUD-heavy web applications. Its core hooks and components streamline development by offering solutions for authentication, access control, routing, networking, state management, and i18n. + +It supports Ant Design with an integration package that includes ready-to-use components and hooks to connect Refine to Ant Design. + +This article will guide you through bootstrapping a fully-functional CRUD application example using Refine and Ant Design. + +## Install and Initialization + +Refine integrates easily with platforms like Vite, Next.js, Remix, React Native, and Electron through a simple routing interface without additional setup. + +In this guide, we'll use Vite and the `refine-antd` preset from the `create refine-app` CLI for a quick start to create a new Refine project with Ant Design using predefined options. + +Before all start, you may need install [yarn](https://github.com/yarnpkg/yarn/) or [pnpm](https://pnpm.io/). + + + +Using the `refine-antd` preset eliminates the need for extra dependencies and add example pages built with Ant Design for a quick start. + +After the initialization is complete, we enter the project and start. + +```bash +$ cd antd-demo +$ npm run dev +``` + +Once initialization is complete, all Ant Design configurations are done automatically, allowing you to start using Ant Design components in your Refine app. + +Open the browser at http://localhost:5173/ and you will see example CRUD app with Ant Design components. + +![Refine Ant Design example](https://refine.ams3.cdn.digitaloceanspaces.com/example-readmes/antd-list-example.png) + +## Inspection the code + +Let take a look at Ant Design usage in the one of the example component generated by the CLI command. + +```tsx +import { Create, useForm } from '@refinedev/antd'; +import { Form, Input } from 'antd'; + +export const CategoryCreate = () => { + const { formProps, saveButtonProps } = useForm(); + + return ( + +
+ + + +
+ + ); +}; +``` + +While Refine's integration offers a set of components and hooks, it is not a replacement for the Ant Design package, you will be able to use all the features of Ant Design in the same way you would use it in a regular React application. + +Refine's integration only provides components and hooks for an easier usage of Ant Design components in combination with Refine's features and functionalities. + +## How to Add Ant Design to an Existing Refine Project + +You can follow the [Refine Ant Design official guide](https://refine.dev/docs/ui-integrations/ant-design/introduction/) to add Ant Design to an existing Refine project. + +To bootstrap a Refine app with various integration options like Next.js and Remix, use `npm create refine-app@latest` and select Ant Design as the UI framework from the CLI. + +For more detailed tutorials and guides with Ant Design, visit the [Refine documentation](https://refine.dev/tutorial/ui-libraries/intro/ant-design/react-router/). diff --git a/docs/react/use-with-refine.zh-CN.md b/docs/react/use-with-refine.zh-CN.md new file mode 100644 index 000000000000..23e8596b4d95 --- /dev/null +++ b/docs/react/use-with-refine.zh-CN.md @@ -0,0 +1,73 @@ +--- +group: + title: 如何使用 +order: 7 +title: 使用 Refine +tag: New +--- + +[Refine](https://github.com/refinedev/refine) 是一个为 CRUD 密集型 web 应用设计的 React 元框架。它的核心钩子和组件通过提供认证、访问控制、路由、网络、状态管理和国际化解决方案来简化开发。 + +它通过一个集成包支持 Ant Design，其中包含即用型组件和钩子，将 Refine 与 Ant Design 连接起来。 + +本文将指导您使用 Refine 和 Ant Design 引导一个功能齐全的 CRUD 应用示例。 + +## 安装和初始化 + +Refine 通过一个简单的路由接口与 Vite、Next.js、Remix、React Native 和 Electron 等平台轻松集成，无需额外设置。 + +在本指南中，我们将使用 Vite 和 `create refine-app` CLI 的 `refine-antd` 预设，通过预定义选项快速创建一个带有 Ant Design 的新 Refine 项目。 + +在开始之前，您可能需要安装 [yarn](https://github.com/yarnpkg/yarn/) 或 [pnpm](https://pnpm.io/)。 + + + +使用 `refine-antd` 预设消除了对额外依赖的需求，并添加了使用 Ant Design 构建的示例页面以快速开始。 + +初始化完成后，我们进入项目并启动。 + +```bash +$ cd antd-demo +$ npm run dev +``` + +初始化完成后，所有 Ant Design 配置都会自动完成，允许您在 Refine 应用中开始使用 Ant Design 组件。 + +在浏览器中打开 http://localhost:5173/，您将看到带有 Ant Design 组件的示例 CRUD 应用。 + +![Refine Ant Design 示例](https://refine.ams3.cdn.digitaloceanspaces.com/example-readmes/antd-list-example.png) + +## 查看代码 + +让我们看看 CLI 命令生成的示例组件中 Ant Design 的使用。 + +```tsx +import { Create, useForm } from '@refinedev/antd'; +import { Form, Input } from 'antd'; + +export const CategoryCreate = () => { + const { formProps, saveButtonProps } = useForm(); + + return ( + +
+ + + +
+ + ); +}; +``` + +虽然 Refine 的集成提供了一组组件和钩子，但它不是 Ant Design 包的替代品，您可以像在常规 React 应用中一样使用 Ant Design 的所有功能。 + +Refine 的集成仅提供组件和钩子，以便更轻松地在结合 Refine 的功能和特性时使用 Ant Design 组件。 + +## 如何向现有 Refine 项目添加 Ant Design + +您可以按照 [Refine Ant Design 官方指南](https://refine.dev/docs/ui-integrations/ant-design/introduction/) 将 Ant Design 添加到现有的 Refine 项目中。 + +要使用 Next.js 和 Remix 等各种集成选项引导 Refine 应用，请使用 `npm create refine-app@latest` 并从 CLI 中选择 Ant Design 作为 UI 框架。 + +有关使用 Ant Design 的更详细教程和指南，请访问 [Refine 文档](https://refine.dev/tutorial/ui-libraries/intro/ant-design/react-router/)。