refine
v
Refine ist ein React-Meta-Framework für cross-adrigierte Webanwendungen. Es befasst sich mit einer Vielzahl von Unternehmensnutzungsfällen, einschließlich interner Tools, Administratorplatten, Dashboards und B2B -Apps.
Die Kernhaken und Komponenten von Refine rationalisieren den Entwicklungsprozess, indem sie Branchenstandardlösungen für wichtige Aspekte eines Projekts anbieten, einschließlich Authentifizierung , Zugangskontrolle , Routing , Netzwerk , staatliches Management und I18N .
Die kopflose Architektur von Refine ermöglicht das Erstellen hoch anpassbarer Anwendungen, indem die Geschäftslogik von der Benutzeroberfläche und Routing entkoppelt wird. Dies ermöglicht die Integration mit:
Alle kundenspezifischen Designs oder UI-Frameworks wie Tailwindcss sowie integrierte Unterstützung für Ameisendesign, Material UI, Mantine und Chakra UI.
Verschiedene Plattformen, einschließlich Next.js, Remix, React Native, Electron usw., über eine einfache Routing -Schnittstelle ohne zusätzliche Einrichtungsschritte.
Starten Sie ein neues Projekt mit Refine in Sekunden lang mit dem folgenden Befehl:
npm create refine-app@latest my-refine-appOder Sie können ein neues Projekt in Ihrem Browser erstellen:
Hier ist die Verfeinerung in Aktion. Der folgende Code ist ein Beispiel für eine einfache CRUD -Anwendung mit Refine + 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 >
) ;
} ;Das Ergebnis wird so aussehen:
Refine Shining Shining auf datenintensiven Unternehmens-B2B-Anwendungen wie Administratorplatten , Dashboards und interne Tools . Dank des integrierten SSR-Supports können Sie auch Kundenanwendungen wie Storefronten mit Strom versorgen.
Sie können sich einige Live -Beispiele ansehen, die mit Refine von Grund auf neu erstellt werden können:
Weitere Informationen finden Sie in den Beitragsunterlagen.
Wenn Sie Zweifel am Projekt haben oder etwas besprechen möchten, schließen Sie sich unserem Discord -Server an.
Wir danken all unseren zahlreichen Mitwirkenden, die Plugins erstellen, Probleme erstellen, Fragen und Anfragen anziehen und Fragen zu Diskordien und Github -Diskussionen beantworten.
Refine ist ein gemeindenahes Projekt, und Ihre Beiträge verbessern es kontinuierlich.
Lizenziert unter der MIT-Lizenz, Copyright © 2021-PREERT REFINEDEV
