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