refine

ホームページ|ドキュメント|例|不和|ブログ

低/NOコードと、Crud Heavyアプリケーションの「ゼロから開始」の間のスイートスポット。
Refineは、オープンソースとして、EnterpriseのMeta-Frameworkを反応させます。管理パネルからダッシュボードや内部ツールまで、すべてのヘッドレスソリューションを提供します。

洗練とは何ですか？

Refineは、Crud Heavy Webアプリケーション向けのReactメタフレームワークです。内部ツール、管理パネル、ダッシュボード、B2Bアプリなど、幅広いエンタープライズユースケースに対応しています。

Refineのコアフックとコンポーネントは、認証、アクセス制御、ルーティング、ネットワーキング、国家管理、 I18Nなど、プロジェクトの重要な側面のための業界標準ソリューションを提供することにより、開発プロセスを合理化します。

Refineのヘッドレスアーキテクチャにより、UIおよびルーティングからビジネスロジックを切り離すことにより、高度にカスタマイズ可能なアプリケーションを構築できます。これにより、以下との統合が可能になります。

• TailWindCSSなどのカスタムデザインまたはUIフレームワーク、およびANTデザイン、材料UI、マンティン、チャクラUIの組み込みサポート。

• 追加のセットアップ手順を必要とせずに、単純なルーティングインターフェイスにより、Next.JS、Remix、React Native、Electronなどを含むさまざまなプラットフォーム。

refine洗浄してみてください

次のコマンドを使用して、数秒で洗練して新しいプロジェクトを開始します。

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 >
  ) ;
} ;

結果は次のようになります：

ユースケース

Refineは、管理パネル、ダッシュボード、内部ツールなどのデータ集約型エンタープライズB2Bアプリケーションに輝いています。組み込みのSSRサポートのおかげで、 StoreFrontsなどの顧客向けアプリケーションに強化することもできます。

Refineをゼロから使用して構築できるいくつかのライブ例をご覧ください。

• 完全に機能するCRMアプリケーション
• 完全に機能する管理パネル
• Win95スタイルの管理パネル？
• PDF請求書ジェネレーター
• 中クローン - 実世界の例
• マルチテナントの例
• ストアフロント
• その他の例については、テンプレートページを参照してください
• より多くの洗練されたさまざまな使用シナリオはこちらにあります

重要な機能

• devtoolsを洗練する - アプリをより深く掘り下げ、有用な洞察を提供する
• REST API、GraphQL、Nestjs Crud、Airtable、Strapi、Strapi V4、Supabase、Hasura、Appwrite、Nestjs-query、Firebase、Sanity、Directusなどの15以上のバックエンドサービス用コネクタ。
• next.js＆remixおよび任意のルーターライブラリを使用した高度なルーティングでのSSRサポート
• APIデータ構造に基づくCrud UIの自動生成
• Reactクエリ付きの完全な国家管理と突然変異
• シームレスな認証とアクセス制御フローのプロバイダー
• ライブ /リアルタイムアプリケーションのためのすぐに使用できるサポート
• 簡単な監査ログとドキュメントバージョン化

学習洗練

• 包括的なCRUDアプリケーションの構築に関するチュートリアルに移動します。プロセスの各ステップをガイドします。
• 基本的な概念について情報を得るには、ガイドと概念にアクセスしてください。
• さまざまな使用シナリオについては、詳細なチュートリアルの詳細をご覧ください。

貢献

詳細については、貢献ドキュメントを参照してください。

プロジェクトに関連する疑問がある場合、または何かについて話し合いたい場合は、Discordサーバーに参加してください。

貢献者♥♥ありがとう

プラグインを作成し、問題を支援し、リクエストを引き出し、DiscordとGithubの議論に関する質問に回答してくれる多くの貢献者に感謝します。

Refineはコミュニティ主導のプロジェクトであり、あなたの貢献は継続的にそれを改善します。

ライセンス

MITライセンスの下でライセンス、Copyright©2021-Present Refinedev