#root
View Compiled

const { Component } = React;
const { render } = ReactDOM;

class ReactComponent extends Component {
    list = [ 'Eggs', 'Milk', 'Bread' ];
	styles = {
		list: {
			padding: '1em',
			border: '1px solid #ccc',
		}
	};
    render() {
        return (
            <div style={this.styles.list}>
                <div>My ReactJS ToBuy List</div>
                 <ul>
                    {this.list.map(item => (
                        <li>{item}</li>
                    ))}
                </ul>
            </div>
        );
    }
}

const HelloWorldComponent = ({ message }) => (
    <div>
        <div>{message}</div>
        <ReactComponent />
    </div>
);

render(<HelloWorldComponent message={'Hello World'} />, 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/15.6.1/react.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js