Kaza
Développez une application Web avec React et React Router
Brief mission : résumé des tâches et des livrables demandés
- Préparation:
- Examinez les maquettes Figma pour comprendre le design global.
- Examinez le guide des étapes clés, les recommandations et les ressources fournies pour organiser votre travail.
- Préparez une liste de questions pour votre première session de mentorat.
- Mise en place de l’environnement:
- Initialisez un nouveau projet avec Create React App ou Vite, selon vos préférences.
- Mettez en place un dépôt GitHub pour le projet.
- Conception des composants:
- Créez les composants React pour chaque élément distinct de l’interface (par exemple, le menu, la galerie d’images, le collapse, etc.).
- Intégrez les ressources nécessaires (logos, icônes) à partir des maquettes Figma.
- Développement des fonctionnalités:
- Mettez en œuvre la logique de défilement pour le composant Gallery, selon les spécifications fournies.
- Développez la fonctionnalité du Collapse.
- Utilisez le fichier JSON fourni pour afficher les annonces de logement.
- Routes et navigation:
- Utilisez React Router pour gérer la navigation entre les différentes pages.
- Révision et tests:
- Testez toutes les fonctionnalités et assurez-vous qu’elles fonctionnent comme prévu.
- Assurez-vous que le site est responsive et qu’il s’affiche correctement sur différents appareils.
- Optimisation:
- Recherchez les opportunités d’optimisation et de refactorisation du code.
- Assurez-vous de suivre les guidelines de codage de Kasa.
- Préparation pour la soutenance:
- Revoyez tout votre code pour vous préparer aux questions du mentor.
- Assurez-vous que vous pouvez justifier et expliquer chacune de vos décisions techniques.
- Préparez une présentation claire et concise pour la soutenance, en mettant en avant les composants React et les routes développées.
- Livrables:
- Rassemblez tous les livrables nécessaires et préparez-les pour la soumission, en suivant le format spécifié.
- Poussez votre code sur GitHub et fournissez le lien dans le fichier TXT ou PDF.
- Soutenance:
- Assurez-vous de respecter le format et le timing de la présentation.
- Soyez prêt à répondre aux questions et à défendre vos décisions techniques.
compétences Acquises Suite au Projet
Compréhension du Framework React
-
- Composants et Props : J’ai appris à créer des composants React réutilisables et à passer des données entre eux via les props.
- State et cycle de vie : J’ai compris comment gérer l’état interne d’un composant et comment les composants se mettent à jour au fil du temps.
Routage avec React Router
-
Création de routes : J’ai appris à créer des routes pour différentes pages de l’application.
-
Passage de paramètres : J’ai compris comment passer des paramètres via l’URL et comment les récupérer dans les composants.
-
Navigation : J’ai appris à lier différentes parties de mon application pour une navigation fluide.
Gestion des Données
- Utilisation des données JSON : J’ai acquis des compétences pour charger, afficher et manipuler des données depuis un fichier JSON en attendant un back-end.
Conception et Architecture
-
Décomposition en composants : J’ai appris à décomposer les maquettes en composants logiques et à réfléchir de manière modulaire.
-
Interaction entre composants : J’ai compris comment les composants peuvent interagir entre eux, comme le composant Gallery et le composant Collapse.
Intégration de Design
-
Travail avec Figma : J’ai appris à extraire des designs et des ressources depuis Figma pour les utiliser dans mon application.
-
Responsive Design : J’ai compris l’importance du responsive design et comment créer une application qui s’adapte à différents écrans.
Bonnes Pratiques de Codage
- Respect des directives de codage : J’ai appris à suivre des guidelines spécifiques pour assurer la qualité et la cohérence du code.
- Tests unitaires et d’intégration : J’ai été exposé(e) à l’importance des tests pour s’assurer que chaque partie de l’application fonctionne comme prévu.