Xây dựng các ứng dụng CRUD dựa trên React mà không gặp bất kỳ ràng buộc nào.
Một framework ứng dụng web mã nguồn mở, không có giao diện người dùng, được phát triển với tính linh hoạt hàng đầu.
Refine là gì?
Refine là một framework dựa trên React cho sự phát triển nhanh chóng ✨ các ứng dụng web. Nó loại bỏ các nhiệm vụ lặp lại đòi hỏi bởi các hoạt động CRUD và cung cấp các giải pháp tiêu chuẩn của ngành cho các phần quan trọng như xác thực , kiểm soát truy cập , định tuyến , kết nối mạng , quản lý trạng thái , và i18n.
Refine được thiết kế là không có giao diện người dùng , do đó nó cung cấp các tùy chọn tùy chỉnh và thiết kế không giới hạn.
“Không có giao diện người dùng” có nghĩa là gì?
Thay vì là một tập hợp giới hạn các thành phần đã được thiết kế trước, Refine là một bộ sưu tập các hooks, components, và providers hữu ích. Chúng đều tách biệt hoàn toàn khỏi các thành phần giao diện người dùng và logic kinh doanh, vì vậy chúng không bao giữ bạn khỏi việc tùy chỉnh giao diện người dùng hoặc việc lập trình luồng riêng của bạn.
Refine hoạt động mượt mà với bất kỳ thiết kế tùy chỉnh hoặc framework giao diện người dùng nào bạn ưa thích. Để thuận tiện, nó đi kèm với các tích hợp sẵn cho Ant Design System, Material UI, Mantine, và Chakra UI.
🔥 Hãy thử Refine trực tuyến chỉ trong 10 giây
refine.new là một công cụ trình duyệt mã nguồn mở mạnh mẽ cho phép bạn tạo các ứng dụng Refine.
Bạn có thể xem trước, sửa đổi và tải xuống dự án của bạn ngay lập tức, giúp tối ưu hóa quá trình phát triển.
Các trường hợp sử dụng
Refine rất phù hợp với các ứng dụng dữ liệu nhiều⚡ như bảng điều khiển quản trị , bảng điều khiển và công cụ nội bộ. Nhờ tích hợp sẵn về hỗ trợ SSR , Refine cũng có thể làm năng các ứng dụng phục vụ khách hàng như cửa hàng trực tuyến.
Bạn có thể xem một số ví dụ thực tế có thể được xây dựng từ đầu bằng Refine:
Cảm ơn bạn!
👉 Refer to most popular real use case examples
👉 More refine powered different usage scenarios can be found here
Đặc điểm chính
⚙️ Không cần cấu hình, thiết lập trong một phút bằng một lệnh CLI đơn lẻ
🔌 Kết nối với 15+ dịch vụ backend bao gồm REST API, GraphQL, NestJs CRUD, Airtable, Strapi, Strapi v4, Strapi GraphQL, Supabase, Hasura, Appwrite, Firebase, và Directus.
🌐 Hỗ trợ SSR với Next.js hoặc Remix
🔍 Tự động tạo giao diện CRUD từ cấu trúc dữ liệu API của bạn
⚛ Quản lý trạng thái hoàn hảo và thay đổi với React Query
🔀 Định tuyến tiên tiến với bất kỳ thư viện định tuyến nào bạn chọn
🔐 Cung cấp cho quá trình xác thực và kiểm soát truy cập mượt mà
⚡ Hỗ trợ ứng dụng thời gian thực / trực tuyến ngay lập tức
📄 Dễ dàng tạo nhật ký kiểm tra và phiên bản tài liệu
💬 Hỗ trợ cho bất kỳ framework i18n nào
💪 Kiến trúc mạnh mẽ để đảm bảo tương lai
⌛️ Có sẵn CLI tích hợp các tính năng tiết kiệm thời gian
✅ Đầy đủ bảo vệ kiểm tra
Bắt đầu nhanh
Cách nhanh nhất để bắt đầu với Refine là sử dụng công cụ khởi đầu dự án create refine-app hoặc sử dụng công cụ trình duyệt refine.new.
Sử dụng công cụ trình duyệt refine.new
refine.new cho phép bạn tạo một ứng dụng Refine mới bằng cách chọn từng bước trực tiếp trong trình duyệt của bạn.
Bạn có thể chọn các thư viện và framework bạn muốn làm việc cùng, và công cụ sẽ tạo ra mã mẫu có thể tải xuống cho bạn.
Sử dụng create refine-app
Chạy lệnh sau để tạo một dự án Refine mới được cấu hình với Ant Design System làm framework giao diện người dùng mặc định:
npm create refine-app@latest -- -o refine-antd
Khi thiết lập hoàn thành, hãy điều hướng đến thư mục dự án và bắt đầu dự án của bạn với:
npm run dev
Ứng dụng Refine của bạn sẽ có thể truy cập tại http://localhost:3000:
Cảm ơn bạn!
Hãy tiêu thụ một fake REST API công khai và thêm hai tài nguyên ( blog_posts , categories ) vào dự án của chúng ta. Thay thế nội dung của src/App.tsx bằng mã sau đây:
import { Refine } from "@refinedev/core";
import {
notificationProvider,
ErrorComponent,
ThemedLayout,
} from "@refinedev/antd";
import routerProvider, { NavigateToResource } from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
import { AntdInferencer } from "@refinedev/inferencer/antd";
import "@refinedev/antd/dist/reset.css";
const App: React.FC = () => {
return (
<BrowserRouter>
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
notificationProvider={notificationProvider}
resources={[
{
name: "blog_posts",
list: "/blog-posts",
show: "/blog-posts/show/:id",
create: "/blog-posts/create",
edit: "/blog-posts/edit/:id",
meta: { canDelete: true },
},
{
name: "categories",
list: "/categories",
show: "/categories/show/:id",
},
]}
>
<Routes>
<Route
element={
<ThemedLayout>
<Outlet />
</ThemedLayout>
}
>
<Route index element={<NavigateToResource />} />
<Route path="blog-posts">
<Route index element={<AntdInferencer />} />
<Route
path="show/:id"
element={<AntdInferencer />}
/>
<Route path="create" element={<AntdInferencer />} />
<Route
path="edit/:id"
element={<AntdInferencer />}
/>
</Route>
<Route path="categories">
<Route index element={<AntdInferencer />} />
<Route
path="show/:id"
element={<AntdInferencer />}
/>
</Route>
<Route path="*" element={<ErrorComponent />} />
</Route>
</Routes>
</Refine>
</BrowserRouter>
);
};
export default App;
🚀 Nhờ vào gói phân tích Refine Inferencer , nó sẽ đoán cấu hình để sử dụng cho các trang list, show, create, và edit dựa trên dữ liệu được truy xuất từ API và tự động tạo ra các trang này.
Bây giờ, bạn nên thấy đầu ra là một bảng được điền thông tin từ dữ liệu blog_posts & category:
Bạn có thể lấy mã trang tự động được tạo bằng cách nhấp vào nút Hiển thị Mã trên từng trang. Sau đó, đơn giản là đặt các trang này vào mảng resources bằng cách thay thế chúng bằng các thành phần Inferencer.
Bước tiếp theo
👉 Chuyển đến Tutorial để tiếp tục công việc của bạn và biến ví dụ thành một ứng dụng CRUD hoàn chỉnh.
👉 Ghé thăm Learn the Basics Page để nắm vững về các khái niệm cơ bản.
👉 Đọc thêm về Advanced Tutorials cho các tình huống sử dụng khác nhau.
👉 Xem dự án thực tế Finefoods Demo.
👉 Chơi với tương tác Examples
Những người theo dõi
Đóng góp
👉 Refer to contribution docs for more information
Nếu bạn có bất kỳ thắc mắc liên quan đến dự án hoặc muốn thảo luận về điều gì đó, hãy tham gia vào Discord Server của chúng tôi.
Home Page | Discord | Examples | Blog | Documentation
Chi tiết tải về:
Tác giả: refinedev
Nguồn: https://github.com/refinedev/refine
Giấy phép: MIT license
Cảm ơn bạn!
