<article id="app"></article>
const data = {
  title: "Here is the header",
  intro: "Gravida donec per augue cursus feugiat dis odio, ac mauris nisi malesuada placerat aliquam accumsan tellus, himenaeos ipsum montes volutpat penatibus porttitor.",
  list: {
    intro: "Per augue cursus feugiat:",
    items: [
      { "name": "John", "age": 42 },
      { "name": "Nina", "age": 31 },
      { "name": "Will", "age": 25 },
      { "name": "Alex", "age": 27 },
      { "name": "Amy", "age": 36 },
    ] 
  },
  footer: "Here is a footer",
};

class ArticleHeader extends React.Component {
  render() {
    return <header>
      <h1>{data.title}</h1>
    </header>;
  }
}

class ArticleMain extends React.Component {
  render() {
    return <main>
      <p>{data.intro}</p>
      <PersonList />
    </main>;
  }
}

class PersonList extends React.Component {  
  render() {
    return <React.Fragment>
      <p>{data.list.intro}</p>
      <ul>
        { 
          data.list.items.map((item, i) => {
            return <li key={i}>{item.name}, {item.age}</li>;
          })
        }
      </ul>
    </React.Fragment>;
  }
}

class ArticleFooter extends React.Component {
  render() {
    return <footer>
      <p>{data.footer}</p>
    </footer>;
  }
}

class Article extends React.Component {
  render() {
    return <React.Fragment>
      <ArticleHeader />
      <ArticleMain />
      <ArticleFooter />
    </React.Fragment>
  }
}

ReactDOM.render(<Article />, document.getElementById('app'));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js