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
Files
3
+ 10
9
@@ -2,7 +2,7 @@
Docusaurus étant un Framework de la librairie React, on y retrouve la même logique.
L'affichage d'une page web est un ensemble de composant réutilisable, que l'on peux assembler.
L'affichage d'une page web est un ensemble de composants réutilisables, que l'on peux assembler.
Nous allons nous appuyer sur l'utilisation de ces Composants pour créer nos différentes sections d'affichage, notamment pour gérer le rendu visuel de la page d'accueil du site `index.js`.
@@ -12,7 +12,7 @@ Un composant (_Componant_) contient: des données qui constituent un état (_sta
## Création du composant
Pour l'exemple, nous allons expliquer comment nous avons créer la section chargé d'afficher les fonctionnalités (_Features_) de Froggit.
Pour l'exemple, nous allons expliquer comment nous avons créer la section chargée d'afficher les fonctionnalités (_Features_) de Froggit.
Dans le dossier `src/components/`, nous avons créé un fichier React `HomepageFeatures.js`.
@@ -28,10 +28,11 @@ Ce fichier est composé de 3 parties:
### Les données de notre section
Nous allons créons un tableau d'objets JavaScript pour définir les données à afficher dans notre section. il y a 3 objets pour chaque éléments du tableau :
1. Un titres
2. Une description
3. Une image
Nous allons créer un tableau d'objets JavaScript pour définir les données à afficher dans notre section. Il y a 3 objets pour chaque élément du tableau :
1. Un titre, de type `chaîne de charactère` (_String_), donc entouré de guillements simples `'` ou doubles `"`).
2. Une description, que nous définissons en tant qu' `Element JSX`. Nous pouvons ainsi lui donner un _template_ de rendu comme valeur, avec les balises HTML de notre choix, juste un paragraphe dans notre cas. Pour cela, nous devons définir sa valeur entre des parenthèses et à l'intérieur d' une balise parent, pouvant être une `div`, ou comme nous utilisons ci-dessous, avec une simple balise vide.
3. Une image, que nous définissons en tant que `Composant React`, afin de simplifier la syntaxe de notre code dans les prochaines étapes notemment pour définir notre affichage. Comme cette image est un composant, nous la nommons `Svg` en PascalCase.
Enfin, nous utilisons ici le format `SVG`, mais nous pouvons utiliser d'autres formats tels que le `PNG`, `GIF` et `JPG`. Mais dans ce cas il faudra installer le plugin officiel de gestion d' [images](https://docusaurus.io/fr/docs/api/plugins/@docusaurus/plugin-ideal-image) pour les formats `PNG` ou `JPG`.
Nous appelons notre tableau `featuresList` car c'est la liste des fonctionnalités.
@@ -95,7 +96,7 @@ Nous passons comme argument les clés de notre tableau (Svg, title, description)
```jsx
function Features({Svg, title, description}) {
return (
<div className="container"}>
<div className={"container"}>
<Svg alt={title} />
</div>
<div>
@@ -133,7 +134,7 @@ export default function HomepageFeatures() {
}
```
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.
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. les `...` est un [Spread Operator](https://www.techiediaries.com/react-spread-operator-props-setstate/).
Notre Composant `HomepageFeatures` est également exporté au début de la déclaration de la fonction avec `export default`.
@@ -177,4 +178,4 @@ Un Composant peut avoir sa propre feuille de style CSS. Nous donnons le même no
Un composant peut également utiliser la feuille de style générale `custom.css`. Ce fichier regroupe les attributs de styles standard commun à tous le site.
Chaque feuille de style que l'on souhaite utiliser doit être importer dans le Composant.
Chaque feuille de style que l'on souhaite utiliser doit être importé dans le Composant.
Loading