Skip to content

Commit 7c17d4f

Browse files
committed
Update part1c.md
- Update React documentation links from legacy domain to react.dev - Fix typos in event handler naming convention examples
1 parent 4fff38d commit 7c17d4f

File tree

1 file changed

+13
-14
lines changed

1 file changed

+13
-14
lines changed

src/content/1/fr/part1c.md

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const App = () => {
3838

3939
### Fonctions d'assistance aux composants
4040

41-
Développons notre composant <i>Bonjour</i> afin qu'il devine l'année de naissance de la personne accueillie :
41+
Développons notre composant <i>Hello</i> afin qu'il devine l'année de naissance de la personne accueillie :
4242

4343
```js
4444
const Hello = (props) => {
@@ -178,7 +178,7 @@ const Hello = ({ name, age }) => {...}
178178

179179
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 ?
180180

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 :
182182

183183
```js
184184
const App = (props) => {
@@ -191,10 +191,9 @@ const App = (props) => {
191191
export default App
192192
```
193193

194-
Et le fichier <in>main.js</it> devient :
194+
Et le fichier <in>main.jsx</it> devient :
195195

196196
```js
197-
import React from 'react'
198197
import ReactDOM from 'react-dom/client'
199198

200199
import App from './App'
@@ -212,7 +211,7 @@ Le composant App reçoit la valeur du compteur via la propriété _counter_. Ce
212211
counter += 1
213212
```
214213

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 :
216215

217216
```js
218217
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
249248

250249
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.
251250

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.
253252

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 à
255254

256255
```js
257-
import React from 'react'
258256
import ReactDOM from 'react-dom/client'
259257

260258
import App from './App'
261259

262260
ReactDOM.createRoot(document.getElementById('root')).render(<App />)
263261
```
264262

265-
et <i>App.js</i> change comme suit :
263+
et <i>App.jsx</i> change comme suit :
266264

267265
```js
268266
import { useState } from 'react' // highlight-line
@@ -377,7 +375,7 @@ Modifions l'application pour que l'augmentation du compteur se produise lorsqu'u
377375

378376
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>.
379377

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 :
381379

382380
```js
383381
const App = () => {
@@ -542,7 +540,7 @@ Il est recommandé d'écrire des composants React petits et réutilisables dans
542540

543541
Commençons par implémenter un composant <i>Display</i> chargé d'afficher la valeur du compteur.
544542

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:
546544

547545
> <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>
548546
@@ -629,15 +627,15 @@ const App = () => {
629627

630628
É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.
631629

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.
633631

634632
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."
635633

636634
### Les changements d'état entraînent un nouveau rendu
637635

638636
Revenons une fois de plus sur les grands principes de fonctionnement d'une application.
639637

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_.
641639
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.
642640

643641
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
693691

694692
**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 :
695693

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.
697695
Par exemple, la prop `onClick` du composant Button aurait pu s'appeler `onSmash` :
698696

699697
```js
@@ -711,6 +709,7 @@ const Button = ({ onSmash, text }) => (
711709
<button onClick={onSmash}>
712710
{text}
713711
</button>
712+
)
714713
```
715714

716715
Nous pouvons simplifier une fois de plus le composant Button en déclarant l'instruction de retour en une seule ligne :

0 commit comments

Comments
 (0)