Introduction to Sitecore Search JS SDK for React
Provides an overview of the integration architecture.
Using Sitecore Search JS SDK for React package you can quickly integrate search experiences into your React applications. You can install them in your project and at compile time, the SDK is integrated into your React 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.
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 Discover API. 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.