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.