Skip to content

dhope-lab/dwarf-underground

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

Instructions

  • fork and clone this repo and navigate into the dwarf-underground directory
  • 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 start and navigating to localhost:3000
  • check to make sure that your React version looks the same as the original

Basic Requirements

  • Split the page into at least 6 total components

Bonus Credit

  • Split the page into at least 10 total components, including components in components

Super Bonus Credit

  • Render the four article links at the bottom of the screen using map and passing in the props they need

Super Mega Bonus Credit

  • 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

Super Mega Bonus Credit Hyper Fighting

  • Actually display comments that are entered and submitted

About

A static website to be broken up into react components

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 59.1%
  • CSS 24.7%
  • HTML 16.2%