A developer wants to create a new component to display content from a datasource.

According to the Sitecore XM Cloud Documentation for Developers1, a data source item is a content item that provides the content for a component. A data source item can have fields, such as text, image, or link, that can be edited by the content author in the XM Cloud Pages editor.To create a new component that displays content from a data source item, you need to follow these steps2:

Create or reuse a SXA Module, which is a folder that contains the renderings, data templates, and media items for your components.

Insert a new rendering item in the SXA Module, which defines the metadata and parameters for your component. You can also clone an existing rendering item that uses a data source item and modify it as needed.

Use the JSS CLI to scaffold out a new React component in your Next.js application, which defines the layout, style, and logic for your component. You can also copy and paste an existing React component that uses a data source item and modify it as needed.

Register the React component in the Components builder and add it to the Components library.

In the XM Cloud Pages editor, drag and drop the component to the page and select or create a data source item for the component. You can also edit the data source item’s fields in the Properties panel.

2:Create a component that uses a data source item | Sitecore Documentation1:XM Cloud Documentation for Developers - Sitecore