refine

主页|文档|示例|不和谐|博客

低/无代码和“从头开始”之间的甜蜜点，用于繁重的应用程序。
精炼是开源的，企业的元框架。它为从管理面板到仪表板和内部工具提供了无头解决方案。

什么是精炼？

精炼是针对Crud繁重的Web应用程序的React Meta-Framework。它解决了广泛的企业用例，包括内部工具，管理面板，仪表板和B2B应用程序。

通过为项目的关键方面提供行业标准的解决方案，包括身份验证，访问控制，路由，网络，州管理和I18N ，可以简化开发过程。

Refine的无头体系结构可以通过将业务逻辑与UI和路由分离来构建高度可自定义的应用程序。这允许与：

• 任何定制设计或UI框架（例如TailWindCSS），以及对蚂蚁设计，材料UI，Mantine和Chakra UI的内置支持。

• 通过简单的路由接口，不需要其他设置步骤，包括Next.js，React，React Native，Electron等各种平台。

⚡尝试完善

使用以下命令在几秒钟内使用精炼启动一个新项目：

npm create refine-app@latest my-refine-app

或者，您可以在浏览器上创建一个新项目：

快速开始

这是在采取行动中，以下代码是使用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 >
  ) ;
} ;

结果看起来像这样：

用例

精炼数据密集型⚡企业B2B应用程序，例如管理面板，仪表板和内部工具。得益于内置的SSR支持，它还可以为面向客户的应用程序（例如店面）提供动力。

您可以查看一些可以从头开始使用完善的实时示例：

• 完整功能的CRM应用
• 完整功能的管理面板
• Win95风格的管理面板？
• PDF发票生成器
• 中等克隆 - 现实世界示例
• 多重示例
• 店面
• 有关更多示例，请参阅模板页面
• 可以在此处找到更多精炼的动力不同用法方案

关键功能

• 精炼DevTools - 更深入地深入您的应用程序并提供有用的见解
• 15多个后端服务的连接器，包括REST API，GraphQl，Nestjs Crud，Airtable，Strapi，Strapi V4，Supabase，Hasura，AppWrite，Nestjs-Query，Firebase，Sanity，Sanity和Directus。
• SSR支持Next.js＆Remix和Advanced Routing，并带有您选择的任何路由器库
• 基于您的API数据结构的CRUD UIS自动产生
• 完美的国家管理和反应查询突变
• 无缝身份验证和访问控制流的提供商
• 实时 /实时应用程序的开箱即用支持
• 简单的审核日志和文档版本

学习精炼

• 导航到有关构建全面的CRUD应用程序的教程，请您完成整个过程的每个步骤。
• 访问指南和概念，以了解基本概念。
• 了解有关不同使用方案的高级教程的更多信息。

贡献

有关更多信息，请参阅贡献文档。

如果您对项目有任何疑问或想讨论某些内容，请加入我们的Discord服务器。

贡献者♥谢谢谢

我们对所有众多贡献者表示感谢，他们创建插件，协助问题并提出请求，并回答有关Discord和Github讨论的问题。

完善是一个以社区为导向的项目，您的贡献不断改善。

执照

根据MIT许可，版权所有©2021-PRESENTINGEDEV