Introduction to Commerce React Components
Info: Commerce React Components require a standard or premium Bloomreach Content license. Contact Bloomreach for licensing details.
Commerce React Components provide a set of React libraries that enable a React single-page application (SPA) to integrate with Bloomreach Content, Bloomreach Discovery, and other commerce backend platforms. Integration is achieved through REST and GraphQL APIs.
Overview
A typical implementation uses a React SPA with project-specific components. You can use Commerce React Components to manage communication with the brX GraphQL Service, supporting integration with Bloomreach Discovery and other commerce backend platforms. For integration with Bloomreach Content, use the Bloomreach SPA Integration SDKs.
Diagram: The diagram illustrates a React SPA structured in several layers: Project Specific Components, Commerce React Components, React SDK, SPA SDK, and Apollo Client. Project Specific Components interact with Commerce React Components, React SDK, and SPA SDK. Commerce React Components use Apollo Client to communicate with the brX GraphQL Service. The SPA SDK connects to Bloomreach Content via REST, while Apollo Client connects to the brX GraphQL Service via GraphQL. The brX GraphQL Service integrates with both Bloomreach Discovery and a commerce backend platform.
For installation instructions, see Install Commerce React Components.
Contents of Commerce React Components
The library includes:
- React Hooks that encapsulate interactions with the brX GraphQL Service. Use these hooks to implement commerce functionality in your components.
- Higher-Order Components (HOCs), which provide the same features as the hooks for use in class-based React components.
- GraphQL types generated from the brX GraphQL Service schema, available for use in GraphQL queries and mutations.
- Common types for React component properties, parameters, and shared interfaces or classes.
API Documentation
You can generate API documentation for Commerce React Components from the Bloomreach Content source code. For instructions, see build the API documentation.
Enterprise customers can also access API documentation in the source distributions. To view the documentation:
- Download the source archive as described on Download the Source of the brX GraphQL Service.
- Extract the archive.
- Open
connector-components-react/docs/apis/index.htmlin your browser.