无限制地构建用它就够了！超灵活的WEB应用程序框架

　　《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个开源的、无头的Web应用程序框架，在开发时考虑了灵活性。
　　主要特征使用单个CLI命令进行零配置、一分钟设置用于15多种后端服务的连接器，包括RESTAPI、GraphQL、NestJsCRUD、Airtable、Strapi、Strapiv4、StrapiGraphQL、Supabase、Hasura、Nhost、Appwrite、Firebase、Directus和AltogicNext。js或Remix支持SSR使用ReactQuery完善状态管理和突变使用您选择的任何路由器库的高级路由身份验证和访问控制流程的提供商对实时实时应用程序的开箱即用支持轻松的审核日志和文档版本控制面向未来的稳健架构完整的测试覆盖快速入门指南
　　开始使用细化的最快方法是使用superplate项目启动工具。运行以下命令来创建一个新的以AntDesignSystem配置为默认UI框架的细化项目：npxsuperplateclipresetrefineantdmyproject
　　设置完成后，导航到项目文件夹并使用以下命令启动项目：npmrundev
　　您可以通过http：localhost：3000访问您的优化应用程序：
　　代码：import｛Refine，useMany｝import｛useTable，List，Table，DateField，Layout，ReadyPage，notificationProvider，ErrorComponent，｝importrouterProviderfrompankodrefinereactrouterv6；importdataPimportpankodrefineantddiststyles。min。constApp：React。FC（）｛return（RefinerouterProvider｛routerProvider｝dataProvider｛dataProvider（https：api。fakerest。refine。dev）｝resources｛〔｛name：posts，list：PostList｝〕｝Layout｛Layout｝ReadyPage｛ReadyPage｝notificationProvider｛notificationProvider｝catchAll｛ErrorComponent｝）；｝；exportconstPostList：React。FC（）｛const｛tableProps｝useTableIPost（）；constcategoryIdstableProps？。dataSource？。map（（item）item。category。id）？？〔〕；const｛data，isLoading｝useManyICategory（｛resource：categories，ids：categoryIds，queryOptions：｛enabled：categoryIds。length0，｝，｝）；return（ListTableIPost｛。。。tableProps｝rowKeyidTable。ColumndataIndextitletitletitleTable。ColumndataIndex｛〔category，id〕｝titlecategoryrender｛（value：number）｛if（isLoading）｛returnloading。。。；｝returndata？。data。find（（item：ICategory）item。idvalue，）？。｝｝Table。ColumndataIndexcreatedAttitlecreatedAtrender｛（value）DateFieldformatLLLvalue｛value｝｝TableList）；｝；exportdefaultAinterfaceIPost｛title：createdAt：category：｛id：number｝；｝interfaceICategory｛id：title：｝
　　现在，您应该看到输出为一个填充了postcategory数据的表：
　　基础示例
　　第一个使用MaterialUI的应用
　　首先，使用以下命令运行superplate：npxsuperplatecliorefinemuitutorial
　　数据提供者是精炼的组件，可以方便地使用不同的API和数据服务。要使用我们的FakeRESTAPI，我们将使用SimpleRESTDataprovider。
　　接下来，导航到项目文件夹并运行以下命令来安装所需的包：npmipankodrefinesimplerest
　　将内容替换为App。tsx以下代码：import｛Refine｝import｛Layout，ErrorComponent，ReadyPage，LightTheme，CssBaseline，ThemeProvider，GlobalStyles，RefineSnackbarProvider，notificationProvider，｝importrouterProviderfrompankodrefinereactrouterv6；importdataPconstApp：React。FC（）｛return（ThemeProvidertheme｛LightTheme｝CssBaselineGlobalStylesstyles｛｛html：｛WebkitFontSmoothing：auto｝｝｝RefineSnackbarProviderRefinerouterProvider｛routerProvider｝dataProvider｛dataProvider（https：api。fakerest。refine。dev，）｝notificationProvider｛notificationProvider｝Layout｛Layout｝ReadyPage｛ReadyPage｝catchAll｛ErrorComponent｝RefineSnackbarProviderThemeProvider）；｝；exportdefaultA
　　运行以下命令以在开发模式下启动应用程序：npmrundev
　　END
　　开源协议：MITlicense
　　开源地址：https：github。comrefinedevrefine