Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects

Resolve "doc: improve a component"

Merged Julie Thezenas requested to merge 73-doc-improve-a-component into master
Files
10
+ 12
9
@@ -81,10 +81,12 @@ Notre section affichera les 4 éléments, chacune avec un titre, une description
### Les paramètres d'un composant
On peut passer des paramètres au composant grâce :
- au propriété de la balise ;
- au texte entre les balises ouvrante et fermantes.
Pour notre exemple on va créer le compostant `TextRight` avec deux paramètres :
Pour notre exemple on va créer le compostant `TextRight` avec deux paramètres :
1. une image
2. un bloc de texte
@@ -160,10 +162,10 @@ Mon texte
⚠️ **Remarque: veiller aux erreurs dans les fichiers `custom.css` et `.module.css`.**
Nous avons constaté que si une classe reçoit des attribues dans le fichier `mon_composant.module.css` et le fichier `custom.css` alors il sera retenu en priorité ce qui se trouve dans le fichier `custom.css` qui est le fichier général de style.
Nous avons constaté que si une classe reçoit des attribues dans le fichier `mon_composant.module.css` et le fichier `custom.css` alors il sera retenu en priorité ce qui se trouve dans le fichier `custom.css` qui est le fichier général de style.
Nous n'avons pas de réponse à la question :
> Est-ce que ce qui se trouve dans le fichier `mon_composant.module.css` s'ajoute à ce qui se trouve dans le fichier `custom.css` ?
Nous n'avons pas de réponse à la question :
> Est-ce que ce qui se trouve dans le fichier `mon_composant.module.css` s'ajoute à ce qui se trouve dans le fichier `custom.css` ?
### Affichage
@@ -203,7 +205,7 @@ Ainsi, notre composant va renvoyer notre Svg en image, le titre en `h3` et la de
Nous devons également importer certains utilitaires, selon nos besoins (la librairie React, les modules CSS), puis exporter notre composant, pour qu'il puisse être réutilisé.
Il est nécessaire d'utiliser le système d'import/export de [modules JavaScript](https://javascript.info/import-export).
### Définition des Comportements
### Définition des Comportements
Nous itérons sur chaque élément de notre tableau, en utilisant la méthode JavaScript `.map`, qui est très souvent utilisé dans les Composants React.
@@ -256,11 +258,12 @@ export default function Home() {
}
```
Entre nos balises `Layout`, nous retrouvons 3 composants enfants, d'abord l'entête (_header_) nommé <HomepageHeader /> qui a été créé à l'intérieur même de ce composant.
Entre nos balises `Layout`, nous retrouvons 3 composants enfants, d'abord l'entête (_header_) nommé `<HomepageHeader />` qui a été créé à l'intérieur même de ce composant.
Puis nous retrouvons 2 Composants, qui ont été importé depuis le dossier `src/components/`:
Puis nous retrouvons 2 Composants, qui ont été importé depuis le dossier `src/components/`:
1. <HomepagePromises />, pour la section des promesses
2. <HomepageFeatures />, pour la section des fonctionnalités
1. `<HomepagePromises />` pour la section des promesses
2. `<HomepageFeatures />` pour la section des fonctionnalités
## Feuille de style CSS
Loading