Reactocats
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 Component
s on the page and create React components for each, breaking down those Component
s into smaller ones as needed.
Objectives
- Learn to identify parts of a web site as
Component
s - Understand and use React components
Stretch Objectives
- Understand and use "props" in React
Setup
degit $GITHUB_USER/react-project-template Reactocats
Resources
- 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!
- Array.prototype.map
Explorer Mode
- If you have done the non-React version of octodex, use your existing HTML as the
render()
method of yourApp
component. Otherwise, figure out the main components of the page and implement therender()
method ofApp
-- Don't forget to replaceclass=
withclassName=
- 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
Octocat
- The
Octocat
component should useprops
to customize the data for each usage. - You will have a
prop
for thename
, and theimage
, and thenumber
, etc. - Don't worry about supporting more than one author image (for now)
- The
- Use your
Octocat
component 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>
Adventure Mode
- Place the definition of each Octocat in an
array
of objects and usemap
to generate the Octocat components
Epic Mode
- Put the
array
of Octocats in anoctocats.json
file andimport
that into your app. - OR
- Use the
fetch
API to retrieve the list of Octocats from this api instead