React Web Component

Create component: Summary.js

Method 1, extend Component

import React from 'react'

class Summary extends React.Component {
  render() {
    const {ingredients, steps, title} = this.props
    return (
      <div className="summary">
        <h1>{title}</h1>
        <p>
          <span>{ingredients.length} Ingredients | </span>
          <span>{steps.length} Steps </span>
        </p>
      </div>
    )
  }
}

Method 2, stateless functional component

const Summary = ({ingredients, steps, title}) => {
  return <div>
    <h1>{title}</h1>
   <p>
     <span>{ingredients.length} Ingredients | </span>
     <span>{steps.length} Steps </span>
    </p>
  </div>
} 

or even more simpler:

const Summary = ({ingredients, steps, title}) =>
  <div>
    <h1>{title}</h1>
   <p>
     <span>{ingredients.length} Ingredients | </span>
     <span>{steps.length} Steps </span>
    </p>
  </div>

Use the component in main js: index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Summary from './Summary';

ReactDOM.render(
  <Summary 
      title="Peanut Butter and Jelly"
      ingredients="peanut butter, jelly, bread"
      steps="spread peanut butter and jelly between bread" />, 
  document.getElementById('root')
);