refine
v
Refine เป็น meta-framework ที่ตอบสนองสำหรับแอปพลิเคชันเว็บที่หนักหน่วง ที่อยู่กรณีการใช้งานขององค์กรที่หลากหลายรวมถึงเครื่องมือภายในแผงผู้ดูแลระบบแดชบอร์ดและแอพ B2B
Hooks หลักและส่วนประกอบของ Refine ปรับปรุงกระบวนการพัฒนาโดยนำเสนอโซลูชั่นมาตรฐานอุตสาหกรรมสำหรับแง่มุมที่สำคัญของโครงการรวมถึง การตรวจสอบสิทธิ์ การควบคุมการเข้าถึง การกำหนดเส้นทาง การเชื่อมต่อเครือข่าย การจัดการของรัฐ และ I18N
สถาปัตยกรรมหัวขาดของ Refine ช่วยให้สามารถสร้างแอปพลิเคชันที่ปรับแต่งได้สูงโดยการแยกตรรกะทางธุรกิจจาก UI และการกำหนดเส้นทาง สิ่งนี้ช่วยให้สามารถรวมเข้ากับ:
การออกแบบที่กำหนดเองหรือเฟรมเวิร์ก UI เช่น tailwindcss พร้อมกับการสนับสนุนในตัวสำหรับการออกแบบมด, วัสดุ UI, Mantine และ Chakra UI
แพลตฟอร์มต่าง ๆ รวมถึง Next.js, Remix, React Native, Electron ฯลฯ โดยอินเทอร์เฟซการกำหนดเส้นทางอย่างง่ายโดยไม่จำเป็นต้องมีขั้นตอนการตั้งค่าเพิ่มเติม
เริ่มโครงการใหม่ด้วยการปรับแต่งในไม่กี่วินาทีโดยใช้คำสั่งต่อไปนี้:
npm create refine-app@latest my-refine-appหรือคุณสามารถสร้างโครงการใหม่บนเบราว์เซอร์ของคุณ:
นี่คือการปรับแต่งในการดำเนินการรหัสด้านล่างเป็นตัวอย่างของแอปพลิเคชัน CRUD อย่างง่ายโดยใช้ Refine + React Router + วัสดุ UI:
import React from "react" ;
import { Refine , useMany } from "@refinedev/core" ;
import { ThemedLayoutV2 } from "@refinedev/mui" ;
import dataProvider from "@refinedev/simple-rest" ;
import routerProvider from "@refinedev/react-router" ;
import { BrowserRouter , Outlet , Route , Routes } from "react-router" ;
import CssBaseline from "@mui/material/CssBaseline" ;
export default function App ( ) {
return (
< BrowserRouter >
< CssBaseline />
< Refine
dataProvider = { dataProvider ( "https://api.fake-rest.refine.dev" ) }
routerProvider = { routerProvider }
resources = { [
{
name : "products" ,
list : "/products" ,
} ,
] }
>
< Routes >
< Route
element = {
< ThemedLayoutV2 >
< Outlet />
</ ThemedLayoutV2 >
}
>
< Route path = "/products" >
< Route index element = { < ProductList /> } />
</ Route >
</ Route >
</ Routes >
</ Refine >
</ BrowserRouter >
) ;
}
// src/pages/products/list.tsx
import { List , useDataGrid , DateField } from "@refinedev/mui" ;
import { DataGrid , GridColDef } from "@mui/x-data-grid" ;
export const ProductList = ( ) => {
const { dataGridProps } = useDataGrid ( ) ;
const { data : categories , isLoading } = useMany ( {
resource : "categories" ,
ids :
dataGridProps ?. rows ?. map ( ( item ) => item ?. category ?. id ) . filter ( Boolean ) ??
[ ] ,
queryOptions : {
enabled : ! ! dataGridProps ?. rows ,
} ,
} ) ;
const columns = React . useMemo < GridColDef [ ] > (
( ) => [
{ field : "id" , headerName : "ID" , type : "number" } ,
{ field : "name" , flex : 1 , headerName : "Name" } ,
{
field : "category" ,
flex : 1 ,
headerName : "Category" ,
display : "flex" ,
renderCell : ( { value } ) =>
isLoading
? "Loading..."
: categories ?. data ?. find ( ( item ) => item . id === value ?. id ) ?. title ,
} ,
{
field : "createdAt" ,
flex : 1 ,
headerName : "Created at" ,
display : "flex" ,
renderCell : ( { value } ) => < DateField value = { value } /> ,
} ,
] ,
[ categories ?. data , isLoading ] ,
) ;
return (
< List >
< DataGrid { ... dataGridProps } columns = { columns } />
</ List >
) ;
} ;ผลลัพธ์จะมีลักษณะเช่นนี้:
ปรับ แต่งแอพพลิเคชั่น B2B ขององค์กรที่ ใช้ข้อมูลมาก เช่น แผงผู้ดูแล ระบบแดชบอร์ด และ เครื่องมือภายใน ด้วย การสนับสนุน SSR ในตัวนอกจากนี้ยังสามารถเพิ่มพลังแอพพลิเคชั่น ที่ลูกค้าหันมาใช้ เช่น ร้านค้า
คุณสามารถดูตัวอย่างสดที่สามารถสร้างได้โดยใช้ การปรับแต่ง จากศูนย์:
อ้างถึงเอกสารการบริจาคสำหรับข้อมูลเพิ่มเติม
หากคุณมีข้อสงสัยใด ๆ ที่เกี่ยวข้องกับโครงการหรือต้องการหารือบางอย่างให้เข้าร่วมเซิร์ฟเวอร์ Discord ของเรา
เราขยายความกตัญญูต่อผู้มีส่วนร่วมจำนวนมากของเราที่สร้างปลั๊กอินช่วยเหลือปัญหาและดึงคำขอและตอบคำถามเกี่ยวกับการอภิปราย Discord และ GitHub
Refine เป็นโครงการที่ขับเคลื่อนด้วยชุมชนและการมีส่วนร่วมของคุณปรับปรุงอย่างต่อเนื่อง
ได้รับใบอนุญาตภายใต้ใบอนุญาต MIT ลิขสิทธิ์© 2021- ปัจจุบัน Definedev
