HomeSoftware EngineeringEmbed your GitHub mission in your React web site | by Sabesan...

Embed your GitHub mission in your React web site | by Sabesan Sathananthan


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 mission 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 consumer 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 then you definitely 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 components in response to 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 useful element returns JSX components and Materials-UI parts.

Lastly, Render the GitHubCards element in App.js, as proven under.

UI

Right here I’ve showcased 4 steps to embed GitHub repositories in your React web site. There are lots of react tasks for embed GitHub repositories in your React web site. However how that is completely different from different mission playing cards is these playing cards present the colour dots associated to a programming language in response to GitHub linguist. You’ll be able to clone the Repo from this hyperlink. If you’re going to use this mission then Don’t neglect to present a star⭐️ for this repo.

Glad Coding 😊 !!!

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments