Ah yes, the hero component. We've all written one before. It's our next stop as we work our way down the blog template that we're implementing. The component itself is a lot more straight forward then the previous header component so let's take a look at what it took to implement it.

Hero Component

First, we need to create our component. I used the following command to scaffold out the Hero component:

jss scaffold Hero

After the component gets created, I modified the component definition to include our hero specific fields:

sitecore/definitions/components/Hero.sitecore.js

// eslint-disable-next-line no-unused-vars
import { CommonFieldTypes } from '@sitecore-jss/sitecore-jss-manifest';

export default function(manifest) {
  manifest.addComponent({
    name: 'Hero',
    fields: [
      { name: 'title', type: CommonFieldTypes.SingleLineText },
      { name: 'description', type: CommonFieldTypes.SingleLineText },
      { name: 'link', type: CommonFieldTypes.GeneralLink },
    ],
  });
}

After that is created, I modified my route data to include this component with some stubbed out route data for it, leaving my full route looking like this:

data/routes/en.yml

id: home-page
placeholders:
  jss-main:
   - id: header-content
   - componentName: Hero
     fields:
       title: Hero Title
       description: This is some description text
       link:
        href: https://www.sitecore.com/
        text: Visit Sitecore

It's nice that you can mix referenced components and components that are defined in this route YML file.

After this is done, it's just a matter of implementing our React component which should look something like this:

src/components/Hero/index.js

import React from 'react';
import { Text, Link } from '@sitecore-jss/sitecore-jss-react';

const Hero = ({ fields }) => (
  <div className="jumbotron p-3 p-md-5 text-white rounded bg-dark">
    <div className="col-md-6 px-0">

      {
        fields.title && 
          <h1 className="display-4 font-italic"><Text field={fields.title} /></h1>
      }

      {
        fields.description && 
          <p className="lead my-3"><Text field={fields.description} /></p>
      }

      {
        fields.link && 
          <p className="lead mb-0">
            <Link field={fields.link} className="text-white font-weight-bold" />
          </p>
      }

    </div>
  </div>
);

export default Hero;

That's pretty much it! You should now have a hero component displaying on your homepage route.

View this code on GitHub with the "hero" tag.

Additional Resources

Here are some JSS resources I found since my last post that I've enjoyed:

Getting Started with JSS by Rob Earlam

Nice video overview of Sitecore JSS. Explains at the available services at a high level.

A Walkthrough of Sitecore JSS commands by Robbert Hock

Found this article useful. I had actually forgotten about the scaffold command and I had been building them out by hand. Nice having some of the boilerplate done for you when you're creating components.

Sitecore JavaScript Services - Manifest API Demystified by Anastasiya Flynn

Explains the manifest API and all of it's functions in detail and how the various code-first definitions get translated into Sitecore items. Includes some lessons learned that could save you some time in the future.