Skip to content

Commit 1820cc5

Browse files
authored
Merge pull request #3431 from Leagian/part5b-fr-translation
Translation part 5 b in french
2 parents 5066a29 + a2f6b5d commit 1820cc5

File tree

17 files changed

+868
-42
lines changed

17 files changed

+868
-42
lines changed

src/content/0/fr/part0a.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -340,7 +340,7 @@ Ne codez pas avec nano, Notepad ou Gedit. NetBeans n'est pas non plus très bon
340340
341341
Installez également [Node.js](https://nodejs.org/en/). Le matériel a été réalisé avec la version 16.13.2, n'installez donc aucune version antérieure à celle-ci. Voir [Instructions d'installation de Node.js](https://nodejs.org/en/download/package-manager/).
342342
343-
Le gestionnaire de packages de nœuds [npm](https://www.npmjs.com/get-npm) sera automatiquement installé avec Node.js. Nous utiliserons activement npm tout au long du cours. Node est également fourni avec [npx](https://www.npmjs.com/package/npx), dont nous aurons besoin plusieurs fois.
343+
Le gestionnaire de packages de noeuds [npm](https://www.npmjs.com/get-npm) sera automatiquement installé avec Node.js. Nous utiliserons activement npm tout au long du cours. Node est également fourni avec [npx](https://www.npmjs.com/package/npx), dont nous aurons besoin plusieurs fois.
344344
345345
### Fautes de frappe dans le matériel
346346

src/content/0/fr/part0b.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -303,7 +303,7 @@ Document Object Model, ou [DOM](https://en.wikipedia.org/wiki/Document_Object_Mo
303303
304304
Le code JavaScript introduit dans le chapitre précédent utilisait l'API DOM pour ajouter une liste de notes à la page.
305305
306-
Le code suivant crée un nouveau nœud pour la variable <em>ul</em> et y ajoute des nœuds enfants :
306+
Le code suivant crée un nouveau noeud pour la variable <em>ul</em> et y ajoute des noeuds enfants :
307307
308308
```js
309309
var ul = document.createElement('ul')
@@ -323,7 +323,7 @@ document.getElementById('notes').appendChild(ul)
323323
324324
### Manipulation du l'objet document depuis la console
325325
326-
Le nœud le plus haut de l'arborescence DOM d'un document HTML est appelé l'objet <em>document</em>. Nous pouvons effectuer diverses opérations sur une page Web à l'aide de l'API DOM. Vous pouvez accéder à l'objet <em>document</em> en tapant <em>document</em> dans l'onglet Console :
326+
Le noeud le plus haut de l'arborescence DOM d'un document HTML est appelé l'objet <em>document</em>. Nous pouvons effectuer diverses opérations sur une page Web à l'aide de l'API DOM. Vous pouvez accéder à l'objet <em>document</em> en tapant <em>document</em> dans l'onglet Console :
327327
328328
![](../../images/0/15e.png)
329329

src/content/1/fr/part1a.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ Par défaut, le fichier <i>index.html</i> ne contient aucune balise HTML visible
110110
```
111111
Vous pouvez essayer d'ajouter du HTML dans le fichier. Cependant, lors de l'utilisation de React, tout le contenu qui doit être rendu est généralement défini sous forme de composants React.
112112

113-
Jetons un coup d'œil plus attentif au code qui définit le composant :
113+
Jetons un coup d'oeil plus attentif au code qui définit le composant :
114114

115115
```js
116116
const App = () => (
@@ -527,7 +527,7 @@ La console s'affiche en rouge :
527527

528528
![Outils de développement affichant une erreur avec une mise en évidence autour de "Les objets ne sont pas valides en tant qu'enfant React"](../../images/1/34new.png)
529529

530-
Le cœur du problème est que <i>les objets ne sont pas valides en tant qu'enfant React</i>, c'est-à-dire que l'application tente de rendre des <i>objets</i> et échoue.
530+
Le coeur du problème est que <i>les objets ne sont pas valides en tant qu'enfant React</i>, c'est-à-dire que l'application tente de rendre des <i>objets</i> et échoue.
531531

532532
Le code tente de rendre les informations d'un ami comme suit
533533

src/content/1/fr/part1b.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -486,7 +486,7 @@ Si vous souhaitez mieux comprendre comment _this_ fonctionne en JavaScript, Inte
486486

487487
Comme mentionné précédemment, il n'y a pas de mécanisme de classe en JavaScript comme ceux des langages de programmation orientés objet. Il existe cependant des fonctionnalités permettant de "simuler" des [classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) orientées objet.
488488

489-
Jetons un coup d'œil à la <i>syntaxe de classe</i> qui a été introduite dans JavaScript avec ES6, qui simplifie considérablement la définition des classes (ou des choses semblables à des classes) en JavaScript.
489+
Jetons un coup d'oeil à la <i>syntaxe de classe</i> qui a été introduite dans JavaScript avec ES6, qui simplifie considérablement la définition des classes (ou des choses semblables à des classes) en JavaScript.
490490

491491
Dans l'exemple suivant, nous définissons une "classe" appelée Person et deux objets Person :
492492

@@ -508,7 +508,7 @@ const janja = new Person('Janja Garnbret', 22)
508508
janja.greet()
509509
```
510510

511-
En ce qui concerne la syntaxe, les classes et les objets créés à partir de celles-ci rappellent beaucoup les classes et objets Java. Leur comportement est également assez similaire aux objets Java. Au cœur, ce sont toujours des objets basés sur [l'héritage prototypal](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance) de JavaScript . Le type des deux objets est en fait _Object_, puisque JavaScript ne définit essentiellement que les types [Boolean, Null, Undefined, Number, String, Symbol, BigInt et Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures).
511+
En ce qui concerne la syntaxe, les classes et les objets créés à partir de celles-ci rappellent beaucoup les classes et objets Java. Leur comportement est également assez similaire aux objets Java. Au coeur, ce sont toujours des objets basés sur [l'héritage prototypal](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance) de JavaScript . Le type des deux objets est en fait _Object_, puisque JavaScript ne définit essentiellement que les types [Boolean, Null, Undefined, Number, String, Symbol, BigInt et Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures).
512512

513513
L'introduction de la syntaxe de classe était un ajout controversé. Découvrez [Not Awesome: ES6 Classes](https://github.com/petsel/not-awesome-es6-classes) ou [Is "Class" In ES6 The New "Bad" Part ? sur Medium](https://medium.com/@rajaraodv/is-class-in-es6-the-new-bad-part-6c4e6fe1ee65) pour plus de détails.
514514

src/content/1/fr/part1c.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ Si nous examinons attentivement notre code actuel, nous remarquerons que la fonc
6868

6969
### Déstructuration
7070

71-
Avant d'aller plus loin, nous allons jeter un œil à une petite fonctionnalité mais utile du langage JavaScript qui a été ajoutée dans la spécification ES6, qui nous permet de [déstructurer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) des valeurs des objets et des tableaux lors de l'affectation.
71+
Avant d'aller plus loin, nous allons jeter un oeil à une petite fonctionnalité mais utile du langage JavaScript qui a été ajoutée dans la spécification ES6, qui nous permet de [déstructurer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) des valeurs des objets et des tableaux lors de l'affectation.
7272

7373
Dans notre code précédent, nous devions référencer les données transmises à notre composant en tant que _props.name_ et _props.age_. De ces deux expressions, nous avons dû répéter _props.age_ deux fois dans notre code.
7474

src/content/2/fr/part2c.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ Nous pourrions utiliser la fonction basée sur la promise mentionnée précédem
139139

140140
Cela étant dit, nous utiliserons plutôt la bibliothèque [axios](https://github.com/axios/axios) pour la communication entre le navigateur et le serveur. Axios fonctionne comme fetch, mais est un peu plus agréable à utiliser. Une autre bonne raison d'utiliser axios est que nous nous familiarisons avec l'ajout de bibliothèques externes, appelées <i>packages npm</i>, aux projets React.
141141

142-
De nos jours, pratiquement tous les projets JavaScript sont définis à l'aide du gestionnaire de packages de nœuds, alias [npm](https://docs.npmjs.com/getting-started/what-is-npm). Les projets créés à l'aide de create-react-app suivent également le format npm. Un indicateur clair qu'un projet utilise npm est le fichier <i>package.json</i> situé à la racine du projet :
142+
De nos jours, pratiquement tous les projets JavaScript sont définis à l'aide du gestionnaire de packages de noeuds, alias [npm](https://docs.npmjs.com/getting-started/what-is-npm). Les projets créés à l'aide de create-react-app suivent également le format npm. Un indicateur clair qu'un projet utilise npm est le fichier <i>package.json</i> situé à la racine du projet :
143143

144144
```json
145145
{

src/content/2/fr/part2d.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -349,7 +349,7 @@ const App = () => {
349349
export default App
350350
```
351351
352-
Nous pourrions aller plus loin dans notre mise en œuvre. Lorsque le composant <i>App</i> utilise les fonctions, il reçoit un objet contenant la réponse complète à la requête HTTP :
352+
Nous pourrions aller plus loin dans notre mise en oeuvre. Lorsque le composant <i>App</i> utilise les fonctions, il reçoit un objet contenant la réponse complète à la requête HTTP :
353353
354354
```js
355355
noteService
@@ -481,7 +481,7 @@ Tout cela est assez compliqué et tenter de l'expliquer peut simplement rendre l
481481
482482
Le livre "Async et performance" de la série de livres [Vous ne connaissez pas JS](https://github.com/getify/You-Dont-Know-JS/tree/1st-ed) [explique bien le sujet](https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/async%20%26%20performance/ch3.md), mais l'explication fait plusieurs pages.
483483
484-
Les promises sont au cœur du développement JavaScript moderne et il est fortement recommandé d'investir un temps raisonnable pour les comprendre.
484+
Les promises sont au coeur du développement JavaScript moderne et il est fortement recommandé d'investir un temps raisonnable pour les comprendre.
485485
486486
### Syntaxe plus propre pour la définition des Object Literals
487487

src/content/3/fr/part3a.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -379,7 +379,7 @@ La requête est traitée avec la méthode [json](http://expressjs.com/en/4x/api.
379379

380380
![](../../images/3/6ea.png)
381381

382-
Ensuite, jetons un coup d'œil rapide aux données envoyées au format JSON.
382+
Ensuite, jetons un coup d'oeil rapide aux données envoyées au format JSON.
383383

384384
Dans la version précédente où nous utilisions uniquement Node, nous devions transformer les données au format JSON avec la méthode _JSON.stringify_ :
385385

@@ -948,13 +948,13 @@ Que se passe-t-il exactement dans cette ligne de code ? <em>notes.map(n => n.id)
948948
**NB:** Comme il ne s'agit pas d'un projet frontend et que nous ne travaillons pas avec React, l'application <strong> n'est pas créée</strong> avec create-react-app. Vous initialisez ce projet avec la commande <em>npm init</em> qui a été démontrée plus tôt dans cette partie du matériel.
949949

950950

951-
**Forte recommandation:** Lorsque vous travaillez sur du code backend, gardez toujours un œil sur ce qui se passe dans le terminal qui exécute votre application.
951+
**Forte recommandation:** Lorsque vous travaillez sur du code backend, gardez toujours un oeil sur ce qui se passe dans le terminal qui exécute votre application.
952952

953953

954954
#### 3.1: Backend du répertoire téléphonique étape 1
955955

956956

957-
Mettez en œuvre une application Node qui renvoie une liste codée en dur d'entrées de répertoire téléphonique à partir de l'adresse <http://localhost:3001/api/persons>.
957+
Mettez en oeuvre une application Node qui renvoie une liste codée en dur d'entrées de répertoire téléphonique à partir de l'adresse <http://localhost:3001/api/persons>.
958958

959959

960960
Données:
@@ -1033,7 +1033,7 @@ Générez un nouvel identifiant pour l'entrée du répertoire téléphonique ave
10331033

10341034

10351035

1036-
Mettre en œuvre la gestion des erreurs pour la création de nouvelles entrées. La demande n'est pas autorisée à aboutir, si :
1036+
Mettre en oeuvre la gestion des erreurs pour la création de nouvelles entrées. La demande n'est pas autorisée à aboutir, si :
10371037
- Le nom ou le numéro est manquant
10381038
- Le nom existe déjà dans le répertoire.
10391039

src/content/3/fr/part3b.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ Si tout s'est bien passé, l'application fonctionne :
111111

112112
Si ce n'est pas le cas, le problème peut être trouvé en lisant les logs de heroku avec la commande <i>heroku logs</i>.
113113

114-
> **NB** Au moins au début, il est bon de garder un œil sur les logs heroku à tout moment. La meilleure façon de le faire est avec la commande <i>heroku logs -t</i> qui imprime les logs à la console chaque fois que quelque chose se passe sur le serveur.
114+
> **NB** Au moins au début, il est bon de garder un oeil sur les logs heroku à tout moment. La meilleure façon de le faire est avec la commande <i>heroku logs -t</i> qui imprime les logs à la console chaque fois que quelque chose se passe sur le serveur.
115115
116116
> **NB** Si vous déployez depuis un dépôt git où votre code n'est pas sur la branche principale (c'est-à-dire si vous modifiez le [dépôt notes](https://github.com/fullstack-hy2020/part3-notes-backend/tree/part3-2) de la dernière leçon), vous devrez exécuter _git push heroku HEAD:master_. Si vous avez déjà effectué un push sur heroku, vous devrez peut-être exécuter _git push heroku HEAD:main --force_.
117117
@@ -340,7 +340,7 @@ Les exercices suivants ne nécessitent pas beaucoup de lignes de code. Ils peuve
340340
341341
Faites fonctionner le backend avec le frontend phonebook des exercices de la partie précédente. N'implémentez pas encore la fonctionnalité permettant de modifier les numéros de téléphone, qui sera implémentée dans l'exercice 3.17.
342342
343-
Vous devrez probablement faire quelques petits changements au frontend, au moins aux URLs pour le backend. N'oubliez pas de garder la console de développement ouverte dans votre navigateur. Si certaines requêtes HTTP échouent, vous devriez vérifier à partir de l'onglet <i>Réseau</i> ce qui se passe. Gardez également un œil sur la console du backend. Si vous n'avez pas fait l'exercice précédent, il vaut la peine d'imprimer les données de la requête ou <i>request.body</i> à la console dans le gestionnaire d'événements responsable des requêtes POST.
343+
Vous devrez probablement faire quelques petits changements au frontend, au moins aux URLs pour le backend. N'oubliez pas de garder la console de développement ouverte dans votre navigateur. Si certaines requêtes HTTP échouent, vous devriez vérifier à partir de l'onglet <i>Réseau</i> ce qui se passe. Gardez également un oeil sur la console du backend. Si vous n'avez pas fait l'exercice précédent, il vaut la peine d'imprimer les données de la requête ou <i>request.body</i> à la console dans le gestionnaire d'événements responsable des requêtes POST.
344344
345345
#### 3.10 backend répertoire téléphonique étape10
346346
@@ -350,7 +350,7 @@ Déployez le backend sur internet, par exemple sur Heroku.
350350
351351
Testez le backend déployé avec un navigateur et le client REST Postman ou VS Code pour vous assurer qu'il fonctionne.
352352
353-
**PRO TIP:** Lorsque vous déployez votre application sur Heroku, il vaut la peine, au moins au début, de garder un œil sur les logs de l'application heroku **TOUT LE TEMPS** avec la commande <em>heroku logs -t</em>.
353+
**PRO TIP:** Lorsque vous déployez votre application sur Heroku, il vaut la peine, au moins au début, de garder un oeil sur les logs de l'application heroku **TOUT LE TEMPS** avec la commande <em>heroku logs -t</em>.
354354
355355
Ce qui suit est un log concernant un problème typique. Heroku ne peut pas trouver la dépendance d'application <i>express</i> :
356356

src/content/3/fr/part3c.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ lang: fr
77

88
<div class="content">
99

10-
Avant de passer au sujet principal de la persistance des données dans une base de données, nous allons jeter un coup d'œil à quelques façons différentes de déboguer les applications Node.
10+
Avant de passer au sujet principal de la persistance des données dans une base de données, nous allons jeter un coup d'oeil à quelques façons différentes de déboguer les applications Node.
1111

1212
### Débogage des applications Node
1313

@@ -249,7 +249,7 @@ note.save().then(result => {
249249
250250
Lorsque l'objet est enregistré dans la base de données, le gestionnaire d'événements fourni à _then_ est appelé. Le gestionnaire d'événements ferme la connexion à la base de données avec la commande <code>mongoose.connection.close()</code>. Si la connexion n'est pas fermée, le programme ne terminera jamais son exécution.
251251
252-
Le résultat de l'opération de sauvegarde se trouve dans le paramètre _result_ du gestionnaire d'événements. Le résultat n'est pas très intéressant lorsque nous stockons un seul objet dans la base de données. Vous pouvez imprimer l'objet sur la console si vous souhaitez l'examiner de plus près lors de la mise en œuvre de votre application ou pendant le débogage.
252+
Le résultat de l'opération de sauvegarde se trouve dans le paramètre _result_ du gestionnaire d'événements. Le résultat n'est pas très intéressant lorsque nous stockons un seul objet dans la base de données. Vous pouvez imprimer l'objet sur la console si vous souhaitez l'examiner de plus près lors de la mise en oeuvre de votre application ou pendant le débogage.
253253

254254
Prenons également quelques notes supplémentaires en modifiant les données dans le code et en exécutant à nouveau le programme.
255255

@@ -730,7 +730,7 @@ Ce n'est jamais une mauvaise idée d'imprimer l'objet qui a causé l'exception s
730730
731731
La raison pour laquelle le gestionnaire d'erreurs est appelé peut être complètement différente de ce que vous aviez prévu. Si vous consignez l'erreur dans la console, vous vous épargnerez de longues et frustrantes sessions de débogage. En outre, la plupart des services modernes sur lesquels vous déployez votre application prennent en charge une certaine forme de système de journalisation que vous pouvez utiliser pour vérifier ces journaux. Comme nous l'avons mentionné, Heroku en est un.
732732

733-
Chaque fois que vous travaillez sur un projet avec un backend, <i>il est essentiel de garder un œil sur la sortie console du backend</i>. Si vous travaillez sur un petit écran, il suffit de voir une toute petite tranche de la sortie en arrière-plan. Tout message d'erreur attirera votre attention même si la console est loin en arrière-plan :
733+
Chaque fois que vous travaillez sur un projet avec un backend, <i>il est essentiel de garder un oeil sur la sortie console du backend</i>. Si vous travaillez sur un petit écran, il suffit de voir une toute petite tranche de la sortie en arrière-plan. Tout message d'erreur attirera votre attention même si la console est loin en arrière-plan :
734734
735735
![](../../images/3/15b.png)
736736

0 commit comments

Comments
 (0)