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 "add Features on index"

Merged Resolve "add Features on index"
8-add-features-on-index into master
Merged Hugues requested to merge 8-add-features-on-index into master
Compare
and
Show latest version
4 files
+ 86
− 48
Compare changes
  • Side-by-side
  • Inline
Files
4
doc/sections.md
+ 54
− 44
@@ -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`.
@@ -10,30 +10,33 @@ Chaque section de pages va être définie dans un Composant enfant dans le dossi
Un composant (_Componant_) contient: des données qui constituent un état (_state_), des comportements et un rendu (l'affichage), ces trois notions vont interagir entre elles.
## Création du composant de notre section
## 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`.
Nous choisirons de nommer notre fichier `HomepageFeatures`, en PascalCase, car ce composent est destiné à être affiché, dans la `Homepage` (soit la page d'Accueil) et doit afficher les `Features` (ou fonctionnalités) de Froggit.
Nous avons choisi de nommer notre fichier `HomepageFeatures`, en [PascalCase](https://techlib.fr/definition/pascalcase.html), car ce composent est destiné à être affiché, dans la `Homepage` (page d'Accueil) et doit afficher les `Features` (fonctionnalités) de Froggit.
Ce fichier sera composé de 3 parties:
Ce fichier est composé de 3 parties:
- une pour gérer les données de notre section,
- une pour définir les comportements que nous attendons en utilisant différentes fonctions,
- une pour gérer les données de notre section ;
- une pour définir les comportements que nous attendons en utilisant différentes fonctions ;
- une pour définir l'affichage. Nous utilisons le JSX pour cette partie, voir l' [introduction au JSX](https://fr.reactjs.org/docs/introducing-jsx.html) sur la doc de React pour des explications sur cette extension syntaxique du JavaScript.
- une partie qui sera chargée de définir l'affichage. Nous allons utiliser le JSX pour cette dernière partie,(voir l' [introduction au JSX](https://fr.reactjs.org/docs/introducing-jsx.html) sur la doc de React pour des explications sur cette extention syntaxique du JavaScript).
### Les données de notre section
## Les données de notre section
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 allons créer un tableau d'objets JavaScript pour définir les données à afficher dans notre section. Nous allons indiquer les noms des titres, les descriptions et les images que nous voulons afficher.
Nous appelons notre tableau `featuresList` car c'est la liste des fonctionnalités.
Nous appelerons notre tableau `featuresList`, la liste des fonctionnalités:
```
```jsx
const FeatureList = [
{
title: "1. Le Lab 🧪",
@@ -73,15 +76,16 @@ const FeatureList = [
},
];
```
Notre section sera décomposé en 3 parties, chacunes avec 1 titre, 1 description et 1 images en Svg.
Notre section affichera les 4 éléments, chacune avec un titre, une description et une image en Svg.
## Affichage
### Affichage
Il faut maintenant définir l'affichage que nous souhaitons que ce composant renvoie.
Nous allons tout d'abord créer une fonction dans laquelle nous plaçons le rendu, tel un template.
Nous avons créé une fonction qui renvoie le rendu, grâce à un _template_.
L'utilisation du JSX va simplifier cette partie, nous avons trois éléments, les clés issues de notre tableau, à afficher.
L'utilisation du JSX simplifie cette tâche, nous avons trois parties qui sont les clés issues de notre tableau à afficher.
Tous élément JavaScript doit alors être affiché entre accolade: `{---}` afin d'être correctement interprété.
@@ -89,12 +93,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>
<div className={"container"}>
<Svg alt={title} />
</div>
<div>
<h3>{title}</h3>
<p>{description}</p>
@@ -103,44 +107,46 @@ 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.
Nous devrons également importer certains utilitaires, puis exporter notre composant, pour qu'il puisse être réutiliser.
### Réutilisation du composant
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 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. 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`.
## Utilisation du composant
Nous pouvons désormais utiliser notre composant dans un autre, un composant parent.
Nous pouvons désormais utiliser notre composant dans un composant parent.
Dans notre cas, ce composant parent va représenter la page d'accueil du site, `./src/pages/index.js`.
Dans notre cas, ce composant parent est la page d'accueil du site `src/pages/index.js`.
Il suffit d'importer notre composant enfant, que nous venons de créer, et de le mettre, comme une balise, dans la partie return de la fonction `Home`, qui retourne la vue de notre page, de notre composant de Pages `index.js`, :
Il suffit d'importer notre composant enfant, que nous venons de créer, et de le mettre, comme une balise, dans la partie `return` de la fonction `Home`. La fonction `Home` retourne la vue de notre page :
```
```jsx
import React from "react";
import HomepagePromises from "../components/HomepagePromises";
import HomepageFeatures from "../components/HomepageFeatures";
@@ -159,13 +165,17 @@ export default function Home() {
);
}
```
Dans notre balise `Layout`, nous retrouvons 3 composants enfants, le Header nommé <HomepageHeader /> qui a été créé à l'intérieur même de ce composant qui représente la page d'accueil de notre site.
Puis nous retrouvons 2 Composants, qui ont été importé depuis le dossier `./src/components/`:
- <HomepagePromises />, qui rend l'affichage de la section des Prommesses
et
- <HomepageFeatures />, pour la section des fonctionnalités, dont nous venons de voir en détail.
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/`:
1. <HomepagePromises />, pour la section des promesses
2. <HomepageFeatures />, pour la section des fonctionnalités
## Feuille de style CSS
Un Composant peut avoir sa propre feuille de style CSS. Nous donnons le même nom que le fichier de composant au fichier CSS suivi du suffixe `.module.css`.
## feuille de style CSS
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.
- un Composant peut être lié à sa propre feuille de style CSS, un module qui ne devra être affecter uniquement à ce composant, nous donnerons le meme nom au fichier CSS suivi du suffixe `.module.css`. Un composant peut également utiliser la feuille de style générale `custom.css`, qui regroupe les attributs de styles génériques, commun à plusieurs Composants. 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.

Froggit est fièrement fabriqué avec amour par Lydra avec des Logiciels Libres et hébergé en France chez Scaleway | Status du service