C12 : Développer en Front-end

Résumé S9 : Personnaliser les composants React Cours

1. Styliser les composants React

Il existe différentes manières de styliser les composants React.

 Inline CSS : Il s’agit du style CSS envoyé à l’élément directement via HTML ou JSX. Vous pouvez
inclure un objet JavaScript pour CSS dans les composants React

Voir le Boutton1.js

Le style est: =color:"#fff", borderColor:"#5C5CFF", padding:"10px", backgroundColor:"#5C5CFF"

import React from 'react'
function Button1() {
return (
<button style={{color:"#fff", borderColor:"#5C5CFF", padding:"10px", backgroundColor:"#5C5CFF"
}}>Nom du bouton Inline CSS </button>

);
}
export default Button1

 Modules CSS : Les modules CSS s'assurent que tous les styles d'un composant sont regroupés à un
seul endroit et s'appliquent à ce composant particulier.
o Cela résout certainement le problème de portée globale du CSS.
o La fonctionnalité de composition agit comme une arme pour représenter les styles partagés
entre les états.

Voir le Boutton2.js

Définir une classe pour le bouton : buttonStyle

Le fichier index.css
.buttonStyle {
color: #fff; Le fichier index.css qui contient  le style da classe
border-color: hsl(147, 100%, 68%); buttonStyle
padding:10px;
background-color:#5C5CFF; color: #fff; border-color: #5C5CFF; padding:10px;
} background-color:#5C5CFF;

<button className='buttonStyle'>Nom du
bouton Modules CSS </button>
 Composants stylisés : sont l'une des nouvelles façons d'utiliser CSS dans le JavaScript moderne.
o C'est censé être le successeur des modules CSS
o un moyen d'écrire du CSS qui est limité à un seul composant
 o ne fuit pas vers un autre élément de la page
 Les composants stylisés vous permettent d'écrire du CSS brut dans vos composants sans vous
soucier des collisions de noms de classe.
Les étapes :
1. Installer des composants stylisés
npm install styled-components
2. Ajouter cette importation
import styled from 'styled-components'
3. Créer des composants stylisés
const Button = styled.button`color: #fff;border-color: #5C5CFF;padding:10px;background-color:#5C5CFF;

Voir le Button3.js

import React from 'react'

import styled from 'styled-components'

const Button = styled.button ` color:#fff;border-

color:#5C5CFF;padding:10px;background-
color:#5C5CFF;`
function Button3() {
return <Button > Nom du bouton composants
stylisés </Button>;

}
2. Affichage conditionne
L’affichage conditionnel en React fonctionne de la même façon que les conditions en JavaScript ( if ou
l’opérateur ternaire ? :).
Considérons ces deux composants :

Connecte.js Anonymous.js
<h1>Bienvenue !</h1> <h1>Veuillez-vous inscrire.</h1>
Authentifier.js let [etat, setEtat] = useState()

<p> <label>Connecter: const connecter=()=>{setEtat(()=>etat=true);

</label><input type='radio' Event.preventDefault(); }
name='rd' onChange={connecter}/>
const deconnecter =()=>{setEtat(()=>etat=false);
</p>
Event.preventDefault();}
<p> <label>Deconnecter:
</label><input type='radio'
name='rd' function App() {
onChange={deconnecter}/> </p> return(
<> <Authentifier islogen/> </>
)
{etat?<Connecter/>:<Anonymous/ }
>}
 onChange={connecter}

onChange={deconnecter}

3. Listes et clés
 Les listes :
o La méthode map() : parcours un tableau et afficher ses éléments selon le traitement
appliqué
o accolades {} : représentation des éléments de la liste dans du JSX.
Exemple : représentation en liste des éléments du tableau
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((numbers) =>
<li>{numbers}</li>
);
 Les clés

o Les clés aident React à identifier quels éléments d’une liste ont changé, ont été ajoutés ou
supprimés.
o Vous devez donner une clé à chaque élément dans un tableau afin d’apporter aux éléments
une identité stable

Exemple : multiplier par 2 l’élément du number = 2

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{(number===2)?number*2:number}
NB : Le meilleur moyen de choisir une clé est d’utiliser quelque chose qui identifie de façon unique un
élément d’une liste parmi ses voisins. Le plus souvent on utilise l’ID de notre donnée comme clé :
const todoItems = todos.map((todo) =>
<li key={todo.id}>
{todo.text}
</li>
)
Personnaliser les composants React

Créer l’interface suivante en utilisant les composants stylisés

Analyse de l’interface
Cette interface est composée de 3 composants :
 Header
 Body
 Footer
Le composant Header est composé par :
 Menu
o Button startBoostrap
o List(home, about, list shop)
o Un bloc de 2 images
 HeadBody qui contient le titre Shop in Style
Le composant Body est composé par :
 Composant Sale répéter 4 foies
Le composant Footer est composé par :
 Un message