In this blog series, we've covered components registering with Headless SXA and those created without code using Sitecore Components. Now, we'll introduce a different implementation involving a component.
Regarding component implementation
The following features can be summarized with respect to the components already introduced.
- Headless SXA - Components that allow you to edit as you see fit, such as GraphQL.
- Sitecore Components - A no-code component builder tool that allows you to link to items managed by Sitecore and manage data within components.
- BYOC - Abbreviation for "bring your own components," this allows you to use web components created with React or other software.
This time, we would like to run a BYOC sample. The official page is as follows
Regarding samples
Some samples of components are available at the following pages
This time, we will apply the sample in app/byoc/ExampleHybridComponent.tsx. First, place this file under src~byoc. Then, add the following line to the file index.hybrid.ts.
TypeScript
import './ExampleHybridComponent';This completes the registration of the component. In fact, this is all that is required to complete the setup. This time, we will prepare the XM Cloud environment with a Docker instance in our local environment and use Pages by connecting it locally. The connection procedure is described here.
When you start Pages, you will see the following new components added
When actually placed, components can be placed as shown below.
Clicking on Configuration on the right side allows you to enter data that can be configured in this component.
Setting the data changes what is displayed in the component.
Thus, you can see that you can prepare components and change the contents of the content through Pages.
Summary
This time, we ran the sample code as is. In the next issue, we will confirm the operation of the code by introducing how the data is actually held and the role of what the code describes.