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.

Requests traveling from component to the Search API and back.

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.

Do you have some feedback for us?

If you have suggestions for improving this article,