React Components: Bootstrap Card, Github API

I’m dabbling with React 18, displaying data in a separate component using hooks and fetch.

Introduction

Let’s build this. A simple React app which accesses Github’s REST API and prints a user’s profile into a Bootstrap 5 card interface.

What’s the Goal?

Create a separate component that displays a person’s Github profile.

What will we need?

  • Stackblitz – to quickly prototype a React project and its dependencies.
  • React Bootstrap 5 – to grab some ready-made user interfaces (e.g. cards).
  • useState – to handle the data.
  • useEffect – to make the call for external data.
  • Github REST API – the data source we’ll need to access and display a user’s profile.

Step By Step

Step 1: Create React App

From Stackblitz, click New project button and choose React JavaScript.

Step 2: Install Dependencies

From Stackblitz, open a new terminal and run: npm install react-bootstrap bootstrap

Step 3: Add Dependencies

From Stackblitz, add line 5 of main.jsx, import bootstrap.min.css.
From Stackblitz, add lines 5-8 of App.jsx, import React components Card, Container, Row, Col.

Step 4: Setup Hooks in Function, App()

From Stackblitz, App.jsx.
  • Line 1: import useState and useEffect.
  • Line 35: set a constant which de-structures an object called data and a method called setData which initially sets the data object’s value to null.
  • Line 36, 40: set up useEffect() method and pass in a callback function. Take note of line 40, where an empty array is assigned in order to make this request once when the application first renders.
  • Line 37: use built-in fetch method from the browser to make an HTTP request from Github’s API.
  • Line 38, 39: The first then takes the response and turns it into JSON and chaining in another then method will take the result of that JSON and pass it into the setData method defined on line 35.
  • List 41, 71: Set up an if statement to return the HTML if data exists.

Step 5: Create Function, GitHubUser()

From Stackblitz, App.jsx, lines 10 through 33.
  • Line 10: pass in the props of your choice for display. In my case, name, created at, avatar url, company, html url and blog keys have the values I want to display as HTML elements on the page.
  • Line 11, 26: Concatenate secure protocol since it was not included in the original API call and pass that into the Card Link component.
From Stackblitz, App.jsx, lines 59 through 66.
  • Line 59 – 65: Once the conditional (line 41, 72) evaluates to true, the data object will be available for props to be passed into the GitHubUser component.

Key Takeaways

Outside of a successful call, data can be coming in many different states such as loading and error. This is due to the dependency of calling in a third party API. Extend this example by leveraging additional useState hooks, conditional rendering and catch method to display HTML which reflects those different use cases.

Additional Resources