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
Step 2: Install Dependencies
Step 3: Add Dependencies
Step 4: Setup Hooks in Function, App()
- 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()
- 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.
- 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
- LinkedIn Learning – React.js Essential Training
- Source code for this demo is available on Github and Stackblitz.
- If you want to make a context switch to Vue, a similar implementation can be found here.