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.

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.