Note: This document is a work in progress. You can help improve it.
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.
- Learn to identify parts of a web site as
create-react-appto build a React project
- Understand and use React components
- Understand and use "props" in React
Array.prototype.mapto render a collection of components in React
- Reuse your Octodex as a starting point for this assignment. Or use an existing well factored (HTML and CSS) Octodex.
- Figure out the main components of the page. These will be the main components in your
- You should have at least two components...
- Create your React app
- Copy the CSS from your Octodex into
- Clear out the implementation in the
Appand have it render your main components.
- Create those components and paste the appropriate HTML from your Octodex into the
rendermethod of those components.
- Break down those components and use
this.propsto dynamically customize the components that need it.
- Place the definition of each Octocat in an
mapto generate the Octocat components
- Put the
arrayof Octocats in a
importthat into your app.
- Use the
fetchapi to retrieve the list of Octocats from this api instead