Creating a React component using the Sitecore-first workflow

Posted 03/03/2022 by Albraa Nabelsi

In this post, we’ll walk through the creation of a Reach component using the Sitecore-first workflow and following the Helix principles. Here’s a little bit of background to get you started:

Having taken care of transitioning to the Sitecore-first approach and removing the code-first artifacts, we can start.

First, let us start by creating a new template for the datasource:

The MyComponent template

The MyComponent template has two fields:

  • Heading – a Single Line Text field
  • Body – a Rich Text field

Next, we can create our component, we will need to create a Json Rendering:

“Component Name” field

Note that the “Component Name” field must have the name of the component in the JSS app!

Let’s configure the datasource template and location:

the datasource template and location

We are done with the backend for now. Let us build the front end. In your JSS app, under src/components/Feature/Demo, create a new folder called “MyComponent” (Just like the name in the rendering!) – create the index.js file inside that folder:

create the index.js file

To use the component in the experience editor, we must first add the new component to the allowed controls of our placeholder(s). We must also deploy the JSS app:

deploy the JSS app

Please refer to https://doc.sitecore.com/xp/en/developers/hd/190/sitecore-headless-development/walkthrough--connecting-a-jss-application-to-sitecore.html for more details.

After deploying the build artifacts, we can use the component in the experience editor:

After deploying the build artifacts