One of the first steps in becoming proficient in React is to learn how to break an app down into components. Each component encapsulates a piece of the functionality of the whole, with its own markup and behavior.
To practice making components, we've provided all the markup and styling for a static webpage. Your job is to look at the page, think about how you would break it up into individual pieces, and then create a React component for each piece, moving the markup and styling rules into the appropriate places. Your final product should look the same as the original static site.
- fork and clone this repo and navigate into the
dwarf-undergrounddirectory - view the static website by typing
open static.html - ponder how it could be broken up into components
- create React components based upon your ponderings
- run your React version by typing
yarn startand navigating tolocalhost:3000 - check to make sure that your React version looks the same as the original
- Split the page into at least 6 total components
- Split the page into at least 10 total components, including components in components
- Render the four article links at the bottom of the screen using
mapand passing in the props they need
- Make a component that contains a text field for leaving a comment
- Have the text field appear only when the 'comments' link at the bottom of the article is clicked
- Actually display comments that are entered and submitted