Introduction to Sitecore Search JS SDK for React
You can install Sitecore Search JS SDK for React from NPM in your React project to quickly integrate search experiences into your applications. At compile time, the SDK is added compiled into the browser application.
The Customer Engagement Console (CEC) is an important part of your implementation because it contains the configuration for your domain, including authentication, entities, attributes, sources, and features.
We recommend you familiarize yourself with the console. You will need to access various settings from the console during integration.
The default settings of the widgets always return results, however before you begin work with the SDK, make sure all widgets are published. You can modify or optimize all values at any time.
Integration architecture when using the JS SDK for React
At runtime, the SDK uses its built-in methods to access the Search APIs. Every request returns configuration data for your implementation from the CEC. The following diagram shows how the SDK orchestrates authentication, data requests and results, page and widget display, and event tracking.
On a lower level, your React application contains widget or UI components. They connect with the API endpoints by using the query hooks and the API adapter from the SDK. You can populate various UI components with values from the response.
Approaches to integrate using the JS SDK for React
We have identified two approaches you can take to integrate using the SDK. You can easily move from one approach to another midway through your project, if desired.
Rapid development using Search UI components - this approach requires the lowest developer effort and produces a viable application quickly. It uses the headless components from Search UI Components package.
Development without Search UI components - this approach requires query hooking your UI components to dispatch search requests and display results.