refine
v
Refine é um meta-quadro de reação para aplicativos da Web pesados. Ele aborda uma ampla gama de casos de uso corporativo, incluindo ferramentas internas, painéis de administração, painéis e aplicativos B2B.
Os ganchos e componentes da Refine otimizam o processo de desenvolvimento, oferecendo soluções padrão do setor para aspectos cruciais de um projeto, incluindo autenticação , controle de acesso , roteamento , rede , gerenciamento de estado e i18n .
A arquitetura sem cabeça da Refine permite a construção de aplicativos altamente personalizáveis, dissociando a lógica de negócios da interface do usuário e do roteamento. Isso permite integração com:
Quaisquer designs personalizados ou estruturas de interface do usuário, como o TailWindcss, juntamente com o suporte embutido para o design de formigas, a interface do usuário do material, o Mantine e o Chakra UI.
Várias plataformas, incluindo Next.js, Remix, React Native, Electron, etc., por uma interface de roteamento simples sem a necessidade de etapas de configuração adicionais.
Inicie um novo projeto com refinar em segundos usando o seguinte comando:
npm create refine-app@latest my-refine-appOu você pode criar um novo projeto no seu navegador:
Aqui está refino em ação, o código abaixo é um exemplo de um aplicativo CRUD simples usando o roteador Refine + React + UI do material:
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 >
) ;
} ;O resultado será assim:
Refine brilha em aplicativos B2B corporativos com intensidade de dados⚡, como painéis de administração , painéis e ferramentas internas . Graças ao suporte interno do SSR , ele também pode alimentar aplicativos voltados para o cliente, como as fachadas de lojas .
Você pode dar uma olhada em alguns exemplos ao vivo que podem ser construídos usando refinar do zero:
Consulte os documentos de contribuição para obter mais informações.
Se você tiver alguma dúvida relacionada ao projeto ou deseja discutir algo, junte -se ao nosso servidor Discord.
Estendemos nossa gratidão a todos os nossos numerosos colaboradores que criam plugins, ajudam com problemas e solicitam solicitações e respondemos a perguntas sobre discórdias e discussões no github.
Refine é um projeto orientado à comunidade e suas contribuições o melhoram continuamente.
Licenciado sob a licença do MIT, Copyright © 2021-presente RefinedEv
