Skip to main content

Github User Query

Objectives​

This is a React-ified version of the JS Fetch Exercise.
You'll create a form that submits a username, then you'll query the Github Users API for profile information on that user.

The Github Users API URL is: https://api.github.com/users/[username]

info

REMINDER: Replace [username] with an actual username, no brackets!

Learning Objectives​

After completing this assignment, you should...

  • Be able to create a boilerplate React project with Vite
  • Fetch data from an external API
  • Use React state
  • Pass state using props
  • Hook up an event in a React component to capture user input and update state

Requirements​

  • A repo containing a Vite project
  • A component called UserCardList
    • Accepts an array of user data as a prop
  • A component called UserCard
    • Accepts a single user's information as a prop

Level 1​

  • The page loads a form without any user data
  • Submit a username via the form
  • A user's information populates the page
  • Additional users are added to the page with subsequent searches

App.jsx​

  • You'll need a form with a controlled text input and a submit button
  • The form will need a handleSubmit function bound to onSubmit
  • The text input will need a handleChange function bound to onChange
  • Initial state should contain an empty array, i.e. users, that will store the usernames being searched, i.e. setUsers

/components/UserCardList.jsx​

  • This component takes the array of users (from App) as a prop
  • You'll loop through this list (aka map()) passing an individual user's information into the UserCard component
tip

You'll need a key attribute when rendering items in a list.
You can learn about rendering lists using data from arrays here: React.dev: Rendering Lists

/components/UserCard.jsx​

  • This component takes a user objects as a prop (from UserCardList)
  • Render whatever data you'd like from a user's profile.
info

Not all users have all their information filled out!
A good starting place would be a user's avatar_url, since almost every user has some sort of avatar image.

Level 9000​

Ever thought about adding some more action to your sites? If so, check out React Spring

Take a look at some of their demos for inspiration, and try to include some animations on your page.