refine
v
Refine es un meta-marco React para aplicaciones web con crud pesados. Aborda una amplia gama de casos de uso empresarial que incluyen herramientas internas, paneles de administración, paneles y aplicaciones B2B.
Los ganchos y componentes centrales de Refine agilizan el proceso de desarrollo al ofrecer soluciones estándar de la industria para aspectos cruciales de un proyecto, incluida la autenticación , el control de acceso , la enrutamiento , las redes , la gestión del estado e I18N .
La arquitectura sin cabeza de Refine permite la construcción de aplicaciones altamente personalizables mediante el desacoplamiento de la lógica comercial de la interfaz de usuario y el enrutamiento. Esto permite la integración con:
Cualquier diseño personalizado o marcos de interfaz de usuario como Tailwindcss, junto con soporte incorporado para el diseño de hormigas, la interfaz de usuario de material, la mantenina y la interfaz de usuario de Chakra.
Varias plataformas, incluyendo Next.js, Remix, React Native, Electron, etc., mediante una simple interfaz de enrutamiento sin la necesidad de pasos de configuración adicionales.
Inicie un nuevo proyecto con Refine en segundos utilizando el siguiente comando:
npm create refine-app@latest my-refine-appO puede crear un nuevo proyecto en su navegador:
Aquí está refine en acción, el siguiente código es un ejemplo de una aplicación SIMPLE CRUD usando 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 >
) ;
} ;El resultado se verá así:
Refina brillas en las aplicaciones B2B de Enterprise B2B de intensidad de datos, como paneles de administración , paneles y herramientas internas . Gracias al soporte de SSR incorporado, también puede alimentar aplicaciones orientadas al cliente como los escaparates .
Puede echar un vistazo a algunos ejemplos en vivo que se pueden construir con Refine desde cero:
Consulte los documentos de contribución para obtener más información.
Si tiene alguna duda relacionada con el proyecto o desea discutir algo, únase a nuestro servidor Discord.
Extendemos nuestra gratitud a todos nuestros numerosos contribuyentes que crean complementos, ayudan con problemas y extraen solicitudes, y responden a preguntas sobre discordia y discusiones de GitHub.
Refine es un proyecto impulsado por la comunidad, y sus contribuciones lo mejoran continuamente.
Con licencia bajo la licencia MIT, Copyright © 2021-present Refinedev
