Creating a React component using the Sitecore-first workflow

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:

• When it comes to headless development with Sitecore, there are –as you probably know- two main development workflows: the code-first and the Sitecore-first. While the code-first workflow can work for small sites, the Sitecore-first workflow is recommended for larger applications. Because JSS applications created based on official application samples are set up to use the code-first workflow by default, developers often need to transition JSS apps from code-first to Sitecore-first and to remove code-first artifacts from the JSS app

• Here’s an article about applying the Helix principles in a headless application 

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 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:

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:

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:

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:

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: