[ad_1]
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 private entry token and generate a brand new token and replica that token. open your react venture and create a brand new file within the root folder named .env. Contained in the .env file add the next code. Exchange your copied GitHub Private Entry Token as an alternative 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.
Exchange your GitHub person identify as an alternative of sabesansathananthan on line 2.
Contained in the parts folder, create a brand new file named GitHubCards.js. Add the next code within the GitHubCards.js file.
In line 28, You might be fetching the linguist API utilizing Axios and you then set your language state. Type line 31 to line 42, You might be fetching GitHub API for every repository. From line 46 to 52, You might be sorting repo array parts in accordance with the stargazers_count (stars depend).
Contained in the parts folder, create a brand new file named RepoCard.js. Add the next code within the RepoCard.js file.
The above practical element returns JSX parts and Materials-UI parts.
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 numerous react tasks for embed GitHub repositories in your React web site. However how that is totally different from different venture playing cards is these playing cards present the colour dots associated to a programming language in accordance with GitHub linguist. You’ll be able to clone the Repo from this hyperlink. If you will use this venture then Don’t overlook to present a star⭐️ for this repo.
Joyful Coding 😊 !!!
[ad_2]
