<div id="root"></div>
body {
  color: teal;
}
class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>iMac Pro</li>
          <li>iWatch 5</li>
          <li>HomePod</li>
        </ul>
      </div>
    );
  }
}

// Example usage: <ShoppingList name="Mark" />
ReactDOM.render(<ShoppingList name='Elio' />, document.getElementById("root"))
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.3.1/umd/react.development.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.1/umd/react-dom.development.js