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 "change for froggit colors and fonts"

Merged Hugues requested to merge 21-change-for-froggit-colors-and-fonts into master
All threads resolved!
1 file
+ 16
14
Compare changes
  • Side-by-side
  • Inline
+ 16
14
@@ -92,12 +92,12 @@ Notre affichage doit impérativement être entouré de balises parents, telle un
Nous passons comme argument les clés de notre tableau (Svg, title, description) à notre fonction
```
```jsx
function Features({Svg, title, description}) {
return (
<div className="container"}>
<Svg alt={title} />
</div>
<Svg alt={title} />
</div>
<div>
<h3>{title}</h3>
<p>{description}</p>
@@ -106,32 +106,34 @@ function Features({Svg, title, description}) {
);
}
```
Ainsi, notre composant va renvoyer notre Svg en image, titre en `h3` et description en paragraphe.
## Import export du Composant
Ainsi, notre composant va renvoyer notre Svg en image, le titre en `h3` et la description en paragraphe.
### Réutilisation du composant
Nous devrons également importer certains utilitaires, puis exporter notre composant, pour qu'il puisse être réutiliser.
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 allons maintenant itérer sur chaques valeurs de notre tableau, en utilisant la méthode JavaScript `.map`, qui est très souvent utilisé dans les Composants React.
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.
La méthode map() crée un nouveau tableau avec les résultats de chaque élément du tableau. Voici un tutoriel expliquant cette méthode: https://www.freecodecamp.org/news/javascript-map-how-to-use-the-js-map-function-array-method/
La méthode map() crée un nouveau tableau avec les résultats de chaque élément du tableau. [Voici un tutoriel expliquant cette méthode](https://www.freecodecamp.org/news/javascript-map-how-to-use-the-js-map-function-array-method/).
```
export default function HomepageFeatures() {
return (
<div>
{FeaturesList.map((props, idx) => (
<Features key={idx} {...props} />
))}
</div>
<div>
{FeaturesList.map((props, idx) => (
<Features key={idx} {...props} />
))}
</div>
);
}
```
Nous utilisons grâce à une `fontion fléchée`, une fonction de Callback pour boucler sur notre tableau, qui prend 2 paramètres, les `props` qui représentent les valeurs du tableau, et `idx`, les clés.
Nous utilisons grâce à une `fonction fléchée`, une fonction de _Callback_ pour boucler sur notre tableau, qui prend 2 paramètres, les `props` qui représentent les valeurs du tableau, et `idx`, les clés.
Notre Composant `HomepageFeatures` est également exporté au début de la déclaration de la fonction avec `export default`.
Loading