Création d'un portfolio avec manipulation des composants et des props dans React
Consignes
Votre mission est de créer un portfolio en utilisant React et d'implémenter les différentes sections suivantes : Accueil, Projets, À propos, Compétences, Contact.
Étapes à suivre
Suivez les étapes ci-dessous pour accomplir cette tâche :
1. Création du projet
Commencez par créer un nouveau projet React en utilisant Create React App ou tout autre outil de votre choix. Assurez-vous d'avoir Node.js et npm (ou yarn) installés sur votre machine.
2. Création des composants
Dans le dossier ./src/components, créez les composants nécessaires pour chaque section du portfolio. Voici les composants à créer :
Accueil.js: Composant pour la section d'accueil.Projets.js: Composant pour la section des projets.APropos.js: Composant pour la section "À propos".Competences.js: Composant pour la section des compétences.Contact.js: Composant pour la section de contact.
Importer l'ensemble dans le fichier App.js
3. Utilisation des éléments React et des composants fonctionnels
Dans chaque composant, utilisez les éléments React appropriés pour structurer et afficher le contenu de chaque section. Vous pouvez utiliser des composants fonctionnels pour chaque section. Assurez-vous d'exporter ces composants pour pouvoir les utiliser ailleurs dans votre application.
4. Styles et mise en page
Utilisez le dossier styles pour créer des fichiers CSS ou utilisez un préprocesseur CSS tel que Sass pour styliser vos composants et définir la mise en page de votre portfolio. Vous pouvez appliquer des classes CSS ou utiliser des bibliothèques de composants pour obtenir un design attrayant et cohérent.
5. Scripts complémentaires pour le développement
Pour améliorer votre flux de développement, configurez les scripts dans votre fichier package.json pour formater automatiquement votre code en utilisant Prettier et effectuer des vérifications de linting avec ESLint. Voici les scripts à ajouter :
"scripts": {
"format": "prettier --write . --config ./.prettierrc",
"eslint": "npx eslint './src/**/*.{js,jsx,ts,tsx}' --fix"
}Vous pouvez exécuter ces scripts en utilisant npm run format pour formater votre code et npm run eslint pour effectuer des vérifications de linting.
Conclusion
Après avoir finalisé l'exercice de création d'un portfolio en utilisant React, vous aurez manipulé les composants et utilisé des props pour passer des données entre les composants. Vous aurez également organisé votre code en respectant une structure de fichiers cohérente et appliqué des styles pour améliorer l'apparence de votre portfolio.
N'hésitez pas à personnaliser davantage votre portfolio en ajoutant des fonctionnalités supplémentaires ou en peaufinant le design selon vos besoins et vos compétences.
Ce projet vous a permis de mettre en pratique vos connaissances avancées en React et de démontrer votre expertise en développement web. Continuez à explorer et à améliorer votre portfolio pour en faire une vitrine de vos compétences et réalisations professionnelles.
Bon travail !
https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API (opens in a new tab) key}