Well first let me start by saying that this article is mostly intended for the Pega developer who is just starting out on the journey of leveraging cosmos react components and wants to create a component based on the instructions from design.pega.com.

It's also for the Lead Architects who I believe in the future would be working with professional front end developers for them I think it makes sense to know the basics.

While the design.pega.com provides sample code it does assume that the user has some experience with react and some minor tweaks are necessary to create a working component from the sample code.

So, in this article I will try to simplify this so that a developer with minimal experience in react can leverage the sample code to create a working component. We will use the CreditCard component as an example since it's defined in the design system but not available OOTB in 8.7.

We will follow a 3-step process

Step 1 - Create Cosmos digital experience (DX) component

For this follow the instructions available at Cosmos DX components in Cosmos React | Pega or the excellent article at Video: steps to create a Cosmos DX component | Support Center (pega.com) 

Use Type = Field and Subtype = text / integer 

Here's a short demo of what I did

Step 2 - Update the JSX in the Return block

• Open the index.jsx file inside the src\components folder.
• Go to design.pega.com and copy the JSX (from the return block)
• Delete the existing JSX from the return code block in the index.jsx file 

Paste the copied JSX in the return block of the index.jsx file

Step 3 - This is key, update the Import statement at the top of the index.jsx file and the Event Handler section of the index.jsx file.

And that's all now it's time to test

Now push the code to Pega and use the component for that follow the article at Publishing Cosmos DX components | Pega

I've attached the sample index.jsx file for reference