Elasticsearch, OpenSearch, Solr, MongoDB용 UI 구성 요소 라이브러리: React 및 Vue에서 사용 가능
전자상거래 검색 UI 구축 방법 읽기
a.) React를 사용하거나 b.) Vue를 사용하여
다른 JS 프레임워크, React Native 또는 Flutter용 검색 UI를 구축하는 경우 Searchbox를 확인하세요.
Reactiveapps.io에서 ReactiveSearch 마켓플레이스를 확인해 보세요.
스케치용 웹 디자이너 템플릿입니다.
스케치용 iOS 및 Android 디자이너 템플릿입니다.
ReactiveSearch는 ReactiveSearch 클라우드와 작동하도록 설계된 React 및 Vue용 UI 구성 요소 라이브러리입니다. 목록, 범위, 검색 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 클라우드에서 구성한 검색 엔진 선택에 따라 ReactiveSearch 클라우드에서 검색 쿼리 DSL이 생성됩니다. 이 접근 방식은 더 안전할 뿐만 아니라 서버 측에서 검색 비즈니스 로직을 전송할 수 있습니다.
ReactiveSearch v3(최종 주요 릴리스)을 사용하는 경우 ElasticSearch의 쿼리 DSL을 통한 ReactiveSearch API 사용은 선택 기능입니다. ReactiveBase 구성 요소에서 enableAppbase 속성을 true 로 설정해야 합니다. 이는 백엔드에 appbase.io를 사용한다고 가정합니다.
모든 ReactiveSearch 구성 요소에 ReactiveSearch API 사용하는 방법을 보여주는 KitchenSink 앱을 확인하는 것이 좋습니다.
⬆ 맨 위로 돌아가기
놀이터에서 라이브 컴포넌트 놀이터 이야기를 즐겨보세요. 스토리의 놀이터 부분에 있는 손잡이 섹션을 찾아 각 소품을 조정하고 효과를 확인하세요.
ReactiveSearch로 구축된 실제 앱에서 영감을 받은 라이브 데모 세트입니다.
웹사이트의 예제 섹션에서 모두 확인할 수 있습니다.
⬆ 맨 위로 돌아가기
여기서는 ReactiveSearch 비슷한 목표를 가진 다른 프로젝트와 어떻게 비교되는지 공유합니다.
| # | 리액티브서치 | 검색 키트 | 인스턴트 검색 |
|---|---|---|---|
| 백엔드 | 엘라스틱서치, 오픈서치, 솔라, 몽고DB, 오픈AI | 모든 Elasticsearch 클러스터에서 호스팅되는 모든 Elasticsearch 인덱스. | 독점 검색 엔진인 Algolia용으로 맞춤 제작되었습니다. |
| 개발 | 적극적으로 개발 및 유지 관리됩니다. | 적극적인 문제 대응, 일부 개발 및 유지 관리. | 적극적으로 개발 및 유지 관리됩니다. |
| 온보딩 경험 | 시작 앱, 실시간 대화형 튜토리얼, 시작 가이드, 구성 요소 플레이그라운드, 모든 구성 요소에는 코드샌드박스가 포함된 실시간 작업 데모가 있습니다. | 시작하기 튜토리얼, 라이브 구성 요소 데모 없음, 많은 구성 요소에 대한 희소 참조 사양. | 시작 앱, 시작 가이드, 구성 요소 놀이터. |
| 스타일링 지원 | 스타일이 지정되고 범위가 지정된 구성 요소. 외부 CSS 가져오기가 필요하지 않습니다. React props로 지원되는 풍부한 테마. | 구성요소 범위가 아닌 BEM을 사용한 CSS 기반 스타일입니다. SCSS에서 지원되는 테마입니다. | CSS 기반 스타일에는 외부 스타일 가져오기가 필요합니다. CSS를 조작하여 테마를 지원합니다. |
| 구성 요소 유형 | 목록, 범위, 검색, 날짜, 지도, 결과 표시. 자신만의 UI 구성 요소를 사용할 수 있습니다. | 목록, 범위, 검색*, 결과*. 자체 UI 구성요소를 사용할 수 없습니다. (검색 및 결과를 위한 구성 요소가 하나만 있으므로 사용자 정의를 위해 더 많은 코드를 작성해야 합니다.) | 목록, 범위, 검색, 결과. 자신만의 UI 구성요소를 사용할 수 있습니다. |
| 지원되는 배포 플랫폼 | React, 웹용 Vue, 모바일용 React Native. | 웹용으로 반응하세요. | React, Vue, Angular, 웹용 바닐라 JS, 모바일용 React Native이지만 후자에는 UI 구성요소가 없습니다. |
이 섹션에 대한 기여를 환영합니다. 프로젝트를 구축 중이거나 유사한 공간에 있는 다른 프로젝트를 알고 있는 경우 알려주시면 비교 내용을 업데이트하겠습니다.
⬆ 맨 위로 돌아가기
ReactiveSearch 설치는 하나의 명령일 뿐입니다.
npm install @ appbaseio / reactivesearch여기에서 React의 빠른 시작 가이드를 확인할 수 있습니다.
npm install @ appbaseio / reactivesearch - vue여기에서 Vue의 빠른 시작 가이드를 확인할 수 있습니다.
React 라이브러리의 공식 문서는 docs.reactivesearch.io/docs/reactivesearch/react에 있습니다.
구성 요소는 네 가지 섹션으로 구분됩니다.
Vue 버전의 라이브러리에 대한 문서는 docs.reactivesearch.io/docs/reactivesearch/vue에서 사용할 수 있습니다.
⬆ 맨 위로 돌아가기
기부안내를 확인해주세요.
ReactiveSearch API ElasticSearch, OpenSearch, Solr, MongoDB, OpenAI용 API 게이트웨이(기본 보안, 속도 제한 기능, 기록 분석 및 요청 로그).
검색 상자 ReactiveSearch Cloud를 사용하여 결과를 쿼리하고 표시하는 경량의 성능 중심 검색 상자 UI 라이브러리입니다.
dejavu Elasticsearch / OpenSearch 데이터 뷰어 및 편집기
appbase-js UI 구성요소 외에 데이터를 색인화해야 하는 경우
⬆ 맨 위로 돌아가기
