In this exercise, you're going to build a blog for Charlotte.

Clone this repo, and from the repo's folder

yarn
yarn start

Your task is to create all of the components that comprise the page and wire up data for the component to render. One approach would be to create the HTML of the page with static data first, and afterwards, decompose the page into the components below.

The data for the blog, excerpts from the book, can be found in the data folder.

Import the data from the appropriate components and pass the needed data to the components using props.

The components that make up Charlotte's blog are:

• App: already in place, but could be refactored out into App.jsx.
• Header: the header of the page.
• Footer: the footer of the page.
• Posts: to hold all posts.
• Post: the component for a single post.
• OtherBlogs: to hold the list of other blogs.
• OtherBlog: the component for a single blog link.
• RecentEntries: to hold the list of recent entries.
• RecentEntry: the component for a single entry.

Here is a basic layout of the page:

Try to not use a UI framework like Bootstrap. Rather, try to use the CSS Flexbox. Also, consider applying a class to each component using className (instead of the class we use in HTML) to namespace the styles of each component.