refine
v
Refine -это мета-обратная работа для веб-приложений, тяжелых. Он рассматривает широкий спектр вариантов использования предприятия, включая внутренние инструменты, панели администратора, мониторные панели и приложения B2B.
Основные крючки и компоненты Recine оптимизируют процесс разработки, предлагая стандартные решения для важнейших аспектов проекта, включая аутентификацию , контроль доступа , маршрутизацию , сеть , управление государством и I18N .
Архитектура безголов, обеспечивая создание высоко настраиваемых приложений путем отделения бизнес -логики от пользовательского интерфейса и маршрутизации. Это позволяет интегрировать с:
Любые пользовательские дизайны или рамки пользовательского интерфейса, такие как Tailwindcss, наряду со встроенной поддержкой дизайна муравья, материала пользовательского интерфейса, мантина и чакры пользовательского интерфейса.
Различные платформы, в том числе Next.js, Remix, React Native, Electron и т. Д., Простым интерфейсом маршрутизации без необходимости дополнительных шагов настройки.
Начните новый проект с уточнением за секунды, используя следующую команду:
npm create refine-app@latest my-refine-appИли вы можете создать новый проект в своем браузере:
Вот усовершенствование в действии, приведенный ниже код является примером простого приложения CRUD с использованием RECINE + 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 >
) ;
} ;Результат будет выглядеть так:
Уточнение сияет на интенсивных данных ⚡ Enterprise B2B-приложения, такие как административные панели , панели мониторинга и внутренние инструменты . Благодаря встроенной поддержке SSR , она также может питать приложения, связанные с клиентами, такие как витрины .
Вы можете взглянуть на некоторые живые примеры, которые можно построить с помощью уточнения с нуля:
Обратитесь к документам вклада для получения дополнительной информации.
Если у вас есть какие -либо сомнения, связанные с проектом или вы хотите что -то обсудить, присоединяйтесь к нашему серверу Discord.
Мы выражаем нашу благодарность всем нашим многочисленным участникам, которые создают плагины, помогают с проблемами и вытягивают запросы, и отвечаем на вопросы о дискордировании и дискуссиях GitHub.
RECINE-это общественный проект, и ваш вклад постоянно улучшает его.
Лицензировано по лицензии MIT, Copyright © 2021-Present Refinedev
