You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Jusqu'à présent, toutes nos applications ont été telles que leur apparence reste la même après le rendu initial. Et si on voulait créer un compteur dont la valeur augmente en fonction du temps ou au clic d'un bouton ?
180
180
181
-
Commençons par ce qui suit. Le fichier <i>App.js</i> devient :
181
+
Commençons par ce qui suit. Le fichier <i>App.jsx</i> devient :
182
182
183
183
```js
184
184
constApp= (props) => {
@@ -191,10 +191,9 @@ const App = (props) => {
191
191
exportdefaultApp
192
192
```
193
193
194
-
Et le fichier <in>main.js</it> devient :
194
+
Et le fichier <in>main.jsx</it> devient :
195
195
196
196
```js
197
-
importReactfrom'react'
198
197
importReactDOMfrom'react-dom/client'
199
198
200
199
importAppfrom'./App'
@@ -212,7 +211,7 @@ Le composant App reçoit la valeur du compteur via la propriété _counter_. Ce
212
211
counter +=1
213
212
```
214
213
215
-
le composant ne sera pas rendu à nouveau. Nous pouvons obtenir un nouveau rendu du en appelant la méthode _render_ une deuxième fois, par ex. de la manière suivante :
214
+
le composant ne sera pas rendu à nouveau. Nous pouvons obtenir un nouveau rendu en appelant la méthode _render_ une deuxième fois, par ex. de la manière suivante :
216
215
217
216
```js
218
217
let counter =1
@@ -249,20 +248,19 @@ Faire des appels répétés de la méthode _render_ n'est pas la méthode recomm
249
248
250
249
Jusqu'à présent, tous nos composants étaient simples dans le sens où ils ne contenaient aucun état susceptible de changer au cours du cycle de vie du composant.
251
250
252
-
Ensuite, ajoutons un état au composant <i>App</i> de notre application à l'aide du [state hook](https://reactjs.org/docs/hooks-state.html) de React.
251
+
Ensuite, ajoutons un état au composant <i>App</i> de notre application à l'aide du [state hook](https://react.dev/learn/state-a-components-memory) de React.
253
252
254
-
Nous allons modifier l'application comme suit. <i>main.js</i> revient à
253
+
Nous allons modifier l'application comme suit. <i>main.jsx</i> revient à
@@ -377,7 +375,7 @@ Modifions l'application pour que l'augmentation du compteur se produise lorsqu'u
377
375
378
376
Les éléments bouton prennent en charge les [mouse events](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent), dont [click](https://developer.mozilla.org/en-US/docs/Web/Events/click), l'événement le plus courant. L'événement clic sur un bouton peut également être déclenché avec le clavier ou un écran tactile malgré le nom <i>mouse event</i>.
379
377
380
-
Dans React, [l'application d'un event handler](https://reactjs.org/docs/handling-events.html) à l'événement <i>click</i> se passe comme ceci :
378
+
Dans React, [l'application d'un event handler](https://react.dev/learn/responding-to-events) à l'événement <i>click</i> se passe comme ceci :
381
379
382
380
```js
383
381
constApp= () => {
@@ -542,7 +540,7 @@ Il est recommandé d'écrire des composants React petits et réutilisables dans
542
540
543
541
Commençons par implémenter un composant <i>Display</i> chargé d'afficher la valeur du compteur.
544
542
545
-
Une bonne pratique dans React consiste à [remonter l'état](https://reactjs.org/docs/lifting-state-up.html) dans la hiérarchie des composants. La documentation dit:
543
+
Une bonne pratique dans React consiste à [remonter l'état](https://react.dev/learn/sharing-state-between-components) dans la hiérarchie des composants. La documentation dit:
546
544
547
545
> <i>Souvent, plusieurs composants doivent refléter les mêmes données changeantes. Nous vous recommandons de remonter l'état partagé jusqu'à leur ancêtre commun le plus proche.</i>
548
546
@@ -629,15 +627,15 @@ const App = () => {
629
627
630
628
Étant donné que nous avons maintenant un composant <i>Button</i> facilement réutilisable, nous avons également implémenté une nouvelle fonctionnalité dans notre application en ajoutant un bouton qui peut être utilisé pour décrémenter le compteur.
631
629
632
-
Le gestionnaire d'événements est passé au composant <i>Button</i> via la prop _handleClick_. Le nom de la prop en lui-même n'est pas très significatif, mais notre choix de nom n'était pas complètement aléatoire.
630
+
Le gestionnaire d'événements est passé au composant <i>Button</i> via la prop _onClick_. Le nom de la prop en lui-même n'est pas très significatif, mais notre choix de nom n'était pas complètement aléatoire.
633
631
634
632
Le [tutoriel](https://react.dev/learn/tutorial-tic-tac-toe) officiel de React suggère : "En React, il est conventionnel d'utiliser des noms de type onSomething pour les props qui représentent des événements et handleSomething pour les définitions de fonctions qui gèrent ces événements."
635
633
636
634
### Les changements d'état entraînent un nouveau rendu
637
635
638
636
Revenons une fois de plus sur les grands principes de fonctionnement d'une application.
639
637
640
-
Lorsque l'application démarre, le code dans _App_ est exécuté. Ce code utilise un hook [useState](https://reactjs.org/docs/hooks-reference.html#usestate) pour créer l'état de l'application, en définissant une valeur initiale de la variable _counter_.
638
+
Lorsque l'application démarre, le code dans _App_ est exécuté. Ce code utilise un hook [useState](https://react.dev/reference/react/useState) pour créer l'état de l'application, en définissant une valeur initiale de la variable _counter_.
641
639
Ce composant contient le composant _Display_ - qui affiche la valeur du compteur, 0 - et trois composants _Button_. Les boutons ont tous des gestionnaires d'événements, qui sont utilisés pour changer l'état du compteur.
642
640
643
641
Lorsque l'un des boutons est cliqué, le gestionnaire d'événements est exécuté. Le gestionnaire d'événements modifie l'état du composant _App_ avec la fonction _setCounter_.
@@ -693,7 +691,7 @@ Nous pouvons utiliser la destructuration pour obtenir uniquement les champs requ
693
691
694
692
**NB** : Lors de la création de vos propres composants, vous pouvez nommer les props des gestionnaires d'événements comme bon vous semble, pour cela, vous pouvez vous référer à la documentation de React sur [Naming event handler props](https://react.dev/learn/responding-to-events#naming-event-handler-props). Cela se présente comme suit :
695
693
696
-
> Par convention, les props des gestionnaires d'événements doivent commencer par `on`, suivi d'une lettre majuscule.
694
+
> Par convention, nommez les props des gestionnaires d'événements en commençant par `on` suivi d'une majuscule.
697
695
Par exemple, la prop `onClick` du composant Button aurait pu s'appeler `onSmash` :
0 commit comments