refine
v
Refine 은 Crud-Heavy 웹 애플리케이션을위한 반응 메타 프레임 워크입니다. 내부 도구, 관리자 패널, 대시 보드 및 B2B 앱을 포함한 광범위한 엔터프라이즈 사용 사례를 다룹니다.
Refine의 핵심 후크 및 구성 요소는 인증 , 액세스 제어 , 라우팅 , 네트워킹 , 주 관리 및 i18N을 포함하여 프로젝트의 중요한 측면에 대한 산업 표준 솔루션을 제공하여 개발 프로세스를 간소화합니다.
Refine의 헤드리스 아키텍처를 통해 UI의 비즈니스 로직을 분리하고 라우팅을 통해 고도로 사용자 정의 가능한 응용 프로그램을 구축 할 수 있습니다. 이것은 다음과 통합 할 수 있습니다.
ANT 디자인, 재료 UI, Mantine 및 Chakra UI에 대한 내장 지원과 함께 Tailwindcss와 같은 모든 맞춤형 디자인 또는 UI 프레임 워크.
추가 설정 단계가 필요없는 간단한 라우팅 인터페이스를 통해 Next.js, Remix, React Native, Electron 등을 포함한 다양한 플랫폼.
다음 명령을 사용하여 몇 초 만에 정련 된 새 프로젝트를 시작하십시오.
npm create refine-app@latest my-refine-app또는 브라우저에서 새 프로젝트를 만들 수 있습니다.
다음은 Refine in Cort입니다. 아래 코드는 Refine + React Router + Material UI를 사용한 간단한 CRUD 응용 프로그램의 예입니다.
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 >
) ;
} ;결과는 다음과 같습니다.
Data-Haterne- Enterprise B2B 애플리케이션에서 관리 패널 , 대시 보드 및 내부 도구 와 같은 정개 . 내장 된 SSR 지원 덕분에 Storefronts 와 같은 고객 대면 응용 프로그램에도 전원이 공급 될 수도 있습니다.
정제를 사용하여 처음부터 처음부터 구축 할 수있는 라이브 예제를 살펴볼 수 있습니다.
자세한 내용은 기여 문서를 참조하십시오.
프로젝트와 관련된 의문이 있거나 무언가에 대해 논의하려면 Discord 서버에 가입하십시오.
우리는 플러그인을 만들고, 문제를 지원하고 요청을 당기고, 불화 및 Github 토론에 대한 질문에 응답하는 모든 기고자들에게 감사를 전합니다.
Refine은 커뮤니티 중심의 프로젝트이며 귀하의 기여는 지속적으로이를 향상시킵니다.
MIT 라이센스에 따라 라이센스, Copyright © 2021-Present Refinedev
