---
title: "Creating a React component using the Sitecore-first workflow"
description: "The Sitecore-first workflow makes component creation predictable and Helix-compliant. This guide covers building a React JSS component from schema to render."
canonical: "https://www.techguilds.com/blog/creating-react-component-using-sitecore-first-workflow/"
type: "BlogPosting"
author: "Albraa Nabelsi"
publishedAt: "2022-03-03T05:00:00.000Z"
updatedAt: "2026-05-20T20:53:52Z"
source: "https://www.techguilds.com/llms.txt"
---

# 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](https://doc.sitecore.com/xp/en/developers/hd/190/sitecore-headless-development/transitioning-from-code-first-to-sitecore-first.html) and to [remove code-first artifacts from the JSS app](https://doc.sitecore.com/xp/en/developers/hd/190/sitecore-headless-development/remove-code-first-artifacts-from-a-jss-app.html)
- Here’s an article about [applying the Helix principles in a headless application](https://www.techguilds.com/blog/sitecore-helix-in-headless-jss-and-nextjs-apps)

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:

[Image: 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:**

[Image: “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:

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

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

[Image: 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](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:

[Image: After deploying the build artifacts]

Read Next

[How to use Sitecore Helix principles in a headless application (React JSS and NextJS)](https://www.techguilds.com/blog/sitecore-helix-in-headless-jss-and-nextjs-apps) [How to use dynamic layouts in a headless Sitecore application](https://www.techguilds.com/blog/how-to-use-dynamic-layouts-in-headless-sitecore-applications)