week 04 - day 01 - Octocats

[mdewey]

React-ified Octocats

Your task is to refactor the static Octodex into a static (non-API) version using React.

You'll identify the main Components on the page and create React components for each, breaking down those Components into smaller ones as needed.

Objectives

• Learn to identify parts of a web site as Components
• Use app-app (GAMMA stack) to build a React project
• Understand and use React components

Stretch Objectives

• Understand and use "props" in React
• Use Array.prototype.map to render a collection of components in React

Explorer Mode

• [ ] Use this HTML and CSS as a starting point
• [ ] Figure out the main components of the page. These will be the main components in your <App> component.
• [ ] You should have at least two components...
• [ ] Create your React app
• [ ] Copy the CSS from the template into index.css
• [ ] Clear out the implementation in the render method of App and have it render your main components.
• [ ] Create those components and paste the appropriate HTML from the Octodex into the render method of those components.
• [ ] Break down those components and use this.props to dynamically customize the components that need it.

Adventure Mode

• [ ] Place the definition of each Octocat in an array and use map to generate the Octocat components

Epic Mode

• [ ] Put the array of Octocats in an octocats.json file and import that into your app.
• OR
• [ ] Use the fetch API to retrieve the list of Octocats from this api instead

Additional Resources

• React Documentation
• .map, .reduce & .filter, Oh My!
• Array.prototype.map

[wmurch]

https://github.com/wmurch/react-octocat

[mdewey]

Your homework was marked: Meets Expectations

“Ring that bell!” — via Mark Dewey