The Octodex is a fun way to celebrate a powerful tool we use for development. In that same spirit, recreate this site
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
- Understand and use React components
- Understand and use "props" in React
degit $GITHUB_USER/react-project-template Reactocats
- React Tutorial - Do parts 1, 2, 3, and 4, then stop. YOU MAY WANT TO WALK THROUGH THIS FIRST
- React Tutorial but with Function components and hooks
- React Documentation
- .map, .reduce & .filter, Oh My!
- If you have done the non-React version of octodex, use your existing HTML as the
render()method of your
Appcomponent. Otherwise, figure out the main components of the page and implement the
App-- Don't forget to replace
- Your CSS should be in
index.scss-- feel free to copy your previous project's css if you have done the non-React version of this assignment.
- Create a component for an
Octocatcomponent should use
propsto customize the data for each usage.
- You will have a
name, and the
image, and the
- Don't worry about supporting more than one author image (for now)
- Use your
Octocatcomponent to render all your cats. This might look something like this:
<div><Octocat name="Terracotacat" number="142" other="" props="" go="" here="" /><Octocat name="SuncoastCat" number="145" other="" props="" go="" here="" /></div>
- Place the definition of each Octocat in an
arrayof objects and use
mapto generate the Octocat components
- Put the
arrayof Octocats in an
importthat into your app.
- Use the
fetchAPI to retrieve the list of Octocats from this api instead