Putting it all together

blog-app.js

'use strict';

const Header = props => {
  return (
    <header>
      <nav className="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
        <a className="navbar-brand" href="#">My Blog</a>
      </nav>
    </header>
  )
}

const BlogContent = props => {
  const { title, content, author, authorImageLink, datePublished } = props;
  return (
    <main role="main" className="container">
      <h1 className="mt-5 display-4 font-weight-normal">{title}</h1>
      <p className="lead"> <img src={authorImageLink} className="img-fluid rounded-circle" width="40px" alt="Author Image" /> {author} | <span className="text-muted">{datePublished}</span></p>
      <React.Fragment>{content}</React.Fragment>
    </main>
  )
}

const Footer = props => {
  return (
    <footer className="footer bg-dark">
      <div className="container">
        <span className="">&copy; 2019 Blog Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></span>
      </div>
    </footer>
  )
}

class BlogApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      blogPost: {
        title: 'React Gently with a Blogging App',
        content: <div><p>Lately I've been thinking about the simplest way in which one can learn React.After listening to beginner web developers complain about frustrations with JSX(JavaScript eXtension); components; state; props, I found something common among them - they all learned from tutorials that started out with the CLI(Command Line Interface).</p><p>For the best user and developer experience, ReactJS docs recommends toolchains like Create React App, Next.js, Gatsby, etc. But if you are familiar with a bit of JavaScript, are just interested in learning basic concepts of React and probably build a NOT (!)production grade app, there is a gentle way - you can add React as a plain script tag on an HTML page and choose if you want to use JSX or not.</p><p>The downside (if you chose to use JSX this way) is slow runtime code transformation. JSX is not supported in a browser and so has to be transformed to JavaScript before it can be executed. The time it takes to do this before your page is rendered is not great for production but if you are just trying to learn the ropes, you are good to go.</p><p>...</p></div>,
        author: 'John Otu',
        authorImageLink: 'https://i.postimg.cc/mDpdYzHK/35w-Afqcf-400x400.jpg',
        datePublished: 'Fri. May 24, 2020.'
      }
    };
  }

  render() {
    const { title, content, author, authorImageLink, datePublished } = this.state.blogPost;
    return (
      <div>
        <Header />
        <BlogContent
          title={title}
          content={content}
          author={author}
          authorImageLink={authorImageLink}
          datePublished={datePublished}
        />
        <Footer />
      </div>
    )
  }
}

ReactDOM.render(<BlogApp />, document.getElementById('react-content'));