refine
v
Refine عبارة عن عمل فريد من ردود الفعل لتطبيقات الويب الثقيلة. إنه يعالج مجموعة واسعة من حالات استخدام المؤسسات بما في ذلك الأدوات الداخلية ولوحات المسؤولين ولوحات المعلومات وتطبيقات B2B.
تبسيط السنانير والمكونات الأساسية لـ Ensine عملية التطوير من خلال تقديم حلول قياسية للصناعة للجوانب الحاسمة للمشروع ، بما في ذلك المصادقة ، والتحكم في الوصول ، والتوجيه ، والشبكات ، وإدارة الدولة ، و I18N .
تتيح الهندسة المعمارية المقطوعة المطلوبة من Enlude بناء تطبيقات قابلة للتخصيص للغاية من خلال فصل منطق الأعمال من واجهة المستخدم والتوجيه. هذا يسمح بالتكامل مع:
أي تصميمات مخصصة أو أطر عمل واجهة المستخدم مثل Tailwindcss ، إلى جانب الدعم المدمج لتصميم النمل ، واجهة المستخدم المادية ، Mantine ، شقرا UI.
منصات مختلفة ، بما في ذلك Next.js ، Remix ، React Native ، Electron ، وما إلى ذلك ، من خلال واجهة توجيه بسيطة دون الحاجة إلى خطوات إعداد إضافية.
ابدأ مشروعًا جديدًا مع صقل في ثوانٍ باستخدام الأمر التالي:
npm create refine-app@latest my-refine-appأو يمكنك إنشاء مشروع جديد على متصفحك:
فيما يلي تحسينه في العمل ، فإن الرمز أدناه هو مثال على تطبيق CRUD بسيط باستخدام REWINE + React Router + Material 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 >
) ;
} ;ستبدو النتيجة هكذا:
قم بتحسين Shines على تطبيقات Enterprise B2B كثيفة البيانات مثل لوحات المشرف ولوحات المعلومات والأدوات الداخلية . بفضل دعم SSR المدمج ، يمكنه أيضًا تشغيل التطبيقات التي تواجه العملاء مثل واجهات المتاجر .
يمكنك إلقاء نظرة على بعض الأمثلة الحية التي يمكن بناؤها باستخدام صقل من نقطة الصفر:
الرجوع إلى مستندات المساهمة لمزيد من المعلومات.
إذا كان لديك أي شكوك تتعلق بالمشروع أو ترغب في مناقشة شيء ما ، فقم بالانضمام إلى خادم Discord الخاص بنا.
نوسع امتناننا لجميع المساهمين العديدين الذين يقومون بإنشاء الإضافات ، ويساعدون في القضايا وسحب الطلبات ، والرد على أسئلة حول مناقشات Discord و GitHub.
Refine هو مشروع يحركه المجتمع ، ومساهماتك تعمل باستمرار على تحسينه.
مرخصة بموجب ترخيص معهد ماساتشوستس للتكنولوجيا ، حقوق الطبع والنشر © 2021-صرف حاضر
