Learning to use React JS to build frontend projects was initially really tasking, but with time and practice, learning has been a lot easier since then. Presently, I am learning frontend web development at AltSchool Africa, and this project was my submission for an examination task.
For this project, the task was to build a site that showcases all repositories on a user’s GitHub profile, and it had to be built to meet certain specifications. I’d explain how I completed the project by examining all the concepts I had run through to complete the project.
Getting the Data
The primary function of the project was to display information about a person’s GitHub repositories, so the information had to be obtained online. To get this done, I only needed to make an API call to GitHub’s API for the information I needed for the project using JavaScript’s fetch API. All the information and functionality for fetching the data was compiled in a React Hook to make the function easily reusable.
In addition, instead of making the site static to display only information about my repositories, the user can make new API calls to other people’s GitHub profiles by simply filling in their usernames on the site.
Displaying the Data
To display the data, I used the standard React practice for running through an Array of items. This is the Array.map feature. It renders every item in an array in the order they are arranged, and I used it to render the data generated from the GitHub API as a list of repositories on the site.
Routing
With the Array.map function, the repositories were rendered as a list on the site. Asides from this, there was also a need to display more data about each repository when it was selected by the user. Since there wasn’t much information to show on each site, using nested routes to display both the list of repositories and the repository information was ideal.
To do this, I used the react-router-dom package. It has an Outlet function that provides functionality for displaying components in subroutes on the same page as the parent component.
I also made use of Link, useParams, and useLocation from the react-router-dom package to complete different functions in the project.
Pagination
For this project, it was important to reduce the number of repositories presented to a user to a specific number to make the site usable and prevent the need for scrolling almost endlessly.
To do this, I used JavaScript array methods to determine the total number of items that were being imported and calculate how many pages would have to be used where I needed to have five items on a page.
const onePage = 5;
const total = data?.length;
const pages = Math.ceil(data?.length / onePage);
After this, I used the slice array method to control the data that is rendered on the screen while keeping track of which page is open in State in React.
data?.slice((page - 1) * onePage, page * onePage).map((each) => (...
The user can then use two buttons (Previous and Next) at the bottom of the page, along with numbers representing each page, to jump between the pages that contain the full list of repositories.
This project was a great experience in learning to use JavaScript functions in React components. I look forward to learning to implement projects with the React library better with more practice. Here is a live link to the project.
Top comments (0)