refine
v
Affine est un méta-trame de réact pour les applications Web CRUD-Hruy. Il traite d'un large éventail de cas d'utilisation d'entreprise, notamment des outils internes, des panneaux d'administration, des tableaux de bord et des applications B2B.
Raffine Les crochets et composants de Raffine rationalisent le processus de développement en offrant des solutions standard pour les aspects cruciaux d'un projet, notamment l'authentification , le contrôle d'accès , le routage , le réseautage , la gestion de l'État et le I18N .
L'architecture sans tête de Affine permet la construction d'applications hautement personnalisables en découplant la logique commerciale de l'interface utilisateur et du routage. Cela permet une intégration avec:
Tous les conceptions personnalisées ou les cadres d'interface utilisateur comme TailwindCSS, ainsi que le support intégré pour la conception des fourmis, l'interface utilisateur de matériaux, la mange et l'interface utilisateur du chakra.
Diverses plates-formes, y compris Next.js, Remix, React Native, Electron, etc., par une interface de routage simple sans avoir besoin d'étapes de configuration supplémentaires.
Démarrez un nouveau projet avec Affine en quelques secondes en utilisant la commande suivante:
npm create refine-app@latest my-refine-appOu vous pouvez créer un nouveau projet sur votre navigateur:
Voici Raffine en action, le code ci-dessous est un exemple d'une application CRUD simple utilisant REFINE + REACT ROUTER + MATÉRIEL 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 >
) ;
} ;Le résultat ressemblera à ceci:
Affinez la brille sur les applications B2B d'entreprise à forte intensité de données comme les panneaux d'administration , les tableaux de bord et les outils internes . Grâce au support SSR intégré, il peut également alimenter les applications orientées client comme les vitrines .
Vous pouvez jeter un œil à des exemples en direct qui peuvent être construits à l'aide de raffine à partir de zéro:
Reportez-vous aux documents de contribution pour plus d'informations.
Si vous avez des doutes liés au projet ou si vous souhaitez discuter de quelque chose, rejoignez notre serveur Discord.
Nous étendons notre gratitude à tous nos nombreux contributeurs qui créent des plugins, aidons les problèmes et tirent des demandes, et répondent aux questions sur les discussions Discord et GitHub.
Affine est un projet axé sur la communauté et vos contributions l'améliorent continuellement.
Licencié sous la licence MIT, Copyright © 2021-Present Refinedev
