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')
);
