React App

Détail de la structure des fichiers Frontend

Avantage de React (Reactjs)

• La grande particularité de React est l'utilisation de « Component » (Composant). Cette fonctionnalité nous a été fort utile dans le développement de notre application Web. Ayant 160 sous page à afficher (pour le détail de chaque point de biodiversité), il nous a juste suffit de mapper notre liste (160 fois donc) et ensuite créer 160 Component personalisé.
• La 2ème est le « state » et le « props » ceux-ci servent à stocker des informations lorsqu'on passe d'un Composant à un autre (parents-enfants)

Utilisation

1) Component

• Sur l'image ci-dessus vous pouvez voir qu'il y a un dossier « components ». Celui-ci contient donc bien tout nos composant. Chaque page est représenté par son propre composant.
• Notre barre de navigation étant le composant « Navbar » il nous a suffit de la mettre au dessus de notre application pour qu'elle fasse son apparition en tant que « header » de chaque page/composant.

2) State-props

• Sur la première image Vous observerez l'utilisation du Component « PointBio » où est passé des paramètres tel que le nom français.
• Celui-ci est donc récupéré dans le Component en question et utilisé via un « props » (voir 2ème image).

3) Requete dataBase

• En reactjs nous utilisons « fetch('url de l'API') ».