Week 04 - Day 1 - React-ified Octocats

[mdewey]

React-ified Octocats

Your Octodex is amazing. It has revolutionized the Github Octodex experience and more people are viewing Octocats on their mobile devices than ever.

However, the code is repetitive and isn't yet setup to work with an API.

Your task now is to refactor the static Octodex into a static (non-API) version in 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

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

Adventure Mode

• [x] 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 a 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

[GarrettAnderson]

https://github.com/GarrettAnderson/reactified-octodex

Got most of the requirements for explorer mode but got mixed up when trying to apply props to the octocat figures. I was trying to jump ahead and create an object of cats instead of starting smaller and more explicit when first playing with props. Tried to do the map function before the props which tripped me up. However, today, I went back and applied what we learned from class and was able to get props working and seems like the map function works, too. Still having issues getting the images to populate which I'd like to better understand.

[mdewey]

Your homework was marked: Meets Expectations

“Well done!” — via Gavin Stark