3. Mr. JADLI AISSAM 3
Les Composants
Les composants vous permettent de découper l’interface utilisateur en éléments
indépendants et réutilisables, vous permettant ainsi de considérer chaque élément de
manière isolée.
Conceptuellement, les composants sont comme
des fonctions JavaScript. Ils acceptent des
entrées quelconques (appelées « props ») et
renvoient des éléments React décrivant ce qui
doit apparaître à l’écran.
Les Composants Les Props Le State Data Flow
4. Mr. JADLI AISSAM 4
Types de Composants
Le moyen le plus simple de définir un composant
consiste à écrire une fonction JavaScript :
Cette fonction est un composant React valide car elle accepte un seul argument
« props » contenant des données, et renvoie un élément React. Nous appelons de
tels composants des « fonctions composants », car ce sont littéralement des
fonctions JavaScript
Vous pouvez également utiliser une classe ES6 pour
définir un composant :
Fonction composant
Composant à base de classe
Les Composants Les Props Le State Data Flow
5. Mr. JADLI AISSAM 5
Styles
Comment ajouter des classes CSS aux composants ?
❑ En passant une chaîne à la prop className;
Les classes CSS peuvent dépendre des props ou
de l’état local du composant
❑ Utiliser des styles en ligne;
L’attribut style accepte un objet JavaScript avec
des propriétés en camelCase plutôt qu’une
chaîne de caractères CSS.
Les Composants Les Props Le State Data Flow
6. Mr. JADLI AISSAM
6
Styles
Comment ajouter des classes CSS aux composants ?
❑ Vous pouvez écrire votre style CSS dans un fichier
séparé, simplement enregistrer le fichier avec
l'extension de fichier .css et l'importer dans votre
application.
❑ Une autre façon d'ajouter des styles à votre
application est d'utiliser des modules CSS. Les
modules CSS sont pratiques pour les composants
qui sont placés dans des fichiers séparés
App.css
mystyle.module.css
Les Composants Les Props Le State Data Flow
7. 7
Styles
React ajoute automatiquement le suffixe px (pixel) à
certaines propriétés numériques de style. Si vous
voulez une autre unité que « px », spécifiez la valeur
sous forme de chaîne de caractères avec l’unité
désirée.
N.B : Toutes les propriétés de style ne sont pas systématiquement
converties en pixels pour autant. Certaines restent sans unité (ex.
zoom, order, flex).
Les Composants Les Props Le State Data Flow
8. 8
Styles : Le FlexBox
Flexbox n'a rien à voir avec React. Cela existait bien avant, ce n'est donc pas une création
made in Facebook. C'est un mode de mise en page, utilisé sur du web à la base,
permettant de gérer les tailles et les positions des éléments dynamiquement.
Avec Flexbox, on pense et on construit nos vues comme des boîtes flexibles qui s'ajustent
entre elles.
Les Composants Les Props Le State Data Flow
9. 9
Styles : Le FlexBox
L'idée principale derrière la disposition flexible est de donner au conteneur la possibilité de
modifier la largeur / hauteur de ses enfants (et l'ordre) pour remplir au mieux l'espace
disponible (principalement pour s'adapter à tous les types de dispositifs d'affichage et de
tailles d'écran). Un conteneur flexible développe les éléments pour remplir l'espace libre
disponible ou les réduit pour éviter le débordement.
Les Composants Les Props Le State Data Flow
10. 10
Styles : Le FlexBox
Exemples propriétés Flexbox
Les Composants Les Props Le State Data Flow
11. 11
Les Props
Un composant React est un composant réutilisable qui peut être utilisé maintes et
maintes fois dans l'interface utilisateur, mais nous n'allons pas toujours rendre le même
composant avec les mêmes données. Parfois, nous devons modifier les données ou le
contenu d'un composant. C'est pourquoi les props sont introduits dans React.
Les props sont transmis au
composant React en utilisant
des attributs, puis nous
pouvons y accéder à l'intérieur
du composant en utilisant
simplement « this.props ».
Les Composants Les Props Le State Data Flow
Mr. JADLI AISSAM
12. 12
Les Props
Les props sont disponibles dans le
composant en Lecture seule (read-only) et
ne peuvent être modifiés.
Les données passées à travers les props,
peuvent être envoyées de deux façons
différentes selon la nature de la variable :
❑ En assignant directement la valeur à
l’attribut dans le cas des chaînes de
caractères.
❑ En utilisant les accolades dans le cas des
objets JavaScript ou les autres types
class App extends React.Component {
render() {
const banner = {
title : "Banner Title",
content : "Banner Content"
}
return (
<div>
<Header title="This is a Title" banner={banner} />
</div>
);
}
}
class Header extends React.Component {
render() {
return (
<div>
<h1>{this.props.title}</h1>
<h2>{this.props.banner.title}</h2>
<p>{this.props.banner.content}</p>
</div>
);
}
}
Les Composants Les Props Le State Data Flow
13. 13
Validation de types avec PropTypes
Les Composants Les Props Le State Data Flow
Au fur et à mesure que votre application
grandit, vous pouvez détecter un grand
nombre de bugs grâce à la validation de
types et React possède ses propres
fonctionnalités de validation de types.
Pour lancer la validation de types des props
d’un composant, nous devons ajouter la
propriété spéciale propTypes.
14. 14
Validation de types avec PropTypes
Les Composants Les Props Le State Data Flow
PropTypes exporte un ensemble de
validateurs qui peuvent être utilisés pour
s’assurer que la donnée qu’on reçoit est
valide. Quand une valeur non valide est
fournie à une prop, un message
d’avertissement apparaîtra dans la
console JavaScript. Pour des raisons de
performances, propTypes n’est vérifiée
qu’en mode développement
15. 15
DefaultProps
Les Composants Les Props Le State Data Flow
Vous pouvez définir des valeurs par défaut pour vos props en utilisant la propriété
spéciale nommée defaultProps.
Les defaultProps seront utilisées pour s’assurer
que le prop aura une valeur si elle n’était pas
spécifiée par le composant parent. La validation
de types des propTypes aura lieu après que
defaultProps est résolu, la validation de types
s’applique donc également aux defaultProps
16. 16
L’Etat (State)
Passer uniquement des props d'un
composant à un autre ne rend pas le
composant interactif, car les props sont en
lecture seule. C'est le moment où l’état
(state) qui est lui modifiable à volonté entre
en jeu.
Le state correspond à l’état local du
composant. On peut y stocker des variables
de tout type (valeurs numériques, chaînes de
caractères, tableaux, … etc.).
Les Composants Les Props Le State Data Flow
17. 17
L’Etat (State)
La modification du state se fait grâce à la méthode setState() ce qui
provoque une réexécution de la méthode render() du composant.
Pour utiliser le state dans un composant, il faut l’initialiser dans le
constructeur du composant, ensuite, le state est accessible grâce à
this.state. Le changement dans le state d’un composant rafraîchit
tout les composants enfants du composant.
Les Composants Les Props Le State Data Flow
18. 18
Data Flow
Plusieurs composants ont souvent besoin de refléter les mêmes données dynamiques.
C’est pourquoi il est souvent de pratique de faire remonter l’état partagé dans leur
ancêtre commun le plus proche.
Les Composants Les Props Le State Data Flow
Dans React, il existe 2 façons de
réaliser des échanges d’information:
❖ Les props : Depuis un composant
vers les composants enfants
❖ Les callbacks : On peut envoyer
des fonctions vers les composants
enfants en utilisant les props
19. 19
Callbacks
Au lieu de transmettre une partie de
l'état à un composant enfant, le parent
peut transmettre une fonction de
rappel (callback).
Cette fonction de rappel est exécutée
ultérieurement, généralement via une
interaction avec le composant enfant.
Le but de cette fonction de rappel est
de modifier une partie de l'état qui fait
partie du composant parent. Cela ferme
la boucle de données.
Les Composants Les Props Le State Data Flow
22. Mr. JADLI AISSAM 22
React Quiz
Un Composant React peut être défini en tant que ___
❑ Un tableau de propriétés
❑ Une fonction JS qui n’accepte aucun paramètre
❑ Une Classe ES6 étendant la classe Component
❑ Une fonction JS qui accepte un seul paramètre
1
23. Mr. JADLI AISSAM 23
React Quiz
La casse des styles JSX définis en ligne est ___
❑Pas de Casse
❑CamelCase
❑PascalCase
2
24. Mr. JADLI AISSAM 24
React Quiz
Le FlexBox est ___
❑ Une exclusivité ReactJS
❑Utilisé pour obtenir un design responsive
❑Utilisé pour définir l’architecture de la page
❑Utilisé pour réaliser des animations CSS
3
25. Mr. JADLI AISSAM 25
React Quiz
La propriété justifyContent permet de ___
❑ Définir l’alignement sur l’axe secondaire
❑Définir l’alignement sur l’axe principal
❑Définir la taille du contenu
❑Définir la couleur du contenu
4
26. Mr. JADLI AISSAM 26
React Quiz
Les props d’un composant représentent ___
❑Son résultat d’affichage
❑Ses paramètres
❑Son comportement
5
27. Mr. JADLI AISSAM 27
React Quiz
Choisir la (les) syntaxes correctes pour l’envoi d’un prop :
❑<Welcome name={Alex} />
❑<Welcome name={‘Alex’} />
❑<Welcome age={25} />
❑<Welcome age=25 />
6
28. Mr. JADLI AISSAM 28
React Quiz
L’état (State) est sauvegardée dans
___
❑Le composant principal de l’application (nommé root)
❑Le composant parent
❑L’intérieur de chaque composant
❑Un fichier texte
7
29. Mr. JADLI AISSAM 29
React Quiz
Sélectionner le(s) réponse(s) juste(s) :
8
❑Les props sont immutable mais l’état change
❑L’état est immutable mais les props changent
❑Les props et l’état changent
❑Les props et l’état sont immutable
30. Mr. JADLI AISSAM 30
React Quiz
Pour changer l’état d’un composant ___
❑Modifier directement la valeur this.state
❑Utiliser la méthode changeState()
❑ Utiliser la méthode setState()
❑Appeler la méthode render()
9
31. Mr. JADLI AISSAM 31
React Quiz
Un Composant peut ___
❑ Recevoir des données depuis sont parent
❑ Envoyer des données à son parent
❑ Envoyer directement des données au composant voisin
❑ Exécuter des méthodes dans le composant parent
10
