Le projet miniPortefolioReact est une application React qui me permet d'afficher mon profil GitHub et de lister mes projets. J'utilise l'API GitHub pour récupérer les données nécessaires.
-
App.js :
- C'est le composant principal de l'application.
- J'utilise le
BrowserRouter
pour gérer le routage. - Je définis trois routes principales :
/
pour afficher le profil./projects
pour lister tous les projets./projects/:name
pour afficher les détails d'un projet spécifique.
- Le composant
Header
est affiché sur toutes les pages.
-
Projects.js :
- Ce composant est destiné à afficher la liste des projets GitHub de l'utilisateur.
-
useState
loading
: Un état pour suivre si les données sont en cours de chargement.Projects
: Un état pour stocker la liste des projets récupérés.
-
useEffect
- Une fonction asynchrone est définie à l'intérieur pour récupérer la liste des projets via l'API GitHub. L'URL de l'API est construite en utilisant le
userName
(passé en tant que prop). - Si les données sont récupérées avec succès, l'état
Projects
est mis à jour avec la liste des projets etloading
est défini surfalse
.
- Une fonction asynchrone est définie à l'intérieur pour récupérer la liste des projets via l'API GitHub. L'URL de l'API est construite en utilisant le
-
Rendu
- Si les données sont en cours de chargement (
loading
esttrue
), un message "Loading..." est affiché. - Sinon, la liste des projets est affichée à l'aide du composant
List
. - Chaque projet est représenté par son nom et un lien vers sa page GitHub. Le lien est généré à l'aide du composant
RouterLink
.
- Si les données sont en cours de chargement (
-
- Ce composant est destiné à afficher la liste des projets GitHub de l'utilisateur.
-
ProjectDetails.js :
- Ce composant affiche les détails d'un projet spécifique.
- J'utilise l'API GitHub pour récupérer les détails du projet en fonction du
userName
et duname
du projet. - Les détails du projet sont stockés dans l'état
project
.
Pour permettre à quiconque de cloner le projet et de le personnaliser avec son propre nom d'utilisateur GitHub, voici les étapes à suivre :
- Clonage du dépôt :
git clone https://github.com/GuiFraV/miniPortefolioReact.git cd miniPortefolioReact
- Installation des dépendances :
npm install
- Modification de l'username :
Dans le fichier src/App.js, recherchez les instances où l'username est utilisé. Remplacez cet username par le nom d'utilisateur GitHub souhaité. Par exemple, pour l'username johnDoe :
<Route
path='/'
element={<Profile userName="johnDoe" />}
/>
<Route
path='/projects'
element={<Projects userName="johnDoe" />}
/>
<Route
path='/projects/:name'
element={<ProjectDetails userName="johnDoe" />}
/>
- Lancement de l'application :
npm start
Note : L'API GitHub a des limites de taux pour les requêtes non authentifiées.