Elasticsearch、OpenSearch、Solr、MongoDB 用の UI コンポーネント ライブラリ: React および Vue で利用可能
e-コマース検索 UI の構築方法を読む
a.) React を使用する、または b.) Vue を使用する
他の JS フレームワーク、React Native または Flutter 用の検索 UI を構築している場合は、Searchbox を確認してください。
reactiveapps.io で ReactiveSearch マーケットプレイスをチェックしてください。
スケッチ用の Web デザイナー テンプレート。
スケッチ用の iOS および Android デザイナー テンプレート。
ReactiveSearch は、React および Vue の UI コンポーネント ライブラリであり、ReactiveSearch クラウドと連携するように設計されています。リスト、範囲、検索 UI、結果表示、AI Answer、チャートで構成される 20 を超える UI コンポーネントがあり、既存の UI コンポーネントをライブラリに取り込む方法もあります。
UI コンポーネントは、インデックスのフィルタリングまたは検索に使用できます。例えば：
SingleListセンサー コンポーネントは、選択されたアイテムに基づいて完全一致フィルターを適用します。RangeSliderコンポーネントは、UI から選択された値に基づいて数値範囲クエリを適用します。SearchBoxコンポーネントは、ユーザーが入力した検索語に基づいて候補と検索クエリを適用します。 UI コンポーネントは一緒に使用でき ( react prop を使用するとコンポーネントごとのレベルで構成できます)、結果表示 UI コンポーネントを介して一致する結果をレンダリングできます。
ReactiveSearch は、結果 (別名ヒット) を表示するための次の組み込み表示コンポーネントをサポートしています。
react機能により、多数の UI コンポーネントがユーザー インタラクションに基づいて反応的に更新できる複雑な UI を作成できます。className`` and innerClass` プロパティのサポートを備えた、スコープおよびスタイル設定されたコンポーネントが付属しています。ThemeProviderを介してテーマを設定できます。ReactiveSearch v4 (現在のメジャー リリース) 以降、ライブラリは検索インテントのみを送信します。この仕様はここにあります - ReactiveSearch API ref. ReactiveSearch クラウドで構成した検索エンジンの選択に基づいて、検索クエリ DSL が ReactiveSearch クラウドによって生成されます。このアプローチはより安全であるだけでなく、サーバー側で検索ビジネス ロジックを転送することもできます。
ReactiveSearch v3 (最後のメジャー リリース) を使用している場合、ElasticSearch のクエリ DSL を介した ReactiveSearch API の使用はオプトイン機能です。 ReactiveBaseコンポーネントで、 enableAppbaseプロパティをtrueに設定する必要があります。これは、バックエンドに appbase.io を使用していることを前提としています。
すべての ReactiveSearch コンポーネントに対するReactiveSearch APIの使用法を示すこの KitchenSink アプリをチェックすることをお勧めします。
⬆ トップに戻る
プレイグラウンドでライブ コンポーネント プレイグラウンド ストーリーをお試しください。ストーリーのプレイグラウンド部分にあるノブセクションに注目して、各小道具を微調整して効果を確認してください。
ReactiveSearch を使用して構築された、現実世界のアプリからインスピレーションを得た一連のライブ デモ。
ウェブサイトの例セクションですべてを確認できます。
⬆ トップに戻る
ここでは、 ReactiveSearch同様の目的を持つ他のプロジェクトとどのように比較されるかを共有します。
| # | リアクティブサーチ | サーチキット | インスタントサーチ |
|---|---|---|---|
| バックエンド | Elasticsearch、OpenSearch、Solr、MongoDB、OpenAI | 任意の Elasticsearch クラスターでホストされている任意の Elasticsearch インデックス。 | 独自の検索エンジンである Algolia 用にカスタム構築されています。 |
| 発達 | 積極的に開発および保守されています。 | 積極的な問題への対応、一部の開発とメンテナンス。 | 積極的に開発および保守されています。 |
| オンボーディング体験 | スターター アプリ、ライブ インタラクティブ チュートリアル、スタート ガイド、コンポーネント プレイグラウンド、すべてのコンポーネントにはコードサンドボックスを使用したライブ動作デモがあります。 | 入門チュートリアル。ライブ コンポーネント デモはなく、多くのコンポーネントの参照仕様がまばらです。 | スターター アプリ、スタート ガイド、コンポーネント プレイグラウンド。 |
| スタイリングサポート | スタイル設定およびスコープ指定されたコンポーネント。外部 CSS インポートは必要ありません。豊富なテーマが React 小道具としてサポートされています。 | BEM を使用した CSS ベースのスタイル。スコープはコンポーネントに限定されません。 SCSS でサポートされるテーマ。 | CSS ベースのスタイル。外部スタイルのインポートが必要です。 CSS を操作することでテーマをサポートします。 |
| コンポーネントの種類 | リスト、範囲、検索、日付、地図、結果表示。独自の UI コンポーネントを使用できます。 | リスト、範囲、検索*、結果*。独自の UI コンポーネントは使用できません。 (検索と結果のコンポーネントは 1 つだけなので、カスタマイズ可能にするためにさらに多くのコードを記述する必要があります) | リスト、範囲、検索、結果。独自の UI コンポーネントを使用できます。 |
| サポートされている配布プラットフォーム | React、Web 用 Vue、モバイル用 React Native。 | Web 向けの反応。 | React、Vue、Angular、Web 用のバニラ JS、モバイル用の React Native がありますが、後者には UI コンポーネントがありません。 |
このセクションへの貢献を歓迎します。プロジェクトを構築している場合、または同様のスペースにある別のプロジェクトをご存知の場合は、お知らせください。比較を更新します。
⬆ トップに戻る
ReactiveSearch のインストールはコマンド 1 つだけです。
npm install @ appbaseio / reactivesearchここで React のクイックスタート ガイドを確認できます。
npm install @ appbaseio / reactivesearch - vueここで Vue のクイックスタート ガイドを確認できます。
React ライブラリの公式ドキュメントは docs.reactivesearch.io/docs/reactivesearch/react にあります。
コンポーネントは 4 つのセクションに分かれています。
ライブラリの Vue バージョンのドキュメントは、docs.reactivesearch.io/docs/reactivesearch/vue で入手できます。
⬆ トップに戻る
投稿ガイドをご確認ください。
ReactiveSearch API ElasticSearch、OpenSearch、Solr、MongoDB、OpenAI 用の API ゲートウェイ (すぐに使用できるセキュリティ、レート制限機能、レコード分析、およびリクエスト ログ)。
searchbox ReactiveSearch Cloud で結果をクエリおよび表示するための、軽量でパフォーマンスに重点を置いた検索ボックス UI ライブラリ。
dejavu Elasticsearch / OpenSearch データ ビューアおよびエディタ
appbase-js UI コンポーネントに加えてデータのインデックスを作成する必要がある場合に使用します。
⬆ トップに戻る
