refine - ReactベースのCRUDアプリケーションを制約なしで構築します。

(Build your React-based CRUD applications, without constraints.)

Created at: 2021-01-20 20:01:32
Language: TypeScript
License: MIT


ReactベースのCRUDアプリケーションを制約なしで構築します。
柔軟性を念頭に置いて開発されたオープンソースのヘッドレスWebアプリケーションフレームワーク。

不和 ツイッターフォロー

洗練 - 100%オープンソースのReactフレームワークにより、Webアプリを3倍高速に構築|製品ハント

すごい 保守性 テストカバレッジ エヌピーエム版 ティッカー 寄稿者規約


ハウワークス-洗練

絞り込みとは何ですか?

refineは、Webアプリケーションの迅速な開発のためのReactベースのフレームワークです。 CRUD操作で要求される反復的なタスクを排除し、認証アクセス制御ルーティングネットワーキング状態管理i18nなどの重要な部分に業界標準ソリューションを提供します。

Refine設計上ヘッドレスであるため、無制限のスタイリングとカスタマイズオプションを提供します。

「ヘッドレス」とはどういう意味ですか?

事前にスタイル設定されたコンポーネントの限られたセットではなく、refineはヘルパーのコレクションです。これらはすべて UIコンポーネントビジネス ロジックから分離されているため、UIをカスタマイズしたり、独自のフローをコーディングしたりすることはできません。

hooks
components
providers

refineは、好みのカスタムデザインUIフレームワークとシームレスに連携します。便宜上、AntデザインシステムマテリアルUI、マンタインチャクラUIの既製の統合が付属しています。

ユースケース

Refineは、管理パネルダッシュボード内部ツールなどのデータ集約型アプリケーションに輝きを放ちます。組み込みのSSRサポートのおかげで、refineストアフロントなどの顧客向けアプリケーションにも電力を供給することができます。

主な機能

⚙️ゼロ構成、1 つの CLI コマンドによる 1 分間のセットアップ

🔌REST API、GraphQL、NestJs CRUDAirtable、Strapi、Strapi v4Strapi GraphQLSupabaseHasuraNhostAppwriteFirebaseDirectusAltogic を含む15+ バックエンドサービス用のコネクタ

🌐ネクスト.jsまたはリミックスによるSSRサポート

Reactクエリによる完璧な状態管理突然変異

🔀任意のルーターライブラリを使用した高度なルーティング

🔐シームレスな認証アクセス制御フローのためのプロバイダー

ライブ/リアルタイムアプリケーションのすぐに使えるサポート

📄簡単な監査ログドキュメントのバージョン管理

💬あらゆるi18nフレームワークのサポート

💪将来を見据えた堅牢なアーキテクチャ

完全なテストカバレッジ

クイックスタート

絞り込みを開始する最も速い方法は、スーパープレートプロジェクトスターターツールを使用することです。 次のコマンドを実行して、デフォルトの UI フレームワークとしてAnt Design Systemで構成された新しい絞り込みプロジェクトを作成します。

npx superplate-cli --preset refine-antd my-project

セットアップが完了したら、プロジェクトフォルダに移動し、次のようにプロジェクトを開始します。

npm run dev

絞り込みアプリケーションは、http://localhost:3000:ようこそ乗船パブリックを消費しましょうプロジェクトに2つのリソース(投稿カテゴリ)を追加してください。の内容を次のコードに置き換えます。

fake REST API
src/App.tsx

import { Refine, useMany } from "@pankod/refine-core";
import {
    useTable,
    List,
    Table,
    DateField,
    Layout,
    ReadyPage,
    notificationProvider,
    ErrorComponent,
} from "@pankod/refine-antd";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";

import "@pankod/refine-antd/dist/styles.min.css";

const App: React.FC = () => {
    return (
        <Refine
            routerProvider={routerProvider}
            dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
            resources={[{ name: "posts", list: PostList }]}
            Layout={Layout}
            ReadyPage={ReadyPage}
            notificationProvider={notificationProvider}
            catchAll={<ErrorComponent />}
        />
    );
};

export const PostList: React.FC = () => {
    const { tableProps } = useTable<IPost>();

    const categoryIds =
        tableProps?.dataSource?.map((item) => item.category.id) ?? [];

    const { data, isLoading } = useMany<ICategory>({
        resource: "categories",
        ids: categoryIds,
        queryOptions: {
            enabled: categoryIds.length > 0,
        },
    });

    return (
        <List>
            <Table<IPost> {...tableProps} rowKey="id">
                <Table.Column dataIndex="title" title="title" />
                <Table.Column
                    dataIndex={["category", "id"]}
                    title="category"
                    render={(value: number) => {
                        if (isLoading) {
                            return "loading...";
                        }

                        return data?.data.find(
                            (item: ICategory) => item.id === value,
                        )?.title;
                    }}
                />
                <Table.Column
                    dataIndex="createdAt"
                    title="createdAt"
                    render={(value) => <DateField format="LLL" value={value} />}
                />
            </Table>
        </List>
    );
};

export default App;

interface IPost {
  title: string;
  createdAt: string;
  category: { id: number };
}

interface ICategory {
  id: number;
  title: string;
}

これで、出力が &data が入力されたテーブルとして表示されます。

post
category
最初の結果例

次のステップ

👉「改良<>Ant 設計チュートリアル」にジャンプして作業を続け、サンプルを本格的な CRUD アプリケーションに変えてください。

👉絞り込み<>追い風チュートリアルを参照して、純粋なヘッドレスな方法で絞り込みを使用する方法を学習してください。

👉基本情報」ページにアクセスして、基本的な概念に関する情報を入手してください。

👉詳細については、さまざまな使用シナリオの高度なチュートリアルを参照してください。

👉実際のファインフーズのデモプロジェクトをご覧ください。

👉インタラクティブなで遊ぶ

ロードマップ

リファインの公開ロードマップはこちらからご覧いただけます!

スターゲイザー

スターゲイザーズリポジトリ名簿 改良/改良

寄付

バグを発見した場合は、問題のバグレポートを提出してください。
タイプミスを修正したり、ドキュメントを更新したりする場合は、ここで問題を提起してください。
機能を提案したい場合は、ここで説明して詳細な問題を提起してください。

問題を修正したり、機能を提案したりする場合は、明確な説明のあるすべてのPRを歓迎し、奨励します。

貢献する方法についてもっと知る詳細はこちら

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

私たちの♥️貢献者

ライセンス

MITライセンスの下でライセンスされています, 著作権 © 2021-現在 リファインデブ