Pustaka komponen UI untuk Elasticsearch, OpenSearch, Solr, MongoDB: Tersedia untuk React dan Vue
Baca cara membuat UI penelusuran e-niaga
a.) dengan React, atau b.) dengan Vue
Lihat Kotak Pencarian jika Anda membuat UI pencarian untuk kerangka kerja JS lainnya, React Native atau Flutter.
Kunjungi pasar ReactiveSearch di reactiveapps.io.
Templat desainer web untuk sketsa.
Templat desainer iOS dan Android untuk sketsa.
ReactiveSearch adalah pustaka komponen UI untuk React dan Vue, yang dirancang untuk bekerja dengan cloud ReactiveSearch. Ini memiliki lebih dari 20 komponen UI yang terdiri dari Daftar, Rentang, UI Pencarian, tampilan Hasil, Jawaban AI, Bagan, dan cara untuk membawa komponen UI yang ada ke perpustakaan.
Komponen UI dapat digunakan untuk memfilter atau mencari indeks. Misalnya:
SingleList menerapkan filter pencocokan tepat berdasarkan item yang dipilih.RangeSlider menerapkan kueri rentang numerik berdasarkan nilai yang dipilih dari UI.SearchBox menerapkan saran dan permintaan pencarian berdasarkan istilah pencarian yang diketik oleh pengguna. Komponen UI dapat digunakan bersama ( prop react memungkinkan konfigurasi ini pada tingkat per komponen) dan merender hasil yang cocok melalui komponen UI tampilan hasil.
ReactiveSearch mendukung komponen tampilan bawaan berikut untuk menampilkan hasil (alias hit):
react komponen UI memungkinkan pembuatan UI yang kompleks di mana sejumlah komponen UI dapat diperbarui secara reaktif berdasarkan interaksi pengguna.className`` and innerClass`.ThemeProvider .Memulai ReactiveSearch v4 (rilis besar saat ini), perpustakaan hanya mengirimkan maksud pencarian, spesifikasi untuk ini ada di sini - ReactiveSearch API ref. Berdasarkan pilihan mesin pencari yang Anda konfigurasikan di cloud ReactiveSearch, permintaan pencarian DSL kemudian dihasilkan oleh cloud ReactiveSearch. Pendekatan ini lebih aman dan juga memungkinkan transfer logika bisnis pencarian di sisi server.
Jika Anda menggunakan ReactiveSearch v3 (rilis besar terakhir), penggunaan ReactiveSearch API melalui DSL kueri ElasticSearch adalah fitur keikutsertaan. Anda perlu menyetel prop enableAppbase sebagai true di komponen ReactiveBase Anda. Ini mengasumsikan bahwa Anda menggunakan appbase.io untuk backend Anda.
Kami merekomendasikan untuk memeriksa Aplikasi KitchenSink ini yang menunjukkan penggunaan ReactiveSearch API untuk semua komponen ReactiveSearch.
⬆ Kembali ke Atas
Cobalah cerita taman bermain komponen langsung di taman bermain. Carilah bagian kenop di bagian taman bermain cerita untuk mengubah setiap penyangga dan melihat efeknya.
Serangkaian demo langsung yang terinspirasi oleh aplikasi dunia nyata, dibuat dengan ReactiveSearch.
Anda dapat memeriksa semuanya di bagian contoh situs web.
⬆ Kembali ke Atas
Di sini, kami berbagi bagaimana ReactiveSearch dibandingkan dengan proyek lain yang memiliki tujuan serupa.
| # | Pencarian Reaktif | Kit Pencarian | Pencarian Instan |
|---|---|---|---|
| Bagian belakang | Elasticsearch, OpenSearch, Solr, MongoDB, OpenAI | Indeks Elasticsearch apa pun yang dihosting di kluster Elasticsearch mana pun. | Dibuat khusus untuk Algolia, mesin pencari berpemilik. |
| Perkembangan | Dikembangkan dan dipelihara secara aktif. | Respons masalah aktif, beberapa pengembangan dan pemeliharaan. | Dikembangkan dan dipelihara secara aktif. |
| Pengalaman Orientasi | Aplikasi pemula, tutorial interaktif langsung, panduan memulai, taman bermain komponen, setiap komponen memiliki demo kerja langsung dengan kode dan kotak. | Tutorial memulai, tidak ada demo komponen langsung, spesifikasi referensi yang jarang untuk banyak komponen. | Aplikasi pemula, panduan memulai, taman bermain komponen. |
| Dukungan Gaya | Komponen yang diberi gaya dan cakupan. Tidak diperlukan impor CSS eksternal. Tema yang kaya didukung sebagai props React. | Gaya berbasis CSS dengan BEM, tidak tercakup dalam komponen. Tema didukung dengan SCSS. | Gaya berbasis CSS, memerlukan impor gaya eksternal. Tema didukung dengan memanipulasi CSS. |
| Jenis Komponen | Daftar, Rentang, Pencarian, Tanggal, Peta, Tampilan Hasil. Dapat menggunakan komponen UI Anda sendiri. | Daftar, Rentang, Pencarian*, Hasil*. Tidak dapat menggunakan komponen UI Anda sendiri. (Hanya satu komponen untuk Pencarian dan Hasil, sehingga lebih banyak kode yang harus ditulis agar dapat disesuaikan) | Daftar, Rentang, Pencarian, Hasil. Dapat menggunakan komponen UI Anda sendiri. |
| Platform Distribusi yang Didukung | Bereaksi, Vue untuk Web, Bereaksi Asli untuk seluler. | Bereaksi untuk Web. | React, Vue, Angular, vanilla JS untuk Web, React Native untuk seluler tetapi yang terakhir tidak memiliki komponen UI. |
Kami menyambut baik kontribusi pada bagian ini. Jika Anda sedang membangun sebuah proyek atau Anda mengetahui proyek lain yang berada di bidang yang sama, beri tahu kami dan kami akan memperbarui perbandingannya.
⬆ Kembali ke Atas
Menginstal ReactiveSearch hanyalah satu perintah.
npm install @ appbaseio / reactivesearchAnda dapat melihat panduan memulai cepat dengan React di sini.
npm install @ appbaseio / reactivesearch - vueAnda dapat melihat panduan memulai cepat dengan Vue di sini.
Dokumen resmi untuk perpustakaan React ada di docs.reactivesearch.io/docs/reactivesearch/react.
Komponennya dibagi menjadi empat bagian:
Pustaka versi Docs for Vue tersedia di docs.reactivesearch.io/docs/reactivesearch/vue.
⬆ Kembali ke Atas
Silakan periksa panduan kontribusi.
ReactiveSearch API API Gateway untuk ElasticSearch, OpenSearch, Solr, MongoDB, OpenAI (Keamanan bawaan, Fitur Batas Nilai, Analisis Catatan, dan Log Permintaan).
searchbox Pustaka UI kotak pencarian yang ringan dan berfokus pada kinerja untuk melakukan kueri dan menampilkan hasil dengan ReactiveSearch Cloud.
dejavu Elasticsearch / penampil dan editor data OpenSearch
appbase-js Saat Anda perlu mengindeks data selain komponen UI
⬆ Kembali ke Atas
