Create Banner in JSS app

Step 1:

Ø  Creating a Banner component

Ø  Run this command

  jss scaffold Banner

Step 2:

Defining the fields

fields: [

      { name: 'title', type: CommonFieldTypes.SingleLineText },

      { name: 'description', type: CommonFieldTypes.SingleLineText },

      { name: 'ctaurl', type: CommonFieldTypes.SingleLineText }

  ]

Step 3:

Design the HTML structure

    <h1>Hey, This is my SitecoreShades Banner</h1>

    <Text tag="h2" className="display-4" field={fields.title} />

    <Text tag="p" className="display-4" field={fields.description} />

    <Text tag="a" className="display-4" field={fields.ctaurl} />

  </div>

Step 4:

Add the component with field values in page

Step 5:

Ø  Output

Step 6:

Ø  Deploy the changes to my sitecore instance

Ø  Run this command

jss deploy app --acceptCertificate FD:12:F0:2E:42:C5:48:F3:58:39:03:27:F7:CF:45:DC:AF:DB:72:91 -c –d

Ø  See your sitecore url

Step 7:

Verify the changes in sitecore content editor.

Step 8:

let me check the page in experience editor & We can edit the page here

So we can remove the components from here.