Ui/Ux Programming Tutorials, Guides & Best Practices

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const GitHub = () => {
  const [repos, setRepos] = useState([]);

  useEffect(() => {
    const fetchRepos = async () => {
      try {
        const response = await axios.get('https://api.github.com/users/YOUR_USERNAME/repos');
        setRepos(response.data);
      } catch (error) {
        console.error("Error fetching the repositories:", error);
      }
    };

    fetchRepos();
  }, []);

  return (
    <div>
      <ul>
        {repos.slice(0, 5).map((repo) => (
          <li key={repo.id}>
            <a href={repo.html_url} target="_blank" rel="noopener noreferrer">
              {repo.name}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default GitHub;

Replace YOUR_USERNAME with your actual GitHub username. This component fetches the latest repositories and displays the top five.