Create a React App with Hooks and the Github API
By Aiden Oliver
First things first, make a folder for your project, then type npx create-react-app my-app-name. If you don’t have npx installed you can install it onto your computer using npm like this: npm install -g npx. (You can also install with yarn if you use that as well: yarn install -g npx)
After you have created your react app, you should be ready to start coding.
Step 1. Add the usual imports to your JS file and create a useState while passing an empty array as an argument to the hook like so:
Step 2.
Now that you’ve done that you will want to create your function that handles all data that you will fetch from the Github API. Make sure to pass in the async method into the function argument. This stops your app from breaking while you make a request to fetch the data from the API.
Step 3.
Now, within that function, create a variable that fetches the data from Github (mine is called “response” but you can call yours whatever you like) and make sure to add “await” before your fetch method. Then create a variable that will handle the data in JSON form (make sure to include “await” in your data variable too).
Now, call your setter function that we created earlier and pass in the data variable we just made. This will update the useState variable to include all the data we retrieved from the API. Your code should look something like this:
Step 4.
Now, under your useState hook, add the useEffect hook just below that and make sure to include the API function we created earlier and add it to the function body like so:
Step 5.
Las but not least, create your JSX to display your data.
The best way to handle data from an API in React is to use map functions. I won’t go into them now, but essentially they allow you to display data in your JSX very efficiently rather than typing out each and every piece of JSON data. You will call the variable we destructured in our useState hook and add it like this:
And Boom. You should have a webpage that displays all your Github repositories. You can now style it with CSS or other CSS frameworks like MaterialUI and Bootstrap. If you have any questions, let me know.
