Very first thing first you must go to GitHub after which go to the settings. Click on the Developer Settings within the left column. Click on the non-public entry token and generate a brand new token and replica that token. open your react undertaking and create a brand new file within the root folder named .env. Contained in the .env file add the next code. Substitute your copied GitHub Private Entry Token as a substitute of Your_Personal_Access_Token .
REACT_APP_API_KEY = Your_Personal_Access_Token
Contained in the api folder create a brand new file named Github.js. Add the next code within the Github.js file.
Substitute your GitHub person identify as a substitute of sabesansathananthan on line 2.
Contained in the elements folder, create a brand new file named GitHubCards.js. Add the next code within the GitHubCards.js file.
In line 28, You’re fetching the linguist API utilizing Axios and then you definately set your language state. Kind line 31 to line 42, You’re fetching GitHub API for every repository. From line 46 to 52, You’re sorting repo array components based on the stargazers_count (stars rely).
Contained in the elements folder, create a brand new file named RepoCard.js. Add the next code within the RepoCard.js file.
The above purposeful element returns JSX components and Materials-UI elements.
Lastly, Render the GitHubCards element in App.js, as proven beneath.
Right here I’ve showcased 4 steps to embed GitHub repositories in your React web site. There are a lot of react initiatives for embed GitHub repositories in your React web site. However how that is totally different from different undertaking playing cards is these playing cards present the colour dots associated to a programming language based on GitHub linguist. You may clone the Repo from this hyperlink. If you will use this undertaking then Don’t overlook to provide a star⭐️ for this repo.
Completely happy Coding 😊 !!!